@jant/core 0.6.14 → 0.6.16

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.",
@@ -241,13 +243,13 @@ const labels: ComposeLabels = {
   publishDateInvalid: "Enter a valid date.",
   publishDateFutureError:
     "Choose today or an earlier date, or leave it blank to publish now.",
-  publishDateSummaryNow: "Publish now",
+  publishDateSummaryNow: "Now",
   publishDateSummaryAction: "Edit publish date",
   publishSlugLabel: "Custom link",
   publishSlugPlaceholder: "your-post-link",
   publishSlugHint: "Leave blank to generate one automatically.",
   publishSlugAuto: "Generate automatically",
-  publishSlugSummaryAuto: "Auto link",
+  publishSlugSummaryAuto: "Auto",
   publishSlugSummaryAction: "Edit custom link",
   publishSlugReset: "Reset link",
   publishSlugSuggested: "Suggested link",
@@ -263,10 +265,24 @@ const labels: ComposeLabels = {
   threadLimitReached: "Threads can include up to 20 posts.",
   showMore: "Show more",
   showLess: "Show less",
-  newThread: "New Thread",
-  replyTitle: "Reply",
-  editTitle: "Edit",
+  closeCompose: "Close compose",
+  editing: "Editing",
+  composeDialogLabel: "Compose",
   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",
@@ -292,10 +308,14 @@ const labels: ComposeLabels = {
 
 async function createElement(
   format: string = "note",
+  options: { titleByDefault?: boolean } = {},
 ): Promise<JantComposeEditor> {
   const el = document.createElement("jant-compose-editor") as JantComposeEditor;
   el.format = format as "note" | "link" | "quote";
   el.labels = labels;
+  if (options.titleByDefault !== undefined) {
+    el.titleByDefault = options.titleByDefault;
+  }
   document.body.appendChild(el);
   await el.updateComplete;
   return el;
@@ -779,16 +799,127 @@ describe("JantComposeEditor", () => {
     expect(el._attachedTexts[0].bodyJson).toBeNull();
   });
 
-  it("shows title toggle only in note mode", async () => {
+  it("shows a note's title field by default on a post that starts a thread", async () => {
     const el = await createElement("note");
+    expect(el.querySelector(".compose-note-title")).not.toBeNull();
     expect(el.querySelector('.compose-tool-btn[title="Title"]')).not.toBeNull();
+  });
+
+  it("hides a note's title field by default on a continuation post", async () => {
+    const el = await createElement("note", { titleByDefault: false });
+    expect(el.querySelector(".compose-note-title")).toBeNull();
+  });
+
+  it("toggles the title field from the toolbar", async () => {
+    const el = await createElement("note", { titleByDefault: false });
+    const toggle = requireElement(
+      el.querySelector<HTMLButtonElement>('.compose-tool-btn[title="Title"]'),
+      "expected title toggle",
+    );
+
+    toggle.click();
+    await el.updateComplete;
+    expect(el.querySelector(".compose-note-title")).not.toBeNull();
+
+    toggle.click();
+    await el.updateComplete;
+    expect(el.querySelector(".compose-note-title")).toBeNull();
+  });
+
+  it("drops a hidden title from the submitted data", async () => {
+    const el = await createElement("note");
+    el._title = "Named";
+    el._showTitle = false;
+    await el.updateComplete;
+    expect(el.getData().title).toBe("");
+  });
+
+  it("keeps the title field visible when a post arrives with one", async () => {
+    const el = await createElement("note", { titleByDefault: false });
+    el.populate({ format: "note", title: "Loaded title" });
+    await el.updateComplete;
+    expect(el.querySelector(".compose-note-title")).not.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") {
+        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");
+    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);
+  });
 
-    el.format = "link";
+  it("leaves Mod-Enter available for the publish shortcut", async () => {
+    const el = await createElement("note");
     await el.updateComplete;
-    expect(el.querySelector('.compose-tool-btn[title="Title"]')).toBeNull();
+
+    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 () => {
+  it("places fullscreen at the far right of the toolbar", async () => {
     const el = await createElement("note");
     const toolTitles = [
       ...el.querySelectorAll<HTMLButtonElement>(".compose-tool-btn"),
@@ -827,7 +958,6 @@ describe("JantComposeEditor", () => {
   it("getData returns current field values", async () => {
     const el = await createElement("note");
     el._title = "Test Title";
-    el._showTitle = true;
     el._bodyJson = {
       type: "doc",
       content: [
@@ -897,31 +1027,11 @@ describe("JantComposeEditor", () => {
     expect(data.attachmentOrder).toEqual(["t2"]);
   });
 
-  it("getData omits title when showTitle is off in note mode", async () => {
+  it("getData returns the note title as typed", async () => {
     const el = await createElement("note");
-    el._title = "Hidden Title";
-    el._showTitle = false;
-
-    const data = el.getData();
-    expect(data.title).toBe("");
-  });
-
-  it("preserves title in memory when toggling off and restores on toggle on", async () => {
-    const el = await createElement("note");
-    el._title = "My Title";
-    el._showTitle = true;
-    await el.updateComplete;
-
-    // Toggle off — title stays in memory
-    el._showTitle = false;
-    await el.updateComplete;
-    expect(el._title).toBe("My Title");
-    expect(el.getData().title).toBe("");
+    el._title = "Kept Title";
 
-    // Toggle back on — title restored
-    el._showTitle = true;
-    await el.updateComplete;
-    expect(el.getData().title).toBe("My Title");
+    expect(el.getData().title).toBe("Kept Title");
   });
 
   it("promotes a leading H1 to the note title", async () => {
@@ -938,7 +1048,6 @@ describe("JantComposeEditor", () => {
     const body = JSON.parse(data.body) as JSONContent;
 
     expect(data.title).toBe("My Markdown Title");
-    expect(el._showTitle).toBe(true);
     expect(body.content?.[0]).toEqual(tiptapParagraph("Body"));
   });
 
@@ -953,7 +1062,6 @@ describe("JantComposeEditor", () => {
     const body = JSON.parse(data.body) as JSONContent;
 
     expect(data.title).toBe("");
-    expect(el._showTitle).toBe(false);
     expect(body.content?.[0]).toEqual(tiptapHeading(1, "Draft title"));
   });
 
@@ -961,7 +1069,6 @@ describe("JantComposeEditor", () => {
     const el = await createElement("note");
     const editor = requireEditor(el);
     el._title = "Manual title";
-    el._showTitle = true;
 
     editor.commands.setContent(
       tiptapDoc(tiptapHeading(1, "Markdown Title"), tiptapParagraph("Body")),
@@ -1134,6 +1241,7 @@ describe("JantComposeEditor", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -1167,6 +1275,7 @@ describe("JantComposeEditor", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -1180,6 +1289,7 @@ describe("JantComposeEditor", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -1246,7 +1356,7 @@ describe("JantComposeEditor", () => {
     expect(el._attachmentOrder[0]).toBe("t1");
   });
 
-  it("pastes clipboard files into attachments when no visible title is set", async () => {
+  it("pastes clipboard files into attachments when no title is set", async () => {
     const uploadWithMetadataMock = vi.mocked(uploadWithMetadata);
     const el = await createElement("note");
     const events: CustomEvent[] = [];
@@ -1282,7 +1392,6 @@ describe("JantComposeEditor", () => {
       id: "med_test",
     });
     const el = await createElement("note");
-    el._showTitle = true;
     el._title = "Essay";
     await el.updateComplete;
 
@@ -1302,30 +1411,9 @@ describe("JantComposeEditor", () => {
     ]);
   });
 
-  it("pastes images as attachments when the title row was toggled off after typing", async () => {
-    const uploadWithMetadataMock = vi.mocked(uploadWithMetadata);
-    const el = await createElement("note");
-    el._showTitle = true;
-    el._title = "Essay";
-    await el.updateComplete;
-    el._showTitle = false;
-    await el.updateComplete;
-
-    const image = new File(["image"], "clipboard.png", { type: "image/png" });
-    const { handled } = triggerEditorPaste(el, [image]);
-    await el.updateComplete;
-
-    expect(handled).toBe(true);
-    expect(uploadWithMetadataMock).not.toHaveBeenCalled();
-    expect(el._attachments.map((attachment) => attachment.file.name)).toEqual([
-      "clipboard.png",
-    ]);
-  });
-
   it("pastes images as attachments when only whitespace is in the title", async () => {
     const uploadWithMetadataMock = vi.mocked(uploadWithMetadata);
     const el = await createElement("note");
-    el._showTitle = true;
     el._title = "   ";
     await el.updateComplete;
 

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

@@ -14,14 +14,13 @@ const labels = {
   fullscreen: "Fullscreen",
   exitFullscreen: "Exit fullscreen",
   done: "Done",
-  title: "Title",
   titlePlaceholder: "Title",
   bodyPlaceholder: "What's on your mind...",
   showMore: "Show more",
   showLess: "Show less",
-  newThread: "New Thread",
-  replyTitle: "Reply",
-  editTitle: "Edit",
+  closeCompose: "Close compose",
+  editing: "Editing",
+  composeDialogLabel: "Compose",
 } as ComposeLabels;
 
 async function flush(el?: JantComposeFullscreen) {
@@ -58,7 +57,7 @@ describe("JantComposeFullscreen", () => {
     }
   });
 
-  it("opens in body-first mode when the title is hidden", async () => {
+  it("shows the title field when the editor arrived with one open", async () => {
     const el = document.createElement(
       "jant-compose-fullscreen",
     ) as JantComposeFullscreen;
@@ -68,29 +67,16 @@ describe("JantComposeFullscreen", () => {
 
     document.dispatchEvent(
       new CustomEvent("jant:fullscreen-open", {
-        detail: {
-          json: null,
-          title: "",
-          showTitle: false,
-          labels,
-        },
+        detail: { json: null, title: "", showTitle: true, labels },
       }),
     );
     await flush(el);
 
-    expect(el.querySelector(".compose-fullscreen-title")).toBeNull();
-    expect(
-      el.querySelector(".compose-fullscreen-title-placeholder"),
-    ).not.toBeNull();
+    expect(el.querySelector(".compose-fullscreen-title")).not.toBeNull();
     expect(el.textContent).not.toContain("Fullscreen");
-    expect(
-      el.querySelector(
-        ".compose-fullscreen-toolbar .compose-fullscreen-title-placeholder",
-      ),
-    ).toBeNull();
   });
 
-  it("reveals the title on demand and returns its visibility on close", async () => {
+  it("offers a way back to a title the editor had hidden", async () => {
     const el = document.createElement(
       "jant-compose-fullscreen",
     ) as JantComposeFullscreen;
@@ -100,54 +86,122 @@ describe("JantComposeFullscreen", () => {
 
     document.dispatchEvent(
       new CustomEvent("jant:fullscreen-open", {
-        detail: {
-          json: null,
-          title: "",
-          showTitle: false,
-          labels,
-        },
+        detail: { json: null, title: "", showTitle: false, labels },
       }),
     );
     await flush(el);
 
-    const toggle = el.querySelector<HTMLButtonElement>(
+    expect(el.querySelector(".compose-fullscreen-title")).toBeNull();
+    const reveal = el.querySelector<HTMLButtonElement>(
       ".compose-fullscreen-title-placeholder",
     );
-    expect(toggle).not.toBeNull();
-    toggle?.click();
+    expect(reveal).not.toBeNull();
+
+    reveal?.click();
     await flush(el);
+    expect(el.querySelector(".compose-fullscreen-title")).not.toBeNull();
+  });
 
-    const input = el.querySelector<HTMLInputElement>(
-      ".compose-fullscreen-title",
-    );
-    expect(input).not.toBeNull();
-    if (!input) {
-      throw new Error("expected fullscreen title input");
-    }
-    input.value = "Desk Notes";
-    input.dispatchEvent(new Event("input"));
+  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",
+            labels,
+            editorIndex: 2,
+          },
+        }),
+      );
+      await flush(el);
 
-    let detail: ComposeFullscreenCloseDetail | null = null;
-    document.addEventListener(
-      "jant:fullscreen-close",
-      (event) => {
-        detail = (event as CustomEvent<ComposeFullscreenCloseDetail>).detail;
-      },
-      { once: true },
+      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: "",
+          labels,
+        },
+      }),
     );
+    await flush(el);
 
-    el.querySelector<HTMLButtonElement>(".compose-fullscreen-done")?.click();
+    el.querySelector(".compose-fullscreen-dialog")?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        metaKey: true,
+        isComposing: true,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await flush(el);
 
-    expect(detail).toMatchObject({
-      json: {
-        type: "doc",
-        content: [{ type: "paragraph" }],
-      },
-      title: "Desk Notes",
-      showTitle: true,
-      replyExpanded: false,
-      selection: { from: 1, to: 1 },
-    });
+    expect(el.querySelector(".compose-fullscreen-dialog")).not.toBeNull();
   });
 
   it("restores and returns the current editor selection", async () => {
@@ -171,7 +225,6 @@ describe("JantComposeFullscreen", () => {
             ],
           },
           title: "",
-          showTitle: false,
           selection: { from: 4, to: 4 },
           labels,
         },
@@ -214,7 +267,7 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "",
-          showTitle: false,
+          showTitle: true,
           labels,
           replyContext: {
             contentHtml: "<p>A quiet sentence worth answering.</p>",
@@ -229,9 +282,10 @@ describe("JantComposeFullscreen", () => {
     expect(el.textContent).toContain("A quiet sentence worth answering.");
     expect(el.textContent).toContain("Mar 10, 2026");
     expect(el.textContent).toContain("Show more");
+    // The reply's title field lives inside its own row, not the toolbar.
     expect(
       el.querySelector(
-        ".compose-fullscreen-editor-row .compose-fullscreen-title-placeholder-reply",
+        ".compose-fullscreen-editor-row .compose-fullscreen-title-reply",
       ),
     ).not.toBeNull();
   });
@@ -249,7 +303,6 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "Follow-up",
-          showTitle: true,
           labels,
           replyContext: {
             contentHtml: "<p>Thread seed.</p>",
@@ -286,7 +339,6 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "",
-          showTitle: false,
           labels,
           replyContext: {
             contentHtml: "<p>One more thread preview.</p>",
@@ -332,7 +384,6 @@ describe("JantComposeFullscreen", () => {
         detail: {
           json: null,
           title: "",
-          showTitle: false,
           labels,
         },
       }),
@@ -387,7 +438,6 @@ describe("JantComposeFullscreen", () => {
             ],
           },
           title: "",
-          showTitle: false,
           labels,
         },
       }),