Markdown Editor — cinder playground

Overview

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

Usage

<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:

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

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.

Examples

Basic markdown editor

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

Settings card prompt editor

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

Props

Props for markdown-editor
Name	Type	Default	Required	Bindable	Description
`id`	`text`		req		Unique identifier for accessibility (required)
`label`	`text`	`'Markdown editor'`			Accessible label for the editor (required for screen readers)
`value`	`text`	`''`		bind	Current markdown content (two-way bindable)
`mode`	`'wysiwyg' \| 'source'`	`'wysiwyg'`		bind	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)
`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`.