@hachej/boring-ui-kit 0.1.110 → 0.2.0

package/dist/markdown-editor.d.ts

@@ -0,0 +1,28 @@
+import type { MarkdownController } from './markdown.js';
+import { type MarkdownImageResolver } from './markdown-extensions.js';
+import { type MarkdownRichSafety } from './markdown-safety.js';
+import { type MarkdownMountedTools } from './markdown-mounted.js';
+export { checkMarkdownRichSafety } from './markdown-safety.js';
+export type { MarkdownRichSafety } from './markdown-safety.js';
+export type { MarkdownImageResolver } from './markdown-extensions.js';
+export type { MarkdownMountedTools, MarkdownMountedSubject, MarkdownMountedSelection, MarkdownMountedInspection } from './markdown-mounted.js';
+export interface MarkdownEditorProps {
+    readonly controller: MarkdownController;
+    readonly title?: string;
+    readonly initialMode?: 'rich' | 'source';
+    readonly placeholder?: string;
+    readonly className?: string;
+    readonly onMountedTools?: (tools: MarkdownMountedTools | null) => void;
+    /** `false` omits the built-in header (title, status, source toggle, Save) so a host bar such as the viewer frame supplies them. */
+    readonly header?: boolean;
+    /** Controlled mode. The editor still falls back to `source` for a document that rich editing cannot keep exactly. */
+    readonly mode?: 'rich' | 'source';
+    readonly onModeChange?: (mode: 'rich' | 'source') => void;
+    /** Reports whether the loaded document can be edited in rich mode without losing anything. */
+    readonly onRichSafety?: (safety: MarkdownRichSafety) => void;
+    /** Images never load unless this maps their address to a URL (inline `data:` images load without it). */
+    readonly resolveImage?: MarkdownImageResolver;
+}
+/** Borrows the controller. The host owns document selection, access and disposal. */
+export declare function MarkdownEditor(props: MarkdownEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=markdown-editor.d.ts.map

package/dist/markdown-editor.js

@@ -0,0 +1,230 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TextDraftControls } from './text-draft-controls.js';
+import { useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import { createMarkdownExtensions } from './markdown-extensions.js';
+import { checkMarkdownRichSafety, describeUnsafe, finishRichMarkdown } from './markdown-safety.js';
+import { MarkdownIcon } from './markdown-icons.js';
+import { MarkdownProposalDiff } from './markdown-proposal-diff.js';
+import { createMountedMarkdownTools } from './markdown-mounted.js';
+export { checkMarkdownRichSafety } from './markdown-safety.js';
+/** Borrows the controller. The host owns document selection, access and disposal. */
+export function MarkdownEditor(props) {
+    const active = useRef(props.controller);
+    active.current = props.controller;
+    const [mount, setMount] = useState({ controller: props.controller, sequence: 0 });
+    if (mount.controller !== props.controller)
+        setMount({ controller: props.controller, sequence: mount.sequence + 1 });
+    return _jsx(MarkdownEditorSession, { ...props, activeController: active }, mount.sequence);
+}
+function MarkdownEditorSession({ controller, title = 'Document', initialMode = 'rich', placeholder = 'Start writing', className, onMountedTools, header = true, mode: controlledMode, onModeChange, onRichSafety, resolveImage, activeController: active }) {
+    const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+    const projected = useRef(null);
+    const emitted = useRef(null);
+    const [ownMode, setOwnMode] = useState(initialMode);
+    const requestedMode = controlledMode ?? ownMode;
+    // Rich editing is only offered for a document the editor can keep exactly; anything else is edited as source.
+    const checked = useDeferredValue(state.text);
+    // The editor's own output is safe by construction; only text that arrived from elsewhere (or from the source box) is checked.
+    const ownText = state.text === emitted.current;
+    const safety = useMemo(() => ownText ? { safe: true } : checkMarkdownRichSafety(checked), [checked, ownText]);
+    const richOffered = safety.safe;
+    const mode = richOffered ? requestedMode : 'source';
+    const activeMode = useRef(mode);
+    activeMode.current = mode;
+    const images = useRef(resolveImage);
+    images.current = resolveImage;
+    useEffect(() => { onRichSafety?.(safety); }, [safety, onRichSafety]);
+    const [error, setError] = useState(null);
+    const interaction = useRef(false);
+    const sourceInput = useRef(null);
+    const richBookmark = useRef(null);
+    const sourceBookmark = useRef(null);
+    const focusAfterSwitch = useRef(false);
+    const markInteraction = () => {
+        interaction.current = true;
+        setTimeout(() => { interaction.current = false; }, 0);
+    };
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: createMarkdownExtensions({ placeholder, images: () => images.current }),
+        content: '',
+        editable: !state.readOnly && state.lifecycle === 'active',
+        editorProps: { attributes: { role: 'textbox', 'aria-label': `${title} rich text`, 'aria-multiline': 'true', tabindex: '0', class: 'boring-markdown-content' } },
+        onUpdate: ({ editor: current, transaction }) => {
+            if (active.current !== controller || !interaction.current || !transaction.docChanged || controller.getSnapshot().lifecycle !== 'active' || controller.getSnapshot().readOnly)
+                return;
+            interaction.current = false;
+            const markdown = finishRichMarkdown(current.getMarkdown(), controller.getSnapshot().text);
+            projected.current = markdown;
+            emitted.current = markdown;
+            controller.actions.edit(markdown);
+        },
+    }, [controller]);
+    useEffect(() => {
+        projected.current = null;
+        emitted.current = null;
+        interaction.current = false;
+        setError(null);
+    }, [controller]);
+    useEffect(() => {
+        if (!editor || editor.isDestroyed || state.text === projected.current)
+            return;
+        // Text from outside (a load, a refresh, a discard, the source box) starts with the selection at the beginning, where the browser leaves
+        // its caret when the text is replaced. Replacing the whole document would otherwise leave the editor's selection at the end while the
+        // caret shows the start: a click there changes nothing the editor sees, so formatting applied to the end, and ProseMirror's own sync
+        // after a focus or click put the caret back at the end.
+        editor.chain().setContent(state.text, { contentType: 'markdown', emitUpdate: false }).setTextSelection(0).run();
+        projected.current = state.text;
+    }, [editor, state.text]);
+    useEffect(() => { editor?.setEditable(!state.readOnly && state.lifecycle === 'active'); }, [editor, state.readOnly, state.lifecycle]);
+    const mounted = useMemo(() => {
+        if (mode === 'rich' && !editor)
+            return null;
+        const current = () => active.current === controller && activeMode.current === mode;
+        return mode === 'rich' && editor
+            ? createMountedMarkdownTools({ controller, current, view: { kind: 'rich', editor, projectedText: () => projected.current } })
+            : createMountedMarkdownTools({ controller, current, view: { kind: 'source', element: () => sourceInput.current } });
+    }, [active, controller, editor, mode]);
+    useLayoutEffect(() => { mounted?.activate(); return () => mounted?.dispose(); }, [mounted]);
+    useEffect(() => {
+        if (!mounted || !onMountedTools)
+            return;
+        onMountedTools(mounted.tools);
+        return () => onMountedTools(null);
+    }, [mounted, onMountedTools]);
+    const marks = useEditorState({ editor, selector: ({ editor: current }) => current ? {
+            bold: current.isActive('bold'), italic: current.isActive('italic'), strike: current.isActive('strike'), code: current.isActive('code'), highlight: current.isActive('highlight'),
+            h1: current.isActive('heading', { level: 1 }), h2: current.isActive('heading', { level: 2 }), h3: current.isActive('heading', { level: 3 }),
+            bullet: current.isActive('bulletList'), ordered: current.isActive('orderedList'), task: current.isActive('taskList'),
+            quote: current.isActive('blockquote'), codeBlock: current.isActive('codeBlock'), link: current.isActive('link'), table: current.isActive('table'),
+            href: current.isActive('link') ? String(current.getAttributes('link')['href'] ?? '') : '',
+        } : null });
+    const outline = useEditorState({ editor, selector: ({ editor: current }) => {
+            if (!current)
+                return null;
+            const headings = [];
+            current.state.doc.descendants((node, position) => {
+                if (node.type.name === 'heading')
+                    headings.push({ position, level: Number(node.attrs['level']), text: node.textContent });
+            });
+            return { document: current.state.doc, headings };
+        }, equalityFn: (left, right) => left?.document === right?.document });
+    const switchMode = () => {
+        const current = controller.getSnapshot();
+        if (mode === 'rich') {
+            richBookmark.current = editor && !editor.isDestroyed && projected.current === current.text
+                ? { version: current.bufferVersion, selection: editor.state.selection.getBookmark() } : null;
+        }
+        else {
+            const input = sourceInput.current;
+            sourceBookmark.current = input?.value === current.text
+                ? { version: current.bufferVersion, start: input.selectionStart, end: input.selectionEnd, direction: input.selectionDirection } : null;
+        }
+        interaction.current = false;
+        focusAfterSwitch.current = true;
+        const next = mode === 'source' ? 'rich' : 'source';
+        if (controlledMode === undefined)
+            setOwnMode(next);
+        onModeChange?.(next);
+    };
+    useEffect(() => {
+        if (!focusAfterSwitch.current || active.current !== controller || state.lifecycle !== 'active')
+            return;
+        if (mode === 'source') {
+            const input = sourceInput.current;
+            if (!input)
+                return;
+            const bookmark = sourceBookmark.current;
+            input.focus();
+            if (bookmark?.version === state.bufferVersion)
+                input.setSelectionRange(bookmark.start, bookmark.end, bookmark.direction);
+            else
+                input.setSelectionRange(0, 0);
+        }
+        else {
+            if (!editor || editor.isDestroyed)
+                return;
+            const bookmark = richBookmark.current;
+            if (bookmark?.version === state.bufferVersion)
+                editor.view.dispatch(editor.state.tr.setSelection(bookmark.selection.resolve(editor.state.doc)));
+            else
+                editor.commands.setTextSelection(0);
+            editor.commands.focus(undefined, { scrollIntoView: false });
+        }
+        focusAfterSwitch.current = false;
+    }, [active, controller, editor, mode, state.bufferVersion, state.lifecycle]);
+    const unavailable = state.readOnly || state.lifecycle !== 'active';
+    const pending = state.save.kind === 'pending';
+    const outcome = state.save.kind === 'settled' ? state.save.result : null;
+    const uncertain = outcome?.kind === 'unknown';
+    const conflict = outcome?.kind === 'conflict' || state.remote !== null;
+    const save = () => {
+        const selected = controller.actions.selection();
+        setError(null);
+        void controller.flush(selected).then(report, () => { if (active.current === controller)
+            setError('The save could not be completed. Your text is still available.'); });
+    };
+    /** Shows a refused save or accept; the buffer keeps the text. */
+    const report = (result) => {
+        if (active.current !== controller || !result || typeof result !== 'object')
+            return;
+        const { kind, reason } = result;
+        if (kind === 'denied' || kind === 'conflict' || kind === 'unavailable')
+            setError(typeof reason === 'string' && reason ? reason : kind === 'conflict' ? 'The document changed elsewhere. Your text is still available.' : 'The document could not be saved. Your text is still available.');
+    };
+    const run = (operation) => {
+        setError(null);
+        void operation().then(report, () => { if (active.current === controller)
+            setError('The operation could not be completed. Your text is still available.'); });
+    };
+    const richOnly = unavailable || mode === 'source' || !editor;
+    const [linkDraft, setLinkDraft] = useState(null);
+    const command = (operation) => { interaction.current = true; try {
+        operation();
+    }
+    finally {
+        interaction.current = false;
+    } };
+    const tool = (label, icon, pressed, operation, extra = {}) => (_jsx("button", { type: "button", className: "boring-markdown-tool", "aria-label": label, title: label, "aria-pressed": pressed === true, "data-active": pressed === true || undefined, disabled: richOnly || extra.disabled, onClick: () => command(operation), children: _jsx(MarkdownIcon, { name: icon }) }));
+    const separator = _jsx("span", { role: "separator", "aria-orientation": "vertical", className: "boring-markdown-separator" });
+    const chain = () => editor.chain().focus();
+    const openLink = () => setLinkDraft(marks?.href ?? '');
+    const applyLink = () => {
+        const href = (linkDraft ?? '').trim();
+        if (!editor || /^(?:javascript|data|vbscript):/i.test(href))
+            return;
+        command(() => href === '' ? chain().extendMarkRange('link').unsetLink().run() : chain().extendMarkRange('link').setLink({ href }).run());
+        setLinkDraft(null);
+    };
+    return _jsxs("section", { className: className, "data-boring": "markdown-editor", "data-mode": mode, "data-dirty": state.dirty || undefined, onKeyDownCapture: event => {
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+                event.preventDefault();
+                if (!unavailable && !pending && !uncertain)
+                    save();
+            }
+        }, children: [header && _jsxs("header", { children: [_jsx("strong", { children: title }), state.readOnly && _jsx("span", { children: "Read only" }), _jsx("span", { role: "status", children: state.lifecycle === 'disposed' ? 'Closed' : pending ? 'Saving' : uncertain ? 'Save unconfirmed' : conflict ? 'Changed elsewhere' : state.dirty ? 'Unsaved changes' : 'Saved' }), _jsx("button", { type: "button", "aria-pressed": mode === 'source', disabled: !richOffered, onClick: switchMode, children: "Markdown source" }), _jsx("button", { type: "button", disabled: unavailable || !state.dirty || pending || uncertain, onClick: save, children: "Save" })] }), _jsx(TextDraftControls, { recovery: state.recovery, actions: controller.actions, readOnly: state.readOnly, blocked: state.lifecycle !== 'active' || state.save.kind === 'pending' || (state.save.kind === 'settled' && state.save.result.kind === 'unknown') }), mode === 'rich' && _jsxs("div", { role: "toolbar", "aria-label": "Text formatting", className: "boring-markdown-toolbar", children: [tool('Bold', 'Bold', marks?.bold, () => chain().toggleBold().run()), tool('Italic', 'Italic', marks?.italic, () => chain().toggleItalic().run()), tool('Strikethrough', 'Strike', marks?.strike, () => chain().toggleStrike().run()), tool('Highlight', 'Highlight', marks?.highlight, () => chain().toggleHighlight().run()), tool('Code', 'Code', marks?.code, () => chain().toggleCode().run()), separator, tool('Heading 1', 'Heading1', marks?.h1, () => chain().toggleHeading({ level: 1 }).run()), tool('Heading 2', 'Heading2', marks?.h2, () => chain().toggleHeading({ level: 2 }).run()), tool('Heading 3', 'Heading3', marks?.h3, () => chain().toggleHeading({ level: 3 }).run()), separator, tool('Bullet list', 'BulletList', marks?.bullet, () => chain().toggleBulletList().run()), tool('Numbered list', 'OrderedList', marks?.ordered, () => chain().toggleOrderedList().run()), tool('Task list', 'TaskList', marks?.task, () => chain().toggleTaskList().run()), separator, tool('Quote', 'Quote', marks?.quote, () => chain().toggleBlockquote().run()), tool('Code block', 'CodeBlock', marks?.codeBlock, () => chain().toggleCodeBlock().run()), tool('Link', 'Link', marks?.link || linkDraft !== null, openLink), tool('Table', 'Table', marks?.table, () => marks?.table ? chain().deleteTable().run() : chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()), tool('Horizontal rule', 'Rule', false, () => chain().setHorizontalRule().run()), marks?.table && _jsxs(_Fragment, { children: [separator, tool('Add table row', 'Rows', false, () => chain().addRowAfter().run()), tool('Add table column', 'Columns', false, () => chain().addColumnAfter().run()), tool('Delete table', 'Trash', false, () => chain().deleteTable().run())] })] }), mode === 'rich' && linkDraft !== null && _jsxs("form", { className: "boring-markdown-link", "aria-label": "Link address", onSubmit: event => { event.preventDefault(); applyLink(); }, children: [_jsx("input", { type: "text", inputMode: "url", autoFocus: true, "aria-label": "Link address", placeholder: "https://", value: linkDraft, onChange: event => setLinkDraft(event.currentTarget.value), onKeyDown: event => { if (event.key === 'Escape') {
+                            event.preventDefault();
+                            setLinkDraft(null);
+                            editor?.commands.focus();
+                        } } }), _jsx("button", { type: "submit", children: linkDraft.trim() === '' && marks?.link ? 'Remove link' : 'Apply link' }), _jsx("button", { type: "button", onClick: () => { setLinkDraft(null); editor?.commands.focus(); }, children: "Cancel" })] }), !richOffered && _jsx("p", { role: "note", className: "boring-markdown-notice", "data-testid": "markdown-source-only", children: describeUnsafe(safety) }), mode === 'rich' && outline && outline.headings.length > 0 && _jsx("nav", { "aria-label": "Document outline", children: _jsx("ol", { children: outline.headings.map((heading, index) => _jsx("li", { "data-heading-level": heading.level, children: _jsx("button", { type: "button", "aria-label": `Go to heading: ${heading.text || 'Untitled heading'}`, disabled: state.lifecycle !== 'active', onClick: () => {
+                                if (!editor || editor.isDestroyed || active.current !== controller || controller.getSnapshot().lifecycle !== 'active'
+                                    || controller.getSnapshot().bufferVersion !== state.bufferVersion || editor.state.doc !== outline.document)
+                                    return;
+                                const node = editor.state.doc.nodeAt(heading.position);
+                                if (node?.type.name !== 'heading' || node.textContent !== heading.text || node.attrs['level'] !== heading.level)
+                                    return;
+                                const target = mounted?.tools.getTarget();
+                                if (target)
+                                    void mounted?.tools.revealHeading.invoke(target, { index, expiresAt: Date.now() + 5000 }).then(result => {
+                                        if (active.current === controller && result.kind !== 'applied' && result.kind !== 'proposed')
+                                            setError(result.reason);
+                                    }).catch(() => { if (active.current === controller)
+                                        setError('The heading could not be selected'); });
+                            }, children: heading.text || 'Untitled heading' }) }, heading.position)) }) }), uncertain && _jsxs("div", { role: "alert", className: "boring-markdown-alert", children: ["Save acknowledgement was lost. Keep editing while its outcome is checked.", _jsx("button", { type: "button", onClick: () => run(controller.actions.reconcile), children: "Check save outcome" }), _jsx("button", { type: "button", onClick: () => run(controller.actions.abandon), children: "Stop checking and refresh, keeping my draft" })] }), conflict && _jsxs("div", { role: "alert", className: "boring-markdown-alert", children: ["The saved document changed. Your local text has been kept.", _jsx("button", { type: "button", disabled: pending || uncertain, onClick: () => run(controller.actions.refresh), children: "Check saved version" }), _jsx("button", { type: "button", disabled: pending || uncertain, onClick: () => run(controller.actions.discardToRemote), children: "Discard local changes and reload" })] }), (outcome?.kind === 'denied' || outcome?.kind === 'unavailable') && _jsx("p", { role: "alert", className: "boring-markdown-alert", children: outcome.reason }), error && _jsx("p", { role: "alert", className: "boring-markdown-alert", children: error }), state.proposals.map(proposal => _jsxs("article", { "data-boring": "proposal", className: "boring-markdown-proposal", children: [_jsx("h3", { children: proposal.summary || 'Proposed edit' }), _jsxs("details", { children: [_jsx("summary", { children: "Review text changes" }), _jsx(MarkdownProposalDiff, { proposal: proposal }), _jsxs("details", { children: [_jsx("summary", { children: "Exact before and after" }), _jsx("h4", { children: "Before" }), _jsx("pre", { children: proposal.before }), _jsx("h4", { children: "After" }), _jsx("pre", { children: proposal.after })] })] }), _jsx("button", { type: "button", disabled: unavailable || pending || uncertain || proposal.adopted, onClick: () => run(() => controller.actions.accept(proposal.id)), children: proposal.adopted ? 'Adopted' : 'Accept and save' }), _jsx("button", { type: "button", onClick: () => controller.actions.reject(proposal.id), children: "Dismiss proposal" })] }, proposal.id)), mode === 'source'
+                ? _jsx("textarea", { ref: sourceInput, className: "boring-markdown-source", "aria-label": `${title} Markdown source`, value: state.text, readOnly: unavailable, spellCheck: false, onChange: event => controller.actions.edit(event.currentTarget.value) })
+                : _jsx("div", { className: "boring-markdown-surface", onKeyDownCapture: markInteraction, onBeforeInputCapture: markInteraction, onInputCapture: markInteraction, onPasteCapture: markInteraction, onDropCapture: markInteraction, onChangeCapture: markInteraction, onClickCapture: event => { markInteraction(); if (event.target instanceof Element && event.target.closest('a'))
+                        event.preventDefault(); }, onAuxClickCapture: event => { if (event.target instanceof Element && event.target.closest('a'))
+                        event.preventDefault(); }, children: _jsx(EditorContent, { editor: editor }) })] });
+}

