@jant/core 0.6.13 → 0.6.15

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

@@ -0,0 +1,201 @@
+// @vitest-environment happy-dom
+
+import { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { afterEach, describe, expect, it } from "vitest";
+import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
+import { StructuralKeymap } from "../structural-keymap.js";
+
+const editors: Editor[] = [];
+
+function createEditor(content: string): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: [...createMarkdownContentExtensions(), StructuralKeymap],
+    content,
+  });
+
+  editor.view.dispatch(editor.state.tr);
+  editors.push(editor);
+  return editor;
+}
+
+function paragraphPosition(
+  editor: Editor,
+  text: string,
+  edge: "start" | "end",
+): number {
+  let position: number | null = null;
+
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== "paragraph" || node.textContent !== text) return;
+
+    position = pos + 1 + (edge === "end" ? node.content.size : 0);
+    return false;
+  });
+
+  if (position === null) throw new Error(`Paragraph not found: ${text}`);
+  return position;
+}
+
+function setCursor(editor: Editor, pos: number): void {
+  editor.view.dispatch(
+    editor.state.tr.setSelection(TextSelection.create(editor.state.doc, pos)),
+  );
+}
+
+function pressKey(
+  editor: Editor,
+  key: string,
+  options: globalThis.KeyboardEventInit = {},
+): boolean {
+  return Boolean(
+    editor.view.someProp("handleKeyDown", (handler) =>
+      handler(
+        editor.view,
+        new KeyboardEvent("keydown", { key, code: key, ...options }),
+      ),
+    ),
+  );
+}
+
+function typeText(editor: Editor, text: string): void {
+  for (const character of text) {
+    const { from, to } = editor.state.selection;
+    const handled = editor.view.someProp("handleTextInput", (handler) =>
+      handler(editor.view, from, to, character, () =>
+        editor.state.tr.insertText(character, from, to),
+      ),
+    );
+
+    if (!handled) {
+      editor.view.dispatch(editor.state.tr.insertText(character, from, to));
+    }
+  }
+}
+
+function meaningfulTopLevelNodes(editor: Editor) {
+  return editor.state.doc.content.content.filter(
+    (node) => node.type.name !== "paragraph" || node.content.size > 0,
+  );
+}
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("blockquote boundary editing", () => {
+  it.each([
+    {
+      name: "paragraphs in one quote",
+      html: "<blockquote><p>A</p><p>B</p></blockquote>",
+      expectedType: "blockquote",
+    },
+    {
+      name: "quote followed by paragraph",
+      html: "<blockquote><p>A</p></blockquote><p>B</p>",
+      expectedType: "blockquote",
+    },
+    {
+      name: "paragraph followed by quote",
+      html: "<p>A</p><blockquote><p>B</p></blockquote>",
+      expectedType: "paragraph",
+    },
+    {
+      name: "adjacent quotes",
+      html: "<blockquote><p>A</p></blockquote><blockquote><p>B</p></blockquote>",
+      expectedType: "blockquote",
+    },
+  ])(
+    "merges $name symmetrically with Backspace and Delete",
+    ({ html, expectedType }) => {
+      const backwardEditor = createEditor(html);
+      const forwardEditor = createEditor(html);
+      setCursor(
+        backwardEditor,
+        paragraphPosition(backwardEditor, "B", "start"),
+      );
+      setCursor(forwardEditor, paragraphPosition(forwardEditor, "A", "end"));
+
+      expect(pressKey(backwardEditor, "Backspace")).toBe(true);
+      expect(pressKey(forwardEditor, "Delete")).toBe(true);
+
+      const backwardNodes = meaningfulTopLevelNodes(backwardEditor);
+      const forwardNodes = meaningfulTopLevelNodes(forwardEditor);
+      expect(backwardNodes.map((node) => node.toJSON())).toEqual(
+        forwardNodes.map((node) => node.toJSON()),
+      );
+      expect(backwardNodes).toHaveLength(1);
+      expect(backwardNodes[0]?.type.name).toBe(expectedType);
+      expect(backwardNodes[0]?.textContent).toBe("AB");
+      if (expectedType === "blockquote") {
+        expect(backwardNodes[0]?.childCount).toBe(1);
+      }
+      expect(backwardEditor.state.selection.$from.parentOffset).toBe(1);
+    },
+  );
+
+  it.each([
+    ["Backspace", {}],
+    ["Shift-Backspace", { shiftKey: true }],
+    ["Mod-Backspace", { ctrlKey: true }],
+  ])("uses the same quote merge for %s", (_name, eventOptions) => {
+    const editor = createEditor("<blockquote><p>A</p><p>B</p></blockquote>");
+    setCursor(editor, paragraphPosition(editor, "B", "start"));
+
+    expect(pressKey(editor, "Backspace", eventOptions)).toBe(true);
+    expect(meaningfulTopLevelNodes(editor)[0]?.toJSON()).toMatchObject({
+      type: "blockquote",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "AB" }],
+        },
+      ],
+    });
+  });
+
+  it("restores the original quote structure with undo", () => {
+    const editor = createEditor("<blockquote><p>A</p></blockquote><p>B</p>");
+    setCursor(editor, paragraphPosition(editor, "B", "start"));
+    const before = editor.getJSON();
+
+    expect(pressKey(editor, "Backspace")).toBe(true);
+    expect(editor.commands.undo()).toBe(true);
+    expect(editor.getJSON()).toEqual(before);
+  });
+
+  it("removes an empty trailing quote paragraph in one Backspace", () => {
+    const editor = createEditor("<blockquote><p>A</p><p></p></blockquote>");
+    const quote = editor.state.doc.firstChild!;
+    const emptyParagraphPosition = 1 + quote.child(0).nodeSize + 1;
+    setCursor(editor, emptyParagraphPosition);
+
+    expect(pressKey(editor, "Backspace")).toBe(true);
+    expect(editor.state.doc.firstChild?.toJSON()).toEqual({
+      type: "blockquote",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "A" }],
+        },
+      ],
+    });
+  });
+
+  it("keeps the official input rule that joins a new adjacent quote", () => {
+    const editor = createEditor("<blockquote><p>A</p></blockquote><p></p>");
+    setCursor(editor, editor.state.doc.content.size - 1);
+
+    typeText(editor, "> ");
+
+    const quote = editor.state.doc.firstChild;
+    expect(quote?.type.name).toBe("blockquote");
+    expect(quote?.childCount).toBe(2);
+    expect(editor.state.doc.child(1).type.name).toBe("paragraph");
+  });
+});

