bookish-press 0.9.4 → 0.10.0

package/dist/components/editor/BookishEditor.svelte

@@ -1,648 +1,684 @@
-<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";
+<script lang="ts">import BookishNode from "../../models/chapter/Node.js";
+import ChapterNode from "../../models/chapter/ChapterNode.js";
+import LinkNode from "../../models/chapter/LinkNode.js";
+import ParagraphNode from "../../models/chapter/ParagraphNode.js";
+import TextNode from "../../models/chapter/TextNode.js";
+import AtomNode from "../../models/chapter/AtomNode.js";
+import FormatNode from "../../models/chapter/FormatNode.js";
+import BlocksNode from "../../models/chapter/BlocksNode.js";
+import ListNode from "../../models/chapter/ListNode.js";
+import TableNode from "../../models/chapter/TableNode.js";
+import MetadataNode from "../../models/chapter/MetadataNode.js";
+import CodeNode from "../../models/chapter/CodeNode.js";
+import BlockNode from "../../models/chapter/BlockNode.js";
+import EmbedNode from "../../models/chapter/EmbedNode.js";
+import ErrorNode from "../../models/chapter/ErrorNode.js";
+import { caretRangeToIndexRange, indexRangeToCaretRange } from "../../models/chapter/Caret.js";
 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";
+import Parser, { Reserved } from "../../models/chapter/Parser.js";
 const IDLE_TIME = 500;
-let {
-  text,
-  parser,
-  save,
-  chapter,
-  autofocus = false,
-  component,
-  placeholder,
-  leasee,
-  lease,
-  inline = false
-} = $props();
+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 caretRange = $state(undefined);
+let caretCoordinate = $state(undefined);
 let lastInputTime = 0;
 let keyboardIdle = $state(true);
 let editorFocused = $state(false);
 let undoStack = $state([]);
 let undoPosition = $state(-1);
-let clipboard = $state(void 0);
+let clipboard = $state(undefined);
 let ignoredInput = $state(false);
 let activeEditor = getCaret();
-let accent = $state(void 0);
+let accent = $state(undefined);
+// 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.
+// Deliberately parses the initial text (untracked); the effect below
+// reparses when the text prop changes externally.
 let editedNode = $state(untrack(() => parser(text)));
 $effect.pre(() => {
-  if (untrack(() => editedNode).toBookdown() !== text) {
-    editedNode = parser(text);
-  }
+	if (untrack(() => editedNode).toBookdown() !== text) {
+		editedNode = parser(text);
+	}
 });
 let locked = $derived(typeof leasee === "string");
+// The component used to render the edited root node.
 let RootView = $derived(component);
 onMount(() => {
-  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
-    );
-  };
+	const caret = editedNode.getFirstCaret();
+	if (caret) caretRange = {
+		start: caret,
+		end: caret
+	};
+	// Focus the editor on load.
+	if (element && autofocus === true) {
+		element.focus();
+	}
+	// Listen to selection changes
+	document.addEventListener("selectionchange", handleSelectionChange);
+	// Stop listening to selection changes
+	return () => {
+		document.removeEventListener("selectionchange", handleSelectionChange);
+	};
 });
 onMount(() => {
-  const keystrokeTimer = setInterval(() => {
-    const isIdle = Date.now() - lastInputTime > IDLE_TIME;
-    if (isIdle) {
-      keyboardIdle = true;
-      ignoredInput = false;
-    }
-  }, IDLE_TIME);
-  return () => {
-    clearTimeout(keystrokeTimer);
-  };
+	// When input happens, set a timer and then see if idle time has elapsed. If it has, track time since last keystroke to control caret blinking behavior.
+	const keystrokeTimer = setInterval(() => {
+		// Remember that we're idle so we can render things accordingly.
+		const isIdle = Date.now() - lastInputTime > IDLE_TIME;
+		if (isIdle) {
+			keyboardIdle = true;
+			ignoredInput = false;
+		}
+	}, IDLE_TIME);
+	return () => {
+		// Clear the timer if we're unmounting or re-rendering.
+		clearTimeout(keystrokeTimer);
+	};
 });
+// When the selection changes and is rendered, set the browser's selection to correspond. This helps with two things:
+// 1) we can rely on the browser to render selections rather than rendering it ourselves.
+// 2) We can measure the caret position, so we can render our own fancy one rather than relying on inconsistent cross browser behavior.
+// This runs after the DOM updates whenever the selection, content, or focus changes.
 $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;
