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:
2026-01-28 02:22:44 +08:00
commit 4cbec4ed1d
17 changed files with 2313 additions and 0 deletions

View 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"
/>
)
}