@jant/core 0.6.6 → 0.6.8

package/src/client/components/__tests__/jant-compose-dialog.test.ts

@@ -230,6 +230,8 @@ const labels: ComposeLabels = {
   showMore: "Show more",
   showLess: "Show less",
   newThread: "New Thread",
+  replyTitle: "Reply",
+  editTitle: "Edit",
   slashHint: "Type / for commands",
   collectionFormLabels: {
     titleLabel: "Title",
@@ -601,6 +603,317 @@ describe("JantComposeDialog", () => {
     expect(focusSpy).not.toHaveBeenCalled();
   });
 
+  function mockEditPost(post: Record<string, unknown>) {
+    return vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ id: "pst_123", ...post }), {
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+  }
+
+  it("shows the format switcher instead of a title while editing", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    mockEditPost({ format: "note", title: "Hello", body: null });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-segmented")).not.toBeNull();
+    // The "Edit post" title is gone — the switcher takes the center slot.
+    expect(el.querySelector(".compose-dialog-title")).toBeNull();
+  });
+
+  it("shows a Reply title with the format selector above the post when replying", async () => {
+    const el = await createElement();
+    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-dialog-title")?.textContent?.trim()).toBe(
+      "Reply",
+    );
+    // The header center no longer hosts the format selector...
+    expect(
+      el.querySelector(".compose-dialog-header-center .compose-segmented"),
+    ).toBeNull();
+    // ...it sits inline above the reply editor instead.
+    expect(el.querySelector(".compose-thread-post-header")).not.toBeNull();
+  });
+
+  it("shows an Edit title with the format selector above the post when editing a reply", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    const parentId = "019ce8ce-d6d8-7fda-a5df-c2da2bef5ade";
+    // A fresh Response per call: openEdit reads the edited post, then
+    // _fetchReplyContext reads the parent — a single shared Response body can
+    // only be consumed once.
+    vi.spyOn(globalThis, "fetch").mockImplementation((input) => {
+      const url = String(input);
+      const json = url.includes(parentId)
+        ? { id: parentId, bodyHtml: "<p>Parent</p>", format: "note" }
+        : {
+            id: "pst_123",
+            format: "note",
+            title: "Hello",
+            body: null,
+            replyToId: parentId,
+          };
+      return Promise.resolve(
+        new Response(JSON.stringify(json), {
+          headers: { "Content-Type": "application/json" },
+        }),
+      );
+    });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    expect(el.querySelector(".compose-dialog-title")?.textContent?.trim()).toBe(
+      "Edit",
+    );
+    expect(
+      el.querySelector(".compose-dialog-header-center .compose-segmented"),
+    ).toBeNull();
+    expect(el.querySelector(".compose-thread-post-header")).not.toBeNull();
+  });
+
+  it("switches format from the inline selector when replying", async () => {
+    const el = await createElement();
+    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+    await flushUpdates(el);
+
+    const items = el.querySelectorAll<HTMLButtonElement>(
+      ".compose-thread-post-header .compose-segmented-item",
+    );
+    // note / link / quote
+    expect(items.length).toBe(3);
+    items[1].click(); // link
+    await flushUpdates(el);
+
+    expect(el._format).toBe("link");
+  });
+
+  it("edit-mode format switch folds quote fields into the body", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    mockEditPost({
+      format: "quote",
+      quoteText: "Stay hungry",
+      sourceName: "Jobs",
+      body: null,
+    });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    expect(editor._quoteText).toBe("Stay hungry");
+
+    // Click the Note segmented button.
+    el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[0].click();
+    await flushUpdates(el);
+
+    expect(el._format).toBe("note");
+    expect(editor._quoteText).toBe("");
+    expect(editor._quoteAuthor).toBe("");
+    expect(editor._bodyJson?.content?.[0]?.type).toBe("blockquote");
+  });
+
+  it("edit-mode format switch marks the post as having unsaved changes", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    mockEditPost({ format: "note", title: "Hello", body: null });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    const hasUnsaved = (el as unknown as { _hasUnsavedChanges(): boolean })
+      ._hasUnsavedChanges;
+    expect(hasUnsaved.call(el)).toBe(false);
+
+    el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[2].click();
+    await flushUpdates(el);
+
+    expect(el._format).toBe("quote");
+    expect(hasUnsaved.call(el)).toBe(true);
+  });
+
+  it("edit-mode autosave writes to the edit-specific draft key", async () => {
+    vi.useFakeTimers();
+    try {
+      vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+        cb(0);
+        return 1;
+      });
+      mockEditPost({ format: "note", title: "Hello", body: null });
+
+      const el = await createElement();
+      await el.openEdit("pst_123");
+      await el.updateComplete;
+
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      editor._bodyJson = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Edited body" }],
+          },
+        ],
+      };
+      await editor.updateComplete;
+
+      vi.advanceTimersByTime(1000);
+
+      expect(
+        globalThis.localStorage.getItem("jant:compose-edit:pst_123"),
+      ).not.toBeNull();
+      expect(globalThis.localStorage.getItem("jant:compose-draft")).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("autosaves only on a real edit, not on open or a bare format switch", async () => {
+    vi.useFakeTimers();
+    try {
+      vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+        cb(0);
+        return 1;
+      });
+      mockEditPost({
+        format: "note",
+        title: null,
+        body: JSON.stringify({
+          type: "doc",
+          content: [
+            { type: "paragraph", content: [{ type: "text", text: "hi" }] },
+          ],
+        }),
+      });
+
+      const el = await createElement();
+      await el.openEdit("pst_123");
+      await el.updateComplete;
+      const editor = requireElement(
+        el.querySelector<JantComposeEditor>("jant-compose-editor"),
+        "expected compose editor",
+      );
+      await editor.updateComplete;
+
+      // Opening a post for edit must not persist a local draft on its own.
+      vi.advanceTimersByTime(1000);
+      expect(
+        globalThis.localStorage.getItem("jant:compose-edit:pst_123"),
+      ).toBeNull();
+
+      // Switching format only must not persist either.
+      el.querySelectorAll<HTMLButtonElement>(
+        ".compose-segmented-item",
+      )[2].click();
+      await el.updateComplete;
+      await editor.updateComplete;
+      vi.advanceTimersByTime(1000);
+      expect(
+        globalThis.localStorage.getItem("jant:compose-edit:pst_123"),
+      ).toBeNull();
+
+      // A real edit afterwards persists as usual, with the switched format.
+      editor._quoteText = "now editing";
+      await editor.updateComplete;
+      vi.advanceTimersByTime(1000);
+
+      const saved = globalThis.localStorage.getItem(
+        "jant:compose-edit:pst_123",
+      );
+      expect(saved).not.toBeNull();
+      expect(JSON.parse(saved as string).format).toBe("quote");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("enables the publish button right after an edit-mode switch to quote", async () => {
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+    // A note whose body is a blockquote + paragraph — switching to quote
+    // extracts the blockquote into the quote-text field.
+    mockEditPost({
+      format: "note",
+      title: null,
+      body: JSON.stringify({
+        type: "doc",
+        content: [
+          {
+            type: "blockquote",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "quote2233" }],
+              },
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "— author1" }],
+              },
+            ],
+          },
+          { type: "paragraph", content: [{ type: "text", text: "这个22" }] },
+        ],
+      }),
+    });
+
+    const el = await createElement();
+    await el.openEdit("pst_123");
+    await flushUpdates(el);
+
+    el.querySelectorAll<HTMLButtonElement>(
+      ".compose-segmented-item",
+    )[2].click();
+    await flushUpdates(el);
+
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    expect(el._format).toBe("quote");
+    expect(editor._quoteText).toBe("quote2233");
+    // The submit button must reflect the now-valid quote, not the stale
+    // pre-switch format.
+    expect(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main")?.disabled,
+    ).toBe(false);
+  });
+
   it("submit dispatches jant:compose-submit-deferred with correct payload", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -3319,6 +3632,50 @@ describe("JantComposeDialog", () => {
     expect(el._confirmPanelOpen).toBe(false);
   });
 
+  it("ignores Escape while an IME is composing (e.g. CJK candidate popup)", async () => {
+    // Regression test for GitHub issue #120: when a user types pinyin and
+    // presses Escape to dismiss the IME candidate popup, the compose dialog
+    // must not interpret it as a close request.
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    editor._bodyJson = {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [{ type: "text", text: "已经写了一些内容" }],
+        },
+      ],
+    };
+    await editor.updateComplete;
+
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Escape",
+        isComposing: true,
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+
+    expect(requestCloseSpy).not.toHaveBeenCalled();
+    expect(el._confirmPanelOpen).toBe(false);
+
+    // Sanity: once composition ends, Escape works as before.
+    el.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Escape",
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+    expect(requestCloseSpy).toHaveBeenCalledTimes(1);
+  });
+
   it("still closes normally after file picker selection", async () => {
     const el = await createElement();
     const editor = requireElement(

package/src/client/components/__tests__/jant-compose-editor.test.ts

@@ -264,6 +264,8 @@ const labels: ComposeLabels = {
   showMore: "Show more",
   showLess: "Show less",
   newThread: "New Thread",
+  replyTitle: "Reply",
+  editTitle: "Edit",
   slashHint: "Type / for commands",
   collectionFormLabels: {
     titleLabel: "Title",

package/src/client/components/__tests__/jant-compose-fullscreen.test.ts

@@ -20,6 +20,8 @@ const labels = {
   showMore: "Show more",
   showLess: "Show less",
   newThread: "New Thread",
+  replyTitle: "Reply",
+  editTitle: "Edit",
 } as ComposeLabels;
 
 async function flush(el?: JantComposeFullscreen) {

package/src/client/components/compose-format-convert.ts

@@ -0,0 +1,255 @@
+/**
+ * Compose format conversion
+ *
+ * When a post's format changes while editing (note / link / quote), each format
+ * stores a different subset of structured fields. This module converts those
+ * fields so nothing is silently lost:
+ *
+ * - **Fold** (when *leaving* a format): any field the target format can't hold is
+ *   pushed into the body as a visible block (a blockquote, a heading, or a link
+ *   paragraph) and the field is cleared. This never loses data.
+ * - **Extract** (when *entering* a format): only `blockquote → quoteText` is
+ *   recovered from the body front, which keeps the common `quote → note → quote`
+ *   round-trip lossless. url/title are not auto-extracted — they stay visible in
+ *   the body and the author re-fills the field if needed.
+ *
+ * Pure and DOM-free so it can be unit-tested in isolation. It deep-clones the
+ * body it is given and never mutates its input.
+ */
+
+import type { JSONContent } from "@tiptap/core";
+
+import type { ComposeFormat } from "./compose-types.js";
+
+/** The subset of compose fields that participate in format conversion. */
+export interface ComposeConvertFields {
+  title: string;
+  url: string;
+  quoteText: string;
+  quoteAuthor: string;
+  showTitle: boolean;
+  bodyJson: JSONContent | null;
+}
+
+/** Matches an attribution paragraph: `— Author` or `— Author https://source`. */
+const ATTRIBUTION_RE = /^—\s*(.*?)(?:\s+(https?:\/\/\S+))?\s*$/;
+
+function cloneDoc(doc: JSONContent | null): JSONContent | null {
+  return doc ? (JSON.parse(JSON.stringify(doc)) as JSONContent) : null;
+}
+
+/** Concatenate all descendant text of a node. */
+function nodeText(node: JSONContent | undefined): string {
+  if (!node) return "";
+  if (typeof node.text === "string") return node.text;
+  if (!Array.isArray(node.content)) return "";
+  return node.content.map(nodeText).join("");
+}
+
+function makeHeading(text: string, level = 2): JSONContent {
+  return {
+    type: "heading",
+    attrs: { level },
+    content: [{ type: "text", text }],
+  };
+}
+
+function makeParagraph(text: string): JSONContent {
+  return text
+    ? { type: "paragraph", content: [{ type: "text", text }] }
+    : { type: "paragraph" };
+}
+
+function makeLinkParagraph(url: string): JSONContent {
+  return {
+    type: "paragraph",
+    content: [
+      {
+        type: "text",
+        text: url,
+        marks: [{ type: "link", attrs: { href: url } }],
+      },
+    ],
+  };
+}
+
+function parseAttribution(text: string): {
+  author: string;
+  url: string | null;
+} {
+  const match = ATTRIBUTION_RE.exec(text.trim());
+  if (!match) return { author: "", url: null };
+  return { author: match[1].trim(), url: match[2] ?? null };
+}
+
+/** First link href found anywhere within a node (depth-first), or null. */
+function findLinkHref(node: JSONContent | undefined): string | null {
+  if (!node) return null;
+  if (Array.isArray(node.marks)) {
+    const href = node.marks.find((mark) => mark.type === "link")?.attrs?.href;
+    if (typeof href === "string" && href) return href;
+  }
+  if (Array.isArray(node.content)) {
+    for (const child of node.content) {
+      const found = findLinkHref(child);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * Build the `— Author` attribution paragraph for a folded quote. The author name
+ * is linked to the source url so the body stays clean (no raw url) while the
+ * `note → quote` round-trip can still recover the url from the link mark. When
+ * there is no author, the url itself becomes the link text. Null if neither.
+ */
+function makeAttributionParagraph(
+  author: string,
+  url: string | null,
+): JSONContent | null {
+  const name = author.trim();
+  const href = url?.trim() ?? "";
+  if (!name && !href) return null;
+
+  const linked = (text: string): JSONContent => ({
+    type: "text",
+    text,
+    marks: [{ type: "link", attrs: { href } }],
+  });
+  if (name && href) {
+    return {
+      type: "paragraph",
+      content: [{ type: "text", text: "— " }, linked(name)],
+    };
+  }
+  if (name) {
+    return {
+      type: "paragraph",
+      content: [{ type: "text", text: `— ${name}` }],
+    };
+  }
+  return {
+    type: "paragraph",
+    content: [{ type: "text", text: "— " }, linked(href)],
+  };
+}
+
+function makeBlockquote(
+  quoteText: string,
+  attribution: JSONContent | null,
+): JSONContent {
+  const paragraphs = quoteText.split("\n").map((line) => makeParagraph(line));
+  if (attribution) paragraphs.push(attribution);
+  return { type: "blockquote", content: paragraphs };
+}
+
+/**
+ * Convert compose fields from one post format to another.
+ *
+ * @param from - the current format
+ * @param to - the target format
+ * @param fields - the current field values (not mutated)
+ * @returns new field values appropriate for the target format
+ * @example
+ * // quote → note: the quote becomes a leading blockquote in the body
+ * convertComposeFormat("quote", "note", {
+ *   title: "", url: "", quoteText: "Stay hungry", quoteAuthor: "Jobs",
+ *   showTitle: false, bodyJson: null,
+ * });
+ */
+export function convertComposeFormat(
+  from: ComposeFormat,
+  to: ComposeFormat,
+  fields: ComposeConvertFields,
+): ComposeConvertFields {
+  if (from === to) return fields;
+
+  const out: ComposeConvertFields = { ...fields };
+  const body = cloneDoc(fields.bodyJson);
+  const content: JSONContent[] = Array.isArray(body?.content)
+    ? [...body.content]
+    : [];
+
+  // ── Extract: leading bare-link paragraph → url (reverses the link→note
+  //    fold so link↔note round-trips). Only a "bare" link (text === href) is
+  //    pulled out, so a labeled link line keeps its label instead of silently
+  //    losing it. ─────────────────────────────────────────────────────────
+  if (to === "link" && out.url === "") {
+    const first = content[0];
+    const href = findLinkHref(first);
+    if (
+      href &&
+      first?.type === "paragraph" &&
+      Array.isArray(first.content) &&
+      first.content.length === 1 &&
+      nodeText(first) === href
+    ) {
+      out.url = href;
+      content.shift();
+    }
+  }
+
+  // ── Extract (focused: blockquote → quoteText only) ──────────────────
+  if (
+    to === "quote" &&
+    out.quoteText === "" &&
+    content[0]?.type === "blockquote"
+  ) {
+    const paragraphs = Array.isArray(content[0].content)
+      ? [...content[0].content]
+      : [];
+    const last = paragraphs[paragraphs.length - 1];
+    const lastText = nodeText(last);
+    if (paragraphs.length > 0 && /^—/.test(lastText.trim())) {
+      const parsed = parseAttribution(lastText);
+      // Prefer the link mark's href (the linked-author form) over a url parsed
+      // from plain text (legacy `— Author https://…`).
+      const url = findLinkHref(last) ?? parsed.url;
+      // When the attribution is url-only, the link text is the url itself —
+      // don't mistake it for an author.
+      const author = parsed.author === url ? "" : parsed.author;
+      if (author) out.quoteAuthor = out.quoteAuthor || author;
+      if (url && out.url === "") out.url = url;
+      paragraphs.pop();
+    }
+    out.quoteText = paragraphs.map(nodeText).join("\n").trim();
+    content.shift();
+  }
+
+  // ── Harvest (fold fields the target can't hold into the body) ───────
+  const prepend: JSONContent[] = [];
+
+  // Title → heading (only quote can't hold a title)
+  if (to === "quote" && out.title.trim() !== "") {
+    prepend.push(makeHeading(out.title.trim()));
+    out.title = "";
+  }
+
+  // quoteText → blockquote (note and link can't hold a quote)
+  if (to !== "quote" && out.quoteText.trim() !== "") {
+    // For a note, the source url has no home either, so fold it into the
+    // attribution. For a link, url maps to link.url and is preserved.
+    const foldUrl = to === "note" ? out.url : null;
+    prepend.push(
+      makeBlockquote(
+        out.quoteText,
+        makeAttributionParagraph(out.quoteAuthor, foldUrl),
+      ),
+    );
+    out.quoteText = "";
+    out.quoteAuthor = "";
+    if (to === "note") out.url = "";
+  } else if (to === "note" && out.url.trim() !== "") {
+    // Source was a link (no quote text): notes can't hold a url, so fold it.
+    prepend.push(makeLinkParagraph(out.url.trim()));
+    out.url = "";
+  }
+
+  if (prepend.length) content.unshift(...prepend);
+
+  out.bodyJson = content.length ? { type: "doc", content } : null;
+  out.showTitle = to === "note" && out.title.trim().length > 0;
+
+  return out;
+}

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

@@ -214,6 +214,8 @@ export interface ComposeLabels {
   showMore: string;
   showLess: string;
   newThread: string;
+  replyTitle: string;
+  editTitle: string;
   slashHint: string;
   collectionFormLabels: CollectionFormLabels;
 }

package/src/client/components/jant-collection-directory.ts

@@ -1245,6 +1245,7 @@ export class JantCollectionsManager extends LitElement {
                   (e.currentTarget as HTMLInputElement).value,
                 )}
               @keydown=${(e: globalThis.KeyboardEvent) => {
+                if (e.isComposing || e.keyCode === 229) return;
                 const target = e.currentTarget as HTMLInputElement;
                 if (e.key === "Enter") {
                   e.preventDefault();

package/src/client/components/jant-collection-form.ts

@@ -102,6 +102,7 @@ export class JantCollectionForm extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.#boundKeydown = (e: KeyboardEvent) => {
+      if (e.isComposing || e.keyCode === 229) return;
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
         e.preventDefault();
         void this.#handleSubmit(e);

package/src/client/components/jant-command-palette.ts

@@ -386,6 +386,10 @@ export class JantCommandPalette extends LitElement {
   };
 
   #handleKeydown = (event: globalThis.KeyboardEvent) => {
+    // Let IME consume keys during composition — Enter commits the candidate,
+    // Escape dismisses the candidate popup, arrows pick candidates.
+    if (event.isComposing || event.keyCode === 229) return;
+
     const items = this.#displayItems;
 
     if (event.key === "ArrowDown") {