@jant/core 0.6.15 → 0.7.0

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

@@ -7,11 +7,12 @@ vi.mock("../../upload-with-metadata.js", () => ({
 import type { Editor, JSONContent } from "@tiptap/core";
 import type { Slice } from "@tiptap/pm/model";
 import * as ProseMirrorView from "@tiptap/pm/view";
-import type { ComposeLabels } from "../compose-types.js";
+import type { ComposeAttachment, ComposeLabels } from "../compose-types.js";
 import { renderTiptapJson } from "../../../lib/tiptap-render.js";
 import "../jant-compose-editor.js";
 import type { JantComposeEditor } from "../jant-compose-editor.js";
 import { uploadWithMetadata } from "../../upload-with-metadata.js";
+import Sortable from "sortablejs";
 
 function requireElement<T extends globalThis.Element>(
   element: T | null,
@@ -108,6 +109,57 @@ function triggerEditorPaste(el: JantComposeEditor, files: File[]) {
   return { handled, event };
 }
 
+/**
+ * Drops files on the element itself, the way a drag onto the composer chrome
+ * (rather than into the ProseMirror body) arrives.
+ */
+function triggerEditorDrop(el: JantComposeEditor, files: File[]) {
+  const event = new Event("drop", { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "dataTransfer", {
+    value: {
+      items: files.map((file) => ({
+        kind: "file",
+        type: file.type,
+        getAsFile: () => file,
+      })),
+      files,
+    },
+  });
+  el.dispatchEvent(event);
+  return event;
+}
+
+/** Every image src currently in the editor's document, in document order. */
+function imageSrcs(el: JantComposeEditor): string[] {
+  const srcs: string[] = [];
+  requireEditor(el).state.doc.descendants((node) => {
+    if (node.type.name === "image") srcs.push(node.attrs.src as string);
+  });
+  return srcs;
+}
+
+/** The same, read off the JSON the composer would submit. */
+function bodyImageSrcs(json: unknown): string[] {
+  const srcs: string[] = [];
+  const walk = (node: unknown) => {
+    if (!node || typeof node !== "object") return;
+    const candidate = node as {
+      type?: string;
+      attrs?: { src?: unknown };
+      content?: unknown[];
+    };
+    if (
+      candidate.type === "image" &&
+      typeof candidate.attrs?.src === "string"
+    ) {
+      srcs.push(candidate.attrs.src);
+    }
+    for (const child of candidate.content ?? []) walk(child);
+  };
+  walk(json);
+  return srcs;
+}
+
 function parsePastedText(el: JantComposeEditor, text: string): Slice | null {
   const editor = requireEditor(el);
   let slice: Slice | null = null;
@@ -152,6 +204,7 @@ const parseFromClipboard = (
 
 const labels: ComposeLabels = {
   cancel: "Cancel",
+  close: "Close",
   note: "Note",
   link: "Link",
   quote: "Quote",
@@ -190,7 +243,11 @@ const labels: ComposeLabels = {
   altHint: "Alt text improves accessibility",
   addMore: "Add",
   removeAttachment: "Remove attachment",
+  moveAttachmentEarlier: "Move attachment earlier",
+  moveAttachmentLater: "Move attachment later",
   uploading: "Uploading...",
+  publishing: "Publishing...",
+  saving: "Saving...",
   loadingPost: "Loading post...",
   loadPostFailed: "Couldn't load this post. Try again.",
   published: "Published!",
@@ -201,7 +258,7 @@ const labels: ComposeLabels = {
   confirmCloseTitle: "Save to drafts?",
   confirmCloseSubtitle: "Save to drafts to edit and post at a later time.",
   confirmCloseSave: "Save",
-  confirmCloseCancel: "Cancel",
+  confirmCloseCancel: "Keep editing",
   confirmCloseDiscard: "Don't save",
   confirmAttachedTitle: "Save text attachment?",
   confirmAttachedSubtitle:
@@ -220,14 +277,32 @@ const labels: ComposeLabels = {
   deleteDraft: "Delete Draft",
   draftDeleted: "Draft deleted.",
   publishFailedDraft: "Couldn't publish. Saved as draft.",
+  publishFailed: "Couldn't publish. Try again.",
+  publishFailedOffline: "Couldn't reach the server. Try again.",
   uploadFailedDraft: "Some uploads failed. Saved as draft.",
   addCollection: "Add Collection",
   collectionCountLabel: "%name% + %count% more",
   draftRestored: "Draft restored.",
+  draftStoreFailed: "This browser can't keep a local copy. Save as a draft.",
   reply: "Reply",
   publishHideFromLatest: "Hide from Latest",
   publishPrivate: "Post as Private",
   publishSettings: "Publish settings",
+  languageLabel: "Language",
+  languageAuto: "Detect",
+  languageAutoHint: "Read from what you write",
+  languageAutoDetected: "Read from what you write — looks like {language}",
+  languageAutoPending: "Not enough text to tell yet — publishes in {language}",
+  languageTriggerLabel: "Language: {language}",
+  translationOf: "Translation of “{title}”",
+  translationContext: "Translating",
+  translationContextInLanguage: "Translating into {language}",
+  translationContextOpen: "Open the original in a new tab",
+  translationContextOriginal: "The original",
+  translationContextHide: "Hide",
+  translationContextHideLong: "Hide the original",
+  translationContextShow: "Show",
+  translationContextShowLong: "Show the original",
   publishVisibilityLabel: "Visibility",
   publishVisibilityPublic: "Public",
   publishVisibilityPublicHint: "Appears in Latest.",
@@ -243,13 +318,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",
@@ -265,9 +340,8 @@ const labels: ComposeLabels = {
   threadLimitReached: "Threads can include up to 20 posts.",
   showMore: "Show more",
   showLess: "Show less",
-  newThread: "New Thread",
-  replyTitle: "Reply",
-  editTitle: "Edit",
+  editing: "Editing",
+  composeDialogLabel: "Compose",
   slashHint: "Type / for commands",
   tableControls: {
     toolbarLabel: "Table controls",
@@ -295,28 +369,77 @@ const labels: ComposeLabels = {
     quickHint: "More options are available after you create it.",
     quickSubmitLabel: "Done",
     createdLabel: "Collection created.",
-    descriptionLabel: "Description (optional)",
-    descriptionPlaceholder: "What's this collection about?",
-    sortOrderLabel: "Sort Order",
-    sortNewest: "Newest first",
-    sortOldest: "Oldest first",
-    sortRatingDesc: "Highest rated",
-    submitLabel: "Save",
     cancelLabel: "Cancel",
   },
 };
 
 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;
 }
 
+function mediaAttachment(clientId: string, mediaId: string): ComposeAttachment {
+  const blob = new Blob(["fake"], { type: "image/png" });
+  return {
+    clientId,
+    file: new File([blob], `${clientId}.png`, { type: "image/png" }),
+    previewUrl: URL.createObjectURL(blob),
+    status: "done",
+    progress: null,
+    mediaId,
+    alt: "",
+    error: null,
+    posterUrl: null,
+    remoteUrl: null,
+    summary: null,
+    chars: null,
+  };
+}
+
+/**
+ * Forces the primary-pointer media query, and returns a restore function.
+ * Every call site restores in a `finally` so one test cannot leak into another.
+ */
+function stubPrimaryPointer(kind: "coarse" | "fine"): () => void {
+  const original = window.matchMedia;
+  // Overrides `matches` on a real MediaQueryList, so the component still gets
+  // a live object to subscribe to.
+  window.matchMedia = (query: string) => {
+    const list = original.call(window, query);
+    Object.defineProperty(list, "matches", {
+      configurable: true,
+      value: query.includes(`pointer: ${kind}`),
+    });
+    return list;
+  };
+  return () => {
+    window.matchMedia = original;
+  };
+}
+
+function moveButton(
+  el: JantComposeEditor,
+  clientId: string,
+  direction: "earlier" | "later",
+): HTMLButtonElement {
+  return requireElement(
+    el.querySelector<HTMLButtonElement>(
+      `[data-attachment-id="${clientId}"] [data-attachment-move="${direction}"]`,
+    ),
+    `expected ${direction} move button for ${clientId}`,
+  );
+}
+
 function tiptapDoc(...content: JSONContent[]): JSONContent {
   return { type: "doc", content };
 }
@@ -336,6 +459,22 @@ function tiptapParagraph(text: string): JSONContent {
   };
 }
 
+/**
+ * Replays a pointer gesture. The browser retargets a click to the nearest
+ * common ancestor of the press and the release, so `clickTarget` is separate
+ * from the two — a drag that starts on the text and ends over a layout wrapper
+ * reports the wrapper.
+ */
+function pressAndClick(
+  pressTarget: HTMLElement,
+  releaseTarget: HTMLElement,
+  clickTarget: HTMLElement = releaseTarget,
+) {
+  pressTarget.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+  releaseTarget.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }));
+  clickTarget.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+}
+
 async function toggleEmojiPicker(el: JantComposeEditor) {
   (
     el as unknown as {
@@ -795,13 +934,46 @@ 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();
+  });
 
-    el.format = "link";
+  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.querySelector('.compose-tool-btn[title="Title"]')).toBeNull();
+    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([
@@ -812,7 +984,6 @@ describe("JantComposeEditor", () => {
     async (format, selector) => {
       const el = await createElement(format);
       if (format === "note") {
-        el._showTitle = true;
         await el.updateComplete;
       }
 
@@ -841,7 +1012,6 @@ describe("JantComposeEditor", () => {
 
   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(
@@ -864,7 +1034,6 @@ describe("JantComposeEditor", () => {
 
   it("leaves Mod-Enter available for the publish shortcut", async () => {
     const el = await createElement("note");
-    el._showTitle = true;
     await el.updateComplete;
 
     const titleInput = requireElement(
@@ -885,7 +1054,7 @@ describe("JantComposeEditor", () => {
     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"),
@@ -924,7 +1093,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: [
@@ -994,31 +1162,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("");
-  });
+    el._title = "Kept Title";
 
-  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("");
-
-    // 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 () => {
@@ -1035,7 +1183,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"));
   });
 
@@ -1050,7 +1197,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"));
   });
 
@@ -1058,7 +1204,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")),
@@ -1231,6 +1376,7 @@ describe("JantComposeEditor", () => {
         alt: "",
         error: null,
         posterUrl: null,
+        remoteUrl: null,
         summary: null,
         chars: null,
       },
@@ -1251,35 +1397,9 @@ describe("JantComposeEditor", () => {
 
   it("moves attachments later with keyboard controls", async () => {
     const el = await createElement("note");
-    const blob = new Blob(["fake"], { type: "image/png" });
-    const file = new File([blob], "test.png", { type: "image/png" });
     el._attachments = [
-      {
-        clientId: "a1",
-        file,
-        previewUrl: URL.createObjectURL(blob),
-        status: "done",
-        progress: null,
-        mediaId: "m1",
-        alt: "",
-        error: null,
-        posterUrl: null,
-        summary: null,
-        chars: null,
-      },
-      {
-        clientId: "a2",
-        file,
-        previewUrl: URL.createObjectURL(blob),
-        status: "done",
-        progress: null,
-        mediaId: "m2",
-        alt: "",
-        error: null,
-        posterUrl: null,
-        summary: null,
-        chars: null,
-      },
+      mediaAttachment("a1", "m1"),
+      mediaAttachment("a2", "m2"),
     ];
     el._attachmentOrder = ["a1", "a2"];
     await el.updateComplete;
@@ -1301,6 +1421,127 @@ describe("JantComposeEditor", () => {
     expect(el._attachmentOrder).toEqual(["a2", "a1"]);
   });
 
+  it("reorders attachments with the move buttons", async () => {
+    const el = await createElement("note");
+    el._attachments = [
+      mediaAttachment("a1", "m1"),
+      mediaAttachment("a2", "m2"),
+      mediaAttachment("a3", "m3"),
+    ];
+    el._attachmentOrder = ["a1", "a2", "a3"];
+    await el.updateComplete;
+
+    moveButton(el, "a1", "later").click();
+    await el.updateComplete;
+    expect(el._attachmentOrder).toEqual(["a2", "a1", "a3"]);
+
+    moveButton(el, "a1", "earlier").click();
+    await el.updateComplete;
+    expect(el._attachmentOrder).toEqual(["a1", "a2", "a3"]);
+  });
+
+  it("disables the move button at each end of the strip", async () => {
+    const el = await createElement("note");
+    el._attachments = [
+      mediaAttachment("a1", "m1"),
+      mediaAttachment("a2", "m2"),
+    ];
+    el._attachmentOrder = ["a1", "a2"];
+    await el.updateComplete;
+
+    expect(moveButton(el, "a1", "earlier").disabled).toBe(true);
+    expect(moveButton(el, "a1", "later").disabled).toBe(false);
+    expect(moveButton(el, "a2", "earlier").disabled).toBe(false);
+    expect(moveButton(el, "a2", "later").disabled).toBe(true);
+  });
+
+  it("keeps focus on the attachment that moved", async () => {
+    const el = await createElement("note");
+    el._attachments = [
+      mediaAttachment("a1", "m1"),
+      mediaAttachment("a2", "m2"),
+      mediaAttachment("a3", "m3"),
+    ];
+    el._attachmentOrder = ["a1", "a2", "a3"];
+    await el.updateComplete;
+
+    const later = moveButton(el, "a1", "later");
+    later.focus();
+    later.click();
+    await el.updateComplete;
+
+    expect(document.activeElement).toBe(moveButton(el, "a1", "later"));
+  });
+
+  it("falls back to the opposite button when a move reaches the end", async () => {
+    const el = await createElement("note");
+    el._attachments = [
+      mediaAttachment("a1", "m1"),
+      mediaAttachment("a2", "m2"),
+    ];
+    el._attachmentOrder = ["a1", "a2"];
+    await el.updateComplete;
+
+    const later = moveButton(el, "a1", "later");
+    later.focus();
+    later.click();
+    await el.updateComplete;
+
+    expect(el._attachmentOrder).toEqual(["a2", "a1"]);
+    expect(moveButton(el, "a1", "later").disabled).toBe(true);
+    expect(document.activeElement).toBe(moveButton(el, "a1", "earlier"));
+  });
+
+  it("omits move buttons when there is nothing to reorder", async () => {
+    const el = await createElement("note");
+    el._attachments = [mediaAttachment("a1", "m1")];
+    el._attachmentOrder = ["a1"];
+    await el.updateComplete;
+
+    expect(el.querySelector("[data-attachment-move]")).toBeNull();
+    expect(el.querySelector(".compose-attachment-alt")).not.toBeNull();
+  });
+
+  it("leaves drag reordering off on a touch device", async () => {
+    const create = vi.spyOn(Sortable, "create");
+    const restorePointer = stubPrimaryPointer("coarse");
+    try {
+      const el = await createElement("note");
+      el._attachments = [
+        mediaAttachment("a1", "m1"),
+        mediaAttachment("a2", "m2"),
+      ];
+      el._attachmentOrder = ["a1", "a2"];
+      await el.updateComplete;
+
+      expect(create).not.toHaveBeenCalled();
+      // The buttons are the whole reordering path there, so they must stay.
+      expect(moveButton(el, "a1", "later").disabled).toBe(false);
+    } finally {
+      restorePointer();
+      create.mockRestore();
+    }
+  });
+
+  it("keeps drag reordering on a pointer device", async () => {
+    const create = vi.spyOn(Sortable, "create");
+    const restorePointer = stubPrimaryPointer("fine");
+    try {
+      const el = await createElement("note");
+      el._attachments = [
+        mediaAttachment("a1", "m1"),
+        mediaAttachment("a2", "m2"),
+      ];
+      el._attachmentOrder = ["a1", "a2"];
+      await el.updateComplete;
+
+      expect(create).toHaveBeenCalledTimes(1);
+    } finally {
+      restorePointer();
+      create.mockRestore();
+    }
+  });
+
   it("preserves mixed attachment order when populate provides one", async () => {
     const el = await createElement("note");
 
@@ -1343,7 +1584,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[] = [];
@@ -1379,7 +1620,6 @@ describe("JantComposeEditor", () => {
       id: "med_test",
     });
     const el = await createElement("note");
-    el._showTitle = true;
     el._title = "Essay";
     await el.updateComplete;
 
@@ -1399,13 +1639,29 @@ describe("JantComposeEditor", () => {
     ]);
   });
 
-  it("pastes images as attachments when the title row was toggled off after typing", async () => {
+  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 = "Essay";
+    el._title = "   ";
     await el.updateComplete;
-    el._showTitle = false;
+
+    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 in a link, title or no title", async () => {
+    const uploadWithMetadataMock = vi.mocked(uploadWithMetadata);
+    const el = await createElement("link");
+    // A link's title is required to publish, so it is filled in every link
+    // worth pasting into — it can't be the signal that picks inline.
+    el._title = "An article worth linking";
     await el.updateComplete;
 
     const image = new File(["image"], "clipboard.png", { type: "image/png" });
@@ -1419,11 +1675,12 @@ describe("JantComposeEditor", () => {
     ]);
   });
 
-  it("pastes images as attachments when only whitespace is in the title", async () => {
+  it("pastes images as attachments in a quote carrying a title from a format switch", async () => {
     const uploadWithMetadataMock = vi.mocked(uploadWithMetadata);
-    const el = await createElement("note");
-    el._showTitle = true;
-    el._title = "   ";
+    const el = await createElement("quote");
+    // A quote has no title field, but switching over from a note leaves one
+    // behind. Nothing the author can see may decide where the image lands.
+    el._title = "Essay";
     await el.updateComplete;
 
     const image = new File(["image"], "clipboard.png", { type: "image/png" });
@@ -1436,4 +1693,242 @@ describe("JantComposeEditor", () => {
       "clipboard.png",
     ]);
   });
+
+  it("carries an in-flight inline upload across a format switch", async () => {
+    const uploadWithMetadataMock = vi.mocked(uploadWithMetadata);
+    let finishUpload: (value: { url: string; id: string }) => void = () => {};
+    uploadWithMetadataMock.mockReturnValue(
+      new Promise((resolve) => {
+        finishUpload = resolve;
+      }),
+    );
+
+    const el = await createElement("note");
+    el._title = "Essay";
+    await el.updateComplete;
+
+    const image = new File(["image"], "clipboard.png", { type: "image/png" });
+    triggerEditorPaste(el, [image]);
+    await el.updateComplete;
+    expect(imageSrcs(el).every((src) => src.startsWith("blob:"))).toBe(true);
+    expect(imageSrcs(el)).toHaveLength(1);
+
+    // The body survives the switch, so the upload watching it has to survive
+    // too — otherwise the blob: placeholder is what gets published.
+    el.format = "quote";
+    await el.updateComplete;
+    await el.updateComplete;
+
+    finishUpload({
+      url: "https://example.test/clipboard.webp",
+      id: "med_test",
+    });
+    await vi.waitFor(() => {
+      expect(imageSrcs(el)).toEqual(["https://example.test/clipboard.webp"]);
+    });
+    expect(bodyImageSrcs(el._bodyJson)).toEqual([
+      "https://example.test/clipboard.webp",
+    ]);
+  });
+
+  it("drops images into a link as attachments, same as pasting them", async () => {
+    const uploadWithMetadataMock = vi.mocked(uploadWithMetadata);
+    const el = await createElement("link");
+    el._title = "An article worth linking";
+    await el.updateComplete;
+
+    const image = new File(["image"], "dropped.png", { type: "image/png" });
+    triggerEditorDrop(el, [image]);
+    await el.updateComplete;
+
+    expect(uploadWithMetadataMock).not.toHaveBeenCalled();
+    expect(el._attachments.map((attachment) => attachment.file.name)).toEqual([
+      "dropped.png",
+    ]);
+  });
+
+  it("focuses the body end when blank space around the editor is clicked", async () => {
+    const el = await createElement("note");
+    const editor = requireEditor(el);
+    editor.commands.setContent(
+      tiptapDoc(tiptapParagraph("One two three"), tiptapParagraph("Tail")),
+    );
+    editor.commands.setTextSelection(1);
+
+    const blank = requireElement(
+      el.querySelector<HTMLElement>(".compose-tiptap-wrap"),
+      "expected compose tiptap wrapper",
+    );
+    pressAndClick(blank, blank);
+
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.selection.from).toBe(editor.state.doc.content.size - 1);
+  });
+
+  it("keeps a drag-selection that lifts off the text onto blank space", async () => {
+    const el = await createElement("note");
+    const editor = requireEditor(el);
+    editor.commands.setContent(
+      tiptapDoc(
+        {
+          type: "blockquote",
+          content: [tiptapParagraph("One two three four five six")],
+        },
+        tiptapParagraph("Tail after the quote"),
+      ),
+    );
+    // Right-to-left drag across the quote: anchor after "six", head before "One".
+    editor.commands.setTextSelection({ from: 2, to: 29 });
+
+    const quote = requireElement(
+      el.querySelector<HTMLElement>(".compose-tiptap-body blockquote p"),
+      "expected blockquote paragraph",
+    );
+    const blank = requireElement(
+      el.querySelector<HTMLElement>(".compose-tiptap-wrap"),
+      "expected compose tiptap wrapper",
+    );
+    // The pointer went down on the text and came up over the wrapper, so the
+    // browser retargets the click to their common ancestor.
+    pressAndClick(quote, blank, blank);
+
+    expect(editor.state.selection.from).toBe(2);
+    expect(editor.state.selection.to).toBe(29);
+  });
+});
+
+describe("JantComposeEditor.takeOver", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.clearAllMocks();
+  });
+
+  /** An editor the dialog is about to render in place of another one. */
+  function unrenderedEditor(format: "note" | "link" | "quote") {
+    const el = document.createElement(
+      "jant-compose-editor",
+    ) as JantComposeEditor;
+    el.format = format;
+    el.labels = labels;
+    document.body.appendChild(el);
+    return el;
+  }
+
+  it("hands every post field to the editor that replaces it", async () => {
+    // One sample per field the editor holds for its post. The first assertion
+    // keeps this table complete: a field the editor gains without a way across
+    // is how a quote's source link used to vanish on "Add to thread".
+    const samples: Record<string, unknown> = {
+      _title: "Left behind by a format switch",
+      _showTitle: false,
+      _bodyJson: tiptapDoc(tiptapParagraph("My thoughts on it")),
+      _url: "https://example.com/source",
+      _quoteText: "A borrowed sentence.",
+      _quoteAuthor: "Someone Else",
+      _rating: 4,
+      _showRating: true,
+      _attachedTexts: [
+        {
+          clientId: "text-1",
+          bodyJson: tiptapDoc(tiptapParagraph("Attached")),
+          bodyHtml: "",
+          summary: "Attached",
+        },
+      ],
+      _attachments: [mediaAttachment("media-1", "med_1")],
+      _attachmentOrder: ["text-1", "media-1"],
+    };
+    const contentProps = (
+      customElements.get("jant-compose-editor") as unknown as {
+        _CONTENT_PROPS: Set<string>;
+      }
+    )._CONTENT_PROPS;
+    expect(Object.keys(samples).sort()).toEqual(
+      [...contentProps, "_attachments"].sort(),
+    );
+
+    const previous = await createElement("quote");
+    for (const [key, value] of Object.entries(samples)) {
+      if (key === "_bodyJson") continue;
+      (previous as unknown as Record<string, unknown>)[key] = value;
+    }
+    requireEditor(previous).commands.setContent(
+      samples._bodyJson as JSONContent,
+    );
+    await previous.updateComplete;
+    // The dialog swaps elements before handing over, so the old one has
+    // already left the DOM — and taken its TipTap instance with it.
+    previous.remove();
+
+    const next = await createElement("quote");
+    next.takeOver(previous);
+    await next.updateComplete;
+
+    for (const [key, value] of Object.entries(samples)) {
+      if (key === "_bodyJson") continue;
+      expect((next as unknown as Record<string, unknown>)[key], key).toEqual(
+        value,
+      );
+    }
+    expect(next.getNormalizedBodyJson()).toEqual(
+      previous.getNormalizedBodyJson(),
+    );
+    expect(requireEditor(next).getText()).toBe("My thoughts on it");
+    expect(next.getData().url).toBe("https://example.com/source");
+  });
+
+  it("keeps a handed-over title toggle through its first render", async () => {
+    const previous = await createElement("note", { titleByDefault: true });
+    previous._showTitle = false;
+    previous.remove();
+
+    const next = unrenderedEditor("note");
+    next.titleByDefault = true;
+    next.takeOver(previous);
+    await next.updateComplete;
+
+    expect(next._showTitle).toBe(false);
+  });
+
+  it.each([
+    ["after", true],
+    ["before", false],
+  ])(
+    "carries an in-flight inline upload to an editor taking over %s its first render",
+    async (_when, renderFirst) => {
+      const uploadWithMetadataMock = vi.mocked(uploadWithMetadata);
+      let finishUpload: (value: { url: string; id: string }) => void = () => {};
+      uploadWithMetadataMock.mockReturnValue(
+        new Promise((resolve) => {
+          finishUpload = resolve;
+        }),
+      );
+
+      const previous = await createElement("note");
+      previous._title = "Essay";
+      await previous.updateComplete;
+      const image = new File(["image"], "clipboard.png", { type: "image/png" });
+      triggerEditorPaste(previous, [image]);
+      await previous.updateComplete;
+      expect(imageSrcs(previous)).toHaveLength(1);
+      expect(imageSrcs(previous)[0]).toMatch(/^blob:/);
+      previous.remove();
+
+      const next = unrenderedEditor("note");
+      if (renderFirst) await next.updateComplete;
+      next.takeOver(previous);
+      await next.updateComplete;
+      expect(imageSrcs(next)[0]).toMatch(/^blob:/);
+
+      finishUpload({ url: "https://example.test/clipboard.webp", id: "med_1" });
+      await vi.waitFor(() => {
+        expect(imageSrcs(next)).toEqual([
+          "https://example.test/clipboard.webp",
+        ]);
+      });
+      expect(bodyImageSrcs(next._bodyJson)).toEqual([
+        "https://example.test/clipboard.webp",
+      ]);
+    },
+  );
 });