features

src/editor/blocks/toggle.test.ts

@@ -0,0 +1,773 @@
+// What can be asserted about a toggle without a browser, which is the half that costs somebody a
+// file.
+//
+// vite.config.ts runs vitest in the node environment, so there is no page here and nothing a
+// browser does with one is on trial: the arrow's drawing, the caret's travel through a title and
+// the placeholder on an untitled one belong to the Playwright suite. What belongs here is
+// everything that reaches disk. The two attributes a toggle carries are the two things this lane
+// writes, and both of them go out through an html block that the bridge will only read back if it
+// is spelled one exact way, so a title the editor mangles on the way in is a `<details>` that opens
+// as a raw block the next time the file is looked at.
+//
+// The node view is built here all the same, against the page written out at the bottom of this
+// file, because two of the things it decides reach disk as surely as the attributes do: which
+// clicks on the summary write `open`, and which commands are allowed to run while the caret is
+// somewhere the document's selection is not. Both were bugs a green suite did not see, and neither
+// is a question about a browser. They are questions about what these handlers do with what a
+// browser sends them.
+//
+// The entity group is the one to keep. A summary holding `&`, `<` or `>` is escaped by the
+// serializer and unescaped by the parser, and the parser refuses to model any toggle those two do
+// not agree about character for character. An extra round of escaping would not throw, would not
+// fail a type check and would not lose the document: it would grow another `amp;` in somebody's
+// heading on every save.
+
+import { describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import type { JSONContent } from "@tiptap/core";
+import { EditorState, TextSelection } from "@tiptap/pm/state";
+import type { Plugin, Transaction } from "@tiptap/pm/state";
+import { DecorationSet } from "@tiptap/pm/view";
+import type { EditorView } from "@tiptap/pm/view";
+import { createEditorExtensions } from "../extensions";
+import { parseMarkdown, serializeMarkdown } from "../../markdown";
+import { Toggles, setToggleOpen, setToggleSummary } from "./toggle";
+
+const PATH = "/notes/writing.md";
+
+const extensions = () => createEditorExtensions({ documentPath: () => PATH, onError: () => {} });
+
+const EMPTY: JSONContent = { type: "doc", content: [{ type: "paragraph" }] };
+
+/**
+ * An editor with the lanes' plugins in its state.
+ *
+ * TipTap only installs them when it mounts a view and there is no DOM here to mount into, so the
+ * state is rebuilt with them the way src/editor/Editor.tsx installs every document it opens. It
+ * matters more here than it does for a keymap: this lane's plugin also appends a transaction, and a
+ * plugin that is not in the state is never asked to.
+ */
+function makeEditor(content: JSONContent = EMPTY): Editor {
+  const editor = new Editor({ element: null, injectCSS: false, extensions: extensions(), content });
+  editor.view.updateState(
+    EditorState.create({ doc: editor.state.doc, plugins: editor.extensionManager.plugins }),
+  );
+  return editor;
+}
+
+function editorFor(source: string): Editor {
+  return makeEditor(parseMarkdown(source, PATH).doc.toJSON());
+}
+
+/** What the bridge would write for the document as it stands now. */
+function written(source: string, editor: Editor): string {
+  return serializeMarkdown(parseMarkdown(source, PATH), editor.state.doc);
+}
+
+/** Where the first toggle in the document is, and what it holds. */
+function toggleIn(editor: Editor): { pos: number; open: boolean; summary: string; body: string } {
+  let found: { pos: number; open: boolean; summary: string; body: string } | null = null;
+  editor.state.doc.descendants((node, pos) => {
+    if (found || node.type.name !== "toggle") return !found;
+    found = {
+      pos,
+      open: node.attrs.open as boolean,
+      summary: node.attrs.summary as string,
+      body: node.textContent,
+    };
+    return false;
+  });
+  if (!found) throw new Error("no toggle in the document");
+  return found;
+}
+
+/** The plugins offering a node view for the toggle node, found the way the view finds them. */
+function nodeViewPlugins(editor: Editor): Plugin[] {
+  return editor.extensionManager.plugins.filter(
+    (plugin) => plugin.props.nodeViews?.toggle !== undefined,
+  );
+}
+
+const SUMMARY = "Tom &amp; Jerry &lt;3&gt;";
+const PLAIN = "Tom & Jerry <3>";
+
+const DOC = [
+  "# Writing",
+  "",
+  "<details>",
+  `<summary>${SUMMARY}</summary>`,
+  "",
+  "No em dashes.",
+  "",
+  "</details>",
+  "",
+  "After.",
+  "",
+].join("\n");
+
+describe("the toggle extension", () => {
+  it("is the one the registry names", () => {
+    expect(Toggles.name).toBe("toggles");
+  });
+
+  it("adds no node and no mark, so the bridge and the editor still agree", () => {
+    const plain = new Editor({
+      element: null,
+      injectCSS: false,
+      extensions: extensions().filter((extension) => extension.name !== "toggles"),
+      content: EMPTY,
+    });
+    const withToggles = makeEditor();
+
+    expect(Object.keys(withToggles.schema.nodes)).toEqual(Object.keys(plain.schema.nodes));
+    expect(Object.keys(withToggles.schema.marks)).toEqual(Object.keys(plain.schema.marks));
+
+    plain.destroy();
+    withToggles.destroy();
+  });
+
+  // The node view is the whole feature: without one the browser's own disclosure takes the click,
+  // the open attribute never moves and a keystroke aimed at the title lands in the body. Two
+  // plugins claiming the node would be the same bug from the other end, since ProseMirror takes the
+  // first one asked and the other never runs.
+  it("is the only plugin in the build that claims the toggle node view", () => {
+    const editor = makeEditor();
+
+    expect(nodeViewPlugins(editor)).toHaveLength(1);
+    editor.destroy();
+  });
+});
+
+describe("a <details> read off disk", () => {
+  it("arrives as a toggle carrying its summary as text, not as entities", () => {
+    const editor = editorFor(DOC);
+    const toggle = toggleIn(editor);
+
+    expect(toggle.summary).toBe(PLAIN);
+    expect(toggle.open).toBe(false);
+    expect(toggle.body).toBe("No em dashes.");
+    editor.destroy();
+  });
+
+  it("is written back byte for byte when nothing was edited", () => {
+    const editor = editorFor(DOC);
+
+    expect(written(DOC, editor)).toBe(DOC);
+    editor.destroy();
+  });
+
+  it("keeps the whole file byte identical when only the summary is edited", () => {
+    const editor = editorFor(DOC);
+    const { pos } = toggleIn(editor);
+
+    expect(setToggleSummary(pos, "Tom & Jerry <4>")(editor.state, editor.view.dispatch)).toBe(true);
+    expect(written(DOC, editor)).toBe(DOC.replace("&lt;3&gt;", "&lt;4&gt;"));
+    editor.destroy();
+  });
+
+  // The failure this is shaped to catch is invisible: an editor that put the escaped form on the
+  // node would write `&amp;amp;` here, the file would still parse, and the title would grow a word
+  // every time the document was saved.
+  it("does not escape the ampersand it already escaped once", () => {
+    const editor = editorFor(DOC);
+    const { pos } = toggleIn(editor);
+
+    // The one keystroke: a character on the end of a title that already holds all three of the
+    // characters the serializer has to spell as entities.
+    setToggleSummary(pos, `${PLAIN}!`)(editor.state, editor.view.dispatch);
+    const once = written(DOC, editor);
+    expect(once).toBe(DOC.replace(SUMMARY, `${SUMMARY}!`));
+
+    // And back through the bridge, which is where a second round of escaping would show up.
+    const again = makeEditor(parseMarkdown(once, PATH).doc.toJSON());
+    expect(toggleIn(again).summary).toBe(`${PLAIN}!`);
+    expect(written(once, again)).toBe(once);
+    again.destroy();
+    editor.destroy();
+  });
+
+  it("writes the open marker on to the tag, and takes it off again", () => {
+    const editor = editorFor(DOC);
+    const { pos } = toggleIn(editor);
+
+    expect(setToggleOpen(pos, true)(editor.state, editor.view.dispatch)).toBe(true);
+    expect(written(DOC, editor)).toBe(DOC.replace("<details>", "<details open>"));
+
+    expect(setToggleOpen(pos, false)(editor.state, editor.view.dispatch)).toBe(true);
+    expect(written(DOC, editor)).toBe(DOC);
+    editor.destroy();
+  });
+
+  it("leaves the body alone whatever happens to the two attributes", () => {
+    const editor = editorFor(DOC);
+    const { pos, body } = toggleIn(editor);
+
+    setToggleSummary(pos, "Something else")(editor.state, editor.view.dispatch);
+    setToggleOpen(pos, true)(editor.state, editor.view.dispatch);
+
+    expect(toggleIn(editor).body).toBe(body);
+    expect(editor.state.doc.textContent).toBe(editorFor(DOC).state.doc.textContent);
+    editor.destroy();
+  });
+});
+
+describe("the two commands", () => {
+  it("decline a position that is not a toggle, and one that already reads that way", () => {
+    const editor = editorFor(DOC);
+    const { pos, summary } = toggleIn(editor);
+    const before = editor.state.doc.toJSON();
+
+    expect(setToggleOpen(0, true)(editor.state, editor.view.dispatch)).toBe(false);
+    expect(setToggleSummary(0, "x")(editor.state, editor.view.dispatch)).toBe(false);
+    expect(setToggleOpen(pos, false)(editor.state, editor.view.dispatch)).toBe(false);
+    expect(setToggleSummary(pos, summary)(editor.state, editor.view.dispatch)).toBe(false);
+    expect(editor.state.doc.toJSON()).toEqual(before);
+    editor.destroy();
+  });
+
+  // A closed <details> does not draw its children, so a caret left in one is a caret nobody can see
+  // and the next keystroke goes somewhere invisible.
+  it("bring the caret out of a body that is being closed", () => {
+    const editor = editorFor(DOC);
+    const { pos } = toggleIn(editor);
+    setToggleOpen(pos, true)(editor.state, editor.view.dispatch);
+
+    const inside = pos + 2;
+    editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, inside)));
+    expect(editor.state.selection.from).toBe(inside);
+
+    setToggleOpen(pos, false)(editor.state, editor.view.dispatch);
+    const node = editor.state.doc.nodeAt(pos)!;
+    expect(editor.state.selection.from >= pos + node.nodeSize).toBe(true);
+    editor.destroy();
+  });
+
+  it("leave the caret where it is when it was never inside", () => {
+    const editor = editorFor(DOC);
+    const { pos } = toggleIn(editor);
+    setToggleOpen(pos, true)(editor.state, editor.view.dispatch);
+    editor.commands.setTextSelection(2);
+
+    setToggleOpen(pos, false)(editor.state, editor.view.dispatch);
+    expect(editor.state.selection.from).toBe(2);
+    editor.destroy();
+  });
+});
+
+// What the pill's Toggle button runs, which is `toggleWrap("toggle")` in setBlock in
+// src/editor/Editor.tsx. A toggle takes the attribute's own default, which is closed, so without
+// the plugin's appended transaction the paragraph the user just wrapped is behind an arrow and
+// reads as a deletion.
+describe("wrapping a block in a toggle", () => {
+  const PROSE: JSONContent = {
+    type: "doc",
+    content: [{ type: "paragraph", content: [{ type: "text", text: "Keep this visible." }] }],
+  };
+
+  it("leaves it open, with the block still on screen inside it", () => {
+    const editor = makeEditor(PROSE);
+    editor.commands.setTextSelection(2);
+
+    expect(editor.chain().toggleWrap("toggle").run()).toBe(true);
+    const toggle = toggleIn(editor);
+    expect(toggle.open).toBe(true);
+    expect(toggle.summary).toBe("");
+    expect(toggle.body).toBe("Keep this visible.");
+    editor.destroy();
+  });
+
+  it("makes something the bridge writes and reads back as the same toggle", () => {
+    const editor = makeEditor(PROSE);
+    editor.commands.setTextSelection(2);
+    editor.chain().toggleWrap("toggle").run();
+    setToggleSummary(toggleIn(editor).pos, "House style")(editor.state, editor.view.dispatch);
+
+    const source = written("Keep this visible.\n", editor);
+    expect(source).toBe(
+      ["<details open>", "<summary>House style</summary>", "", "Keep this visible.", "", "</details>", ""].join("\n"),
+    );
+
+    const reopened = makeEditor(parseMarkdown(source, PATH).doc.toJSON());
+    const toggle = toggleIn(reopened);
+    expect([toggle.open, toggle.summary, toggle.body]).toEqual([true, "House style", "Keep this visible."]);
+    reopened.destroy();
+    editor.destroy();
+  });
+
+  it("takes it back out on a second press, which is what the same button means", () => {
+    const editor = makeEditor(PROSE);
+    editor.commands.setTextSelection(2);
+    editor.chain().toggleWrap("toggle").run();
+
+    expect(editor.chain().toggleWrap("toggle").run()).toBe(true);
+    expect(editor.state.doc.toJSON()).toEqual(PROSE);
+    editor.destroy();
+  });
+});
+
+// The guard on the appended transaction, and the reason it is written the way it is. Opening a
+// document restores the caret it was last left at, and that is a selection with no edit behind it:
+// a toggle opened by one would be a byte written into a file nobody has touched.
+describe("a caret that moves without an edit", () => {
+  it("never opens the toggle it lands in, and never dirties the document", () => {
+    const editor = editorFor(DOC);
+    const { pos } = toggleIn(editor);
+    const before = editor.state.doc.toJSON();
+
+    editor.view.dispatch(
+      editor.state.tr.setSelection(TextSelection.create(editor.state.doc, pos + 2)),
+    );
+
+    expect(toggleIn(editor).open).toBe(false);
+    expect(editor.state.doc.toJSON()).toEqual(before);
+    expect(written(DOC, editor)).toBe(DOC);
+    editor.destroy();
+  });
+});
+
+/**
+ * The few parts of a page the node view reaches for, written out rather than depended on.
+ *
+ * A DOM implementation is not a dependency this project has, and the handful of calls the node view
+ * makes into one does not earn it: it creates elements, hangs listeners on them, asks which one the
+ * page thinks has the caret, and asks for a frame. What a browser does with an element is
+ * Playwright's question. What the handlers in toggle.ts do with what a browser sends them is this
+ * file's, and that is the whole of what these model.
+ */
+interface PageEvent {
+  type: string;
+  target: PageElement;
+  key?: string;
+  isComposing?: boolean;
+  defaultPrevented: boolean;
+  preventDefault: () => void;
+}
+
+class PageElement {
+  className = "";
+  contentEditable = "inherit";
+  textContent = "";
+  parent: PageElement | null = null;
+
+  private readonly attributes = new Set<string>();
+  private readonly listeners = new Map<string, ((event: PageEvent) => void)[]>();
+
+  constructor(
+    readonly tagName: string,
+    readonly ownerDocument: Page,
+  ) {}
+
+  /** Only ever asked whether there is one, which is how a leftover <br> in a title is found. */
+  get firstChild(): object | null {
+    return this.textContent === "" ? null : { nodeName: "#text" };
+  }
+
+  setAttribute(name: string, _value: string): void {
+    this.attributes.add(name);
+  }
+
+  hasAttribute(name: string): boolean {
+    return this.attributes.has(name);
+  }
+
+  toggleAttribute(name: string, on: boolean): void {
+    if (on) this.attributes.add(name);
+    else this.attributes.delete(name);
+  }
+
+  appendChild(child: PageElement): void {
+    child.parent = this;
+  }
+
+  append(...children: PageElement[]): void {
+    for (const child of children) this.appendChild(child);
+  }
+
+  contains(other: PageElement | null): boolean {
+    for (let element = other; element; element = element.parent) if (element === this) return true;
+    return false;
+  }
+
+  focus(): void {
+    this.ownerDocument.activeElement = this;
+    this.fire("focus");
+  }
+
+  blur(): void {
+    if (this.ownerDocument.activeElement === this) this.ownerDocument.activeElement = null;
+    this.fire("blur");
+  }
+
+  addEventListener(type: string, listener: (event: PageEvent) => void): void {
+    const list = this.listeners.get(type) ?? [];
+    list.push(listener);
+    this.listeners.set(type, list);
+  }
+
+  removeEventListener(type: string, listener: (event: PageEvent) => void): void {
+    this.listeners.set(type, (this.listeners.get(type) ?? []).filter((one) => one !== listener));
+  }
+
+  /** Bubbling, because the row's listeners are what an event on the title inside it reaches. */
+  fire(type: string, extra: Partial<PageEvent> = {}): PageEvent {
+    const event: PageEvent = {
+      type,
+      target: this,
+      defaultPrevented: false,
+      preventDefault: () => {
+        event.defaultPrevented = true;
+      },
+      ...extra,
+    };
+    for (let element: PageElement | null = this; element; element = element.parent) {
+      for (const listener of element.listeners.get(type) ?? []) listener(event);
+    }
+    return event;
+  }
+}
+
+class Page {
+  activeElement: PageElement | null = null;
+  readonly created: PageElement[] = [];
+
+  private readonly frames: (() => void)[] = [];
+
+  readonly defaultView = {
+    requestAnimationFrame: (run: () => void): number => this.frames.push(run),
+  };
+
+  createElement(tagName: string): PageElement {
+    const element = new PageElement(tagName, this);
+    this.created.push(element);
+    return element;
+  }
+
+  /** Nothing here models a caret inside a title, only which element holds one. */
+  getSelection(): null {
+    return null;
+  }
+
+  /** The frame a browser would run next, which is also where TipTap's own focus call lands. */
+  runFrames(): number {
+    const queued = this.frames.splice(0);
+    for (const run of queued) run();
+    return queued.length;
+  }
+}
+
+interface Mounted {
+  page: Page;
+  details: PageElement;
+  summary: PageElement;
+  title: PageElement;
+  destroy: () => void;
+}
+
+/** The node view for the toggle at `pos`, built the way the editor's view builds one. */
+function mount(editor: Editor, pos: number): Mounted {
+  const page = new Page();
+  const view = {
+    dom: page.createElement("div"),
+    get state(): EditorState {
+      return editor.state;
+    },
+    dispatch: (tr: Transaction) => editor.view.dispatch(tr),
+    editable: true,
+    focus: () => {},
+  } as unknown as EditorView;
+
+  const build = nodeViewPlugins(editor)[0]?.props.nodeViews?.toggle;
+  const node = editor.state.doc.nodeAt(pos);
+  if (!build || !node) throw new Error("nothing to build a node view from");
+  const nodeView = build(node, view, () => pos, [], DecorationSet.empty);
+
+  const find = (match: (element: PageElement) => boolean): PageElement => {
+    const element = page.created.find(match);
+    if (!element) throw new Error("the node view did not build that element");
+    return element;
+  };
+
+  return {
+    page,
+    details: find((element) => element.tagName === "details"),
+    summary: find((element) => element.tagName === "summary"),
+    title: find((element) => element.hasAttribute("data-toggle-summary")),
+    destroy: () => nodeView.destroy?.(),
+  };
+}
+
+/** Where the text of this block ends, which is where a click in it leaves the caret. */
+function endOf(editor: Editor, text: string): number {
+  let found: number | null = null;
+  editor.state.doc.descendants((node, pos) => {
+    if (found !== null) return false;
+    if (node.isTextblock && node.textContent === text) found = pos + 1 + node.content.size;
+    return found === null;
+  });
+  if (found === null) throw new Error(`no block reading ${text}`);
+  return found;
+}
+
+const PAGE_DOC = [
+  "# Doc",
+  "",
+  "First paragraph.",
+  "",
+  "Second paragraph.",
+  "",
+  "<details open>",
+  "<summary>My title</summary>",
+  "",
+  "Toggle body.",
+  "",
+  "</details>",
+  "",
+].join("\n");
+
+// A `<details>` is a disclosure control and the browser works one from the keyboard whether this
+// file wants it to or not: a space typed anywhere inside the summary sends the row a click of its
+// own. Taken as a press, that closed the toggle under the caret on every other space of a title and
+// wrote the flip to the file each time.
+describe("a space typed in a title", () => {
+  it("leaves the toggle as it was, and the space in the title", () => {
+    const editor = editorFor(PAGE_DOC);
+    const ui = mount(editor, toggleIn(editor).pos);
+
+    ui.title.focus();
+    ui.title.fire("keydown", { key: " " });
+    // The character the browser puts in the element, and then the click it sends the row after it.
+    ui.title.textContent = "My title ";
+    ui.title.fire("input");
+    ui.summary.fire("click");
+
+    const toggle = toggleIn(editor);
+    expect(toggle.open).toBe(true);
+    expect(toggle.summary).toBe("My title ");
+    expect(written(PAGE_DOC, editor)).toBe(PAGE_DOC.replace("My title", "My title "));
+    ui.destroy();
+    editor.destroy();
+  });
+
+  it("does not find a press that never became a click waiting for it", () => {
+    const editor = editorFor(PAGE_DOC);
+    const ui = mount(editor, toggleIn(editor).pos);
+
+    // Pressed on the row, and then the pointer left and no click ever came of it.
+    ui.summary.fire("mousedown");
+    ui.title.focus();
+    ui.title.fire("keydown", { key: " " });
+    ui.summary.fire("click");
+
+    expect(toggleIn(editor).open).toBe(true);
+    ui.destroy();
+    editor.destroy();
+  });
+});
+
+describe("a press on the summary row", () => {
+  it("still flips the toggle and writes it, which is what the arrow is for", () => {
+    const editor = editorFor(PAGE_DOC);
+    const ui = mount(editor, toggleIn(editor).pos);
+
+    ui.summary.fire("mousedown");
+    ui.summary.fire("click");
+
+    expect(toggleIn(editor).open).toBe(false);
+    expect(written(PAGE_DOC, editor)).toBe(PAGE_DOC.replace("<details open>", "<details>"));
+    ui.destroy();
+    editor.destroy();
+  });
+
+  it("flips it from the keyboard when the row itself is what has focus", () => {
+    const editor = editorFor(PAGE_DOC);
+    const ui = mount(editor, toggleIn(editor).pos);
+
+    ui.page.activeElement = ui.summary;
+    ui.summary.fire("click");
+
+    expect(toggleIn(editor).open).toBe(false);
+    ui.destroy();
+    editor.destroy();
+  });
+});
+
+// The caret in a title is not in the document: ProseMirror's selection is still wherever it was
+// when the caret went in there, so a toolbar button pressed while a title is being typed runs its
+// command against a paragraph the user is not looking at.
+describe("a command aimed at the document while the caret is in a title", () => {
+  it("changes nothing, and the file with it", () => {
+    const editor = editorFor(PAGE_DOC);
+    const ui = mount(editor, toggleIn(editor).pos);
+    editor.commands.setTextSelection(endOf(editor, "Second paragraph."));
+    ui.title.focus();
+    const before = editor.state.doc.toJSON();
+
+    // What the pill's Horizontal rule runs, less the focus() in front of it, which wants a browser.
+    editor.commands.insertContent({ type: "horizontalRule" });
+
+    expect(editor.state.doc.toJSON()).toEqual(before);
+    expect(written(PAGE_DOC, editor)).toBe(PAGE_DOC);
+    ui.destroy();
+    editor.destroy();
+  });
+
+  it("leaves the caret in the title, so a second press is refused like the first", () => {
+    const editor = editorFor(PAGE_DOC);
+    const ui = mount(editor, toggleIn(editor).pos);
+    editor.commands.setTextSelection(endOf(editor, "Second paragraph."));
+    ui.title.focus();
+    const before = editor.state.doc.toJSON();
+
+    editor.commands.insertContent({ type: "horizontalRule" });
+    // TipTap's focus command queues a view.focus() for the next frame, and it lands behind the
+    // refusal: without the caret being put back, the second press of the same button has a caret in
+    // the document again and edits the place the first press was refused for.
+    ui.title.blur();
+    expect(ui.page.runFrames()).toBe(1);
+    expect(ui.page.activeElement).toBe(ui.title);
+
+    editor.commands.insertContent({ type: "horizontalRule" });
+    expect(editor.state.doc.toJSON()).toEqual(before);
+    ui.destroy();
+    editor.destroy();
+  });
+
+  it("is taken back the moment the caret leaves the title", () => {
+    const editor = editorFor(PAGE_DOC);
+    const ui = mount(editor, toggleIn(editor).pos);
+    editor.commands.setTextSelection(endOf(editor, "Second paragraph."));
+    ui.title.focus();
+    ui.title.blur();
+    const before = editor.state.doc.toJSON();
+
+    editor.commands.insertContent({ type: "horizontalRule" });
+
+    expect(editor.state.doc.toJSON()).not.toEqual(before);
+    ui.destroy();
+    editor.destroy();
+  });
+
+  it("is never the title's own writing, which is the one edit that is where the caret is", () => {
+    const editor = editorFor(PAGE_DOC);
+    const ui = mount(editor, toggleIn(editor).pos);
+    ui.title.focus();
+
+    ui.title.textContent = "Renamed";
+    ui.title.fire("input");
+
+    expect(toggleIn(editor).summary).toBe("Renamed");
+    expect(written(PAGE_DOC, editor)).toBe(PAGE_DOC.replace("My title", "Renamed"));
+    ui.destroy();
+    editor.destroy();
+  });
+});
+
+const TWO_TOGGLES = [
+  "<details>",
+  "<summary>Closed</summary>",
+  "",
+  "Hidden body.",
+  "",
+  "</details>",
+  "",
+  "<details open>",
+  "<summary>My title</summary>",
+  "",
+  "Toggle body.",
+  "",
+  "</details>",
+  "",
+].join("\n");
+
+/** Every toggle in the document, in the order they are written. */
+function togglesIn(editor: Editor): { pos: number; open: boolean; summary: string }[] {
+  const found: { pos: number; open: boolean; summary: string }[] = [];
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== "toggle") return true;
+    found.push({ pos, open: node.attrs.open as boolean, summary: node.attrs.summary as string });
+    return true;
+  });
+  return found;
+}
+
+// The plugin opens the collapsed toggle the caret ends an edit inside, because a caret behind a
+// closed arrow is one nobody can see. The caret in a title is not in the document at all, so the
+// selection that rule reads is stale and the toggle it names is one nobody is in.
+describe("typing in a title while the selection is left inside another toggle", () => {
+  it("does not open the toggle it is left in, and writes no byte into that one", () => {
+    const editor = editorFor(TWO_TOGGLES);
+    const [closed, titled] = togglesIn(editor);
+    const ui = mount(editor, titled.pos);
+    editor.view.dispatch(
+      editor.state.tr.setSelection(TextSelection.create(editor.state.doc, closed.pos + 3)),
+    );
+    ui.title.focus();
+
+    ui.title.textContent = "Renamed";
+    ui.title.fire("input");
+
+    expect(togglesIn(editor)[0].open).toBe(false);
+    expect(written(TWO_TOGGLES, editor)).toBe(TWO_TOGGLES.replace("My title", "Renamed"));
+    ui.destroy();
+    editor.destroy();
+  });
+});
+
+// src/markdown/parse.ts pairs `<details>` among the root's own children and nowhere else, so a
+// toggle anywhere but the top level of the document goes to disk as something the next open of the
+// file reads back as one raw block: the bytes are kept and both constructs stop being editable.
+describe("a toggle the bridge could not read back", () => {
+  const CALLOUT = "> [!NOTE]\n> Callout body.\n";
+
+  it("is not made inside a callout", () => {
+    const editor = editorFor(CALLOUT);
+    editor.commands.setTextSelection(endOf(editor, "Callout body."));
+    const before = editor.state.doc.toJSON();
+
+    editor.chain().toggleWrap("toggle").run();
+
+    expect(editor.state.doc.toJSON()).toEqual(before);
+    expect(written(CALLOUT, editor)).toBe(CALLOUT);
+    editor.destroy();
+  });
+
+  it("is not made inside another toggle", () => {
+    const editor = editorFor(PAGE_DOC);
+    editor.commands.setTextSelection(endOf(editor, "Toggle body."));
+    const before = editor.state.doc.toJSON();
+
+    // Attributes the toggle already there does not carry, because that is the call that nests:
+    // TipTap's isNodeActive wants them to match before it takes a second press as taking one out,
+    // so anything else wraps a second toggle around the inside of the first.
+    editor.chain().toggleWrap("toggle", { open: false }).run();
+
+    expect(editor.state.doc.toJSON()).toEqual(before);
+    expect(written(PAGE_DOC, editor)).toBe(PAGE_DOC);
+    editor.destroy();
+  });
+
+  // The rule is about a toggle being put somewhere, and an edit inside one that is already there
+  // reaches into the same node without moving it. Reading that as a toggle being nested would
+  // refuse every keystroke in every toggle body in the document.
+  it("does not stand in the way of an edit inside a toggle that is already there", () => {
+    const editor = editorFor(PAGE_DOC);
+    editor.commands.setTextSelection(endOf(editor, "Toggle body."));
+
+    editor.commands.insertContent({ type: "text", text: " More." });
+
+    expect(toggleIn(editor).body).toBe("Toggle body. More.");
+    expect(written(PAGE_DOC, editor)).toBe(PAGE_DOC.replace("Toggle body.", "Toggle body. More."));
+    editor.destroy();
+  });
+
+  it("is still made at the top level, where it is read back as itself", () => {
+    const editor = editorFor(PAGE_DOC);
+    editor.commands.setTextSelection(endOf(editor, "First paragraph."));
+
+    expect(editor.chain().toggleWrap("toggle").run()).toBe(true);
+    expect(togglesIn(editor)).toHaveLength(2);
+    const source = written(PAGE_DOC, editor);
+    expect(parseMarkdown(source, PATH).doc.childCount).toBe(editor.state.doc.childCount);
+    editor.destroy();
+  });
+});