@jant/core 0.6.14 → 0.6.15

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

@@ -7,6 +7,8 @@ import type { Editor } from "@tiptap/core";
 import { MAX_THREAD_POSTS } from "../../../types.js";
 
 import type {
+  ComposeFullscreenCloseDetail,
+  ComposeFullscreenOpenDetail,
   ComposeLabels,
   ComposeCollection,
   ComposeSubmitDetail,
@@ -181,6 +183,8 @@ const labels: ComposeLabels = {
   discardChangesConfirm: "Discard changes?",
   drafts: "Drafts",
   draftsEmpty: "No drafts yet. Save a draft to find it here.",
+  previewDraft: "Preview",
+  draftActions: "Draft actions",
   deleteDraft: "Delete Draft",
   draftDeleted: "Draft deleted.",
   publishFailedDraft: "Couldn't publish. Saved as draft.",
@@ -233,6 +237,20 @@ const labels: ComposeLabels = {
   replyTitle: "Reply",
   editTitle: "Edit",
   slashHint: "Type / for commands",
+  tableControls: {
+    toolbarLabel: "Table controls",
+    addRowAbove: "Add row above",
+    addRowBelow: "Add row below",
+    addColumnBefore: "Add column before",
+    addColumnAfter: "Add column after",
+    options: "Table options",
+    deleteRow: "Delete row",
+    deleteColumn: "Delete column",
+    toggleHeaderRow: "Toggle header row",
+    deleteTable: "Delete table",
+    sizePickerLabel: "Choose table size",
+    insertTableSize: "Insert %rows% by %cols% table",
+  },
   collectionFormLabels: {
     titleLabel: "Title",
     titlePlaceholder: "My Collection",
@@ -280,6 +298,7 @@ describe("JantComposeDialog", () => {
     vi.restoreAllMocks();
     document.body.innerHTML = "";
     globalThis.localStorage.clear();
+    delete document.documentElement.dataset.sitePathPrefix;
     Object.defineProperty(globalThis, "matchMedia", {
       configurable: true,
       writable: true,
@@ -647,6 +666,11 @@ describe("JantComposeDialog", () => {
     expect(
       el.querySelector(".compose-thread-layout.compose-reply-compose-layout"),
     ).not.toBeNull();
+    expect(el.querySelector(".compose-collection-trigger")).toBeNull();
+    expect(
+      el.querySelector(".compose-action-row-without-collection"),
+    ).not.toBeNull();
+    expect(el.querySelector(".compose-publish-main")).not.toBeNull();
   });
 
   it("shows an Edit title with the format selector above the post when editing a reply", async () => {
@@ -668,6 +692,7 @@ describe("JantComposeDialog", () => {
             title: "Hello",
             body: null,
             replyToId: parentId,
+            collectionIds: ["col-thread"],
           };
       return Promise.resolve(
         new Response(JSON.stringify(json), {
@@ -687,6 +712,8 @@ describe("JantComposeDialog", () => {
       el.querySelector(".compose-dialog-header-center .compose-segmented"),
     ).toBeNull();
     expect(el.querySelector(".compose-thread-post-header")).not.toBeNull();
+    expect(el._collectionIds).toEqual([]);
+    expect(el.querySelector(".compose-collection-trigger")).toBeNull();
   });
 
   it("switches format from the inline selector when replying", async () => {
@@ -2281,7 +2308,7 @@ describe("JantComposeDialog", () => {
         rating: 0,
         showTitle: false,
         showRating: false,
-        collectionIds: [],
+        collectionIds: ["col-stale"],
         replyToId,
         attachedTexts: [],
         attachmentOrder: [],
@@ -2300,6 +2327,8 @@ describe("JantComposeDialog", () => {
       "expected compose editor",
     );
     expect(el._replyToId).toBe(replyToId);
+    expect(el._collectionIds).toEqual([]);
+    expect(el.querySelector(".compose-collection-trigger")).toBeNull();
     expect(editor.getData().body).toContain("Recovered reply draft");
   });
 
@@ -2348,6 +2377,56 @@ describe("JantComposeDialog", () => {
     );
   });
 
+  it("includes quiet reply intent when submitting multiple reply posts", async () => {
+    const el = await createElement();
+    await el.openReply("019ce8ce-d6d8-7fda-a5df-c2da2bef5ade", {
+      contentHtml: "<p>Parent</p>",
+      dateText: "Mar 14",
+    });
+
+    (
+      el as unknown as {
+        _addThreadItem: () => void;
+      }
+    )._addThreadItem();
+    await flushUpdates(el);
+
+    el._quietReply = true;
+    const editors = Array.from(
+      el.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+    );
+    expect(editors).toHaveLength(2);
+
+    editors.forEach((editor, index) => {
+      editor._bodyJson = {
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: `Quiet reply ${index + 1}` }],
+          },
+        ],
+      };
+    });
+    await Promise.all(editors.map((editor) => editor.updateComplete));
+    await el.updateComplete;
+
+    let receivedDetail: ComposeSubmitDetail | null = null;
+    el.addEventListener("jant:compose-submit-deferred", (event) => {
+      receivedDetail = (event as CustomEvent<ComposeSubmitDetail>).detail;
+    });
+
+    requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-publish-main"),
+      "expected reply button",
+    ).click();
+
+    expect(receivedDetail).not.toBeNull();
+    const detail = receivedDetail as unknown as ComposeSubmitDetail;
+    expect(detail.quietReply).toBe(true);
+    expect(detail.threadPosts?.[0]?.quietReply).toBe(true);
+  });
+
   it("does not add more thread items than the shared limit", async () => {
     const el = await createElement();
     el._threadItems = Array.from({ length: MAX_THREAD_POSTS }, (_, index) => ({
@@ -2364,6 +2443,34 @@ describe("JantComposeDialog", () => {
     expect(el._threadItems).toHaveLength(MAX_THREAD_POSTS);
   });
 
+  it("scrolls the thread composer to the bottom after adding an item", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await el.updateComplete;
+
+    const threadLayout = requireElement(
+      el.querySelector<HTMLElement>(".compose-thread-compose-layout"),
+      "expected thread compose layout",
+    );
+    Object.defineProperty(threadLayout, "scrollHeight", {
+      configurable: true,
+      value: 640,
+    });
+    threadLayout.scrollTop = 120;
+
+    (
+      el as unknown as {
+        _addThreadItem: () => void;
+      }
+    )._addThreadItem();
+    await flushUpdates(el);
+
+    expect(threadLayout.scrollTop).toBe(640);
+  });
+
   it("omits visibility from locked edit submissions", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -2978,6 +3085,67 @@ describe("JantComposeDialog", () => {
     fetchSpy.mockRestore();
   });
 
+  it("opens a prefixed draft preview from the overflow menu without loading the editor", async () => {
+    document.documentElement.dataset.sitePathPrefix = "/blog";
+    const el = await createElement();
+    el._draftsPanelOpen = true;
+    el._draftsLoading = false;
+    el._drafts = [
+      {
+        id: "pst_draft",
+        slug: "draft-slug",
+        format: "note",
+        title: "Preview me",
+        bodyText: "Draft body",
+        bodyHtml: "<p>Draft body</p>",
+        url: null,
+        quoteText: null,
+        replyToId: null,
+        updatedAt: 0,
+        mediaAttachments: [],
+      },
+    ];
+    await el.updateComplete;
+
+    const trigger = requireElement(
+      el.querySelector<HTMLButtonElement>(".compose-draft-more"),
+      "expected draft actions trigger",
+    );
+    expect(trigger.getAttribute("aria-label")).toBe("Draft actions");
+    expect(trigger.getAttribute("aria-haspopup")).toBe("menu");
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+
+    trigger.click();
+    await el.updateComplete;
+
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    const menu = requireElement(
+      el.querySelector<HTMLElement>('[role="menu"]'),
+      "expected draft actions menu",
+    );
+    const items = menu.querySelectorAll<HTMLElement>('[role="menuitem"]');
+    expect(items).toHaveLength(2);
+    expect(items[0]?.textContent?.trim()).toBe("Preview");
+    expect(items[1]?.textContent?.trim()).toBe("Delete Draft");
+
+    const previewLink = requireElement(
+      menu.querySelector<HTMLAnchorElement>('a[role="menuitem"]'),
+      "expected preview link",
+    );
+    expect(previewLink.getAttribute("href")).toBe("/blog/preview/draft-slug");
+    expect(previewLink.target).toBe("_blank");
+    expect(previewLink.rel).toBe("noopener noreferrer");
+
+    const fetchSpy = vi.spyOn(globalThis, "fetch");
+    previewLink.addEventListener("click", (event) => event.preventDefault());
+    previewLink.click();
+    await el.updateComplete;
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(el._draftsPanelOpen).toBe(true);
+    expect(el._draftMenuOpenId).toBeNull();
+  });
+
   it("does not dispatch submit when loading", async () => {
     const el = await createElement();
     el._loading = true;
@@ -3103,6 +3271,17 @@ describe("JantComposeDialog", () => {
     );
   });
 
+  it("keeps passive footnote references quiet until the editor selects them", () => {
+    const css = readFileSync(resolve("src/styles/ui.css"), "utf8");
+
+    expect(css).toMatch(
+      /\.compose-tiptap-body \.tiptap \.tiptap-footnote-reference\s*\{[^}]*color:\s*var\(--site-footnote-marker\);/,
+    );
+    expect(css).toMatch(
+      /\.tiptap-footnote-reference\.ProseMirror-selectednode\s*\{[^}]*color:\s*var\(--site-accent\);[^}]*outline:\s*1px solid var\(--site-accent\);/,
+    );
+  });
+
   it("remove button clears attachment", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -3879,6 +4058,57 @@ describe("JantComposeDialog", () => {
     expect(tiptap.getText()).toBe("");
   });
 
+  it("Escape cancels the table size picker without closing compose", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const tiptap = requireEditor(editor);
+
+    tiptap.commands.focus("end");
+    tiptap.commands.insertContent("/tab");
+    await flushUpdates(el);
+
+    const tableItem = Array.from(
+      document.querySelectorAll<HTMLElement>(".tiptap-slash-item"),
+    ).find((item) => item.textContent?.includes("Table"));
+    requireElement(
+      tableItem ?? null,
+      "expected Table slash item",
+    ).dispatchEvent(
+      new globalThis.MouseEvent("mousedown", {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await vi.waitFor(() => {
+      expect(
+        document.querySelector(".tiptap-table-size-picker"),
+      ).not.toBeNull();
+    });
+
+    const requestCloseSpy = vi.spyOn(el, "requestClose");
+    const currentSize = requireElement(
+      document.querySelector<HTMLButtonElement>(
+        ".tiptap-table-size-cell.is-current",
+      ),
+      "expected current table size",
+    );
+    const escapeEvent = new globalThis.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    });
+    currentSize.dispatchEvent(escapeEvent);
+    await flushUpdates(el);
+
+    expect(escapeEvent.defaultPrevented).toBe(true);
+    expect(requestCloseSpy).not.toHaveBeenCalled();
+    expect(document.querySelector(".tiptap-table-size-picker")).toBeNull();
+    expect(tiptap.getText()).toBe("");
+  });
+
   it("shows a clear empty state when slash commands have no matches", async () => {
     const el = await createElement();
     const editor = requireElement(
@@ -4101,10 +4331,12 @@ describe("JantComposeDialog", () => {
     };
     await editor.updateComplete;
 
-    const submitSpy = vi.spyOn(
-      el as unknown as { _submit: (status: "published" | "draft") => void },
-      "_submit",
-    );
+    const submitSpy = vi
+      .spyOn(
+        el as unknown as { _submit: (status: "published" | "draft") => void },
+        "_submit",
+      )
+      .mockImplementation(() => {});
 
     el.dispatchEvent(
       new globalThis.KeyboardEvent("keydown", {
@@ -4117,6 +4349,139 @@ describe("JantComposeDialog", () => {
     expect(submitSpy).toHaveBeenCalledWith("published");
   });
 
+  it("publishes the latest fullscreen content after handing it back", async () => {
+    const el = await createElement();
+    const editor = requireElement(
+      el.querySelector<JantComposeEditor>("jant-compose-editor"),
+      "expected compose editor",
+    );
+    const submitSpy = vi
+      .spyOn(
+        el as unknown as { _submit: (status: "published" | "draft") => void },
+        "_submit",
+      )
+      .mockImplementation(() => {});
+    const setEditorStateSpy = vi.spyOn(editor, "setEditorState");
+
+    (
+      el as unknown as {
+        _handleFullscreenClose: (
+          event: CustomEvent<ComposeFullscreenCloseDetail>,
+        ) => void;
+      }
+    )._handleFullscreenClose(
+      new CustomEvent<ComposeFullscreenCloseDetail>("jant:fullscreen-close", {
+        detail: {
+          json: {
+            type: "doc",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Written while fullscreen" }],
+              },
+            ],
+          },
+          title: "Fullscreen title",
+          showTitle: true,
+          replyExpanded: false,
+          intent: "publish",
+          editorIndex: 0,
+        },
+      }),
+    );
+
+    expect(setEditorStateSpy).toHaveBeenCalled();
+    expect(editor.getData()).toMatchObject({
+      title: "Fullscreen title",
+      body: expect.stringContaining("Written while fullscreen"),
+    });
+    expect(submitSpy).toHaveBeenCalledWith("published");
+  });
+
+  it("does not submit an empty fullscreen post", async () => {
+    const el = await createElement();
+    const submitSpy = vi.spyOn(
+      el as unknown as { _submit: (status: "published" | "draft") => void },
+      "_submit",
+    );
+
+    (
+      el as unknown as {
+        _handleFullscreenClose: (
+          event: CustomEvent<ComposeFullscreenCloseDetail>,
+        ) => void;
+      }
+    )._handleFullscreenClose(
+      new CustomEvent<ComposeFullscreenCloseDetail>("jant:fullscreen-close", {
+        detail: {
+          json: { type: "doc", content: [{ type: "paragraph" }] },
+          title: "",
+          showTitle: false,
+          replyExpanded: false,
+          intent: "publish",
+          editorIndex: 0,
+        },
+      }),
+    );
+
+    expect(submitSpy).not.toHaveBeenCalled();
+  });
+
+  it("tracks the source editor for fullscreen thread editing", async () => {
+    const el = await createElement();
+    el._threadItems = [
+      { id: "thread-1", format: "note" },
+      { id: "thread-2", format: "note" },
+    ];
+    await el.updateComplete;
+
+    const editors = Array.from(
+      el.querySelectorAll<JantComposeEditor>("jant-compose-editor"),
+    );
+    const openDetail: ComposeFullscreenOpenDetail = {
+      json: null,
+      title: "",
+      showTitle: false,
+    };
+    editors[1]?.dispatchEvent(
+      new CustomEvent<ComposeFullscreenOpenDetail>("jant:fullscreen-open", {
+        bubbles: true,
+        detail: openDetail,
+      }),
+    );
+
+    expect(openDetail).toMatchObject({ editorIndex: 1 });
+
+    (
+      el as unknown as {
+        _handleFullscreenClose: (
+          event: CustomEvent<ComposeFullscreenCloseDetail>,
+        ) => void;
+      }
+    )._handleFullscreenClose(
+      new CustomEvent<ComposeFullscreenCloseDetail>("jant:fullscreen-close", {
+        detail: {
+          json: {
+            type: "doc",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Second thread post" }],
+              },
+            ],
+          },
+          title: "",
+          showTitle: false,
+          replyExpanded: false,
+          editorIndex: 1,
+        },
+      }),
+    );
+
+    expect(editors[0]?.getData().body).toBe("");
+    expect(editors[1]?.getData().body).toContain("Second thread post");
+  });
+
   it("Cmd/Ctrl+Enter focuses the link URL when the URL is invalid", async () => {
     const el = await createElement();
     el._format = "link";

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

@@ -215,6 +215,8 @@ const labels: ComposeLabels = {
   discardChangesConfirm: "Discard changes?",
   drafts: "Drafts",
   draftsEmpty: "No drafts yet. Save a draft to find it here.",
+  previewDraft: "Preview",
+  draftActions: "Draft actions",
   deleteDraft: "Delete Draft",
   draftDeleted: "Draft deleted.",
   publishFailedDraft: "Couldn't publish. Saved as draft.",
@@ -267,6 +269,20 @@ const labels: ComposeLabels = {
   replyTitle: "Reply",
   editTitle: "Edit",
   slashHint: "Type / for commands",
+  tableControls: {
+    toolbarLabel: "Table controls",
+    addRowAbove: "Add row above",
+    addRowBelow: "Add row below",
+    addColumnBefore: "Add column before",
+    addColumnAfter: "Add column after",
+    options: "Table options",
+    deleteRow: "Delete row",
+    deleteColumn: "Delete column",
+    toggleHeaderRow: "Toggle header row",
+    deleteTable: "Delete table",
+    sizePickerLabel: "Choose table size",
+    insertTableSize: "Insert %rows% by %cols% table",
+  },
   collectionFormLabels: {
     titleLabel: "Title",
     titlePlaceholder: "My Collection",
@@ -788,6 +804,87 @@ describe("JantComposeEditor", () => {
     expect(el.querySelector('.compose-tool-btn[title="Title"]')).toBeNull();
   });
 
+  it.each([
+    ["note", ".compose-note-title"],
+    ["link", ".compose-link-title"],
+  ] as const)(
+    "moves from the %s title to the start of the body on Enter",
+    async (format, selector) => {
+      const el = await createElement(format);
+      if (format === "note") {
+        el._showTitle = true;
+        await el.updateComplete;
+      }
+
+      const titleInput = requireElement(
+        el.querySelector<HTMLInputElement>(selector),
+        `expected ${format} title input`,
+      );
+      const editor = requireEditor(el);
+      titleInput.focus();
+
+      const event = new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        bubbles: true,
+        cancelable: true,
+      });
+      titleInput.dispatchEvent(event);
+      await new Promise<void>((resolve) => {
+        globalThis.requestAnimationFrame(() => resolve());
+      });
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(document.activeElement).toBe(editor.view.dom);
+      expect(editor.state.selection.from).toBe(1);
+    },
+  );
+
+  it("keeps focus in the title while an IME composition is active", async () => {
+    const el = await createElement("note");
+    el._showTitle = true;
+    await el.updateComplete;
+
+    const titleInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-note-title"),
+      "expected note title input",
+    );
+    titleInput.focus();
+
+    const event = new globalThis.KeyboardEvent("keydown", {
+      key: "Enter",
+      isComposing: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    titleInput.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(document.activeElement).toBe(titleInput);
+  });
+
+  it("leaves Mod-Enter available for the publish shortcut", async () => {
+    const el = await createElement("note");
+    el._showTitle = true;
+    await el.updateComplete;
+
+    const titleInput = requireElement(
+      el.querySelector<HTMLInputElement>(".compose-note-title"),
+      "expected note title input",
+    );
+    titleInput.focus();
+
+    const event = new globalThis.KeyboardEvent("keydown", {
+      key: "Enter",
+      metaKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    titleInput.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(document.activeElement).toBe(titleInput);
+  });
+
   it("keeps title after rate and places fullscreen at the far right of the toolbar", async () => {
     const el = await createElement("note");
     const toolTitles = [

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

@@ -90,6 +90,110 @@ describe("JantComposeFullscreen", () => {
     ).toBeNull();
   });
 
+  it.each(["metaKey", "ctrlKey"] as const)(
+    "publishes with %s+Enter and returns the latest editor state",
+    async (modifier) => {
+      const el = document.createElement(
+        "jant-compose-fullscreen",
+      ) as JantComposeFullscreen;
+      el.labels = labels;
+      document.body.appendChild(el);
+      await flush(el);
+
+      document.dispatchEvent(
+        new CustomEvent("jant:fullscreen-open", {
+          detail: {
+            json: null,
+            title: "Keyboard post",
+            showTitle: true,
+            labels,
+            editorIndex: 2,
+          },
+        }),
+      );
+      await flush(el);
+
+      requireEditor(el).commands.setContent({
+        type: "doc",
+        content: [
+          {
+            type: "paragraph",
+            content: [{ type: "text", text: "Publish from fullscreen" }],
+          },
+        ],
+      });
+
+      let detail: ComposeFullscreenCloseDetail | null = null;
+      document.addEventListener(
+        "jant:fullscreen-close",
+        (event) => {
+          detail = (event as CustomEvent<ComposeFullscreenCloseDetail>).detail;
+        },
+        { once: true },
+      );
+
+      el.querySelector(".compose-fullscreen-dialog")?.dispatchEvent(
+        new globalThis.KeyboardEvent("keydown", {
+          key: "Enter",
+          [modifier]: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      await flush(el);
+
+      expect(detail).toMatchObject({
+        title: "Keyboard post",
+        intent: "publish",
+        editorIndex: 2,
+        json: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Publish from fullscreen" }],
+            },
+          ],
+        },
+      });
+      expect(el.querySelector(".compose-fullscreen-dialog")).toBeNull();
+    },
+  );
+
+  it("does not publish while an IME composition is active", async () => {
+    const el = document.createElement(
+      "jant-compose-fullscreen",
+    ) as JantComposeFullscreen;
+    el.labels = labels;
+    document.body.appendChild(el);
+    await flush(el);
+
+    document.dispatchEvent(
+      new CustomEvent("jant:fullscreen-open", {
+        detail: {
+          json: null,
+          title: "",
+          showTitle: false,
+          labels,
+        },
+      }),
+    );
+    await flush(el);
+
+    el.querySelector(".compose-fullscreen-dialog")?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        isComposing: true,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await flush(el);
+
+    expect(el.querySelector(".compose-fullscreen-dialog")).not.toBeNull();
+  });
+
   it("reveals the title on demand and returns its visibility on close", async () => {
     const el = document.createElement(
       "jant-compose-fullscreen",