@jant/core 0.6.10 → 0.6.11

package/src/client/tiptap/__tests__/inline-image-upload.test.ts

@@ -0,0 +1,143 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor, type JSONContent } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { ImageNode } from "../image-node.js";
+import {
+  rehostInlineImage,
+  resolveInlineImageUrls,
+  hasPendingInlineImagePlaceholders,
+} from "../inline-image-upload.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 },
+      }),
+      ImageNode,
+    ],
+    content: "<p></p>",
+  });
+  editors.push(editor);
+  return editor;
+}
+
+function imageSrcs(editor: Editor): string[] {
+  const out: string[] = [];
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "image") out.push(node.attrs.src as string);
+  });
+  return out;
+}
+
+function jsonImageSrcs(node: JSONContent | null): string[] {
+  if (!node) return [];
+  const out: string[] = [];
+  const walk = (n: JSONContent) => {
+    if (n.type === "image" && typeof n.attrs?.src === "string") {
+      out.push(n.attrs.src);
+    }
+    for (const child of n.content ?? []) walk(child);
+  };
+  walk(node);
+  return out;
+}
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+});
+
+describe("rehostInlineImage", () => {
+  it("swaps the node src on a successful rehost", async () => {
+    const editor = createEditor();
+    const src = "https://ext.example/keep1.png";
+    editor.commands.setImage({ src });
+
+    await rehostInlineImage(
+      editor,
+      src,
+      async () => "https://cdn.local/keep1.webp",
+    );
+
+    expect(imageSrcs(editor)).toEqual(["https://cdn.local/keep1.webp"]);
+  });
+
+  it("keeps a remote node's original src when the rehost fails", async () => {
+    const editor = createEditor();
+    const src = "https://ext.example/fail1.png";
+    editor.commands.setImage({ src });
+
+    await rehostInlineImage(editor, src, async () => {
+      throw new Error("boom");
+    });
+
+    expect(imageSrcs(editor)).toEqual([src]);
+  });
+
+  it("replaces every node sharing a deduped remote src", async () => {
+    const editor = createEditor();
+    const src = "https://ext.example/dupe.png";
+    editor.commands.setImage({ src });
+    editor.commands.setImage({ src });
+
+    await rehostInlineImage(
+      editor,
+      src,
+      async () => "https://cdn.local/dupe.webp",
+    );
+
+    expect(imageSrcs(editor)).toEqual([
+      "https://cdn.local/dupe.webp",
+      "https://cdn.local/dupe.webp",
+    ]);
+  });
+});
+
+describe("resolveInlineImageUrls + hasPendingInlineImagePlaceholders", () => {
+  it("tracks an in-flight rehost and resolves its placeholder to the stored URL", async () => {
+    const editor = createEditor();
+    const src = "https://ext.example/pending.png";
+    editor.commands.setImage({ src });
+
+    let release!: (url: string) => void;
+    const deferred = new Promise<string>((resolve) => {
+      release = resolve;
+    });
+    const rehostDone = rehostInlineImage(editor, src, () => deferred);
+
+    const json = editor.getJSON();
+    expect(hasPendingInlineImagePlaceholders(json)).toBe(true);
+
+    const resolvePromise = resolveInlineImageUrls(json);
+    release("https://cdn.local/pending.webp");
+    const resolved = await resolvePromise;
+    await rehostDone;
+
+    expect(jsonImageSrcs(resolved)).toEqual(["https://cdn.local/pending.webp"]);
+  });
+
+  it("is a no-op for content with no pending placeholders", async () => {
+    const json: JSONContent = {
+      type: "doc",
+      content: [
+        {
+          type: "image",
+          attrs: { src: "https://cdn.local/already-stored.webp" },
+        },
+      ],
+    };
+
+    expect(hasPendingInlineImagePlaceholders(json)).toBe(false);
+    const resolved = await resolveInlineImageUrls(json);
+    expect(resolved).toBe(json);
+  });
+});

package/src/client/tiptap/__tests__/paste-rehost-e2e.test.ts

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createTiptapEditor } from "../create-editor.js";
+import type { Editor } from "@tiptap/core";
+
+const editors: Editor[] = [];
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  document.body.innerHTML = "";
+  vi.restoreAllMocks();
+});
+
+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.view.dom.dispatchEvent(event);
+}
+
+function imageSrcs(editor: Editor): string[] {
+  const out: string[] = [];
+  editor.state.doc.descendants((n) => {
+    if (n.type.name === "image") out.push(n.attrs.src as string);
+  });
+  return out;
+}
+
+describe("paste → rehost end to end", () => {
+  it("turns pasted article <img> into image nodes and triggers rehost", async () => {
+    const rehost = vi.fn();
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const editor = createTiptapEditor({
+      element: el,
+      rehostImages: { shouldRehost: () => true, rehost },
+    });
+    editors.push(editor);
+    editor.commands.focus();
+
+    const html =
+      "<p>正文段落一</p>" +
+      '<p><img src="https://img1.doubanio.com/view/photo/l/public/p1.jpg"></p>' +
+      "<p>正文段落二</p>";
+    dispatchPaste(editor, html);
+    await flush();
+
+    expect(imageSrcs(editor)).toContain(
+      "https://img1.doubanio.com/view/photo/l/public/p1.jpg",
+    );
+    expect(rehost).toHaveBeenCalledWith(
+      "https://img1.doubanio.com/view/photo/l/public/p1.jpg",
+    );
+  });
+});

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