-        }
-      }
-    } else if (editorFocused) document.getSelection()?.empty();
-  }
-  caretCoordinate = newCaretPosition;
+	void caretRange;
+	void editedNode;
+	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(""));
+				if (emptyEnd) endNode.appendChild(document.createTextNode(""));
+				// 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;
+				}
+			}
+		} else if (editorFocused) document.getSelection()?.empty();
+	}
+	// Save the new caret position so we render it.
+	caretCoordinate = newCaretPosition;
 });
 function rangeToCaret(domNode, rangeIndex) {
-  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())
-        };
-    }
-  } 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 void 0;
+	// 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,
+				index: Math.min(rangeIndex, node.getLength())
+			};
+		}
+	} 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,
+				index: 0
+			};
+		}
+	}
+	// Return nothing by default.
+	return undefined;
 }
 function handleSelectionChange() {
-  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 };
-    }
-  }
+	// 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,
+				end
+			};
+		}
+	}
 }
 function getCaretCoordinate(caret) {
-  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: characterRect.top,
-      left: characterRect.left,
-      height: characterRect.height
-    };
-  const elementRect = domNode.getBoundingClientRect();
-  return {
-    top: elementRect.top,
-    left: elementRect.left,
-    height: elementRect.height
-  };
+	if (!(caret.node instanceof TextNode || caret.node instanceof AtomNode)) return undefined;
+	const domNode = document.querySelector(`[data-nodeid='${caret.node.nodeID}`);
+	// If we didn't find the node or there's no text node inside it, then there's no caret position.
+	// This happens temporarily before the useEffect above has a chance to insert zero-width non-breaking space.
+	if (domNode === null || domNode.childNodes.length === 0) return undefined;
+	const range = document.createRange();
+	range.setStart(domNode.childNodes.length === 0 ? domNode : domNode.childNodes[0], domNode.childNodes.length === 0 ? 0 : caret.index);
+	const characterRect = range.getBoundingClientRect();
+	if (characterRect.left > 0) return {
+		top: characterRect.top,
+		left: characterRect.left,
+		height: characterRect.height
+	};
+	const elementRect = domNode.getBoundingClientRect();
+	return {
+		top: elementRect.top,
+		left: elementRect.left,
+		height: elementRect.height
+	};
 }
 function getCaretOnLine(caret, below) {
-  if (caret.node instanceof TextNode || caret.node instanceof AtomNode) {
-    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;
-    }
-  }
-  return caret;
+	if (caret.node instanceof TextNode || caret.node instanceof AtomNode) {
+		// Find the position of the current start node.
+		const startCoordinate = getCaretCoordinate(caret);
+		let candidate = editedNode.getAdjacentCaret(caret, below);
+		if (candidate === undefined) return caret;
+		let previousCandidate = undefined;
+		let previousCoordinate = undefined;
+		if (startCoordinate) {
+			while (candidate.node instanceof TextNode || candidate.node instanceof AtomNode) {
+				const candidateCoordinate = getCaretCoordinate(candidate);
+				// Did we make it to the next line and the character before/after? If we're going down,
+				// we're looking for a top that's below the bottom. If we're going up, we're looking for a bottom
+				// that's below the top.
+				if (candidateCoordinate) {
+					const startTop = startCoordinate.top;
+					const candidateTop = candidateCoordinate.top;
+					const closerCandidate = previousCoordinate && previousCandidate && Math.abs(startCoordinate.left - previousCoordinate.left) < Math.abs(startCoordinate.left - candidateCoordinate.left) ? previousCandidate : candidate;
+					if (below) {
+						// If this candidate is on the line below the start line, then return the last candidate on the line below the start line.
+						if (previousCandidate && previousCoordinate && previousCoordinate.top > startTop + startCoordinate.height && candidateTop > previousCoordinate.top + previousCoordinate.height) return previousCandidate;
+						else if (candidateTop > startTop + startCoordinate.height && candidateCoordinate.left >= startCoordinate.left) return closerCandidate;
+					} else {
+						// If this candidate is on the live above the line above the start line, then return the last candidate on the line above the start line.
+						if (previousCandidate && previousCoordinate && previousCoordinate.top + previousCoordinate.height < startTop && candidateTop + candidateCoordinate.height < previousCoordinate.top) return previousCandidate;
+						// If this is just above the start position, stop and return the closer of the current and previous candidates.
+						if (candidateTop + candidateCoordinate.height < startTop && candidateCoordinate.left <= startCoordinate.left) return closerCandidate;
+					}
+				}
+				// Get the next candidate to consider.
+				const nextCandidate = editedNode.getAdjacentCaret(candidate, below);
+				if (nextCandidate === undefined) break;
+				// If the caret didn't move, we stop searching, something is wrong.
+				if (nextCandidate.node === candidate.node && nextCandidate.index === candidate.index) {
+					break;
+				}
+				// Otherwise, we advance to the next candidate.
+				previousCandidate = candidate;
+				previousCoordinate = candidateCoordinate;
+				candidate = nextCandidate;
+				if (candidate === undefined) return caret;
+			}
+			return candidate;
+		}
+	}
+	// If we didn't find one, just return what we were given.
+	return caret;
 }
 function atParagraphStart() {
-  if (caretRange === 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;
+	if (caretRange === undefined || caretRange.start.node !== caretRange.end.node || caretRange.start.index !== caretRange.end.index || !(caretRange.start.node instanceof TextNode)) return false;
+	const firstCaret = caretRange.start.node.getFormatRoot(editedNode)?.getFirstCaret();
+	return firstCaret !== undefined && firstCaret.node === caretRange.start.node && firstCaret.index === caretRange.start.index;
 }
 function undo() {
-  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 };
+	// 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
+	};
 }
 function redo() {
-  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 };
+	// 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
+	};
 }
 function getCaretContext() {
-  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
-  };
+	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,
+		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) : 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,
+		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
-  };
+	return { getCaretOnLine };
 }
 function handlePress(event) {
-  handleKey(event, true);
+	handleKey(event, true);
 }
 function handleKey(event, press = false) {
-  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;
-      }
-    }
-  }
+	// 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;
+			} 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;
+			} 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;
+			}
+		}
+	}
 }
 function executeCommand(command, key, code) {
-  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;
+	// 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;
+		}
+	}
+	return false;
 }
 async function saveEdit(newRoot, newRange, command) {
-  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();
+	// 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,
+		range: newTextRange
+	}, ...undoPosition > 0 ? newStack.slice(undoPosition) : newStack];
+	// Set the undo position to the last index.
+	undoPosition = 0;
+	// Focus the editor on the new caret location, unless the toolbar is focused.
+	if (!toolbarIsFocused()) element?.focus();
+	// Update the caret
+	claimActiveEditor();
 }
 function updateRoot(newRoot) {
-  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 === 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 }
-      };
-  }
+	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
+			}
+		};
+	}
 }
 function handlePointerDown() {
-  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;
-  }
+	if (!element) return;
+	// Grab focus.
+	element.focus();
+	// Update the caret range to ensure it's positioned correctly, since it depends on relative positioned parents.
+	if (caretRange) caretRange = {
+		start: caretRange.start,
+		end: caretRange.end
+	};
+	// If we've selected a non-TextNode, release it, so the browser is free to select a text node.
+	if (caretRange && !(caretRange.start.node instanceof TextNode || caretRange.start.node instanceof AtomNode || caretRange.start.node instanceof EmbedNode)) {
+		caretRange = undefined;
+	}
 }
 function isFocused() {
-  return document.activeElement === element || element !== null && element?.contains(document.activeElement) || toolbarIsFocused();
+	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) {
-  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 :("
-    );
+	// Set the editor's clipboard.
+	clipboard = node;
+	// Set the OS clipboard.
+	if (navigator.clipboard) {
+		navigator.clipboard.write([new ClipboardItem({
+			"text/plain": new Blob([node.toText()], { type: "text/plain" }),
+			"text/html": new Blob([node.toHTML()], { type: "text/html" })
+		})]);
+	} else window.alert("Your browser doesn't support copying to the clipboard :(");
 }
