@memorysmithapp/markdown-renderer 0.3.2 → 0.5.0

package/dist/edit/NoteEditor.js

@@ -0,0 +1,520 @@
+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, isAttachRefusal, 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';
+import { SaveNoticeDialog } from './SaveNoticeDialog.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;
+    };
+}
+const NOT_ATTACHING = { state: 'idle', message: null, fraction: null, queued: 0 };
+/** How long the attach button says a file was not attached, when the host did not say why, in milliseconds. */
+const ATTACH_FAILED_MS = 3000;
+/** A host's fraction, kept between 0 and 1, or none when it gave no number. */
+function fractionOf(report) {
+    const fraction = report?.fraction;
+    return typeof fraction === 'number' && Number.isFinite(fraction) ? Math.min(1, Math.max(0, fraction)) : null;
+}
+/** What the paperclip says: its word, the host's step and the files waiting, or why the last one failed. */
+function attachSays(attaching, words) {
+    if (attaching.state === 'failed')
+        return attaching.message ?? words.attachFailed;
+    if (attaching.state === 'idle')
+        return words.attach;
+    const step = attaching.message ?? words.attaching;
+    return attaching.queued > 0 ? `${step} (${words.attachQueued(attaching.queued)})` : step;
+}
+/** 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-/'), _jsxs("span", { className: "edit-attach-control", children: [_jsx("button", { ref: attachButton, type: "button", className: "edit-control", title: attachSays(attaching, words), "aria-label": words.attach, "aria-busy": attaching.state === 'busy' ? true : undefined, "data-attach": attaching.state, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onAttach, children: attaching.state === 'busy' ? ICONS.saving : attaching.state === 'failed' ? ICONS.notSaved : ICONS.attach }), attaching.state === 'busy' && attaching.fraction !== null && (_jsx("span", { className: "edit-attach-progress", role: "progressbar", "aria-label": words.attach, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(attaching.fraction * 100), style: { ['--edit-attach-fraction']: attaching.fraction } })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: attaching.state === 'idle' ? '' : attachSays(attaching, words) })] })] }), _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). When the host said why —
+ * an alert on a save that succeeded, or the reason for one it refused — the icon is the button that
+ * opens what it said, with the host's title as its tooltip, and the author's choices (#86). Whoever
+ * hears the page is told the whole of it, why the note stays in edit included.
+ */
+function SaveStatus({ saves, blocked, host, onDecided }) {
+    const { state, notice } = saves;
+    const words = host.strings.editor;
+    const [open, setOpen] = useState(false);
+    const button = useRef(null);
+    // A notice the save no longer carries has nothing left to show.
+    useEffect(() => {
+        if (!notice)
+            setOpen(false);
+    }, [notice]);
+    const base = state === 'saving' ? words.saving : state === 'saved' ? host.strings.saved : state === 'failed' ? host.strings.notSaved : '';
+    const shown = notice ? notice.title : base;
+    const said = state === 'failed' && blocked ? (notice ? `${words.stayInEdit}. ${notice.title}` : words.stayInEdit) : shown;
+    const icon = state === 'saving' ? ICONS.saving : state === 'saved' ? ICONS.saved : state === 'alert' ? ICONS.alert : state === 'failed' ? ICONS.notSaved : null;
+    const retryLabel = `${said}. ${words.retry}`;
+    return (_jsxs("div", { className: "edit-save", "data-save": state, title: state === 'failed' || notice ? undefined : said || undefined, children: [notice ? (_jsx("button", { ref: button, type: "button", className: "edit-save-icon edit-save-notice", title: notice.title, "aria-label": notice.title, "aria-haspopup": "dialog", onClick: () => setOpen(true), children: icon })) : state === 'failed' ? (_jsx("button", { type: "button", className: "edit-save-icon edit-save-retry", title: retryLabel, "aria-label": retryLabel, onClick: saves.retry, children: icon })) : (_jsx("span", { className: "edit-save-icon", children: icon })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: said }), open && notice && (_jsx(SaveNoticeDialog, { notice: notice, onClose: () => setOpen(false), onClosed: (chosen) => (chosen ? onDecided() : button.current?.focus()), onAction: (action) => {
+                    setOpen(false);
+                    saves.run(action);
+                } }))] }));
+}
+/**
+ * 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(NOT_ATTACHING);
+    // Each run of attaching, so that a run a later one replaced says nothing more.
+    const attachRun = useRef(0);
+    // The refusal the paperclip said, shown again at the top of the dialog it opens (#88).
+    const [refusal, setRefusal] = useState(null);
+    /**
+     * 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) — or, when the host said why,
+     * until the author opens it again. The host's steps are shown as they come (#88).
+     */
+    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 } });
+        const run = ++attachRun.current;
+        const live = () => run === attachRun.current && editorView.current !== null;
+        void (async () => {
+            let failed = false;
+            let reason = null;
+            for (const [index, { file, name: wanted, description }] of files.entries()) {
+                const queued = files.length - 1 - index;
+                let settled = false;
+                setAttaching({ state: 'busy', message: null, fraction: null, queued });
+                // A step the host reports after the file settled, or for a run since replaced, says nothing.
+                const progress = (report) => {
+                    if (settled || !live())
+                        return;
+                    setAttaching({ state: 'busy', message: typeof report?.message === 'string' && report.message ? report.message : null, fraction: fractionOf(report), queued });
+                };
+                try {
+                    const name = await attach(file, { name: wanted, description }, progress);
+                    insertLine(`![[${name}]]`);
+                }
+                catch (rejection) {
+                    failed = true;
+                    if (isAttachRefusal(rejection))
+                        reason = rejection.message;
+                }
+                settled = true;
+            }
+            if (live())
+                setAttaching(failed ? { ...NOT_ATTACHING, state: 'failed', message: reason } : NOT_ATTACHING);
+        })();
+    };
+    /** 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(() => {
+        // A failure the host explained stays until the author acts; a bare one is said for a moment.
+        if (attaching.state !== 'failed' || attaching.message !== null)
+            return;
+        const timer = setTimeout(() => setAttaching(NOT_ATTACHING), 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: () => {
+                            // Opening the paperclip is the author acting on a refusal: the dialog says it once more.
+                            if (attaching.state === 'failed') {
+                                setRefusal(attaching.message);
+                                setAttaching(NOT_ATTACHING);
+                            }
+                            else
+                                setRefusal(null);
+                            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, { saves: saves, blocked: blocked, host: resolved, onDecided: () => view?.focus() }), 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, { refusal: refusal, 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/SaveNoticeDialog.d.ts

@@ -0,0 +1,15 @@
+/**
+ * What the host said of a save, and the author's choices (#86): a modal dialog with the host's
+ * title, its explanation and one button per action. It never closes by itself, since its job is to
+ * have the author decide; Escape or its × close it and leave the save where it stood, and running
+ * an action closes it before the action runs.
+ */
+import type { SaveAction, SaveNotice } from './saves.js';
+export declare function SaveNoticeDialog({ notice, onClose, onClosed, onAction, }: {
+    notice: SaveNotice;
+    /** Escape or the ×: the author did not choose. */
+    onClose: () => void;
+    /** Once the dialog is closed, whether an action was chosen, so the focus goes where it belongs. */
+    onClosed: (chosen: boolean) => void;
+    onAction: (action: SaveAction) => void;
+}): import("react").JSX.Element;

package/dist/edit/SaveNoticeDialog.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What the host said of a save, and the author's choices (#86): a modal dialog with the host's
+ * title, its explanation and one button per action. It never closes by itself, since its job is to
+ * have the author decide; Escape or its × close it and leave the save where it stood, and running
+ * an action closes it before the action runs.
+ */
+import { useEffect, useId, useRef } from 'react';
+import { useHost } from '../host.js';
+import { ICON_CLOSE } from '../mode-icons.js';
+export function SaveNoticeDialog({ notice, onClose, onClosed, onAction, }) {
+    const host = useHost();
+    const dialog = useRef(null);
+    const chosen = useRef(false);
+    const closed = useRef(onClosed);
+    closed.current = onClosed;
+    const id = useId();
+    useEffect(() => {
+        const element = dialog.current;
+        if (!element)
+            return;
+        if (typeof element.showModal === 'function')
+            element.showModal();
+        else
+            element.setAttribute('open', '');
+        element.querySelector('.edit-notice-action')?.focus();
+        return () => {
+            if (element.open && typeof element.close === 'function')
+                element.close();
+            // Only once the dialog is closed may the page behind it take the focus.
+            closed.current(chosen.current);
+        };
+    }, []);
+    return (_jsx("dialog", { ref: dialog, className: "edit-source edit-notice", "aria-modal": "true", "aria-labelledby": `${id}-title`, "aria-describedby": `${id}-message`, onCancel: (event) => {
+            event.preventDefault();
+            onClose();
+        }, children: _jsxs("div", { className: "edit-source-frame", children: [_jsxs("header", { className: "edit-source-header", children: [_jsx("h2", { id: `${id}-title`, className: "edit-source-title", children: notice.title }), _jsx("button", { type: "button", className: "edit-control edit-source-close", "aria-label": host.strings.close, title: host.strings.close, onClick: onClose, children: ICON_CLOSE })] }), _jsx("p", { id: `${id}-message`, className: "edit-notice-message", children: notice.message }), _jsx("div", { className: "edit-notice-actions", children: notice.actions.map((action, index) => (_jsx("button", { type: "button", className: "edit-attach-button edit-notice-action", onClick: () => {
+                            chosen.current = true;
+                            onAction(action);
+                        }, children: action.label }, index))) })] }) }));
+}