@rathkit/rte-core 0.1.0-alpha.0 → 0.1.0-alpha.4

package/dist/dom/render.js

@@ -44,6 +44,13 @@ function renderInline(parent, content, options) {
                 parent.appendChild(gap);
             }
         }
+        else if (node.type === "note") {
+            const mark = document.createElement("sup");
+            mark.setAttribute("data-rte-note", node.id);
+            mark.setAttribute("contenteditable", "false");
+            mark.setAttribute("role", "doc-noteref");
+            parent.appendChild(mark);
+        }
         else if (node.type === "image") {
             const img = document.createElement("img");
             if (isRemote(node.src) && !options.loadRemoteImages)
@@ -104,10 +111,17 @@ function renderList(list, path, options) {
         el.setAttribute("start", String(list.start));
     if (list.style !== undefined)
         el.style.listStyleType = list.style;
+    if (list.notes) {
+        el.setAttribute("data-rk-notes", "");
+        el.setAttribute("role", "doc-endnotes");
+        el.setAttribute("aria-label", "Notes");
+    }
     list.items.forEach((item, i) => {
         const itemPath = [...path, i];
         const li = tag("li", itemPath);
-        if (item.content.length === 0 && item.sublists.length > 0)
+        if (list.notes && item.id)
+            li.setAttribute("data-rk-note-id", item.id);
+        if (item.content.length === 0 && (item.children[0]?.type === "ul" || item.children[0]?.type === "ol"))
             li.style.listStyleType = "none";
         if (item.checked !== undefined) {
             li.style.listStyleType = "none";
@@ -121,7 +135,7 @@ function renderList(list, path, options) {
             li.appendChild(box);
         }
         renderInline(li, item.content, options);
-        item.sublists.forEach((sub, k) => li.appendChild(renderList(sub, [...itemPath, k], options)));
+        item.children.forEach((child, k) => li.appendChild(renderBlock(child, [...itemPath, k], options)));
         el.appendChild(li);
     });
     return el;
@@ -281,17 +295,14 @@ export function renderDoc(doc, root, options = { loadRemoteImages: false }, cach
     });
     cache.dirty.clear();
     cache.claimed.clear();
-    const keep = new Set(wanted);
-    for (const node of [...root.childNodes])
-        if (!keep.has(node))
-            root.removeChild(node);
-    let cursor = root.firstChild;
-    for (const el of wanted) {
-        if (cursor === el)
-            cursor = cursor.nextSibling;
-        else
-            root.insertBefore(el, cursor);
-    }
+    reconcile(root, wanted);
+    root.querySelectorAll("sup[data-rte-note]").forEach((mark, i) => {
+        const n = String(i + 1);
+        if (mark.textContent !== n) {
+            mark.textContent = n;
+            mark.setAttribute("aria-label", `Footnote ${n}`);
+        }
+    });
 }
 function* inlineItems(container) {
     const stack = [[...container.childNodes].reverse()];
@@ -307,7 +318,7 @@ function* inlineItems(container) {
         else if (node instanceof Element) {
             if (node.hasAttribute("data-rte-ph") || node.hasAttribute("data-rte-check") || node.hasAttribute("data-rte-caption") || BLOCK_TAGS.has(node.tagName))
                 continue;
-            if (node.tagName === "BR" || node.tagName === "IMG")
+            if (node.tagName === "BR" || node.tagName === "IMG" || node.hasAttribute("data-rte-note"))
                 yield node;
             else
                 stack.push([...node.childNodes].reverse());

package/dist/dom/view.d.ts

@@ -45,9 +45,8 @@ export declare class Editor {
     /** Notices changes to the page that the editor did not make, so the block they touched is drawn again from the model. */
     private readonly observer;
     private readonly cleanups;
-    private readonly cellMarks;
-    private readonly imageSelection;
-    private readonly tableGrips;
+    private readonly changeListeners;
+    private readonly viewHost;
     constructor(options: EditorOptions);
     get doc(): Doc;
     get selection(): Selection;
@@ -69,6 +68,7 @@ export declare class Editor {
     subscribe: Engine["subscribe"];
     select: Engine["select"];
     /** Adds a plugin. Returns a function that removes it. */
+    /** Adds a plugin, with its page-facing part if it has one. Returns what takes both away again. */
     use: Engine["use"];
     /** The document as HTML. `separator` goes between blocks (a newline makes it readable). */
     getHtml(separator?: string): string;
@@ -124,6 +124,8 @@ export declare class Editor {
      */
     private deleteVisualLine;
     private onPaste;
+    /** What copy, cut and drag write: the model's own HTML and text, then whatever formats plugins add. */
+    private copyFormats;
     /** Copy and cut write the model's own HTML and text, not the page's markup. */
     private onCopy;
     private onDragStart;

package/dist/dom/view.js

@@ -1,15 +1,13 @@
 import { createEngine } from "../core.js";
 import { caret, clampPos, deleteBackward, deleteForward, deleteSelection, deleteToEdge, deleteWord, extractSelection, insertBlocks, insertLineBreak, insertText, isCollapsed, moveSelection, selectedText, splitBlock, transposeChars, } from "../edit.js";
 import { exportHtml } from "../export.js";
+import { ops } from "../ops.js";
 import { importBlocks, importHtml } from "../import.js";
 import { inlineLength } from "../model.js";
 import { pasteBlocks } from "../paste.js";
 import { cellChain, getContent, setContent } from "../path.js";
 import { tableFromText } from "../tablefill.js";
 import { imageSelection } from "../imageselect.js";
-import { ImageSelection } from "./imageview.js";
-import { TableGrips } from "./tablegrips.js";
-import { CellMarks, installColumnResize } from "./tableview.js";
 import { containerAt, createRenderCache, domFromPos, posFromDom, renderDoc } from "./render.js";
 const INPUT_COMMANDS = {
     formatSubscript: ["format.subscript"], formatSuperscript: ["format.superscript"],
@@ -43,9 +41,8 @@ export class Editor {
         }
     });
     cleanups = [];
-    cellMarks;
-    imageSelection;
-    tableGrips;
+    changeListeners = new Set();
+    viewHost;
     constructor(options) {
         this.element = options.element;
         this.loadRemoteImages = options.loadRemoteImages ?? false;
@@ -57,14 +54,17 @@ export class Editor {
             ...(options.maxLength !== undefined ? { maxLength: options.maxLength } : {}),
             ...(options.onMaxLength ? { onMaxLength: options.onMaxLength } : {}),
         });
-        this.cellMarks = new CellMarks(this.element, this.engine, () => this.observer.takeRecords());
-        this.imageSelection = new ImageSelection(this.element, this.engine, () => this.observer.takeRecords());
-        this.cleanups.push(() => this.imageSelection.destroy());
-        this.tableGrips = new TableGrips(this.element, this.engine);
-        this.cleanups.push(() => this.tableGrips.destroy());
+        this.viewHost = {
+            element: this.element, engine: this.engine, ops,
+            listen: (target, type, handler) => this.listen(target, type, handler),
+            quiet: () => { this.observer.takeRecords(); },
+            onChange: (listener) => { this.changeListeners.add(listener); return () => this.changeListeners.delete(listener); },
+            posFromDom: (node, offset) => posFromDom(this.element, node, offset),
+            domFromPos: (pos) => domFromPos(this.element, pos),
+        };
         this.engine.pasteHandlers.push(...(options.pasteHandlers ?? []));
         for (const plugin of options.plugins ?? [])
-            this.engine.use(plugin);
+            this.use(plugin);
         this.engine.setDocument(importHtml(options.html ?? "", this.engine.importOptions));
         this.element.setAttribute("contenteditable", this.engine.readOnly ? "false" : "true");
         this.element.setAttribute("role", "textbox");
@@ -82,14 +82,10 @@ export class Editor {
                 this.writeSelection();
             const focusMoved = snapshot.focused !== wasFocused;
             wasFocused = snapshot.focused;
-            if (change.docChanged || change.selectionChanged) {
-                this.cellMarks.update();
-                this.imageSelection.update();
-            }
             if (change.docChanged || change.selectionChanged || focusMoved)
-                this.tableGrips.update();
+                for (const listener of [...this.changeListeners])
+                    listener({ ...change, focusMoved });
         }));
-        installColumnResize(this.element, this.engine, (target, type, handler) => this.listen(target, type, handler), () => this.observer.takeRecords());
         this.listen(this.element, "focusin", () => this.engine.setFocused(true));
         this.listen(this.element, "focusout", () => this.engine.setFocused(false));
         this.listen(this.element, "beforeinput", (e) => this.onBeforeInput(e));
@@ -140,7 +136,12 @@ export class Editor {
     get snapshot() { return this.engine.snapshot; }
     subscribe = (listener) => this.engine.subscribe(listener);
     select = (selector, onChange, equals) => this.engine.select(selector, onChange, equals);
-    use = (plugin) => this.engine.use(plugin);
+    use = (plugin) => {
+        const remove = this.engine.use(plugin);
+        const stop = plugin.view?.(this.viewHost);
+        return () => { if (stop)
+            stop(); remove(); };
+    };
     getHtml(separator = "") { return exportHtml(this.engine.document, separator); }
     remoteImages() {
         const found = [];
@@ -494,13 +495,30 @@ export class Editor {
             types: [...clipboard.types],
         });
     }
+    copyFormats() {
+        const blocks = extractSelection(this.engine.document, this.engine.selection);
+        const formats = { "text/html": exportHtml({ blocks }), "text/plain": selectedText(this.engine.document, this.engine.selection) };
+        for (const formatter of this.engine.copyFormatters) {
+            let added;
+            try {
+                added = formatter(blocks);
+            }
+            catch (error) {
+                this.engine.warn(`A copy formatter failed: ${String(error)}`);
+            }
+            for (const [type, value] of Object.entries(added ?? {}))
+                if (/^[a-z]+\/[a-z0-9.+-]+$/i.test(type) && typeof value === "string")
+                    formats[type] = value;
+        }
+        return formats;
+    }
     onCopy(event, cut) {
         this.readSelection();
         if (isCollapsed(this.engine.selection) || !event.clipboardData)
             return;
         event.preventDefault();
-        event.clipboardData.setData("text/html", exportHtml({ blocks: extractSelection(this.engine.document, this.engine.selection) }));
-        event.clipboardData.setData("text/plain", selectedText(this.engine.document, this.engine.selection));
+        for (const [type, value] of Object.entries(this.copyFormats()))
+            event.clipboardData.setData(type, value);
         if (cut && !this.engine.readOnly)
             this.apply("cut", deleteSelection);
     }
@@ -515,8 +533,8 @@ export class Editor {
             this.readSelection();
         if (isCollapsed(this.engine.selection) || !event.dataTransfer)
             return;
-        event.dataTransfer.setData("text/html", exportHtml({ blocks: extractSelection(this.engine.document, this.engine.selection) }));
-        event.dataTransfer.setData("text/plain", selectedText(this.engine.document, this.engine.selection));
+        for (const [type, value] of Object.entries(this.copyFormats()))
+            event.dataTransfer.setData(type, value);
         event.dataTransfer.effectAllowed = this.engine.readOnly ? "copy" : "copyMove";
         this.dragSource = this.engine.selection;
     }

package/dist/edit.js

@@ -1,6 +1,6 @@
 import { inlineLength, inlineText, normalizeInline, } from "./model.js";
 import { fillTable } from "./tablefill.js";
-import { blockContainers, caret, cellChain, clampPos, comparePath, containerPaths, fixup, getContent, hasContainer, inBlockList, isCollapsed, kindAt, mapBlockList, mapListOf, pathKey, removeEntry, sameCells, setContent, } from "./path.js";
+import { asChildren, blockContainers, caret, cellChain, clampPos, comparePath, containerPaths, fixup, getContent, hasContainer, inBlockList, isCollapsed, kindAt, mapBlockList, mapListOf, pathKey, removeEntry, sameCells, setContent, } from "./path.js";
 export { caret, clampPos, isCollapsed };
 export function startOf(doc) {
     return { path: containerPaths(doc)[0] ?? [0], offset: 0 };
@@ -233,6 +233,9 @@ function joinWithPrevious(doc, into, from) {
     const intoKind = kindAt(doc, into);
     const fromKind = kindAt(doc, from.path);
     const joinable = (k) => k === "p" || k === "h" || k === "li" || k === "dt" || k === "dd";
+    if ((!joinable(intoKind) || !joinable(fromKind)) && inlineLength(getContent(doc, from.path)) === 0 && (fromKind === "p" || fromKind === "h" || fromKind === "pre") && intoKind !== undefined) {
+        return { doc: removeContainer(doc, from.path), selection: caret({ path: into, offset: inlineLength(getContent(doc, into)) }) };
+    }
     if (!joinable(intoKind) || !joinable(fromKind))
         return { doc, selection: caret(from) };
     const head = getContent(doc, into);
@@ -463,8 +466,8 @@ export function extractSelection(doc, sel) {
         const items = list.items.flatMap((item) => {
             const ordinal = n++;
             const content = inRange(ordinal) ? cut(item.content, ordinal) : [];
-            const sublists = item.sublists.map(cropList).filter((l) => l !== undefined);
-            return inRange(ordinal) || sublists.length > 0 ? [{ content, sublists }] : [];
+            const children = asChildren(cropBlocks(item.children));
+            return inRange(ordinal) || children.length > 0 ? [{ content, children, ...(item.checked !== undefined ? { checked: item.checked } : {}), ...(item.id !== undefined ? { id: item.id } : {}) }] : [];
         });
         return items.length > 0 ? { ...list, items } : undefined;
     };

package/dist/engine.d.ts

@@ -7,7 +7,7 @@ import { type EditResult, type Selection } from "./path.ts";
 import type { ImportOptions } from "./import.ts";
 import { type Counts } from "./stats.ts";
 import { UiRegistry } from "./ui.ts";
-import { type FileHandler, type PasteTransform, type Plugin } from "./plugin.ts";
+import { type CopyFormatter, type FileHandler, type Normalizer, type PasteTransform, type Plugin } from "./plugin.ts";
 export interface EditorSnapshot {
     /** Goes up on every change to the document, selection, read-only or focus state. */
     readonly version: number;
@@ -61,6 +61,10 @@ export declare class Engine {
     private readonly textTriggers;
     /** Plugins that change pasted blocks before they go in. */
     readonly pasteTransforms: PasteTransform[];
+    /** Plugins that add formats to what copy, cut and drag write. */
+    readonly copyFormatters: CopyFormatter[];
+    /** Plugins that keep the document consistent after every edit (footnotes keep their notes with their references). */
+    readonly normalizers: Normalizer[];
     /** Plugins that turn pasted and dropped files into blocks. */
     readonly fileHandlers: FileHandler[];
     /** How HTML is imported here: what plugins have added (an SVG cleaner, recognizers). Pass it to the importer. */
@@ -117,6 +121,8 @@ export declare class Engine {
      * `kind` ("type", "delete") share one step. False when nothing changed, or when the editor is read-only.
      */
     apply(kind: string, op: (doc: Doc, sel: Selection) => EditResult): boolean;
+    /** Lets the normalizers put right what an edit left, so the repair is part of the same history step. */
+    private settle;
     /** Sets the selection without making a history step. Nothing happens if it is the selection already. */
     setSelection(selection: Selection): void;
     /** Keeps a plugin's own state with the editor, so commands and interfaces read it from the snapshot. Changes the snapshot; not an undo step. */

package/dist/engine.js

@@ -17,6 +17,8 @@ export class Engine {
     behaviors = {};
     textTriggers = [];
     pasteTransforms = [];
+    copyFormatters = [];
+    normalizers = [];
     fileHandlers = [];
     importOptions = { recognizers: [] };
     doc;
@@ -123,7 +125,7 @@ export class Engine {
             return false;
         this.refresh();
         const before = { doc: this.doc, selection: this.sel };
-        const result = op(this.doc, this.sel);
+        const result = this.settle(op(this.doc, this.sel));
         if (result.doc === this.doc && sameSelection(result.selection, this.sel))
             return false;
         const docChanged = result.doc !== this.doc;
@@ -149,6 +151,9 @@ export class Engine {
         this.commit({ docChanged, selectionChanged: !sameSelection(before.selection, this.sel) });
         return true;
     }
+    settle(result) {
+        return result.doc === this.doc ? result : this.normalizers.reduce((r, normalize) => normalize(r.doc, r.selection), result);
+    }
     setSelection(selection) {
         if (sameSelection(selection, this.sel))
             return;
@@ -184,8 +189,9 @@ export class Engine {
         this.commit({ docChanged: false, selectionChanged: false });
     }
     setDocument(doc, selection) {
-        this.doc = doc;
-        this.sel = selection ?? caret(startOf(doc));
+        const settled = this.settle({ doc, selection: selection ?? caret(startOf(doc)) });
+        this.doc = settled.doc;
+        this.sel = settled.selection;
         this.undoStack = [];
         this.redoStack = [];
         this.lastKind = "";
@@ -289,6 +295,11 @@ export class Engine {
                     this.importOptions.recognizers = this.importOptions.recognizers.filter((r) => !added.includes(r));
                 });
             },
+            normalize: (normalizer) => {
+                this.normalizers.push(normalizer);
+                undo.push(() => { const i = this.normalizers.indexOf(normalizer); if (i !== -1)
+                    this.normalizers.splice(i, 1); });
+            },
             pasteTransform: (transform) => {
                 this.pasteTransforms.push(transform);
                 undo.push(() => { const i = this.pasteTransforms.indexOf(transform); if (i !== -1)
@@ -300,6 +311,11 @@ export class Engine {
                 undo.push(() => { const i = this.fileHandlers.indexOf(handler); if (i !== -1)
                     this.fileHandlers.splice(i, 1); });
             },
+            copyFormat: (formatter) => {
+                this.copyFormatters.push(formatter);
+                undo.push(() => { const i = this.copyFormatters.indexOf(formatter); if (i !== -1)
+                    this.copyFormatters.splice(i, 1); });
+            },
             pasteHandler: (handler) => {
                 this.pasteHandlers.push(handler);
                 undo.push(() => { const i = this.pasteHandlers.indexOf(handler); if (i !== -1)

package/dist/export.d.ts

@@ -1,4 +1,4 @@
-import type { Block, Doc, Inline } from "./model.ts";
+import { type Block, type Doc, type Inline } from "./model.ts";
 export declare function exportInline(content: readonly Inline[]): string;
 export declare function exportBlock(block: Block): string;
-export declare const exportHtml: (doc: Doc, separator?: string) => string;
+export declare function exportHtml(doc: Doc, separator?: string): string;

package/dist/export.js

@@ -1,5 +1,7 @@
 import { escapeAttribute, escapeText } from "./html/entities.js";
 import { lineCss, SIDES } from "./cellborder.js";
+import { noteIds } from "./notes.js";
+import { DEFAULT_MARKER } from "./model.js";
 const MARK_ORDER = ["link", "bold", "italic", "underline", "strike", "code", "sup", "sub", "color", "background"];
 const TAGS = { bold: "strong", italic: "em", underline: "u", strike: "s", code: "code", sup: "sup", sub: "sub" };
 function openClose(mark) {
@@ -28,11 +30,14 @@ function exportImage(node, placed) {
         + `${node.width !== undefined ? ` width="${node.width}"` : ""}${node.height !== undefined ? ` height="${node.height}"` : ""}`
         + `${placed && node.align ? ` style="${IMAGE_ALIGN_STYLE[node.align]}"` : ""}${placed && node.caption ? ` data-caption="${escapeAttribute(node.caption)}"` : ""}>`;
 }
+let numbers = [];
 export function exportInline(content) {
     let out = "";
     content.forEach((node, i) => {
         if (node.type === "br")
             out += "<br>";
+        else if (node.type === "note")
+            out += `<sup data-note="${node.id}"><a href="#fn-${node.id}" id="fnref-${node.id}" role="doc-noteref">${numbers.indexOf(node.id) + 1 || ""}</a></sup>`;
         else if (node.type === "image")
             out += exportImage(node, true);
         else {
@@ -52,12 +57,11 @@ const blockStyle = (block) => {
     return parts.length > 0 ? ` style="${parts.join("; ")};"` : "";
 };
 const dirAttr = (dir) => (dir ? ` dir="${dir}"` : "");
-const DEFAULT_MARKER = (type, depth) => (type === "ol" ? "decimal" : ["disc", "circle", "square"][Math.min(depth, 2)]);
 function exportList(list, depth) {
     const style = list.style !== undefined && list.style !== DEFAULT_MARKER(list.type, depth) ? ` style="list-style-type: ${list.style};"` : "";
     const start = list.type === "ol" && list.start !== undefined ? ` start="${list.start}"` : "";
     const items = list.items.map((item) => {
-        const noMarker = item.checked !== undefined || (item.content.length === 0 && item.sublists.length > 0);
+        const noMarker = item.checked !== undefined || (item.content.length === 0 && (item.children[0]?.type === "ul" || item.children[0]?.type === "ol"));
         const box = item.checked === undefined ? "" : `<input type="checkbox" disabled${item.checked ? " checked" : ""}> `;
         const paragraphs = [[]];
         for (const node of item.content) {
@@ -67,9 +71,12 @@ function exportList(list, depth) {
                 paragraphs[paragraphs.length - 1].push(node);
         }
         const text = paragraphs.length === 1 ? exportInline(item.content) : paragraphs.map((part, i) => `<p>${i === 0 ? box : ""}${exportInline(part)}</p>`).join("");
-        return `<li${noMarker ? ' style="list-style-type: none;"' : ""}>${paragraphs.length === 1 ? box : ""}${text}${item.sublists.map((sub) => exportList(sub, depth + 1)).join("")}</li>`;
-    }).join("");
-    return `<${list.type}${start}${style}>${items}</${list.type}>`;
+        const inner = `${paragraphs.length === 1 ? box : ""}${text}${item.children.map((child) => (child.type === "ul" || child.type === "ol" ? exportList(child, depth + 1) : exportBlock(child))).join("")}`;
+        return list.notes ? inner : `<li${noMarker ? ' style="list-style-type: none;"' : ""}>${inner}</li>`;
+    });
+    if (list.notes)
+        return `<section class="footnotes" role="doc-endnotes"><ol>${list.items.map((item, i) => `<li id="fn-${item.id}" data-note="${item.id}">${items[i]} <a href="#fnref-${item.id}" role="doc-backlink">\u21A9\uFE0E</a></li>`).join("")}</ol></section>`;
+    return `<${list.type}${start}${style}>${items.join("")}</${list.type}>`;
 }
 function cellStyle(cell) {
     const parts = [];
@@ -116,4 +123,13 @@ export function exportBlock(block) {
         case "hr": return "<hr>";
     }
 }
-export const exportHtml = (doc, separator = "") => doc.blocks.map(exportBlock).join(separator);
+export function exportHtml(doc, separator = "") {
+    const outer = numbers;
+    numbers = noteIds(doc);
+    try {
+        return doc.blocks.map(exportBlock).join(separator);
+    }
+    finally {
+        numbers = outer;
+    }
+}

package/dist/footnotes/index.d.ts

@@ -0,0 +1,2 @@
+export { footnotes, type FootnotesOptions } from "./plugin.ts";
+export { createReconciler } from "./reconcile.ts";

package/dist/footnotes/index.js

@@ -0,0 +1,2 @@
+export { footnotes } from "./plugin.js";
+export { createReconciler } from "./reconcile.js";

package/dist/footnotes/plugin.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from "../plugin.ts";
+export interface FootnotesOptions {
+    /** Ctrl+Alt+F inserts a note, Ctrl+Alt+Shift+F jumps between a reference and its note. Default on. */
+    readonly keys?: boolean;
+}
+export declare function footnotes(options?: FootnotesOptions): Plugin;

package/dist/footnotes/plugin.js

@@ -0,0 +1,130 @@
+import { createReconciler } from "./reconcile.js";
+function referenceAt(host, doc, id) {
+    const { ops } = host;
+    for (const path of ops.containerPaths(doc)) {
+        if (ops.isNotes(doc.blocks[path[0]]))
+            continue;
+        let offset = 0;
+        for (const node of ops.getContent(doc, path)) {
+            offset += node.type === "text" ? node.text.length : 1;
+            if (node.type === "note" && node.id === id)
+                return { path, offset };
+        }
+    }
+    return undefined;
+}
+function nearby(content, offset) {
+    let at = 0;
+    let found;
+    for (const node of content) {
+        const next = at + (node.type === "text" ? node.text.length : 1);
+        if (node.type === "note" && (next === offset || at === offset))
+            found = found ?? node.id;
+        at = next;
+    }
+    return found;
+}
+export function footnotes(options = {}) {
+    return {
+        id: "rathkit.footnotes",
+        api: "1",
+        setup(host) {
+            const { ops } = host;
+            const reconcile = createReconciler(ops);
+            host.normalize(reconcile);
+            const noteOf = (doc, path) => {
+                const block = doc.blocks[path[0]];
+                return block && ops.isNotes(block) && path.length >= 2 ? block.items[path[1]]?.id : undefined;
+            };
+            host.command({
+                name: "footnote.insert", label: "Footnote",
+                run: (ctx) => ctx.apply("footnote", (doc, sel) => {
+                    const here = ops.isCollapsed(sel) ? sel.focus.path : sel.anchor.path;
+                    if (ops.kindAt(doc, here) === "pre" || noteOf(doc, here) !== undefined || ops.isNotes(doc.blocks[here[0]]))
+                        return { doc, selection: sel };
+                    const cleared = ops.deleteSelection(doc, sel);
+                    const pos = cleared.selection.anchor;
+                    if (ops.kindAt(cleared.doc, pos.path) === "pre")
+                        return { doc, selection: sel };
+                    const used = new Set(ops.noteIds(cleared.doc));
+                    let n = used.size + 1;
+                    while (used.has(`n${n}`))
+                        n++;
+                    const id = `n${n}`;
+                    const content = ops.getContent(cleared.doc, pos.path);
+                    const next = ops.normalizeInline([...ops.sliceInline(content, 0, pos.offset), { type: "note", id }, ...ops.sliceInline(content, pos.offset)]);
+                    const placed = reconcile(ops.setContent(cleared.doc, pos.path, next), ops.caret({ path: pos.path, offset: pos.offset + 1 }));
+                    const block = placed.doc.blocks.findIndex((b) => ops.isNotes(b));
+                    const list = placed.doc.blocks[block];
+                    const index = list && ops.isNotes(list) ? list.items.findIndex((item) => item.id === id) : -1;
+                    return index === -1 ? placed : { doc: placed.doc, selection: ops.caret({ path: [block, index], offset: 0 }) };
+                }),
+                state: (snap) => {
+                    const path = snap.selection.focus.path;
+                    return { enabled: ops.kindAt(snap.doc, path) !== "pre" && noteOf(snap.doc, path) === undefined };
+                },
+            });
+            host.command({
+                name: "footnote.goto", label: "Go to footnote",
+                mutates: false,
+                run: (ctx) => {
+                    const snap = ctx.snapshot;
+                    const { path, offset } = snap.selection.focus;
+                    const inNote = noteOf(snap.doc, path);
+                    const id = inNote ?? nearby(ops.getContent(snap.doc, path), offset);
+                    if (id === undefined)
+                        return false;
+                    const target = inNote !== undefined ? referenceAt(host, snap.doc, id) : (() => {
+                        const b = snap.doc.blocks.findIndex((block) => ops.isNotes(block));
+                        const list = snap.doc.blocks[b];
+                        const i = list && ops.isNotes(list) ? list.items.findIndex((item) => item.id === id) : -1;
+                        return i === -1 ? undefined : { path: [b, i], offset: 0 };
+                    })();
+                    if (!target)
+                        return false;
+                    const there = ops.caret({ path: target.path, offset: target.offset });
+                    return ctx.apply("footnote-goto", (doc) => ({ doc, selection: there }));
+                },
+                state: (snap) => {
+                    const { path, offset } = snap.selection.focus;
+                    return { enabled: noteOf(snap.doc, path) !== undefined || nearby(ops.getContent(snap.doc, path), offset) !== undefined };
+                },
+            });
+            host.copyFormat((blocks) => {
+                const wanted = ops.noteIds({ blocks });
+                const list = host.editor.snapshot.doc.blocks.find((b) => ops.isNotes(b));
+                if (wanted.length === 0 || !list || !ops.isNotes(list) || blocks.some((b) => ops.isNotes(b)))
+                    return undefined;
+                const items = wanted.flatMap((id) => list.items.filter((item) => item.id === id));
+                return items.length === 0 ? undefined : { "text/html": ops.exportHtml({ blocks: [...blocks, { ...list, items }] }) };
+            });
+            host.pasteTransform((blocks) => {
+                const pasted = blocks.flatMap((b) => (ops.isNotes(b) ? b.items.map((item) => item.id ?? "") : []));
+                const taken = new Set([...ops.noteIds(host.editor.snapshot.doc), ...ops.noteIds({ blocks })]);
+                const rename = new Map();
+                let n = taken.size;
+                for (const id of pasted) {
+                    if (id === "" || rename.has(id) || !ops.noteIds(host.editor.snapshot.doc).includes(id))
+                        continue;
+                    while (taken.has(`n${++n}`)) { }
+                    taken.add(`n${n}`);
+                    rename.set(id, `n${n}`);
+                }
+                if (rename.size === 0)
+                    return blocks;
+                let doc = { blocks: blocks.map((b) => (ops.isNotes(b) ? { ...b, items: b.items.map((item) => (item.id !== undefined && rename.has(item.id) ? { ...item, id: rename.get(item.id) } : item)) } : b)) };
+                for (const path of ops.containerPaths(doc)) {
+                    const content = ops.getContent(doc, path);
+                    if (content.some((node) => node.type === "note" && rename.has(node.id)))
+                        doc = ops.setContent(doc, path, content.map((node) => (node.type === "note" && rename.has(node.id) ? { type: "note", id: rename.get(node.id) } : node)));
+                }
+                return doc.blocks;
+            });
+            if (options.keys ?? true) {
+                host.keybinding({ key: "Mod-Alt-f", command: "footnote.insert" });
+                host.keybinding({ key: "Mod-Alt-Shift-f", command: "footnote.goto" });
+            }
+            host.ui("toolbar.main", { kind: "button", id: "footnote", command: "footnote.insert", icon: "footnote", group: "insert", order: 4 });
+        },
+    };
+}

package/dist/footnotes/reconcile.d.ts

@@ -0,0 +1,4 @@
+import type { Doc } from "../model.ts";
+import type { Ops } from "../ops.ts";
+import type { EditResult, Selection } from "../path.ts";
+export declare function createReconciler(ops: Ops): (doc: Doc, sel: Selection) => EditResult;