@jant/core 0.6.12 → 0.6.14

package/src/client/site-header-nav.js

@@ -5,6 +5,9 @@
  * Manages the "More" dropdown popover.
  */
 
+const moreControllers = new WeakMap();
+const drawerControllers = new WeakMap();
+
 function initMoreDropdown(root) {
   const trigger = root.querySelector(".site-header-more-btn");
   const popover = root.querySelector(".site-header-more-popover");
@@ -12,6 +15,9 @@ function initMoreDropdown(root) {
   if (!trigger || !popover) return;
   if (trigger.dataset.moreInitialized === "true") return;
   trigger.dataset.moreInitialized = "true";
+  const controller = new AbortController();
+  const signal = controller.signal;
+  moreControllers.set(trigger, controller);
 
   function open() {
     popover.setAttribute("aria-hidden", "false");
@@ -29,30 +35,49 @@ function initMoreDropdown(root) {
     if (focusTrigger) trigger.focus();
   }
 
-  trigger.addEventListener("click", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (trigger.getAttribute("aria-expanded") === "true") {
-      close();
-    } else {
-      open();
-    }
-  });
-
-  document.addEventListener("click", (e) => {
-    if (!(e.target instanceof Node)) return;
-    if (!trigger.parentElement?.contains(e.target)) close();
-  });
-
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape" && popover.getAttribute("aria-hidden") === "false") {
-      close(true);
-    }
-  });
-
-  document.addEventListener("basecoat:popover", (e) => {
-    if (e.detail?.source !== trigger.parentElement) close();
-  });
+  trigger.addEventListener(
+    "click",
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (trigger.getAttribute("aria-expanded") === "true") {
+        close();
+      } else {
+        open();
+      }
+    },
+    { signal },
+  );
+
+  document.addEventListener(
+    "click",
+    (e) => {
+      if (!(e.target instanceof Node)) return;
+      if (!trigger.parentElement?.contains(e.target)) close();
+    },
+    { signal },
+  );
+
+  document.addEventListener(
+    "keydown",
+    (e) => {
+      if (
+        e.key === "Escape" &&
+        popover.getAttribute("aria-hidden") === "false"
+      ) {
+        close(true);
+      }
+    },
+    { signal },
+  );
+
+  document.addEventListener(
+    "basecoat:popover",
+    (e) => {
+      if (e.detail?.source !== trigger.parentElement) close();
+    },
+    { signal },
+  );
 }
 
 const FRESH_VISIT_KEY = "jant:nav-fresh-visits";
@@ -111,6 +136,9 @@ export function initSiteHeaderNav(root = document) {
   if (!hamburger || !drawer || !backdrop) return;
   if (hamburger.dataset.drawerInitialized === "true") return;
   hamburger.dataset.drawerInitialized = "true";
+  const controller = new AbortController();
+  const signal = controller.signal;
+  drawerControllers.set(hamburger, controller);
 
   function open() {
     drawer.setAttribute("aria-hidden", "false");
@@ -138,35 +166,65 @@ export function initSiteHeaderNav(root = document) {
           drawer.setAttribute("inert", "");
         }
       },
-      { once: true },
+      { once: true, signal },
     );
 
     if (returnFocus) hamburger.focus();
   }
 
-  hamburger.addEventListener("click", () => {
-    if (hamburger.getAttribute("aria-expanded") === "true") {
-      close();
-    } else {
-      open();
-    }
-  });
-
-  closeBtn?.addEventListener("click", () => close());
-  backdrop.addEventListener("click", () => close());
-  drawer.addEventListener("click", (event) => {
-    if (!(event.target instanceof Element)) return;
-    if (event.target.closest("a[href]")) {
-      close(false);
-    }
-  });
+  hamburger.addEventListener(
+    "click",
+    () => {
+      if (hamburger.getAttribute("aria-expanded") === "true") {
+        close();
+      } else {
+        open();
+      }
+    },
+    { signal },
+  );
+
+  closeBtn?.addEventListener("click", () => close(), { signal });
+  backdrop.addEventListener("click", () => close(), { signal });
+  drawer.addEventListener(
+    "click",
+    (event) => {
+      if (!(event.target instanceof Element)) return;
+      if (event.target.closest("a[href]")) {
+        close(false);
+      }
+    },
+    { signal },
+  );
+
+  drawer.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        close();
+      }
+    },
+    { signal },
+  );
+}
 
