@jant/core 0.6.11 → 0.6.13

package/src/client/tiptap/__tests__/rehost-images.test.ts

@@ -52,6 +52,22 @@ function track(src: string): string {
 
 const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
 
+function dispatchPaste(editor: Editor, html: string, text = "") {
+  const event = new Event("paste", {
+    bubbles: true,
+    cancelable: true,
+  }) as Event & { clipboardData: unknown };
+  event.clipboardData = {
+    getData: (type: string) =>
+      type === "text/html" ? html : type === "text/plain" ? text : "",
+    files: [],
+    items: [],
+    types: ["text/html", "text/plain"],
+  };
+  editor.commands.focus();
+  editor.view.dom.dispatchEvent(event);
+}
+
 afterEach(() => {
   while (editors.length > 0) editors.pop()?.destroy();
   for (const src of usedSrcs) clearRehostInFlight(src);
@@ -62,12 +78,12 @@ afterEach(() => {
 });
 
 describe("RehostImages extension", () => {
-  it("fires rehost once for a remote image", async () => {
+  it("fires rehost once for a pasted remote image", async () => {
     const rehost = vi.fn();
     const editor = createEditor(rehost);
     const src = track("https://ext.example/a-remote.png");
 
-    editor.commands.setImage({ src });
+    dispatchPaste(editor, `<p><img src="${src}"></p>`);
     await flush();
 
     expect(rehost).toHaveBeenCalledTimes(1);
@@ -79,7 +95,7 @@ describe("RehostImages extension", () => {
     const editor = createEditor(rehost);
     const src = track("data:image/png;base64,AAAAb");
 
-    editor.commands.setImage({ src });
+    dispatchPaste(editor, `<p><img src="${src}"></p>`);
     await flush();
 
     expect(rehost).toHaveBeenCalledWith(src);
@@ -89,13 +105,15 @@ describe("RehostImages extension", () => {
     const rehost = vi.fn();
     document.documentElement.dataset.mediaBase = "https://cdn.mysite.test";
     const editor = createEditor(rehost);
-
-    editor.commands.setImage({
-      src: track(`${window.location.origin}/m/x.png`),
-    });
-    editor.commands.setImage({ src: track("/relative/y.png") });
-    editor.commands.setImage({ src: track("blob:abc-123") });
-    editor.commands.setImage({ src: track("https://cdn.mysite.test/z.png") });
+    const sameOrigin = track(`${window.location.origin}/m/x.png`);
+    const relative = track("/relative/y.png");
+    const blob = track("blob:abc-123");
+    const mediaBase = track("https://cdn.mysite.test/z.png");
+
+    dispatchPaste(
+      editor,
+      `<p><img src="${sameOrigin}"><img src="${relative}"><img src="${blob}"><img src="${mediaBase}"></p>`,
+    );
     await flush();
 
     expect(rehost).not.toHaveBeenCalled();
@@ -106,8 +124,43 @@ describe("RehostImages extension", () => {
     const editor = createEditor(rehost);
     const src = track("https://ext.example/dupe.png");
 
-    editor.commands.setImage({ src });
-    editor.commands.setImage({ src });
+    dispatchPaste(editor, `<p><img src="${src}"><img src="${src}"></p>`);
+    await flush();
+
+    expect(rehost).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not rehost remote images loaded through setContent", async () => {
+    const rehost = vi.fn();
+    const editor = createEditor(rehost);
+    const src = track("https://ext.example/saved-external.png");
+
+    editor.commands.setContent({
+      type: "doc",
+      content: [
+        { type: "paragraph" },
+        {
+          type: "image",
+          attrs: { src },
+        },
+      ],
+    });
+    await flush();
+
+    expect(rehost).not.toHaveBeenCalled();
+  });
+
+  it("does not retry a failed paste rehost on later edits", async () => {
+    const rehost = vi.fn();
+    const editor = createEditor(rehost);
+    const src = track("https://ext.example/blocked.png");
+
+    dispatchPaste(editor, `<p><img src="${src}"></p>`);
+    await flush();
+    expect(rehost).toHaveBeenCalledTimes(1);
+
+    clearRehostInFlight(src);
+    editor.commands.insertContent("later edit");
     await flush();
 
     expect(rehost).toHaveBeenCalledTimes(1);
@@ -118,7 +171,7 @@ describe("RehostImages extension", () => {
     const editor = createEditor(rehost);
     const src = track("https://ext.example/swap.png");
 
-    editor.commands.setImage({ src });
+    dispatchPaste(editor, `<p><img src="${src}"></p>`);
     await flush();
     expect(rehost).toHaveBeenCalledTimes(1);
 

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

package/src/client/tiptap/image-node.ts

@@ -20,6 +20,22 @@ import type { EditorView } from "@tiptap/pm/view";
 import { uploadWithMetadata } from "../upload-with-metadata.js";
 import { renderMarkdownImage } from "../../lib/rich-image.js";
 
+export const INLINE_IMAGE_LOAD_STATE_EVENT = "jant:inline-image-load-state";
+
+export interface ImageNodeLabels {
+  unavailable: string;
+  delete: string;
+  replace: string;
+  open: string;
+}
+
+const DEFAULT_IMAGE_NODE_LABELS: ImageNodeLabels = {
+  unavailable: "Image unavailable",
+  delete: "Delete image",
+  replace: "Replace image",
+  open: "Open image URL",
+};
+
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     image: {
@@ -40,6 +56,8 @@ declare module "@tiptap/core" {
 // ---------------------------------------------------------------------------
 
 const ICONS = {
+  /** Broken image placeholder */
+  imageBroken: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2.5"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="m5 17 4.25-4.25 2.5 2.5 1.75-1.75L19 19"/><path d="m4 4 16 16"/></svg>`,
   /** Content-width — centered column */
   regular: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><rect x="3" y="3" width="10" height="10" rx="1.5"/></svg>`,
   /** Wide — max 1200 px breakout */
@@ -62,6 +80,9 @@ class ImageNodeView {
   dom: HTMLElement;
 
   private img: HTMLImageElement;
+  private missingPanel: HTMLElement;
+  private missingSource: HTMLElement;
+  private openBtn: HTMLButtonElement;
   private figcaption: HTMLElement;
   private captionInput: HTMLInputElement;
   private altBtn: HTMLButtonElement;
@@ -73,25 +94,31 @@ class ImageNodeView {
   private view: EditorView;
   private getPos: () => number | undefined;
   private editor: Editor;
+  private labels: ImageNodeLabels;
 
   private editingAlt = false;
+  private missing = false;
+  private currentSrc = "";
 
   constructor(
     node: ProseMirrorNode,
     view: EditorView,
     getPos: () => number | undefined,
     editor: Editor,
+    labels: ImageNodeLabels,
   ) {
     this.node = node;
     this.view = view;
     this.getPos = getPos;
     this.editor = editor;
+    this.labels = labels;
 
     // --- Build DOM tree ---
     const figure = document.createElement("figure");
     figure.className = "tiptap-image-figure";
     figure.dataset.selected = "false";
     figure.dataset.layout = String(node.attrs.layout || "regular");
+    figure.dataset.loadState = "loading";
     this.dom = figure;
 
     // Image container
@@ -101,13 +128,78 @@ class ImageNodeView {
 
     // <img>
     const img = document.createElement("img");
-    img.src = String(node.attrs.src ?? "");
-    img.alt = String(node.attrs.alt ?? "");
-    if (node.attrs.title) img.title = String(node.attrs.title);
     img.draggable = false;
+    img.addEventListener("load", () => this.setMissing(false));
+    img.addEventListener("error", () => this.setMissing(true));
     container.appendChild(img);
     this.img = img;
 
+    // --- Missing image panel ---
+    const missingPanel = document.createElement("div");
+    missingPanel.className = "tiptap-image-missing";
+    missingPanel.role = "group";
+    missingPanel.tabIndex = 0;
+    missingPanel.setAttribute("aria-label", labels.unavailable);
+    missingPanel.addEventListener("keydown", (e) => {
+      if (e.key !== "Delete" && e.key !== "Backspace") return;
+      e.preventDefault();
+      this.deleteNode();
+    });
+    container.appendChild(missingPanel);
+    this.missingPanel = missingPanel;
+
+    const missingIcon = document.createElement("span");
+    missingIcon.className = "tiptap-image-missing-icon";
+    missingIcon.setAttribute("aria-hidden", "true");
+    missingIcon.innerHTML = ICONS.imageBroken;
+    missingPanel.appendChild(missingIcon);
+
+    const missingCopy = document.createElement("span");
+    missingCopy.className = "tiptap-image-missing-copy";
+    missingPanel.appendChild(missingCopy);
+
+    const missingTitle = document.createElement("strong");
+    missingTitle.textContent = labels.unavailable;
+    missingCopy.appendChild(missingTitle);
+
+    const missingSource = document.createElement("span");
+    missingSource.className = "tiptap-image-missing-source";
+    missingCopy.appendChild(missingSource);
+    this.missingSource = missingSource;
+
+    const missingActions = document.createElement("span");
+    missingActions.className = "tiptap-image-missing-actions";
+    missingPanel.appendChild(missingActions);
+
+    const deleteBtn = document.createElement("button");
+    deleteBtn.type = "button";
+    deleteBtn.className = "tiptap-image-missing-delete";
+    deleteBtn.textContent = labels.delete;
+    deleteBtn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      this.deleteNode();
+    });
+    missingActions.appendChild(deleteBtn);
+
+    const replaceMissingBtn = document.createElement("button");
+    replaceMissingBtn.type = "button";
+    replaceMissingBtn.textContent = labels.replace;
+    replaceMissingBtn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      this.handleReplace();
+    });
+    missingActions.appendChild(replaceMissingBtn);
+
+    const openBtn = document.createElement("button");
+    openBtn.type = "button";
+    openBtn.textContent = labels.open;
+    openBtn.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      this.handleOpenOriginal();
+    });
+    missingActions.appendChild(openBtn);
+    this.openBtn = openBtn;
+
     // --- Toolbar (shown when selected) ---
     const toolbar = document.createElement("div");
     toolbar.className = "tiptap-image-toolbar";
@@ -206,6 +298,8 @@ class ImageNodeView {
     figcaption.textContent = String(node.attrs.caption ?? "");
     figure.appendChild(figcaption);
     this.figcaption = figcaption;
+
+    this.syncImageAttrs(node);
   }
 
   // --- ProseMirror NodeView interface ---
@@ -215,9 +309,7 @@ class ImageNodeView {
     this.node = node;
 
     // Sync DOM with new attrs
-    this.img.src = String(node.attrs.src ?? "");
-    this.img.alt = String(node.attrs.alt ?? "");
-    this.img.title = String(node.attrs.title ?? "");
+    this.syncImageAttrs(node);
 
     this.dom.dataset.layout = String(node.attrs.layout || "regular");
     this.layoutBtns.forEach((btn, value) => {
@@ -259,6 +351,7 @@ class ImageNodeView {
     // Let the NodeView handle events on toolbar, caption bar, and their children
     if (target.closest(".tiptap-image-toolbar")) return true;
     if (target.closest(".tiptap-image-caption-bar")) return true;
+    if (target.closest(".tiptap-image-missing")) return true;
     return false;
   }
 
@@ -296,6 +389,65 @@ class ImageNodeView {
     this.view.dispatch(tr);
   }
 
+  private syncImageAttrs(node: ProseMirrorNode) {
+    const src = String(node.attrs.src ?? "");
+    this.img.alt = String(node.attrs.alt ?? "");
+    this.img.title = String(node.attrs.title ?? "");
+    this.missingSource.textContent = imageSourceHint(src);
+    this.openBtn.disabled = !canOpenImageSource(src);
+
+    if (src !== this.currentSrc) {
+      this.currentSrc = src;
+      this.setMissing(false);
+      this.dom.dataset.loadState = "loading";
+      this.img.setAttribute("src", src);
+      this.checkCachedImageState();
+      return;
+    }
+
+    this.checkCachedImageState();
+  }
+
+  private checkCachedImageState() {
+    queueMicrotask(() => {
+      if (
+        !this.img.complete ||
+        this.img.getAttribute("src") !== this.currentSrc
+      ) {
+        return;
+      }
+      this.setMissing(this.img.naturalWidth === 0);
+    });
+  }
+
+  private setMissing(missing: boolean) {
+    if (this.missing === missing) {
+      this.dom.dataset.loadState = missing ? "missing" : "loaded";
+      return;
+    }
+
+    this.missing = missing;
+    this.dom.dataset.loadState = missing ? "missing" : "loaded";
+    this.dom.dispatchEvent(
+      new CustomEvent(INLINE_IMAGE_LOAD_STATE_EVENT, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          src: this.currentSrc,
+          missing,
+        },
+      }),
+    );
+  }
+
+  private deleteNode() {
+    const pos = this.getPos();
+    if (pos === undefined) return;
+    const tr = this.view.state.tr.delete(pos, pos + this.node.nodeSize);
+    this.view.dispatch(tr);
+    this.view.focus();
+  }
+
   private handleLink() {
     const current = String(this.node.attrs.href ?? "");
     if (current) {
@@ -324,6 +476,12 @@ class ImageNodeView {
     input.click();
   }
 
+  private handleOpenOriginal() {
+    const src = String(this.node.attrs.src ?? "");
+    if (!canOpenImageSource(src)) return;
+    window.open(src, "_blank", "noopener,noreferrer");
+  }
+
   private handleExpand() {
     const lightbox = document.querySelector("jant-media-lightbox") as {
       open: (
@@ -358,17 +516,36 @@ class ImageNodeView {
   }
 }
 
+function imageSourceHint(src: string): string {
+  const trimmed = src.trim();
+  if (!trimmed) return "";
+  if (trimmed.length > 140) return `${trimmed.slice(0, 137)}...`;
+  return trimmed;
+}
+
+function canOpenImageSource(src: string): boolean {
+  const trimmed = src.trim();
+  if (!trimmed) return false;
+  return /^(https?:|\/|\.\/|\.\.\/|blob:)/i.test(trimmed);
+}
+
 // ---------------------------------------------------------------------------
 // Node Extension
 // ---------------------------------------------------------------------------
 
-export const ImageNode = Node.create({
+export const ImageNode = Node.create<{ labels?: Partial<ImageNodeLabels> }>({
   name: "image",
   group: "block",
   atom: true,
   selectable: true,
   draggable: true,
 
+  addOptions() {
+    return {
+      labels: DEFAULT_IMAGE_NODE_LABELS,
+    };
+  },
+
   addAttributes() {
     return {
       src: { default: "" },
@@ -514,11 +691,16 @@ export const ImageNode = Node.create({
 
   addNodeView() {
     return ({ node, view, getPos, editor }) => {
+      const labels = {
+        ...DEFAULT_IMAGE_NODE_LABELS,
+        ...(this.options.labels ?? {}),
+      };
       return new ImageNodeView(
         node,
         view,
         getPos as () => number | undefined,
         editor,
+        labels,
       );
     };
   },

package/src/client/tiptap/rehost-images.ts

@@ -62,7 +62,11 @@ export const RehostImages = Extension.create<RehostImagesOptions>({
       new Plugin({
         key: rehostImagesKey,
         appendTransaction(transactions, _oldState, newState) {
-          if (!transactions.some((tr) => tr.docChanged)) return null;
+          if (
+            !transactions.some((tr) => tr.docChanged && tr.getMeta("paste"))
+          ) {
+            return null;
+          }
           const { shouldRehost, rehost } = options;
           if (!shouldRehost || !rehost) return null;
 

package/src/client-auth.ts

@@ -26,7 +26,6 @@ import "./client/collection-form-bridge.js";
 import "./client/components/jant-post-form.js";
 import "./client/post-form-bridge.js";
 import "./client/components/jant-nav-manager.js";
-import "./client/nav-manager-bridge.js";
 import "./client/components/jant-post-menu.js";
 import "./client/collection-page-actions.js";
 import "./client/custom-url-menu.js";

package/src/i18n/__tests__/fallback.test.ts

@@ -1,7 +1,15 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 import { describe, expect, it } from "vitest";
 import { msg } from "@lingui/core/macro";
 import { createI18n } from "../i18n.js";
 
+const CORE_ROOT = resolve(import.meta.dirname, "../../..");
+
+function readLocaleFile(path: string): string {
+  return readFileSync(resolve(CORE_ROOT, path), "utf8");
+}
+
 /**
  * Guards the "public surface stays English under non-English locales" contract.
  *
@@ -37,4 +45,20 @@ describe("i18n locale fallback", () => {
     });
     expect(i18n._(unique)).toBe("Jant fallback canary string");
   });
+
+  it("keeps Chinese settings format labels concise", () => {
+    const zhHansSettings = readLocaleFile(
+      "src/i18n/locales/settings/zh-Hans.po",
+    );
+    const zhHantSettings = readLocaleFile(
+      "src/i18n/locales/settings/zh-Hant.po",
+    );
+
+    expect(zhHansSettings).toContain('msgid "Quote"\nmsgstr "引用"');
+    expect(zhHantSettings).toContain('msgid "Link"\nmsgstr "連結"');
+    expect(zhHantSettings).toContain('msgid "Quote"\nmsgstr "引用"');
+
+    expect(zhHansSettings).not.toContain("Jant 的帖子格式之一");
+    expect(zhHantSettings).not.toContain("Jant 的貼文格式之一");
+  });
 });