Skip to content
sdlc

Live-preview markdown editing engine

State: open/verified · Kind: module · Audience: system

Summary

Section titled “Summary”
  • CodeMirror 6 live-preview markdown editor, plus a Vue 3 wrapper, that derives every editing decision from @codemirror/lang-markdown’s Lezer syntax tree — no bespoke parser — and edits only via exact-range swap writes so untouched bytes never change.
  • The fleet’s adopted editor engine per D-K3EM (markdown editor chrome and plugin environment): @sksizer/obsidian-md renders notes, this package edits them, and @sksizer/markdown-ui is the planned chrome layer (toolbar, menus, popovers) built on its plugin/command seams.

Statement

Section titled “Statement”

Provides interactive, Obsidian-style live-preview editing of markdown note bodies: syntax-tree-driven decorations (hides, marks, widgets) for headings, emphasis, wikilinks, tags, callouts, tables, math, and mermaid; a plugin contract (EditorPlugin/compilePlugins) merging built-ins and host extensions into one dispatch table; a command catalogue driving toolbars, palettes, and a slash menu; [[/#// autocomplete; click-to-navigate wikilinks/tags; and a Vue 3 composable (useObsidianEditor) with two-way doc/mode sync. It is already consumed by the Notes and Agent-Pants experiences in solutions/determined. It is part of the markdown ecosystem (C-8FKM) as its editor layer: the counterpart of the renderer C-0034, working on markdown text with byte-fidelity edits (exact-range swap writes). It parses via CodeMirror’s own Lezer grammar rather than the shared Rust/WASM CST core, and D-K3EM is the decision covering this surface.

What it provides

Section titled “What it provides”
  • Tree-driven live-preview decorations across headings, emphasis, wikilinks, tags, callouts, tables, math, mermaid, HTML blocks, and transclusions
  • EditorPlugin contract so built-ins and host plugins share one decoration/command/completion dispatch table
  • A command catalogue (allCommands, commandStates, runCommand) plus a derived keymap
  • [[, #, and / autocomplete sources; syntax-tree-based click handling
  • useObsidianEditor Vue composable: two-way doc/mode binding, outline, anchors, attachment insertion
  • Swap-writer discipline asserted byte-identical outside changed ranges by a command x fixture matrix test

Underlying implementation

Section titled “Underlying implementation”
  • packages/ts/obsidian-editor/src (decorations, plugins, commands, autocomplete, clicks, markdown-extension)
  • packages/ts/obsidian-editor/src/vue (Vue 3 wrapper)
  • Consumers: solutions/determined/experiences/notes, solutions/determined/experiences/agent-pants (per D-K3EM wave 1)

Locations

Section titled “Locations”
  • packages/ts/obsidian-editor/src/
  • packages/ts/obsidian-editor/src/vue/
  • packages/ts/obsidian-editor/package.json

← Back to Capabilities