8b72a00127
Replaces the plain textarea on /caddy/edit with a CodeMirror 6 component that provides live Caddyfile syntax highlighting (keywords, named matchers, comments). The editor is dynamically imported (ssr: false) to prevent hydration errors. The write/validate/save/reload state machine and content flow remain unchanged. Bundle impact: ~300 kB additional for the /caddy/edit route (CodeMirror 6 core + @uiw/react-codemirror). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
25 lines
727 B
TypeScript
25 lines
727 B
TypeScript
'use client'
|
|
import CodeMirror from '@uiw/react-codemirror'
|
|
import { caddyfileLanguage } from '@/lib/codemirror/caddyfile-mode'
|
|
import { EditorView } from '@codemirror/view'
|
|
|
|
type Props = {
|
|
value: string
|
|
onChange: (next: string) => void
|
|
readOnly?: boolean
|
|
}
|
|
|
|
export default function CaddyCodeMirror({ value, onChange, readOnly }: Props) {
|
|
return (
|
|
<CodeMirror
|
|
value={value}
|
|
onChange={onChange}
|
|
readOnly={readOnly}
|
|
extensions={[caddyfileLanguage, EditorView.lineWrapping]}
|
|
theme="dark"
|
|
height="480px"
|
|
basicSetup={{ lineNumbers: true, foldGutter: false, highlightActiveLine: !readOnly }}
|
|
className="rounded-lg border border-border overflow-hidden text-xs"
|
|
/>
|
|
)
|
|
}
|