Domain

MarkdownEditor

Rich Markdown editing surface bundling a Milkdown-powered ProseMirror editor, toolbar, and mark or block introspection helpers.

import { MarkdownEditor } from '@lostgradient/editor/markdown-editor';
markdowneditordomain-suite
01

Overview

Rich Markdown editing surface bundling a Milkdown-powered ProseMirror editor, toolbar, and mark or block introspection helpers.

Usage

svelte 
<script lang="ts">
  import { MarkdownEditor } from '@lostgradient/editor/markdown-editor';
</script>

Peer Dependencies

MarkdownEditor keeps its Milkdown, ProseMirror, and Markdown pipeline stack as optional peer dependencies so a base Cinder install does not pull the rich editor graph into apps that never import it.

Install the rich editor peer set before importing @lostgradient/editor/markdown-editor in a fresh consumer. MarkdownEditor also imports @lostgradient/cinder components (Button, Input, icons) and the @lostgradient/markdown pipeline directly, so both packages — along with svelte — are required peers too, not just the Milkdown/ProseMirror stack:

bash 
bun add @lostgradient/cinder @lostgradient/markdown svelte @milkdown/ctx @milkdown/kit @milkdown/prose @types/mdast @types/unist js-yaml prosemirror-inputrules prosemirror-model prosemirror-state prosemirror-view remark-gfm remark-parse remark-stringify unified unist-util-visit

@lostgradient/editor/review-editor and @lostgradient/chat with the default composer also use this editor stack. If a peer is missing, Vite can surface the failure as an __vite-optional-peer-dep:* export error, such as a missing PluginKey export from prosemirror-state; install the peer set above instead of debugging the generated placeholder module.

Guidance

Use When

  • Composing or editing Markdown documents and wanting the bundled toolbar, link-aware selection, and source or WYSIWYG mode toggle.
  • Building writing surfaces that need an editor handle for programmatic mark or block manipulation as part of the heavyweight suite.

Avoid When

  • Authoring a simple plain-text note — a textarea is dramatically lighter than the Milkdown bundle.
  • The surface needs inline review threads on top of the editor — use review-editor for that composition.
Live preview
02

When to use

Use when
  • Composing or editing Markdown documents and wanting the bundled toolbar, link-aware selection, and source or WYSIWYG mode toggle.
  • Building writing surfaces that need an editor handle for programmatic mark or block manipulation as part of the heavyweight suite.
Avoid when
  • Authoring a simple plain-text note — a textarea is dramatically lighter than the Milkdown bundle.
  • The surface needs inline review threads on top of the editor — use review-editor for that composition.
03

Examples

Basic markdown editor

A Milkdown-backed editor with toolbar and source mode toggle.

Empty markdown editor

An empty document, showing the placeholder prop.

Settings card prompt editor

MarkdownEditor embedded in a constrained settings card, with the toolbar and Rich/Raw toggle sharing one editor header.

04

Props

Props for markdown-editor
NameTypeDefaultDescription
id required text Unique identifier for accessibility (required)
label text 'Markdown editor' Accessible label for the editor (required for screen readers)
value bindable text '' Current markdown content (two-way bindable)
mode bindable 'wysiwyg' | 'source' 'wysiwyg' Editor display mode (two-way bindable)
showModeToggle boolean false Show an inline toggle for switching between WYSIWYG and raw Markdown
modeLabel text 'Editor mode' Accessible label for the mode toggle (visually hidden)
readonly boolean false Read-only mode
placeholder text 'Start writing...' Placeholder text when empty
showToolbar boolean true Show formatting toolbar (DEP-37)
ontoolbarcontextchange (context: ToolbarContext) => void Notified whenever the toolbar context changes. Use this to host the formatting controls somewhere this component does not render — for example folding them into a surrounding application toolbar so the editor does not stack a second bar of its own. Pair it with showToolbar={false}.
onchange (value: string) => void Called when content changes
onready () => void Called when the editor is ready (Milkdown initialized)
onmodechange (mode: EditorMode) => void Called when editor mode changes
onselectionchange (selection: EditorSelection | null) => void Called when selection changes (stub for DEP-39)
oncommentshortcut () => void Called when comment shortcut (Ctrl-Alt-c) is pressed (DEP-47)
plugins MilkdownPlugin[] [] Additional Milkdown plugins to load. Used for comment anchoring (DEP-39), decorations, and other extensions.
placeholderCompletion PlaceholderCompletionConfiguration Placeholder completion configuration (DEP-583). When provided, enables inline suggestion menu for {{…}} tokens in WYSIWYG mode.
placeholderDecoration PlaceholderDecorationConfiguration Placeholder decoration configuration (DEP-583). When provided, decorates invalid {{…}} tokens with CSS class and data attributes.
toolbar snippet Custom toolbar content. When provided, replaces default toolbar. Receives ToolbarContext for building custom toolbar UI.
toolbarActions snippet Additional toolbar actions (appended to default toolbar). Use this for adding buttons without replacing the entire toolbar.
toolbarLeading snippet Leading toolbar content (prepended before default toolbar items). Useful for adding undo/redo or other leading actions.
snapshotMode boolean false Snapshot mode for visual regression testing. When true: - Applies caret-color: transparent and user-select: none to the editor root via a data-snapshot-mode attribute, producing a stable visual state (no blinking cursor, no selection highlights). - Blurs any focused element inside the component on mount so the initial screenshot does not capture a focused ring or active caret. This is a purely visual / CSS concern. It does NOT affect editability, ProseMirror state, or any prop controlled by readonly / mode.