feat: add CodeMirror-based code editor component and routing setup
- 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.
This commit is contained in:
27
src/components/CodeEditor.tsx
Normal file
27
src/components/CodeEditor.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
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"
|
||||
/>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user