@memorysmithapp/markdown-renderer 0.3.2 → 0.5.0

package/dist/edit/blocks.js

@@ -0,0 +1,481 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The blocks the editor draws in place of their text while the author is not editing it, each
+ * drawn by the reading surface's own components so that edit mode looks like the page (ADR-006):
+ * a run of notation through `Markdown`, a callout with its type and folding controls, a table
+ * whose cells are edited where they stand (#56), and the frontmatter as a form (#58).
+ *
+ * Every edit they make is a change to the note's bytes, dispatched to the editor; none of them
+ * keeps a copy of the note.
+ */
+import { ChangeSet } from '@codemirror/state';
+import { useEffect, useRef, useState } from 'react';
+import { useHost } from '../host.js';
+import { Markdown } from '../Markdown.js';
+import { hideComments, resolveWikilinks } from '../markdown.js';
+import { isTrue, readProperties } from '../properties.js';
+import { Transclusion } from '../Transclusion.js';
+import { splitEmbeds } from '../transclusion.js';
+import { wikilinkAddress } from '../wikilink-address.js';
+import { addEntry, readFrontmatter, removeEntry, renameKey, setList, setScalar, } from './frontmatter.js';
+import { addColumn, addRow, alignColumn, columnCount, readTable, removeColumn, removeRow, setCell, } from './table.js';
+/** Whether a block's edit is being applied: the block is drawn anew, and the field it held lets the focus go. */
+let writing = false;
+/**
+ * Applies changes to the note, as one step of its history.
+ *
+ * An edit draws its block again, and the field that held the focus is taken out of the page while
+ * the editor updates; the browser tells it it lost the focus, and it would commit what it holds a
+ * second time, inside that update. That second commit is the first one again, so it is dropped —
+ * and so is any commit that arrives while the editor is updating for another reason.
+ */
+function write(view, changes, event = 'input.form') {
+    const empty = changes instanceof ChangeSet ? changes.empty : changes.length === 0;
+    if (empty || view.state.readOnly || writing)
+        return;
+    writing = true;
+    try {
+        view.dispatch({ changes: changes instanceof ChangeSet ? changes : [...changes], userEvent: event });
+    }
+    catch (error) {
+        if (!(error instanceof Error && /update is in progress/.test(error.message)))
+            throw error;
+    }
+    finally {
+        writing = false;
+    }
+}
+/** A run of notation drawn as the reading surface draws it: comments out, wikilinks resolved, embeds expanded. */
+export function Snippet({ text }) {
+    const host = useHost();
+    const body = hideComments(text).text;
+    return (_jsx(_Fragment, { children: splitEmbeds(body, host.keeps).map((segment, index) => segment.kind === 'text' ? (_jsx(Markdown, { children: resolveWikilinks(segment.text, (name) => wikilinkAddress(host, name), host.keeps) }, index)) : (_jsx(Transclusion, { target: segment.target, anchor: segment.anchor }, index))) }));
+}
+/** A small button of the editor's own, outside the note's notation. */
+function Control({ label, onClick, children, pressed }) {
+    return (_jsx("button", { type: "button", className: "edit-control", title: label, "aria-label": label, "aria-pressed": pressed, "data-ms-control": "", onMouseDown: (event) => event.preventDefault(), onClick: onClick, children: children }));
+}
+// ── Callouts ─────────────────────────────────────────────────────────────────
+/** The types a callout may take from the toolbar: the families the default theme draws. */
+export const CALLOUT_TYPES = [
+    'note', 'info', 'todo', 'abstract', 'tip', 'success', 'question', 'warning', 'failure', 'danger', 'bug', 'example', 'quote',
+];
+/**
+ * A callout drawn as the page draws it, with its type and its folding chosen in place: each
+ * choice rewrites the marker `[!type]±` of its first line and nothing else (#55).
+ */
+export function CalloutBlock({ view, text, marker }) {
+    const { strings } = useHost();
+    const words = strings.editor;
+    const types = CALLOUT_TYPES.includes(marker.type) ? [...CALLOUT_TYPES] : [marker.type, ...CALLOUT_TYPES];
+    const rewrite = (type, fold) => write(view, [{ from: marker.from, to: marker.to, insert: `[!${type}]${fold ?? ''}` }]);
+    return (_jsxs("div", { className: "edit-block edit-callout", children: [_jsxs("div", { className: "edit-block-controls", "data-ms-control": "", children: [_jsx("select", { "aria-label": words.calloutType, title: words.calloutType, value: marker.type, onChange: (event) => rewrite(event.target.value, marker.fold), children: types.map((type) => (_jsx("option", { value: type, children: strings.callouts[type] ?? type }, type))) }), _jsxs("select", { "aria-label": words.fold, title: words.fold, value: marker.fold ?? '', onChange: (event) => rewrite(marker.type, (event.target.value || null)), children: [_jsx("option", { value: "", children: words.foldNone }), _jsx("option", { value: "+", children: words.foldOpen }), _jsx("option", { value: "-", children: words.foldClosed })] })] }), _jsx(Snippet, { text: text })] }));
+}
+// ── Tables ───────────────────────────────────────────────────────────────────
+/** Where the focus goes back to when a table is drawn again after an edit of one of its cells. */
+let pendingFocus = null;
+/**
+ * The cell a table's controls act on, kept across the table being drawn again: adding a column
+ * redraws it, and the alignment chosen next is for the cell the author was in, not the first (#69).
+ */
+const chosenCells = new WeakMap();
+/**
+ * A table whose cells are edited where they stand. A cell commits its text when it loses the focus,
+ * or on Enter (to the cell below) and Tab (to the next one); each commit rewrites that cell's
+ * content only. The controls add and remove rows and columns and align the column of the cell last
+ * focused.
+ */
+export function TableBlock({ view, from, to }) {
+    const { strings } = useHost();
+    const words = strings.editor;
+    const source = view.state.doc.sliceString(0, view.state.doc.length, '\n');
+    const table = readTable(source, from, to);
+    const width = columnCount(table);
+    const [focus, setFocused] = useState(() => {
+        const chosen = chosenCells.get(view);
+        return chosen && chosen.from === table.from && chosen.row < table.rows.length && chosen.column < width
+            ? { row: chosen.row, column: chosen.column }
+            : { row: table.rows.length > 2 ? 2 : 0, column: 0 };
+    });
+    const setFocus = (cell) => {
+        chosenCells.set(view, { from: table.from, ...cell });
+        setFocused(cell);
+    };
+    // The cell being edited shows its source; every other one is drawn as the page draws it.
+    const [editing, setEditing] = useState(null);
+    const root = useRef(null);
+    useEffect(() => {
+        if (pendingFocus && pendingFocus.from === table.from) {
+            const { row, column } = pendingFocus;
+            pendingFocus = null;
+            setEditing({ row, column });
+            setFocus({ row, column });
+        }
+    });
+    // A cell that starts being edited takes the focus, with the cursor at its end.
+    useEffect(() => {
+        if (!editing)
+            return;
+        const cell = root.current?.querySelector(`[data-row="${editing.row}"][data-column="${editing.column}"][contenteditable]`);
+        if (!cell || document.activeElement === cell)
+            return;
+        cell.focus();
+        const selection = window.getSelection();
+        selection?.selectAllChildren(cell);
+        selection?.collapseToEnd();
+    }, [editing]);
+    const commit = (row, column, value, next, more = []) => {
+        const changes = [...setCell(table, row, column, value), ...more];
+        if (next)
+            pendingFocus = { from: table.from, ...next };
+        if (changes.length > 0)
+            write(view, changes);
+        else if (next) {
+            pendingFocus = null;
+            setEditing(next);
+            setFocus(next);
+        }
+        else
+            setEditing(null);
+    };
+    const onKey = (event, row, column) => {
+        const value = event.currentTarget.textContent ?? '';
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const below = row === 0 ? 2 : row + 1;
+            commit(row, column, value, below < table.rows.length ? { row: below, column } : undefined);
+            if (below >= table.rows.length)
+                event.currentTarget.blur();
+        }
+        else if (event.key === 'Tab') {
+            event.preventDefault();
+            const step = event.shiftKey ? -1 : 1;
+            let nextColumn = column + step;
+            let nextRow = row;
+            if (nextColumn >= width) {
+                nextColumn = 0;
+                nextRow = row === 0 ? 2 : row + 1;
+            }
+            else if (nextColumn < 0) {
+                nextColumn = width - 1;
+                nextRow = row === 2 ? 0 : row - 1;
+            }
+            if (nextRow >= table.rows.length) {
+                // Tab past the last cell adds a row and goes on in it, as a table does in a document.
+                commit(row, column, value, { row: nextRow, column: 0 }, addRow(table, row));
+            }
+            else {
+                commit(row, column, value, nextRow >= 0 && nextRow !== 1 ? { row: nextRow, column: nextColumn } : undefined);
+            }
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.currentTarget.textContent = table.rows[row]?.cells[column]?.text ?? '';
+            event.currentTarget.blur();
+            view.focus();
+        }
+    };
+    const cell = (row, column) => {
+        const text = table.rows[row]?.cells[column]?.text ?? '';
+        const Tag = row === 0 ? 'th' : 'td';
+        const style = table.align[column] ? { textAlign: table.align[column] ?? undefined } : undefined;
+        if (editing?.row !== row || editing.column !== column || view.state.readOnly) {
+            return (_jsx(Tag, { style: style, children: _jsx("span", { className: "edit-cell edit-cell-drawn", role: "button", tabIndex: 0, "aria-label": `${row === 0 ? 1 : row} · ${column + 1}`, "data-row": row, "data-column": column, "data-ms-control": "", onMouseDown: (event) => {
+                        if (event.metaKey || event.ctrlKey || view.state.readOnly)
+                            return;
+                        event.preventDefault();
+                        setFocus({ row, column });
+                        setEditing({ row, column });
+                    }, onFocus: () => setFocus({ row, column }), onKeyDown: (event) => {
+                        if (event.key === 'Enter' || event.key === 'F2') {
+                            event.preventDefault();
+                            setEditing({ row, column });
+                        }
+                    }, children: _jsx(Snippet, { text: text.replace(/\\\|/g, '|') }) }) }, column));
+        }
+        return (_jsx(Tag, { style: style, children: _jsx("span", { className: "edit-cell", contentEditable: !view.state.readOnly, suppressContentEditableWarning: true, role: "textbox", "aria-label": `${row === 0 ? 1 : row} · ${column + 1}`, "data-row": row, "data-column": column, "data-ms-control": "", onFocus: () => setFocus({ row, column }), onBlur: (event) => {
+                    commit(row, column, event.currentTarget.textContent ?? '');
+                    setEditing((current) => (current?.row === row && current.column === column ? null : current));
+                }, onKeyDown: (event) => onKey(event, row, column), onPaste: (event) => {
+                    event.preventDefault();
+                    document.execCommand('insertText', false, event.clipboardData.getData('text/plain').replace(/\r?\n/g, ' '));
+                }, children: text }) }, column));
+    };
+    /**
+     * What a control of the table does, after the text of the cell being edited: the control keeps
+     * the focus where it is, so the cell has not committed, and its text would go with the table
+     * drawn again (#69). Both are one change, which one Undo takes back.
+     */
+    const act = (control) => {
+        const open = editing && root.current?.querySelector(`[data-row="${editing.row}"][data-column="${editing.column}"][contenteditable]`);
+        const typed = open && editing ? setCell(table, editing.row, editing.column, open.textContent ?? '') : [];
+        setEditing(null);
+        if (typed.length === 0)
+            return write(view, control(table));
+        const first = view.state.changes([...typed]);
+        const next = view.state.update({ changes: first }).state;
+        const fresh = readTable(next.doc.sliceString(0, next.doc.length, '\n'), first.mapPos(table.from), first.mapPos(table.to));
+        write(view, first.compose(next.changes([...control(fresh)])));
+    };
+    const align = (alignment) => act((current) => alignColumn(current, focus.column, alignment));
+    const bodyRows = table.rows.slice(2);
+    return (_jsxs("div", { className: "edit-block edit-table", children: [_jsxs("div", { className: "edit-block-controls", "data-ms-control": "", children: [_jsx(Control, { label: words.addRow, onClick: () => act((current) => addRow(current, focus.row)), children: ICONS.rowAdd }), _jsx(Control, { label: words.removeRow, onClick: () => act((current) => removeRow(current, focus.row)), children: ICONS.rowRemove }), _jsx(Control, { label: words.addColumn, onClick: () => act((current) => addColumn(current, focus.column)), children: ICONS.columnAdd }), _jsx(Control, { label: words.removeColumn, onClick: () => act((current) => removeColumn(current, focus.column)), children: ICONS.columnRemove }), _jsx(Control, { label: words.alignLeft, pressed: table.align[focus.column] === 'left', onClick: () => align(table.align[focus.column] === 'left' ? null : 'left'), children: ICONS.alignLeft }), _jsx(Control, { label: words.alignCenter, pressed: table.align[focus.column] === 'center', onClick: () => align(table.align[focus.column] === 'center' ? null : 'center'), children: ICONS.alignCenter }), _jsx(Control, { label: words.alignRight, pressed: table.align[focus.column] === 'right', onClick: () => align(table.align[focus.column] === 'right' ? null : 'right'), children: ICONS.alignRight }), _jsx(Control, { label: words.source, onClick: () => {
+                            act(() => []);
+                            reveal(view, table.from);
+                        }, children: ICONS.source })] }), _jsx("div", { className: "markdown", children: _jsxs("table", { ref: root, children: [_jsx("thead", { children: _jsx("tr", { children: Array.from({ length: width }, (_, column) => cell(0, column)) }) }), bodyRows.length > 0 && (_jsx("tbody", { children: bodyRows.map((_, index) => (_jsx("tr", { children: Array.from({ length: width }, (__, column) => cell(index + 2, column)) }, index))) }))] }) })] }));
+}
+/** Shows a block as its text: the cursor goes into it, and the editor draws its source. */
+export function reveal(view, at) {
+    view.dispatch({ selection: { anchor: at }, scrollIntoView: true });
+    view.focus();
+}
+// ── Frontmatter ──────────────────────────────────────────────────────────────
+/** A text field that commits on blur and on Enter, and goes back to what was written on Escape. */
+function Field({ value, label, onCommit, className, placeholder, multiline = false, type = 'text', size, }) {
+    const [draft, setDraft] = useState(value);
+    useEffect(() => setDraft(value), [value]);
+    const common = {
+        className: `edit-field ${className ?? ''}`.trim(),
+        'aria-label': label,
+        title: label,
+        placeholder,
+        value: draft,
+        'data-ms-control': '',
+        onBlur: () => draft !== value && onCommit(draft),
+    };
+    if (multiline) {
+        return (_jsx("textarea", { ...common, rows: Math.min(6, Math.max(2, Math.ceil(draft.length / 60))), onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                if (event.key === 'Escape')
+                    setDraft(value);
+                if (event.key === 'Enter' && !event.shiftKey) {
+                    event.preventDefault();
+                    event.target.blur();
+                }
+            } }));
+    }
+    return (_jsx("input", { ...common, type: type, size: size, onChange: (event) => {
+            setDraft(event.target.value);
+            if (type === 'date' && event.target.value !== value && event.target.value !== '')
+                onCommit(event.target.value);
+        }, onKeyDown: (event) => {
+            if (event.key === 'Escape')
+                setDraft(value);
+            if (event.key === 'Enter')
+                event.target.blur();
+        } }));
+}
+/** A list value as chips, each removable, with a field that adds one on Enter. */
+/**
+ * A list's items as chips and the field that adds the next. `typing` says the author is still in
+ * the field — an item added with Enter or a comma, the last taken back with Backspace — so the
+ * field keeps the focus once the form is drawn again; an item committed by leaving it does not.
+ */
+function ListField({ items, label, onCommit }) {
+    const { strings } = useHost();
+    const [draft, setDraft] = useState('');
+    const field = useRef(null);
+    const add = (typing) => {
+        const item = draft.trim();
+        if (item.length === 0)
+            return;
+        setDraft('');
+        onCommit([...items, item], typing);
+    };
+    return (_jsxs("span", { className: "prop-tags edit-list", children: [items.map((item, index) => (_jsxs("span", { className: "prop-tag", children: [item, _jsx("button", { type: "button", className: "edit-chip-remove", "data-ms-control": "", "aria-label": `${strings.editor.removeItem} ${item}`, title: strings.editor.removeItem, onMouseDown: (event) => event.preventDefault(), onClick: () => onCommit(items.filter((_, at) => at !== index), false), children: "\u00D7" })] }, `${item}-${index}`))), _jsx("input", { ref: field, className: "edit-field edit-list-add", "aria-label": `${strings.editor.addItem}: ${label}`, placeholder: strings.editor.addItem, value: draft, "data-ms-control": "", onChange: (event) => setDraft(event.target.value), onBlur: () => add(false), onKeyDown: (event) => {
+                    if (event.key === 'Enter' || event.key === ',') {
+                        event.preventDefault();
+                        add(true);
+                    }
+                    if (event.key === 'Backspace' && draft === '' && items.length > 0)
+                        onCommit(items.slice(0, -1), true);
+                } }), _jsx(Control, { label: `${strings.editor.addItem} ${label}`, onClick: () => (draft.trim() === '' ? field.current?.focus() : add(true)), children: ICONS.add })] }));
+}
+/** The value of one entry, edited by the shape it was read in (§6.3). */
+function ValueField({ view, front, entry, written }) {
+    const { strings } = useHost();
+    const label = `${strings.editor.propertyValue}: ${entry.key}`;
+    if (entry.shape === 'list') {
+        return (_jsx(ListField, { items: entry.values, label: entry.key, onCommit: (items, typing) => {
+                if (typing)
+                    focusAfterDraw.set(view, entry.key);
+                write(view, setList(front, entry.key, items));
+            } }));
+    }
+    if (entry.shape === 'boolean') {
+        const value = entry.values[0] ?? 'false';
+        // Chosen as reading draws it, Yes or No, and written in the words the author used: `true`/`false` or `yes`/`no`.
+        const choose = (on) => {
+            if (on === isTrue(value))
+                return;
+            const yesNo = /^(yes|no)$/i.test(value);
+            const word = yesNo ? (on ? 'yes' : 'no') : on ? 'true' : 'false';
+            const cased = value === value.toUpperCase() ? word.toUpperCase() : value[0] === value[0]?.toUpperCase() ? word[0].toUpperCase() + word.slice(1) : word;
+            write(view, setScalar(front, entry.key, cased));
+        };
+        return (_jsxs("select", { className: "edit-boolean", value: isTrue(value) ? 'yes' : 'no', "aria-label": label, title: label, "data-ms-control": "", onChange: (event) => choose(event.target.value === 'yes'), children: [_jsx("option", { value: "yes", children: strings.yes }), _jsx("option", { value: "no", children: strings.no })] }));
+    }
+    if (entry.shape === 'date' && /^\d{4}-\d{2}-\d{2}$/.test(entry.values[0] ?? '')) {
+        return _jsx(Field, { type: "date", value: entry.values[0] ?? '', label: label, onCommit: (value) => write(view, setScalar(front, entry.key, value)) });
+    }
+    return (_jsx(Field, { value: entry.values[0] ?? written, label: label, multiline: entry.shape === 'prose', onCommit: (value) => write(view, setScalar(front, entry.key, value)) }));
+}
+function emptyValue(type) {
+    if (type === 'boolean')
+        return 'false';
+    if (type === 'date') {
+        const today = new Date();
+        const two = (value) => String(value).padStart(2, '0');
+        return `${today.getFullYear()}-${two(today.getMonth() + 1)}-${two(today.getDate())}`;
+    }
+    return '';
+}
+/** The type a property's value has, as the form offers it. */
+function typeOf(shape) {
+    return shape === 'list' ? 'list' : shape === 'date' ? 'date' : shape === 'boolean' ? 'boolean' : 'text';
+}
+/**
+ * A property given another type, its value carried over where the new type can hold it: a list's
+ * items joined as text, a text split at its commas as a list's items; a value the new type
+ * cannot hold becomes that type's empty one. Undo takes it back.
+ */
+function retype(front, key, read, to) {
+    const from = typeOf(read.shape);
+    if (from === to)
+        return [];
+    const values = read.values.filter((value) => value.length > 0);
+    if (to === 'list') {
+        // A text splits at its commas, as a list joined as text was written.
+        const items = from === 'boolean' ? [] : from === 'text' ? values.flatMap((value) => value.split(',')).map((item) => item.trim()).filter(Boolean) : values;
+        return setList(front, key, items);
+    }
+    if (to === 'boolean')
+        return setScalar(front, key, 'false');
+    if (to === 'date')
+        return setScalar(front, key, emptyValue('date'));
+    return setScalar(front, key, from === 'list' ? values.join(', ') : '');
+}
+/**
+ * The choice of a property's type, drawn as the icon of its type before its key: a select laid
+ * over the icon, so it opens where the author looks and is reached by keyboard and named (#71).
+ */
+function TypeChoice({ value, label, onChoose }) {
+    const words = useHost().strings.editor;
+    return (_jsxs(_Fragment, { children: [_jsxs("select", { className: "edit-type", "aria-label": label, title: label, value: value, "data-ms-control": "", onChange: (event) => onChoose(event.target.value), children: [_jsx("option", { value: "text", children: words.typeText }), _jsx("option", { value: "list", children: words.typeList }), _jsx("option", { value: "boolean", children: words.typeBoolean }), _jsx("option", { value: "date", children: words.typeDate })] }), _jsx("span", { className: "edit-type-caret", "aria-hidden": "true", children: ICONS.caret })] }));
+}
+/**
+ * The property whose value field takes the focus once the form is drawn again, per editor: one
+ * just made (#70), or a list the author is adding items to.
+ */
+const focusAfterDraw = new WeakMap();
+export function PropertiesBlock({ view, to }) {
+    const { strings } = useHost();
+    const words = strings.editor;
+    const source = view.state.doc.sliceString(0, view.state.doc.length, '\n');
+    const front = readFrontmatter(source);
+    const properties = readProperties(source.slice(0, to));
+    const [adding, setAdding] = useState('');
+    const [type, setType] = useState('text');
+    const box = useRef(null);
+    // A property just made, or a list being typed in: its value field takes the focus, a list's the field of its next item.
+    // The form is drawn into a widget the editor places after, so the focus waits for it to be there.
+    useEffect(() => {
+        const key = focusAfterDraw.get(view);
+        if (!key || !front?.entries.some((entry) => entry.key === key))
+            return;
+        const names = [`${words.propertyValue}: ${key}`, `${words.addItem}: ${key}`];
+        let tries = 0;
+        let timer;
+        const place = () => {
+            const field = [...(box.current?.querySelectorAll('[aria-label]') ?? [])].find((each) => names.includes(each.getAttribute('aria-label') ?? ''));
+            if (field?.isConnected) {
+                focusAfterDraw.delete(view);
+                field.focus();
+            }
+            else if (++tries < 10)
+                timer = setTimeout(place, 16);
+        };
+        place();
+        return () => clearTimeout(timer);
+    });
+    if (!front)
+        return null;
+    const nameEntry = front.entries.find((entry) => entry.key === 'name');
+    const name = nameEntry ? source.slice(nameEntry.valueSpan.from, nameEntry.valueSpan.to).replace(/^(["'])([\s\S]*)\1$/, '$2') : '';
+    const add = () => {
+        const key = adding.trim();
+        if (!/^[A-Za-z0-9_-]+$/.test(key))
+            return;
+        setAdding('');
+        focusAfterDraw.set(view, key);
+        // A list starts inline and empty, so its first item is written as `key: [first]`.
+        write(view, addEntry(front, key, type === 'list' ? [] : emptyValue(type)));
+    };
+    return (_jsxs("div", { className: "edit-block edit-properties", ref: box, children: [_jsx("div", { className: "edit-block-controls", "data-ms-control": "", children: _jsx(Control, { label: words.source, onClick: () => reveal(view, 4), children: ICONS.source }) }), _jsx(Field, { className: "note-title edit-title", value: name, label: words.title, placeholder: strings.unnamedNote, onCommit: (value) => write(view, value.trim() === '' && nameEntry ? removeEntry(front, 'name') : setScalar(front, 'name', value.trim())) }), _jsx("div", { className: "properties-box", children: _jsxs("div", { className: "metadata-container", children: [front.entries
+                            .filter((entry) => entry.key !== 'name')
+                            .map((entry) => {
+                            const found = properties.entries.find((each) => each.key === entry.key) ?? { key: entry.key, shape: 'empty', values: [] };
+                            // A list with no items is empty to the page, which draws nothing; to the form it is still a list.
+                            const read = found.shape === 'empty' && entry.form !== 'scalar' ? { ...found, shape: 'list' } : found;
+                            const kind = typeOf(read.shape);
+                            // The property itself is handled at its key — its type, its removal, its name — and its value at the value.
+                            return (_jsxs("div", { className: "metadata-property edit-property", "data-property-type": kind === 'boolean' ? 'checkbox' : kind, children: [_jsxs("span", { className: "metadata-property-key", children: [_jsx(TypeChoice, { value: kind, label: `${words.propertyType}: ${entry.key}`, onChoose: (to) => {
+                                                    focusAfterDraw.set(view, entry.key);
+                                                    write(view, retype(front, entry.key, read, to));
+                                                } }), _jsx(Control, { label: `${words.removeProperty}: ${entry.key}`, onClick: () => write(view, removeEntry(front, entry.key)), children: ICONS.remove }), _jsx(Field, { value: entry.key, label: `${words.propertyKey}: ${entry.key}`, className: "edit-key", size: Math.max(4, entry.key.length + 1), onCommit: (next) => write(view, renameKey(front, entry.key, next.trim())) })] }), _jsx("span", { className: "metadata-property-value", children: _jsx(ValueField, { view: view, front: front, entry: read, written: source.slice(entry.valueSpan.from, entry.valueSpan.to) }) })] }, entry.key));
+                        }), _jsxs("div", { className: "metadata-property edit-property edit-property-new", "data-property-type": type === 'boolean' ? 'checkbox' : type, children: [_jsxs("span", { className: "metadata-property-key", children: [_jsx(TypeChoice, { value: type, label: `${words.propertyType}: ${words.addProperty}`, onChoose: setType }), _jsx("span", { className: "edit-control edit-key-spacer", "aria-hidden": "true", children: ICONS.remove }), _jsx("input", { className: "edit-field edit-key", size: Math.max(words.addProperty.length, adding.length + 1), "aria-label": words.addProperty, placeholder: words.addProperty, value: adding, "data-ms-control": "", onChange: (event) => setAdding(event.target.value.replace(/[^A-Za-z0-9_-]/g, '')), onKeyDown: (event) => event.key === 'Enter' && add() })] }), _jsx("span", { className: "metadata-property-value", children: _jsx(Control, { label: words.addProperty, onClick: add, children: ICONS.add }) })] })] }) })] }));
+}
+/** The control a note with no frontmatter shows above its body, which gives it one. */
+export function AddProperties({ view }) {
+    const { strings } = useHost();
+    return (_jsx("div", { className: "edit-add-properties", children: _jsxs("button", { type: "button", className: "edit-control edit-control-labelled", "data-ms-control": "", onMouseDown: (event) => event.preventDefault(), onClick: () => write(view, [{ from: 0, to: 0, insert: '---\n---\n' }]), children: [ICONS.add, _jsx("span", { children: strings.editor.addProperties })] }) }));
+}
+// ── Icons ────────────────────────────────────────────────────────────────────
+/** Lucide's outlines (ISC), drawn in the current colour at the size of the text. */
+function icon(...paths) {
+    return (_jsx("svg", { className: "edit-icon", viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: paths.map((d) => (_jsx("path", { d: d }, d))) }));
+}
+export const ICONS = {
+    add: icon('M5 12h14', 'M12 5v14'),
+    remove: icon('M18 6 6 18', 'm6 6 12 12'),
+    source: icon('m16 18 6-6-6-6', 'm8 6-6 6 6 6'),
+    rowAdd: icon('M3 12h18', 'M3 6h18', 'M12 15v6', 'M9 18h6'),
+    rowRemove: icon('M3 12h18', 'M3 6h18', 'M9 18h6'),
+    columnAdd: icon('M12 3v18', 'M6 3v18', 'M15 12h6', 'M18 9v6'),
+    columnRemove: icon('M12 3v18', 'M6 3v18', 'M15 12h6'),
+    alignLeft: icon('M21 6H3', 'M15 12H3', 'M17 18H3'),
+    alignCenter: icon('M21 6H3', 'M17 12H7', 'M19 18H5'),
+    alignRight: icon('M21 6H3', 'M21 12H9', 'M21 18H7'),
+    undo: icon('M9 14 4 9l5-5', 'M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11'),
+    redo: icon('m15 14 5-5-5-5', 'M20 9H9.5A5.5 5.5 0 0 0 4 14.5 5.5 5.5 0 0 0 9.5 20H13'),
+    bold: icon('M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'),
+    italic: icon('M19 4h-9', 'M14 20H5', 'M15 4 9 20'),
+    strikethrough: icon('M16 4H9a3 3 0 0 0-2.83 4', 'M14 12a4 4 0 0 1 0 8H6', 'M4 12h16'),
+    highlight: icon('m9 11-6 6v3h9l3-3', 'm22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4'),
+    code: icon('m18 16 4-4-4-4', 'm6 8-4 4 4 4', 'm14.5 4-5 16'),
+    link: icon('M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71', 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'),
+    wikilink: icon('M15 3h6v6', 'M10 14 21 3', 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'),
+    bulletList: icon('M3 12h.01', 'M3 18h.01', 'M3 6h.01', 'M8 12h13', 'M8 18h13', 'M8 6h13'),
+    orderedList: icon('M10 12h11', 'M10 18h11', 'M10 6h11', 'M4 10h2', 'M4 6h1v4', 'M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'),
+    taskList: icon('m3 17 2 2 4-4', 'm3 7 2 2 4-4', 'M13 6h8', 'M13 12h8', 'M13 18h8'),
+    quote: icon('M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z', 'M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'),
+    callout: icon('M12 16v-4', 'M12 8h.01', 'M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'),
+    table: icon('M12 3v18', 'M3 9h18', 'M3 15h18', 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'),
+    codeBlock: icon('M10 9.5 8 12l2 2.5', 'm14 9.5 2 2.5-2 2.5', 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'),
+    math: icon('M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2'),
+    diagram: icon('M5 3h4v4H5z', 'M15 17h4v4h-4z', 'M7 7v4a2 2 0 0 0 2 2h6a2 2 0 0 1 2 2v2'),
+    rule: icon('M5 12h14'),
+    footnote: icon('M4 7V4h16v3', 'M9 20h6', 'M12 4v16', 'M19 13v6', 'M17 15l2-2'),
+    comment: icon('M7.9 20A9 9 0 1 0 4 16.1L2 22Z'),
+    caret: icon('m6 9 6 6 6-6'),
+    cut: icon('M6 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6z', 'M6 15a3 3 0 1 0 0 6 3 3 0 0 0 0-6z', 'M20 4 8.12 15.88', 'M14.47 14.48 20 20', 'M8.12 8.12 12 12'),
+    copy: icon('M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z', 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'),
+    paste: icon('M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z', 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'),
+    attach: icon('m16 6-8.414 8.586a2 2 0 0 0 2.829 2.828l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'),
+    revert: icon('M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8', 'M3 3v5h5'),
+    saving: icon('M21 12a9 9 0 1 1-6.219-8.56'),
+    saved: icon('M20 6 9 17l-5-5'),
+    notSaved: icon('M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20z', 'M12 8v4', 'M12 16h.01'),
+    alert: icon('m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3', 'M12 9v4', 'M12 17h.01'),
+    edit: icon('M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z', 'm15 5 4 4'),
+    view: icon('M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'),
+};

package/dist/edit/commands.d.ts

@@ -0,0 +1,78 @@
+/**
+ * What the toolbar and the shortcuts of the editor do to a note (#52, #53, #57, #59).
+ *
+ * Each command is a change to the bytes around the selection and nothing else: a mark is the
+ * delimiters written on either side of what is selected, a heading the `#` at the start of its
+ * line, a list the marker of each line selected. The page the author sees follows from the text,
+ * because the editor draws the text.
+ */
+import { type EditorState, type TransactionSpec } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+export type Command = (view: EditorView) => boolean;
+/** A command from a function of the state, which answers `null` when it does not apply. */
+export declare function command(spec: (state: EditorState) => TransactionSpec | null): Command;
+/**
+ * Writes or takes away a pair of delimiters around each selection: `**` bold, `_` italic, `~~`
+ * struck, `==` marked, `` ` `` code. A selection that the delimiters already wrap, inside it or
+ * just outside it, loses them; an empty one gains the pair with the cursor between.
+ */
+export declare function toggleMark(state: EditorState, delimiter: string): TransactionSpec;
+/** Makes each selected line a heading of `level`, or a paragraph at 0; a quotation's markers stay. */
+export declare function setHeading(state: EditorState, level: number): TransactionSpec;
+/** The heading level of the line the cursor is on, or 0. */
+export declare function headingLevel(state: EditorState): number;
+export type ListKind = 'bullet' | 'ordered' | 'task';
+/**
+ * Makes each selected line an item of a list of `kind`, renumbering an ordered one from 1; when
+ * every line already is one, they become paragraphs again. Blank lines among them are left alone;
+ * a blank line alone starts a list.
+ */
+export declare function toggleList(state: EditorState, kind: ListKind): TransactionSpec;
+/** Quotes each selected line, or unquotes them when every one is quoted. */
+export declare function toggleQuote(state: EditorState): TransactionSpec;
+/**
+ * Inserts a block on lines of its own: in place of the current line when it is blank, else after
+ * the block the cursor is in, with a blank line on either side. `cursor` is where in the block the
+ * cursor goes, from its start; past its end, the cursor goes to the line after it.
+ */
+export declare function insertBlock(state: EditorState, block: string, cursor: number): TransactionSpec;
+/** A link around the selection, with its address selected to be typed; `[](https://)` with none. */
+export declare function insertLink(state: EditorState): TransactionSpec;
+/** A wikilink around the selection; with none, `[[]]` with the cursor between, where names are suggested. */
+export declare function insertWikilink(state: EditorState): TransactionSpec;
+/** A comment around the selection, or an empty one with the cursor inside (§7.6). */
+export declare function toggleComment(state: EditorState): TransactionSpec;
+/**
+ * A footnote: its reference at the cursor, numbered after the highest number the note uses, and
+ * its definition at the end of the note, where the cursor goes to write it (§7.12).
+ */
+export declare function insertFootnote(state: EditorState): TransactionSpec;
+/** Flips the task box whose `[` is at `at`, as `toggleTaskAt` does: `[x]` lower case on the way in. */
+export declare function toggleTaskBox(state: EditorState, at: number): TransactionSpec | null;
+/** The blocks the toolbar inserts, each with where the cursor goes in it. */
+export declare const BLOCKS: {
+    readonly callout: {
+        readonly text: "> [!note]\n> ";
+        readonly cursor: 12;
+    };
+    readonly table: {
+        readonly text: "|  |  |\n| --- | --- |\n|  |  |";
+        readonly cursor: 2;
+    };
+    readonly codeBlock: {
+        readonly text: "```\n\n```";
+        readonly cursor: 4;
+    };
+    readonly math: {
+        readonly text: "$$\n\n$$";
+        readonly cursor: 3;
+    };
+    readonly diagram: {
+        readonly text: "```mermaid\nflowchart LR\n  A --> B\n```";
+        readonly cursor: 23;
+    };
+    readonly rule: {
+        readonly text: "---";
+        readonly cursor: 4;
+    };
+};