@memorysmithapp/markdown-renderer 0.3.1 → 0.4.0

package/dist/edit/NoteEditor.js

@@ -0,0 +1,461 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A note edited on the page that draws it (#48, ADR-006).
+ *
+ * The editor holds the note's bytes and nothing else: CodeMirror keeps the text, the live page
+ * (`live.ts`) draws it as the reading surface would, and every change the author makes — typed,
+ * from the toolbar, in a table's cell or in the properties form — is a change to those bytes,
+ * handed to the host with `onChange`. What the author did not touch is never rewritten, so the
+ * host receives a note that differs from the one it gave only where it was edited (#50).
+ */
+import { autocompletion } from '@codemirror/autocomplete';
+import { defaultKeymap, history, historyKeymap, indentWithTab, redo, undo } from '@codemirror/commands';
+import { markdown, markdownKeymap } from '@codemirror/lang-markdown';
+import { Annotation, Compartment, EditorState } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { HOST_KEYS, HostProvider, resolveHost } from '../host.js';
+import { rootStyle } from '../theme.js';
+import { ICONS } from './blocks.js';
+import { BLOCKS, command, headingLevel, insertBlock, insertFootnote, insertLink, insertWikilink, setHeading, toggleComment, toggleList, toggleMark, toggleQuote, } from './commands.js';
+import { analysisField, editorEnvironment, livePage } from './live.js';
+import { NoteActions } from '../NoteActions.js';
+import { AttachDialog, webImage } from './AttachDialog.js';
+import { ContextMenu } from './ContextMenu.js';
+import { chooseLanguageAt } from './LanguageControl.js';
+import { useEditSaves } from './saves.js';
+/**
+ * The line break a note is written with, which the editor writes back: `\n` or `\r\n`. `null`
+ * for a note that mixes them, or has a lone `\r`, which the editor cannot keep byte for byte.
+ */
+export function lineBreakOf(text) {
+    if (!text.includes('\r'))
+        return '\n';
+    const crlf = (text.match(/\r\n/g) ?? []).length;
+    const cr = (text.match(/\r/g) ?? []).length;
+    const lf = (text.match(/\n/g) ?? []).length;
+    return crlf === cr && crlf === lf ? '\r\n' : null;
+}
+/** The change a host's new text makes to the editor's: the middle that differs, prefix and suffix kept. */
+function difference(current, next) {
+    if (current === next)
+        return null;
+    let start = 0;
+    while (start < current.length && start < next.length && current[start] === next[start])
+        start++;
+    let end = 0;
+    while (end < current.length - start && end < next.length - start && current[current.length - 1 - end] === next[next.length - 1 - end])
+        end++;
+    return { from: start, to: current.length - end, insert: next.slice(start, next.length - end) };
+}
+/** The note back to the text edit mode opened, as one change, the least that differs, which Undo reverses (#67). */
+function revert(state, opened) {
+    const change = difference(state.doc.toString(), opened);
+    return change ? { changes: change, selection: { anchor: Math.min(change.from + change.insert.length, opened.length) } } : null;
+}
+/** A change that came from the host, which is not handed back to it. */
+const fromHost = Annotation.define();
+/** The names a host suggests after `[[`, completed with the closing brackets. */
+function wikilinkCompletion(host) {
+    return async (context) => {
+        const typed = context.matchBefore(/\[\[[^\]|#\n]*$/);
+        const suggest = host().suggest;
+        if (!typed || !suggest)
+            return null;
+        const query = typed.text.slice(2);
+        const names = await suggest(query);
+        const closed = context.state.sliceDoc(context.pos, context.pos + 2) === ']]';
+        return {
+            from: typed.from + 2,
+            options: names.map((name) => ({ label: name, apply: closed ? name : `${name}]]` })),
+            validFor: /^[^\]|#\n]*$/,
+        };
+    };
+}
+const shortcuts = (view) => keymap.of([
+    { key: 'Mod-b', run: command((state) => toggleMark(state, '**')) },
+    { key: 'Mod-i', run: command((state) => toggleMark(state, '_')) },
+    { key: 'Mod-Shift-x', run: command((state) => toggleMark(state, '~~')) },
+    { key: 'Mod-Shift-h', run: command((state) => toggleMark(state, '==')) },
+    { key: 'Mod-e', run: command((state) => toggleMark(state, '`')) },
+    { key: 'Mod-k', run: command(insertLink) },
+    { key: 'Mod-Shift-k', run: command(insertWikilink) },
+    { key: 'Mod-Shift-7', run: command((state) => toggleList(state, 'ordered')) },
+    { key: 'Mod-Shift-8', run: command((state) => toggleList(state, 'bullet')) },
+    { key: 'Mod-Shift-9', run: command((state) => toggleList(state, 'task')) },
+    { key: 'Mod-Shift-.', run: command(toggleQuote) },
+    { key: 'Mod-/', run: command(toggleComment) },
+    ...[0, 1, 2, 3, 4, 5, 6].map((level) => ({ key: `Mod-Alt-${level}`, run: command((state) => setHeading(state, level)) })),
+    { key: 'Escape', run: () => (view()?.contentDOM.blur(), true) },
+]);
+/** The editing menu's keys: the context-menu key and Shift+F10 open it at the cursor (#81). */
+const menuKeys = (open) => keymap.of([
+    { key: 'Shift-F10', run: open },
+    { key: 'ContextMenu', run: open },
+]);
+/**
+ * Inserts one of the toolbar's blocks; a code block then opens the choice of its language, its
+ * search focused, so the author names the language first (#84).
+ */
+function insertBlockCommand(name) {
+    const insert = command((state) => insertBlock(state, BLOCKS[name].text, BLOCKS[name].cursor));
+    if (name !== 'codeBlock')
+        return insert;
+    return (view) => {
+        if (!insert(view))
+            return false;
+        const line = view.state.doc.lineAt(view.state.selection.main.head);
+        if (line.number > 1)
+            chooseLanguageAt(view, view.state.doc.line(line.number - 1).from);
+        return true;
+    };
+}
+/** How long the attach button says a file was not attached, in milliseconds. */
+const ATTACH_FAILED_MS = 3000;
+/** The toolbar of the editor: the marks, the blocks and the history, each a command. */
+function Toolbar({ view, host, end, opened, onAttach, attaching, attachButton, }) {
+    const words = host.strings.editor;
+    const disabled = !view || view.state.readOnly;
+    const run = (action) => () => view && action(view);
+    const button = (name, action, shortcut) => (_jsx("button", { type: "button", className: "edit-control", title: shortcut ? `${words[name]} (${shortcut})` : words[name], "aria-label": words[name], disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: run(action), children: ICONS[name] }, name));
+    const block = (name) => button(name, insertBlockCommand(name));
+    const level = view ? headingLevel(view.state) : 0;
+    return (_jsxs("div", { className: "edit-toolbar", role: "toolbar", "aria-label": words.toolbar, children: [_jsxs("div", { className: "edit-toolbar-tools", children: [_jsxs("span", { className: "edit-toolbar-group", children: [_jsx("button", { type: "button", className: "edit-control", title: words.revert, "aria-label": words.revert, disabled: !view || view.state.readOnly || view.state.doc.toString() === opened, onMouseDown: (event) => event.preventDefault(), onClick: run(command((state) => revert(state, opened))), children: ICONS.revert }), button('undo', undo, 'Mod-Z'), button('redo', redo, 'Mod-Shift-Z')] }), _jsx("span", { className: "edit-toolbar-group", children: _jsxs("select", { className: "edit-heading", "aria-label": words.heading, title: words.heading, value: level, disabled: disabled, onChange: (event) => view && command((state) => setHeading(state, Number(event.target.value)))(view), children: [_jsx("option", { value: 0, children: words.paragraph }), [1, 2, 3, 4, 5, 6].map((each) => (_jsx("option", { value: each, children: `${words.heading} ${each}` }, each)))] }) }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bold', command((state) => toggleMark(state, '**')), 'Mod-B'), button('italic', command((state) => toggleMark(state, '_')), 'Mod-I'), button('strikethrough', command((state) => toggleMark(state, '~~')), 'Mod-Shift-X'), button('highlight', command((state) => toggleMark(state, '==')), 'Mod-Shift-H'), button('code', command((state) => toggleMark(state, '`')), 'Mod-E')] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('link', command(insertLink), 'Mod-K'), button('wikilink', command(insertWikilink), 'Mod-Shift-K'), button('footnote', command(insertFootnote)), button('comment', command(toggleComment), 'Mod-/'), _jsx("button", { ref: attachButton, type: "button", className: "edit-control", title: attaching === 'busy' ? words.attaching : attaching === 'failed' ? words.attachFailed : words.attach, "aria-label": words.attach, "aria-busy": attaching === 'busy' ? true : undefined, "data-attach": attaching, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onAttach, children: attaching === 'busy' ? ICONS.saving : attaching === 'failed' ? ICONS.notSaved : ICONS.attach })] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bulletList', command((state) => toggleList(state, 'bullet')), 'Mod-Shift-8'), button('orderedList', command((state) => toggleList(state, 'ordered')), 'Mod-Shift-7'), button('taskList', command((state) => toggleList(state, 'task')), 'Mod-Shift-9'), button('quote', command(toggleQuote), 'Mod-Shift-.')] }), _jsxs("span", { className: "edit-toolbar-group", children: [block('callout'), block('table'), block('codeBlock'), block('math'), block('diagram'), block('rule')] })] }), end] }));
+}
+/**
+ * Where the save of the author's last change stands, in the toolbar before the switch: an icon for
+ * each state, in a slot of one size, so the toolbar never moves as the author types; its word is
+ * its title. A failed save's icon is the button that tries again (#66). Whoever hears the page is
+ * told the whole of it, why the note stays in edit included.
+ */
+function SaveStatus({ state, blocked, retry, host }) {
+    const words = host.strings.editor;
+    const shown = state === 'saving' ? words.saving : state === 'saved' ? host.strings.saved : state === 'failed' ? host.strings.notSaved : '';
+    const said = state === 'failed' && blocked ? words.stayInEdit : shown;
+    const icon = state === 'saving' ? ICONS.saving : state === 'saved' ? ICONS.saved : state === 'failed' ? ICONS.notSaved : null;
+    const retryLabel = `${said}. ${words.retry}`;
+    return (_jsxs("div", { className: "edit-save", "data-save": state, title: state === 'failed' ? undefined : said || undefined, children: [state === 'failed' ? (_jsx("button", { type: "button", className: "edit-save-icon edit-save-retry", title: retryLabel, "aria-label": retryLabel, onClick: retry, children: icon })) : (_jsx("span", { className: "edit-save-icon", children: icon })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: said })] }));
+}
+/**
+ * Edits a note on the page that draws it. Exported at `@memorysmithapp/markdown-renderer/edit`
+ * for a host that edits without the switch of `NoteBody`; `NoteBody` loads it on demand.
+ */
+export function NoteEditor({ markdown: given, onChange, editable = true, corner, autoFocus = false, leaving = false, onLeave, ...host }) {
+    const resolved = useMemo(() => resolveHost(host), 
+    // Every member of the contract, so a host that passes the same functions keeps the same host.
+    HOST_KEYS.map((key) => host[key]));
+    const parent = useRef(null);
+    const [view, setView] = useState(null);
+    const [, redraw] = useReducer((count) => count + 1, 0);
+    const environment = useRef(new Compartment());
+    const access = useRef(new Compartment());
+    const saves = useEditSaves(onChange);
+    const latest = useRef({ hand: saves.hand, host: resolved, onLeave });
+    latest.current = { hand: saves.hand, host: resolved, onLeave };
+    /**
+     * The texts handed to the host that it has not given back yet. A host that saves before it
+     * passes the note again gives back a text the editor has since moved past; that echo is not a
+     * change, and is never applied over what the author wrote after it.
+     */
+    const handed = useRef([]);
+    const bar = useRef(null);
+    const [blocked, setBlocked] = useState(false);
+    const [refusals, setRefusals] = useState(0);
+    const editorView = useRef(null);
+    const [attaching, setAttaching] = useState('idle');
+    /**
+     * Hands each file to the host's `attach`, one after the other, and embeds it as `![[name]]` on a
+     * line of its own where the cursor is once the host answered its name; a file the host could not
+     * keep writes nothing, and the button says so for a moment (#75).
+     */
+    const attachFiles = useRef(() => undefined);
+    attachFiles.current = (files, at) => {
+        const attach = resolved.attach;
+        const target = editorView.current;
+        if (!attach || !target || target.state.readOnly || files.length === 0)
+            return;
+        if (at !== undefined)
+            target.dispatch({ selection: { anchor: at } });
+        setAttaching('busy');
+        void (async () => {
+            let failed = false;
+            for (const { file, name: wanted, description } of files) {
+                try {
+                    const name = await attach(file, { name: wanted, description });
+                    insertLine(`![[${name}]]`);
+                }
+                catch {
+                    failed = true;
+                }
+            }
+            if (editorView.current)
+                setAttaching(failed ? 'failed' : 'idle');
+        })();
+    };
+    /** A line of its own at the cursor: an embed, or an image of the web (#78). */
+    const insertLine = (text) => {
+        const current = editorView.current;
+        if (current)
+            command((state) => insertBlock(state, text, text.length + 1))(current);
+    };
+    const attachButton = useRef(null);
+    const [attachOpen, setAttachOpen] = useState(false);
+    /** Where the editing menu is open, in the window's coordinates (#81). */
+    const [menu, setMenu] = useState(null);
+    const openMenu = useRef((x, y) => setMenu({ x, y }));
+    /** The menu's groups, from the same commands as the toolbar: Format with a selection, Insert, Edit. */
+    const menuGroups = (target) => {
+        const words = resolved.strings.editor;
+        const item = (name, action, shortcut) => ({
+            name,
+            label: words[name],
+            icon: ICONS[name],
+            shortcut,
+            run: () => action(target),
+        });
+        const block = (name) => item(name, insertBlockCommand(name));
+        const selection = target.state.selection.main;
+        const selected = target.state.sliceDoc(selection.from, selection.to);
+        const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;
+        const groups = [];
+        if (!selection.empty) {
+            groups.push({
+                label: words.menuFormat,
+                items: [
+                    item('bold', command((state) => toggleMark(state, '**')), 'Mod-b'),
+                    item('italic', command((state) => toggleMark(state, '_')), 'Mod-i'),
+                    item('strikethrough', command((state) => toggleMark(state, '~~')), 'Mod-Shift-x'),
+                    item('highlight', command((state) => toggleMark(state, '==')), 'Mod-Shift-h'),
+                    item('code', command((state) => toggleMark(state, '`')), 'Mod-e'),
+                ],
+            });
+        }
+        groups.push({
+            label: words.menuInsert,
+            items: [
+                item('link', command(insertLink), 'Mod-k'),
+                item('wikilink', command(insertWikilink), 'Mod-Shift-k'),
+                item('bulletList', command((state) => toggleList(state, 'bullet')), 'Mod-Shift-8'),
+                item('orderedList', command((state) => toggleList(state, 'ordered')), 'Mod-Shift-7'),
+                item('taskList', command((state) => toggleList(state, 'task')), 'Mod-Shift-9'),
+                item('quote', command(toggleQuote), 'Mod-Shift-.'),
+                block('callout'),
+                block('table'),
+                block('codeBlock'),
+                block('math'),
+                block('diagram'),
+                block('rule'),
+                item('footnote', command(insertFootnote)),
+                item('comment', command(toggleComment), 'Mod-/'),
+                { name: 'attach', label: words.attach, icon: ICONS.attach, run: () => setAttachOpen(true) },
+            ],
+        });
+        groups.push({
+            label: words.menuEdit,
+            items: [
+                {
+                    name: 'cut',
+                    label: words.cut,
+                    icon: ICONS.cut,
+                    shortcut: 'Mod-x',
+                    disabled: selection.empty || !clipboard,
+                    run: () => void clipboard?.writeText(selected).then(() => target.dispatch({ changes: { from: selection.from, to: selection.to }, userEvent: 'delete.cut' })),
+                },
+                { name: 'copy', label: words.copy, icon: ICONS.copy, shortcut: 'Mod-c', disabled: selection.empty || !clipboard, run: () => void clipboard?.writeText(selected) },
+                {
+                    name: 'paste',
+                    label: words.paste,
+                    icon: ICONS.paste,
+                    shortcut: 'Mod-v',
+                    disabled: !clipboard?.readText,
+                    run: () => void clipboard?.readText().then((text) => target.dispatch({ ...target.state.replaceSelection(text), userEvent: 'input.paste', scrollIntoView: true }), () => undefined),
+                },
+            ],
+        });
+        return groups;
+    };
+    /** A pasted or dropped file, kept under its own name and with no description. */
+    const asChosen = (files) => files.map((file) => ({ file, name: file.name, description: '' }));
+    useEffect(() => {
+        if (attaching !== 'failed')
+            return;
+        const timer = setTimeout(() => setAttaching('idle'), ATTACH_FAILED_MS);
+        return () => clearTimeout(timer);
+    }, [attaching]);
+    // The note as edit mode opened it, as the editor holds its text: lines joined by `\n`.
+    const opened = useRef(given.replace(/\r\n?/g, '\n'));
+    const lineBreak = lineBreakOf(given);
+    const readOnly = !editable || lineBreak === null;
+    /**
+     * The editor splits its text on any line break, so a paste or a block written with `\n` is lines
+     * like any other, and writes the note back with the break it was written with: what a host
+     * receives is CRLF throughout when the note was.
+     */
+    const written = useRef(lineBreak ?? '\n');
+    written.current = lineBreak ?? written.current;
+    const output = (state) => state.doc.sliceString(0, state.doc.length, written.current);
+    useEffect(() => {
+        if (!parent.current)
+            return;
+        const created = new EditorView({
+            parent: parent.current,
+            state: EditorState.create({
+                doc: given,
+                extensions: [
+                    access.current.of([EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)]),
+                    environment.current.of(editorEnvironment.of({ host: resolved })),
+                    history(),
+                    markdown(),
+                    EditorView.lineWrapping,
+                    EditorView.contentAttributes.of({ 'aria-multiline': 'true', spellcheck: 'true' }),
+                    livePage(),
+                    autocompletion({ override: [wikilinkCompletion(() => latest.current.host)], icons: false }),
+                    shortcuts(() => created),
+                    keymap.of([...markdownKeymap, ...historyKeymap, indentWithTab, ...defaultKeymap]),
+                    // A file pasted or dropped is attached, where the host keeps files (#75).
+                    menuKeys((target) => {
+                        if (target.state.readOnly)
+                            return false;
+                        const at = target.coordsAtPos(target.state.selection.main.head);
+                        const box = target.contentDOM.getBoundingClientRect();
+                        openMenu.current(at?.left ?? box.left, at?.bottom ?? box.top);
+                        return true;
+                    }),
+                    EditorView.domEventHandlers({
+                        // The editing menu where the pointer is; Shift keeps the browser's, and so do the
+                        // drawn blocks' own fields, which are the browser's to edit (#81).
+                        contextmenu: (event, target) => {
+                            if (event.shiftKey || target.state.readOnly)
+                                return false;
+                            if (event.target instanceof Element && event.target.closest('[data-ms-control]'))
+                                return false;
+                            event.preventDefault();
+                            const at = target.posAtCoords({ x: event.clientX, y: event.clientY });
+                            const selection = target.state.selection.main;
+                            if (at !== null && (at < selection.from || at > selection.to))
+                                target.dispatch({ selection: { anchor: at } });
+                            openMenu.current(event.clientX, event.clientY);
+                            return true;
+                        },
+                        paste: (event) => {
+                            const files = [...(event.clipboardData?.files ?? [])];
+                            if (files.length === 0 || !latest.current.host.attach)
+                                return false;
+                            event.preventDefault();
+                            attachFiles.current(asChosen(files));
+                            return true;
+                        },
+                        drop: (event, target) => {
+                            const files = [...(event.dataTransfer?.files ?? [])];
+                            if (files.length === 0 || !latest.current.host.attach)
+                                return false;
+                            event.preventDefault();
+                            attachFiles.current(asChosen(files), target.posAtCoords({ x: event.clientX, y: event.clientY }) ?? undefined);
+                            return true;
+                        },
+                    }),
+                    EditorView.updateListener.of((update) => {
+                        if (update.docChanged && !update.transactions.some((transaction) => transaction.annotation(fromHost))) {
+                            const text = output(update.state);
+                            handed.current.push(text);
+                            if (handed.current.length > 100)
+                                handed.current.shift();
+                            latest.current.hand(text);
+                        }
+                        if (update.docChanged || update.selectionSet || update.focusChanged)
+                            redraw();
+                    }),
+                ],
+            }),
+        });
+        editorView.current = created;
+        setView(created);
+        if (autoFocus) {
+            // The cursor starts where the body does, so the frontmatter stays drawn as the form.
+            created.dispatch({ selection: { anchor: created.state.field(analysisField).bodyFrom } });
+            created.focus();
+        }
+        return () => {
+            editorView.current = null;
+            created.destroy();
+        };
+        // The editor is made once; what changes later reaches it through the effects below.
+    }, []);
+    useEffect(() => {
+        view?.dispatch({ effects: environment.current.reconfigure(editorEnvironment.of({ host: resolved })) });
+    }, [view, resolved]);
+    useEffect(() => {
+        view?.dispatch({ effects: access.current.reconfigure([EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)]) });
+    }, [view, readOnly]);
+    // A note the host changed — a tick saved, another device — is taken in as the change it is.
+    useEffect(() => {
+        if (!view)
+            return;
+        const echo = handed.current.indexOf(given);
+        if (echo !== -1) {
+            handed.current.splice(0, echo + 1);
+            return;
+        }
+        handed.current = [];
+        const change = difference(output(view.state), given);
+        if (change)
+            view.dispatch({ changes: change, annotations: [fromHost.of(true)] });
+    }, [view, given]);
+    /**
+     * The toolbar grows out of the switch and shrinks back into it (#65): its clip starts and ends
+     * on the corner that holds the switch, measured from the toolbar's top right edge.
+     */
+    useLayoutEffect(() => {
+        const toolbar = bar.current?.querySelector('.edit-toolbar');
+        const end = toolbar?.querySelector('.edit-corner');
+        if (!toolbar || !end)
+            return;
+        const box = toolbar.getBoundingClientRect();
+        const corner = end.getBoundingClientRect();
+        // With the toolbar's own padding around it, so the corner alone reads as a box.
+        const style = typeof getComputedStyle === 'function' ? getComputedStyle(toolbar) : null;
+        const left = parseFloat(style?.paddingLeft ?? '') || 0;
+        const bottom = (parseFloat(style?.paddingBottom ?? '') || 0) + (parseFloat(style?.borderBottomWidth ?? '') || 0);
+        toolbar.style.setProperty('--edit-corner-width', `${Math.max(0, box.right - corner.left + left)}px`);
+        toolbar.style.setProperty('--edit-corner-height', `${Math.max(0, corner.bottom - box.top + bottom)}px`);
+    });
+    // Going back to reading waits for the save in flight; a failed one keeps the note here.
+    const folding = leaving && saves.state !== 'saving' && saves.state !== 'failed';
+    useEffect(() => {
+        if (saves.state !== 'failed')
+            setBlocked(false);
+        if (!leaving || saves.state === 'saving')
+            return;
+        if (saves.state === 'failed') {
+            setBlocked(true);
+            setRefusals((count) => count + 1);
+            latest.current.onLeave?.(false);
+            return;
+        }
+        const toolbar = bar.current?.querySelector('.edit-toolbar');
+        const animation = toolbar && typeof getComputedStyle === 'function' ? getComputedStyle(toolbar).animationName : '';
+        let done = false;
+        const leave = () => {
+            if (done)
+                return;
+            done = true;
+            latest.current.onLeave?.(true);
+        };
+        // A theme that does not fold the toolbar, or a reader who asked for less motion, goes at once.
+        if (!toolbar || !animation || animation === 'none') {
+            leave();
+            return;
+        }
+        toolbar.addEventListener('animationend', leave);
+        const timer = setTimeout(leave, 600);
+        return () => {
+            toolbar.removeEventListener('animationend', leave);
+            clearTimeout(timer);
+        };
+    }, [leaving, saves.state]);
+    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name} markdown-editing`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [_jsx("div", { ref: bar, className: "edit-bar", "data-leaving": folding ? '' : undefined, children: _jsx(Toolbar, { view: view, host: resolved, opened: opened.current, onAttach: () => setAttachOpen(true), attaching: attaching, attachButton: attachButton, end: _jsxs("div", { className: "edit-corner", "aria-busy": leaving && saves.state === 'saving' ? true : undefined, "data-blocked": blocked ? '' : undefined, children: [_jsx(SaveStatus, { state: saves.state, blocked: blocked, retry: saves.retry, host: resolved }), corner ?? _jsx(NoteActions, { text: () => (view ? output(view.state) : given) })] }, blocked ? `blocked-${refusals}` : 'corner') }) }), menu && view && (_jsx(ContextMenu, { x: menu.x, y: menu.y, label: resolved.strings.editor.menu, groups: menuGroups(view), onClose: (back) => {
+                        setMenu(null);
+                        if (back)
+                            view.focus();
+                    } })), attachOpen && (_jsx(AttachDialog, { onClose: () => setAttachOpen(false), onClosed: (inserted) => !inserted && attachButton.current?.focus(), onAttach: (files) => attachFiles.current(files), onEmbed: (name) => insertLine(`![[${name}]]`), onLink: (name, address) => insertLine(webImage(name, address)) })), lineBreak === null && _jsx("p", { className: "edit-unavailable", children: resolved.strings.editUnavailable }), _jsx("div", { ref: parent, className: "markdown-editor" })] }) }));
+}

package/dist/edit/analyze.d.ts

@@ -0,0 +1,150 @@
+/**
+ * Where each construct of a note sits in its bytes, for the editor to draw (ADR-006).
+ *
+ * The editor's model is the note's text, and the page is drawn over it: every construct the
+ * reading surface draws is found here as ranges of that text — what it covers, which characters
+ * are its notation and which are its content — so the editor can hide the notation, style the
+ * content, or draw a block in place, and never rewrite a byte it did not touch.
+ *
+ * The text is read by the reading surface's own parser (`remark-parse` with GFM and math, at the
+ * options of `readingPlugins`), and the notation that parser leaves as text — callouts, wikilinks,
+ * marked text, comments, block identifiers — by the same patterns the reading surface uses. No
+ * React and no DOM: the analysis is a pure function of the text, and tested as one.
+ */
+/** A range of the text: `from` included, `to` excluded. */
+export interface Span {
+    readonly from: number;
+    readonly to: number;
+}
+export type InlineMark = 'em' | 'strong' | 'strike' | 'highlight' | 'code';
+/** A construct of the note, found in its text. */
+export type Construct = {
+    readonly kind: 'frontmatter';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'heading';
+    readonly from: number;
+    readonly to: number;
+    readonly level: number;
+    readonly marker: Span;
+} | {
+    readonly kind: 'mark';
+    readonly mark: InlineMark;
+    readonly from: number;
+    readonly to: number;
+    readonly open: Span;
+    readonly close: Span;
+} | {
+    readonly kind: 'link';
+    readonly from: number;
+    readonly to: number;
+    /** The label; `null` for an address written bare, which has no notation to hide. */
+    readonly label: Span | null;
+    readonly url: string;
+} | {
+    readonly kind: 'wikilink';
+    readonly from: number;
+    readonly to: number;
+    readonly target: string;
+    /** What the page shows: the alias, or the target. */
+    readonly label: Span;
+    readonly embed: boolean;
+} | {
+    readonly kind: 'image';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'inlineMath';
+    readonly from: number;
+    readonly to: number;
+    readonly tex: string;
+} | {
+    readonly kind: 'mathBlock';
+    readonly from: number;
+    readonly to: number;
+    readonly tex: string;
+} | {
+    readonly kind: 'code';
+    readonly from: number;
+    readonly to: number;
+    readonly language: string | null;
+    /** The fence lines; `null` for an indented block. */
+    readonly open: Span | null;
+    readonly close: Span | null;
+    readonly code: string;
+} | {
+    readonly kind: 'callout';
+    readonly from: number;
+    readonly to: number;
+    readonly type: string;
+    readonly fold: '+' | '-' | null;
+    /** `[!type]` and its fold marker, in the first line. */
+    readonly marker: Span;
+} | {
+    readonly kind: 'quoteMarker';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'table';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'listMarker';
+    readonly from: number;
+    readonly to: number;
+    readonly ordered: boolean;
+    /** The task box after the marker, `[ ]` or `[x]`. */
+    readonly task: (Span & {
+        readonly checked: boolean;
+    }) | null;
+} | {
+    readonly kind: 'rule';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'embed';
+    readonly from: number;
+    readonly to: number;
+    readonly target: string;
+    readonly anchor: string | null;
+} | {
+    readonly kind: 'footnoteRef';
+    readonly from: number;
+    readonly to: number;
+    readonly label: string;
+} | {
+    readonly kind: 'footnoteDef';
+    readonly from: number;
+    readonly to: number;
+    readonly label: string;
+    readonly marker: Span;
+} | {
+    readonly kind: 'comment';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'blockId';
+    readonly from: number;
+    readonly to: number;
+    readonly id: string;
+} | {
+    readonly kind: 'html';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'definition';
+    readonly from: number;
+    readonly to: number;
+};
+export type ConstructKind = Construct['kind'];
+/** The constructs of a note, in the order of their `from`. */
+export interface Analysis {
+    readonly constructs: readonly Construct[];
+    /** Where the body starts: after the frontmatter, or 0. */
+    readonly bodyFrom: number;
+}
+/** The frontmatter block, from its first `---` to the end of its closing line, or `null`. */
+export declare function frontmatterSpan(text: string): Span | null;
+/** The constructs of a note's text. Offsets are into `text` as given. */
+export declare function analyze(text: string): Analysis;