bookish-press 0.4.46 → 0.4.47

package/{components/editor/Commands.js → src/lib/components/editor/Commands.ts}

@@ -1,22 +1,30 @@
-import CalloutNode from '../../models/chapter/CalloutNode';
-import CitationsNode from '../../models/chapter/CitationsNode';
-import CodeNode from '../../models/chapter/CodeNode';
-import CommentNode from '../../models/chapter/CommentNode';
-import DefinitionNode from '../../models/chapter/DefinitionNode';
-import EmbedNode from '../../models/chapter/EmbedNode';
-import FootnoteNode from '../../models/chapter/FootnoteNode';
-import FormatNode from '../../models/chapter/FormatNode';
-import InlineCodeNode from '../../models/chapter/InlineCodeNode';
-import LabelNode from '../../models/chapter/LabelNode';
-import LinkNode from '../../models/chapter/LinkNode';
-import ListNode from '../../models/chapter/ListNode';
-import ParagraphNode from '../../models/chapter/ParagraphNode';
-import QuoteNode from '../../models/chapter/QuoteNode';
-import RuleNode from '../../models/chapter/RuleNode';
-import TableNode from '../../models/chapter/TableNode';
-import TextNode from '../../models/chapter/TextNode';
-import AtomNode from '../../models/chapter/AtomNode';
-import BlocksNode from '../../models/chapter/BlocksNode';
+import CalloutNode from '$lib/models/chapter/CalloutNode';
+import type Caret from '$lib/models/chapter/Caret';
+import CitationsNode from '$lib/models/chapter/CitationsNode';
+import CodeNode from '$lib/models/chapter/CodeNode';
+import CommentNode from '$lib/models/chapter/CommentNode';
+import DefinitionNode from '$lib/models/chapter/DefinitionNode';
+import EmbedNode from '$lib/models/chapter/EmbedNode';
+import FootnoteNode from '$lib/models/chapter/FootnoteNode';
+import FormatNode from '$lib/models/chapter/FormatNode';
+import InlineCodeNode from '$lib/models/chapter/InlineCodeNode';
+import LabelNode from '$lib/models/chapter/LabelNode';
+import LinkNode from '$lib/models/chapter/LinkNode';
+import ListNode from '$lib/models/chapter/ListNode';
+import ParagraphNode from '$lib/models/chapter/ParagraphNode';
+import QuoteNode from '$lib/models/chapter/QuoteNode';
+import RuleNode from '$lib/models/chapter/RuleNode';
+import TableNode from '$lib/models/chapter/TableNode';
+import TextNode from '$lib/models/chapter/TextNode';
+import AtomNode from '$lib/models/chapter/AtomNode';
+import BlocksNode from '$lib/models/chapter/BlocksNode';
+
+import type RootNode from '$lib/models/chapter/RootNode';
+import type Edit from '$lib/models/chapter/Edit';
+import type Node from '$lib/models/chapter/Node';
+import type CaretContext from './CaretContext';
+import type Command from './Command';
+
 import BoldIcon from './icons/bold.svg?raw';
 import BulletsIcon from './icons/bullets.svg?raw';
 import CalloutIcon from './icons/callout.svg?raw';
@@ -53,6 +61,7 @@ import SuperscriptIcon from './icons/super.svg?raw';
 import TableIcon from './icons/table.svg?raw';
 import UndoIcon from './icons/undo.svg?raw';
 import UnindentIcon from './icons/unindent.svg?raw';
+import type { PasteContent } from './CaretContext';
 /**
  * Icons:
  *      From: https://www.streamlinehq.com/icons/streamline-mini-line
@@ -62,53 +71,93 @@ import UnindentIcon from './icons/unindent.svg?raw';
  *      48 px
  *      stroke width 1
  *  */
