bookish-press 0.4.0 → 0.4.16

package/components/editor/BookishEditor.svelte

@@ -1,24 +1,25 @@
-<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";
+<script>import BookishNode from '../../models/chapter/Node';
+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 { getEdition } from '../page/Contexts';
+import { afterUpdate, onMount, setContext } from 'svelte';
+import { getCaret } from '../page/Contexts';
+import CaretView from './CaretView.svelte';
 const IDLE_TIME = 500;
 export let ast;
 export let save;
@@ -38,6 +39,7 @@ let clipboard = undefined;
 let editedNode = ast;
 let ignoredInput = false;
 let edition = getEdition();
+let activeEditor = getCaret();
 onMount(() => {
     const caret = editedNode.getFirstCaret();
     if (caret)
@@ -47,15 +49,15 @@ onMount(() => {
         element.focus();
     }
     // Listen to selection changes
-    document.addEventListener("selectionchange", handleSelectionChange);
+    document.addEventListener('selectionchange', handleSelectionChange);
     // Stop listening to selection changes
     return () => {
-        document.removeEventListener("selectionchange", handleSelectionChange);
+        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(() => {
+    const keystrokeTimer = setInterval(() => {
         // Remember that we're idle so we can render things accordingly.
         const isIdle = Date.now() - lastInputTime > IDLE_TIME;
         if (isIdle) {
@@ -83,19 +85,26 @@ afterUpdate(() => {
             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 
+            // 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, 
+                // 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);
+                    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;
                 }
@@ -105,7 +114,8 @@ afterUpdate(() => {
                 // 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;
+                const emptyEnd = startNode !== endNode &&
+                    endNode.childNodes.length === 0;
                 if (emptyStart)
                     startNode.appendChild(document.createTextNode('\ufeff'));
                 if (emptyEnd)
@@ -113,7 +123,9 @@ afterUpdate(() => {
                 // 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";
+                    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) {
@@ -122,7 +134,7 @@ afterUpdate(() => {
                     }
                     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}`);
+                        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);
                 }
@@ -130,26 +142,35 @@ afterUpdate(() => {
                 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;
+                    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 caretAncestor = startNode.closest('.bookish-editor');
                     let relativeX = 0;
                     let relativeY = 0;
                     while (caretAncestor != null) {
-                        if (window.getComputedStyle(caretAncestor).position === "relative") {
+                        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 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
+                        height: rangeRect.height,
                     };
                     newCaretPosition = position;
                 }
@@ -161,38 +182,30 @@ afterUpdate(() => {
     }
     // 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")))
+        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()) };
+                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) {
+    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.
@@ -213,7 +226,7 @@ function handleSelectionChange() {
     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) {
+    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
@@ -234,9 +247,17 @@ function getCaretCoordinate(caret) {
     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 };
+        return {
+            top: characterRect.top,
+            left: characterRect.left,
+            height: characterRect.height,
+        };
     const elementRect = domNode.getBoundingClientRect();
-    return { top: elementRect.top, left: elementRect.left, height: elementRect.height };
+    return {
+        top: elementRect.top,
+        left: elementRect.left,
+        height: elementRect.height,
+    };
 }
 function getCaretOnLine(caret, below) {
     if (caret.node instanceof TextNode || caret.node instanceof AtomNode) {
@@ -248,7 +269,8 @@ function getCaretOnLine(caret, below) {
         let previousCandidate = undefined;
         let previousCoordinate = undefined;
         if (startCoordinate) {
-            while (candidate.node instanceof TextNode || candidate.node instanceof AtomNode) {
+            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
@@ -256,21 +278,43 @@ function getCaretOnLine(caret, below) {
                 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;
+                    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)
+                        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)
+                        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)
+                        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)
+                        if (candidateTop + candidateCoordinate.height <
+                            startTop &&
+                            candidateCoordinate.left <= startCoordinate.left)
                             return closerCandidate;
                     }
                 }
@@ -279,7 +323,8 @@ function getCaretOnLine(caret, 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) {
+                if (nextCandidate.node === candidate.node &&
+                    nextCandidate.index === candidate.index) {
                     break;
                 }
                 // Otherwise, we advance to the next candidate.
@@ -301,17 +346,24 @@ function atParagraphStart() {
         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;
+    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;
+    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
@@ -331,10 +383,13 @@ 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;
+    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;
@@ -354,39 +409,50 @@ function getCaretContext() {
     const nodes = editedNode.getNodes();
     let inside = false;
     let includesList = false;
-    nodes.forEach(n => {
+    nodes.forEach((n) => {
         if (caretRange === undefined)
             return;
         if (n === caretRange.start.node)
             inside = true;
-        if (inside && n.getClosestParentMatching(editedNode, p => p instanceof ListNode) !== undefined)
+        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();
+    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,
+        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),
+        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,
+        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,
+        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,
@@ -394,15 +460,18 @@ function getCaretContext() {
         redo: redo,
         clipboard: clipboard,
         handleCopy: handleCopy,
-        handlePaste: handlePaste
+        handlePaste: handlePaste,
     };
 }
 function getUtilities() {
     return {
-        getCaretOnLine: getCaretOnLine
+        getCaretOnLine: getCaretOnLine,
     };
 }
-function handleKeyDown(event) {
+function handlePress(event) {
+    handleKey(event, true);
+}
+function handleKey(event, press = false) {
     // Only handle keystrokes when this is focused.
     // Otherwise, we let any focusable elements in this editor handle them.
     if (!editorFocused)
@@ -417,35 +486,51 @@ function handleKeyDown(event) {
     if (context === undefined)
         return;
     // Loop through the commands to see if there's a match.
-    const unmatched = commands.every(command => {
+    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))) &&
+        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)))) {
-            event.preventDefault();
-            event.stopPropagation();
+            (command.active === true ||
+                (command.active instanceof Function &&
+                    command.active.call(undefined, context, event.key)))) {
             // Execute the command
-            executeCommand(command, event.key);
+            const handled = executeCommand(command, event.key);
+            if (handled) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
             // Stop searching for a matching command.
-            return false;
+            return handled;
         }
         // 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();
+        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(editedNode, AtomNode);
                 if (atom) {
@@ -456,19 +541,19 @@ function handleKeyDown(event) {
                     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;
-                }
+            // 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;
             }
         }
     }
@@ -483,20 +568,26 @@ function executeCommand(command, key) {
         if (results !== undefined) {
             const { root, range } = results;
             const newRange = { start: range.start, end: range.end };
-            if (root === editedNode && command.category !== "navigation" && command.category !== "selection")
+            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") {
+            if (command.category !== 'navigation' &&
+                command.category !== 'selection' &&
+                command.category !== 'history') {
                 saveEdit(root, newRange, command);
             }
+            return true;
         }
-        else
+        else {
             ignoredInput = true;
+            return false;
+        }
     }
+    return false;
 }
-function saveEdit(newRoot, newRange, command) {
+async function saveEdit(newRoot, newRange, command) {
     // Call the save callback.
     save(newRoot);
     // Initialize a new history if we don't have one.
@@ -505,25 +596,35 @@ function saveEdit(newRoot, newRange, command) {
     if (undoStack.length === 0 && caretRange !== undefined) {
         const currentRange = caretRangeToIndexRange(editedNode, caretRange);
         if (currentRange !== undefined)
-            newStack = [{
+            newStack = [
+                {
                     bookdown: editedNode.toBookdown(),
                     command: undefined,
-                    range: currentRange
-                }];
+                    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 = [{
+        undoStack = [
+            {
                 bookdown: newRoot.toBookdown(),
                 command: command,
-                range: newTextRange
+                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)];
+            },
+            ...(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 editNode(previous, edited) {
     if (caretRange) {
@@ -533,8 +634,12 @@ function editNode(previous, edited) {
         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 } };
+        if (caretRange.start.node === previous &&
+            (edited instanceof AtomNode || edited instanceof TextNode))
+            caretRange = {
+                start: { node: edited, index: 0 },
+                end: { node: edited, index: 0 },
+            };
     }
 }
 function handleMouseDown() {
@@ -546,20 +651,20 @@ function handleMouseDown() {
     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)) {
+    if (caretRange &&
+        !(caretRange.start.node instanceof TextNode ||
+            caretRange.start.node instanceof AtomNode ||
+            caretRange.start.node instanceof EmbedNode)) {
         caretRange = undefined;
     }
 }
-function handleKeyUp(event) {
-    event.preventDefault();
-}
-function forceUpdate() {
-    if (caretRange !== undefined) {
-        caretRange = { start: caretRange.start, end: caretRange.end };
-    }
+function isFocused() {
+    return (document.activeElement === element ||
+        (element !== null && element?.contains(document.activeElement)) ||
+        toolbarIsFocused());
 }
 function updateFocus() {
-    editorFocused = document.activeElement === element || (element !== null && element.contains(document.activeElement));
+    editorFocused = isFocused();
 }
 function handleCopy(node) {
     // Set the editor's clipboard.
@@ -568,15 +673,30 @@ function handleCopy(node) {
     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" })
-            })
+                '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, node, save) {
+function handlePaste(context, text, save) {
+    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, node, save) {
     // Track revisions in these two variables.
     let newRoot = context.root;
     let newCaret = context.start;
@@ -619,112 +739,103 @@ function handlePaste(context, node, save) {
             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 && (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;
+$: 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.
 $: {
-    caretRange = caretRange;
-    editedNode = editedNode;
-    context = getCaretContext();
+    if ((caretRange || editorFocused) && isFocused())
+        claimActiveEditor();
+    else
+        activeEditor.set(undefined);
 }
-// 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
-});
+function claimActiveEditor() {
+    activeEditor.set({
+        range: caretRange,
+        coordinate: caretCoordinate,
+        setCaret: (range) => {
+            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" : ""}`}
+<div
+    class={`bookish-editor ${inAtom ? 'bookish-editor-atom-focused' : ''}`}
     bind:this={element}
-    on:keydown={handleKeyDown}
-    on:keyup={handleKeyUp}
+    on:keydown={handleKey}
+    on:keypress={handlePress}
     on:mousedown|stopPropagation={handleMouseDown}
     on:focus={updateFocus}
     on:blur={updateFocus}
-    role="textbox"
-    tabIndex=0
+    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.
+    <!-- The chapter content -->
+    <svelte:component this={component} node={editedNode} {placeholder} />
+    <!-- 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 && 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 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}
+        />
     {/if}
-    <svelte:component this={component} node={editedNode} placeholder={placeholder} />
 </div>
 
 <style>
+    .bookish-editor {
+        min-height: 2em;
+    }
+
     .bookish-editor:focus {
-        outline: 2px solid var(--bookish-highlight-color);
-        outline-offset: var(--bookish-app-chrome-padding);
-        border-radius: var(--bookish-app-chrome-roundedness);
+        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-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;
@@ -743,13 +854,8 @@ $: caretStore.set({
         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;   
+        margin-bottom: 1em;
     }
-
-</style>
+</style>