Markdown viewing and editing UI chrome
State: open/verified · Kind: module · Audience: system
Summary
Section titled “Summary”- A Nuxt layer of markdown viewing/editing UI chrome — MdSurface, MdViewer, MdToolbar, and their supporting overlays — that a host product mounts directly.
- Composes two existing engines,
@sksizer/obsidian-md(unified/remark renderer) and@sksizer/obsidian-editor(CodeMirror live-preview editor); parses no markdown itself and defines no editor extensions of its own beyond a mode-cycle keymap plugin.
Statement
Section titled “Statement”MdSurface takes a note body and renders it read/live/source: read mode loads MdViewer (the renderer)
and edit modes load MdEditorPane (the CodeMirror engine plus toolbar, overlays, command/anchors
windows), each reached only through defineAsyncComponent so opening a note read-only never downloads
the editor chunk. A MarkdownPlugin environment (editor plugins, component overrides, render options,
commands, toolbar groups) lets a host extend the surface through one merged, id-deduped view. The
layer also ships an in-document find surface shared across both engines and a canvas-text-node
adapter (mdCanvasRenderer) for @augment/json-canvas-vue. It is the UI chrome of the markdown
ecosystem (C-8FKM), composing its renderer and editor engines.
What it provides
Section titled “What it provides”- MdSurface (read/live/source), MdViewer, MdModeToggle
- Editing chrome: MdToolbar, MdInsertMenu, MdBubbleMenu, MdLinkPopover, MdTableMenu
- MdFrontmatterPanel (read-only properties disclosure), MdOutline, MdHoverPreview
- In-document find: MdFindBar, useMarkdownFind, mdFindText
- useMarkdownCommands / useMarkdownAnchors command and anchors windows
- The MarkdownPlugin extension environment (provideMarkdownPlugins/registerMarkdownPlugin/useMarkdownPlugins)
- mdCanvasRenderer — JSON Canvas text-node adapter
Underlying implementation
Section titled “Underlying implementation”- packages/ts/markdown-ui/ (Nuxt layer, extended by hosts, no build step)
- @sksizer/obsidian-md (renderer), @sksizer/obsidian-editor (editor engine), @determined/ui (base component kit)
Locations
Section titled “Locations”packages/ts/markdown-ui/