-function handlePaste(context, 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 === 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 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 = 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;
 }
-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 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 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);
 }
-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
-);
+let isAtom = $derived.by(() => caretRange !== undefined && caretRange.start.node instanceof AtomNode);
+let inAtom = $derived.by(() => caretRange !== undefined && caretRange.start.node.isInside(editedNode, AtomNode));
+let isSelection = $derived.by(() => caretRange !== undefined && (caretRange.start.node !== caretRange.end.node || caretRange.start.index !== caretRange.end.index));
+let isItalic = $derived.by(() => caretRange !== undefined && isSelection === false && caretRange.start.node instanceof TextNode && caretRange.start.node.isItalic(editedNode));
+let isBold = $derived.by(() => caretRange !== undefined && isSelection === false && caretRange.start.node instanceof TextNode && caretRange.start.node.isBold(editedNode));
+let isLink = $derived.by(() => caretRange !== undefined && isSelection === false && caretRange.start.node.getClosestParentMatching(editedNode, (p) => p instanceof LinkNode) !== undefined);
+// When the caret range or editor focus changes, update the active editor.
+// Only those two are tracked; the claim itself reads much more state.
 $effect.pre(() => {
-  void caretRange;
-  void editorFocused;
-  untrack(() => {
-    if ((caretRange || editorFocused) && isFocused())
-      claimActiveEditor();
-    else activeEditor.set(void 0);
-  });
+	void caretRange;
+	void editorFocused;
+	untrack(() => {
+		if ((caretRange || editorFocused) && isFocused()) claimActiveEditor();
+		else activeEditor.set(undefined);
+	});
 });
 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);
 </script>