abearxiong
4cbec4ed1d
- Implemented CodeEditor component using CodeMirror for JavaScript editing. - Added global styles in index.css for consistent UI. - Set up routing with TanStack Router, including root and nested routes. - Created About, C, and Editor routes with respective components. - Integrated CodeEditor into the Editor route for code editing functionality. - Configured TypeScript settings in tsconfig.json for strict type checking. - Established Vite configuration for React and TanStack Router integration.
28 lines
610 B
TypeScript
28 lines
610 B
TypeScript
import CodeMirror from '@uiw/react-codemirror'
|
|
import { javascript } from '@codemirror/lang-javascript'
|
|
import { useState } from 'react'
|
|
|
|
interface CodeEditorProps {
|
|
initialValue?: string
|
|
onChange?: (value: string) => void
|
|
}
|
|
|
|
export function CodeEditor({ initialValue = '', onChange }: CodeEditorProps) {
|
|
const [value, setValue] = useState(initialValue)
|
|
|
|
const handleChange = (val: string) => {
|
|
setValue(val)
|
|
onChange?.(val)
|
|
}
|
|
|
|
return (
|
|
<CodeMirror
|
|
value={value}
|
|
height="500px"
|
|
extensions={[javascript()]}
|
|
onChange={handleChange}
|
|
theme="dark"
|
|
/>
|
|
)
|
|
}
|