{yamlError && (
{yamlError}
)}
-
{autocomplete && autocomplete.items.length > 0 && (
{
+ it('applies delimiter class to --- lines', () => {
+ const { view, parent } = createView('---\ntitle: Hello\n---\n\n# Heading')
+ const delimiters = parent.querySelectorAll('.cm-frontmatter-delimiter')
+ expect(delimiters.length).toBeGreaterThanOrEqual(2)
+ view.destroy()
+ parent.remove()
+ })
+
+ it('applies key class to YAML keys', () => {
+ const { view, parent } = createView('---\ntitle: Hello\ntags: one\n---\n')
+ const keys = parent.querySelectorAll('.cm-frontmatter-key')
+ expect(keys.length).toBeGreaterThanOrEqual(2)
+ view.destroy()
+ parent.remove()
+ })
+
+ it('applies value class to YAML values', () => {
+ const { view, parent } = createView('---\ntitle: Hello\n---\n')
+ const values = parent.querySelectorAll('.cm-frontmatter-value')
+ expect(values.length).toBeGreaterThanOrEqual(1)
+ view.destroy()
+ parent.remove()
+ })
+
+ it('applies heading class to markdown headings', () => {
+ const { view, parent } = createView('# Heading One\n\nSome text\n\n## Heading Two')
+ const headings = parent.querySelectorAll('.cm-md-heading')
+ expect(headings.length).toBeGreaterThanOrEqual(2)
+ view.destroy()
+ parent.remove()
+ })
+
+ it('does not apply heading class to plain text', () => {
+ const { view, parent } = createView('Just some plain text\nAnother line')
+ const headings = parent.querySelectorAll('.cm-md-heading')
+ expect(headings.length).toBe(0)
+ view.destroy()
+ parent.remove()
+ })
+
+ it('handles content without frontmatter', () => {
+ const { view, parent } = createView('# Just a heading\n\nNo frontmatter here.')
+ const delimiters = parent.querySelectorAll('.cm-frontmatter-delimiter')
+ expect(delimiters.length).toBe(0)
+ const keys = parent.querySelectorAll('.cm-frontmatter-key')
+ expect(keys.length).toBe(0)
+ view.destroy()
+ parent.remove()
+ })
+})
+
+describe('frontmatterHighlightTheme', () => {
+ it('returns an EditorView extension for light mode', () => {
+ const theme = frontmatterHighlightTheme(false)
+ expect(theme).toBeDefined()
+ })
+
+ it('returns an EditorView extension for dark mode', () => {
+ const theme = frontmatterHighlightTheme(true)
+ expect(theme).toBeDefined()
+ })
+})
diff --git a/src/extensions/frontmatterHighlight.ts b/src/extensions/frontmatterHighlight.ts
new file mode 100644
index 00000000..e48de074
--- /dev/null
+++ b/src/extensions/frontmatterHighlight.ts
@@ -0,0 +1,100 @@
+import { ViewPlugin, Decoration, DecorationSet, EditorView } from '@codemirror/view'
+import { RangeSetBuilder } from '@codemirror/state'
+
+const frontmatterDelimiter = Decoration.mark({ class: 'cm-frontmatter-delimiter' })
+const frontmatterKey = Decoration.mark({ class: 'cm-frontmatter-key' })
+const frontmatterValue = Decoration.mark({ class: 'cm-frontmatter-value' })
+const markdownHeading = Decoration.mark({ class: 'cm-md-heading' })
+
+function findFrontmatterEnd(doc: { lines: number; line(n: number): { text: string } }): number {
+ if (doc.lines < 1) return -1
+ const first = doc.line(1).text
+ if (first !== '---') return -1
+ for (let i = 2; i <= doc.lines; i++) {
+ if (doc.line(i).text === '---') return i
+ }
+ return -1
+}
+
+function buildDecorations(view: EditorView): DecorationSet {
+ const builder = new RangeSetBuilder()
+ const doc = view.state.doc
+ const fmEnd = findFrontmatterEnd(doc)
+
+ for (let i = 1; i <= doc.lines; i++) {
+ const line = doc.line(i)
+ const text = line.text
+
+ if (i <= fmEnd) {
+ decorateFrontmatterLine(builder, line.from, text, i === 1 || i === fmEnd)
+ } else {
+ decorateMarkdownLine(builder, line.from, text)
+ }
+ }
+
+ return builder.finish()
+}
+
+function decorateFrontmatterLine(
+ builder: RangeSetBuilder,
+ from: number,
+ text: string,
+ isDelimiter: boolean,
+): void {
+ if (text.length === 0) return
+
+ if (isDelimiter) {
+ builder.add(from, from + text.length, frontmatterDelimiter)
+ return
+ }
+
+ const colonIdx = text.indexOf(':')
+ if (colonIdx > 0) {
+ builder.add(from, from + colonIdx, frontmatterKey)
+ const valueStart = colonIdx + 1
+ const valuePart = text.slice(valueStart).trimStart()
+ if (valuePart.length > 0) {
+ const valueOffset = text.indexOf(valuePart, valueStart)
+ builder.add(from + valueOffset, from + text.length, frontmatterValue)
+ }
+ }
+}
+
+function decorateMarkdownLine(
+ builder: RangeSetBuilder,
+ from: number,
+ text: string,
+): void {
+ if (/^#{1,6}\s/.test(text)) {
+ builder.add(from, from + text.length, markdownHeading)
+ }
+}
+
+export const frontmatterHighlightPlugin = ViewPlugin.fromClass(
+ class {
+ decorations: DecorationSet
+ constructor(view: EditorView) {
+ this.decorations = buildDecorations(view)
+ }
+ update(update: { docChanged: boolean; viewportChanged: boolean; view: EditorView }) {
+ if (update.docChanged || update.viewportChanged) {
+ this.decorations = buildDecorations(update.view)
+ }
+ }
+ },
+ { decorations: (v) => v.decorations },
+)
+
+export function frontmatterHighlightTheme(isDark: boolean) {
+ const keyColor = isDark ? '#f0a0a0' : '#c9383e'
+ const valueColor = isDark ? '#a0d0a0' : '#2a7e4f'
+ const delimiterColor = isDark ? '#f0a0a0' : '#c9383e'
+ const headingColor = isDark ? '#88c0ff' : '#0969da'
+
+ return EditorView.baseTheme({
+ '.cm-frontmatter-delimiter': { color: delimiterColor, fontWeight: '600' },
+ '.cm-frontmatter-key': { color: keyColor },
+ '.cm-frontmatter-value': { color: valueColor },
+ '.cm-md-heading': { color: headingColor, fontWeight: '600' },
+ })
+}
diff --git a/src/hooks/useCodeMirror.ts b/src/hooks/useCodeMirror.ts
new file mode 100644
index 00000000..3b7f4417
--- /dev/null
+++ b/src/hooks/useCodeMirror.ts
@@ -0,0 +1,119 @@
+import { useRef, useEffect } from 'react'
+import { EditorView, lineNumbers, highlightActiveLine, keymap } from '@codemirror/view'
+import { EditorState } from '@codemirror/state'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { frontmatterHighlightPlugin, frontmatterHighlightTheme } from '../extensions/frontmatterHighlight'
+
+const FONT_FAMILY = '"Berkeley Mono", "JetBrains Mono", "Fira Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+
+export interface CodeMirrorCallbacks {
+ onDocChange: (doc: string) => void
+ onCursorActivity: (view: EditorView) => void
+ onSave: () => void
+ onEscape: () => boolean
+}
+
+function buildBaseTheme(isDark: boolean) {
+ const bg = isDark ? '#1e1e1e' : '#ffffff'
+ const fg = isDark ? '#d4d4d4' : '#1e1e1e'
+ const gutterBg = isDark ? '#1e1e1e' : '#ffffff'
+ const gutterColor = isDark ? '#555' : '#aaa'
+ const activeLineBg = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,100,255,0.06)'
+ const gutterBorder = isDark ? '#333' : '#eee'
+
+ return EditorView.theme({
+ '&': {
+ fontSize: '13px',
+ fontFamily: FONT_FAMILY,
+ backgroundColor: bg,
+ color: fg,
+ flex: '1',
+ minHeight: '0',
+ },
+ '.cm-scroller': {
+ fontFamily: FONT_FAMILY,
+ lineHeight: '1.6',
+ padding: '16px 0',
+ overflow: 'auto',
+ },
+ '.cm-content': {
+ padding: '0 32px 0 16px',
+ caretColor: fg,
+ },
+ '.cm-gutters': {
+ backgroundColor: gutterBg,
+ color: gutterColor,
+ borderRight: `1px solid ${gutterBorder}`,
+ paddingLeft: '16px',
+ },
+ '.cm-lineNumbers .cm-gutterElement': {
+ paddingRight: '12px',
+ minWidth: '28px',
+ textAlign: 'right',
+ },
+ '.cm-activeLine': {
+ backgroundColor: activeLineBg,
+ },
+ '.cm-activeLineGutter': {
+ backgroundColor: activeLineBg,
+ },
+ '&.cm-focused': { outline: 'none' },
+ '.cm-line': { padding: '0' },
+ }, { dark: isDark })
+}
+
+function buildSaveKeymap(callbacks: { current: CodeMirrorCallbacks }) {
+ return keymap.of([{
+ key: 'Mod-s',
+ run: () => { callbacks.current.onSave(); return true },
+ }, {
+ key: 'Escape',
+ run: () => callbacks.current.onEscape(),
+ }])
+}
+
+export function useCodeMirror(
+ containerRef: React.RefObject,
+ content: string,
+ isDark: boolean,
+ callbacks: CodeMirrorCallbacks,
+) {
+ const viewRef = useRef(null)
+ const callbacksRef = useRef(callbacks)
+ callbacksRef.current = callbacks
+
+ useEffect(() => {
+ const parent = containerRef.current
+ if (!parent) return
+
+ const state = EditorState.create({
+ doc: content,
+ extensions: [
+ lineNumbers(),
+ highlightActiveLine(),
+ history(),
+ keymap.of([...defaultKeymap, ...historyKeymap]),
+ buildSaveKeymap(callbacksRef),
+ buildBaseTheme(isDark),
+ frontmatterHighlightTheme(isDark),
+ frontmatterHighlightPlugin,
+ EditorView.updateListener.of((update) => {
+ if (update.docChanged) {
+ callbacksRef.current.onDocChange(update.state.doc.toString())
+ }
+ if (update.selectionSet || update.docChanged) {
+ callbacksRef.current.onCursorActivity(update.view)
+ }
+ }),
+ ],
+ })
+
+ const view = new EditorView({ state, parent })
+ viewRef.current = view
+ return () => { view.destroy(); viewRef.current = null }
+ // Re-create editor when isDark changes (theme is baked into extensions)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isDark])
+
+ return viewRef
+}