@jant/core 0.6.16 → 0.7.1

package/src/client/tiptap/__tests__/bubble-menu.test.ts

@@ -0,0 +1,110 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { createEditorExtensions } from "../extensions.js";
+import { clearFormatting, toggleMarkAndExit } from "../bubble-menu.js";
+
+const editors: Editor[] = [];
+
+function createEditor(content: string): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: createEditorExtensions(),
+    content,
+  });
+
+  editors.push(editor);
+  return editor;
+}
+
+function getBubbleMenu(editor: Editor): HTMLElement {
+  const el = (editor.options.element as HTMLElement)
+    .closest("body")
+    ?.querySelector<HTMLElement>(".tiptap-bubble-menu");
+  if (!el) throw new Error("Bubble menu was never created");
+  return el;
+}
+
+function isVisible(editor: Editor): boolean {
+  return getBubbleMenu(editor).style.display !== "none";
+}
+
+afterEach(() => {
+  while (editors.length) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("bubble menu visibility", () => {
+  it("stays hidden while the selection is empty", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.commands.focus();
+
+    expect(isVisible(editor)).toBe(false);
+  });
+
+  it("shows for a text selection", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.view.dispatch(
+      editor.state.tr.setSelection(
+        TextSelection.create(editor.state.doc, 1, 8),
+      ),
+    );
+
+    expect(isVisible(editor)).toBe(true);
+  });
+
+  it("shows for select-all, which is an AllSelection rather than a text selection", () => {
+    const editor = createEditor("<p>First line</p><p>Second line</p>");
+    editor.commands.selectAll();
+
+    expect(isVisible(editor)).toBe(true);
+  });
+
+  it("stays hidden when select-all covers an empty document", () => {
+    const editor = createEditor("<p></p>");
+    editor.commands.selectAll();
+
+    expect(isVisible(editor)).toBe(false);
+  });
+
+  it("hides again once the selection collapses", () => {
+    const editor = createEditor("<p>A quiet note</p>");
+    editor.commands.selectAll();
+    expect(isVisible(editor)).toBe(true);
+
+    editor.commands.setTextSelection(2);
+
+    expect(isVisible(editor)).toBe(false);
+  });
+});
+
+describe("bubble menu actions on a document-wide selection", () => {
+  it("bolds the whole document and leaves the cursor outside the mark", () => {
+    const editor = createEditor("<p>First line</p><p>Second line</p>");
+    editor.commands.selectAll();
+
+    toggleMarkAndExit(editor, "bold");
+
+    expect(editor.getHTML()).toBe(
+      "<p><strong>First line</strong></p><p><strong>Second line</strong></p>",
+    );
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.storedMarks ?? []).toHaveLength(0);
+  });
+
+  it("clears formatting across every selected block", () => {
+    const editor = createEditor(
+      "<h2>A heading</h2><p><strong>bold</strong> and <em>italic</em></p>",
+    );
+    editor.commands.selectAll();
+
+    clearFormatting(editor);
+
+    expect(editor.getHTML()).toBe("<p>A heading</p><p>bold and italic</p>");
+  });
+});

package/src/client/tiptap/__tests__/floating-position.test.ts

@@ -1,7 +1,12 @@
 // @vitest-environment happy-dom
 
 import { describe, expect, it } from "vitest";
