bookish-press 0.7.4 → 0.8.2

package/dist/components/editor/BookishEditor.svelte

@@ -1,830 +1,649 @@
-<script>import BookishNode from '../../models/chapter/Node';
-import ChapterNode from '../../models/chapter/ChapterNode';
-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 { afterUpdate, onMount, setContext } from 'svelte';
-import { getCaret } from '../page/Contexts';
-import CaretView from './CaretView.svelte';
-import Parser, { Reserved } from '../../models/chapter/Parser';
+<script lang="ts">import BookishNode from "../../models/chapter/Node";
+import ChapterNode from "../../models/chapter/ChapterNode";
+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 { onMount, setContext, untrack } from "svelte";
+import { getCaret } from "../page/Contexts";
+import CaretView from "./CaretView.svelte";
+import Parser, { Reserved } from "../../models/chapter/Parser";
 const IDLE_TIME = 500;
-export let text;
-export let parser;
-export let save;
-export let chapter;
-export let autofocus = false;
-export let component;
-export let placeholder;
-export let leasee;
-export let lease;
-export let inline = false;
-let element = null;
-let caretRange = undefined;
-let caretCoordinate = undefined;
+let {
+  text,
+  parser,
+  save,
+  chapter,
+  autofocus = false,
+  component,
+  placeholder,
+  leasee,
+  lease,
+  inline = false
+} = $props();
+let element = $state(null);
+let caretRange = $state(void 0);
+let caretCoordinate = $state(void 0);
 let lastInputTime = 0;
-let keyboardIdle = true;
-let editorFocused = false;
-let undoStack = [];
-let undoPosition = -1;
-let clipboard = undefined;
-let ignoredInput = false;
+let keyboardIdle = $state(true);
+let editorFocused = $state(false);
+let undoStack = $state([]);
+let undoPosition = $state(-1);
+let clipboard = $state(void 0);
+let ignoredInput = $state(false);
 let activeEditor = getCaret();
-let accent = undefined;
-let editedNode;
-$: {
-    // 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';
+let accent = $state(void 0);
+let editedNode = $state(untrack(() => parser(text)));
+$effect.pre(() => {
+  if (untrack(() => editedNode).toBookdown() !== text) {
+    editedNode = parser(text);
+  }
+});
+let locked = $derived(typeof leasee === "string");
+let RootView = $derived(component);
 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);
-    };
+  const caret = editedNode.getFirstCaret();
+  if (caret) caretRange = { start: caret, end: caret };
+  if (element && autofocus === true) {
+    element.focus();
+  }
+  document.addEventListener("selectionchange", handleSelectionChange);
+  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);
-    };
+  const keystrokeTimer = setInterval(() => {
+    const isIdle = Date.now() - lastInputTime > IDLE_TIME;
+    if (isIdle) {
+      keyboardIdle = true;
+      ignoredInput = false;
+    }
+  }, IDLE_TIME);
+  return () => {
+    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;
-                    // Figure out the relative position of this editor.
-                    let editorAncestor = element;
-                    let relativeX = 0;
-                    let relativeY = 0;
-                    while (editorAncestor != null) {
-                        const style = window.getComputedStyle(editorAncestor);
-                        if (style.position === 'relative') {
-                            relativeX += editorAncestor.offsetLeft;
-                            relativeY += editorAncestor.offsetTop;
-                        }
-                        editorAncestor = editorAncestor.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;
-                    // Compute the final position of the caret.
-                    const position = {
-                        x: left + window.scrollX - relativeX,
-                        y: top + window.scrollY - relativeY,
-                        height: rangeRect.height,
-                    };
-                    newCaretPosition = position;
-                }
+$effect(() => {
+  void caretRange;
+  void editedNode;
+  if (!editorFocused) return;
+  let docSelection = document.getSelection();
+  let newCaretPosition = void 0;
+  if (docSelection) {
+    if (caretRange) {
+      const sortedRange = caretRange;
+      let startNode = document.querySelector(
+        `[data-nodeid='${sortedRange.start.node.nodeID}`
+      );
+      let endNode = document.querySelector(
+        `[data-nodeid='${sortedRange.end.node.nodeID}`
+      );
+      if (startNode && endNode && element) {
+        let rangeChanged = true;
+        let currentRange = void 0;
+        if (docSelection.rangeCount > 0) {
+          currentRange = docSelection.getRangeAt(0);
+          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;
+        }
+        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"));
+        const afterNewLine = sortedRange.start.node instanceof TextNode && sortedRange.start.index > 0 && sortedRange.start.node.getText().charAt(sortedRange.start.index - 1) === "\n";
+        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);
+        }
+        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
+            )
+          ) : void 0;
+          let editorAncestor = element;
+          let relativeX = 0;
+          let relativeY = 0;
+          while (editorAncestor != null) {
+            const style = window.getComputedStyle(editorAncestor);
+            if (style.position === "relative") {
+              relativeX += editorAncestor.offsetLeft;
+              relativeY += editorAncestor.offsetTop;
             }
+            editorAncestor = editorAncestor.parentElement;
+          }
+          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;
+      }
+    } else if (editorFocused) document.getSelection()?.empty();
+  }
+  caretCoordinate = newCaretPosition;
 });
 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 (domNode.nodeType === Node.TEXT_NODE) {
+    let parent = domNode.parentNode;
+    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)
+        return {
+          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 };
-        }
+  } else if (domNode.nodeType === Node.ELEMENT_NODE && domNode instanceof HTMLElement && domNode.dataset.nodeid) {
+    const node = editedNode.getNode(parseInt(domNode.dataset.nodeid));
+    if (node instanceof ParagraphNode) {
+      const first = node.getFirstTextNode();
+      return { node: first, index: 0 };
+    } else if (node instanceof TextNode) {
+      return { node, index: 0 };
     }
-    // Return nothing by default.
-    return undefined;
+  }
+  return void 0;
 }
 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 };
