@jant/core 0.6.9 → 0.6.11

package/src/client/components/jant-settings-general.ts

@@ -43,6 +43,7 @@ export class JantSettingsGeneral extends LitElement {
     mainFeedUrl: { type: String, attribute: "main-feed-url" },
     latestFeedUrl: { type: String, attribute: "latest-feed-url" },
     featuredFeedUrl: { type: String, attribute: "featured-feed-url" },
+    archiveFeedUrl: { type: String, attribute: "archive-feed-url" },
 
     // Site group
     _siteName: { state: true },
@@ -90,6 +91,7 @@ export class JantSettingsGeneral extends LitElement {
   declare mainFeedUrl: string;
   declare latestFeedUrl: string;
   declare featuredFeedUrl: string;
+  declare archiveFeedUrl: string;
 
   // Site
   declare _siteName: string;
@@ -157,8 +159,9 @@ export class JantSettingsGeneral extends LitElement {
     this.siteDescriptionFallback = "";
     this.demoMode = false;
     this.mainFeedUrl = "/feed";
-    this.latestFeedUrl = "/feed/latest";
-    this.featuredFeedUrl = "/feed/featured";
+    this.latestFeedUrl = "/latest/feed";
+    this.featuredFeedUrl = "/featured/feed";
+    this.archiveFeedUrl = "/archive/feed";
 
     this._siteName = "";
     this._siteDescription = "";
@@ -718,10 +721,17 @@ export class JantSettingsGeneral extends LitElement {
     }
   }
 
-  private _renderFeedInfoRow(label: string, value: string) {
+  private _renderFeedInfoRow(
+    label: string,
+    value: string,
+    description?: string,
+  ) {
     return html`
       <div class="flex min-w-0 flex-col gap-1">
         <p class="text-sm font-medium">${label}</p>
+        ${description
+          ? html`<p class="text-sm text-muted-foreground">${description}</p>`
+          : ""}
         <div class="relative">
           <input
             type="text"
@@ -967,6 +977,11 @@ export class JantSettingsGeneral extends LitElement {
                 this.labels.featuredFeedUrl,
                 this.featuredFeedUrl,
               )}
+              ${this._renderFeedInfoRow(
+                this.labels.archiveFeedUrl,
+                this.archiveFeedUrl,
+                this.labels.archiveFeedUrlHelp,
+              )}
             </div>
           </div>
 

package/src/client/components/settings-types.ts

@@ -35,6 +35,8 @@ export interface SettingsLabels {
   mainFeedUrl: string;
   latestFeedUrl: string;
   featuredFeedUrl: string;
+  archiveFeedUrl: string;
+  archiveFeedUrlHelp: string;
   latestFeedOption: string;
   latestFeedOptionDescription: string;
   featuredFeedOption: string;

package/src/client/compose-bridge.ts

@@ -32,7 +32,23 @@ import { uploadViaSession } from "./upload-session.js";
 import { publicPath } from "./runtime-paths.js";
 import { tiptapJsonToMarkdown } from "../lib/tiptap-to-markdown.js";
 import { getMediaCategory } from "../lib/upload.js";
-import { resolveInlineImageUrls } from "./tiptap/inline-image-upload.js";
+import {
+  resolveInlineImageUrls,
+  hasPendingInlineImagePlaceholders,
+} from "./tiptap/inline-image-upload.js";
+
+/**
+ * Whether a serialized post body still references inline image placeholders
+ * pending upload or paste-rehost. Drives the "uploading" toast and whether to
+ * resolve placeholders before submit.
+ */
+function bodyHasPendingInline(body: string): boolean {
+  try {
+    return hasPendingInlineImagePlaceholders(JSON.parse(body));
+  } catch {
+    return false;
+  }
+}
 
 function getComposeEditorFromEventTarget(
   target: globalThis.EventTarget | null,
@@ -679,10 +695,10 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
   // Get labels for toast messages
   const labels = composeEl?.labels;
   const uploadingMsg = labels?.uploading ?? "Uploading...";
-  const hasInlineBlobs = detail.threadPosts
-    ? detail.threadPosts.some((p) => p.body.includes('"blob:'))
-    : detail.body.includes('"blob:');
-  const hasPending = detail.pendingAttachments.length > 0 || hasInlineBlobs;
+  const hasInlinePending = detail.threadPosts
+    ? detail.threadPosts.some((p) => bodyHasPendingInline(p.body))
+    : bodyHasPendingInline(detail.body);
+  const hasPending = detail.pendingAttachments.length > 0 || hasInlinePending;
   const publishedMsg = labels?.published ?? "Published!";
   const viewLabel = labels?.view ?? "View";
 
@@ -831,7 +847,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       const resolvedPosts = await Promise.all(
         threadPosts.map(async (post) => {
           let body = post.body;
-          if (body.includes('"blob:')) {
+          if (bodyHasPendingInline(body)) {
             try {
               const bodyJson = JSON.parse(body);
               const resolved = await resolveInlineImageUrls(bodyJson);
@@ -940,8 +956,9 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       mediaClientIdMap,
     );
 
-    // Resolve any blob: inline image URLs to real URLs before submitting
-    if (hasInlineBlobs) {
+    // Resolve any pending inline image placeholders (blob upload + paste rehost)
+    // to their stored URLs before submitting.
+    if (hasInlinePending) {
       try {
         const bodyJson = JSON.parse(detail.body);
         const resolved = await resolveInlineImageUrls(bodyJson);

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__/link-toolbar.test.ts

@@ -168,6 +168,47 @@ describe("LinkToolbar", () => {
     expect(linkMark).toBeUndefined();
   });
 
+  it("opens the popover when a link is clicked (tap on mobile)", async () => {
+    const editor = createEditor();
+
+    // Create a link, then move the caret off it and dismiss the popover.
+    editor.commands.setTextSelection({ from: 1, to: 6 });
+    editor.view.dom.dispatchEvent(new CustomEvent("tiptap:open-link-input"));
+    const urlInput = requireElement(
+      document.querySelector<HTMLInputElement>(".tiptap-link-input-field"),
+      "expected url field",
+    );
+    urlInput.value = "https://example.com";
+    urlInput.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+    );
+    await Promise.resolve();
+
+    editor.commands.setTextSelection(10);
+    await Promise.resolve();
+    editor.commands.blur();
+    const popup = requireElement(
+      document.querySelector<HTMLElement>(".tiptap-link-input"),
+      "expected link popup",
+    );
+    popup.style.display = "none";
+
+    // Clicking the rendered link re-opens the popover without a prior caret
+    // move — this is the path that was broken on touch devices.
+    const anchor = requireElement(
+      editor.view.dom.querySelector<HTMLAnchorElement>("a"),
+      "expected rendered link",
+    );
+    anchor.dispatchEvent(
+      new globalThis.MouseEvent("click", { bubbles: true, button: 0 }),
+    );
+    await Promise.resolve();
+
+    expect(popup.style.display).toBe("flex");
+    expect(urlInput.value).toBe("https://example.com");
+    expect(editor.state.selection.empty).toBe(true);
+  });
+
   it("replaces the link text when the text field is edited", async () => {
     const editor = createEditor();
 

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