bookish-press 0.4.47 → 0.4.49

package/src/lib/components/editor/BookishEditor.svelte

@@ -1,1101 +0,0 @@
-<script lang="ts">
-    import BookishNode from '$lib/models/chapter/Node';
-    import ChapterNode from '$lib/models/chapter/ChapterNode';
-    import Parser from '$lib/models/chapter/Parser';
-    import LinkNode from '$lib/models/chapter/LinkNode';
-    import ParagraphNode from '$lib/models/chapter/ParagraphNode';
-    import TextNode from '$lib/models/chapter/TextNode';
-    import AtomNode from '$lib/models/chapter/AtomNode';
-    import FormatNode from '$lib/models/chapter/FormatNode';
-    import BlocksNode from '$lib/models/chapter/BlocksNode';
-    import ListNode from '$lib/models/chapter/ListNode';
-    import TableNode from '$lib/models/chapter/TableNode';
-    import MetadataNode from '$lib/models/chapter/MetadataNode';
-    import type RootNode from '$lib/models/chapter/RootNode';
-    import type Edit from '$lib/models/chapter/Edit';
-    import CodeNode from '$lib/models/chapter/CodeNode';
-    import BlockNode from '$lib/models/chapter/BlockNode';
-    import EmbedNode from '$lib/models/chapter/EmbedNode';
-    import ErrorNode from '$lib/models/chapter/ErrorNode';
-
-    import type Caret from '$lib/models/chapter/Caret';
-    import type { CaretRange } from '$lib/models/chapter/Caret';
-    import {
-        caretRangeToIndexRange,
-        indexRangeToCaretRange,
-    } from '$lib/models/chapter/Caret';
-    import type WhatsAroundTheCaret from './CaretContext';
-
-    import type Command from './Command';
-    import type Clipboard from './Clipboard';
-    import type UndoState from './UndoState';
-    import type CaretUtilities from './CaretUtilities';
-
-    import commands from './Commands';
-
-    import { afterUpdate, onMount, setContext } from 'svelte';
-    import type { PasteContent } from './CaretContext';
-    import { getCaret } from '../page/Contexts';
-    import CaretView from './CaretView.svelte';
-
-    const IDLE_TIME = 500;
-
-    export let text: string;
-    export let parser: (text: string) => RootNode;
-    export let save: (node: RootNode) => Promise<void> | void;
-    export let chapter: boolean;
-    export let autofocus: boolean = false;
-    export let component: ConstructorOfATypedSvelteComponent;
-    export let placeholder: string;
-    export let leasee: string | boolean;
-    export let lease: (lock: boolean) => Promise<boolean> | boolean;
-
-    let element: HTMLDivElement | null = null;
-
-    let caretRange: CaretRange | undefined = undefined;
-    let caretCoordinate: { x: number; y: number; height: number } | undefined =
-        undefined;
-    let lastInputTime = 0;
-    let keyboardIdle = true;
-    let editorFocused = false;
-    let undoStack: UndoState[] = [];
-    let undoPosition = -1;
-    let clipboard: Clipboard | undefined = undefined;
-    let ignoredInput = false;
-
-    let activeEditor = getCaret();
-
-    let editedNode: RootNode;
-    $: {
-        // Note: when the text changes externally, the caret will be lost. We either have
-        // to implement fancy operational transform revision control for collaborative editing
-        // or a basic chapter locking strategy to avoid data loss. I went with locking for maintenance simplicity,
-        // but it would be nice to implement operational transform in the future.
-        if (editedNode === undefined || editedNode.toBookdown() !== text) {
-            editedNode = parser(text);
-        }
-    }
-
-    $: locked = typeof leasee === 'string';
-
-    onMount(() => {
-        const caret = editedNode.getFirstCaret();
-        if (caret) caretRange = { start: caret, end: caret };
-
-        // Focus the editor on load.
-        if (element && autofocus === true) {
-            element.focus();
-        }
-
-        // Listen to selection changes
-        document.addEventListener('selectionchange', handleSelectionChange);
-
-        // Stop listening to selection changes
-        return () => {
-            document.removeEventListener(
-                'selectionchange',
-                handleSelectionChange
-            );
-        };
-    });
-
-    onMount(() => {
-        // When input happens, set a timer and then see if idle time has elapsed. If it has, track time since last keystroke to control caret blinking behavior.
-        const keystrokeTimer = setInterval(() => {
-            // Remember that we're idle so we can render things accordingly.
-            const isIdle = Date.now() - lastInputTime > IDLE_TIME;
-            if (isIdle) {
-                keyboardIdle = true;
-                ignoredInput = false;
-            }
-        }, IDLE_TIME);
-        return () => {
-            // Clear the timer if we're unmounting or re-rendering.
-            clearTimeout(keystrokeTimer);
-        };
-    });
-
-    // When the selection changes and is rendered, set the browser's selection to correspond. This helps with two things:
-    // 1) we can rely on the browser to render selections rather than rendering it ourselves.
-    // 2) We can measure the caret position, so we can render our own fancy one rather than relying on inconsistent cross browser behavior.
-    afterUpdate(() => {
-        if (!editorFocused) return;
-
-        // Measure the location of the selection using the browser's selection.
-        let docSelection = document.getSelection();
-        let newCaretPosition = undefined;
-        if (docSelection) {
-            if (caretRange) {
-                // Browsers don't render backwards ranges, so we sort this before measuring.
-                const sortedRange = caretRange;
-                let startNode = document.querySelector(
-                    `[data-nodeid='${sortedRange.start.node.nodeID}`
-                );
-                let endNode = document.querySelector(
-                    `[data-nodeid='${sortedRange.end.node.nodeID}`
-                );
-
-                // If we found both selected nodes and we have a reference to the DOM, update the
-                // browser's selection if necessary and measure it's position so we can draw our own caret.
-                if (startNode && endNode && element) {
-                    // If the current selection isn't different from the new one, then we don't do any of this.
-                    // This prevents an infinite loop when, for example, the user clicks, the browser selection changes,
-                    // and we update the caret range, which updates the browser selection, ad infinitum.
-                    let rangeChanged = true;
-                    let currentRange = undefined;
-                    if (docSelection.rangeCount > 0) {
-                        currentRange = docSelection.getRangeAt(0);
-                        // If our caret range is non-empty TextNodes at a particular index and equal to the browser's caret range, then nothing's changed, so we shouldn't update the selection.
-                        const startIsEqual =
-                            startNode.childNodes.length > 0 &&
-                            currentRange.startContainer ===
-                                startNode.childNodes[0] &&
-                            currentRange.startOffset ===
-                                sortedRange.start.index;
-                        const endIsEqual =
-                            endNode.childNodes.length > 0 &&
-                            currentRange.endContainer ===
-                                endNode.childNodes[0] &&
-                            currentRange.endOffset === sortedRange.end.index;
-                        if (startIsEqual && endIsEqual) rangeChanged = false;
-                    }
-
-                    // We always aim for the DOM text nodes inside of bookish-text, but when the text nodes are the empty string, React doesn't
-                    // render a DOM text node, and browsers often render an empty bounding box in this case. To measure the caret position,
-                    // we insert a zero-width space in the empty span, then remove it after measurement.
-                    // We only do this to the end node if it's different from the start node.
-                    // We leave them in there so that the "rangeChanged" guard below can track them.
-                    const emptyStart = startNode.childNodes.length === 0;
-                    const emptyEnd =
-                        startNode !== endNode &&
-                        endNode.childNodes.length === 0;
-                    if (emptyStart)
-                        startNode.appendChild(
-                            document.createTextNode('\ufeff')
-                        );
-                    if (emptyEnd)
-                        endNode.appendChild(document.createTextNode('\ufeff'));
-
-                    // If we're just after a new line, set the selection to the character after.
-                    const afterNewLine =
-                        sortedRange.start.node instanceof TextNode &&
-                        sortedRange.start.index > 0 &&
-                        sortedRange.start.node
-                            .getText()
-                            .charAt(sortedRange.start.index - 1) === '\n';
-
-                    // If the range has changed, set the selection so we can measure it's location.
-                    // We guard this to avoid triggering unnecessary selection change events that don't actually modify the selection.
-                    if (rangeChanged) {
-                        try {
-                            docSelection.setBaseAndExtent(
-                                startNode.childNodes[0],
-                                sortedRange.start.index,
-                                endNode.childNodes[0],
-                                sortedRange.end.index
-                            );
-                        } catch (e) {
-                            console.error(e);
-                            console.error(
-                                `Error setting caret range, trying to set to ${startNode.childNodes[0]}:${sortedRange.start.index} - ${endNode.childNodes[0]}:${sortedRange.end.index}`
-                            );
-                        }
-                        currentRange = docSelection.getRangeAt(0);
-                    }
-
-                    // Measure and remember caret position
-                    if (currentRange) {
-                        const rangeRect = currentRange.getBoundingClientRect();
-                        const textRect = startNode.getBoundingClientRect();
-                        const lineHeightString = window
-                            .getComputedStyle(startNode)
-                            .getPropertyValue('line-height');
-                        const lineHeight = lineHeightString.endsWith('px')
-                            ? parseInt(
-                                  lineHeightString.substring(
-                                      0,
-                                      lineHeightString.length - 2
-                                  )
-                              )
-                            : undefined;
-
-                        // Is the caret in relatively positioned ancestors above the editor? Undo their offsets.
-                        let caretAncestor: HTMLElement | null =
-                            startNode.closest('.bookish-editor');
-                        let relativeX = 0;
-                        let relativeY = 0;
-                        while (caretAncestor != null) {
-                            if (
-                                window.getComputedStyle(caretAncestor)
-                                    .position === 'relative'
-                            ) {
-                                relativeX += caretAncestor.offsetLeft;
-                                relativeY += caretAncestor.offsetTop;
-                            }
-                            caretAncestor = caretAncestor.parentElement;
-                        }
-
-                        // If we're after a new line, calculate the correct position, since selections don't actually render to the next line.
-                        const left = afterNewLine
-                            ? textRect.left
-                            : rangeRect.left;
-                        const top =
-                            afterNewLine && lineHeight
-                                ? rangeRect.top + lineHeight
-                                : rangeRect.top;
-                        const position = {
-                            x: left + window.scrollX - relativeX,
-                            y: top + window.scrollY - relativeY,
-                            height: rangeRect.height,
-                        };
-                        newCaretPosition = position;
-                    }
-                }
-            }
-            // If the range is empty, remove the browser's selection too.
-            else if (editorFocused) document.getSelection()?.empty();
-        }
-
-        // Save the new caret position so we render it.
-        caretCoordinate = newCaretPosition;
-    });
-
-    function rangeToCaret(domNode: Node, rangeIndex: number) {
-        // If it's a text node, find the closest TextNode parent
-        if (domNode.nodeType === Node.TEXT_NODE) {
-            let parent = domNode.parentNode;
-            // Keep looking up until we find the TextNode span with the node ID.
-            while (
-                parent &&
-                !(
-                    parent instanceof HTMLElement &&
-                    parent.classList.contains('bookish-text')
-                )
-            )
-                parent = parent.parentNode;
-            if (parent && parent.dataset.nodeid) {
-                const node = editedNode.getNode(
-                    parseInt(parent.dataset.nodeid)
-                );
-                if (node instanceof TextNode)
-                    // Account for the zero-width spaces that we insert in order to make selections possible on empty text nodes.
-                    return {
-                        node: node,
-                        index: Math.min(rangeIndex, node.getLength()),
-                    };
-            }
-        }
-        // If it's an element, see if it has a nodeID and handle it accordingly.
-        else if (
-            domNode.nodeType === Node.ELEMENT_NODE &&
-            domNode instanceof HTMLElement &&
-            domNode.dataset.nodeid
-        ) {
-            const node = editedNode.getNode(parseInt(domNode.dataset.nodeid));
-            // These assume that triple clicks on paragraphs in the browser choose text nodes for the selection start
-            // and spans or paragraph nodes for the end.
-            if (node instanceof ParagraphNode) {
-                const first = node.getFirstTextNode();
-                return { node: first, index: 0 };
-            } else if (node instanceof TextNode) {
-                return { node: node, index: 0 };
-            }
-        }
-
-        // Return nothing by default.
-        return undefined;
-    }
-
-    function handleSelectionChange() {
-        // Make sure we're showing the caret.
-        lastInputTime = Date.now();
-        keyboardIdle = false;
-
-        // Map the browser selection to our caret range model.
-        const selection = document.getSelection();
-
-        if (selection && selection.anchorNode && selection.focusNode) {
-            const start = rangeToCaret(
-                selection.anchorNode,
-                selection.anchorOffset
-            );
-            const end = rangeToCaret(
-                selection.focusNode,
-                selection.focusOffset
-            );
-            // If we found to text nodes, set the selection
-            if (start && end) {
-                caretRange = { start: start, end: end };
-            }
-        }
-    }
-
-    function getCaretCoordinate(
-        caret: Caret
-    ): { top: number; left: number; height: number } | undefined {
-        if (!(caret.node instanceof TextNode || caret.node instanceof AtomNode))
-            return undefined;
-        const domNode = document.querySelector(
-            `[data-nodeid='${caret.node.nodeID}`
-        );
-        // If we didn't find the node or there's no text node inside it, then there's no caret position.
-        // This happens temporarily before the useEffect above has a chance to insert zero-width non-breaking space.
-        if (domNode === null || domNode.childNodes.length === 0)
-            return undefined;
-        const range = document.createRange();
-        range.setStart(
-            domNode.childNodes.length === 0 ? domNode : domNode.childNodes[0],
-            domNode.childNodes.length === 0 ? 0 : caret.index
-        );
-        const characterRect = range.getBoundingClientRect();
-        if (characterRect.left > 0)
-            return {
-                top: characterRect.top,
-                left: characterRect.left,
-                height: characterRect.height,
-            };
-        const elementRect = domNode.getBoundingClientRect();
-        return {
-            top: elementRect.top,
-            left: elementRect.left,
-            height: elementRect.height,
-        };
-    }
-
-    function getCaretOnLine(caret: Caret, below: boolean): Caret {
-        if (caret.node instanceof TextNode || caret.node instanceof AtomNode) {
-            // Find the position of the current start node.
-            const startCoordinate = getCaretCoordinate(caret);
-            let candidate = editedNode.getAdjacentCaret(caret, below);
-            if (candidate === undefined) return caret;
-            let previousCandidate = undefined;
-            let previousCoordinate = undefined;
-            if (startCoordinate) {
-                while (
-                    candidate.node instanceof TextNode ||
-                    candidate.node instanceof AtomNode
-                ) {
-                    const candidateCoordinate = getCaretCoordinate(candidate);
-                    // Did we make it to the next line and the character before/after? If we're going down,
-                    // we're looking for a top that's below the bottom. If we're going up, we're looking for a bottom
-                    // that's below the top.
-                    if (candidateCoordinate) {
-                        const startTop = startCoordinate.top;
-                        const candidateTop = candidateCoordinate.top;
-                        const closerCandidate =
-                            previousCoordinate &&
-                            previousCandidate &&
-                            Math.abs(
-                                startCoordinate.left - previousCoordinate.left
-                            ) <
-                                Math.abs(
-                                    startCoordinate.left -
-                                        candidateCoordinate.left
-                                )
-                                ? previousCandidate
-                                : candidate;
-                        if (below) {
-                            // If this candidate is on the line below the start line, then return the last candidate on the line below the start line.
-                            if (
-                                previousCandidate &&
-                                previousCoordinate &&
-                                previousCoordinate.top >
-                                    startTop + startCoordinate.height &&
-                                candidateTop >
-                                    previousCoordinate.top +
-                                        previousCoordinate.height
-                            )
-                                return previousCandidate;
-                            // If this is just below the start position, stop and return the closer of the current and previous candidates.
-                            else if (
-                                candidateTop >
-                                    startTop + startCoordinate.height &&
-                                candidateCoordinate.left >= startCoordinate.left
-                            )
-                                return closerCandidate;
-                        } else {
-                            // If this candidate is on the live above the line above the start line, then return the last candidate on the line above the start line.
-                            if (
-                                previousCandidate &&
-                                previousCoordinate &&
-                                previousCoordinate.top +
-                                    previousCoordinate.height <
-                                    startTop &&
-                                candidateTop + candidateCoordinate.height <
-                                    previousCoordinate.top
-                            )
-                                return previousCandidate;
-                            // If this is just above the start position, stop and return the closer of the current and previous candidates.
-                            if (
-                                candidateTop + candidateCoordinate.height <
-                                    startTop &&
-                                candidateCoordinate.left <= startCoordinate.left
-                            )
-                                return closerCandidate;
-                        }
-                    }
-
-                    // Get the next candidate to consider.
-                    const nextCandidate: Caret | undefined =
-                        editedNode.getAdjacentCaret(candidate, below);
-                    if (nextCandidate === undefined) break;
-
-                    // If the caret didn't move, we stop searching, something is wrong.
-                    if (
-                        nextCandidate.node === candidate.node &&
-                        nextCandidate.index === candidate.index
-                    ) {
-                        break;
-                    }
-
-                    // Otherwise, we advance to the next candidate.
-                    previousCandidate = candidate;
-                    previousCoordinate = candidateCoordinate;
-                    candidate = nextCandidate;
-
-                    if (candidate === undefined) return caret;
-                }
-                return candidate;
-            }
-        }
-
-        // If we didn't find one, just return what we were given.
-        return caret;
-    }
-
-    function atParagraphStart(): boolean {
-        if (
-            caretRange === undefined ||
-            caretRange.start.node !== caretRange.end.node ||
-            caretRange.start.index !== caretRange.end.index ||
-            !(caretRange.start.node instanceof TextNode)
-        )
-            return false;
-
-        const firstCaret = caretRange.start.node
-            .getFormatRoot(editedNode)
-            ?.getFirstCaret();
-        return (
-            firstCaret !== undefined &&
-            firstCaret.node === caretRange.start.node &&
-            firstCaret.index === caretRange.start.index
-        );
-    }
-
-    function undo(): Edit {
-        // Grab the next state
-        let undoState = undoStack[undoPosition + 1];
-
-        // Restore the content of the chapter.
-        let node = parser(undoState.bookdown);
-
-        if (node === undefined || node instanceof ErrorNode) return;
-
-        // Restore the view
-        updateRoot(node);
-
-        // Save the undo.
-        save(node);
-
-        // Move the undo state down a position.
-        if (undoPosition < undoStack.length) undoPosition = undoPosition + 1;
-
-        // Return the original caret.
-        const range = indexRangeToCaretRange(node, undoState.range);
-        if (range === undefined) return;
-        return { root: node, range: range };
-    }
-
-    function redo(): Edit {
-        // Grab the next state
-        let undoState = undoStack[undoPosition - 1];
-
-        // Restore the content of the chapter.
-        let node = parser(undoState.bookdown);
-
-        if (node === undefined) return;
-
-        updateRoot(node);
-
-        // Move the undo state down a position.
-        if (undoPosition > 0) undoPosition = undoPosition - 1;
-
-        // Return the original caret.
-        const range = indexRangeToCaretRange(node, undoState.range);
-        if (range === undefined) return;
-        return { root: node, range: range };
-    }
-
-    function getCaretContext(): WhatsAroundTheCaret | undefined {
-        if (caretRange === undefined) return undefined;
-
-        // Determine whether the range contains a list
-        const nodes = editedNode.getNodes();
-        let inside = false;
-        let includesList = false;
-        nodes.forEach((n) => {
-            if (caretRange === undefined) return;
-            if (n === caretRange.start.node) inside = true;
-            if (
-                inside &&
-                n.getClosestParentMatching(
-                    editedNode,
-                    (p) => p instanceof ListNode
-                ) !== undefined
-            )
-                includesList = true;
-            if (n === caretRange.end.node) inside = false;
-        });
-
-        const parents = editedNode
-            .getParentsOf(caretRange.start.node)
-            ?.reverse() as BookishNode[];
-
-        return {
-            // We make a new range so that setCaretRange always causes a re-render
-            chapter: chapter,
-            range: { start: caretRange.start, end: caretRange.end },
-            start: caretRange.start,
-            end: caretRange.end,
-            isSelection:
-                caretRange.start.node !== caretRange.end.node ||
-                caretRange.start.index !== caretRange.end.index,
-            root: editedNode,
-            blocks: parents?.find((n) => n instanceof BlocksNode) as BlocksNode,
-            paragraph: parents?.find(
-                (n) => n instanceof ParagraphNode
-            ) as ParagraphNode,
-            block: parents?.find((n) => n instanceof BlockNode) as BlockNode,
-            code: parents?.find((n) => n instanceof CodeNode) as CodeNode,
-            list: parents?.find((n) => n instanceof ListNode) as ListNode,
-            atom: parents?.find((n) => n instanceof AtomNode) as AtomNode<any>,
-            meta: parents?.find(
-                (n) => n instanceof MetadataNode
-            ) as MetadataNode<FormatNode>,
-            includesList: includesList,
-            table: parents?.find((n) => n instanceof TableNode) as TableNode,
-            format:
-                caretRange.end.node instanceof TextNode ||
-                caretRange.end.node instanceof AtomNode
-                    ? caretRange.end.node.getFormatRoot(editedNode)
-                    : undefined,
-            startIsText: caretRange.start.node instanceof TextNode,
-            endIsText: caretRange.end.node instanceof TextNode,
-            startIsTextOrAtom:
-                caretRange.start.node instanceof TextNode ||
-                caretRange.start.node instanceof AtomNode ||
-                caretRange.start.node instanceof EmbedNode,
-            endIsTextOrAtom:
-                caretRange.end.node instanceof TextNode ||
-                caretRange.end.node instanceof AtomNode ||
-                caretRange.start.node instanceof EmbedNode,
-            atParagraphStart: atParagraphStart(),
-            undoStack: undoStack,
-            undoPosition: undoPosition,
-            undo: undo,
-            redo: redo,
-            clipboard: clipboard,
-            handleCopy: handleCopy,
-            handlePaste: handlePaste,
-        };
-    }
-
-    function getUtilities(): CaretUtilities {
-        return {
-            getCaretOnLine: getCaretOnLine,
-        };
-    }
-
-    function handlePress(event: KeyboardEvent) {
-        handleKey(event, true);
-    }
-
-    function handleKey(event: KeyboardEvent, press: boolean = false) {
-        // Only handle keystrokes when this is focused.
-        // Otherwise, we let any focusable elements in this editor handle them.
-        if (!editorFocused) return;
-
-        // Remember the time of this keystroke.
-        lastInputTime = Date.now();
-        keyboardIdle = false;
-
-        if (caretRange === undefined) return;
-
-        // Build some context
-        const context = getCaretContext();
-
-        if (context === undefined) return;
-
-        // Loop through the commands to see if there's a match.
-        const unmatched = commands.every((command) => {
-            // If the keystroke and caret position matches the command signature, execute the command and update the caret range.
-            if (
-                (command.press === undefined || command.press === press) &&
-                (command.shift === undefined ||
-                    command.shift === event.shiftKey) &&
-                (command.alt === undefined || command.alt === event.altKey) &&
-                (command.control === undefined ||
-                    command.control === (event.ctrlKey || event.metaKey)) &&
-                (command.key === undefined ||
-                    (Array.isArray(command.key) &&
-                        command.key.includes(event.key)) ||
-                    (command.key instanceof Function &&
-                        command.key(event.key)) ||
-                    command.key === event.key) &&
-                (command.code === undefined || command.code === event.code) &&
-                (command.active === true ||
-                    (command.active instanceof Function &&
-                        command.active.call(undefined, context, event.key)))
-            ) {
-                // Execute the command
-                const handled = executeCommand(command, event.key);
-
-                if (handled) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-
-                // Stop searching for a matching command.
-                return handled;
-            }
-            // Continue searching for a matching command.
-            return true;
-        });
-
-        if (unmatched) {
-            // Toolbar navigation
-            if (event.key === 'Escape') {
-                // If we've selected a FootnoteNode or Comment, navigate to the footnote or comment text to edit it.
-                if (
-                    caretRange.start.node instanceof AtomNode &&
-                    caretRange.start.node.getMeta() instanceof FormatNode
-                ) {
-                    const firstCaret = caretRange.start.node
-                        .getMeta()
-                        .getFirstCaret();
-                    caretRange = { start: firstCaret, end: firstCaret };
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return true;
-                }
-                // If we're inside an atom node, select the atom itself.
-                else if (caretRange.start.node.isInside(editedNode, AtomNode)) {
-                    const atom = caretRange.start.node.getClosestParentOfType<
-                        AtomNode<any>
-                    >(editedNode, AtomNode);
-                    if (atom) {
-                        const atomCaret = { node: atom, index: 0 };
-                        caretRange = { start: atomCaret, end: atomCaret };
-                        event.preventDefault();
-                        event.stopPropagation();
-                        return true;
-                    }
-                }
-                // Otherwise, if we have a reference to this editor's DOM element, find the nearest focusable element in it's toolbar and focus on that.
-                const controls = [
-                    document.querySelector(
-                        '.bookish-editor-toolbar [tabindex="0"]'
-                    ),
-                    document.querySelector('.bookish-editor-toolbar input'),
-                    document.querySelector('.bookish-editor-toolbar select'),
-                    document.querySelector('.bookish-editor-toolbar button'),
-                ];
-                const match = controls.find(
-                    (control) => control && control instanceof HTMLElement
-                );
-                if (match && match instanceof HTMLElement) {
-                    match.focus();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return true;
-                }
-            }
-        }
-    }
-
-    function executeCommand(command: Command, key: string): boolean {
-        // Assume we process it, then flip it if we don't.
-        ignoredInput = false;
-
-        const context = getCaretContext();
-        if (context && caretRange) {
-            const results = command.handler.call(
-                undefined,
-                context,
-                getUtilities(),
-                key
-            );
-
-            // If the command invoked produced a new range
-            if (results !== undefined) {
-                const { root, range } = results;
-                const newRange = { start: range.start, end: range.end };
-
-                if (root === editedNode && command.mutates)
-                    console.error(
-                        `Warning: immutability violation on ${command.description}`
-                    );
-
-                // Set the range to force a rerender, assuming something in the document changed.
-                caretRange = newRange;
-
-                // Save the copy in the undo stack if this isn't a navigation or selection state.
-                if (
-                    command.category !== 'navigation' &&
-                    command.category !== 'selection' &&
-                    command.category !== 'history'
-                ) {
-                    saveEdit(root as RootNode, newRange, command);
-                }
-                return true;
-            } else {
-                ignoredInput = true;
-                return false;
-            }
-        }
-        return false;
-    }
-
-    async function saveEdit(
-        newRoot: RootNode,
-        newRange: CaretRange,
-        command?: Command
-    ) {
-        // Don't save edits if locked.
-        if (locked) return;
-
-        // Call the save callback.
-        save(newRoot);
-
-        // Initialize a new history if we don't have one.
-        let newStack: UndoState[] = undoStack.length > 0 ? undoStack : [];
-
-        // If there's nothing on the stack, save the initial state before we add something to the stack.
-        if (undoStack.length === 0 && caretRange !== undefined) {
-            const currentRange = caretRangeToIndexRange(editedNode, caretRange);
-            if (currentRange !== undefined)
-                newStack = [
-                    {
-                        bookdown: editedNode.toBookdown(),
-                        command: undefined,
-                        range: currentRange,
-                    },
-                ];
-        }
-
-        // Change the chapter's AST.
-        updateRoot(newRoot);
-
-        // Set the new undo stack, pre-pending the new command to the front.
-        const newTextRange = caretRangeToIndexRange(newRoot, newRange);
-        if (newTextRange !== undefined)
-            undoStack = [
-                {
-                    bookdown: newRoot.toBookdown(),
-                    command: command,
-                    range: newTextRange,
-                    // If the undo position is beyond the front, clear everything before it, because we're changing history.
-                },
-                ...(undoPosition > 0 ? newStack.slice(undoPosition) : newStack),
-            ];
-
-        // Set the undo position to the last index.
-        undoPosition = 0;
-
-        // Focus the editor on the new caret location, unless the toolbar is focused.
-        if (!toolbarIsFocused()) element?.focus();
-
-        // Update the caret
-        claimActiveEditor();
-    }
-
-    function updateRoot(newRoot: RootNode) {
-        editedNode = newRoot;
-        text = editedNode.toBookdown();
-    }
-
-    function editNode(previous: BookishNode, edited: BookishNode) {
-        if (caretRange) {
-            const newRoot = editedNode.withNodeReplaced(previous, edited);
-            if (newRoot === undefined) return;
-            saveEdit(newRoot, { start: caretRange.start, end: caretRange.end });
-
-            // Update the range if the current range contains the previous node. This will generally
-            // be true any time a selected atom node is edited.
-            if (
-                caretRange.start.node === previous &&
-                (edited instanceof AtomNode || edited instanceof TextNode)
-            )
-                caretRange = {
-                    start: { node: edited, index: 0 },
-                    end: { node: edited, index: 0 },
-                };
-        }
-    }
-
-    function handleMouseDown() {
-        if (!element) return;
-
-        // Grab focus.
-        element.focus();
-
-        // Update the caret range to ensure it's positioned correctly, since it depends on relative positioned parents.
-        if (caretRange)
-            caretRange = { start: caretRange.start, end: caretRange.end };
-
-        // If we've selected a non-TextNode, release it, so the browser is free to select a text node.
-        if (
-            caretRange &&
-            !(
-                caretRange.start.node instanceof TextNode ||
-                caretRange.start.node instanceof AtomNode ||
-                caretRange.start.node instanceof EmbedNode
-            )
-        ) {
-            caretRange = undefined;
-        }
-    }
-
-    function isFocused() {
-        return (
-            document.activeElement === element ||
-            (element !== null && element?.contains(document.activeElement)) ||
-            toolbarIsFocused()
-        );
-    }
-
-    function handleFocus() {
-        editorFocused = isFocused();
-        lease(true);
-    }
-
-    function handleBlur() {
-        editorFocused = isFocused();
-        lease(false);
-    }
-
-    function handleCopy(node: BookishNode) {
-        // Set the editor's clipboard.
-        clipboard = node;
-
-        // Set the OS clipboard.
-        if (navigator.clipboard) {
-            navigator.clipboard.write([
-                new ClipboardItem({
-                    'text/plain': new Blob([node.toText()], {
-                        type: 'text/plain',
-                    }),
-                    'text/html': new Blob([node.toHTML()], {
-                        type: 'text/html',
-                    }),
-                }),
-            ]);
-        } else
-            window.alert(
-                "Your browser doesn't support copying to the clipboard :("
-            );
-    }
-
-    function handlePaste(
-        context: WhatsAroundTheCaret,
-        text: PasteContent | BookishNode,
-        save: boolean
-    ) {
-        if (text instanceof BookishNode)
-            return handlePasteNode(context, text, save);
-
-        const plain =
-            text.plain === undefined ? undefined : new TextNode(text.plain);
-
-        if (plain) {
-            const edit = handlePasteNode(context, plain, save);
-            if (edit) return edit;
-        }
-        return undefined;
-    }
-
-    function handlePasteNode(
-        context: WhatsAroundTheCaret,
-        node: BookishNode,
-        save: boolean
-    ) {
-        // Track revisions in these two variables.
-        let newRoot = context.root;
-        let newCaret = context.start;
-
-        // Is there any text to remove? Remove it first.
-        if (context.isSelection) {
-            const edit = newRoot.withRangeFormatted(context.range, undefined);
-            if (edit === undefined || !(edit.root instanceof ChapterNode))
-                return;
-            newRoot = edit.root;
-            newCaret = edit.range.start;
-        }
-
-        // Find the parents of the caret node, from nearest to furthest
-        const parents = context.root.getParentsOf(newCaret.node);
-        if (parents === undefined) return;
-
-        // Pop parents, nearest to farthest, searching for one that handles an insertion.
-        let edit = undefined;
-        let parent = undefined;
-        while (parents.length > 0) {
-            parent = parents.pop();
-            if (parent === undefined) break;
-            // It's critical that we insert a copy and not the node in case people copy multiple times. A node can only appear once in a tree.
-            edit = parent.withNodeInserted(newCaret, node.copy());
-            if (edit !== undefined) break;
-        }
-
-        // Insert the node at the caret.
-        if (parent !== undefined && edit !== undefined) {
-            const newChapter = context.root.withNodeReplaced(parent, edit.root);
-            if (newChapter === undefined) return;
-
-            if (save) {
-                // Set the range to force a rerender, assuming something in the document changed.
-                caretRange = edit.range;
-
-                // Save the copy in the undo stack if this isn't a navigation or selection state.
-                saveEdit(newChapter, edit.range);
-            } else return { root: newChapter, range: edit.range };
-        }
-    }
-
-    function toolbarIsFocused() {
-        const toolbar = document.querySelector('.bookish-editor-toolbar');
-        return toolbar !== null && toolbar.contains(document.activeElement);
-    }
-
-    $: isAtom = caretRange && caretRange.start.node instanceof AtomNode;
-    $: inAtom =
-        caretRange && caretRange.start.node.isInside(editedNode, AtomNode);
-    $: isSelection =
-        caretRange !== undefined &&
-        (caretRange.start.node !== caretRange.end.node ||
-            caretRange.start.index !== caretRange.end.index);
-    $: isItalic =
-        caretRange !== undefined &&
-        isSelection === false &&
-        caretRange.start.node instanceof TextNode &&
-        caretRange.start.node.isItalic(editedNode);
-    $: isBold =
-        caretRange !== undefined &&
-        isSelection === false &&
-        caretRange.start.node instanceof TextNode &&
-        caretRange.start.node.isBold(editedNode);
-    $: isLink =
-        caretRange !== undefined &&
-        isSelection === false &&
-        caretRange.start.node.getClosestParentMatching(
-            editedNode,
-            (p) => p instanceof LinkNode
-        ) !== undefined;
-
-    // When the caret context or editor focus changes, update the active editor.
-    $: {
-        if ((caretRange || editorFocused) && isFocused()) claimActiveEditor();
-        else activeEditor.set(undefined);
-    }
-
-    function claimActiveEditor() {
-        activeEditor.set({
-            range: caretRange,
-            coordinate: caretCoordinate,
-            setCaret: (range: CaretRange | undefined) => {
-                caretRange = range;
-                element?.focus();
-            },
-            edit: editNode,
-            executor: executeCommand,
-            context: getCaretContext(),
-            root: editedNode,
-            focused: editorFocused,
-        });
-    }
-
-    // Pass the function above to all children so they can claim the active editor for non-focus reasons.
-    // (Drag and drop, for example.)
-    setContext('claimeditor', claimActiveEditor);
-</script>
-
-<div
-    class={`bookish-editor ${inAtom ? 'bookish-editor-atom-focused' : ''}`}
-    class:locked
-    aria-disabled={locked}
-    bind:this={element}
-    on:keydown={handleKey}
-    on:keypress={handlePress}
-    on:mousedown|stopPropagation={handleMouseDown}
-    on:focus={handleFocus}
-    on:blur={handleBlur}
-    tabIndex="0"
->
-    <!-- A view of the root -->
-    <svelte:component
-        this={component}
-        node={editedNode}
-        {placeholder}
-        editable={true}
-    />
-    <!-- The caret. We render our own since this view isn't contentEditable and we can't show a caret.
-         Customize the rendering based on the formatting applied to the text node. -->
-    {#if caretCoordinate && caretRange && !isAtom && isSelection === false && editorFocused}
-        <CaretView
-            left={caretCoordinate.x}
-            top={caretCoordinate.y}
-            height={caretCoordinate.height}
-            blink={editorFocused && keyboardIdle}
-            ignored={ignoredInput}
-            linked={isLink}
-            bold={isBold}
-            italic={isItalic}
-            disabled={!editorFocused || locked}
-            {locked}
-        />
-    {/if}
-</div>
-
-<style>
-    .bookish-editor {
-        min-height: 1em;
-    }
-
-    .locked :global(.bookish-text) {
-        color: var(--app-muted-color);
-    }
-
-    .bookish-editor:focus {
-        outline: var(--app-chrome-border-size) solid
-            var(--app-interactive-color);
-        outline-offset: var(--app-chrome-padding);
-        border-radius: var(--app-chrome-roundedness);
-    }
-
-    .bookish-editor.bookish-editor-atom-focused:focus {
-        outline: none;
-    }
-
-    .bookish-editor-inline-editor {
-        display: inline-block;
-        position: relative;
-    }
-
-    .bookish-editor-inline-form {
-        position: absolute;
-        left: 0;
-        top: 0;
-        min-width: 7em;
-        width: auto;
-        z-index: 2;
-    }
-
-    .bookish-link-active {
-        font-weight: bold;
-    }
-
-    .bookish-editor :global(hr) {
-        margin-top: 1em;
-        margin-bottom: 1em;
-    }
-</style>