-        }
+  lastInputTime = Date.now();
+  keyboardIdle = false;
+  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 (start && end) {
+      caretRange = { start, 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();
+  if (!(caret.node instanceof TextNode || caret.node instanceof AtomNode))
+    return void 0;
+  const domNode = document.querySelector(
+    `[data-nodeid='${caret.node.nodeID}`
+  );
+  if (domNode === null || domNode.childNodes.length === 0)
+    return void 0;
+  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: elementRect.top,
-        left: elementRect.left,
-        height: elementRect.height,
+      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 (caret.node instanceof TextNode || caret.node instanceof AtomNode) {
+    const startCoordinate = getCaretCoordinate(caret);
+    let candidate = editedNode.getAdjacentCaret(caret, below);
+    if (candidate === void 0) return caret;
+    let previousCandidate = void 0;
+    let previousCoordinate = void 0;
+    if (startCoordinate) {
+      while (candidate.node instanceof TextNode || candidate.node instanceof AtomNode) {
+        const candidateCoordinate = getCaretCoordinate(candidate);
+        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 (previousCandidate && previousCoordinate && previousCoordinate.top > startTop + startCoordinate.height && candidateTop > previousCoordinate.top + previousCoordinate.height)
+              return previousCandidate;
+            else if (candidateTop > startTop + startCoordinate.height && candidateCoordinate.left >= startCoordinate.left)
+              return closerCandidate;
+          } else {
+            if (previousCandidate && previousCoordinate && previousCoordinate.top + previousCoordinate.height < startTop && candidateTop + candidateCoordinate.height < previousCoordinate.top)
+              return previousCandidate;
+            if (candidateTop + candidateCoordinate.height < startTop && candidateCoordinate.left <= startCoordinate.left)
+              return closerCandidate;
+          }
+        }
+        const nextCandidate = editedNode.getAdjacentCaret(candidate, below);
+        if (nextCandidate === void 0) break;
+        if (nextCandidate.node === candidate.node && nextCandidate.index === candidate.index) {
+          break;
         }
+        previousCandidate = candidate;
+        previousCoordinate = candidateCoordinate;
+        candidate = nextCandidate;
+        if (candidate === void 0) return caret;
+      }
+      return candidate;
     }
-    // If we didn't find one, just return what we were given.
-    return caret;
+  }
+  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);
+  if (caretRange === void 0 || 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 !== void 0 && 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 = 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 };
+  let undoState = undoStack[undoPosition + 1];
+  let node = parser(undoState.bookdown);
+  if (node === void 0 || node instanceof ErrorNode) return;
+  updateRoot(node);
+  save(node);
+  if (undoPosition < undoStack.length) undoPosition = undoPosition + 1;
+  const range = indexRangeToCaretRange(node, undoState.range);
+  if (range === void 0) return;
+  return { root: node, range };
 }
 function redo() {
-    // 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 };
+  let undoState = undoStack[undoPosition - 1];
+  let node = parser(undoState.bookdown);
+  if (node === void 0) return;
+  updateRoot(node);
+  if (undoPosition > 0) undoPosition = undoPosition - 1;
+  const range = indexRangeToCaretRange(node, undoState.range);
+  if (range === void 0) return;
+  return { root: node, 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),
-        formatRoot: 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,
-        setAccent,
-        getAccent,
-    };
+  if (caretRange === void 0) return void 0;
+  const nodes = editedNode.getNodes();
+  let inside = false;
+  let includesList = false;
+  nodes.forEach((n) => {
+    if (caretRange === void 0) return;
+    if (n === caretRange.start.node) inside = true;
+    if (inside && n.getClosestParentMatching(
+      editedNode,
+      (p) => p instanceof ListNode
+    ) !== void 0)
+      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,
+    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,
+    table: parents?.find((n) => n instanceof TableNode),
+    formatRoot: caretRange.end.node instanceof TextNode || caretRange.end.node instanceof AtomNode ? caretRange.end.node.getFormatRoot(editedNode) : void 0,
+    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,
+    undoPosition,
+    undo,
+    redo,
+    clipboard,
+    handleCopy,
+    handlePaste,
+    setAccent,
+    getAccent
+  };
 }
 function setAccent(newAccent) {
-    accent = newAccent;
+  accent = newAccent;
 }
 function getAccent() {
-    return accent;
+  return accent;
 }
 function getUtilities() {
-    return {
-        getCaretOnLine: getCaretOnLine,
-    };
+  return {
+    getCaretOnLine
+  };
 }
 function handlePress(event) {
-    handleKey(event, true);
+  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)
-        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;
-    // Find a command that handles the event.
-    const command = commands.find((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)))) {
-            // See if the command is handled
-            if (executeCommand(command, event.key, event.code)) {
-                event.preventDefault();
-                event.stopPropagation();
-                return true;
-            }
-            // If not, this is not it.
-            else
-                return false;
-        }
-        // Continue searching for a matching command.
-        return false;
-    });
-    if (command === undefined) {
-        // 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(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;
-            }
+  if (!editorFocused) return;
+  lastInputTime = Date.now();
+  keyboardIdle = false;
+  if (caretRange === void 0) return;
+  const context = getCaretContext();
+  if (context === void 0) return;
+  const command = commands.find((command2) => {
+    if ((command2.press === void 0 || command2.press === press) && (command2.shift === void 0 || command2.shift === event.shiftKey) && (command2.alt === void 0 || command2.alt === event.altKey) && (command2.control === void 0 || command2.control === (event.ctrlKey || event.metaKey)) && (command2.key === void 0 || Array.isArray(command2.key) && command2.key.includes(event.key) || command2.key instanceof Function && command2.key(event.key) || command2.key === event.key) && (command2.code === void 0 || command2.code === event.code) && (command2.active === true || command2.active instanceof Function && command2.active.call(void 0, context, event.key))) {
+      if (executeCommand(command2, event.key, event.code)) {
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+      } else return false;
+    }
+    return false;
+  });
+  if (command === void 0) {
+    if (event.key === "Escape") {
+      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;
         }
+      }
+      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, key, code) {
-    // 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, code);
-        // If the command invoked produced a new range
-        if (results === true) {
-            return true;
-        }
-        else 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, newRange, command);
-            }
-            return true;
-        }
-        else {
-            ignoredInput = true;
-            return false;
-        }
+  ignoredInput = false;
+  const context = getCaretContext();
+  if (context && caretRange) {
+    const results = command.handler.call(
+      void 0,
+      context,
+      getUtilities(),
+      key,
+      code
+    );
+    if (results === true) {
+      return true;
+    } else if (results !== void 0) {
+      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}`
+        );
+      caretRange = newRange;
+      if (command.category !== "navigation" && command.category !== "selection" && command.category !== "history") {
+        saveEdit(root, newRange, command);
+      }
+      return true;
+    } else {
+      ignoredInput = true;
+      return false;
     }
-    return false;
+  }
+  return false;
 }
 async function saveEdit(newRoot, newRange, 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 = 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();
+  if (locked) return;
+  save(newRoot);
+  let newStack = undoStack.length > 0 ? undoStack : [];
+  if (undoStack.length === 0 && caretRange !== void 0) {
+    const currentRange = caretRangeToIndexRange(editedNode, caretRange);
+    if (currentRange !== void 0)
+      newStack = [
+        {
+          bookdown: editedNode.toBookdown(),
+          command: void 0,
+          range: currentRange
+        }
+      ];
+  }
+  updateRoot(newRoot);
+  const newTextRange = caretRangeToIndexRange(newRoot, newRange);
+  if (newTextRange !== void 0)
+    undoStack = [
+      {
+        bookdown: newRoot.toBookdown(),
+        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
+    ];
+  undoPosition = 0;
+  if (!toolbarIsFocused()) element?.focus();
+  claimActiveEditor();
 }
 function updateRoot(newRoot) {
-    editedNode = newRoot;
-    text = editedNode.toBookdown();
+  editedNode = newRoot;
+  text = editedNode.toBookdown();
 }
 function editNode(previous, edited) {
-    if (previous === edited)
-        return;
-    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 },
-            };
-    }
+  if (previous === edited) return;
+  if (caretRange) {
+    const newRoot = editedNode.withNodeReplaced(previous, edited);
+    if (newRoot === void 0) return;
+    saveEdit(newRoot, { start: caretRange.start, end: caretRange.end });
+    if (caretRange.start.node === previous && (edited instanceof AtomNode || edited instanceof TextNode))
+      caretRange = {
+        start: { node: edited, index: 0 },
+        end: { node: edited, index: 0 }
+      };
+  }
 }
 function handlePointerDown() {
-    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;
-    }
+  if (!element) return;
+  element.focus();
+  if (caretRange)
+    caretRange = { start: caretRange.start, end: caretRange.end };
+  if (caretRange && !(caretRange.start.node instanceof TextNode || caretRange.start.node instanceof AtomNode || caretRange.start.node instanceof EmbedNode)) {
+    caretRange = void 0;
+  }
 }
 function isFocused() {
-    return (document.activeElement === element ||
-        (element !== null && element?.contains(document.activeElement)) ||
-        toolbarIsFocused());
+  return document.activeElement === element || element !== null && element?.contains(document.activeElement) || toolbarIsFocused();
 }
 function handleFocus() {
-    editorFocused = isFocused();
-    lease(true);
+  editorFocused = isFocused();
+  lease(true);
 }
 function handleBlur() {
-    editorFocused = isFocused();
-    lease(false);
+  editorFocused = isFocused();
+  lease(false);
 }
 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.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 :(");
+  clipboard = node;
+  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, text, save) {
-    // If we're pasting a node, see what will accept it.
-    if (text instanceof BookishNode)
-        return handlePasteNode(context, text, save);
-    if (text.plain === undefined)
-        return undefined;
-    // Escape all reserved Bookdown characters.
-    const escaped = text.plain.replaceAll(Reserved, '\\$1');
-    const chapter = 
+function handlePaste(context, text2, save2) {
+  if (text2 instanceof BookishNode)
+    return handlePasteNode(context, text2, save2);
+  if (text2.plain === void 0) return void 0;
+  const escaped = text2.plain.replaceAll(Reserved, "\\$1");
+  const chapter2 = (
     // If we're pasting text into a paragraph node, then we parse it as a series of paragraphs.
-    context.block instanceof ParagraphNode && context.atom === undefined
-        ? Parser.parseChapter(undefined, escaped)
-        : // Otherwise parse as just a format node, replacing all text newlines with a space.
-            Parser.parseFormat(undefined, escaped.replaceAll('\n', ' '));
-    const edit = handlePasteNode(context, chapter, save);
-    if (edit)
-        return edit;
-    return undefined;
+    context.block instanceof ParagraphNode && context.atom === void 0 ? Parser.parseChapter(void 0, escaped) : (
+      // Otherwise parse as just a format node, replacing all text newlines with a space.
+      Parser.parseFormat(void 0, escaped.replaceAll("\n", " "))
+    )
+  );
+  const edit = handlePasteNode(context, chapter2, save2);
+  if (edit) return edit;
+  return void 0;
 }
-function handlePasteNode(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 };
-    }
+function handlePasteNode(context, node, save2) {
+  let newRoot = context.root;
+  let newCaret = context.start;
+  if (context.isSelection) {
+    const edit2 = newRoot.withRangeFormatted(context.range, void 0);
+    if (edit2 === void 0 || !(edit2.root instanceof ChapterNode))
+      return;
+    newRoot = edit2.root;
+    newCaret = edit2.range.start;
+  }
+  const parents = context.root.getParentsOf(newCaret.node);
+  if (parents === void 0) return;
+  let edit = void 0;
+  let parent = void 0;
+  while (parents.length > 0) {
+    parent = parents.pop();
+    if (parent === void 0) break;
+    edit = parent.withNodeInserted(newCaret, node.copy());
+    if (edit !== void 0) break;
+  }
+  if (parent !== void 0 && edit !== void 0) {
+    const newChapter = context.root.withNodeReplaced(parent, edit.root);
+    if (newChapter === void 0) return;
+    if (save2) {
+      caretRange = edit.range;
+      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);
+  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.
-$: {
+let isAtom = $derived.by(
+  () => caretRange !== void 0 && caretRange.start.node instanceof AtomNode
+);
+let inAtom = $derived.by(
+  () => caretRange !== void 0 && caretRange.start.node.isInside(editedNode, AtomNode)
+);
+let isSelection = $derived.by(
+  () => caretRange !== void 0 && (caretRange.start.node !== caretRange.end.node || caretRange.start.index !== caretRange.end.index)
+);
+let isItalic = $derived.by(
+  () => caretRange !== void 0 && isSelection === false && caretRange.start.node instanceof TextNode && caretRange.start.node.isItalic(editedNode)
+);
+let isBold = $derived.by(
+  () => caretRange !== void 0 && isSelection === false && caretRange.start.node instanceof TextNode && caretRange.start.node.isBold(editedNode)
+);
+let isLink = $derived.by(
+  () => caretRange !== void 0 && isSelection === false && caretRange.start.node.getClosestParentMatching(
+    editedNode,
+    (p) => p instanceof LinkNode
+  ) !== void 0
+);
+$effect.pre(() => {
+  void caretRange;
+  void editorFocused;
+  untrack(() => {
     if ((caretRange || editorFocused) && isFocused())
-        claimActiveEditor();
-    else
-        activeEditor.set(undefined);
-}
+      claimActiveEditor();
+    else activeEditor.set(void 0);
+  });
+});
 function claimActiveEditor() {
-    activeEditor.set({
-        range: caretRange,
-        coordinate: caretCoordinate,
-        setCaret: (range) => {
-            caretRange = range;
-            element?.focus();
-        },
-        edit: editNode,
-        executor: executeCommand,
-        context: getCaretContext(),
-        root: editedNode,
-        focused: editorFocused,
-    });
+  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);
+setContext("claimeditor", claimActiveEditor);
 </script>
 
 <div
@@ -834,15 +653,18 @@ setContext('claimeditor', claimActiveEditor);
     aria-disabled={locked}
     role="textbox"
     bind:this={element}
-    on:keydown={handleKey}
-    on:keypress={handlePress}
-    on:pointerdown|stopPropagation={handlePointerDown}
-    on:focus={handleFocus}
-    on:blur={handleBlur}
+    onkeydown={handleKey}
+    onkeypress={handlePress}
+    onpointerdown={(event) => {
+        event.stopPropagation();
+        handlePointerDown();
+    }}
+    onfocus={handleFocus}
+    onblur={handleBlur}
     tabindex="0"
 >
     <!-- A view of the root -->
-    <svelte:component this={component} node={editedNode} {placeholder} />
+    <RootView 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 === false && editorFocused}