@hachej/boring-ui-kit 0.4.7 → 0.4.8

package/README.md

@@ -38,7 +38,11 @@ import { MarkdownEditor } from '@hachej/boring-ui-kit/markdown-editor';
 
 Install the pinned React, React DOM, Marked and Tiptap peers listed in this package's manifest when selecting this entry. They remain optional for headless consumers. The renderer borrows its controller; unmounting does not dispose it or close its resource client. The host owns selection, identity and teardown.
 
-Formatting defaults to the pinned desktop toolbar. The Aa header control toggles it; `formattingToolbar="selection"` selects the native Tiptap selection bubble instead. Phones always use the selection bubble. Keyboard shortcuts and Markdown input rules remain available. Rich formatting and Markdown source controls share controller state. Mounting, switching modes and projecting remote text never serialize the original buffer. Genuine rich edits use Tiptap's Markdown serialization and may normalize supported formatting.
+Formatting defaults to the native Tiptap selection bubble on desktop and phone. The header’s **Formatting** icon toggles the full bar; unpressed means selection-only formatting. It remembers the choice for the viewer session, stays visible on phones with a 48px target and hides in Markdown mode. The **…** menu keeps **Formatted** / **Markdown**. Pass `formattingToolbar="pinned"` for the full desktop row (on phones it docks above the keyboard while editing). The built-in menu supports `locale="fr"`. Installed recipes supply real shadcn Base UI menu items through the optional `components.markdownMenu` binding. Keyboard shortcuts and Markdown input rules remain available. Rich formatting and Markdown source controls share controller state. Mounting, switching modes and projecting remote text never serialize the original buffer. Genuine rich edits serialize the changed block range through Tiptap; untouched source spans are retained verbatim.
+
+Formatted opens documents with YAML front matter, raw HTML/comments, footnotes, reference links, CRLF and style variants (`*` bullets, four-space nesting, underscore emphasis and setext headings). Front matter is an editable literal code block. HTML and definitions are quiet raw blocks; inline HTML and references are inert source atoms, never executable HTML. A save without editing preserves the original bytes. Paragraph/heading/list-item source metadata also keeps unchanged spelling through edits and native undo. Edited content follows its existing heading style and document markers where valid; intraword emphasis uses stars when underscores would change its meaning. CRLF is edited as LF and restored on write. The existing legacy ` `-only paragraph cleanup remains.
+
+Mixed line endings, bare carriage returns, NUL characters and blocks whose native projection cannot retain verified source spans still open in Markdown source with a specific explanation. `checkMarkdownRichSafety` reports that decision. Provider save, conflict and recovery semantics are unchanged.
 
 Autosave is enabled by default after 1200ms of idle editing and flushes on blur and page hide through the existing conditional `controller.flush`. Untouched new buffers are not automatically published. `autosave={false}` restores explicit Save; `autosave={{ delayMs: 500 }}` changes the idle delay. Ctrl/Cmd+S always saves the exact selected buffer explicitly. Refused, conflicting and unconfirmed saves retain the draft and pause automatic retries until resolved.
 
@@ -48,7 +52,7 @@ Proposal review shows added/removed lines with two lines of context and expandab
 
 Detailed alignment uses a matrix of at most 250,000 cells after trimming equal prefix/suffix lines. Larger comparisons show all removed/added middle lines with an explicit notice. This bounds the comparison matrix, not total document size, string-comparison cost or rendered rows.
 
-The rich view includes a Document outline built from the native parsed headings when `showOutline` is true. By default, the outline follows the built-in `header` visibility. Navigation changes the native selection without editing or saving Markdown. Rich/source switches retain each mode's selection and direction while the buffer version is unchanged. Text projected from outside (load, refresh, discard, source edits) puts the rich selection at the document start, where the browser leaves its caret, so a click or formatting command never acts on a stale selection at the end. External replacement or source edits invalidate older bookmarks; changing controllers starts a new local session. Human heading controls use the mounted presentation command described below.
+The rich view offers a Document outline built from the native parsed headings when `showOutline` is true. By default, the option follows the built-in `header` visibility; the outline stays hidden until **Show outline** is checked in the menu. Navigation changes the native selection without editing or saving Markdown. Rich/source switches retain each mode's selection and direction while the buffer version is unchanged. Text projected from outside (load, refresh, discard, source edits) puts the rich selection at the document start, where the browser leaves its caret, so a click or formatting command never acts on a stale selection at the end. External replacement or source edits invalidate older bookmarks; changing controllers starts a new local session. Human heading controls use the mounted presentation command described below.
 
 ### Mounted Markdown commands
 

package/dist/markdown-editor.d.ts

@@ -2,7 +2,7 @@ import { type MarkdownDecoration, type MarkdownQuoteCapture } from './markdown-h
 export type { MarkdownDecoration, MarkdownQuoteCapture } from './markdown-highlight-layer.js';
 export { markdownMarkerBackground } from './markdown-highlight-layer.js';
 import type { ViewerComponents } from './viewer-components.js';
