'use client' import React, { useState, useEffect, useRef } from 'react' import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror' import { html } from '@codemirror/lang-html' import { css } from '@codemirror/lang-css' import { javascript } from '@codemirror/lang-javascript' import { foldGutter } from '@codemirror/language' import { indentUnit } from '@codemirror/language' import { EditorView } from '@codemirror/view' import { foldable, foldEffect } from '@codemirror/language' import { ChevronDown, Play, Pause, Maximize2, Minimize2, Code, Palette, Code2 } from 'lucide-react' import { Button } from '@/components/ui/button' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { html as formatHTML, css as formatCSS, js as formatJS } from 'js-beautify' export default function Editor() { const [htmlCode, setHtmlCode] = useState('

Hello, Devs!

') const [cssCode, setCssCode] = useState('body { font-family: sans-serif; }') const [jsCode, setJsCode] = useState('console.log("Hello from JS!");') const [isRunning, setIsRunning] = useState(true) const [activeEditor, setActiveEditor] = useState('html') const [isPreviewMaximized, setIsPreviewMaximized] = useState(false) const [editorWidth, setEditorWidth] = useState('50%') const [previewWidth, setPreviewWidth] = useState('50%') const [isMobile, setIsMobile] = useState(false) const editorRef = useRef(null) const previewRef = useRef(null) const mainContainerRef = useRef(null) useEffect(() => { const handleResize = () => { const isMobileView = window.innerWidth < 768 setIsMobile(isMobileView) if (isMobileView) { setEditorWidth('100%') setPreviewWidth('100%') } else { setEditorWidth('50%') setPreviewWidth('50%') } adjustEditorHeight() } handleResize() window.addEventListener('resize', handleResize) return () => { window.removeEventListener('resize', handleResize) } }, []) const adjustEditorHeight = () => { if (mainContainerRef.current) { const viewportHeight = window.innerHeight const containerTop = mainContainerRef.current.getBoundingClientRect().top const newHeight = viewportHeight - containerTop mainContainerRef.current.style.height = `${newHeight}px` mainContainerRef.current.style.maxHeight = `${newHeight}px` } } useEffect(() => { adjustEditorHeight() window.addEventListener('resize', adjustEditorHeight) return () => { window.removeEventListener('resize', adjustEditorHeight) } }, []) const updatePreview = () => { const preview = document.getElementById('preview') as HTMLIFrameElement if (preview) { const previewContent = ` ${htmlCode} ` preview.srcdoc = previewContent } } useEffect(() => { if (isRunning) { updatePreview() } }, [htmlCode, cssCode, jsCode, isRunning]) const togglePreview = () => { setIsRunning(!isRunning) } const formatCode = () => { let formattedCode = '' let code = '' switch (activeEditor) { case 'html': code = htmlCode.trim() formattedCode = formatHTML(code, { indent_size: 2, wrap_line_length: 80 }) setHtmlCode(formattedCode) break case 'css': code = cssCode.trim() formattedCode = formatCSS(code, { indent_size: 2 }) setCssCode(formattedCode) break case 'js': code = jsCode.trim() formattedCode = formatJS(code, { indent_size: 2, space_in_empty_paren: true }) setJsCode(formattedCode) break } } const analyzeCode = () => { let code = '' switch (activeEditor) { case 'html': code = htmlCode break case 'css': code = cssCode break case 'js': code = jsCode break } const lines = code.split('\n').length const characters = code.length console.log(`Analysis for ${activeEditor.toUpperCase()}:`) console.log(`- Lines: ${lines}`) console.log(`- Characters: ${characters}`) } const maximizeEditor = () => { setEditorWidth('100%') setPreviewWidth('0%') } const minimizeEditor = () => { setEditorWidth('50%') setPreviewWidth('50%') } const togglePreviewMaximize = () => { setIsPreviewMaximized(!isPreviewMaximized) if (!isPreviewMaximized) { setEditorWidth('0%') setPreviewWidth('100%') } else { setEditorWidth('50%') setPreviewWidth('50%') } } const getEditorExtensions = () => { return [ foldGutter(), indentUnit.of(' '), EditorView.lineWrapping, ] } const foldAllCode = () => { if (editorRef.current) { const { state } = editorRef.current const foldable = state.foldable if (foldable) { editorRef.current.dispatch({ effects: foldable.map(range => foldEffect.of(true)) }) } } } const unfoldAllCode = () => { if (editorRef.current) { editorRef.current.dispatch({ effects: foldEffect.of(false) }) } } return (

setActiveEditor(value as 'html' | 'css' | 'js')}>

 HTML


              
                
                  
                
                
                  Format {activeEditor.toUpperCase()}
                  Analyze {activeEditor.toUpperCase()}
                  Fold All
                  Unfold All


            
              
                 setHtmlCode(value)}
                  theme="dark"
                  className="h-full overflow-auto"
                />
              
              
                 setCssCode(value)}
                  theme="dark"
                  className="h-full overflow-auto"
                />
              
              
                 setJsCode(value)}
                  theme="dark"
                  className="h-full overflow-auto"
                />


        
          
            Preview

)
}

About

About