Summary
Replace the plain <textarea> in the CSS Editor tab with a proper code editor that has CSS syntax highlighting, line numbers, and bracket matching.
Motivation
The current textarea works but is hard to use for editing large theme files. Obsidian ships with CodeMirror 6 internally — we should leverage it rather than bundle a separate editor.
Approach
Use Obsidian's exposed CodeMirror 6 instance (import { EditorView } from '@codemirror/view') which is available as a global in Obsidian's runtime. This avoids bundling a duplicate editor.
Features to Preserve
- Cmd+F search (currently window-level capture listener)
- Live CSS updates on every keystroke
- Save button behaviour
- Theme switcher dropdown
Acceptance Criteria
- CSS is syntax-highlighted (properties, values, selectors, comments)
- Line numbers visible
- Matching brackets highlighted
- Existing Cmd+F search still works
Summary
Replace the plain
<textarea>in the CSS Editor tab with a proper code editor that has CSS syntax highlighting, line numbers, and bracket matching.Motivation
The current textarea works but is hard to use for editing large theme files. Obsidian ships with CodeMirror 6 internally — we should leverage it rather than bundle a separate editor.
Approach
Use Obsidian's exposed CodeMirror 6 instance (
import { EditorView } from '@codemirror/view') which is available as a global in Obsidian's runtime. This avoids bundling a duplicate editor.Features to Preserve
Acceptance Criteria