bookish-press 0.4.0

package/components/editor/BookishEditor.svelte

@@ -0,0 +1,755 @@
+<script>import ChapterNode from "../../models/chapter/ChapterNode";
+import Parser from "../../models/chapter/Parser";
+import LinkNode from "../../models/chapter/LinkNode";
+import ParagraphNode from "../../models/chapter/ParagraphNode";
+import TextNode from "../../models/chapter/TextNode";
+import AtomNode from "../../models/chapter/AtomNode";
+import FormatNode from "../../models/chapter/FormatNode";
+import BlocksNode from "../../models/chapter/BlocksNode";
+import ListNode from "../../models/chapter/ListNode";
+import TableNode from "../../models/chapter/TableNode";
+import MetadataNode from "../../models/chapter/MetadataNode";
+import CodeNode from "../../models/chapter/CodeNode";
+import BlockNode from "../../models/chapter/BlockNode";
+import EmbedNode from "../../models/chapter/EmbedNode";
+import ErrorNode from "../../models/chapter/ErrorNode";
+import { caretRangeToIndexRange, indexRangeToCaretRange } from "../../models/chapter/Caret";
+import commands from "./Commands";
+import Toolbar from "./Toolbar.svelte";
+import { CARET, getEdition } from "../page/Contexts";
+import { afterUpdate, onMount, setContext } from "svelte";
+import { writable } from "svelte/store";
+const IDLE_TIME = 500;
+export let ast;
+export let save;
+export let chapter;
+export let autofocus = false;
+export let component;
+export let placeholder;
+let element = null;
+let caretRange = undefined;
+let caretCoordinate = undefined;
+let lastInputTime = 0;
+let keyboardIdle = true;
+let editorFocused = false;
+let undoStack = [];
+let undoPosition = -1;
+let clipboard = undefined;
+let editedNode = ast;
+let ignoredInput = false;
+let edition = getEdition();
+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 = setTimeout(() => {
+        // 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);
+                        throw Error(`Error setting caret range was 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 = 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;
+    // If the caret position is outside the window, and the editor is focused, scroll to make the caret visible.
+    if (newCaretPosition && editorFocused) {
+        const caretTop = newCaretPosition.y;
+        const caretBottom = caretTop + newCaretPosition.height;
+        const windowHeight = window.innerHeight;
+        const toolbar = element?.querySelector(".bookish-editor-toolbar");
+        const toolbarHeight = toolbar ? toolbar.clientHeight : 0;
+        const buffer = newCaretPosition.height * 5;
+        if (caretTop < window.scrollY + buffer + toolbarHeight) {
+            window.scrollTo({ top: caretTop - buffer, behavior: 'smooth' });
+        }
+        else if (caretBottom > window.scrollY + windowHeight - buffer) {
+            window.scrollTo({ top: caretBottom - (windowHeight - buffer), behavior: 'smooth' });
+        }
+    }
+});
+function rangeToCaret(domNode, rangeIndex) {
+    // 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.anchorOffset && selection.focusNode && selection.focusOffset) {
+        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) {
+    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, below) {
+    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 = 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() {
+    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() {
+    // Grab the next state
+    let undoState = undoStack[undoPosition + 1];
+    // Restore the content of the chapter.
+    let node = ast instanceof ChapterNode ? Parser.parseChapter($edition, undoState.bookdown) :
+        ast instanceof FormatNode ? Parser.parseFormat($edition, undoState.bookdown) :
+            ast instanceof EmbedNode ? Parser.parseEmbed($edition, undoState.bookdown) :
+                undefined;
+    if (node === undefined || node instanceof ErrorNode)
+        return;
+    // Restore the view
+    editedNode = 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() {
+    // Grab the next state
+    let undoState = undoStack[undoPosition - 1];
+    // Restore the content of the chapter.
+    let node = ast instanceof ChapterNode ? Parser.parseChapter($edition, undoState.bookdown) :
+        ast instanceof FormatNode ? Parser.parseFormat($edition, undoState.bookdown) :
+            ast instanceof EmbedNode ? Parser.parseEmbed($edition, undoState.bookdown) :
+                undefined;
+    if (node === undefined)
+        return;
+    editedNode = 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() {
+    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();
+    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),
+        paragraph: parents?.find(n => n instanceof ParagraphNode),
+        block: parents?.find(n => n instanceof BlockNode),
+        code: parents?.find(n => n instanceof CodeNode),
+        list: parents?.find(n => n instanceof ListNode),
+        atom: parents?.find(n => n instanceof AtomNode),
+        meta: parents?.find(n => n instanceof MetadataNode),
+        includesList: includesList,
+        table: parents?.find(n => n instanceof 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,
+        endIsTextOrAtom: caretRange.end.node instanceof TextNode || caretRange.end.node instanceof AtomNode,
+        atParagraphStart: atParagraphStart(),
+        undoStack: undoStack,
+        undoPosition: undoPosition,
+        undo: undo,
+        redo: redo,
+        clipboard: clipboard,
+        handleCopy: handleCopy,
+        handlePaste: handlePaste
+    };
+}
+function getUtilities() {
+    return {
+        getCaretOnLine: getCaretOnLine
+    };
+}
+function handleKeyDown(event) {
+    // 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.shift === undefined || command.shift === event.shiftKey) &&
+            command.alt === event.altKey &&
+            command.control === (event.ctrlKey || event.metaKey) &&
+            (command.key === undefined || command.key === event.key || (Array.isArray(command.key) && command.key.includes(event.key))) &&
+            (command.code === undefined || command.code === event.code) &&
+            (command.active === true || (command.active instanceof Function && command.active.call(undefined, context, event.key)))) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Execute the command
+            executeCommand(command, event.key);
+            // Stop searching for a matching command.
+            return false;
+        }
+        // Continue searching for a matching command.
+        return true;
+    });
+    if (unmatched) {
+        // Toolbar navigation
+        if (event.key === "Tab") {
+            // If we've selected a FootnoteNode or Comment, navigate to the footnote or comment text.
+            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;
+            }
+            else if (caretRange.start.node.isInside(editedNode, AtomNode)) {
+                const atom = caretRange.start.node.getClosestParentOfType(editedNode, AtomNode);
+                if (atom) {
+                    const atomCaret = { node: atom, index: 0 };
+                    caretRange = { start: atomCaret, end: atomCaret };
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return true;
+                }
+            }
+            if (element) {
+                const controls = [
+                    element.querySelector(".bookish-editor-toolbar input"),
+                    element.querySelector(".bookish-editor-toolbar select"),
+                    element.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, key) {
+    // 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.category !== "navigation" && command.category !== "selection")
+                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, newRange, command);
+            }
+        }
+        else
+            ignoredInput = true;
+    }
+}
+function saveEdit(newRoot, newRange, command) {
+    // Call the save callback.
+    save(newRoot);
+    // Initialize a new history if we don't have one.
+    let newStack = 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.
+    editedNode = 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;
+}
+function editNode(previous, edited) {
+    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 = undefined;
+    }
+}
+function handleKeyUp(event) {
+    event.preventDefault();
+}
+function forceUpdate() {
+    if (caretRange !== undefined) {
+        caretRange = { start: caretRange.start, end: caretRange.end };
+    }
+}
+function updateFocus() {
+    editorFocused = document.activeElement === element || (element !== null && element.contains(document.activeElement));
+}
+function handleCopy(node) {
+    // Set the editor's clipboard.
+    clipboard = node;
+    // Set the OS clipboard.
+    if (navigator.clipboard) {
+        navigator.clipboard.write([
+            new ClipboardItem({
+                "text/plain": new Blob([node.toBookdown()], { 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, node, save) {
+    // 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 };
+    }
+}
+$: isAtom = caretRange && caretRange.start.node instanceof AtomNode;
+$: inAtom = caretRange && caretRange.start.node.isInside(editedNode, AtomNode);
+$: isSelection = caretRange && (caretRange.start.node !== caretRange.end.node || caretRange.start.index !== caretRange.end.index);
+$: isItalic = caretRange && !isSelection && caretRange.start.node instanceof TextNode && caretRange.start.node.isItalic(editedNode);
+$: isBold = caretRange && !isSelection && caretRange.start.node instanceof TextNode && caretRange.start.node.isBold(editedNode);
+$: isLink = caretRange && !isSelection && caretRange.start.node.getClosestParentMatching(editedNode, p => p instanceof LinkNode) !== undefined;
+let context = undefined;
+$: {
+    caretRange = caretRange;
+    editedNode = editedNode;
+    context = getCaretContext();
+}
+// Create a caret store for the editor and make it available to children.
+let caretStore = setContext(CARET, writable());
+// Update the caret store it whenever any of the below change.
+$: caretStore.set({
+    range: caretRange,
+    coordinate: caretCoordinate,
+    forceUpdate: forceUpdate,
+    setCaret: range => { caretRange = range; element?.focus(); },
+    edit: editNode,
+    context: context,
+    root: editedNode,
+    focused: editorFocused
+});
+</script>
+
+<div 
+    class={`bookish-editor ${inAtom ? "bookish-editor-atom-focused" : ""}`}
+    bind:this={element}
+    on:keydown={handleKeyDown}
+    on:keyup={handleKeyUp}
+    on:mousedown|stopPropagation={handleMouseDown}
+    on:focus={updateFocus}
+    on:blur={updateFocus}
+    role="textbox"
+    tabIndex=0
+>
+    {#if context && caretCoordinate }
+        <Toolbar context={context} executor={executeCommand} visible={editorFocused} />
+    {/if}
+    <!-- Draw a caret. We draw 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 && editorFocused }
+        <div 
+            class={`bookish-editor-caret ${isLink ? "bookish-editor-caret-linked" : isItalic ? "bookish-editor-caret-italic" :""} ${isBold ? "bookish-editor-caret-bold" : ""} ${editorFocused && keyboardIdle ? "bookish-editor-caret-blink" : ""} ${!editorFocused ? "bookish-editor-caret-disabled" : ""} ${ignoredInput ? "bookish-editor-caret-ignored" : ""}`}
+            style={`left: ${caretCoordinate.x}px; top: ${caretCoordinate.y}px; height: ${caretCoordinate.height}px;`}>
+        </div>
+    {/if}
+    <svelte:component this={component} node={editedNode} placeholder={placeholder} />
+</div>
+
+<style>
+    .bookish-editor:focus {
+        outline: 2px solid var(--bookish-highlight-color);
+        outline-offset: var(--bookish-app-chrome-padding);
+        border-radius: var(--bookish-app-chrome-roundedness);
+    }
+
+    .bookish-editor.bookish-editor-atom-focused:focus {
+        outline: none;
+    }
+
+    .bookish-editor-caret {
+        left: 0;
+        top: 0;
+        width: 0px;
+        background: none;
+        outline: 1px solid var(--bookish-paragraph-color);
+        display: inline-block;
+        box-sizing: border-box;
+        position: absolute;
+        z-index: 1;
+    }
+
+    @keyframes bookish-editor-caret-blink {
+        100% {
+            outline: none;
+        }
+    }
+
+    .bookish-editor-caret-disabled {
+        outline-color: var(--bookish-app-chrome-muted);
+    }
+
+    .bookish-editor-caret-blink {
+        animation: bookish-editor-caret-blink 1s steps(2) infinite;
+    }
+
+    .bookish-editor-caret-italic {
+        transform: skew(-10deg);
+    }
+
+    .bookish-editor-caret-bold {
+        outline-width: 2px;
+    }
+
+    .bookish-editor-caret-ignored {
+        animation: failure 100ms 10;
+    }
+
+    .bookish-editor-caret-linked {
+        outline-width: 1px;
+        outline-color: var(--bookish-link-color);
+    }
+
+    .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;
+    }
+
+    :global(.bookish-editor .bookish-table table td) {
+        border: var(--bookish-app-chrome-border-width) dashed var(--bookish-app-chrome-border-color);
+    }
+
+    .bookish-editor :global(hr) {
+        margin-top: 1em;
+        margin-bottom: 1em;   
+    }
+
+</style>