package/src/client/tiptap/__tests__/clear-formatting.test.ts

@@ -0,0 +1,168 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { createMarkdownContentExtensions } from "../../../lib/markdown-manager.js";
+import { clearFormatting } 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: createMarkdownContentExtensions(),
+    content,
+  });
+
+  editor.view.dispatch(editor.state.tr);
+  editors.push(editor);
+  return editor;
+}
+
+function selectText(editor: Editor, fromText: string, toText = fromText): void {
+  let from: number | null = null;
+  let to: number | null = null;
+
+  editor.state.doc.descendants((node, pos) => {
+    if (!node.isText) return;
+    if (from === null && node.text?.includes(fromText)) {
+      from = pos;
+    }
+    if (node.text?.includes(toText)) {
+      to = pos + node.nodeSize;
+    }
+  });
+
+  if (from === null || to === null) {
+    throw new Error(`Text selection not found: ${fromText} → ${toText}`);
+  }
+
+  editor.view.dispatch(
+    editor.state.tr.setSelection(
+      TextSelection.create(editor.state.doc, from, to),
+    ),
+  );
+}
+
+function getMarkNames(editor: Editor): string[] {
+  const markNames: string[] = [];
+  editor.state.doc.descendants((node) => {
+    if (node.isText) {
+      markNames.push(...node.marks.map((mark) => mark.type.name));
+    }
+  });
+  return markNames;
+}
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("clear formatting", () => {
+  it("converts selected headings to paragraphs and preserves semantic links", () => {
+    const editor = createEditor(
+      '<h2><a href="https://example.com"><strong>Heading</strong></a></h2>',
+    );
+    selectText(editor, "Heading");
+
+    clearFormatting(editor);
+
+    const paragraph = editor.state.doc.firstChild;
+    const linkedText = paragraph?.firstChild;
+    expect(paragraph?.type.name).toBe("paragraph");
+    expect(linkedText?.marks.map((mark) => mark.type.name)).toEqual(["link"]);
+    expect(linkedText?.marks[0]?.attrs.href).toBe("https://example.com");
+  });
+
+  it("unwraps a blockquote without flattening its nested ordered list", () => {
+    const editor = createEditor(
+      '<blockquote><ol start="5"><li><p><a href="https://example.com"><strong>Five</strong></a></p><ol><li><p>Nested</p></li></ol></li><li><p><em>Six</em></p></li></ol></blockquote>',
+    );
+    selectText(editor, "Five", "Six");
+
+    clearFormatting(editor);
+
+    const outerList = editor.state.doc.firstChild;
+    expect(outerList?.type.name).toBe("orderedList");
+    expect(outerList?.attrs.start).toBe(5);
+    expect(outerList?.childCount).toBe(2);
+    expect(outerList?.child(0).lastChild?.type.name).toBe("orderedList");
+    expect(outerList?.child(0).lastChild?.firstChild?.textContent).toBe(
+      "Nested",
+    );
+    const linkedText = outerList?.child(0).firstChild?.firstChild;
+    expect(linkedText?.marks.map((mark) => mark.type.name)).toEqual(["link"]);
+    expect(linkedText?.marks[0]?.attrs.href).toBe("https://example.com");
+    expect(editor.isActive("bold")).toBe(false);
+    expect(editor.isActive("italic")).toBe(false);
+  });
+
+  it("clears headings and blockquotes across a mixed block selection", () => {
+    const editor = createEditor(
+      "<h2><strong>Heading</strong></h2><blockquote><p><em>Quote</em></p></blockquote><p><strong>Body</strong></p>",
+    );
+    selectText(editor, "Heading", "Body");
+
+    clearFormatting(editor);
+
+    expect(
+      editor.state.doc.content.content.map((node) => node.type.name),
+    ).toEqual(["paragraph", "paragraph", "paragraph"]);
+    expect(getMarkNames(editor)).toEqual([]);
+  });
+
+  it("only unwraps the selected part of a multi-paragraph blockquote", () => {
+    const editor = createEditor(
+      "<blockquote><p>First</p><p><strong>Second</strong></p><p>Third</p></blockquote>",
+    );
+    selectText(editor, "Second");
+
+    clearFormatting(editor);
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "blockquote",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "First" }],
+          },
+        ],
+      },
+      { type: "paragraph", content: [{ type: "text", text: "Second" }] },
+      {
+        type: "blockquote",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Third" }],
+          },
+        ],
+      },
+      { type: "paragraph" },
+    ]);
+  });
+
+  it("preserves code blocks and restores the whole clear with one undo", () => {
+    const editor = createEditor(
+      "<h3><strong>Heading</strong></h3><blockquote><p><em>Quote</em></p></blockquote><pre><code>const x = 1;\nnext();</code></pre>",
+    );
+    selectText(editor, "Heading", "next();");
+    const before = editor.getJSON();
+
+    clearFormatting(editor);
+
+    expect(editor.state.doc.child(0).type.name).toBe("paragraph");
+    expect(editor.state.doc.child(1).type.name).toBe("paragraph");
+    expect(editor.state.doc.child(2).type.name).toBe("codeBlock");
+    expect(editor.state.doc.child(2).textContent).toBe("const x = 1;\nnext();");
+
+    expect(editor.commands.undo()).toBe(true);
+    expect(editor.getJSON()).toEqual(before);
+  });
+});