@@ -0,0 +1,139 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { ImageNode } from "../image-node.js";
+import { RehostImages, clearRehostInFlight } from "../rehost-images.js";
+
+const editors: Editor[] = [];
+const usedSrcs: string[] = [];
+
+/** Mirrors the predicate the compose editor passes to the extension. */
+function shouldRehost(src: string): boolean {
+  if (src.startsWith("data:")) return true;
+  if (!/^https?:\/\//i.test(src)) return false;
+  let origin: string;
+  try {
+    origin = new URL(src).origin;
+  } catch {
+    return false;
+  }
+  if (origin === window.location.origin) return false;
+  const mediaBase = document.documentElement.dataset.mediaBase;
+  if (mediaBase && src.startsWith(mediaBase)) return false;
+  return true;
+}
+
+function createEditor(rehost: (src: string) => void): 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 },
+      }),
+      ImageNode,
+      RehostImages.configure({ shouldRehost, rehost }),
+    ],
+    content: "<p></p>",
+  });
+  editors.push(editor);
+  return editor;
+}
+
+/** Track a src so the module-level in-flight set is reset between tests. */
+function track(src: string): string {
+  usedSrcs.push(src);
+  return src;
+}
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+afterEach(() => {
+  while (editors.length > 0) editors.pop()?.destroy();
+  for (const src of usedSrcs) clearRehostInFlight(src);
+  usedSrcs.length = 0;
+  document.body.innerHTML = "";
+  delete document.documentElement.dataset.mediaBase;
+  vi.restoreAllMocks();
+});
+
+describe("RehostImages extension", () => {
+  it("fires rehost once for a remote image", async () => {
+    const rehost = vi.fn();
+    const editor = createEditor(rehost);
+    const src = track("https://ext.example/a-remote.png");
+
+    editor.commands.setImage({ src });
+    await flush();
+
+    expect(rehost).toHaveBeenCalledTimes(1);
+    expect(rehost).toHaveBeenCalledWith(src);
+  });
+
+  it("fires rehost for a data: URL", async () => {
+    const rehost = vi.fn();
+    const editor = createEditor(rehost);
+    const src = track("data:image/png;base64,AAAAb");
+
+    editor.commands.setImage({ src });
+    await flush();
+
+    expect(rehost).toHaveBeenCalledWith(src);
+  });
+
+  it("skips same-origin, relative, blob, and media-base images", async () => {
+    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") });
+    await flush();
+
+    expect(rehost).not.toHaveBeenCalled();
+  });
+
+  it("dedupes identical remote srcs in one document", async () => {
+    const rehost = vi.fn();
+    const editor = createEditor(rehost);
+    const src = track("https://ext.example/dupe.png");
+
+    editor.commands.setImage({ src });
+    editor.commands.setImage({ src });
+    await flush();
+
+    expect(rehost).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not re-trigger after the src is swapped to a local URL", async () => {
+    const rehost = vi.fn();
+    const editor = createEditor(rehost);
+    const src = track("https://ext.example/swap.png");
+
+    editor.commands.setImage({ src });
+    await flush();
+    expect(rehost).toHaveBeenCalledTimes(1);
+
+    editor.commands.setContent({
+      type: "doc",
+      content: [
+        { type: "paragraph" },
+        {
+          type: "image",
+          attrs: { src: `${window.location.origin}/m/swap.png` },
+        },
+      ],
+    });
+    await flush();
+
+    expect(rehost).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -11,6 +11,7 @@ import {
 } from "./extensions.js";
 import type { FormattingToolbarMode } from "./toolbar-mode.js";
 import type { PasteMediaOptions } from "./paste-media.js";
+import type { RehostImagesOptions } from "./rehost-images.js";
 import { normalizeFootnoteArtifacts } from "../../lib/footnotes.js";
 import { tiptapJsonToMarkdown } from "../../lib/tiptap-to-markdown.js";
 import { parseMarkdownDocument } from "../../lib/markdown-manager.js";
@@ -24,6 +25,7 @@ export interface CreateEditorOptions {
   onSelectionUpdate?: (selection: { from: number; to: number }) => void;
   toolbarMode?: FormattingToolbarMode;
   pasteMedia?: PasteMediaOptions;
+  rehostImages?: RehostImagesOptions;
 }
 
 /**
@@ -39,6 +41,7 @@ export function createTiptapEditor(options: CreateEditorOptions): Editor {
       placeholder: options.placeholder,
       toolbarMode: options.toolbarMode,
       pasteMedia: options.pasteMedia,
+      rehostImages: options.rehostImages,
     }),
     content: options.content ?? undefined,
     editorProps: {

package/src/client/tiptap/extensions.ts

@@ -24,6 +24,8 @@ import { MoreBreak } from "./more-break.js";
 import { EmbedNode } from "./embed-node.js";
 import { HtmlBlockNode } from "./html-block-node.js";
 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 {
   MARKDOWN_MARKED_OPTIONS,
@@ -34,6 +36,7 @@ export interface EditorExtensionOptions {
   placeholder?: string;
   toolbarMode?: FormattingToolbarMode;
   pasteMedia?: PasteMediaOptions;
+  rehostImages?: RehostImagesOptions;
 }
 
 /**
@@ -113,6 +116,7 @@ export function createEditorExtensions(
     SlashCommands,
     EmbedPaste,
     PasteMedia.configure(options.pasteMedia ?? {}),
+    RehostImages.configure(options.rehostImages ?? {}),
     BubbleMenu.configure({
       toolbarMode: options.toolbarMode ?? "default",
     }),