-function insertTableRowColumn(context, table, format, row, before) {
+
+function insertTableRowColumn(
+    context: CaretContext,
+    table: TableNode,
+    format: FormatNode,
+    row: boolean,
+    before: boolean
+): Edit {
     const location = table.locate(format);
-    if (location === undefined)
-        return;
-    return rootWithNode(context, table, row
-        ? table.withNewRow(location.row + (before ? 0 : 1))
-        : table.withNewColumn(location.column + (before ? 0 : 1)), (t) => t.getCell(location.row + (row && !before ? 1 : 0), location.column + (!row && !before ? 1 : 0)).getFirstCaret());
+    if (location === undefined) return;
+    return rootWithNode(
+        context,
+        table,
+        row
+            ? table.withNewRow(location.row + (before ? 0 : 1))
+            : table.withNewColumn(location.column + (before ? 0 : 1)),
+        (t) =>
+            (
+                (t as TableNode).getCell(
+                    location.row + (row && !before ? 1 : 0),
+                    location.column + (!row && !before ? 1 : 0)
+                ) as FormatNode
+            ).getFirstCaret()
+    );
 }
-function deleteTableRowColumn(context, table, format, row) {
+
+function deleteTableRowColumn(
+    context: CaretContext,
+    table: TableNode,
+    format: FormatNode,
+    row: boolean
+): Edit {
     const location = table.locate(format);
-    if (location === undefined)
-        return;
-    return rootWithNode(context, table, row
-        ? table.withoutRow(location.row)
-        : table.withoutColumn(location.column), (t) => {
-        return (row
-            ? t.getCell(location.row === table.getRowCount()
-                ? location.row - 1
-                : location.row, location.column)
-            : t.getCell(location.row, location.column === table.getColumnCount()
-                ? location.column - 1
-                : location.column))?.getFirstCaret();
-    });
+    if (location === undefined) return;
+    return rootWithNode(
+        context,
+        table,
+        row
+            ? table.withoutRow(location.row)
+            : table.withoutColumn(location.column),
+        (t) => {
+            return (
+                row
+                    ? (t as TableNode).getCell(
+                          location.row === table.getRowCount()
+                              ? location.row - 1
+                              : location.row,
+                          location.column
+                      )
+                    : (t as TableNode).getCell(
+                          location.row,
+                          location.column === table.getColumnCount()
+                              ? location.column - 1
+                              : location.column
+                      )
+            )?.getFirstCaret();
+        }
+    );
 }
+
 // A helper function that encapsulates boilerplate for replacing a node in a root and updating a caret.
-function rootWithNode(context, original, replacement, caret) {
+function rootWithNode<NodeType extends Node>(
+    context: CaretContext,
+    original: NodeType | undefined,
+    replacement: NodeType | undefined,
+    caret?: (node: NodeType) => Caret | undefined
+): Edit | undefined {
     // If there was no original or replacement, do nothing. Saves commands from having to check.
-    if (original === undefined || replacement === undefined)
-        return;
+    if (original === undefined || replacement === undefined) return;
     // Make the new root. Bail on fail.
     const newRoot = context.root.withNodeReplaced(original, replacement);
-    if (newRoot === undefined)
-        return;
+    if (newRoot === undefined) return;
     // Generate a new caret based on the replacement, if there's a generator. Bail on fail.
     const newCaret = caret?.call(undefined, replacement);
-    if (caret !== undefined && newCaret === undefined)
-        return;
+    if (caret !== undefined && newCaret === undefined) return;
     // Return the edit
     return {
         root: newRoot,
-        range: newCaret !== undefined
-            ? { start: newCaret, end: newCaret }
-            : context.range,
+        range:
+            newCaret !== undefined
+                ? { start: newCaret, end: newCaret }
+                : context.range,
     };
 }
+
 // An ordered list of command specifications for keyboard and mouse input.
-const commands = [
+const commands: Command[] = [
     {
         icon: RowAboveIcon,
         description: 'insert row above',
@@ -119,10 +168,18 @@ const commands = [
         shift: false,
         key: 'ArrowUp',
         visible: (context) => context.table !== undefined,
-        active: (context) => context.table !== undefined && context.format !== undefined,
-        handler: (context) => context.table !== undefined && context.format !== undefined
-            ? insertTableRowColumn(context, context.table, context.format, true, true)
-            : undefined,
+        active: (context) =>
+            context.table !== undefined && context.format !== undefined,
+        handler: (context) =>
+            context.table !== undefined && context.format !== undefined
+                ? insertTableRowColumn(
+                      context,
+                      context.table,
+                      context.format,
+                      true,
+                      true
+                  )
+                : undefined,
     },
     {
         icon: RowBelowIcon,
@@ -134,10 +191,18 @@ const commands = [
         shift: false,
         key: 'ArrowDown',
         visible: (context) => context.table !== undefined,
-        active: (context) => context.table !== undefined && context.format !== undefined,
-        handler: (context) => context.table !== undefined && context.format !== undefined
-            ? insertTableRowColumn(context, context.table, context.format, true, false)
-            : undefined,
+        active: (context) =>
+            context.table !== undefined && context.format !== undefined,
+        handler: (context) =>
+            context.table !== undefined && context.format !== undefined
+                ? insertTableRowColumn(
+                      context,
+                      context.table,
+                      context.format,
+                      true,
+                      false
+                  )
+                : undefined,
     },
     {
         icon: ColumnAfterIcon,
@@ -149,10 +214,18 @@ const commands = [
         shift: false,
         key: 'ArrowRight',
         visible: (context) => context.table !== undefined,
-        active: (context) => context.table !== undefined && context.format !== undefined,
-        handler: (context) => context.table !== undefined && context.format !== undefined
-            ? insertTableRowColumn(context, context.table, context.format, false, false)
-            : undefined,
+        active: (context) =>
+            context.table !== undefined && context.format !== undefined,
+        handler: (context) =>
+            context.table !== undefined && context.format !== undefined
+                ? insertTableRowColumn(
+                      context,
+                      context.table,
+                      context.format,
+                      false,
+                      false
+                  )
+                : undefined,
     },
     {
         icon: ColumnBeforeIcon,
@@ -164,10 +237,18 @@ const commands = [
         shift: false,
         key: 'ArrowLeft',
         visible: (context) => context.table !== undefined,
-        active: (context) => context.table !== undefined && context.format !== undefined,
-        handler: (context) => context.table !== undefined && context.format !== undefined
-            ? insertTableRowColumn(context, context.table, context.format, false, true)
-            : undefined,
+        active: (context) =>
+            context.table !== undefined && context.format !== undefined,
+        handler: (context) =>
+            context.table !== undefined && context.format !== undefined
+                ? insertTableRowColumn(
+                      context,
+                      context.table,
+                      context.format,
+                      false,
+                      true
+                  )
+                : undefined,
     },
     {
         icon: DeleteRowIcon,
@@ -179,12 +260,19 @@ const commands = [
         shift: false,
         key: 'Backspace',
         visible: (context) => context.table !== undefined,
-        active: (context) => context.format !== undefined &&
+        active: (context) =>
+            context.format !== undefined &&
             context.table !== undefined &&
             context.table.getRowCount() > 1,
-        handler: (context) => context.format !== undefined && context.table !== undefined
-            ? deleteTableRowColumn(context, context.table, context.format, true)
-            : undefined,
+        handler: (context) =>
+            context.format !== undefined && context.table !== undefined
+                ? deleteTableRowColumn(
+                      context,
+                      context.table,
+                      context.format,
+                      true
+                  )
+                : undefined,
     },
     {
         icon: DeleteColumnIcon,
@@ -196,12 +284,19 @@ const commands = [
         shift: true,
         key: 'Backspace',
         visible: (context) => context.table !== undefined,
-        active: (context) => context.format !== undefined &&
+        active: (context) =>
+            context.format !== undefined &&
             context.table !== undefined &&
             context.table.getColumnCount() > 1,
-        handler: (context) => context.format !== undefined && context.table !== undefined
-            ? deleteTableRowColumn(context, context.table, context.format, false)
-            : undefined,
+        handler: (context) =>
+            context.format !== undefined && context.table !== undefined
+                ? deleteTableRowColumn(
+                      context,
+                      context.table,
+                      context.format,
+                      false
+                  )
+                : undefined,
     },
     {
         icon: '➡️',
@@ -217,7 +312,10 @@ const commands = [
         handler: (context) => {
             if (context.format) {
                 let caret = context.root
-                    .getNodeAfter(context.format, (node) => node instanceof FormatNode)
+                    .getNodeAfter<FormatNode>(
+                        context.format,
+                        (node): node is FormatNode => node instanceof FormatNode
+                    )
                     ?.getFirstCaret();
                 if (caret)
                     return {
@@ -242,7 +340,10 @@ const commands = [
         handler: (context) => {
             if (context.format) {
                 let caret = context.root
-                    .getNodeBefore(context.format, (node) => node instanceof FormatNode)
+                    .getNodeBefore<FormatNode>(
+                        context.format,
+                        (node): node is FormatNode => node instanceof FormatNode
+                    )
                     ?.getFirstCaret();
                 if (caret)
                     return {
@@ -264,19 +365,25 @@ const commands = [
         visible: () => false,
         active: (context) => context.endIsTextOrAtom,
         handler: (context) => {
-            if (context.end.node instanceof TextNode ||
+            if (
+                context.end.node instanceof TextNode ||
                 context.end.node instanceof AtomNode ||
-                context.end.node instanceof EmbedNode) {
-                const nextCaret = context.root.getAdjacentCaret(context.end, false);
+                context.end.node instanceof EmbedNode
+            ) {
+                const nextCaret = context.root.getAdjacentCaret(
+                    context.end,
+                    false
+                );
                 const sortedRange = context.root.sortRange(context.range);
                 return {
                     root: context.root,
-                    range: nextCaret === undefined
-                        ? {
-                            start: sortedRange.start,
-                            end: sortedRange.start,
-                        }
-                        : { start: nextCaret, end: nextCaret },
+                    range:
+                        nextCaret === undefined
+                            ? {
+                                  start: sortedRange.start,
+                                  end: sortedRange.start,
+                              }
+                            : { start: nextCaret, end: nextCaret },
                 };
             }
         },
@@ -293,10 +400,15 @@ const commands = [
         visible: false,
         active: (context) => context.endIsTextOrAtom,
         handler: (context) => {
-            if (context.end.node instanceof TextNode ||
+            if (
+                context.end.node instanceof TextNode ||
                 context.end.node instanceof AtomNode ||
-                context.end.node instanceof EmbedNode) {
-                const previous = context.end.node.previousWord(context.root, context.end.index);
+                context.end.node instanceof EmbedNode
+            ) {
+                const previous = context.end.node.previousWord(
+                    context.root,
+                    context.end.index
+                );
                 return {
                     root: context.root,
                     range: { start: previous, end: previous },
@@ -340,12 +452,16 @@ const commands = [
         visible: false,
         active: (context) => context.endIsTextOrAtom,
         handler: (context) => {
-            if (context.end.node instanceof TextNode ||
+            if (
+                context.end.node instanceof TextNode ||
                 context.end.node instanceof AtomNode ||
-                context.end.node instanceof EmbedNode) {
-                const previous = context.root.getAdjacentCaret(context.end, false);
-                if (previous === undefined)
-                    return;
+                context.end.node instanceof EmbedNode
+            ) {
+                const previous = context.root.getAdjacentCaret(
+                    context.end,
+                    false
+                );
+                if (previous === undefined) return;
                 return {
                     root: context.root,
                     range: { start: context.start, end: previous },
@@ -365,10 +481,15 @@ const commands = [
         visible: false,
         active: (context) => context.endIsTextOrAtom,
         handler: (context) => {
-            if (context.end.node instanceof TextNode ||
+            if (
+                context.end.node instanceof TextNode ||
                 context.end.node instanceof AtomNode ||
-                context.end.node instanceof EmbedNode) {
-                const previous = context.end.node.previousWord(context.root, context.end.index);
+                context.end.node instanceof EmbedNode
+            ) {
+                const previous = context.end.node.previousWord(
+                    context.root,
+                    context.end.index
+                );
                 return {
                     root: context.root,
                     range: { start: context.start, end: previous },
@@ -412,17 +533,23 @@ const commands = [
         visible: false,
         active: (context) => context.endIsTextOrAtom,
         handler: (context) => {
-            if (context.end.node instanceof TextNode ||
+            if (
+                context.end.node instanceof TextNode ||
                 context.end.node instanceof AtomNode ||
-                context.end.node instanceof EmbedNode) {
-                const nextCaret = context.root.getAdjacentCaret(context.end, true);
+                context.end.node instanceof EmbedNode
+            ) {
+                const nextCaret = context.root.getAdjacentCaret(
+                    context.end,
+                    true
+                );
                 const sortedRange = context.root.sortRange(context.range);
                 // If there is no next caret, move the caret to the largest of the current start and end.
                 return {
                     root: context.root,
-                    range: nextCaret === undefined
-                        ? { start: sortedRange.end, end: sortedRange.end }
-                        : { start: nextCaret, end: nextCaret },
+                    range:
+                        nextCaret === undefined
+                            ? { start: sortedRange.end, end: sortedRange.end }
+                            : { start: nextCaret, end: nextCaret },
                 };
             }
         },
@@ -439,10 +566,15 @@ const commands = [
         visible: false,
         active: (context) => context.endIsTextOrAtom,
         handler: (context) => {
-            if (context.end.node instanceof TextNode ||
+            if (
+                context.end.node instanceof TextNode ||
                 context.end.node instanceof AtomNode ||
-                context.end.node instanceof EmbedNode) {
-                const next = context.end.node.nextWord(context.root, context.end.index);
+                context.end.node instanceof EmbedNode
+            ) {
+                const next = context.end.node.nextWord(
+                    context.root,
+                    context.end.index
+                );
                 return {
                     root: context.root,
                     range: { start: next, end: next },
@@ -484,12 +616,13 @@ const commands = [
         visible: false,
         active: (context) => context.endIsTextOrAtom,
         handler: (context) => {
-            if (context.end.node instanceof TextNode ||
+            if (
+                context.end.node instanceof TextNode ||
                 context.end.node instanceof AtomNode ||
-                context.end.node instanceof EmbedNode) {
+                context.end.node instanceof EmbedNode
+            ) {
                 const next = context.root.getAdjacentCaret(context.end, true);
-                if (next === undefined)
-                    return;
+                if (next === undefined) return;
                 return {
                     root: context.root,
                     range: { start: context.start, end: next },
@@ -509,10 +642,15 @@ const commands = [
         visible: false,
         active: (context) => context.endIsTextOrAtom,
         handler: (context) => {
-            if (context.end.node instanceof TextNode ||
+            if (
+                context.end.node instanceof TextNode ||
                 context.end.node instanceof AtomNode ||
-                context.end.node instanceof EmbedNode) {
-                const previous = context.end.node.nextWord(context.root, context.end.index);
+                context.end.node instanceof EmbedNode
+            ) {
+                const previous = context.end.node.nextWord(
+                    context.root,
+                    context.end.index
+                );
                 return {
                     root: context.root,
                     range: { start: context.start, end: previous },
@@ -568,8 +706,10 @@ const commands = [
                 };
             }
             // If in a code node, expand to the code.
-            else if (context.block instanceof CodeNode &&
-                context.range.start.node === context.block.getCodeNode()) {
+            else if (
+                context.block instanceof CodeNode &&
+                context.range.start.node === context.block.getCodeNode()
+            ) {
                 const code = context.block.getCodeNode();
                 return {
                     root: context.root,
@@ -580,9 +720,11 @@ const commands = [
                 };
             }
             // If in a non paragraph block, expand to the format of whatever format we're in.
-            else if (context.paragraph === undefined &&
+            else if (
+                context.paragraph === undefined &&
                 context.block &&
-                context.format) {
+                context.format
+            ) {
                 return {
                     root: context.root,
                     range: {
@@ -590,8 +732,7 @@ const commands = [
                         end: context.format.getLastCaret(),
                     },
                 };
-            }
-            else {
+            } else {
                 // Find the first and last caret of the entire chapter.
                 const text = context.root?.getTextNodes();
                 if (text && text.length > 0) {
@@ -691,19 +832,31 @@ const commands = [
         visible: false,
         active: true,
         handler: (context) => {
-            if (context.root === undefined)
-                return;
+            if (context.root === undefined) return;
             if (context.isSelection) {
-                const edit = context.root.withRangeFormatted(context.range, undefined);
-                if (edit === undefined)
-                    return;
-                return rootWithNode(context, context.root, edit.root, () => edit.range.start);
-            }
-            else {
-                const edit = context.root.withoutAdjacentContent(context.start, false);
-                if (edit === undefined)
-                    return;
-                return rootWithNode(context, context.root, edit.root, () => edit.range.start);
+                const edit = context.root.withRangeFormatted(
+                    context.range,
+                    undefined
+                );
+                if (edit === undefined) return;
+                return rootWithNode<RootNode>(
+                    context,
+                    context.root,
+                    edit.root as RootNode,
+                    () => edit.range.start
+                );
+            } else {
+                const edit = context.root.withoutAdjacentContent(
+                    context.start,
+                    false
+                );
+                if (edit === undefined) return;
+                return rootWithNode<RootNode>(
+                    context,
+                    context.root,
+                    edit.root as RootNode,
+                    () => edit.range.start
+                );
             }
         },
     },
@@ -719,19 +872,31 @@ const commands = [
         visible: false,
         active: true,
         handler: (context) => {
-            if (context.root === undefined)
-                return;
+            if (context.root === undefined) return;
             if (context.isSelection) {
-                const edit = context.root.withRangeFormatted(context.range, undefined);
-                if (edit === undefined)
-                    return;
-                return rootWithNode(context, context.root, edit.root, () => edit.range.start);
-            }
-            else {
-                const edit = context.root.withoutAdjacentContent(context.start, true);
-                if (edit === undefined)
-                    return;
-                return rootWithNode(context, context.root, edit.root, () => edit.range.start);
+                const edit = context.root.withRangeFormatted(
+                    context.range,
+                    undefined
+                );
+                if (edit === undefined) return;
+                return rootWithNode<RootNode>(
+                    context,
+                    context.root,
+                    edit.root as RootNode,
+                    () => edit.range.start
+                );
+            } else {
+                const edit = context.root.withoutAdjacentContent(
+                    context.start,
+                    true
+                );
+                if (edit === undefined) return;
+                return rootWithNode<RootNode>(
+                    context,
+                    context.root,
+                    edit.root as RootNode,
+                    () => edit.range.start
+                );
             }
         },
     },
@@ -747,14 +912,20 @@ const commands = [
         visible: false,
         active: (context) => context.code !== undefined,
         handler: (context) => {
-            if (context.code?.getCodeNode() !== context.start.node)
-                return;
-            const newText = context.start.node.withCharacterAt('\n', context.start.index);
-            if (newText === undefined)
-                return;
-            return rootWithNode(context, context.start.node, newText, (text) => {
-                return { node: text, index: context.start.index + 1 };
-            });
+            if (context.code?.getCodeNode() !== context.start.node) return;
+            const newText = context.start.node.withCharacterAt(
+                '\n',
+                context.start.index
+            );
+            if (newText === undefined) return;
+            return rootWithNode(
+                context,
+                context.start.node,
+                newText,
+                (text) => {
+                    return { node: text, index: context.start.index + 1 };
+                }
+            );
         },
     },
     {
@@ -769,52 +940,69 @@ const commands = [
         visible: false,
         active: (context) => context.list !== undefined,
         handler: (context) => {
-            if (context.list === undefined)
-                return;
+            if (context.list === undefined) return;
             const lastItem = context.list.getLastItem();
             const lastCaret = lastItem?.getLastCaret();
             // If we're at the last item in the list and it's empty, then add a
-            if (lastItem !== undefined &&
+            if (
+                lastItem !== undefined &&
                 lastCaret !== undefined &&
                 lastCaret.node instanceof TextNode &&
                 lastCaret.node.getLength() === 0 &&
                 lastCaret.node === context.end.node &&
-                lastCaret.index === context.end.index) {
+                lastCaret.index === context.end.index
+            ) {
                 const listParent = context.list.getParent(context.root);
                 if (listParent instanceof ListNode) {
                     const newSublist = context.list.withoutItem(lastItem);
-                    if (newSublist === undefined)
-                        return;
-                    const newListWithoutSublistItem = listParent.withChildReplaced(context.list, newSublist);
-                    if (newListWithoutSublistItem === undefined)
-                        return;
-                    const newListWithSublistItem = newListWithoutSublistItem.withItemAfter(lastItem, newSublist);
-                    if (newListWithSublistItem === undefined)
-                        return;
-                    return rootWithNode(context, listParent, newListWithSublistItem, () => lastCaret);
-                }
-                else if (listParent instanceof BlocksNode) {
+                    if (newSublist === undefined) return;
+                    const newListWithoutSublistItem =
+                        listParent.withChildReplaced(context.list, newSublist);
+                    if (newListWithoutSublistItem === undefined) return;
+                    const newListWithSublistItem =
+                        newListWithoutSublistItem.withItemAfter(
+                            lastItem,
+                            newSublist
+                        );
+                    if (newListWithSublistItem === undefined) return;
+                    return rootWithNode(
+                        context,
+                        listParent,
+                        newListWithSublistItem,
+                        () => lastCaret
+                    );
+                } else if (listParent instanceof BlocksNode) {
                     const listWithoutItem = context.list.withoutItem(lastItem);
-                    if (listWithoutItem === undefined)
-                        return;
+                    if (listWithoutItem === undefined) return;
                     const newBlocks = listParent
                         .withChildReplaced(context.list, listWithoutItem)
-                        ?.withBlockInsertedAfter(listWithoutItem, new ParagraphNode(0, lastItem));
-                    if (newBlocks === undefined)
-                        return;
-                    return rootWithNode(context, listParent, newBlocks, () => lastCaret);
+                        ?.withBlockInsertedAfter(
+                            listWithoutItem,
+                            new ParagraphNode(0, lastItem)
+                        );
+                    if (newBlocks === undefined) return;
+                    return rootWithNode(
+                        context,
+                        listParent,
+                        newBlocks,
+                        () => lastCaret
+                    );
                 }
-            }
-            else
-                return rootWithNode(context, context.list, context.list?.withItemSplit(context.range.start), (newList) => {
-                    const index = context.list?.getItemContaining(context.range.start);
-                    if (index === undefined)
-                        return;
-                    const item = newList.getItem(index + 1);
-                    if (item === undefined)
-                        return;
-                    return item.getFirstCaret();
-                });
+            } else
+                return rootWithNode(
+                    context,
+                    context.list,
+                    context.list?.withItemSplit(context.range.start),
+                    (newList) => {
+                        const index = context.list?.getItemContaining(
+                            context.range.start
+                        );
+                        if (index === undefined) return;
+                        const item = (newList as ListNode).getItem(index + 1);
+                        if (item === undefined) return;
+                        return item.getFirstCaret();
+                    }
+                );
         },
     },
     {
@@ -827,12 +1015,17 @@ const commands = [
         shift: false,
         key: 'Enter',
         visible: false,
-        active: (context) => context.atom === undefined && context.blocks !== undefined,
+        active: (context) =>
+            context.atom === undefined && context.blocks !== undefined,
         handler: (context) => {
             const edit = context.blocks?.withSelectionSplit(context.range);
-            if (edit === undefined)
-                return;
-            return rootWithNode(context, context.blocks, edit.root, () => edit.range.start);
+            if (edit === undefined) return;
+            return rootWithNode(
+                context,
+                context.blocks,
+                edit.root,
+                () => edit.range.start
+            );
         },
     },
     {
@@ -846,7 +1039,12 @@ const commands = [
         key: 'Tab',
         visible: (context) => context.list !== undefined,
         active: (context) => context.list !== undefined,
-        handler: (context) => rootWithNode(context, context.blocks, context.blocks?.withListsIndented(context.range, true)),
+        handler: (context) =>
+            rootWithNode(
+                context,
+                context.blocks,
+                context.blocks?.withListsIndented(context.range, true)
+            ),
     },
     {
         icon: UnindentIcon,
@@ -858,9 +1056,15 @@ const commands = [
         shift: true,
         key: 'Tab',
         visible: (context) => context.list !== undefined,
-        active: (context) => context.list !== undefined &&
+        active: (context) =>
+            context.list !== undefined &&
             context.list.isInside(context.root, ListNode),
-        handler: (context) => rootWithNode(context, context.blocks, context.blocks?.withListsIndented(context.range, false)),
+        handler: (context) =>
+            rootWithNode(
+                context,
+                context.blocks,
+                context.blocks?.withListsIndented(context.range, false)
+            ),
     },
     {
         icon: ClearIcon,
@@ -873,7 +1077,8 @@ const commands = [
         key: '0',
         visible: true,
         active: (context) => context.startIsText || context.endIsText,
-        handler: (context) => context.root.withRangeFormatted(context.range, ''),
+        handler: (context) =>
+            context.root.withRangeFormatted(context.range, ''),
     },
     {
         icon: BoldIcon,
@@ -886,7 +1091,8 @@ const commands = [
         key: 'b',
         visible: true,
         active: (context) => context.startIsText || context.endIsText,
-        handler: (context) => context.root.withRangeFormatted(context.range, '*'),
+        handler: (context) =>
+            context.root.withRangeFormatted(context.range, '*'),
     },
     {
         description: 'italic',
@@ -899,7 +1105,8 @@ const commands = [
         key: 'i',
         visible: true,
         active: (context) => context.startIsText || context.endIsText,
-        handler: (context) => context.root.withRangeFormatted(context.range, '_'),
+        handler: (context) =>
+            context.root.withRangeFormatted(context.range, '_'),
     },
     {
         icon: SubscriptIcon,
@@ -912,7 +1119,8 @@ const commands = [
         key: ',',
         visible: true,
         active: (context) => context.startIsText || context.endIsText,
-        handler: (context) => context.root.withRangeFormatted(context.range, 'v'),
+        handler: (context) =>
+            context.root.withRangeFormatted(context.range, 'v'),
     },
     {
         icon: SuperscriptIcon,
@@ -925,7 +1133,8 @@ const commands = [
         key: '.',
         visible: true,
         active: (context) => context.startIsText || context.endIsText,
-        handler: (context) => context.root.withRangeFormatted(context.range, '^'),
+        handler: (context) =>
+            context.root.withRangeFormatted(context.range, '^'),
     },
     {
         icon: CodeIcon,
@@ -938,9 +1147,20 @@ const commands = [
         key: 'e',
         visible: true,
         active: (context) => context.startIsText || context.endIsText,
-        handler: (context) => context.meta instanceof InlineCodeNode
-            ? rootWithNode(context, context.format, context.format?.withSegmentReplaced(context.meta, context.meta.getText()))
-            : context.root.withSegmentAtSelection(context.range, (text) => new InlineCodeNode(new TextNode(text))),
+        handler: (context) =>
+            context.meta instanceof InlineCodeNode
+                ? rootWithNode(
+                      context,
+                      context.format,
+                      context.format?.withSegmentReplaced(
+                          context.meta,
+                          context.meta.getText()
+                      )
+                  )
+                : context.root.withSegmentAtSelection(
+                      context.range,
+                      (text) => new InlineCodeNode(new TextNode(text))
+                  ),
     },
     {
         icon: LinkIcon,
@@ -952,11 +1172,23 @@ const commands = [
         shift: false,
         key: 'k',
         visible: true,
-        active: (context) => (context.atom === undefined && context.meta === undefined) ||
+        active: (context) =>
+            (context.atom === undefined && context.meta === undefined) ||
             context.meta instanceof LinkNode,
-        handler: (context) => context.meta instanceof LinkNode
-            ? rootWithNode(context, context.format, context.format?.withSegmentReplaced(context.meta, context.meta.getText()))
-            : context.root.withSegmentAtSelection(context.range, (text) => new LinkNode(new TextNode(text))),
+        handler: (context) =>
+            context.meta instanceof LinkNode
+                ? rootWithNode(
+                      context,
+                      context.format,
+                      context.format?.withSegmentReplaced(
+                          context.meta,
+                          context.meta.getText()
+                      )
+                  )
+                : context.root.withSegmentAtSelection(
+                      context.range,
+                      (text) => new LinkNode(new TextNode(text))
+                  ),
     },
     {
         icon: DefineIcon,
@@ -967,15 +1199,28 @@ const commands = [
         alt: false,
         shift: false,
         key: 'd',
-        visible: (context) => context.chapter &&
+        visible: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        active: (context) => context.chapter &&
+        active: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        handler: (context) => context.meta instanceof DefinitionNode
-            ? rootWithNode(context, context.format, context.format?.withSegmentReplaced(context.meta, context.meta.getText()))
-            : context.root.withSegmentAtSelection(context.range, (text) => new DefinitionNode(new TextNode(text))),
+        handler: (context) =>
+            context.meta instanceof DefinitionNode
+                ? rootWithNode(
+                      context,
+                      context.format,
+                      context.format?.withSegmentReplaced(
+                          context.meta,
+                          context.meta.getText()
+                      )
+                  )
+                : context.root.withSegmentAtSelection(
+                      context.range,
+                      (text) => new DefinitionNode(new TextNode(text))
+                  ),
     },
     {
         icon: FootnoteIcon,
@@ -986,13 +1231,20 @@ const commands = [
         alt: false,
         shift: false,
         key: 'f',
-        visible: (context) => context.chapter &&
+        visible: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        active: (context) => context.chapter &&
+        active: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        handler: (context) => context.root.withSegmentAtSelection(context.range, (text) => new FootnoteNode(new FormatNode('', [new TextNode(text)]))),
+        handler: (context) =>
+            context.root.withSegmentAtSelection(
+                context.range,
+                (text) =>
+                    new FootnoteNode(new FormatNode('', [new TextNode(text)]))
+            ),
     },
     {
         icon: CitationIcon,
@@ -1003,13 +1255,19 @@ const commands = [
         alt: false,
         shift: false,
         key: 'o',
-        visible: (context) => context.chapter &&
+        visible: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        active: (context) => context.chapter &&
+        active: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        handler: (context) => context.root.withSegmentAtSelection(context.range, () => new CitationsNode([])),
+        handler: (context) =>
+            context.root.withSegmentAtSelection(
+                context.range,
+                () => new CitationsNode([])
+            ),
     },
     {
         icon: LabelIcon,
@@ -1020,13 +1278,19 @@ const commands = [
         alt: false,
         shift: false,
         key: 'l',
-        visible: (context) => context.chapter &&
+        visible: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        active: (context) => context.chapter &&
+        active: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        handler: (context) => context.root.withSegmentAtSelection(context.range, () => new LabelNode('')),
+        handler: (context) =>
+            context.root.withSegmentAtSelection(
+                context.range,
+                () => new LabelNode('')
+            ),
     },
     {
         icon: CommentIcon,
@@ -1037,13 +1301,20 @@ const commands = [
         alt: false,
         shift: false,
         key: "'",
-        visible: (context) => context.chapter &&
+        visible: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        active: (context) => context.chapter &&
+        active: (context) =>
+            context.chapter &&
             context.atom === undefined &&
             context.meta === undefined,
-        handler: (context) => context.root.withSegmentAtSelection(context.range, (text) => new CommentNode(new FormatNode('', [new TextNode(text)]))),
+        handler: (context) =>
+            context.root.withSegmentAtSelection(
+                context.range,
+                (text) =>
+                    new CommentNode(new FormatNode('', [new TextNode(text)]))
+            ),
     },
     {
         icon: ParagraphIcon,
@@ -1054,14 +1325,19 @@ const commands = [
         alt: true,
         shift: false,
         code: 'Digit0',
-        visible: (context) => context.paragraph !== undefined &&
+        visible: (context) =>
+            context.paragraph !== undefined &&
             context.paragraph.getLevel() !== 0,
-        active: (context) => context.paragraph !== undefined &&
+        active: (context) =>
+            context.paragraph !== undefined &&
             context.paragraph.getLevel() !== 0,
         handler: (context) => {
-            if (context.paragraph === undefined)
-                return;
-            return rootWithNode(context, context.paragraph, context.paragraph.withLevel(0));
+            if (context.paragraph === undefined) return;
+            return rootWithNode(
+                context,
+                context.paragraph,
+                context.paragraph.withLevel(0)
+            );
         },
     },
     {
@@ -1074,9 +1350,15 @@ const commands = [
         shift: false,
         code: 'Digit1',
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined &&
+        active: (context) =>
+            context.paragraph !== undefined &&
             context.paragraph.getLevel() !== 1,
-        handler: (context) => rootWithNode(context, context.paragraph, context.paragraph?.withLevel(1)),
+        handler: (context) =>
+            rootWithNode(
+                context,
+                context.paragraph,
+                context.paragraph?.withLevel(1)
+            ),
     },
     {
         icon: Header2Icon,
@@ -1088,9 +1370,15 @@ const commands = [
         shift: false,
         code: 'Digit2',
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined &&
+        active: (context) =>
+            context.paragraph !== undefined &&
             context.paragraph.getLevel() !== 2,
-        handler: (context) => rootWithNode(context, context.paragraph, context.paragraph?.withLevel(2)),
+        handler: (context) =>
+            rootWithNode(
+                context,
+                context.paragraph,
+                context.paragraph?.withLevel(2)
+            ),
     },
     {
         icon: Header3Icon,
@@ -1102,9 +1390,15 @@ const commands = [
         shift: false,
         code: 'Digit3',
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined &&
+        active: (context) =>
+            context.paragraph !== undefined &&
             context.paragraph.getLevel() !== 3,
-        handler: (context) => rootWithNode(context, context.paragraph, context.paragraph?.withLevel(3)),
+        handler: (context) =>
+            rootWithNode(
+                context,
+                context.paragraph,
+                context.paragraph?.withLevel(3)
+            ),
     },
     {
         icon: RuleIcon,
@@ -1116,10 +1410,19 @@ const commands = [
         shift: false,
         key: 'u',
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined && context.atParagraphStart,
-        handler: (context) => context.paragraph
-            ? rootWithNode(context, context.blocks, context.blocks?.withBlockInsertedBefore(context.paragraph, new RuleNode()))
-            : undefined,
+        active: (context) =>
+            context.paragraph !== undefined && context.atParagraphStart,
+        handler: (context) =>
+            context.paragraph
+                ? rootWithNode(
+                      context,
+                      context.blocks,
+                      context.blocks?.withBlockInsertedBefore(
+                          context.paragraph,
+                          new RuleNode()
+                      )
+                  )
+                : undefined,
     },
     {
         icon: CalloutIcon,
@@ -1131,13 +1434,22 @@ const commands = [
         shift: true,
         key: '-',
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined && context.atParagraphStart,
+        active: (context) =>
+            context.paragraph !== undefined && context.atParagraphStart,
         handler: (context) => {
             // If the caret is in a paragraph in a blocks node, insert a callout before the current paragraph.
             if (context.blocks && context.paragraph) {
                 // Make a new callout node with an empty paragraph, insert it before the paragraph the caret is in, and place the caret inside the empty paragraph.
                 const newParagraph = new ParagraphNode();
-                return rootWithNode(context, context.blocks, context.blocks.withBlockInsertedBefore(context.paragraph, new CalloutNode([newParagraph])), () => newParagraph.getFirstCaret());
+                return rootWithNode(
+                    context,
+                    context.blocks,
+                    context.blocks.withBlockInsertedBefore(
+                        context.paragraph,
+                        new CalloutNode([newParagraph])
+                    ),
+                    () => newParagraph.getFirstCaret()
+                );
             }
         },
     },
@@ -1151,12 +1463,21 @@ const commands = [
         shift: true,
         key: "'",
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined && context.atParagraphStart,
+        active: (context) =>
+            context.paragraph !== undefined && context.atParagraphStart,
         handler: (context) => {
             if (context.blocks && context.paragraph) {
                 // Make a new quote and place the caret inside the quote's first empty paragraph.
                 const newParagraph = new ParagraphNode();
-                return rootWithNode(context, context.blocks, context.blocks.withBlockInsertedBefore(context.paragraph, new QuoteNode([newParagraph])), () => newParagraph.getFirstCaret());
+                return rootWithNode(
+                    context,
+                    context.blocks,
+                    context.blocks.withBlockInsertedBefore(
+                        context.paragraph,
+                        new QuoteNode([newParagraph])
+                    ),
+                    () => newParagraph.getFirstCaret()
+                );
             }
         },
     },
@@ -1170,13 +1491,22 @@ const commands = [
         shift: true,
         key: 's',
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined && context.atParagraphStart,
+        active: (context) =>
+            context.paragraph !== undefined && context.atParagraphStart,
         handler: (context) => {
             if (context.blocks && context.paragraph) {
                 const newCode = new CodeNode(new TextNode(), 'plaintext', '|');
-                return rootWithNode(context, context.blocks, context.blocks.withBlockInsertedBefore(context.paragraph, newCode), () => {
-                    return { node: newCode.getCodeNode(), index: 0 };
-                });
+                return rootWithNode(
+                    context,
+                    context.blocks,
+                    context.blocks.withBlockInsertedBefore(
+                        context.paragraph,
+                        newCode
+                    ),
+                    () => {
+                        return { node: newCode.getCodeNode(), index: 0 };
+                    }
+                );
             }
         },
     },
@@ -1190,12 +1520,21 @@ const commands = [
         shift: true,
         key: 'i',
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined && context.atParagraphStart,
+        active: (context) =>
+            context.paragraph !== undefined && context.atParagraphStart,
         handler: (context) => {
             if (context.blocks && context.paragraph) {
                 // Place the caret inside the code's code node.
                 const newEmbed = new EmbedNode('', '');
-                return rootWithNode(context, context.blocks, context.blocks.withBlockInsertedBefore(context.paragraph, newEmbed), () => newEmbed.getCaption().getFirstCaret());
+                return rootWithNode(
+                    context,
+                    context.blocks,
+                    context.blocks.withBlockInsertedBefore(
+                        context.paragraph,
+                        newEmbed
+                    ),
+                    () => newEmbed.getCaption().getFirstCaret()
+                );
             }
         },
     },
@@ -1209,23 +1548,36 @@ const commands = [
         shift: false,
         key: '[',
         visible: (context) => context.paragraph !== undefined,
-        active: (context) => context.paragraph !== undefined && context.atParagraphStart,
+        active: (context) =>
+            context.paragraph !== undefined && context.atParagraphStart,
         handler: (context) => {
             if (context.blocks && context.paragraph) {
                 // Create a 3x3 of table rows and columns
                 // Return a caret corresponding to the first cell.
-                const newRows = [[], [], []];
+                const newRows: FormatNode[][] = [[], [], []];
                 for (let r = 0; r < Math.max(1, 3); r++) {
                     for (let c = 0; c < Math.max(1, 3); c++)
                         newRows[r].push(new FormatNode('', [new TextNode()]));
                 }
-                const newTable = new TableNode(newRows, '|', new FormatNode('', [new TextNode()]));
-                return rootWithNode(context, context.blocks, context.blocks.withBlockInsertedBefore(context.paragraph, newTable), () => {
-                    return {
-                        node: newTable.getRows()[0][0].getTextNodes()[0],
-                        index: 0,
-                    };
-                });
+                const newTable = new TableNode(
+                    newRows,
+                    '|',
+                    new FormatNode('', [new TextNode()])
+                );
+                return rootWithNode(
+                    context,
+                    context.blocks,
+                    context.blocks.withBlockInsertedBefore(
+                        context.paragraph,
+                        newTable
+                    ),
+                    () => {
+                        return {
+                            node: newTable.getRows()[0][0].getTextNodes()[0],
+                            index: 0,
+                        };
+                    }
+                );
             }
         },
     },
@@ -1238,9 +1590,16 @@ const commands = [
         alt: false,
         shift: true,
         key: '7',
-        visible: (context) => context.paragraph !== undefined && context.list === undefined,
-        active: (context) => context.paragraph !== undefined && context.list === undefined,
-        handler: (context) => rootWithNode(context, context.blocks, context.blocks?.withParagraphsAsLists(context.range, false)),
+        visible: (context) =>
+            context.paragraph !== undefined && context.list === undefined,
+        active: (context) =>
+            context.paragraph !== undefined && context.list === undefined,
+        handler: (context) =>
+            rootWithNode(
+                context,
+                context.blocks,
+                context.blocks?.withParagraphsAsLists(context.range, false)
+            ),
     },
     {
         icon: NumbersIcon,
@@ -1251,9 +1610,16 @@ const commands = [
         alt: false,
         shift: true,
         key: '8',
-        visible: (context) => context.paragraph !== undefined && context.list === undefined,
-        active: (context) => context.paragraph !== undefined && context.list === undefined,
-        handler: (context) => rootWithNode(context, context.blocks, context.blocks?.withParagraphsAsLists(context.range, true)),
+        visible: (context) =>
+            context.paragraph !== undefined && context.list === undefined,
+        active: (context) =>
+            context.paragraph !== undefined && context.list === undefined,
+        handler: (context) =>
+            rootWithNode(
+                context,
+                context.blocks,
+                context.blocks?.withParagraphsAsLists(context.range, true)
+            ),
     },
     {
         icon: BulletsIcon,
@@ -1264,11 +1630,18 @@ const commands = [
         alt: false,
         shift: true,
         key: '7',
-        visible: (context) => context.list !== undefined && context.list.isNumbered(),
-        active: (context) => context.list !== undefined && context.list.isNumbered(),
-        handler: (context) => context.list
-            ? rootWithNode(context, context.blocks, context.blocks?.withListAsStyle(context.list, false))
-            : undefined,
+        visible: (context) =>
+            context.list !== undefined && context.list.isNumbered(),
+        active: (context) =>
+            context.list !== undefined && context.list.isNumbered(),
+        handler: (context) =>
+            context.list
+                ? rootWithNode(
+                      context,
+                      context.blocks,
+                      context.blocks?.withListAsStyle(context.list, false)
+                  )
+                : undefined,
     },
     {
         icon: NumbersIcon,
@@ -1279,11 +1652,18 @@ const commands = [
         alt: false,
         shift: true,
         key: '8',
-        visible: (context) => context.list !== undefined && !context.list.isNumbered(),
-        active: (context) => context.list !== undefined && !context.list.isNumbered(),
-        handler: (context) => context.list
-            ? rootWithNode(context, context.blocks, context.blocks?.withListAsStyle(context.list, true))
-            : undefined,
+        visible: (context) =>
+            context.list !== undefined && !context.list.isNumbered(),
+        active: (context) =>
+            context.list !== undefined && !context.list.isNumbered(),
+        handler: (context) =>
+            context.list
+                ? rootWithNode(
+                      context,
+                      context.blocks,
+                      context.blocks?.withListAsStyle(context.list, true)
+                  )
+                : undefined,
     },
     {
         icon: ParagraphIcon,
@@ -1296,7 +1676,12 @@ const commands = [
         key: ['7', '8'],
         visible: (context) => context.list !== undefined,
         active: (context) => context.list !== undefined,
-        handler: (context) => rootWithNode(context, context.blocks, context.blocks?.withListsAsParagraphs(context.range)),
+        handler: (context) =>
+            rootWithNode(
+                context,
+                context.blocks,
+                context.blocks?.withListsAsParagraphs(context.range)
+            ),
     },
     {
         icon: UndoIcon,
@@ -1308,7 +1693,8 @@ const commands = [
         shift: false,
         key: 'z',
         visible: true,
-        active: (context) => context.undoStack.length > 0 &&
+        active: (context) =>
+            context.undoStack.length > 0 &&
             context.undoPosition < context.undoStack.length - 1,
         handler: (context) => context.undo(),
     },
@@ -1337,15 +1723,22 @@ const commands = [
         visible: true,
         active: (context) => context.root !== undefined && context.isSelection,
         handler: (context) => {
-            if (context.root === undefined)
-                return;
+            if (context.root === undefined) return;
             // Save the copied content to the clipboard
             const copy = context.root.copyRange(context.range);
-            const edit = context.root.withRangeFormatted(context.range, undefined);
-            if (edit === undefined || copy === undefined)
-                return;
+            const edit = context.root.withRangeFormatted(
+                context.range,
+                undefined
+            );
+            if (edit === undefined || copy === undefined) return;
             context.handleCopy(copy);
-            return rootWithNode(context, context.root, edit.root, () => edit.range.start);
+
+            return rootWithNode<RootNode>(
+                context,
+                context.root,
+                edit.root as RootNode,
+                () => edit.range.start
+            );
         },
     },
     {
@@ -1360,12 +1753,10 @@ const commands = [
         visible: true,
         active: (context) => context.isSelection,
         handler: (context) => {
-            if (context.root === undefined)
-                return;
+            if (context.root === undefined) return;
             // Save the copied content to the clipboard
             const copy = context.root.copyRange(context.range);
-            if (copy !== undefined)
-                context.handleCopy(copy);
+            if (copy !== undefined) context.handleCopy(copy);
             return undefined;
         },
     },
@@ -1381,11 +1772,11 @@ const commands = [
         visible: true,
         active: () => true,
         handler: (context) => {
-            if (context.root === undefined)
-                return undefined;
+            if (context.root === undefined) return undefined;
+
             // See if there's something on the clipboard.
             if (navigator.clipboard) {
-                navigator.clipboard.read().then((items) => {
+                navigator.clipboard.read().then((items: ClipboardItems) => {
                     // If there's nothing, paste whatever is on the editor clipboard, if there is something.
                     if (items.length === 0 && context.clipboard !== undefined)
                         context.handlePaste(context, context.clipboard, true);
@@ -1396,27 +1787,37 @@ const commands = [
                         if (item) {
                             async function gatherClipboard() {
                                 // Eventually we should add HTML support.
-                                const contents = {
+                                const contents: PasteContent = {
                                     plain: undefined,
                                 };
                                 try {
                                     {
-                                        const blob = await item.getType('text/plain');
+                                        const blob = await item.getType(
+                                            'text/plain'
+                                        );
                                         const text = await blob.text();
                                         contents.plain = text;
                                     }
-                                    context.handlePaste(context, contents, true);
-                                }
-                                catch (err) { }
+                                    context.handlePaste(
+                                        context,
+                                        contents,
+                                        true
+                                    );
+                                } catch (err) {}
                             }
                             gatherClipboard();
                         }
                         // Otherwise, try pasting what's on the app clipboard.
                         else if (context.clipboard !== undefined)
-                            return context.handlePaste(context, context.clipboard, false);
+                            return context.handlePaste(
+                                context,
+                                context.clipboard,
+                                false
+                            );
                     }
                 });
             }
+
             // Return the current caret to avoid unhandled command feedback.
             return { root: context.root, range: context.range };
         },
@@ -1432,7 +1833,8 @@ const commands = [
         shift: undefined,
         key: (key) => key.length === 1,
         visible: false,
-        active: (context, key) => context && key !== undefined && key.length === 1,
+        active: (context, key) =>
+            context && key !== undefined && key.length === 1,
         handler: (context, utilities, key) => {
             utilities;
             const range = context.range;
@@ -1440,49 +1842,62 @@ const commands = [
                 // Insert at the start.
                 let sortedRange = range.start.node.sortRange(range);
                 let insertionPoint = sortedRange.start;
-                let newRoot = context.root;
+                let newRoot: RootNode | undefined = context.root;
+
                 // Not a text node? Fail.
-                if (!(insertionPoint.node instanceof TextNode))
-                    return;
+                if (!(insertionPoint.node instanceof TextNode)) return;
+
                 // If there's a selection, remove it before inserting, and insert at the caret returned.
                 if (context.isSelection) {
                     if (context.code) {
-                        if (context.code.getCodeNode() ===
-                            sortedRange.start.node) {
-                            const newText = insertionPoint.node.withoutRange(sortedRange);
-                            if (newText === undefined)
-                                return;
-                            const edit = newRoot.withNodeReplaced(insertionPoint.node, newText);
-                            if (edit === undefined)
-                                return;
+                        if (
+                            context.code.getCodeNode() ===
+                            sortedRange.start.node
+                        ) {
+                            const newText =
+                                insertionPoint.node.withoutRange(sortedRange);
+                            if (newText === undefined) return;
+                            const edit = newRoot.withNodeReplaced(
+                                insertionPoint.node,
+                                newText
+                            );
+                            if (edit === undefined) return;
                             newRoot = edit;
                             insertionPoint = {
                                 node: newText,
                                 index: sortedRange.start.index,
                             };
                         }
-                    }
-                    else {
+                    } else {
                         // Try to remove the range.
-                        let edit = newRoot.withRangeFormatted(sortedRange, undefined);
+                        let edit = newRoot.withRangeFormatted(
+                            sortedRange,
+                            undefined
+                        );
                         // If we fail, fail to insert at the selection.
-                        if (edit === undefined)
-                            return;
-                        newRoot = edit.root;
+                        if (edit === undefined) return;
+                        newRoot = edit.root as RootNode;
                         insertionPoint = edit.range.start;
                     }
                 }
+
                 // Not a text node? Fail.
-                if (!(insertionPoint.node instanceof TextNode))
-                    return;
+                if (!(insertionPoint.node instanceof TextNode)) return;
+
                 // Update the text node.
-                const newText = insertionPoint.node.withCharacterAt(key, insertionPoint.index);
-                if (newText === undefined)
-                    return;
+                const newText = insertionPoint.node.withCharacterAt(
+                    key,
+                    insertionPoint.index
+                );
+                if (newText === undefined) return;
+
                 // Replace the text.
-                newRoot = newRoot.withNodeReplaced(insertionPoint.node, newText);
-                if (newRoot === undefined)
-                    return;
+                newRoot = newRoot.withNodeReplaced(
+                    insertionPoint.node,
+                    newText
+                );
+                if (newRoot === undefined) return;
+
                 // Update the chapter
                 return rootWithNode(context, context.root, newRoot, () => {
                     return { node: newText, index: insertionPoint.index + 1 };