-export type { ViewerComponents } from './viewer-components.js';
+export type { MarkdownEditorMenuLabels, MarkdownEditorMenuProps, ViewerComponents } from './viewer-components.js';
 import type { MarkdownAutosave, MarkdownFlush } from './markdown-autosave.js';
 import type { SaveResult } from './resources.js';
 export type { MarkdownAutosave, MarkdownFlush } from './markdown-autosave.js';
@@ -26,9 +26,9 @@ export interface MarkdownEditorProps {
     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. */
+    /** `false` omits the built-in header (title, status, view menu, Save) so a host bar such as the viewer frame supplies them. */
     readonly header?: boolean;
-    /** Show local heading navigation. Defaults to the built-in header's visibility. */
+    /** Offer local heading navigation in the view menu. Defaults to the built-in header's visibility; initially hidden. */
     readonly showOutline?: boolean;
     /** Controlled mode. The editor still falls back to `source` for a document that rich editing cannot keep exactly. */
     readonly mode?: 'rich' | 'source';
@@ -42,8 +42,10 @@ export interface MarkdownEditorProps {
     /** Registers the async navigation barrier. Null while autosave is disabled or the editor is unmounted. */
     readonly onAutosaveChange?: (flush: MarkdownFlush | null) => void;
     readonly onSaveResult?: (result: SaveResult) => void;
-    /** The complete formatting row is pinned by default on desktop; phones show it above the keyboard while editing, plus the selection bubble. */
+    /** Selection formatting by default. Pinned shows the full row on desktop or above the phone keyboard while editing. */
     readonly formattingToolbar?: 'selection' | 'pinned';
+    /** Locale of the built-in view menu. */
+    readonly locale?: 'en' | 'fr';
 }
 /** Borrows the controller. The host owns document selection, access and disposal. */
 export declare function MarkdownEditor(props: MarkdownEditorProps): import("react").JSX.Element;

package/dist/markdown-editor.js

@@ -1,16 +1,17 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { captureMarkdownQuote } from './markdown-quote.js';
 import { captureRichMarkdownQuote, installMarkdownHighlights } from './markdown-highlight-layer.js';
 export { markdownMarkerBackground } from './markdown-highlight-layer.js';
 import { TextDraftControls } from './text-draft-controls.js';
 import { useMarkdownAutosave } from './markdown-autosave.js';
-import { Fragment, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { Fragment, useDeferredValue, useEffect, useLayoutEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
 import { BubbleMenu } from '@tiptap/react/menus';
 import { createMarkdownExtensions } from './markdown-extensions.js';
 import { checkMarkdownRichSafety, describeUnsafe, finishRichMarkdown } from './markdown-safety.js';
+import { captureMarkdownSource, serializeMarkdownEdit } from './markdown-source.js';
 import { MarkdownIcon } from './markdown-icons.js';
 import { MarkdownProposalDiff } from './markdown-proposal-diff.js';
 import { createMountedMarkdownTools } from './markdown-mounted.js';
@@ -64,22 +65,41 @@ function useKeyboardInset(active) {
     }, [active]);
     return inset;
 }
-function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActivate, components, controller, title = 'Document', initialMode = 'rich', placeholder = 'Start writing', className, onMountedTools, header = true, showOutline = header, mode: controlledMode, onModeChange, onRichSafety, resolveImage, formattingToolbar = 'pinned', autosave = true, onAutosaveChange, onSaveResult, activeController: active }) {
+const menuLabels = {
+    en: { moreActions: 'More actions', editorMode: 'Editor mode', formatted: 'Formatted', markdown: 'Markdown', showOutline: 'Show outline' },
+    fr: { moreActions: 'Plus d’actions', editorMode: 'Mode d’édition', formatted: 'Mis en forme', markdown: 'Markdown', showOutline: 'Afficher le plan' },
+};
+/** Unstyled native fallback. Installed recipes bind the host's shadcn dropdown. */
+function NativeMarkdownViewOptions({ labels, mode, onModeChange, richDisabledReason, outline, input }) {
+    const InputControl = input ?? 'input';
+    const group = useId();
+    const menu = useRef(null);
+    const choose = (action) => { action(); if (menu.current)
+        menu.current.open = false; };
+    return _jsxs("details", { ref: menu, "data-boring": "markdown-menu", children: [_jsx("summary", { "aria-label": labels.moreActions, children: _jsx(MarkdownIcon, { name: "More" }) }), _jsxs("fieldset", { children: [_jsx("legend", { children: labels.editorMode }), _jsxs("label", { title: richDisabledReason, children: [_jsx(InputControl, { type: "radio", name: group, "aria-label": labels.formatted, "aria-describedby": richDisabledReason ? `${group}-reason` : undefined, checked: mode === 'rich', disabled: !!richDisabledReason, onChange: () => choose(() => onModeChange('rich')) }), _jsx(MarkdownIcon, { name: "Heading1" }), labels.formatted, richDisabledReason && _jsx("span", { id: `${group}-reason`, children: richDisabledReason })] }), _jsxs("label", { children: [_jsx(InputControl, { type: "radio", name: group, "aria-label": labels.markdown, checked: mode === 'source', onChange: () => choose(() => onModeChange('source')) }), _jsx(MarkdownIcon, { name: "Code" }), labels.markdown] })] }), outline && _jsxs("label", { children: [_jsx(InputControl, { type: "checkbox", "aria-label": labels.showOutline, checked: outline.shown, onChange: event => choose(() => outline.onChange(event.currentTarget.checked)) }), _jsx(MarkdownIcon, { name: "BulletList" }), labels.showOutline] })] });
+}
+function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActivate, components, controller, title = 'Document', initialMode = 'rich', placeholder = 'Start writing', className, onMountedTools, header = true, showOutline = header, mode: controlledMode, onModeChange, onRichSafety, resolveImage, formattingToolbar = 'selection', locale = 'en', autosave = true, onAutosaveChange, onSaveResult, activeController: active }) {
     const Control = components?.button ?? 'button';
+    const FormattingControl = components?.formattingControl ?? 'button';
     const Bubble = components?.bubble ?? Fragment;
     const Source = components?.textarea ?? 'textarea';
     const LinkInput = components?.input ?? 'input';
+    const ViewOptions = components?.markdownMenu;
+    const [toolbar, setToolbar] = useState(formattingToolbar);
+    useLayoutEffect(() => setToolbar(formattingToolbar), [formattingToolbar]);
+    const [outlineShown, setOutlineShown] = useState(false);
     const phone = useSyncExternalStore(subscribePhone, phoneSnapshot, desktopSnapshot);
-    const showPinned = formattingToolbar === 'pinned' && !phone;
+    const showPinned = toolbar === 'pinned' && !phone;
     const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     const projected = useRef(null);
+    const source = 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 ownText = state.text === emitted.current && source.current !== null;
     const safety = useMemo(() => ownText ? { safe: true } : checkMarkdownRichSafety(checked), [checked, ownText]);
     const richOffered = safety.safe;
     const mode = richOffered ? requestedMode : 'source';
@@ -100,7 +120,7 @@ function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActiva
     };
     const editor = useEditor({
         immediatelyRender: false,
-        extensions: createMarkdownExtensions({ placeholder, images: () => images.current }),
+        extensions: createMarkdownExtensions({ placeholder, images: () => images.current, source: () => controller.getSnapshot().text.replace(/\r\n/g, '\n') }),
         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' } },
@@ -108,7 +128,9 @@ function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActiva
             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);
+            const previous = controller.getSnapshot().text;
+            const markdown = serializeMarkdownEdit(current, source.current, previous) ?? finishRichMarkdown(current.getMarkdown(), previous);
+            source.current = captureMarkdownSource(current, markdown);
             projected.current = markdown;
             emitted.current = markdown;
             controller.actions.edit(markdown);
@@ -127,7 +149,8 @@ function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActiva
         // 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();
+        editor.chain().setContent(state.text.replace(/\r\n/g, '\n'), { contentType: 'markdown', emitUpdate: false }).setTextSelection(0).command(({ tr }) => { tr.setMeta('addToHistory', false); return true; }).run();
+        source.current = captureMarkdownSource(editor, state.text);
         projected.current = state.text;
     }, [editor, state.text]);
     useEffect(() => { editor?.setEditable(!state.readOnly && state.lifecycle === 'active'); }, [editor, state.readOnly, state.lifecycle]);