package/dist/markdown-extensions.d.ts

@@ -0,0 +1,16 @@
+import type { Extensions } from '@tiptap/core';
+/** Maps an image address in the document to a URL the browser may load, or `undefined` to keep the image inert. */
+export type MarkdownImageResolver = (source: string) => string | undefined;
+/** Only an image carried inside the document itself loads by default. Anything else needs the host's resolver. */
+export declare const inlineImagesOnly: MarkdownImageResolver;
+export interface MarkdownExtensionOptions {
+    readonly placeholder?: string;
+    readonly images?: () => MarkdownImageResolver | undefined;
+}
+/**
+ * The Markdown constructs the rich editor can keep exactly: StarterKit (headings, lists, quotes, code, rules, bold, italic,
+ * strike, links), task lists, GFM tables, images and highlight. Underline is off because Markdown has no underline.
+ * Images are inert: without a host resolver they render as a labelled placeholder and never make a request.
+ */
+export declare function createMarkdownExtensions({ placeholder, images }?: MarkdownExtensionOptions): Extensions;
+//# sourceMappingURL=markdown-extensions.d.ts.map

package/dist/markdown-extensions.js

@@ -0,0 +1,96 @@
+import StarterKit from '@tiptap/starter-kit';
+import { Markdown } from '@tiptap/markdown';
+import { Placeholder } from '@tiptap/extensions';
+import { TaskItem, TaskList } from '@tiptap/extension-list';
+import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table';
+import Image from '@tiptap/extension-image';
+import Highlight from '@tiptap/extension-highlight';
+import { createMarkdownParser } from './markdown-parser.js';
+/**
+ * The serialiser HTML-encodes text (`&` becomes `&`), which rewrites ordinary prose such as "Notes & Highlights". The parser
+ * here reads text back as plain characters, so only the backslash escapes for Markdown syntax are kept.
+ */
+const PlainTextMarkdown = Markdown.extend({
+    onBeforeCreate() {
+        this.parent?.();
+        const manager = this.editor.markdown;
+        if (!manager)
+            return;
+        const encode = manager.encodeTextForMarkdown.bind(manager);
+        manager.encodeTextForMarkdown = (text, node, parent) => {
+            const encoded = encode(text, node, parent);
+            // Code is returned untouched by the original; for other text, replace its entity encoding by the plain characters.
+            return encoded === text ? text : manager.escapeMarkdownSyntax(text);
+        };
+    },
+});
+/**
+ * A GFM table keeps the exact text it was written in (unpadded `|a|b|`, `:---:` alignment rows, `_emphasis_`, escaped pipes, empty
+ * cells) while its content is unchanged: parsing records the source and the canonical JSON of the rows it produced, and rendering
+ * writes the source back when the rows are still identical. An edited table (a cell, a row, a column, an alignment) is rendered by
+ * the native serialiser, which writes padded GFM with the column alignments. The source is never rendered into the HTML, so a
+ * copied or pasted table is serialised normally.
+ */
+function createSourceTable(schema) {
+    return Table.extend({
+        addAttributes() {
+            return {
+                ...this.parent?.(),
+                markdownSource: { default: null, rendered: false, parseHTML: () => null },
+            };
+        },
+        parseMarkdown(token, helpers) {
+            const parsed = this.parent(token, helpers);
+            const current = schema();
+            const raw = typeof token.raw === 'string' ? token.raw.replace(/\n+$/, '') : '';
+            if (!current || !raw || Array.isArray(parsed))
+                return parsed;
+            try {
+                const rows = JSON.stringify(current.nodeFromJSON({ type: 'table', content: parsed.content ?? [] }).toJSON().content ?? []);
+                return { ...parsed, attrs: { ...parsed.attrs, markdownSource: { raw, rows } } };
+            }
+            catch {
+                return parsed;
+            }
+        },
+        renderMarkdown(node, helpers, context) {
+            const source = node.attrs?.['markdownSource'];
+            if (source && typeof source.raw === 'string' && source.rows === JSON.stringify(node.content ?? []))
+                return `\n${source.raw}\n`;
+            return this.parent(node, helpers, context);
+        },
+    });
+}
+/** Only an image carried inside the document itself loads by default. Anything else needs the host's resolver. */
+export const inlineImagesOnly = source => /^data:image\/(?:png|jpe?g|gif|webp);base64,[a-z0-9+/=]+$/i.test(source) ? source : undefined;
+/**
+ * The Markdown constructs the rich editor can keep exactly: StarterKit (headings, lists, quotes, code, rules, bold, italic,
+ * strike, links), task lists, GFM tables, images and highlight. Underline is off because Markdown has no underline.
+ * Images are inert: without a host resolver they render as a labelled placeholder and never make a request.
+ */
+export function createMarkdownExtensions({ placeholder, images } = {}) {
+    const InertImage = Image.extend({
+        renderHTML({ node }) {
+            const source = String(node.attrs['src'] ?? '');
+            const alt = String(node.attrs['alt'] ?? '');
+            const title = node.attrs['title'] ? String(node.attrs['title']) : undefined;
+            const resolved = (images?.() ?? inlineImagesOnly)(source);
+            return resolved
+                ? ['img', { src: resolved, alt, ...(title ? { title } : {}), 'data-boring-image': 'loaded' }]
+                : ['span', { class: 'boring-markdown-image', 'data-boring-image': 'inert', role: 'img', 'aria-label': alt || 'Image', ...(title ? { title } : {}) }, alt || 'Image'];
+        },
+    });
+    let schema;
+    const SourceTable = createSourceTable(() => schema).extend({
+        onBeforeCreate() { this.parent?.(); schema = this.editor.schema; },
+    });
+    return [
+        StarterKit.configure({ link: { openOnClick: false, autolink: false, linkOnPaste: false }, underline: false }),
+        TaskList, TaskItem.configure({ nested: true }),
+        SourceTable.configure({ resizable: false }), TableRow, TableHeader, TableCell,
+        InertImage.configure({ inline: false, allowBase64: true }),
+        Highlight,
+        Placeholder.configure({ placeholder: placeholder ?? 'Start writing' }),
+        PlainTextMarkdown.configure({ marked: createMarkdownParser(), markedOptions: { gfm: true, breaks: false } }),
+    ];
+}

