Skip to content

Obsidian-style live preview for the note editor (phase two) #80

Description

@EurFelux

Motivation

The book-note editor now runs on CodeMirror 6 in syntax-highlighted source mode (phase one, shipped 2026-06-12): headings size up, bold/italic/code render their real styling, markers are dimmed but still visible. The agreed end state is Obsidian-style live preview — markers hidden on non-active lines, the cursor line revealing raw source.

Current behavior

All Markdown markers (#, **, >) remain visible while editing, merely dimmed. Saved cards render via Streamdown, so the editing view and the rendered card look noticeably different.

Desired direction

Build on the existing src/renderer/components/MarkdownEditor.tsx kernel (no editor swap needed) with a CodeMirror decoration plugin:

  • Hide/replace markers on lines not containing the cursor (headings, emphasis, quote markers, list bullets)
  • Inline-render links (and possibly images) outside the active line
  • Keep visual parity with the Streamdown card rendering so save is not a surprise

Known risk areas (investigate before building)

  • CJK IME composition interacting with decorations — critical for our users; phase-one smoke could not exercise real IME composition
  • Evaluate existing CM6 live-preview community plugins vs hand-rolled decorations (quality/maintenance varies)
  • Upstream quirk to revisit: exiting a blockquote requires pressing Enter twice on an empty quoted line (@codemirror/lang-markdown intentional behavior) — fine for source mode, may feel off in live preview

Source: user request 2026-06-12 (phase-two follow-up to the CodeMirror editor upgrade)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:readerReading view (epub & pdf)area:uiUI components & design systemenhancementNew feature or request

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions