@memorysmithapp/markdown-renderer 0.3.2 → 0.5.0

package/dist/edit/AttachDialog.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The attach dialog (#78): the three ways a file or an image comes into a note. From the computer —
+ * one or more files, each kept by the host's `attach` under the name and with the description the
+ * author gives; from the notebook — a file it already keeps, listed by the host's `files`, found by
+ * name or description; from the web — an image at a public address, written as `![name](address)`.
+ */
+import { useEffect, useId, useRef, useState } from 'react';
+import { fileAddress, fileKind, formatBytes, rendersAs } from '../file-types.js';
+import { useHost } from '../host.js';
+import { ICONS } from './blocks.js';
+/** An address of the web, the only kind an image from the web may have. */
+const WEB = /^https?:\/\/[^\s]+$/i;
+/** The Markdown of an image at a web address, its name the alternative text (§3.14). */
+export function webImage(name, address) {
+    const alt = name.replace(/([\\[\]])/g, '\\$1');
+    const target = /[\s()<>]/.test(address) ? `<${address.replace(/[<>]/g, encodeURIComponent)}>` : address;
+    return `![${alt}](${target})`;
+}
+export function AttachDialog({ refusal = null, onClose, onClosed, onAttach, onEmbed, onLink, }) {
+    const host = useHost();
+    const words = host.strings.editor;
+    const ways = [...(host.attach ? ['computer'] : []), ...(host.files ? ['notebook'] : []), 'web'];
+    const [way, setWay] = useState(ways[0]);
+    const dialog = useRef(null);
+    const inserted = 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('[role="tab"][aria-selected="true"]')?.focus();
+        return () => {
+            if (element.open && typeof element.close === 'function')
+                element.close();
+            closed.current(inserted.current);
+        };
+    }, []);
+    const done = (action) => {
+        inserted.current = true;
+        onClose();
+        action();
+    };
+    const label = { computer: words.fromComputer, notebook: words.fromNotebook, web: words.fromWeb };
+    return (_jsx("dialog", { ref: dialog, className: "edit-source edit-attach", "aria-modal": "true", "aria-labelledby": `${id}-title`, onCancel: (event) => {
+            event.preventDefault();
+            onClose();
+        }, onClick: (event) => event.target === dialog.current && 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: words.attachTitle }), _jsx("button", { type: "button", className: "edit-control edit-source-close", "aria-label": host.strings.close, title: host.strings.close, onClick: onClose, children: ICONS.remove })] }), refusal && _jsx("p", { className: "edit-attach-error edit-attach-refusal", children: refusal }), _jsx("div", { className: "edit-attach-ways", role: "tablist", "aria-label": words.attachTitle, children: ways.map((each) => (_jsx("button", { type: "button", role: "tab", id: `${id}-${each}`, "aria-selected": each === way, "aria-controls": `${id}-panel`, tabIndex: each === way ? 0 : -1, className: "edit-attach-way", onClick: () => setWay(each), onKeyDown: (event) => {
+                            const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+                            if (step === 0)
+                                return;
+                            event.preventDefault();
+                            const next = ways[(ways.indexOf(way) + step + ways.length) % ways.length];
+                            setWay(next);
+                            event.currentTarget.parentElement?.querySelector(`[id="${id}-${next}"]`)?.focus();
+                        }, children: label[each] }, each))) }), _jsxs("div", { className: "edit-attach-panel", role: "tabpanel", id: `${id}-panel`, "aria-labelledby": `${id}-${way}`, children: [way === 'computer' && _jsx(FromComputer, { onAttach: (files) => done(() => onAttach(files)) }), way === 'notebook' && _jsx(FromNotebook, { onEmbed: (name) => done(() => onEmbed(name)) }), way === 'web' && _jsx(FromWeb, { onLink: (name, address) => done(() => onLink(name, address)) })] })] }) }));
+}
+/** Files of the computer, each with the name and the description the author gives it. */
+function FromComputer({ onAttach }) {
+    const host = useHost();
+    const words = host.strings.editor;
+    const [chosen, setChosen] = useState([]);
+    const picker = useRef(null);
+    const update = (index, change) => setChosen((all) => all.map((each, at) => (at === index ? { ...each, ...change } : each)));
+    const ready = chosen.length > 0 && chosen.every((each) => each.name.trim().length > 0);
+    return (_jsxs("form", { className: "edit-attach-form", onSubmit: (event) => {
+            event.preventDefault();
+            if (ready)
+                onAttach(chosen.map((each) => ({ ...each, name: each.name.trim(), description: each.description.trim() })));
+        }, children: [_jsx("input", { ref: picker, type: "file", multiple: true, hidden: true, onChange: (event) => {
+                    const files = [...(event.target.files ?? [])];
+                    setChosen((all) => [...all, ...files.map((file) => ({ file, name: file.name, description: '' }))]);
+                    event.target.value = '';
+                } }), _jsxs("button", { type: "button", className: "edit-attach-button", onClick: () => picker.current?.click(), children: [ICONS.attach, " ", words.chooseFiles] }), chosen.map((each, index) => (_jsxs("fieldset", { className: "edit-attach-file", children: [_jsxs("legend", { className: "edit-attach-file-kind", children: [fileKind(each.file.type || 'application/octet-stream', host.strings.fileKinds), " \u00B7 ", formatBytes(each.file.size, host.strings.locale)] }), _jsxs("label", { children: [_jsx("span", { children: words.fileName }), _jsx("input", { className: "edit-attach-input", value: each.name, required: true, onChange: (event) => update(index, { name: event.target.value }) })] }), _jsxs("label", { children: [_jsx("span", { children: words.fileDescription }), _jsx("input", { className: "edit-attach-input", value: each.description, onChange: (event) => update(index, { description: event.target.value }) })] }), _jsx("button", { type: "button", className: "edit-control", "aria-label": `${words.removeItem} ${each.name}`, title: words.removeItem, onClick: () => setChosen((all) => all.filter((_, at) => at !== index)), children: ICONS.remove })] }, index))), _jsx("div", { className: "edit-attach-actions", children: _jsx("button", { type: "submit", className: "edit-attach-button edit-attach-primary", disabled: !ready, children: words.attachConfirm }) })] }));
+}
+/** The files the notebook keeps, found by name or description, one chosen to embed. */
+function FromNotebook({ onEmbed }) {
+    const host = useHost();
+    const words = host.strings.editor;
+    const [files, setFiles] = useState(null);
+    const [query, setQuery] = useState('');
+    useEffect(() => {
+        let live = true;
+        Promise.resolve()
+            .then(() => host.files?.() ?? [])
+            .then((listed) => live && setFiles([...listed].sort((a, b) => a.name.localeCompare(b.name))), () => live && setFiles('failed'));
+        return () => {
+            live = false;
+        };
+    }, [host.files]);
+    if (files === null)
+        return _jsx("p", { className: "edit-attach-note", children: host.strings.loading });
+    if (files === 'failed')
+        return _jsx("p", { className: "edit-attach-note", children: host.strings.failed });
+    const wanted = query.trim().toLowerCase();
+    const shown = wanted ? files.filter((each) => `${each.name}\n${each.description ?? ''}`.toLowerCase().includes(wanted)) : files;
+    return (_jsxs("div", { className: "edit-attach-files", children: [_jsx("input", { type: "search", className: "edit-attach-input", placeholder: words.searchFiles, "aria-label": words.searchFiles, value: query, onChange: (event) => setQuery(event.target.value) }), files.length === 0 ? (_jsx("p", { className: "edit-attach-note", children: words.noFiles })) : shown.length === 0 ? (_jsx("p", { className: "edit-attach-note", children: words.noMatch })) : (_jsx("ul", { className: "edit-attach-list", children: shown.map((each) => {
+                    const preview = rendersAs(each.mimeType) === 'image' ? fileAddress(each.url) : '';
+                    return (_jsx("li", { children: _jsxs("button", { type: "button", className: "edit-attach-item", onClick: () => onEmbed(each.name), children: [_jsx("span", { className: "edit-attach-preview", "aria-hidden": "true", children: preview ? _jsx("img", { src: preview, alt: "" }) : ICONS.attach }), _jsxs("span", { className: "edit-attach-item-body", children: [_jsx("span", { className: "edit-attach-item-name", children: each.name }), _jsxs("span", { className: "edit-attach-item-note", children: [fileKind(each.mimeType, host.strings.fileKinds), " \u00B7 ", formatBytes(each.bytes, host.strings.locale)] }), each.description && _jsx("span", { className: "edit-attach-item-note", children: each.description })] })] }) }, each.name));
+                }) }))] }));
+}
+/** An image at a public address, and the name it is described by. */
+function FromWeb({ onLink }) {
+    const words = useHost().strings.editor;
+    const [address, setAddress] = useState('');
+    const [name, setName] = useState('');
+    const [invalid, setInvalid] = useState(false);
+    const submit = (event) => {
+        event.preventDefault();
+        // A space pasted with an address is part of it, written as the web writes it.
+        const target = address.trim().replace(/ /g, '%20');
+        if (!WEB.test(target))
+            return setInvalid(true);
+        onLink(name.trim(), target);
+    };
+    return (_jsxs("form", { className: "edit-attach-form", onSubmit: submit, noValidate: true, children: [_jsxs("label", { children: [_jsx("span", { children: words.webAddress }), _jsx("input", { className: "edit-attach-input", type: "url", inputMode: "url", placeholder: "https://", value: address, "aria-invalid": invalid || undefined, onChange: (event) => {
+                            setAddress(event.target.value);
+                            setInvalid(false);
+                        } })] }), invalid && (_jsx("p", { className: "edit-attach-error", role: "alert", children: words.webInvalid })), _jsxs("label", { children: [_jsx("span", { children: words.webName }), _jsx("input", { className: "edit-attach-input", value: name, onChange: (event) => setName(event.target.value) })] }), _jsx("div", { className: "edit-attach-actions", children: _jsx("button", { type: "submit", className: "edit-attach-button edit-attach-primary", disabled: address.trim().length === 0, children: words.webInsert }) })] }));
+}

package/dist/edit/ContextMenu.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The editor's own menu on a right-click in edit mode (#81): what the toolbar formats and inserts,
+ * where the author is, with the clipboard's three verbs. It is a `role="menu"` reached by keyboard,
+ * kept inside the window, and closed by Escape, a click outside it, a scroll, or an entry run.
+ */
+import { type ReactNode } from 'react';
+export interface MenuItem {
+    readonly name: string;
+    readonly label: string;
+    readonly icon: ReactNode;
+    /** The keys that do the same, as CodeMirror writes them: `Mod-b`, `Mod-Shift-x`. */
+    readonly shortcut?: string;
+    readonly disabled?: boolean;
+    readonly run: () => void;
+}
+export interface MenuGroup {
+    readonly label: string;
+    readonly items: readonly MenuItem[];
+}
+/** A shortcut as the reader's keyboard writes it: `⌘⇧X` on a Mac, `Ctrl+Shift+X` elsewhere. */
+export declare function shortcutText(shortcut: string): string;
+export declare function ContextMenu({ x, y, label, groups, onClose, }: {
+    x: number;
+    y: number;
+    label: string;
+    groups: readonly MenuGroup[];
+    /** The menu closed; `back` says the focus goes back to the text, as after Escape or an entry. */
+    onClose: (back: boolean) => void;
+}): import("react").JSX.Element;

package/dist/edit/ContextMenu.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The editor's own menu on a right-click in edit mode (#81): what the toolbar formats and inserts,
+ * where the author is, with the clipboard's three verbs. It is a `role="menu"` reached by keyboard,
+ * kept inside the window, and closed by Escape, a click outside it, a scroll, or an entry run.
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+const MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+/** A shortcut as the reader's keyboard writes it: `⌘⇧X` on a Mac, `Ctrl+Shift+X` elsewhere. */
+export function shortcutText(shortcut) {
+    const keys = shortcut.split('-').map((key) => (key.length === 1 ? key.toUpperCase() : key));
+    if (MAC)
+        return keys.map((key) => ({ Mod: '⌘', Shift: '⇧', Alt: '⌥' })[key] ?? key).join('');
+    return keys.map((key) => ({ Mod: 'Ctrl' })[key] ?? key).join('+');
+}
+/** The same shortcut as `aria-keyshortcuts` names it. */
+function ariaShortcut(shortcut) {
+    return shortcut
+        .split('-')
+        .map((key) => (key === 'Mod' ? (MAC ? 'Meta' : 'Control') : key.length === 1 ? key.toUpperCase() : key))
+        .join('+');
+}
+export function ContextMenu({ x, y, label, groups, onClose, }) {
+    const menu = useRef(null);
+    const [place, setPlace] = useState({ left: x, top: y });
+    const close = useRef(onClose);
+    close.current = onClose;
+    // Kept inside the window: a menu opened near the right or the bottom edge opens the other way.
+    useLayoutEffect(() => {
+        const element = menu.current;
+        if (!element)
+            return;
+        const box = element.getBoundingClientRect();
+        const margin = 8;
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        setPlace({
+            left: Math.max(margin, x + box.width + margin > width ? Math.max(margin, x - box.width) : x),
+            top: Math.max(margin, y + box.height + margin > height ? Math.max(margin, height - box.height - margin) : y),
+        });
+        element.querySelector('[role="menuitem"]:not([aria-disabled="true"])')?.focus();
+    }, [x, y]);
+    useEffect(() => {
+        const outside = (event) => {
+            if (!menu.current?.contains(event.target))
+                close.current(false);
+        };
+        const scrolled = (event) => {
+            if (!menu.current?.contains(event.target))
+                close.current(false);
+        };
+        document.addEventListener('mousedown', outside, true);
+        // The click that opened the menu may move the cursor, and the editor scroll it into view: a
+        // scroll closes the menu only once that one is over.
+        const listen = setTimeout(() => {
+            window.addEventListener('scroll', scrolled, true);
+            window.addEventListener('resize', scrolled);
+        }, 200);
+        return () => {
+            clearTimeout(listen);
+            document.removeEventListener('mousedown', outside, true);
+            window.removeEventListener('scroll', scrolled, true);
+            window.removeEventListener('resize', scrolled);
+        };
+    }, []);
+    const move = (step) => {
+        const items = [...(menu.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])') ?? [])];
+        if (items.length === 0)
+            return;
+        const at = items.indexOf(document.activeElement);
+        const next = step === 'first' ? 0 : step === 'last' ? items.length - 1 : (at + step + items.length) % items.length;
+        items[next]?.focus();
+    };
+    return (_jsx("div", { ref: menu, className: "edit-menu", role: "menu", "aria-label": label, style: { left: place.left, top: place.top }, "data-ms-control": "", onContextMenu: (event) => event.preventDefault(), onKeyDown: (event) => {
+            if (event.key === 'ArrowDown')
+                move(1);
+            else if (event.key === 'ArrowUp')
+                move(-1);
+            else if (event.key === 'Home')
+                move('first');
+            else if (event.key === 'End')
+                move('last');
+            else if (event.key === 'Escape' || event.key === 'Tab')
+                onClose(true);
+            else
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        }, children: groups.map((group, index) => (_jsxs("div", { role: "group", "aria-label": group.label, className: "edit-menu-group", children: [index > 0 && _jsx("div", { role: "separator", className: "edit-menu-separator" }), _jsx("div", { className: "edit-menu-heading", "aria-hidden": "true", children: group.label }), group.items.map((item) => (_jsxs("button", { type: "button", role: "menuitem", className: "edit-menu-item", tabIndex: -1, "aria-disabled": item.disabled || undefined, "aria-keyshortcuts": item.shortcut ? ariaShortcut(item.shortcut) : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                        if (item.disabled)
+                            return;
+                        onClose(true);
+                        item.run();
+                    }, children: [_jsx("span", { className: "edit-menu-icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { className: "edit-menu-label", children: item.label }), item.shortcut && _jsx("span", { className: "edit-menu-shortcut", children: shortcutText(item.shortcut) })] }, item.name)))] }, group.label))) }));
+}

package/dist/edit/LanguageControl.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The language of a fenced code block, chosen at its top right in edit mode (#84): a button that
+ * says the language, and a combobox that searches every grammar Prism carries — by the name a
+ * person reads, by Prism's identifier, or by an alias, so `py` finds Python — with plain text and a
+ * Mermaid diagram first. Choosing rewrites the opening fence's info string and nothing else.
+ */
+import type { EditorView } from '@codemirror/view';
+/** Opens the control of the fence that starts at `from` once it is drawn. */
+export declare function chooseLanguageAt(view: EditorView, from: number): void;
+/**
+ * The fence's opening line rewritten with `language` as the first word of its info string, the
+ * rest of it kept; `null` takes the word away.
+ */
+export declare function withLanguage(fence: string, language: string | null): string;
+export declare function LanguageControl({ view, from, language }: {
+    view: EditorView;
+    from: number;
+    language: string | null;
+}): import("react").JSX.Element;

package/dist/edit/LanguageControl.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { grammarOf } from '../highlight.js';
+import { useHost } from '../host.js';
+import { GRAMMARS } from '../prism-grammars.js';
+import { ICONS } from './blocks.js';
+/** The code blocks whose control opens as soon as it is drawn: one the toolbar or the menu just inserted. */
+const opening = new WeakMap();
+/** Opens the control of the fence that starts at `from` once it is drawn. */
+export function chooseLanguageAt(view, from) {
+    opening.set(view, from);
+}
+/**
+ * The fence's opening line rewritten with `language` as the first word of its info string, the
+ * rest of it kept; `null` takes the word away.
+ */
+export function withLanguage(fence, language) {
+    const match = /^([ \t>]*(?:`{3,}|~{3,}))([ \t]*)(\S*)(.*)$/.exec(fence);
+    if (!match)
+        return fence;
+    const [, marker, , , rest] = match;
+    return language ? `${marker}${language}${rest}` : `${marker}${rest?.replace(/^[ \t]+/, '') ?? ''}`;
+}
+export function LanguageControl({ view, from, language }) {
+    const host = useHost();
+    const words = host.strings.editor;
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [active, setActive] = useState(0);
+    const button = useRef(null);
+    const box = useRef(null);
+    const grammar = grammarOf(language);
+    const choices = useMemo(() => {
+        const all = [
+            { value: null, label: words.plainText, words: [words.plainText.toLowerCase(), 'text', 'plain'] },
+            { value: 'mermaid', label: words.mermaidDiagram, words: [words.mermaidDiagram.toLowerCase(), 'mermaid'] },
+            ...GRAMMARS.filter((each) => !each.part)
+                .map((each) => ({ value: each.id, label: each.title, words: [each.title.toLowerCase(), each.id, ...each.aliases.map((alias) => alias.toLowerCase())] }))
+                .sort((a, b) => a.label.localeCompare(b.label)),
+        ];
+        // A name no grammar answers is offered as itself, drawn as plain code.
+        if (language && !grammar && language.toLowerCase() !== 'mermaid')
+            all.splice(1, 0, { value: language, label: `${language} · ${words.notHighlighted}`, words: [language.toLowerCase()] });
+        return all;
+    }, [words, language, grammar]);
+    const wanted = query.trim().toLowerCase();
+    // What the search finds, best first: a name or an alias that is the search, then one that starts
+    // with it, then one that holds it; the order of the list within each.
+    const shown = useMemo(() => {
+        if (!wanted)
+            return choices;
+        const rank = (each) => (each.words.some((word) => word === wanted) ? 0 : each.words.some((word) => word.startsWith(wanted)) ? 1 : 2);
+        return choices
+            .filter((each) => each.words.some((word) => word.includes(wanted)))
+            .map((each, order) => ({ each, order, rank: rank(each) }))
+            .sort((a, b) => a.rank - b.rank || a.order - b.order)
+            .map(({ each }) => {
+            const alias = each.words.slice(2).find((word) => word.startsWith(wanted));
+            return alias && !each.label.toLowerCase().includes(wanted) ? { ...each, hint: alias } : each;
+        });
+    }, [choices, wanted]);
+    const current = language === null ? null : (grammar?.id ?? language.toLowerCase());
+    const label = language === null ? words.plainText : language.toLowerCase() === 'mermaid' ? words.mermaidDiagram : (grammar?.title ?? language);
+    // A block the toolbar or the menu just inserted opens its choice at once, its search focused.
+    useEffect(() => {
+        if (opening.get(view) !== from)
+            return;
+        opening.delete(view);
+        setOpen(true);
+    }, [view, from]);
+    useEffect(() => {
+        if (!open)
+            return;
+        setActive(Math.max(0, shown.findIndex((each) => each.value === current)));
+        box.current?.querySelector('input')?.focus();
+        const outside = (event) => {
+            if (!box.current?.contains(event.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', outside, true);
+        return () => document.removeEventListener('mousedown', outside, true);
+        // The active option is placed once, as the list opens.
+    }, [open]);
+    useEffect(() => {
+        box.current?.querySelector(`[id="${id}-option-${active}"]`)?.scrollIntoView?.({ block: 'nearest' });
+    }, [active, id]);
+    const close = (back) => {
+        setOpen(false);
+        setQuery('');
+        if (back === 'text')
+            view.focus();
+        else
+            button.current?.focus();
+    };
+    const choose = (choice) => {
+        const line = view.state.doc.lineAt(from);
+        const next = withLanguage(line.text, choice.value);
+        if (next !== line.text)
+            view.dispatch({ changes: { from: line.from, to: line.to, insert: next }, userEvent: 'input.form' });
+        // The cursor goes into the code, where the author writes next.
+        const after = view.state.doc.lineAt(from);
+        if (after.number < view.state.doc.lines)
+            view.dispatch({ selection: { anchor: view.state.doc.line(after.number + 1).from } });
+        close('text');
+    };
+    return (_jsxs("span", { className: "edit-language", ref: box, "data-ms-control": "", children: [_jsxs("button", { ref: button, type: "button", className: "edit-language-button", "aria-haspopup": "listbox", "aria-expanded": open, title: words.language, "aria-label": `${words.language}: ${label}`, onMouseDown: (event) => event.preventDefault(), onClick: () => (open ? close('button') : setOpen(true)), children: [label, _jsx("span", { className: "edit-language-caret", "aria-hidden": "true", children: ICONS.caret })] }), open && (_jsxs("span", { className: "edit-language-popover", children: [_jsx("input", { className: "edit-language-search", role: "combobox", "aria-expanded": "true", "aria-controls": `${id}-list`, "aria-autocomplete": "list", "aria-activedescendant": shown[active] ? `${id}-option-${active}` : undefined, "aria-label": words.searchLanguages, placeholder: words.searchLanguages, value: query, onChange: (event) => {
+                            setQuery(event.target.value);
+                            setActive(0);
+                        }, onKeyDown: (event) => {
+                            if (event.key === 'ArrowDown')
+                                setActive((at) => Math.min(shown.length - 1, at + 1));
+                            else if (event.key === 'ArrowUp')
+                                setActive((at) => Math.max(0, at - 1));
+                            else if (event.key === 'Enter' && shown[active])
+                                choose(shown[active]);
+                            else if (event.key === 'Escape')
+                                close('text');
+                            else
+                                return;
+                            event.preventDefault();
+                            event.stopPropagation();
+                        } }), _jsx("span", { className: "edit-language-list", role: "listbox", id: `${id}-list`, "aria-label": words.language, children: shown.length === 0 ? (_jsx("span", { className: "edit-language-none", children: words.noLanguage })) : (shown.map((each, index) => (_jsxs("span", { id: `${id}-option-${index}`, role: "option", "aria-selected": each.value === current, "data-active": index === active || undefined, className: "edit-language-option", onMouseDown: (event) => event.preventDefault(), onMouseEnter: () => setActive(index), onClick: () => choose(each), children: [_jsx("span", { children: each.label }), each.hint && _jsx("span", { className: "edit-language-hint", children: each.hint })] }, each.value ?? '')))) })] }))] }));
+}

package/dist/edit/NoteEditor.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 { type ReactNode } from 'react';
+import { type NoteHost } from '../host.js';
+export interface NoteEditorProps extends Omit<NoteHost, 'writable' | 'onToggleTask'> {
+    /** The note as the host keeps it, frontmatter included. A new value that differs from the editor's is taken in. */
+    readonly markdown: string;
+    /**
+     * The note after each change the author makes, byte for byte the original wherever it was not
+     * edited. A promise answered is the save of that change, which the editor reports (#64); one that
+     * resolves with a `SaveOutcome` or rejects with a `SaveRefusal` has the host's words and actions (#86).
+     */
+    readonly onChange?: (markdown: string) => unknown;
+    /** Whether the author may change the note. Defaults to `true`. */
+    readonly editable?: boolean;
+    /** What sits at the top right of the note, such as the switch back to reading. */
+    readonly corner?: ReactNode;
+    /** Whether the editor takes the focus when it opens. */
+    readonly autoFocus?: boolean;
+    /**
+     * The author asked to go back to reading. The editor waits for a save in flight, folds its
+     * toolbar into the corner, and answers through `onLeave`: `true` once it may go, `false` when
+     * the last save failed and the note stays in edit.
+     */
+    readonly leaving?: boolean;
+    readonly onLeave?: (left: boolean) => void;
+}
+/**
+ * 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 declare function lineBreakOf(text: string): '\n' | '\r\n' | null;
+/**
+ * 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 declare function NoteEditor({ markdown: given, onChange, editable, corner, autoFocus, leaving, onLeave, ...host }: NoteEditorProps): import("react").JSX.Element;