-import { getFloatingPosition } from "../floating-position.js";
+import {
+  getFloatingArrowOffset,
+  getFloatingPosition,
+  getVisibleAnchorRect,
+  getVisibleClipRect,
+} from "../floating-position.js";
 
 describe("getFloatingPosition", () => {
   const containerRect = {
@@ -72,3 +77,133 @@ describe("getFloatingPosition", () => {
     expect(layout.top).toBe(8);
   });
 });
+
+describe("getVisibleAnchorRect", () => {
+  // A three-line selection in a text column running from x=100 to x=300,
+  // inside a scroll region showing y=50..250.
+  const clipRect = { left: 100, top: 50, width: 220, height: 200 };
+  const lines = [
+    { left: 180, right: 300, top: 60, bottom: 80 },
+    { left: 100, right: 300, top: 80, bottom: 100 },
+    { left: 100, right: 160, top: 100, bottom: 120 },
+  ];
+
+  it("centers on the whole selection but hugs its first line", () => {
+    const anchor = getVisibleAnchorRect(lines, clipRect);
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 60, bottom: 80 });
+  });
+
+  it("ignores an enclosing block rect when picking the first line", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 60, bottom: 120 }, ...lines],
+      clipRect,
+    );
+
+    expect(anchor?.bottom).toBe(80);
+  });
+
+  it("anchors to the first line still on screen when the selection scrolls past the top", () => {
+    const anchor = getVisibleAnchorRect(
+      [
+        { left: 100, right: 300, top: -40, bottom: -20 },
+        { left: 100, right: 300, top: -20, bottom: 0 },
+        ...lines,
+      ],
+      clipRect,
+    );
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 60, bottom: 80 });
+  });
+
+  it("clips a selection that overruns the scroll region", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 20, bottom: 400 }],
+      clipRect,
+    );
+
+    expect(anchor).toEqual({ left: 100, right: 300, top: 50, bottom: 250 });
+  });
+
+  it("returns null when nothing is visible", () => {
+    const anchor = getVisibleAnchorRect(
+      [{ left: 100, right: 300, top: 300, bottom: 320 }],
+      clipRect,
+    );
+
+    expect(anchor).toBeNull();
+  });
+});
+
+describe("getVisibleClipRect", () => {
+  function stubRect(
+    el: HTMLElement,
+    rect: { left: number; top: number; width: number; height: number },
+  ) {
+    const measured = {
+      ...rect,
+      right: rect.left + rect.width,
+      bottom: rect.top + rect.height,
+      x: rect.left,
+      y: rect.top,
+      toJSON: () => rect,
+    };
+    el.getBoundingClientRect = () => measured;
+  }
+
+  it("narrows the container down to a scrolling ancestor", () => {
+    const scroller = document.createElement("div");
+    scroller.style.overflowY = "auto";
+    const content = document.createElement("div");
+    scroller.appendChild(content);
+    document.body.appendChild(scroller);
+    stubRect(scroller, { left: 100, top: 120, width: 300, height: 200 });
+
+    const clip = getVisibleClipRect(content, {
+      left: 100,
+      top: 50,
+      width: 320,
+      height: 400,
+    });
+
+    expect(clip).toEqual({ left: 100, top: 120, width: 300, height: 200 });
+    scroller.remove();
+  });
+
+  it("keeps the container when no ancestor reports a clipping region", () => {
+    const plain = document.createElement("div");
+    const content = document.createElement("div");
+    plain.appendChild(content);
+    document.body.appendChild(plain);
+    const containerRect = { left: 100, top: 50, width: 320, height: 400 };
+
+    expect(getVisibleClipRect(content, containerRect)).toEqual(containerRect);
+    plain.remove();
+  });
+});
+
+describe("getFloatingArrowOffset", () => {
+  const containerRect = { left: 100, top: 50, width: 320, height: 240 };
+
+  it("points at the anchor center", () => {
+    const offset = getFloatingArrowOffset({
+      anchorRect: { left: 200, right: 240, top: 70, bottom: 90 },
+      containerRect,
+      floatingLeft: 60,
+      floatingWidth: 160,
+    });
+
+    expect(offset).toBe(60);
+  });
+
+  it("stays inside the surface when it is clamped away from the anchor", () => {
+    const offset = getFloatingArrowOffset({
+      anchorRect: { left: 400, right: 420, top: 70, bottom: 90 },
+      containerRect,
+      floatingLeft: 8,
+      floatingWidth: 160,
+    });
+
+    expect(offset).toBe(150);
+  });
+});

package/src/client/tiptap/__tests__/inline-image-upload.test.ts