package/src/client/tiptap/__tests__/footnotes.test.ts

@@ -132,6 +132,89 @@ function pressDelete(editor: Editor): boolean {
   return pressKey(editor, "Delete");
 }
 
+function findFootnoteReferencePos(editor: Editor, label: string): number {
+  let referencePos: number | null = null;
+
+  editor.state.doc.descendants((node, pos) => {
+    if (
+      referencePos === null &&
+      node.type.name === "footnoteReference" &&
+      node.attrs.label === label
+    ) {
+      referencePos = pos;
+    }
+
+    return true;
+  });
+
+  if (referencePos === null) {
+    throw new Error(`expected footnote reference ${label}`);
+  }
+
+  return referencePos;
+}
+
+function clickFootnoteReference(editor: Editor, label: string): boolean {
+  const pos = findFootnoteReferencePos(editor, label);
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node) {
+    throw new Error(`expected footnote reference node ${label}`);
+  }
+
+  const event = new window.MouseEvent("click", {
+    bubbles: true,
+    button: 0,
+  });
+  let handled = false;
+
+  editor.view.someProp("handleClickOn", (handleClickOn) => {
+    if (handleClickOn(editor.view, pos, node, pos, event, true)) {
+      handled = true;
+      return true;
+    }
+
+    return false;
+  });
+
+  return handled;
+}
+
+function clickBeforeFootnoteDefinition(editor: Editor, label: string): boolean {
+  let definitionPos: number | null = null;
+
+  editor.state.doc.forEach((node, offset) => {
+    if (
+      definitionPos === null &&
+      node.type.name === "footnoteDefinition" &&
+      node.attrs.label === label
+    ) {
+      definitionPos = offset;
+    }
+  });
+
+  if (definitionPos === null) {
+    throw new Error(`expected footnote definition ${label}`);
+  }
+  const targetPos = definitionPos;
+
+  const event = new window.MouseEvent("click", {
+    bubbles: true,
+    button: 0,
+  });
+  let handled = false;
+
+  editor.view.someProp("handleClick", (handleClick) => {
+    if (handleClick(editor.view, targetPos, event)) {
+      handled = true;
+      return true;
+    }
+
+    return false;
+  });
+
+  return handled;
+}
+
 afterEach(() => {
   while (editors.length > 0) {
     editors.pop()?.destroy();
@@ -140,6 +223,108 @@ afterEach(() => {
 });
 
 describe("Footnotes editor extension", () => {
+  it("adds an empty definition when initial content has only a reference", async () => {
+    const editor = createEditor({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "1" } },
+          ],
+        },
+      ],
+    });
+
+    await new Promise((resolve) => window.setTimeout(resolve, 0));
+
+    expect(normalizeFootnoteArtifacts(editor.getJSON()).content?.[1]).toEqual({
+      type: "footnoteDefinition",
+      attrs: { label: "1" },
+      content: [{ type: "paragraph" }],
+    });
+  });
+
+  it("adds empty definitions for missing references after a document change", () => {
+    const editor = createEditor();
+
+    editor.commands.setContent({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "Note" } },
+            { type: "text", text: " and again" },
+            { type: "footnoteReference", attrs: { label: "note" } },
+          ],
+        },
+        {
+          type: "blockquote",
+          content: [
+            {
+              type: "paragraph",
+              content: [
+                { type: "text", text: "Nested" },
+                { type: "footnoteReference", attrs: { label: "2" } },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(
+      normalizeFootnoteArtifacts(editor.getJSON()).content?.slice(-2),
+    ).toEqual([
+      {
+        type: "footnoteDefinition",
+        attrs: { label: "Note" },
+        content: [{ type: "paragraph" }],
+      },
+      {
+        type: "footnoteDefinition",
+        attrs: { label: "2" },
+        content: [{ type: "paragraph" }],
+      },
+    ]);
+  });
+
+  it("does not duplicate an existing case-insensitive definition", () => {
+    const editor = createEditor();
+
+    editor.commands.setContent({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "Note" } },
+          ],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "note" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Existing note" }],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(
+      editor
+        .getJSON()
+        .content?.filter((node) => node.type === "footnoteDefinition"),
+    ).toHaveLength(1);
+  });
+
   it("insertFootnote inserts a reference, appends a definition, and moves selection into the definition", () => {
     const editor = createEditor({
       type: "doc",
@@ -178,6 +363,105 @@ describe("Footnotes editor extension", () => {
     ).toBe("footnoteDefinition");
   });
 
+  it("clicking an orphan reference creates and focuses its definition", () => {
+    const editor = createEditor({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "1" } },
+          ],
+        },
+      ],
+    });
+    expect(clickFootnoteReference(editor, "1")).toBe(true);
+
+    expect(normalizeFootnoteArtifacts(editor.getJSON()).content?.[1]).toEqual({
+      type: "footnoteDefinition",
+      attrs: { label: "1" },
+      content: [{ type: "paragraph" }],
+    });
+    expect(editor.state.selection.$from.parent.type.name).toBe("paragraph");
+    expect(
+      editor.state.selection.$from.node(editor.state.selection.$from.depth - 1)
+        .type.name,
+    ).toBe("footnoteDefinition");
+  });
+
+  it("pressing Enter on a selected reference focuses its definition", () => {
+    const editor = createEditor({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            { type: "text", text: "Body" },
+            { type: "footnoteReference", attrs: { label: "1" } },
+          ],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "1" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Existing note" }],
+            },
+          ],
+        },
+      ],
+    });
+    editor.commands.setNodeSelection(findFootnoteReferencePos(editor, "1"));
+
+    expect(pressEnter(editor)).toBe(true);
+    expect(
+      editor.state.selection.$from.node(editor.state.selection.$from.depth - 1)
+        .type.name,
+    ).toBe("footnoteDefinition");
+  });
+
+  it("clicking between adjacent definitions focuses the next definition", () => {
+    const editor = createEditor({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "Body" }],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "1" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "First note" }],
+            },
+          ],
+        },
+        {
+          type: "footnoteDefinition",
+          attrs: { label: "2" },
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Second note" }],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(clickBeforeFootnoteDefinition(editor, "2")).toBe(true);
+
+    const definitionNode = editor.state.selection.$from.node(
+      editor.state.selection.$from.depth - 1,
+    );
+    expect(definitionNode.type.name).toBe("footnoteDefinition");
+    expect(definitionNode.attrs.label).toBe("2");
+  });
+
   it("assigns the next numeric label when a footnote already exists", () => {
     const editor = createEditor({
       type: "doc",