@the-sumeet/sveltedown 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sumeet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,64 @@
-# Temporary Holding Version
+# sveltedown
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A live-preview Markdown editor for **Svelte 5**, built on **CodeMirror 6**, in the style of Typora and Obsidian.
+
+The document stays plain Markdown text. Syntax such as `**`, `#` and `[text](url)` is hidden while the cursor is elsewhere and shows again when the cursor moves into it. Images, task checkboxes, code blocks and tables render as interactive Svelte components.
+
+- Two-way `bind:value`, safe to render with SSR in SvelteKit
+- Headings, emphasis, inline code and links styled in place
+- Image previews, clickable task checkboxes, horizontal rules
+- Code blocks that scroll instead of wrapping, with a copy button
+- GFM tables rendered as HTML tables, with a command that lines up their source
+- Formatting shortcuts, plus list and task continuation on Enter
+- Themed with CSS variables, with light and dark modes
+- Custom Svelte snippets for images, code block headers and tables
+
+## Install
+
+```sh
+npm install @the-sumeet/sveltedown
+```
+
+`svelte@^5` is a peer dependency.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { MarkdownEditor } from '@the-sumeet/sveltedown';
+
+	let value = $state('# Hello\n\nStart **writing**…');
+</script>
+
+<MarkdownEditor bind:value placeholder="Start writing…" />
+```
+
+## Documentation
+
+The full documentation, with live demos, is the Starlight site in [`docs/`](docs/), published to GitHub Pages. It covers:
+
+- [Installation](docs/src/content/docs/getting-started/installation.mdx) and [quick start](docs/src/content/docs/getting-started/quick-start.mdx)
+- [Live preview](docs/src/content/docs/guides/live-preview.mdx), [code blocks](docs/src/content/docs/guides/code-blocks.mdx) and [tables](docs/src/content/docs/guides/tables.mdx)
+- [Theming](docs/src/content/docs/guides/theming.mdx) and [custom snippets](docs/src/content/docs/guides/custom-snippets.mdx)
+- [CodeMirror building blocks](docs/src/content/docs/guides/codemirror.mdx)
+- Reference: [props](docs/src/content/docs/reference/props.md), [keyboard shortcuts](docs/src/content/docs/reference/keyboard-shortcuts.md) and [API](docs/src/content/docs/reference/api.md)
+
+## Development
+
+```sh
+npm install
+npm run dev          # playground at src/routes
+npm run check        # svelte-check
+npm run lint
+npm run test:unit    # Vitest: node and browser (Chromium) projects
+npm run test:e2e     # Playwright against the production build
+npm run package      # svelte-package + publint
+
+npm run docs:dev     # docs site (run `npm install` in docs/ first)
+npm run docs:build
+npm run docs:check
+```
+
+## License
+
+[MIT](LICENSE)

package/dist/cm/keymaps.d.ts

@@ -0,0 +1,31 @@
+import { type Extension, type StateCommand } from '@codemirror/state';
+/**
+ * Toggles inline markup like `**` around each selection range. Ranges inside an existing
+ * node of that kind are unwrapped (found via the syntax tree, so `*` never matches the
+ * markers of `**bold**`); otherwise the selection, or the word at the cursor, is wrapped.
+ */
+export declare function toggleWrap(marker: string): StateCommand;
+export declare const toggleBold: StateCommand;
+export declare const toggleItalic: StateCommand;
+export declare const toggleStrikethrough: StateCommand;
+/**
+ * Turns the selection (or the word at the cursor) into `[text](url)` with `url` selected.
+ * A selected URL becomes `[](url)` with the cursor in the brackets.
+ */
+export declare const insertLink: StateCommand;
+/** Markdown formatting shortcuts. */
+export declare const formattingKeymap: ({
+    key: string;
+    run: StateCommand;
+    preventDefault: boolean;
+} | {
+    key: string;
+    run: StateCommand;
+    preventDefault?: undefined;
+})[];
+/**
+ * Formatting shortcuts (taking precedence over defaults such as `Mod-i`, "select parent
+ * syntax"), plus the default and history keymaps. List continuation on Enter comes from
+ * `@codemirror/lang-markdown`'s own keymap.
+ */
+export declare function editorKeymaps(): Extension;

package/dist/cm/keymaps.js

@@ -0,0 +1,108 @@
+import { EditorSelection, Prec } from '@codemirror/state';
+import { keymap } from '@codemirror/view';
+import { defaultKeymap, historyKeymap } from '@codemirror/commands';
+import { findNodeAt } from './utils/syntax.js';
+import { formatTable } from './utils/tables.js';
+const WRAP_NODES = {
+    '**': { node: 'StrongEmphasis', mark: 'EmphasisMark' },
+    '*': { node: 'Emphasis', mark: 'EmphasisMark' },
+    '~~': { node: 'Strikethrough', mark: 'StrikethroughMark' }
+};
+/**
+ * Toggles inline markup like `**` around each selection range. Ranges inside an existing
+ * node of that kind are unwrapped (found via the syntax tree, so `*` never matches the
+ * markers of `**bold**`); otherwise the selection, or the word at the cursor, is wrapped.
+ */
+export function toggleWrap(marker) {
+    const kind = WRAP_NODES[marker];
+    return ({ state, dispatch }) => {
+        if (state.readOnly)
+            return false;
+        const n = marker.length;
+        const tr = state.changeByRange((range) => {
+            // `**|**` left by a previous toggle on empty space: take the markers back out.
+            if (range.empty && state.sliceDoc(range.head - n, range.head + n) === marker + marker) {
+                const changes = state.changes({ from: range.head - n, to: range.head + n });
+                return { changes, range: range.map(changes) };
+            }
+            // A cursor on either edge of `**bold**` counts as inside, so the toggle undoes it.
+            const node = kind ? findNodeAt(state, range.from, kind.node) : null;
+            if (node && node.from <= range.from && range.to <= node.to) {
+                const marks = node.getChildren(kind.mark);
+                const changes = state.changes([marks[0], marks[marks.length - 1]].map((m) => ({ from: m.from, to: m.to })));
+                return { changes, range: range.map(changes) };
+            }
+            let { from, to } = range;
+            if (range.empty) {
+                const word = state.wordAt(range.head);
+                if (word)
+                    ({ from, to } = word);
+            }
+            // `** bold **` is not bold, so keep surrounding whitespace outside the markers.
+            while (from < to && /\s/.test(state.sliceDoc(from, from + 1)))
+                from++;
+            while (to > from && /\s/.test(state.sliceDoc(to - 1, to)))
+                to--;
+            const changes = [
+                { from, insert: marker },
+                { from: to, insert: marker }
+            ];
+            if (range.empty)
+                return { changes, range: EditorSelection.cursor(range.head + n) };
+            const [anchor, head] = range.anchor <= range.head ? [from, to] : [to, from];
+            return { changes, range: EditorSelection.range(anchor + n, head + n) };
+        });
+        dispatch(state.update(tr, { scrollIntoView: true, userEvent: 'input.format' }));
+        return true;
+    };
+}
+export const toggleBold = toggleWrap('**');
+export const toggleItalic = toggleWrap('*');
+export const toggleStrikethrough = toggleWrap('~~');
+/**
+ * Turns the selection (or the word at the cursor) into `[text](url)` with `url` selected.
+ * A selected URL becomes `[](url)` with the cursor in the brackets.
+ */
+export const insertLink = ({ state, dispatch }) => {
+    if (state.readOnly)
+        return false;
+    const tr = state.changeByRange((range) => {
+        let { from, to } = range;
+        if (range.empty) {
+            const word = state.wordAt(range.head);
+            if (word)
+                ({ from, to } = word);
+        }
+        const text = state.sliceDoc(from, to);
+        if (/^https?:\/\/\S+$/.test(text)) {
+            return {
+                changes: { from, to, insert: `[](${text})` },
+                range: EditorSelection.cursor(from + 1)
+            };
+        }
+        const urlFrom = from + text.length + 3;
+        return {
+            changes: { from, to, insert: `[${text}](url)` },
+            range: text ? EditorSelection.range(urlFrom, urlFrom + 3) : EditorSelection.cursor(from + 1)
+        };
+    });
+    dispatch(state.update(tr, { scrollIntoView: true, userEvent: 'input.format' }));
+    return true;
+};
+/** Markdown formatting shortcuts. */
+export const formattingKeymap = [
+    { key: 'Mod-b', run: toggleBold, preventDefault: true },
+    { key: 'Mod-i', run: toggleItalic, preventDefault: true },
+    { key: 'Mod-Shift-x', run: toggleStrikethrough, preventDefault: true },
+    { key: 'Mod-k', run: insertLink, preventDefault: true },
+    // No preventDefault: outside a table the browser keeps the shortcut.
+    { key: 'Mod-Shift-f', run: formatTable }
+];
+/**
+ * Formatting shortcuts (taking precedence over defaults such as `Mod-i`, "select parent
+ * syntax"), plus the default and history keymaps. List continuation on Enter comes from
+ * `@codemirror/lang-markdown`'s own keymap.
+ */
+export function editorKeymaps() {
+    return [Prec.high(keymap.of(formattingKeymap)), keymap.of([...defaultKeymap, ...historyKeymap])];
+}

package/dist/cm/plugins/block-widgets.d.ts

@@ -0,0 +1,20 @@
+import { Facet, StateField, type EditorState, type Extension } from '@codemirror/state';
+import { type DecorationSet } from '@codemirror/view';
+import type { Snippet } from 'svelte';
+import type { CodeHeaderSnippetProps, ImageSnippetProps, TableSnippetProps } from '../../types.js';
+export interface WidgetSnippets {
+    image?: Snippet<[ImageSnippetProps]>;
+    codeHeader?: Snippet<[CodeHeaderSnippetProps]>;
+    table?: Snippet<[TableSnippetProps]>;
+}
+/** User snippets that replace the default widgets. */
+export declare const widgetSnippets: Facet<WidgetSnippets, WidgetSnippets>;
+/**
+ * Widget decorations for images, task checkboxes, horizontal rules and fenced code.
+ * Pure, so it can be tested against an `EditorState` without a DOM.
+ */
+export declare function buildBlockDecorations(state: EditorState): DecorationSet;
+/** Block and widget decorations. A StateField, since some of them change line layout. */
+export declare const blockWidgetsField: StateField<DecorationSet>;
+/** Images, task checkboxes, horizontal rules, fenced code blocks and tables as widgets. */
+export declare function blockWidgets(): Extension;

package/dist/cm/plugins/block-widgets.js

@@ -0,0 +1,313 @@
+import { syntaxTree } from '@codemirror/language';
+import { Facet, Prec, StateField } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType, keymap } from '@codemirror/view';
+import { isRevealed, revealInputsChanged } from '../utils/cursor.js';
+import { SvelteWidget } from '../utils/svelte-widget.svelte.js';
+import { codeBlockKeymap, fencedCodeParts } from '../utils/code-blocks.js';
+import { linkDestination, linkTitle } from '../utils/syntax.js';
+import { tableData } from '../utils/tables.js';
+import ImageWidget from '../../components/widgets/ImageWidget.svelte';
+import CheckboxWidget from '../../components/widgets/CheckboxWidget.svelte';
+import CodeBlockWidget from '../../components/widgets/CodeBlockWidget.svelte';
+import SnippetHost from '../../components/widgets/SnippetHost.svelte';
+import TableWidget from '../../components/widgets/TableWidget.svelte';
+/** User snippets that replace the default widgets. */
+export const widgetSnippets = Facet.define({
+    combine: (values) => values[0] ?? {}
+});
+const snippetHost = SnippetHost;
+class HorizontalRuleWidget extends WidgetType {
+    eq() {
+        return true;
+    }
+    toDOM() {
+        const dom = document.createElement('span');
+        dom.className = 'cm-md-hr';
+        dom.setAttribute('role', 'separator');
+        return dom;
+    }
+}
+const horizontalRule = Decoration.replace({ widget: new HorizontalRuleWidget() });
+const codeLine = Decoration.line({ class: 'cm-md-codeblock' });
+const codeLineBegin = Decoration.line({ class: 'cm-md-codeblock cm-md-codeblock-begin' });
+const codeLineEnd = Decoration.line({ class: 'cm-md-codeblock cm-md-codeblock-end' });
+const codeLineSingle = Decoration.line({
+    class: 'cm-md-codeblock cm-md-codeblock-begin cm-md-codeblock-end'
+});
+/** A widget for the user's snippet if one is configured, else for the default component. */
+function snippetOr(snippet, component, props, className, block = false) {
+    const options = { class: className, block };
+    if (snippet)
+        return new SvelteWidget(snippetHost, { snippet, ...props }, options);
+    return new SvelteWidget(component, props, options);
+}
+function addImage(state, node, out) {
+    if (isRevealed(state, node.from, node.to))
+        return;
+    const marks = node.getChildren('LinkMark');
+    const url = node.getChild('URL');
+    if (!url || marks.length < 2)
+        return;
+    const title = node.getChild('LinkTitle');
+    const props = {
+        src: linkDestination(state, url),
+        alt: state.sliceDoc(marks[0].to, marks[1].from),
+        title: title ? linkTitle(state, title) : undefined
+    };
+    const snippet = state.facet(widgetSnippets).image;
+    const widget = snippetOr(snippet, ImageWidget, props, 'cm-md-image');
+    out.push(Decoration.replace({ widget }).range(node.from, node.to));
+}
+/** The range a block node's decorations live in. Code blocks and tables reveal per whole line. */
+function extentOf(state, node) {
+    if (node.name !== 'FencedCode' && node.name !== 'Table')
+        return { from: node.from, to: node.to };
+    return { from: state.doc.lineAt(node.from).from, to: state.doc.lineAt(node.to).to };
+}
+/**
+ * Away from the cursor the block becomes one scrollable widget, starting at the fence
+ * so container markup before it (a list bullet, `>`) stays visible. Near it, the raw
+ * lines are styled and do not wrap.
+ */
+function addFencedCode(state, node, out) {
+    const { from, to } = extentOf(state, node);
+    const first = state.doc.lineAt(from).number;
+    const last = state.doc.lineAt(to).number;
+    if (isRevealed(state, from, to)) {
+        for (let n = first; n <= last; n++) {
+            const deco = first === last
+                ? codeLineSingle
+                : n === first
+                    ? codeLineBegin
+                    : n === last
+                        ? codeLineEnd
+                        : codeLine;
+            out.push(deco.range(state.doc.line(n).from));
+        }
+        return;
+    }
+    const { language, info, code } = fencedCodeParts(state, node);
+    const widget = new SvelteWidget(CodeBlockWidget, { language, info, code, headerSnippet: state.facet(widgetSnippets).codeHeader }, { block: true, class: 'cm-md-codeblock-widget' });
+    out.push(Decoration.replace({ widget, block: true }).range(node.from, to));
+}
+const tableLine = Decoration.line({ class: 'cm-md-table-line' });
+/**
+ * Away from the cursor a table renders as an HTML table, starting at its first pipe so
+ * container markup stays visible. Near it, the raw rows show unwrapped in monospace,
+ * so the pipes line up (see `formatTable`).
+ */
+function addTable(state, node, out) {
+    const { from, to } = extentOf(state, node);
+    if (isRevealed(state, from, to)) {
+        for (let n = state.doc.lineAt(from).number; n <= state.doc.lineAt(to).number; n++) {
+            out.push(tableLine.range(state.doc.line(n).from));
+        }
+        return;
+    }
+    const snippet = state.facet(widgetSnippets).table;
+    const widget = snippetOr(snippet, TableWidget, { table: tableData(state, node) }, 'cm-md-table', true);
+    out.push(Decoration.replace({ widget, block: true }).range(node.from, to));
+}
+const BLOCK_NODES = new Set(['Image', 'TaskMarker', 'HorizontalRule', 'FencedCode', 'Table']);
+/** Adds decorations for the block nodes overlapping `[from, to]`, reporting each node's extent. */
+function collect(state, from, to, out, onNode) {
+    syntaxTree(state).iterate({
+        from,
+        to,
+        enter: (ref) => {
+            if (!BLOCK_NODES.has(ref.name))
+                return;
+            onNode?.(extentOf(state, ref.node));
+            switch (ref.name) {
+                case 'Image':
+                    addImage(state, ref.node, out);
+                    break;
+                case 'TaskMarker': {
+                    const checked = /^\[[xX]\]$/.test(state.sliceDoc(ref.from, ref.to));
+                    const widget = new SvelteWidget(CheckboxWidget, { checked }, { class: 'cm-md-task' });
+                    out.push(Decoration.replace({ widget }).range(ref.from, ref.to));
+                    break;
+                }
+                case 'HorizontalRule':
+                    if (!isRevealed(state, ref.from, ref.to))
+                        out.push(horizontalRule.range(ref.from, ref.to));
+                    break;
+                case 'FencedCode':
+                    addFencedCode(state, ref.node, out);
+                    break;
+                case 'Table':
+                    addTable(state, ref.node, out);
+                    break;
+            }
+            return false;
+        }
+    });
+}
+/**
+ * Widget decorations for images, task checkboxes, horizontal rules and fenced code.
+ * Pure, so it can be tested against an `EditorState` without a DOM.
+ */
+export function buildBlockDecorations(state) {
+    const out = [];
+    collect(state, 0, state.doc.length, out);
+    return Decoration.set(out, true);
+}
+/**
+ * After a selection-only change, only nodes on lines touched by the old or new
+ * selection can switch between rendered and revealed: rebuild just those.
+ */
+function updateForSelection(decorations, startState, state) {
+    const extents = new Map();
+    const out = [];
+    for (const range of [...startState.selection.ranges, ...state.selection.ranges]) {
+        const from = state.doc.lineAt(range.from).from;
+        const to = state.doc.lineAt(range.to).to;
+        collect(state, from, to, [], (extent) => extents.set(extent.from, extent));
+    }
+    if (!extents.size)
+        return decorations;
+    for (const extent of extents.values())
+        collect(state, extent.from, extent.to, out);
+    const inside = (from, to) => [...extents.values()].some((e) => from >= e.from && to <= e.to);
+    return decorations.update({
+        filter: (from, to) => !inside(from, to),
+        add: out.filter((range) => inside(range.from, range.to)),
+        sort: true
+    });
+}
+/** Block and widget decorations. A StateField, since some of them change line layout. */
+export const blockWidgetsField = StateField.define({
+    create: buildBlockDecorations,
+    update(decorations, tr) {
+        if (tr.docChanged ||
+            syntaxTree(tr.state) !== syntaxTree(tr.startState) ||
+            tr.state.facet(widgetSnippets) !== tr.startState.facet(widgetSnippets) ||
+            revealInputsChanged(tr.startState, tr.state)) {
+            return buildBlockDecorations(tr.state);
+        }
+        if (tr.selection)
+            return updateForSelection(decorations, tr.startState, tr.state);
+        return decorations;
+    },
+    provide: (field) => EditorView.decorations.from(field)
+});
+const blockTheme = EditorView.baseTheme({
+    '.cm-md-image': { display: 'inline-block', maxWidth: '100%', verticalAlign: 'bottom' },
+    '.cm-md-image img': { display: 'block', maxWidth: '100%', borderRadius: '4px' },
+    '.cm-md-image-error': {
+        display: 'inline-block',
+        padding: '0.2em 0.5em',
+        border: '1px dashed var(--md-border)',
+        borderRadius: '4px',
+        color: 'var(--md-muted)'
+    },
+    '.cm-md-task': { display: 'inline-block', verticalAlign: 'middle' },
+    '.cm-md-checkbox': {
+        margin: '0 0.25em 0 0',
+        cursor: 'pointer',
+        accentColor: 'var(--md-accent)'
+    },
+    '.cm-md-hr': {
+        display: 'inline-block',
+        width: '100%',
+        verticalAlign: 'middle',
+        borderTop: '1px solid var(--md-border)'
+    },
+    // Raw lines while editing: no wrapping; the editor scrolls sideways to the cursor.
+    // `width: 0; min-width: 100%` keeps a long line from widening the content (which
+    // would stop every paragraph from wrapping); the text overflows into the scroller.
+    // Same font size and line height as the rendered <pre>, so the block keeps its height.
+    '.cm-line.cm-md-codeblock': {
+        fontFamily: 'var(--md-font-mono)',
+        fontSize: '0.9em',
+        lineHeight: '1.5',
+        backgroundColor: 'var(--md-code-block-bg)',
+        padding: '0 0.75em',
+        boxSizing: 'border-box',
+        width: '0',
+        minWidth: '100%',
+        whiteSpace: 'pre',
+        wordBreak: 'normal',
+        overflowWrap: 'normal'
+    },
+    '.cm-md-codeblock-begin': { borderTopLeftRadius: '6px', borderTopRightRadius: '6px' },
+    '.cm-md-codeblock-end': { borderBottomLeftRadius: '6px', borderBottomRightRadius: '6px' },
+    // Rendered block: the <pre> scrolls on its own.
+    '.cm-md-codeblock-widget': {
+        // The editor content preserves whitespace; template whitespace here must not render.
+        whiteSpace: 'normal',
+        fontFamily: 'var(--md-font-mono)',
+        fontSize: '0.9em',
+        backgroundColor: 'var(--md-code-block-bg)',
+        borderRadius: '6px',
+        padding: '0.2em 0.75em'
+    },
+    '.cm-md-code-header': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        fontSize: '0.85em',
+        color: 'var(--md-muted)'
+    },
+    '.cm-md-code-pre': {
+        margin: '0',
+        padding: '0.2em 0',
+        width: '0',
+        minWidth: '100%',
+        overflowX: 'auto',
+        whiteSpace: 'pre',
+        font: 'inherit',
+        lineHeight: '1.5',
+        outline: 'none',
+        cursor: 'text'
+    },
+    // Raw table rows while editing: monospace and unwrapped, like code lines.
+    '.cm-line.cm-md-table-line': {
+        fontFamily: 'var(--md-font-mono)',
+        fontSize: '0.9em',
+        boxSizing: 'border-box',
+        width: '0',
+        minWidth: '100%',
+        whiteSpace: 'pre',
+        wordBreak: 'normal',
+        overflowWrap: 'normal'
+    },
+    // The editor content breaks words anywhere (`overflow-wrap: anywhere`); inherited,
+    // that would crush a wide table into one-letter columns instead of scrolling it.
+    '.cm-md-table': {
+        whiteSpace: 'normal',
+        overflowWrap: 'normal',
+        wordBreak: 'normal',
+        padding: '0.25em 0'
+    },
+    '.cm-md-table-scroll': { width: '0', minWidth: '100%', overflowX: 'auto', outline: 'none' },
+    '.cm-md-table table': { borderCollapse: 'collapse' },
+    '.cm-md-table th, .cm-md-table td': {
+        border: '1px solid var(--md-border)',
+        padding: '0.3em 0.75em',
+        textAlign: 'left',
+        verticalAlign: 'top'
+    },
+    // Headers stay on one line, so many columns overflow into the scroll box; body
+    // cells still wrap between words.
+    '.cm-md-table th': {
+        fontWeight: '600',
+        whiteSpace: 'nowrap',
+        backgroundColor: 'var(--md-code-block-bg)'
+    },
+    // The UA `code { font-family: monospace }` would shrink the font (monospace quirk).
+    '.cm-md-code-pre code': { font: 'inherit' },
+    '.cm-md-code-copy': {
+        font: 'inherit',
+        color: 'inherit',
+        cursor: 'pointer',
+        background: 'transparent',
+        border: '1px solid var(--md-border)',
+        borderRadius: '4px',
+        padding: '0 0.5em'
+    }
+});
+/** Images, task checkboxes, horizontal rules, fenced code blocks and tables as widgets. */
+export function blockWidgets() {
+    return [blockWidgetsField, blockTheme, Prec.high(keymap.of(codeBlockKeymap))];
+}

package/dist/cm/plugins/inline-live-preview.d.ts

@@ -0,0 +1,14 @@
+import type { EditorState, Extension } from '@codemirror/state';
+import { Decoration, type DecorationSet } from '@codemirror/view';
+/** Replacement that hides a piece of Markdown syntax. */
+export declare const hiddenMarkup: Decoration;
+/**
+ * Inline live-preview decorations for the given ranges. Pure, so it can be tested
+ * against an `EditorState` without a DOM.
+ */
+export declare function buildInlineDecorations(state: EditorState, ranges: readonly {
+    from: number;
+    to: number;
+}[]): DecorationSet;
+/** Hides inline Markdown syntax (headings, emphasis, code, links) away from the cursor. */
+export declare function inlineLivePreview(): Extension;