-  drawer.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      close();
-    }
-  });
+export function destroySiteHeaderNav(root = document) {
+  for (const trigger of root.querySelectorAll(".site-header-more-btn")) {
+    const controller = moreControllers.get(trigger);
+    controller?.abort();
+    moreControllers.delete(trigger);
+    delete trigger.dataset.moreInitialized;
+  }
+
+  for (const hamburger of root.querySelectorAll(".site-header-hamburger")) {
+    const controller = drawerControllers.get(hamburger);
+    controller?.abort();
+    drawerControllers.delete(hamburger);
+    delete hamburger.dataset.drawerInitialized;
+  }
+
+  document.documentElement.classList.remove("drawer-open");
 }
 
 initSiteHeaderNav();

package/src/client/tiptap/__tests__/block-insertion.test.ts

@@ -62,4 +62,39 @@ describe("Block insertion flow", () => {
     expect(editor.state.selection.$from.parent.type.name).toBe("paragraph");
     expect(editor.state.selection.$from.parentOffset).toBe(0);
   });
+
+  it("renders a removable placeholder when an image fails to load", () => {
+    const editor = createEditor();
+
+    editor.commands.focus("start");
+    expect(editor.commands.setImage({ src: "/uploads/missing.webp" })).toBe(
+      true,
+    );
+
+    const figure = document.querySelector<HTMLElement>(".tiptap-image-figure");
+    const img = figure?.querySelector<HTMLImageElement>("img");
+    if (!figure || !img) {
+      throw new Error("expected image node view");
+    }
+
+    img.dispatchEvent(new Event("error"));
+
+    expect(figure.dataset.loadState).toBe("missing");
+    expect(figure.textContent).toContain("Image unavailable");
+
+    const deleteButton = figure.querySelector<HTMLButtonElement>(
+      ".tiptap-image-missing-delete",
+    );
+    if (!deleteButton) {
+      throw new Error("expected broken image delete button");
+    }
+
+    deleteButton.dispatchEvent(
+      new MouseEvent("mousedown", { bubbles: true, cancelable: true }),
+    );
+
+    expect(
+      editor.getJSON().content?.some((node) => node.type === "image"),
+    ).toBe(false);
+  });
 });

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",

package/src/client/tiptap/__tests__/image-input-rules.test.ts

@@ -0,0 +1,117 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { ImageInputRules } from "../image-input-rules.js";
+import { ImageNode } from "../image-node.js";
+import { LinkInputRules } from "../link-input-rules.js";
+
+const editors: Editor[] = [];
+
+function createEditor(): Editor {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        link: { openOnClick: false, autolink: false },
+      }),
+      LinkInputRules,
+      ImageNode,
+      ImageInputRules,
+    ],
+    content: "<p></p>",
+  });
+
+  editors.push(editor);
+  return editor;
+}
+
+function type(editor: Editor, text: string): void {
+  const view = editor.view;
+  for (const ch of text) {
+    const { from, to } = view.state.selection;
+    const handled = view.someProp("handleTextInput", (handler) =>
+      handler(view, from, to, ch, () => view.state.tr.insertText(ch, from, to)),
+    );
+    if (!handled) view.dispatch(view.state.tr.insertText(ch, from, to));
+  }
+}
+
+afterEach(() => {
+  while (editors.length > 0) {
+    editors.pop()?.destroy();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("ImageInputRules", () => {
+  it("converts typed empty-alt Markdown image syntax into an image node", () => {
+    const editor = createEditor();
+
+    type(editor, "![](https://example.com/image.png)");
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "image",
+        attrs: {
+          src: "https://example.com/image.png",
+          alt: "",
+          title: "",
+          caption: "",
+          href: "",
+          layout: "regular",
+        },
+      },
+      { type: "paragraph" },
+    ]);
+    expect(editor.state.selection.$from.parent.type.name).toBe("paragraph");
+  });
+
+  it("preserves alt text and optional quoted title", () => {
+    const editor = createEditor();
+
+    type(editor, '![A test image](https://example.com/image.png "Title")');
+
+    expect(editor.getJSON().content?.[0]).toMatchObject({
+      type: "image",
+      attrs: {
+        src: "https://example.com/image.png",
+        alt: "A test image",
+        title: "Title",
+      },
+    });
+  });
+
+  it("runs before Markdown link rules", () => {
+    const editor = createEditor();
+
+    type(editor, "![Alt](https://example.com/image.png)");
+
+    expect(editor.getJSON().content?.[0]).toMatchObject({
+      type: "image",
+      attrs: {
+        src: "https://example.com/image.png",
+        alt: "Alt",
+      },
+    });
+    expect(editor.state.doc.textContent).toBe("");
+  });
+
+  it("leaves unsafe image URLs as typed text", () => {
+    const editor = createEditor();
+
+    type(editor, "![](javascript:alert)");
+
+    expect(editor.getJSON().content).toEqual([
+      {
+        type: "paragraph",
+        content: [{ type: "text", text: "![](javascript:alert)" }],
+      },
+    ]);
+  });
+});