Add live preview with reveal-on-focus for markdown syntax

- Implement Obsidian/Bear-style live preview via CM6 ViewPlugin + decorations
- Headings: ## markers hidden, text rendered large — revealed on cursor line
- Bold/italic: ** and * markers hidden, text styled — revealed on cursor line
- Links: [text](url) rendered as styled text — revealed on cursor line
- Inline code: backticks hidden, content styled with monospace — revealed on cursor line
- Horizontal rules rendered as styled <hr> elements
- Add Playwright test verifying reveal-on-focus behavior

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-14 20:11:47 +01:00
parent bc2dd10f9e
commit 72bc90e3be
3 changed files with 235 additions and 0 deletions

View File

@@ -5,6 +5,7 @@ import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
import { markdown } from '@codemirror/lang-markdown'
import { syntaxHighlighting, defaultHighlightStyle, bracketMatching } from '@codemirror/language'
import { oneDark } from '@codemirror/theme-one-dark'
import { livePreview } from './livePreview'
import type { VaultEntry } from '../types'
import './Editor.css'
@@ -68,6 +69,7 @@ export function Editor({ content, selectedNote }: EditorProps) {
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
oneDark,
editorTheme,
livePreview(),
keymap.of([...defaultKeymap, ...historyKeymap]),
EditorView.lineWrapping,
],