@@ -5,9 +5,11 @@ import { Editor, type JSONContent } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import { ImageNode } from "../image-node.js";
 import {
+  adoptPendingInlineImageUploads,
   rehostInlineImage,
   resolveInlineImageUrls,
   hasPendingInlineImagePlaceholders,
+  uploadAndInsertInlineImage,
 } from "../inline-image-upload.js";
 
 const editors: Editor[] = [];
@@ -141,3 +143,38 @@ describe("resolveInlineImageUrls + hasPendingInlineImagePlaceholders", () => {
     expect(resolved).toBe(json);
   });
 });
+
+describe("adoptPendingInlineImageUploads", () => {
+  it("hands an in-flight upload on through a second adoption", async () => {
+    const first = createEditor();
+    let finishUpload: (value: { url: string }) => void = () => {};
+    const insert = uploadAndInsertInlineImage(
+      first,
+      new File(["image"], "shot.png", { type: "image/png" }),
+      () =>
+        new Promise((resolve) => {
+          finishUpload = resolve;
+        }),
+    );
+    expect(imageSrcs(first)[0]?.startsWith("blob:")).toBe(true);
+
+    // Content can move more than once — fullscreen hands it to compose, and a
+    // format switch then rebuilds compose's editor under it.
+    const second = createEditor();
+    second.commands.setContent(first.getJSON());
+    adoptPendingInlineImageUploads(second);
+
+    const third = createEditor();
+    third.commands.setContent(second.getJSON());
+    const adopted = adoptPendingInlineImageUploads(third);
+    expect(adopted).toHaveLength(1);
+    // Submitting from here still knows the image is on its way.
+    expect(hasPendingInlineImagePlaceholders(third.getJSON())).toBe(true);
+
+    finishUpload({ url: "https://cdn.test/shot.webp" });
+    await insert;
+    await Promise.all(adopted);
+
+    expect(imageSrcs(third)).toEqual(["https://cdn.test/shot.webp"]);
+  });
+});

package/src/client/tiptap/__tests__/list-editing.test.ts

@@ -2,6 +2,7 @@
 
 import { afterEach, describe, expect, it } from "vitest";
 import { Editor } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { TextSelection } from "@tiptap/pm/state";
 import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
 import { ContinuousLists } from "../continuous-lists.js";