@@ -175,24 +198,31 @@ function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActiva
             });
             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;
-        }
+    const switchMode = (next) => {
+        if (next === mode || next === 'rich' && !richOffered)
+            return;
         interaction.current = false;
-        focusAfterSwitch.current = true;
-        const next = mode === 'source' ? 'rich' : 'source';
         if (controlledMode === undefined)
             setOwnMode(next);
         onModeChange?.(next);
     };
+    // The captured textarea survives DOM removal, including a mode change from a host menu.
+    useLayoutEffect(() => {
+        const source = sourceInput.current;
+        return () => {
+            if (active.current !== controller || activeMode.current === mode)
+                return;
+            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
+                sourceBookmark.current = source?.value === current.text
+                    ? { version: current.bufferVersion, start: source.selectionStart, end: source.selectionEnd, direction: source.selectionDirection } : null;
+            interaction.current = false;
+            focusAfterSwitch.current = true;
+        };
+    }, [active, controller, editor, mode]);
     useEffect(() => {
         if (!focusAfterSwitch.current || active.current !== controller || state.lifecycle !== 'active')
             return;
@@ -253,8 +283,14 @@ function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActiva
     const [linkDraft, setLinkDraft] = useState(null);
     // On a phone the full formatting row docks above the soft keyboard while the rich surface has focus.
     const editing = useEditorFocus(editor);
-    const dockVisible = phone && !unavailable && !!editor && (editing || linkDraft !== null);
+    const dockVisible = phone && toolbar === 'pinned' && !unavailable && !!editor && (editing || linkDraft !== null);
     const keyboardInset = useKeyboardInset(dockVisible);
+    const previousToolbar = useRef(toolbar);
+    useEffect(() => {
+        if (previousToolbar.current !== toolbar && toolbar === 'pinned' && phone && mode === 'rich')
+            editor?.commands.focus(undefined, { scrollIntoView: false });
+        previousToolbar.current = toolbar;
+    }, [toolbar, phone, mode, editor]);
     const command = (operation) => { interaction.current = true; try {
         operation();
     }
@@ -274,6 +310,10 @@ function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActiva
         setLinkDraft(null);
     };
     const formatTools = _jsxs(_Fragment, { 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())] })] });