package/dist/markdown-icons.d.ts

@@ -0,0 +1,244 @@
+import { type ReactElement } from 'react';
+declare const ICONS: {
+    readonly Bold: readonly [readonly ["path", {
+        readonly d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8";
+    }]];
+    readonly Italic: readonly [readonly ["line", {
+        readonly x1: "19";
+        readonly x2: "10";
+        readonly y1: "4";
+        readonly y2: "4";
+    }], readonly ["line", {
+        readonly x1: "14";
+        readonly x2: "5";
+        readonly y1: "20";
+        readonly y2: "20";
+    }], readonly ["line", {
+        readonly x1: "15";
+        readonly x2: "9";
+        readonly y1: "4";
+        readonly y2: "20";
+    }]];
+    readonly Strike: readonly [readonly ["path", {
+        readonly d: "M16 4H9a3 3 0 0 0-2.83 4";
+    }], readonly ["path", {
+        readonly d: "M14 12a4 4 0 0 1 0 8H6";
+    }], readonly ["line", {
+        readonly x1: "4";
+        readonly x2: "20";
+        readonly y1: "12";
+        readonly y2: "12";
+    }]];
+    readonly Heading1: readonly [readonly ["path", {
+        readonly d: "M4 12h8";
+    }], readonly ["path", {
+        readonly d: "M4 18V6";
+    }], readonly ["path", {
+        readonly d: "M12 18V6";
+    }], readonly ["path", {
+        readonly d: "m17 12 3-2v8";
+    }]];
+    readonly Heading2: readonly [readonly ["path", {
+        readonly d: "M4 12h8";
+    }], readonly ["path", {
+        readonly d: "M4 18V6";
+    }], readonly ["path", {
+        readonly d: "M12 18V6";
+    }], readonly ["path", {
+        readonly d: "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1";
+    }]];
+    readonly Heading3: readonly [readonly ["path", {
+        readonly d: "M4 12h8";
+    }], readonly ["path", {
+        readonly d: "M4 18V6";
+    }], readonly ["path", {
+        readonly d: "M12 18V6";
+    }], readonly ["path", {
+        readonly d: "M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2";
+    }], readonly ["path", {
+        readonly d: "M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2";
+    }]];
+    readonly BulletList: readonly [readonly ["path", {
+        readonly d: "M3 5h.01";
+    }], readonly ["path", {
+        readonly d: "M3 12h.01";
+    }], readonly ["path", {
+        readonly d: "M3 19h.01";
+    }], readonly ["path", {
+        readonly d: "M8 5h13";
+    }], readonly ["path", {
+        readonly d: "M8 12h13";
+    }], readonly ["path", {
+        readonly d: "M8 19h13";
+    }]];
+    readonly OrderedList: readonly [readonly ["path", {
+        readonly d: "M11 5h10";
+    }], readonly ["path", {
+        readonly d: "M11 12h10";
+    }], readonly ["path", {
+        readonly d: "M11 19h10";
+    }], readonly ["path", {
+        readonly d: "M4 4h1v5";
+    }], readonly ["path", {
+        readonly d: "M4 9h2";
+    }], readonly ["path", {
+        readonly d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02";
+    }]];
+    readonly TaskList: readonly [readonly ["path", {
+        readonly d: "M13 5h8";
+    }], readonly ["path", {
+        readonly d: "M13 12h8";
+    }], readonly ["path", {
+        readonly d: "M13 19h8";
+    }], readonly ["path", {
+        readonly d: "m3 17 2 2 4-4";
+    }], readonly ["rect", {
+        readonly x: "3";
+        readonly y: "4";
+        readonly width: "6";
+        readonly height: "6";
+        readonly rx: "1";
+    }]];
+    readonly Quote: readonly [readonly ["path", {
+        readonly d: "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z";
+    }], readonly ["path", {
+        readonly d: "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z";
+    }]];
+    readonly Code: readonly [readonly ["path", {
+        readonly d: "m16 18 6-6-6-6";
+    }], readonly ["path", {
+        readonly d: "m8 6-6 6 6 6";
+    }]];
+    readonly CodeBlock: readonly [readonly ["path", {
+        readonly d: "m10 9-3 3 3 3";
+    }], readonly ["path", {
+        readonly d: "m14 15 3-3-3-3";
+    }], readonly ["rect", {
+        readonly x: "3";
+        readonly y: "3";
+        readonly width: "18";
+        readonly height: "18";
+        readonly rx: "2";
+    }]];
+    readonly Link: readonly [readonly ["path", {
+        readonly d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71";
+    }], readonly ["path", {
+        readonly d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71";
+    }]];
+    readonly Unlink: readonly [readonly ["path", {
+        readonly d: "m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71";
+    }], readonly ["path", {
+        readonly d: "m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71";
+    }], readonly ["line", {
+        readonly x1: "8";
+        readonly x2: "8";
+        readonly y1: "2";
+        readonly y2: "5";
+    }], readonly ["line", {
+        readonly x1: "2";
+        readonly x2: "5";
+        readonly y1: "8";
+        readonly y2: "8";
+    }], readonly ["line", {
+        readonly x1: "16";
+        readonly x2: "16";
+        readonly y1: "19";
+        readonly y2: "22";
+    }], readonly ["line", {
+        readonly x1: "19";
+        readonly x2: "22";
+        readonly y1: "16";
+        readonly y2: "16";
+    }]];
+    readonly Highlight: readonly [readonly ["path", {
+        readonly d: "m9 11-6 6v3h9l3-3";
+    }], readonly ["path", {
+        readonly d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4";
+    }]];
+    readonly Rule: readonly [readonly ["path", {
+        readonly d: "M5 12h14";
+    }]];
+    readonly Table: readonly [readonly ["path", {
+        readonly d: "M3 9h18";
+    }], readonly ["path", {
+        readonly d: "M9 3v18";
+    }], readonly ["rect", {
+        readonly x: "3";
+        readonly y: "3";
+        readonly width: "18";
+        readonly height: "18";
+        readonly rx: "2";
+    }]];
+    readonly Rows: readonly [readonly ["path", {
+        readonly d: "M14 10h2";
+    }], readonly ["path", {
+        readonly d: "M15 22v-8";
+    }], readonly ["path", {
+        readonly d: "M15 2v4";
+    }], readonly ["path", {
+        readonly d: "M2 10h2";
+    }], readonly ["path", {
+        readonly d: "M20 10h2";
+    }], readonly ["path", {
+        readonly d: "M3 19h18";
+    }], readonly ["path", {
+        readonly d: "M3 22v-6a2 2 135 0 1 2-2h14a2 2 45 0 1 2 2v6";
+    }], readonly ["path", {
+        readonly d: "M3 2v2a2 2 45 0 0 2 2h14a2 2 135 0 0 2-2V2";
+    }], readonly ["path", {
+        readonly d: "M8 10h2";
+    }], readonly ["path", {
+        readonly d: "M9 22v-8";
+    }], readonly ["path", {
+        readonly d: "M9 2v4";
+    }]];
+    readonly Columns: readonly [readonly ["path", {
+        readonly d: "M14 14v2";
+    }], readonly ["path", {
+        readonly d: "M14 20v2";
+    }], readonly ["path", {
+        readonly d: "M14 2v2";
+    }], readonly ["path", {
+        readonly d: "M14 8v2";
+    }], readonly ["path", {
+        readonly d: "M2 15h8";
+    }], readonly ["path", {
+        readonly d: "M2 3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2";
+    }], readonly ["path", {
+        readonly d: "M2 9h8";
+    }], readonly ["path", {
+        readonly d: "M22 15h-4";
+    }], readonly ["path", {
+        readonly d: "M22 3h-2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h2";
+    }], readonly ["path", {
+        readonly d: "M22 9h-4";
+    }], readonly ["path", {
+        readonly d: "M5 3v18";
+    }]];
+    readonly Trash: readonly [readonly ["path", {
+        readonly d: "M10 11v6";
+    }], readonly ["path", {
+        readonly d: "M14 11v6";
+    }], readonly ["path", {
+        readonly d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6";
+    }], readonly ["path", {
+        readonly d: "M3 6h18";
+    }], readonly ["path", {
+        readonly d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2";
+    }]];
+    readonly Check: readonly [readonly ["path", {
+        readonly d: "M20 6 9 17l-5-5";
+    }]];
+    readonly X: readonly [readonly ["path", {
+        readonly d: "M18 6 6 18";
+    }], readonly ["path", {
+        readonly d: "m6 6 12 12";
+    }]];
+};
+export type MarkdownIconName = keyof typeof ICONS;
+/** Decorative: the button that holds it carries the accessible name. */
+export declare function MarkdownIcon({ name }: {
+    readonly name: MarkdownIconName;
+}): ReactElement;
+export {};
+//# sourceMappingURL=markdown-icons.d.ts.map