@@ -42,6 +43,7 @@ function paragraphPosition(
   let position: number | null = null;
 
   editor.state.doc.descendants((node, pos) => {
+    if (position !== null) return false;
     if (node.type.name !== "paragraph" || node.textContent !== text) return;
 
     position = pos + 1 + (edge === "end" ? node.content.size : 0);
@@ -52,6 +54,69 @@ function paragraphPosition(
   return position;
 }
 
+function editorAt(
+  content: string,
+  text: string,
+  edge: "start" | "end",
+): Editor {
+  const editor = createEditor(content);
+  setCursor(editor, paragraphPosition(editor, text, edge));
+  return editor;
+}
+
+/**
+ * Renders lists as Markdown-like lines with the caret as `|`, so an assertion
+ * reads like the structure the author sees. A markerless paragraph inside an
+ * item aligns with the item's text; the trailing empty paragraph is omitted.
+ */
+function outline(editor: Editor): string {
+  const { selection } = editor.state;
+  const lines: string[] = [];
+
+  const lineText = (node: ProseMirrorNode, pos: number): string => {
+    const start = pos + 1;
+    const offset = selection.from - start;
+    if (offset < 0 || offset > node.content.size) return node.textContent;
+    return `${node.textContent.slice(0, offset)}|${node.textContent.slice(offset)}`;
+  };
+
+  const walk = (
+    parent: ProseMirrorNode,
+    contentStart: number,
+    indent: string,
+  ) => {
+    parent.forEach((child, offset) => {
+      const pos = contentStart + offset;
+      if (child.isTextblock) {
+        lines.push(`${indent}${lineText(child, pos)}`);
+        return;
+      }
+
+      const ordered = child.type.name === "orderedList";
+      if (!ordered && child.type.name !== "bulletList") {
+        lines.push(`${indent}[${child.type.name}]`);
+        return;
+      }
+
+      let number = Number(child.attrs.start ?? 1);
+      child.forEach((item, itemOffset) => {
+        const marker = ordered ? `${number++}. ` : "- ";
+        const firstLine = lines.length;
+        walk(
+          item,
+          pos + 1 + itemOffset + 1,
+          indent + " ".repeat(marker.length),
+        );
+        lines[firstLine] = `${indent}${marker}${lines[firstLine]?.trimStart()}`;
+      });
+    });
+  };
+
+  walk(editor.state.doc, 0, "");
+  if (lines.at(-1) === "") lines.pop();
+  return lines.join("\n");
+}
+
 function typeText(editor: Editor, text: string): void {
   for (const character of text) {
     const { from, to } = editor.state.selection;
@@ -317,112 +382,185 @@ describe("list editing", () => {
     expect(secondItem?.child(1).textContent).toBe("Third paragraph");
   });
 
-  it.each([
-    ["ordered", "ol"],
-    ["bullet", "ul"],
-  ])(
-    "merges adjacent %s items in one Backspace, matching forward Delete",
-    (_name, tag) => {
-      const html = `<${tag}><li><p>A</p></li><li><p>B</p></li></${tag}>`;
-      const backwardEditor = createEditor(html);
-      const forwardEditor = createEditor(html);
-
-      setCursor(
-        backwardEditor,
-        paragraphPosition(backwardEditor, "B", "start"),
+  describe("Backspace at the start of a line", () => {
+    it("removes a top-level marker first, then merges into the line above", () => {
+      const editor = editorAt(
+        "<ul><li><p>1</p><ul><li><p>a</p></li><li><p>c</p></li></ul></li><li><p>2</p></li></ul>",
+        "2",
+        "start",
       );
-      setCursor(forwardEditor, paragraphPosition(forwardEditor, "A", "end"));
 
-      expect(pressKey(backwardEditor, "Backspace")).toBe(true);
-      expect(pressKey(forwardEditor, "Delete")).toBe(true);
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(["- 1", "  - a", "  - c", "|2"].join("\n"));
 
-      expect(backwardEditor.state.doc.firstChild?.toJSON()).toEqual(
-        forwardEditor.state.doc.firstChild?.toJSON(),
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(["- 1", "  - a", "  - c|2"].join("\n"));
+    });
+
+    it("rejoins a split ordered list once the unmarked line merges", () => {
+      const editor = editorAt(
+        "<ol><li><p>one</p></li><li><p>two</p></li><li><p>three</p></li></ol>",
+        "two",
+        "start",
       );
-      expect(backwardEditor.state.doc.firstChild?.childCount).toBe(1);
-      expect(backwardEditor.state.doc.firstChild?.firstChild?.textContent).toBe(
-        "AB",
+
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(["1. one", "|two", "1. three"].join("\n"));
+
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(["1. one|two", "2. three"].join("\n"));
+    });
+
+    it("keeps a nested item inside its parent when removing its marker", () => {
+      const editor = editorAt(
+        "<ul><li><p>1</p><ul><li><p>a</p></li><li><p>b</p></li><li><p>c</p></li></ul></li></ul>",
+        "b",
+        "start",
       );
-    },
-  );
 
-  it("removes a list marker without reordering existing subtrees", () => {
-    const editor = createEditor(
-      "<ul><li><p>A</p><ul><li><p>P</p></li></ul></li><li><p>B</p><ul><li><p>X</p></li></ul></li><li><p>C</p></li></ul>",
-    );
-    setCursor(editor, paragraphPosition(editor, "B", "start"));
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(
+        ["- 1", "  - a", "  |b", "  - c"].join("\n"),
+      );
 
-    expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(["- 1", "  - a|b", "  - c"].join("\n"));
+    });
 
-    const list = editor.state.doc.firstChild;
-    const mergedItem = list?.firstChild;
-    expect(list?.type.name).toBe("bulletList");
-    expect(list?.childCount).toBe(2);
-    expect(
-      mergedItem?.content.content.map((node) => [
-        node.type.name,
-        node.textContent,
-      ]),
-    ).toEqual([
-      ["paragraph", "A"],
-      ["bulletList", "P"],
-      ["paragraph", "B"],
-      ["bulletList", "X"],
-    ]);
-    expect(list?.child(1).textContent).toBe("C");
-  });
+    it("moves an unmarked item's children up one level", () => {
+      const editor = editorAt(
+        "<ul><li><p>1</p><ul><li><p>a</p></li><li><p>b</p><ul><li><p>x</p></li></ul></li><li><p>c</p></li></ul></li></ul>",
+        "b",
+        "start",
+      );
 
-  it("preserves the current item's subtree during a direct merge", () => {
-    const editor = createEditor(
-      "<ul><li><p>A</p></li><li><p>B</p><ul><li><p>Child</p></li></ul></li></ul>",
-    );
-    setCursor(editor, paragraphPosition(editor, "B", "start"));
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(
+        ["- 1", "  - a", "  |b", "  - x", "  - c"].join("\n"),
+      );
+    });
 
-    expect(pressKey(editor, "Backspace")).toBe(true);
+    it("merges a first nested item into its parent line in two presses", () => {
+      const editor = editorAt(
+        "<ul><li><p>Parent</p><ul><li><p>Child</p></li><li><p>Sibling</p></li></ul></li></ul>",
+        "Child",
+        "start",
+      );
 
-    const mergedItem = editor.state.doc.firstChild?.firstChild;
-    expect(editor.state.doc.firstChild?.childCount).toBe(1);
-    expect(mergedItem?.firstChild?.textContent).toBe("AB");
-    expect(mergedItem?.lastChild?.type.name).toBe("bulletList");
-    expect(mergedItem?.lastChild?.firstChild?.textContent).toBe("Child");
-  });
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(
+        ["- Parent", "  |Child", "  - Sibling"].join("\n"),
+      );
 
-  it("restores list items and subtrees with undo", () => {
-    const editor = createEditor(
-      "<ul><li><p>A</p></li><li><p>B</p><ul><li><p>Child</p></li></ul></li></ul>",
-    );
-    setCursor(editor, paragraphPosition(editor, "B", "start"));
-    const before = editor.getJSON();
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(
+        ["- Parent|Child", "  - Sibling"].join("\n"),
+      );
+    });
 
-    expect(pressKey(editor, "Backspace")).toBe(true);
-    expect(editor.commands.undo()).toBe(true);
-    expect(editor.getJSON()).toEqual(before);
-  });
+    it("removes an empty nested item and returns to the end of the line above", () => {
+      const editor = editorAt(
+        "<ul><li><p>1</p><ul><li><p>c</p></li><li><p></p></li></ul></li><li><p>2</p></li></ul>",
+        "",
+        "start",
+      );
 
-  it("does not lift a whole item from a paragraph after a nested list", () => {
-    const editor = createEditor(
-      "<ul><li><p>A</p><ul><li><p>Nested</p></li></ul><p>Continuation</p></li><li><p>B</p></li></ul>",
-    );
-    setCursor(editor, paragraphPosition(editor, "Continuation", "start"));
-    const before = editor.getJSON();
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(["- 1", "  - c|", "- 2"].join("\n"));
+    });
 
-    expect(pressKey(editor, "Backspace")).toBe(true);
-    expect(editor.getJSON()).toEqual(before);
+    it("merges a paragraph after a nested list into the line above", () => {
+      const editor = editorAt(
+        "<ul><li><p>A</p><ul><li><p>Nested</p></li></ul><p>Continuation</p></li><li><p>B</p></li></ul>",
+        "Continuation",
+        "start",
+      );
+
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(outline(editor)).toBe(
+        ["- A", "  - Nested|Continuation", "- B"].join("\n"),
+      );
+    });
+
+    it("restores list items and subtrees with undo", () => {
+      const editor = editorAt(
+        "<ul><li><p>A</p></li><li><p>B</p><ul><li><p>Child</p></li></ul></li></ul>",
+        "B",
+        "start",
+      );
+      const before = editor.getJSON();
+
+      expect(pressKey(editor, "Backspace")).toBe(true);
+      expect(editor.commands.undo()).toBe(true);
+      expect(editor.getJSON()).toEqual(before);
+    });
   });
 
-  it("lets the official keymap promote a first nested item", () => {
-    const editor = createEditor(
-      "<ul><li><p>Parent</p><ul><li><p>Child</p></li></ul></li></ul>",
+  describe("Delete at the end of a line", () => {
+    it.each([
+      ["ordered", "ol", ["1. A|B", "   - y"]],
+      ["bullet", "ul", ["- A|B", "  - y"]],
+    ])(
+      "merges the next %s item and keeps its children",
+      (_name, tag, lines) => {
+        const editor = editorAt(
+          `<${tag}><li><p>A</p></li><li><p>B</p><ul><li><p>y</p></li></ul></li></${tag}>`,
+          "A",
+          "end",
+        );
+
+        expect(pressKey(editor, "Delete")).toBe(true);
+        expect(outline(editor)).toBe(lines.join("\n"));
+      },
     );
-    setCursor(editor, paragraphPosition(editor, "Child", "start"));
 
-    expect(pressKey(editor, "Backspace")).toBe(true);
+    it("pulls a shallower item up without moving its children", () => {
+      const editor = editorAt(
+        "<ul><li><p>1</p><ul><li><p>a</p></li><li><p>c</p></li></ul></li><li><p>2</p><ul><li><p>x</p></li></ul></li><li><p>3</p></li></ul>",
+        "c",
+        "end",
+      );
 
-    const list = editor.state.doc.firstChild;
-    expect(list?.type.name).toBe("bulletList");
-    expect(list?.childCount).toBe(2);
-    expect(list?.child(0).textContent).toBe("Parent");
-    expect(list?.child(1).textContent).toBe("Child");
+      expect(pressKey(editor, "Delete")).toBe(true);
+      expect(outline(editor)).toBe(
+        ["- 1", "  - a", "  - c|2", "  - x", "- 3"].join("\n"),
+      );
+    });
+
+    it("pulls a first nested item up and moves its children up one level", () => {
+      const editor = editorAt(
+        "<ul><li><p>P</p><ul><li><p>c1</p><ul><li><p>y</p></li></ul></li><li><p>c2</p></li></ul></li></ul>",
+        "P",
+        "end",
+      );
+
+      expect(pressKey(editor, "Delete")).toBe(true);
+      expect(outline(editor)).toBe(["- P|c1", "  - y", "  - c2"].join("\n"));
+    });
+
+    it("pulls a list's first item into the paragraph above", () => {
+      const editor = editorAt(
+        "<p>intro</p><ul><li><p>A</p><ul><li><p>k</p></li></ul></li><li><p>B</p></li></ul>",
+        "intro",
+        "end",
+      );
+
+      expect(pressKey(editor, "Delete")).toBe(true);
+      expect(outline(editor)).toBe(["intro|A", "- k", "- B"].join("\n"));
+    });
+
+    it("agrees with Backspace for a line without a marker", () => {
+      const html =
+        "<ul><li><p>A</p><ul><li><p>c</p></li></ul></li></ul><p>tail</p>";
+      const forward = editorAt(html, "c", "end");
+      const backward = editorAt(html, "tail", "start");
+
+      expect(pressKey(forward, "Delete")).toBe(true);
+      expect(pressKey(backward, "Backspace")).toBe(true);
+      expect(outline(forward)).toBe(["- A", "  - c|tail"].join("\n"));
+      expect(outline(backward)).toBe(outline(forward));
+    });
   });
 
   it("preserves multiple paragraphs and a nested list when pasting HTML", () => {