+    const viewOptions = {
+        labels: menuLabels[locale], mode, onModeChange: switchMode, richDisabledReason: richOffered ? undefined : describeUnsafe(safety),
+        outline: showOutline ? { shown: outlineShown, onChange: setOutlineShown } : undefined,
+    };
     return _jsxs("section", { className: className, "data-boring": "markdown-editor", "data-mode": mode, "data-dock": (mode === 'rich' && dockVisible) || undefined, "data-dirty": state.dirty || undefined, onBlurCapture: event => { if (saving.enabled && !event.currentTarget.contains(event.relatedTarget))
             void saving.immediate(); }, onKeyDownCapture: event => {
             if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
@@ -281,11 +321,11 @@ function MarkdownEditorSession({ highlights, onQuoteSelection, onHighlightActiva
                 if (!unavailable && !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(Control, { type: "button", "aria-pressed": mode === 'source', disabled: !richOffered, onClick: switchMode, children: "Markdown source" }), !saving.enabled && _jsx(Control, { type: "button", disabled: unavailable || !state.dirty || pending || uncertain, onClick: save, children: "Save" })] }), _jsx(TextDraftControls, { components: components, 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' && showPinned && _jsx("div", { role: "toolbar", "aria-label": "Text formatting", className: "boring-markdown-toolbar", children: formatTools }), mode === 'rich' && dockVisible && createPortal(_jsxs("div", { role: "toolbar", "aria-label": "Text formatting", className: "boring-viewer boring-markdown-dock", "data-testid": "markdown-dock", "data-keyboard": keyboardInset > 0 || undefined, style: { bottom: keyboardInset }, onPointerDown: event => event.preventDefault(), children: [Rule && _jsx(Rule, { className: "boring-markdown-dock-rule" }), formatTools] }), document.body), mode === 'rich' && editor && !showPinned && !unavailable && _jsx(BubbleMenu, { editor: editor, updateDelay: 0, options: BUBBLE_OPTIONS, appendTo: bubbleContainer, role: "toolbar", "aria-label": "Text formatting", className: "boring-viewer boring-markdown-bubble", children: _jsxs(Bubble, { children: [tool('Bold', 'Bold', marks?.bold, () => chain().toggleBold().run()), tool('Italic', 'Italic', marks?.italic, () => chain().toggleItalic().run()), tool('Highlight', 'Highlight', marks?.highlight, () => chain().toggleHighlight().run()), tool('Code', 'Code', marks?.code, () => chain().toggleCode().run()), tool('Link', 'Link', marks?.link || linkDraft !== null, openLink)] }) }), mode === 'rich' && linkDraft !== null && _jsxs("form", { className: "boring-markdown-link", "aria-label": "Link address", onSubmit: event => { event.preventDefault(); applyLink(); }, children: [_jsx(LinkInput, { 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') {
+        }, 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' }), ViewOptions ? _jsx(ViewOptions, { ...viewOptions }) : _jsx(NativeMarkdownViewOptions, { ...viewOptions, input: components?.input }), mode === 'rich' && _jsx(FormattingControl, { type: "button", "aria-label": locale === 'fr' ? 'Mise en forme' : 'Formatting', title: locale === 'fr' ? 'Mise en forme' : 'Formatting', "aria-pressed": toolbar === 'pinned', onClick: () => setToolbar(toolbar === 'pinned' ? 'selection' : 'pinned'), children: _jsx(MarkdownIcon, { name: "Type" }) }), !saving.enabled && _jsx(Control, { type: "button", disabled: unavailable || !state.dirty || pending || uncertain, onClick: save, children: "Save" })] }), _jsx(TextDraftControls, { components: components, 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' && showPinned && _jsx("div", { role: "toolbar", "aria-label": "Text formatting", className: "boring-markdown-toolbar", children: formatTools }), mode === 'rich' && dockVisible && createPortal(_jsxs("div", { role: "toolbar", "aria-label": "Text formatting", className: "boring-viewer boring-markdown-dock", "data-testid": "markdown-dock", "data-keyboard": keyboardInset > 0 || undefined, style: { bottom: keyboardInset }, onPointerDown: event => event.preventDefault(), children: [Rule && _jsx(Rule, { className: "boring-markdown-dock-rule" }), formatTools] }), document.body), mode === 'rich' && editor && !showPinned && !unavailable && _jsx(BubbleMenu, { editor: editor, updateDelay: 0, options: BUBBLE_OPTIONS, appendTo: bubbleContainer, role: "toolbar", "aria-label": "Text formatting", className: "boring-viewer boring-markdown-bubble", children: _jsxs(Bubble, { children: [tool('Bold', 'Bold', marks?.bold, () => chain().toggleBold().run()), tool('Italic', 'Italic', marks?.italic, () => chain().toggleItalic().run()), tool('Highlight', 'Highlight', marks?.highlight, () => chain().toggleHighlight().run()), tool('Code', 'Code', marks?.code, () => chain().toggleCode().run()), tool('Link', 'Link', marks?.link || linkDraft !== null, openLink)] }) }), mode === 'rich' && linkDraft !== null && _jsxs("form", { className: "boring-markdown-link", "aria-label": "Link address", onSubmit: event => { event.preventDefault(); applyLink(); }, children: [_jsx(LinkInput, { 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(Control, { type: "submit", children: linkDraft.trim() === '' && marks?.link ? 'Remove link' : 'Apply link' }), _jsx(Control, { 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) }), showOutline && 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(Control, { type: "button", "aria-label": `Go to heading: ${heading.text || 'Untitled heading'}`, disabled: state.lifecycle !== 'active', onClick: () => {
+                        } } }), _jsx(Control, { type: "submit", children: linkDraft.trim() === '' && marks?.link ? 'Remove link' : 'Apply link' }), _jsx(Control, { 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) }), showOutline && outlineShown && 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(Control, { 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;

package/dist/markdown-extensions.d.ts

@@ -6,11 +6,12 @@ export declare const inlineImagesOnly: MarkdownImageResolver;
 export interface MarkdownExtensionOptions {
     readonly placeholder?: string;
     readonly images?: () => MarkdownImageResolver | undefined;
+    readonly source?: () => string;
 }
 /**
  * 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;
+export declare function createMarkdownExtensions({ placeholder, images, source }?: MarkdownExtensionOptions): Extensions;
 //# sourceMappingURL=markdown-extensions.d.ts.map

package/dist/markdown-extensions.js

@@ -7,6 +7,7 @@ import Image from '@tiptap/extension-image';
 import Highlight from '@tiptap/extension-highlight';
 import { Node as TiptapNode } from '@tiptap/core';
 import { createMarkdownParser } from './markdown-parser.js';
+import { preservedMarkdownNodes } from './markdown-preserved.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.
@@ -25,13 +26,79 @@ const PlainTextMarkdown = Markdown.extend({
         };
     },
 });
-const RichStarterKit = StarterKit.extend({
-    addExtensions() {
-        return (this.parent?.() ?? []).map(extension => extension instanceof TiptapNode && extension.name === 'paragraph'
-            ? extension.extend({ renderMarkdown: (node, helpers) => helpers.renderChildren(node.content ?? []) })
-            : extension);
-    },
-});
+function sourceBlock(extension, schema) {
+    return extension.extend({
+        addAttributes() { return { ...this.parent?.(), markdownSource: { default: null, rendered: false, parseHTML: () => null } }; },
+        parseMarkdown(token, helpers) {
+            const parsed = this.parent(token, helpers), current = schema();
+            if (!current || !token.raw || Array.isArray(parsed) || /^(?:[ \t]* [ \t]*)+$/.test(token.raw.trim()))
+                return parsed;
+            const snapshot = current.nodeFromJSON(parsed).toJSON();
+            return { ...parsed, attrs: { ...parsed.attrs, markdownSource: { raw: token.raw.replace(/\n+$/, ''), snapshot: JSON.stringify(snapshot) } } };
+        },
+        renderMarkdown(node, helpers, context) {
+            const original = node.attrs?.['markdownSource'];
+            const snapshot = { ...node, attrs: { ...node.attrs, markdownSource: null } };
+            if (original && typeof original.raw === 'string' && original.snapshot === JSON.stringify(snapshot))
+                return original.raw;
+            return this.parent(node, helpers, context);
+        },
+    });
+}
+function sourceStarterKit(source, schema) {
+    return StarterKit.extend({
+        addExtensions() {
+            return (this.parent?.() ?? []).map(extension => {
+                if (extension instanceof TiptapNode && extension.name === 'paragraph')
+                    return sourceBlock(extension.extend({ renderMarkdown: (node, helpers) => helpers.renderChildren(node.content ?? []) }), schema);
+                if (extension.name === 'bold' || extension.name === 'italic')
+                    return extension.extend({ renderMarkdown: (node, helpers, context) => {
+                            const text = typeof context.meta?.['markText'] === 'string' ? context.meta['markText'] : '';
+                            const escaped = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                            const prose = source().replace(/[*_]/g, '');
+                            const intraword = text === '' || !prose.includes(text) || new RegExp(`(?:[\\p{L}\\p{N}]${escaped}|${escaped}[\\p{L}\\p{N}])`, 'u').test(prose);
+                            const marker = extension.name === 'bold' ? (!intraword && /__\S/.test(source()) ? '__' : '**') : (!intraword && /(?:^|\s)_\S/.test(source()) ? '_' : '*');
+                            return marker + helpers.renderChildren(node) + marker;
+                        } });
+                if (extension instanceof TiptapNode && extension.name === 'listItem')
+                    return extension.extend({
+                        addAttributes() { return { ...this.parent?.(), markdownSource: { default: null, rendered: false, parseHTML: () => null } }; },
+                        parseMarkdown(token, helpers) {
+                            const parsed = this.parent(token, helpers);
+                            const current = schema();
+                            if (!current || !token.raw || Array.isArray(parsed))
+                                return parsed;
+                            const content = current.nodeFromJSON(parsed).toJSON().content ?? [];
+                            return { ...parsed, attrs: { ...parsed.attrs, markdownSource: { raw: token.raw.replace(/\n$/, ''), content: JSON.stringify(content) } } };
+                        },
+                        renderMarkdown(node, helpers, context) {
+                            const original = node.attrs?.['markdownSource'];
+                            if (original && typeof original.raw === 'string' && original.content === JSON.stringify(node.content ?? []))
+                                return original.raw;
+                            const rendered = this.parent(node, helpers, context);
+                            const bullet = /^ {0,3}([-*+])\s/m.exec(source())?.[1] ?? '-';
+                            return context.parentType === 'bulletList' ? rendered.replace(/^- /, `${bullet} `) : rendered;
+                        },
+                    });
+                if (extension instanceof TiptapNode && extension.name === 'horizontalRule')
+                    return extension.extend({ renderMarkdown: () => /^ {0,3}(?:(?:\*\s*){3,}|(?:-\s*){3,}|(?:_\s*){3,})$/m.exec(source())?.[0] ?? '---' });
+                if (extension instanceof TiptapNode && extension.name === 'heading')
+                    return sourceBlock(extension.extend({
+                        addAttributes() { return { ...this.parent?.(), markdownHeadingStyle: { default: 'atx', rendered: false, parseHTML: () => 'atx' } }; },
+                        parseMarkdown(token, helpers) {
+                            const parsed = this.parent(token, helpers);
+                            return { ...parsed, attrs: { ...parsed.attrs, markdownHeadingStyle: /^ {0,3}#{1,6}(?:\s|$)/.test(token.raw ?? '') ? 'atx' : 'setext' } };
+                        },
+                        renderMarkdown(node, helpers, context) {
+                            const text = helpers.renderChildren(node.content ?? []), level = Number(node.attrs?.['level']);
+                            return level <= 2 && node.attrs?.['markdownHeadingStyle'] === 'setext' ? `${text}\n${(level === 1 ? '=' : '-').repeat(Math.max(3, text.length))}` : this.parent(node, helpers, context);
+                        },
+                    }), schema);
+                return extension;
+            });
+        },
+    });
+}
 /**
  * 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
@@ -76,7 +143,7 @@ export const inlineImagesOnly = source => /^data:image\/(?:png|jpe?g|gif|webp);b
  * 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 } = {}) {
+export function createMarkdownExtensions({ placeholder, images, source = () => '' } = {}) {
     const InertImage = Image.extend({
         renderHTML({ node }) {
             const source = String(node.attrs['src'] ?? '');
@@ -93,12 +160,13 @@ export function createMarkdownExtensions({ placeholder, images } = {}) {
         onBeforeCreate() { this.parent?.(); schema = this.editor.schema; },
     });
     return [
-        RichStarterKit.configure({ link: { openOnClick: false, autolink: false, linkOnPaste: false }, underline: false }),
+        sourceStarterKit(source, () => schema).configure({ link: { openOnClick: false, autolink: false, linkOnPaste: false }, underline: false }),
+        ...preservedMarkdownNodes(),
         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 } }),
+        PlainTextMarkdown.configure({ marked: createMarkdownParser(), markedOptions: { gfm: true, breaks: false }, indentation: { style: 'space', size: /^ {4}[-*+]\s/m.test(source()) ? 4 : 2 } }),
     ];
 }

package/dist/markdown-icons.d.ts

@@ -1,5 +1,25 @@
 import { type ReactElement } from 'react';
 declare const ICONS: {
+    readonly Type: readonly [readonly ["path", {
+        readonly d: "M12 4v16";
+    }], readonly ["path", {
+        readonly d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2";
+    }], readonly ["path", {
+        readonly d: "M9 20h6";
+    }]];
+    readonly More: readonly [readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "5";
+        readonly r: "1";
+    }], readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "12";
+        readonly r: "1";
+    }], readonly ["circle", {
+        readonly cx: "12";
+        readonly cy: "19";
+        readonly r: "1";
+    }]];
     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";
     }]];

package/dist/markdown-icons.js

@@ -3,6 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Path data is from Lucide (https://lucide.dev, ISC license), 24x24 outline icons.
 import { createElement } from 'react';
 const ICONS = {
+    Type: [["path", { "d": "M12 4v16" }], ["path", { "d": "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2" }], ["path", { "d": "M9 20h6" }]],
+    More: [["circle", { "cx": "12", "cy": "5", "r": "1" }], ["circle", { "cx": "12", "cy": "12", "r": "1" }], ["circle", { "cx": "12", "cy": "19", "r": "1" }]],
     Bold: [["path", { "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" }]],
     Italic: [["line", { "x1": "19", "x2": "10", "y1": "4", "y2": "4" }], ["line", { "x1": "14", "x2": "5", "y1": "20", "y2": "20" }], ["line", { "x1": "15", "x2": "9", "y1": "4", "y2": "20" }]],
     Strike: [["path", { "d": "M16 4H9a3 3 0 0 0-2.83 4" }], ["path", { "d": "M14 12a4 4 0 0 1 0 8H6" }], ["line", { "x1": "4", "x2": "20", "y1": "12", "y2": "12" }]],

package/dist/markdown-parser.js

@@ -1,7 +1,7 @@
 import { Marked, marked } from 'marked';
 /** Tiptap expects the callable marked API; keep its mutable options local to one editor. */
 export function createMarkdownParser() {
-    const instance = new Marked({ tokenizer: { html: () => undefined, tag: () => undefined } });
+    const instance = new Marked();
     // marked HTML-escapes the text of inline tokens (`&` becomes `&`); the editor holds plain text, so decode it again or a
     // serialised document would not match what was written.
     const plain = (text) => text.replace(/&(?:amp|lt|gt|quot|#39);/g, entity => ({ '&amp;': '&', '&lt;': '<', '&gt;': '>', '&quot;': '"', '&#39;': "'" })[entity] ?? entity);

package/dist/markdown-preserved.d.ts

@@ -0,0 +1,4 @@
+import { Node } from '@tiptap/core';
+/** Literal Markdown, never HTML inserted into the host DOM. These atoms are host presentation, not Pi execution. */
+export declare function preservedMarkdownNodes(): Node<any, any>[];
+//# sourceMappingURL=markdown-preserved.d.ts.map

package/dist/markdown-preserved.js

@@ -0,0 +1,126 @@
+import { Node } from '@tiptap/core';
+import { Marked } from 'marked';
+const literalHtml = new Marked();
+/** Literal Markdown, never HTML inserted into the host DOM. These atoms are host presentation, not Pi execution. */
+export function preservedMarkdownNodes() {
+    const block = Node.create({
+        name: 'preservedBlock', group: 'block', atom: true,
+        addAttributes: () => ({ raw: { default: '', rendered: false }, label: { default: 'HTML', rendered: false } }),
+        parseHTML: () => [],
+        renderHTML: ({ node }) => ['div', { class: 'boring-markdown-preserved', 'data-preserved': node.attrs['label'] },
+            ['small', {}, String(node.attrs['label'])], ['pre', {}, String(node.attrs['raw'])]],
+        markdownTokenName: 'preservedBlock',
+        markdownTokenizer: {
+            name: 'preservedBlock', level: 'block',
+            start: source => { const index = source.search(/\n(?=---[ \t]*\n| {0,3}\[[^\]\n]+\]:| {0,3}<)/); return index < 0 ? -1 : index + 1; },
+            tokenize(source, tokens) {
+                if (/^ {0,3}</.test(source)) {
+                    const html = literalHtml.lexer(source)[0];
+                    if (html?.type === 'html')
+                        return { type: 'preservedBlock', raw: html.raw, label: 'HTML' };
+                }
+                const front = tokens.length === 0 && /^---[ \t]*\n[\s\S]*?\n(?:---|\.\.\.)[ \t]*(?:\n|$)/.exec(source);
+                const definition = /^ {0,3}\[[^\]\n]+\]:[^\n]*(?:\n(?:[ \t]+[^\n]*|(?=\n[ \t]+)\n))*\n?/.exec(source);
+                const raw = front ? front[0] : definition?.[0];
+                return raw ? { type: 'preservedBlock', raw, label: front ? 'Front matter' : definition[0].trimStart().startsWith('[^') ? 'Footnote' : 'Reference' } : undefined;
+            },
+        },
+        parseMarkdown: token => ({ type: 'preservedBlock', attrs: { raw: token.raw?.replace(/\n+$/, ''), label: token['label'] } }),
+        renderMarkdown: node => String(node.attrs?.['raw'] ?? '').replace(/\n$/, ''),
+        addNodeView() {
+            return ({ node, editor, getPos }) => {
+                const dom = document.createElement('div');
+                dom.className = 'boring-markdown-preserved';
+                dom.dataset['preserved'] = String(node.attrs['label']);
+                const label = document.createElement('small');
+                label.textContent = String(node.attrs['label']);
+                dom.append(label);
+                if (node.attrs['label'] !== 'Front matter') {
+                    const pre = document.createElement('pre');
+                    pre.textContent = String(node.attrs['raw']);
+                    dom.append(pre);
+                    return { dom };
+                }
+                const code = document.createElement('pre');
+                code.textContent = String(node.attrs['raw']);
+                code.contentEditable = editor.isEditable ? 'plaintext-only' : 'false';
+                code.setAttribute('role', 'textbox');
+                code.setAttribute('aria-label', 'Front matter code');
+                code.setAttribute('aria-multiline', 'true');
+                code.spellcheck = false;
+                dom.append(code);
+                const input = () => {
+                    const pos = getPos();
+                    if (!editor.isEditable || typeof pos !== 'number')
+                        return;
+                    const raw = code.textContent ?? '';
+                    if (code.children.length)
+                        code.replaceChildren(document.createTextNode(raw));
+                    editor.view.dispatch(editor.state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, raw }));
+                };
+                const insertText = (event) => {
+                    event.preventDefault();
+                    if (!editor.isEditable)
+                        return;
+                    const text = 'clipboardData' in event ? event.clipboardData?.getData('text/plain') : event.dataTransfer?.getData('text/plain');
+                    if (!text)
+                        return;
+                    const selection = dom.ownerDocument.getSelection();
+                    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+                    const inserted = document.createTextNode(text);
+                    if (range && code.contains(range.commonAncestorContainer)) {
+                        range.deleteContents();
+                        range.insertNode(inserted);
+                        range.setStartAfter(inserted);
+                        range.collapse(true);
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                    }
+                    else
+                        code.append(inserted);
+                    code.dispatchEvent(new dom.ownerDocument.defaultView.Event('input', { bubbles: true }));
+                };
+                code.addEventListener('input', input);
+                code.addEventListener('paste', insertText);
+                code.addEventListener('drop', insertText);
+                return { dom, stopEvent: () => true, ignoreMutation: () => true,
+                    update(next) {
+                        if (next.type !== node.type)
+                            return false;
+                        node = next;
+                        if (code.textContent !== node.attrs['raw'])
+                            code.textContent = String(node.attrs['raw']);
+                        code.contentEditable = editor.isEditable ? 'plaintext-only' : 'false';
+                        return true;
+                    }, destroy: () => { code.removeEventListener('input', input); code.removeEventListener('paste', insertText); code.removeEventListener('drop', insertText); } };
+            };
+        },
+    });
+    const inline = Node.create({
+        name: 'preservedInline', group: 'inline', inline: true, atom: true,
+        addAttributes: () => ({ raw: { default: '', rendered: false } }),
+        parseHTML: () => [],
+        renderHTML: ({ node }) => ['span', { class: 'boring-markdown-preserved-inline' }, String(node.attrs['raw'])],
+        markdownTokenName: 'preservedInline',
+        markdownTokenizer: {
+            name: 'preservedInline', level: 'inline', start: source => source.search(/[<\[]/),
+            tokenize(source) {
+                if (source.startsWith('<')) {
+                    const html = literalHtml.Lexer.lexInline(source, literalHtml.defaults)[0];
+                    if (html?.type === 'html')
+                        return { type: 'preservedInline', raw: html.raw };
+                }
+                const raw = /^\[(?:\^[^\]\s]+|[^\]\n]+)\](?:\[[^\]\n]*\])?(?!\()/.exec(source)?.[0];
+                return raw ? { type: 'preservedInline', raw } : undefined;
+            },
+        },
+        parseMarkdown: token => ({ type: 'preservedInline', attrs: { raw: token.raw } }),
+        renderMarkdown: node => String(node.attrs?.['raw'] ?? ''),
+    });
+    const html = Node.create({
+        name: 'preservedHtml', markdownTokenName: 'html', group: 'block', atom: true,
+        parseHTML: () => [], renderHTML: () => ['div'],
+        parseMarkdown: token => ({ type: token['block'] ? 'preservedBlock' : 'preservedInline', attrs: { raw: token.raw, label: 'HTML' } }),
+    });
+    return [block, inline, html];
+}

package/dist/markdown-safety.d.ts

@@ -11,10 +11,8 @@ export declare function trailingWhitespace(text: string): string;
 /** The text a rich edit publishes: the serialised document, whitespace normalised, with the original's trailing newline. */
 export declare function finishRichMarkdown(serialized: string, previous: string): string;
 /**
- * Decides whether the rich editor can open and edit `text` without changing anything but what the person edits: the text is
- * parsed into the editor's document and serialised back without any edit, and must equal the original apart from blank-line runs and
- * the ends. Named constructs the editor cannot hold (front matter, raw HTML, footnotes, reference links, CRLF) are reported as the
- * reason. Without a DOM only the named constructs can be checked.
+ * Verifies a native projection and its exact source spans. Unchanged blocks retain their source, and unsupported constructs are
+ * inert atoms. The legacy whitespace comparison remains for empty/nbsp-only layout. Without a DOM only encoding can be checked.
  */
 export declare function checkMarkdownRichSafety(text: string): MarkdownRichSafety;
 export declare function describeUnsafe(safety: MarkdownRichSafety): string;