@jant/core 0.6.7 → 0.6.9

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

@@ -0,0 +1,357 @@
+import { describe, it, expect } from "vitest";
+import type { JSONContent } from "@tiptap/core";
+
+import {
+  convertComposeFormat,
+  type ComposeConvertFields,
+} from "../compose-format-convert.js";
+
+const EMPTY: ComposeConvertFields = {
+  title: "",
+  url: "",
+  quoteText: "",
+  quoteAuthor: "",
+  showTitle: false,
+  bodyJson: null,
+};
+
+function fields(
+  overrides: Partial<ComposeConvertFields>,
+): ComposeConvertFields {
+  return { ...EMPTY, ...overrides };
+}
+
+function doc(...content: JSONContent[]): JSONContent {
+  return { type: "doc", content };
+}
+
+function paragraph(text: string): JSONContent {
+  return { type: "paragraph", content: [{ type: "text", text }] };
+}
+
+function linkParagraph(url: string, text = url): JSONContent {
+  return {
+    type: "paragraph",
+    content: [
+      { type: "text", text, marks: [{ type: "link", attrs: { href: url } }] },
+    ],
+  };
+}
+
+/** First block of the resulting body. */
+function firstBlock(result: ComposeConvertFields): JSONContent | undefined {
+  return result.bodyJson?.content?.[0];
+}
+
+describe("convertComposeFormat", () => {
+  it("returns input unchanged when from === to", () => {
+    const input = fields({ quoteText: "x" });
+    expect(convertComposeFormat("quote", "quote", input)).toBe(input);
+  });
+
+  it("note → quote folds a title into a leading heading", () => {
+    const result = convertComposeFormat(
+      "note",
+      "quote",
+      fields({
+        title: "My thoughts",
+        showTitle: true,
+        bodyJson: doc(paragraph("body")),
+      }),
+    );
+    expect(result.title).toBe("");
+    expect(firstBlock(result)).toEqual({
+      type: "heading",
+      attrs: { level: 2 },
+      content: [{ type: "text", text: "My thoughts" }],
+    });
+    expect(result.bodyJson?.content?.[1]).toEqual(paragraph("body"));
+  });
+
+  it("quote → note folds the quote into a leading blockquote with attribution", () => {
+    const result = convertComposeFormat(
+      "quote",
+      "note",
+      fields({ quoteText: "Stay hungry", quoteAuthor: "Jobs" }),
+    );
+    expect(result.quoteText).toBe("");
+    expect(result.quoteAuthor).toBe("");
+    const bq = firstBlock(result);
+    expect(bq?.type).toBe("blockquote");
+    expect(bq?.content?.[0]).toEqual(paragraph("Stay hungry"));
+    expect(bq?.content?.[1]).toEqual(paragraph("— Jobs"));
+  });
+
+  it("quote → note links the author to the source url and clears url", () => {
+    const result = convertComposeFormat(
+      "quote",
+      "note",
+      fields({
+        quoteText: "Be water",
+        quoteAuthor: "Lee",
+        url: "https://example.com",
+      }),
+    );
+    expect(result.url).toBe("");
+    const bq = firstBlock(result);
+    expect(bq?.content?.[1]).toEqual({
+      type: "paragraph",
+      content: [
+        { type: "text", text: "— " },
+        {
+          type: "text",
+          text: "Lee",
+          marks: [{ type: "link", attrs: { href: "https://example.com" } }],
+        },
+      ],
+    });
+  });
+
+  it("quote → note with a url but no author links the url itself", () => {
+    const result = convertComposeFormat(
+      "quote",
+      "note",
+      fields({ quoteText: "Anon", url: "https://example.com" }),
+    );
+    const bq = firstBlock(result);
+    expect(bq?.content?.[1]).toEqual({
+      type: "paragraph",
+      content: [
+        { type: "text", text: "— " },
+        {
+          type: "text",
+          text: "https://example.com",
+          marks: [{ type: "link", attrs: { href: "https://example.com" } }],
+        },
+      ],
+    });
+  });
+
+  it("note → quote recovers a url-only attribution without a phantom author", () => {
+    const note = convertComposeFormat(
+      "quote",
+      "note",
+      fields({ quoteText: "Anon", url: "https://example.com" }),
+    );
+    const back = convertComposeFormat("note", "quote", note);
+    expect(back.quoteText).toBe("Anon");
+    expect(back.quoteAuthor).toBe("");
+    expect(back.url).toBe("https://example.com");
+  });
+
+  it("note → quote still parses the legacy plain-text attribution form", () => {
+    const result = convertComposeFormat(
+      "note",
+      "quote",
+      fields({
+        bodyJson: doc({
+          type: "blockquote",
+          content: [
+            paragraph("Be water"),
+            paragraph("— Lee https://example.com"),
+          ],
+        }),
+      }),
+    );
+    expect(result.quoteText).toBe("Be water");
+    expect(result.quoteAuthor).toBe("Lee");
+    expect(result.url).toBe("https://example.com");
+  });
+
+  it("quote → note → quote round-trips quote text and author", () => {
+    const start = fields({ quoteText: "Stay hungry", quoteAuthor: "Jobs" });
+    const note = convertComposeFormat("quote", "note", start);
+    const back = convertComposeFormat("note", "quote", note);
+    expect(back.quoteText).toBe("Stay hungry");
+    expect(back.quoteAuthor).toBe("Jobs");
+    expect(back.bodyJson).toBeNull();
+  });
+
+  it("quote → note → quote round-trips the source url too", () => {
+    const start = fields({
+      quoteText: "Be water",
+      quoteAuthor: "Lee",
+      url: "https://example.com",
+    });
+    const note = convertComposeFormat("quote", "note", start);
+    const back = convertComposeFormat("note", "quote", note);
+    expect(back.quoteText).toBe("Be water");
+    expect(back.quoteAuthor).toBe("Lee");
+    expect(back.url).toBe("https://example.com");
+  });
+
+  it("link → quote preserves the url and folds a title into a heading", () => {
+    const result = convertComposeFormat(
+      "link",
+      "quote",
+      fields({ title: "Cool link", url: "https://example.com" }),
+    );
+    expect(result.url).toBe("https://example.com");
+    expect(result.title).toBe("");
+    expect(firstBlock(result)?.type).toBe("heading");
+    expect(result.quoteText).toBe("");
+  });
+
+  it("quote → link preserves the url and folds the quote, leaving no title", () => {
+    const result = convertComposeFormat(
+      "quote",
+      "link",
+      fields({
+        quoteText: "Quoted",
+        quoteAuthor: "Author",
+        url: "https://example.com",
+      }),
+    );
+    expect(result.url).toBe("https://example.com");
+    expect(result.title).toBe("");
+    expect(result.quoteText).toBe("");
+    const bq = firstBlock(result);
+    expect(bq?.type).toBe("blockquote");
+    expect(bq?.content?.[1]).toEqual(paragraph("— Author"));
+  });
+
+  it("note → link preserves the title and leaves the url empty", () => {
+    const result = convertComposeFormat(
+      "note",
+      "link",
+      fields({
+        title: "Keep me",
+        showTitle: true,
+        bodyJson: doc(paragraph("body")),
+      }),
+    );
+    expect(result.title).toBe("Keep me");
+    expect(result.url).toBe("");
+    expect(result.bodyJson).toEqual(doc(paragraph("body")));
+  });
+
+  it("link → note preserves the title and folds the url into a link paragraph", () => {
+    const result = convertComposeFormat(
+      "link",
+      "note",
+      fields({
+        title: "Keep me",
+        url: "https://example.com",
+        bodyJson: doc(paragraph("body")),
+      }),
+    );
+    expect(result.title).toBe("Keep me");
+    expect(result.showTitle).toBe(true);
+    expect(result.url).toBe("");
+    expect(firstBlock(result)).toEqual({
+      type: "paragraph",
+      content: [
+        {
+          type: "text",
+          text: "https://example.com",
+          marks: [{ type: "link", attrs: { href: "https://example.com" } }],
+        },
+      ],
+    });
+  });
+
+  it("note → link extracts a leading bare-link paragraph into the url", () => {
+    const result = convertComposeFormat(
+      "note",
+      "link",
+      fields({
+        title: "T",
+        bodyJson: doc(linkParagraph("https://example.com"), paragraph("body")),
+      }),
+    );
+    expect(result.url).toBe("https://example.com");
+    expect(result.bodyJson).toEqual(doc(paragraph("body")));
+  });
+
+  it("link → note → link round-trips the url, title, and body", () => {
+    const start = fields({
+      title: "Keep me",
+      url: "https://example.com",
+      bodyJson: doc(paragraph("body")),
+    });
+    const note = convertComposeFormat("link", "note", start);
+    const back = convertComposeFormat("note", "link", note);
+    expect(back.title).toBe("Keep me");
+    expect(back.url).toBe("https://example.com");
+    expect(back.bodyJson).toEqual(doc(paragraph("body")));
+  });
+
+  it("note → link leaves a labeled-link first line in the body", () => {
+    const result = convertComposeFormat(
+      "note",
+      "link",
+      fields({
+        title: "T",
+        bodyJson: doc(
+          linkParagraph("https://example.com", "Read this"),
+          paragraph("body"),
+        ),
+      }),
+    );
+    // A labeled link isn't a bare url — keep it in the body, leave url empty.
+    expect(result.url).toBe("");
+    expect(result.bodyJson).toEqual(
+      doc(linkParagraph("https://example.com", "Read this"), paragraph("body")),
+    );
+  });
+
+  it("note → quote with an empty body and no fields yields a null body", () => {
+    const result = convertComposeFormat("note", "quote", fields({}));
+    expect(result.bodyJson).toBeNull();
+    expect(result.quoteText).toBe("");
+    expect(result.title).toBe("");
+  });
+
+  it("note → quote extracts a body that is only a blockquote, leaving the body null", () => {
+    const result = convertComposeFormat(
+      "note",
+      "quote",
+      fields({
+        bodyJson: doc({
+          type: "blockquote",
+          content: [paragraph("Quoted line")],
+        }),
+      }),
+    );
+    expect(result.quoteText).toBe("Quoted line");
+    expect(result.bodyJson).toBeNull();
+  });
+
+  it("sets showTitle only for a note that ends up with a title", () => {
+    const toNote = convertComposeFormat(
+      "link",
+      "note",
+      fields({ title: "T", url: "https://example.com" }),
+    );
+    expect(toNote.showTitle).toBe(true);
+
+    const toQuote = convertComposeFormat(
+      "note",
+      "quote",
+      fields({ title: "T" }),
+    );
+    expect(toQuote.showTitle).toBe(false);
+  });
+
+  it("treats a non-attribution last line as part of the quote text", () => {
+    const result = convertComposeFormat(
+      "note",
+      "quote",
+      fields({
+        bodyJson: doc({
+          type: "blockquote",
+          content: [paragraph("Line one"), paragraph("Line two")],
+        }),
+      }),
+    );
+    expect(result.quoteText).toBe("Line one\nLine two");
+    expect(result.quoteAuthor).toBe("");
+  });
+
+  it("does not mutate the input bodyJson", () => {
+    const bodyJson = doc(paragraph("body"));
+    const snapshot = JSON.stringify(bodyJson);
+    convertComposeFormat("quote", "note", fields({ quoteText: "q", bodyJson }));
+    expect(JSON.stringify(bodyJson)).toBe(snapshot);
+  });
+});

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(

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) {