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:
@@ -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,
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user