Spaces:
Paused
Paused
File size: 2,327 Bytes
2376451 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 'use client'
import { useRef, useEffect } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { html } from '@codemirror/lang-html'
import { css } from '@codemirror/lang-css'
import { javascript } from '@codemirror/lang-javascript'
import { EditorView } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
interface CodeEditorProps {
value: string
onChange: (value: string) => void
language: 'html' | 'css' | 'js'
}
export function CodeEditor({ value, onChange, language }: CodeEditorProps) {
const editorRef = useRef<HTMLDivElement>(null)
const extensions = [
EditorView.lineWrapping,
EditorView.theme({
'&': {
height: '100%',
fontSize: '14px',
},
'.cm-content': {
padding: '12px',
},
'.cm-gutters': {
backgroundColor: '#1e293b',
border: 'none',
},
'.cm-lineNumbers .cm-gutterElement': {
color: '#64748b',
padding: '0 8px',
},
}),
EditorState.tabSize.of(2),
]
const getExtensions = () => {
const baseExtensions = [...extensions]
if (language === 'html') baseExtensions.push(html())
if (language === 'css') baseExtensions.push(css())
if (language === 'js') baseExtensions.push(javascript())
return baseExtensions
}
return (
<div className="h-full bg-dark-950" ref={editorRef}>
<CodeMirror
value={value}
height="100%"
extensions={getExtensions()}
onChange={onChange}
theme="dark"
basicSetup={{
lineNumbers: true,
highlightActiveLineGutter: true,
highlightSpecialChars: true,
foldGutter: true,
drawSelection: true,
dropCursor: false,
allowMultipleSelections: true,
indentOnInput: true,
bracketMatching: true,
closeBrackets: true,
autocompletion: true,
rectangularSelection: false,
crosshairCursor: false,
highlightActiveLine: true,
highlightSelectionMatches: true,
closeBracketsKeymap: true,
defaultKeymap: true,
searchKeymap: false,
historyKeymap: true,
foldKeymap: true,
completionKeymap: true,
lintKeymap: true,
}}
/>
</div>
)
}
|