@jant/core 0.6.12 → 0.6.13

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__/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)" }],
+      },
+    ]);
+  });
+});

package/src/client/tiptap/create-editor.ts

@@ -12,6 +12,7 @@ import {
 import type { FormattingToolbarMode } from "./toolbar-mode.js";
 import type { PasteMediaOptions } from "./paste-media.js";
 import type { RehostImagesOptions } from "./rehost-images.js";
+import type { ImageNodeLabels } from "./image-node.js";
 import { normalizeFootnoteArtifacts } from "../../lib/footnotes.js";
 import { tiptapJsonToMarkdown } from "../../lib/tiptap-to-markdown.js";
 import { parseMarkdownDocument } from "../../lib/markdown-manager.js";
@@ -22,10 +23,12 @@ export interface CreateEditorOptions {
   content?: JSONContent | null;
   onUpdate?: (json: JSONContent) => void;
   onFocus?: () => void;
+  onBlur?: () => void;
   onSelectionUpdate?: (selection: { from: number; to: number }) => void;
   toolbarMode?: FormattingToolbarMode;
   pasteMedia?: PasteMediaOptions;
   rehostImages?: RehostImagesOptions;
+  imageNodeLabels?: Partial<ImageNodeLabels>;
 }
 
 /**
@@ -42,6 +45,7 @@ export function createTiptapEditor(options: CreateEditorOptions): Editor {
       toolbarMode: options.toolbarMode,
       pasteMedia: options.pasteMedia,
       rehostImages: options.rehostImages,
+      imageNodeLabels: options.imageNodeLabels,
     }),
     content: options.content ?? undefined,
     editorProps: {
@@ -54,6 +58,9 @@ export function createTiptapEditor(options: CreateEditorOptions): Editor {
     onFocus: () => {
       options.onFocus?.();
     },
+    onBlur: () => {
+      options.onBlur?.();
+    },
     onSelectionUpdate: ({ editor }) => {
       options.onSelectionUpdate?.({
         from: editor.state.selection.from,

package/src/client/tiptap/extensions.ts

@@ -19,7 +19,7 @@ import { WrappingInputRules } from "./wrapping-input-rules.js";
 import { InsertParagraphAround } from "./insert-paragraph-around.js";
 import { Footnotes } from "./footnotes.js";
 import type { FormattingToolbarMode } from "./toolbar-mode.js";
-import { ImageNode } from "./image-node.js";
+import { ImageNode, type ImageNodeLabels } from "./image-node.js";
 import { MoreBreak } from "./more-break.js";
 import { EmbedNode } from "./embed-node.js";
 import { HtmlBlockNode } from "./html-block-node.js";
@@ -27,6 +27,7 @@ import { EmbedPaste } from "./embed-paste.js";
 import { RehostImages } from "./rehost-images.js";
 import type { RehostImagesOptions } from "./rehost-images.js";
 import { MarkdownClipboard } from "./markdown-clipboard.js";
+import { ImageInputRules } from "./image-input-rules.js";
 import {
   MARKDOWN_MARKED_OPTIONS,
   createMarkdownContentExtensions,
@@ -37,6 +38,7 @@ export interface EditorExtensionOptions {
   toolbarMode?: FormattingToolbarMode;
   pasteMedia?: PasteMediaOptions;
   rehostImages?: RehostImagesOptions;
+  imageNodeLabels?: Partial<ImageNodeLabels>;
 }
 
 /**
@@ -97,7 +99,9 @@ export function createEditorExtensions(
 ): Extensions {
   return [
     ...createMarkdownContentExtensions({
-      imageExtension: ImageNode,
+      imageExtension: ImageNode.configure({
+        labels: options.imageNodeLabels,
+      }),
       moreBreakExtension: MoreBreak,
       embedExtension: EmbedNode,
       htmlBlockExtension: HtmlBlockNode,
@@ -110,6 +114,7 @@ export function createEditorExtensions(
       placeholder: options.placeholder ?? "Write something…",
     }),
     Footnotes,
+    ImageInputRules,
     LinkInputRules,
     WrappingInputRules,
     MarkdownClipboard,

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

@@ -0,0 +1,48 @@
+import { Extension, InputRule } from "@tiptap/core";
+import { sanitizeUrl } from "../../lib/url.js";
+import { moveSelectionAfterBlockInsertion } from "./block-insertion.js";
+
+// Keep the URL group aligned with link-input-rules: single-character
+// alternatives avoid catastrophic backtracking on failed Markdown matches.
+const MARKDOWN_IMAGE_INPUT_REGEX =
+  /!\[([^\]\n]*)\]\(((?:[^()\s"]|\([^()\s"]*\))+)(?:\s*"([^"\n]*)")?\)$/;
+
+function sanitizeImageSrc(src: string): string {
+  const sanitized = sanitizeUrl(src.trim());
+  if (!sanitized || /^mailto:/i.test(sanitized)) return "";
+  return sanitized;
+}
+
+export const ImageInputRules = Extension.create({
+  name: "imageInputRules",
+
+  // Runs before LinkInputRules so `![alt](url)` is handled as an image rather
+  // than the inner `[alt](url)` being converted to a link.
+  priority: 1000,
+
+  addInputRules() {
+    const imageType = this.editor.schema.nodes.image;
+    if (!imageType) return [];
+
+    return [
+      new InputRule({
+        find: MARKDOWN_IMAGE_INPUT_REGEX,
+        handler: ({ state, range, match }) => {
+          const src = sanitizeImageSrc(match[2] ?? "");
+          if (!src) return null;
+
+          state.tr.replaceRangeWith(
+            range.from,
+            range.to,
+            imageType.create({
+              src,
+              alt: match[1] ?? "",
+              title: match[3] ?? "",
+            }),
+          );
+          moveSelectionAfterBlockInsertion(state.tr, state.schema);
+        },
+      }),
+    ];
+  },
+});