@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/src/editor/markdown.ts

@@ -0,0 +1,249 @@
+/**
+ * Canonical HTML <-> Markdown conversion for the rich text editor (web).
+ *
+ * One implementation (LC-16) shared by the markdown source mode toggle and
+ * the markdown paste handler. GFM coverage beyond turndown's defaults:
+ * strikethrough, task lists (Tiptap's label-nested checkbox markup), and
+ * pipe tables. Marks with no markdown syntax (underline, sub/superscript,
+ * highlight, text color spans) survive as inline HTML so the
+ * rich -> markdown -> rich round-trip is lossless for every toolbar feature.
+ *
+ * GitLab-flavored extras (round-trip lossless):
+ * - `$x$` inline math <-> `<span data-type="inline-math" data-latex>`
+ * - `$$ ... $$` block math <-> code block with language "math"
+ *   (``` math fences parse to the same node; `$$` is the canonical output)
+ * - ```mermaid fences <-> code block with language "mermaid" (turndown's
+ *   fenced rule + marked's language classes handle this natively)
+ * - `<details>` collapsible sections stay raw HTML in markdown, exactly
+ *   like GitLab renders them
+ */
+
+import TurndownService from "turndown";
+import { Marked } from "marked";
+
+// ===========================================================================
+// HTML -> Markdown (turndown + GFM rules)
+// ===========================================================================
+
+function cellMarkdown(cell: HTMLElement, inline: TurndownService): string {
+  const md = inline.turndown(cell.innerHTML || "");
+  // GFM cells are single-line: collapse block breaks and escape pipes
+  return md.replace(/\n+/g, " ").replace(/\|/g, "\\|").trim();
+}
+
+function createTurndown(): TurndownService {
+  const service = new TurndownService({
+    headingStyle: "atx",
+    codeBlockStyle: "fenced",
+    bulletListMarker: "-",
+  });
+
+  // Marks markdown cannot express stay as inline HTML (round-trip lossless):
+  // underline, sub/superscript, highlight, and color-carrying spans.
+  // Collapsible <details> sections are raw HTML in markdown (GitLab
+  // behavior) — kept whole, children included.
+  service.keep((node) => {
+    const name = node.nodeName;
+    if (name === "U" || name === "SUB" || name === "SUP" || name === "MARK") return true;
+    if (name === "DETAILS") return true;
+    if (name === "SPAN") {
+      const style = (node as HTMLElement).getAttribute("style") ?? "";
+      return style.includes("color");
+    }
+    return false;
+  });
+
+  service.addRule("strikethrough", {
+    filter: ["del", "s"],
+    replacement: (content) => `~~${content}~~`,
+  });
+
+  // Inline math node -> `$latex$` (GitLab-flavored markdown dollar math)
+  service.addRule("inlineMath", {
+    filter: (node) =>
+      node.nodeName === "SPAN" && (node as HTMLElement).getAttribute("data-type") === "inline-math",
+    replacement: (_content, node) => `$${(node as HTMLElement).getAttribute("data-latex") ?? ""}$`,
+  });
+
+  // Math code block -> `$$` delimited block (canonical GLFM display math)
+  service.addRule("mathBlock", {
+    filter: (node) =>
+      node.nodeName === "PRE" &&
+      (node.firstChild as HTMLElement | null)?.nodeName === "CODE" &&
+      ((node.firstChild as HTMLElement).getAttribute("class") ?? "").includes("language-math"),
+    replacement: (_content, node) => {
+      const code = (node.firstChild as HTMLElement).textContent ?? "";
+      return `\n\n$$\n${code.replace(/\n$/, "")}\n$$\n\n`;
+    },
+  });
+
+  // Tiptap task item: <li data-type="taskItem" data-checked="true">
+  //   <label><input type="checkbox"><span></span></label><div><p>text</p></div>
+  service.addRule("taskListItem", {
+    filter: (node) =>
+      node.nodeName === "LI" && (node as HTMLElement).getAttribute("data-type") === "taskItem",
+    replacement: (content, node) => {
+      const checked = (node as HTMLElement).getAttribute("data-checked") === "true";
+      const text = content.replace(/^\s+|\s+$/g, "").replace(/\n{2,}/g, "\n");
+      return `- [${checked ? "x" : " "}] ${text}\n`;
+    },
+  });
+
+  // The checkbox control inside the task item label contributes no text
+  service.addRule("taskListCheckbox", {
+    filter: (node) =>
+      (node.nodeName === "INPUT" && (node as HTMLInputElement).type === "checkbox") ||
+      (node.nodeName === "LABEL" && node.parentElement?.getAttribute("data-type") === "taskItem"),
+    replacement: () => "",
+  });
+
+  // GFM pipe tables (simple grid: no colspan/rowspan)
+  service.addRule("table", {
+    filter: "table",
+    replacement: (_content, node) => {
+      const table = node as HTMLTableElement;
+      const rows = Array.from(table.querySelectorAll("tr"));
+      if (rows.length === 0) return "";
+      const inline = createInlineTurndown();
+      const grid = rows.map((row) =>
+        Array.from(row.querySelectorAll("th, td")).map((cell) =>
+          cellMarkdown(cell as HTMLElement, inline),
+        ),
+      );
+      const cols = Math.max(...grid.map((r) => r.length));
+      const pad = (r: string[]) => {
+        const filled = [...r];
+        while (filled.length < cols) filled.push("");
+        return filled;
+      };
+      const line = (cells: string[]) => `| ${pad(cells).join(" | ")} |`;
+      const header = line(grid[0]!);
+      const divider = `| ${Array.from({ length: cols }, () => "---").join(" | ")} |`;
+      const body = grid.slice(1).map(line);
+      return `\n\n${[header, divider, ...body].join("\n")}\n\n`;
+    },
+  });
+
+  return service;
+}
+
+/** Inline-only converter for table cells (tables cannot nest in GFM cells) */
+function createInlineTurndown(): TurndownService {
+  const service = new TurndownService({ codeBlockStyle: "fenced" });
+  service.keep((node) => {
+    const name = node.nodeName;
+    if (name === "U" || name === "SUB" || name === "SUP" || name === "MARK") return true;
+    if (name === "SPAN")
+      return ((node as HTMLElement).getAttribute("style") ?? "").includes("color");
+    return false;
+  });
+  service.addRule("strikethrough", {
+    filter: ["del", "s"],
+    replacement: (content) => `~~${content}~~`,
+  });
+  return service;
+}
+
+let turndownSingleton: TurndownService | null = null;
+
+/** Convert editor HTML to GFM markdown */
+export function htmlToMarkdown(html: string): string {
+  if (!turndownSingleton) turndownSingleton = createTurndown();
+  return turndownSingleton.turndown(html);
+}
+
+// ===========================================================================
+// Markdown -> HTML (marked + math extensions + Tiptap task list upgrade)
+// ===========================================================================
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+/**
+ * `$$ ... $$` display math -> math code block. Accepts the delimiters on
+ * their own lines (canonical GLFM) or a single `$$x$$` line; both re-enter
+ * the editor as a code block with language "math".
+ */
+const blockMathExtension = {
+  name: "blockMath",
+  level: "block" as const,
+  start: (src: string) => src.match(/^\$\$/m)?.index,
+  tokenizer(src: string) {
+    const match =
+      src.match(/^\$\$[ \t]*\n([\s\S]*?)\n[ \t]*\$\$[ \t]*(?:\n+|$)/) ??
+      src.match(/^\$\$([^\n$]+?)\$\$[ \t]*(?:\n+|$)/);
+    if (!match) return undefined;
+    return { type: "blockMath", raw: match[0], latex: (match[1] ?? "").trim() };
+  },
+  renderer(token: { latex: string }) {
+    return `<pre><code class="language-math">${escapeHtml(token.latex)}</code></pre>\n`;
+  },
+};
+
+/**
+ * `$x^2$` inline math -> inline-math span. Content must not start or end
+ * with whitespace and cannot span lines, so prose like "$5 and $10" never
+ * false-positives (same heuristic GitLab/Pandoc use for dollar math).
+ */
+const inlineMathExtension = {
+  name: "inlineMath",
+  level: "inline" as const,
+  start: (src: string) => src.indexOf("$"),
+  tokenizer(src: string) {
+    const match = src.match(/^\$([^$\n])\$/) ?? src.match(/^\$([^$\n \t][^$\n]*?[^$\n \t])\$/);
+    if (!match) return undefined;
+    return { type: "inlineMath", raw: match[0], latex: match[1] ?? "" };
+  },
+  renderer(token: { latex: string }) {
+    const escaped = escapeHtml(token.latex);
+    return `<span data-type="inline-math" data-latex="${escaped}">${escaped}</span>`;
+  },
+};
+
+let markedSingleton: Marked | null = null;
+
+/** Local marked instance so math extensions never leak into the global */
+function getMarked(): Marked {
+  if (!markedSingleton) {
+    markedSingleton = new Marked({ gfm: true });
+    markedSingleton.use({ extensions: [blockMathExtension, inlineMathExtension] });
+  }
+  return markedSingleton;
+}
+
+/**
+ * marked emits GFM task items as `<li><input type="checkbox" checked>`;
+ * Tiptap's TaskList/TaskItem parse `ul[data-type="taskList"] >
+ * li[data-type="taskItem"][data-checked]`. Upgrade in the DOM so the
+ * round-trip re-enters the editor as real task items.
+ */
+function upgradeTaskLists(html: string): string {
+  if (typeof document === "undefined" || !html.includes("checkbox")) return html;
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  for (const input of Array.from(
+    doc.querySelectorAll<HTMLInputElement>('li input[type="checkbox"]'),
+  )) {
+    const li = input.closest("li");
+    if (!li) continue;
+    li.setAttribute("data-type", "taskItem");
+    li.setAttribute(
+      "data-checked",
+      input.checked || input.hasAttribute("checked") ? "true" : "false",
+    );
+    input.remove();
+    const list = li.closest("ul, ol");
+    if (list) list.setAttribute("data-type", "taskList");
+  }
+  return doc.body.innerHTML;
+}
+
+/** Convert GFM markdown to HTML the Tiptap schema can ingest */
+export function markdownToHtml(markdown: string): string {
+  const html = getMarked().parse(markdown, { async: false }) as string;
+  return upgradeTaskLists(html);
+}

package/src/editor/mathematics.spec.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { INLINE_MATH_INPUT_RULE, InlineMath } from "./mathematics";
+
+function createEditor(content = "<p></p>") {
+  return new Editor({
+    element: document.createElement("div"),
+    extensions: [StarterKit, InlineMath],
+    content,
+  });
+}
+
+async function waitFor(check: () => boolean, timeoutMs = 3000): Promise<void> {
+  const start = Date.now();
+  while (!check()) {
+    if (Date.now() - start > timeoutMs) throw new Error("waitFor timed out");
+    await new Promise((resolve) => setTimeout(resolve, 25));
+  }
+}
+
+describe("INLINE_MATH_INPUT_RULE", () => {
+  const matches = (text: string) => text.match(INLINE_MATH_INPUT_RULE);
+
+  it("matches dollar math at the end of typed text", () => {
+    const match = matches("energy $E=mc^2$");
+    expect(match?.[2]).toBe("E=mc^2");
+    const startOfLine = matches("$x^2$");
+    expect(startOfLine?.[2]).toBe("x^2");
+    const singleChar = matches("$x$");
+    expect(singleChar?.[2]).toBe("x");
+  });
+
+  it("rejects price-like text and padded content", () => {
+    expect(matches("costs $5 and $10")).toBeNull();
+    expect(matches("$ x$")).toBeNull();
+    expect(matches("$x $")).toBeNull();
+    expect(matches("$$")).toBeNull();
+    // `$$x$$` is block math, not inline
+    expect(matches("$$x$$")).toBeNull();
+  });
+});
+
+describe("InlineMath node", () => {
+  it("parses and serializes data-latex spans losslessly", () => {
+    const editor = createEditor(
+      '<p>see <span data-type="inline-math" data-latex="E=mc^2">E=mc^2</span></p>',
+    );
+    expect(editor.getHTML()).toContain('data-type="inline-math"');
+    expect(editor.getHTML()).toContain('data-latex="E=mc^2"');
+    editor.destroy();
+  });
+
+  it("insertInlineMath inserts and selects the node (bubble opens)", () => {
+    const editor = createEditor();
+    editor.chain().focus().insertInlineMath({ latex: "a+b" }).run();
+    expect(editor.isActive("inlineMath")).toBe(true);
+    expect(editor.getAttributes("inlineMath").latex).toBe("a+b");
+    editor.destroy();
+  });
+
+  it("updateInlineMath rewrites the selected node's latex", () => {
+    const editor = createEditor();
+    editor.chain().focus().insertInlineMath({ latex: "a" }).run();
+    expect(editor.commands.updateInlineMath({ latex: "b^2" })).toBe(true);
+    expect(editor.getAttributes("inlineMath").latex).toBe("b^2");
+    expect(editor.getHTML()).toContain('data-latex="b^2"');
+    editor.destroy();
+  });
+
+  it("updateInlineMath is a no-op without a selected math node", () => {
+    const editor = createEditor("<p>plain</p>");
+    expect(editor.commands.updateInlineMath({ latex: "x" })).toBe(false);
+    editor.destroy();
+  });
+
+  it("node view renders KaTeX markup for valid TeX", async () => {
+    const editor = createEditor('<p><span data-type="inline-math" data-latex="x^2">x^2</span></p>');
+    const chip = editor.view.dom.querySelector(".rt-math-inline");
+    expect(chip).not.toBeNull();
+    await waitFor(() => chip!.querySelector(".katex") !== null);
+    expect(chip!.getAttribute("aria-label")).toBe("x^2");
+    editor.destroy();
+  });
+
+  it("node view shows the error state for invalid TeX", async () => {
+    const editor = createEditor(
+      '<p><span data-type="inline-math" data-latex="\\nope{">x</span></p>',
+    );
+    const chip = editor.view.dom.querySelector(".rt-math-inline");
+    await waitFor(() => chip!.classList.contains("rt-math-error"));
+    // raw source stays visible; the parse error rides the title
+    expect(chip!.textContent).toBe("\\nope{");
+    expect(chip!.getAttribute("title")).toMatch(/parse error/i);
+    editor.destroy();
+  });
+});

package/src/editor/mathematics.ts

@@ -0,0 +1,179 @@
+/**
+ * Inline math node (`$x^2$`) rendered with lazy-loaded KaTeX — GitLab
+ * parity for dollar math in the rich text editor.
+ *
+ * - Typing `$latex$` converts to a rendered formula (input rule; prices
+ *   like "$5 and $10" never convert — content cannot start/end with
+ *   whitespace).
+ * - The node is an inline atom carrying the raw TeX in `data-latex`; the
+ *   MathBubble edits it in place (updateInlineMath command).
+ * - Invalid TeX shows the raw source in an error style with the KaTeX
+ *   parse message (Axiom 6: show the error, never blank).
+ * - Block math (`$$ ... $$`) is a code block with language "math" — see
+ *   codeBlockPreview.ts — matching GitLab's ```math fence model.
+ *
+ * Serialization: `<span data-type="inline-math" data-latex="...">` <->
+ * `$...$` (editor/markdown.ts), so the source toggle is lossless.
+ */
+
+import { Node, mergeAttributes, nodeInputRule } from "@tiptap/core";
+import { NodeSelection } from "@tiptap/pm/state";
+import { t } from "../shared/t";
+import { mountKatexHtml, renderKatexHtml } from "./lazyKatex";
+
+export interface InlineMathOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    inlineMath: {
+      /** Inserts an inline math node and selects it (opens the MathBubble) */
+      insertInlineMath: (attributes?: { latex?: string }) => ReturnType;
+      /** Updates the latex of the selected inline math node */
+      updateInlineMath: (attributes: { latex: string }) => ReturnType;
+    };
+  }
+}
+
+/**
+ * Matches `$...$` as the last thing typed. match[1] is the dollar span
+ * (what the node replaces), match[2] the TeX. The character before the
+ * opening `$` must not be another `$` (that is block math), and content
+ * cannot start/end with whitespace or contain `$`/newlines.
+ */
+export const INLINE_MATH_INPUT_RULE = /(?:^|[^$])(\$([^$\n \t](?:[^$\n]*[^$\n \t])?)\$)$/;
+
+export const InlineMath = Node.create<InlineMathOptions>({
+  name: "inlineMath",
+  inline: true,
+  group: "inline",
+  atom: true,
+  marks: "",
+
+  addOptions() {
+    return { HTMLAttributes: {} };
+  },
+
+  addAttributes() {
+    return {
+      latex: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-latex") ?? element.textContent ?? "",
+        renderHTML: (attributes) => ({ "data-latex": attributes.latex }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'span[data-type="inline-math"]' }];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    // raw TeX as text content: non-web surfaces (native preview, plain
+    // parsers) degrade to readable source
+    return [
+      "span",
+      mergeAttributes({ "data-type": "inline-math" }, this.options.HTMLAttributes, HTMLAttributes),
+      node.attrs.latex,
+    ];
+  },
+
+  addCommands() {
+    return {
+      insertInlineMath:
+        (attributes) =>
+        ({ tr, dispatch }) => {
+          if (dispatch) {
+            const pos = tr.selection.from;
+            tr.replaceSelectionWith(this.type.create({ latex: attributes?.latex ?? "" }), false);
+            tr.setSelection(NodeSelection.create(tr.doc, pos));
+            tr.scrollIntoView();
+          }
+          return true;
+        },
+      updateInlineMath:
+        (attributes) =>
+        ({ tr, dispatch }) => {
+          const { selection } = tr;
+          if (!(selection instanceof NodeSelection) || selection.node.type !== this.type) {
+            return false;
+          }
+          if (dispatch) {
+            const pos = selection.from;
+            tr.setNodeMarkup(pos, undefined, { latex: attributes.latex });
+            tr.setSelection(NodeSelection.create(tr.doc, pos));
+          }
+          return true;
+        },
+    };
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: INLINE_MATH_INPUT_RULE,
+        type: this.type,
+        getAttributes: (match) => ({ latex: match[2] ?? "" }),
+      }),
+    ];
+  },
+
+  addNodeView() {
+    return ({ node }) => {
+      const dom = document.createElement("span");
+      dom.className = "rt-math-inline";
+      dom.setAttribute("data-type", "inline-math");
+      dom.contentEditable = "false";
+
+      let currentLatex: string | null = null;
+      let destroyed = false;
+
+      const render = (latex: string) => {
+        if (destroyed || latex === currentLatex) return;
+        currentLatex = latex;
+        dom.setAttribute("data-latex", latex);
+        if (!latex.trim()) {
+          dom.classList.add("rt-math-empty");
+          dom.classList.remove("rt-math-error");
+          dom.removeAttribute("title");
+          dom.textContent = t("math");
+          return;
+        }
+        dom.classList.remove("rt-math-empty");
+        // raw TeX stays visible while KaTeX loads (first render only)
+        dom.textContent = latex;
+        void renderKatexHtml(latex).then((result) => {
+          if (destroyed || currentLatex !== latex) return;
+          if (result.ok) {
+            mountKatexHtml(dom, result.html);
+            dom.classList.remove("rt-math-error");
+            dom.removeAttribute("title");
+            dom.setAttribute("role", "img");
+            dom.setAttribute("aria-label", latex);
+          } else {
+            // Axiom 6: raw source + parse message, never a blank chip
+            dom.textContent = latex;
+            dom.classList.add("rt-math-error");
+            dom.title = result.error;
+          }
+        });
+      };
+
+      render((node.attrs.latex as string) ?? "");
+
+      return {
+        dom,
+        update: (updatedNode) => {
+          if (updatedNode.type.name !== "inlineMath") return false;
+          render((updatedNode.attrs.latex as string) ?? "");
+          return true;
+        },
+        ignoreMutation: () => true,
+        destroy: () => {
+          destroyed = true;
+        },
+      };
+    };
+  },
+});

package/src/editor/media.spec.ts

@@ -0,0 +1,121 @@
+/**
+ * Media paste/drop upload behavior against a headless Tiptap editor.
+ */
+
+import { describe, expect, it, vi } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import { MediaUpload } from "./media";
+
+function createEditor() {
+  return new Editor({
+    element: document.createElement("div"),
+    extensions: [StarterKit, Image.configure({ inline: true, allowBase64: true }), MediaUpload],
+    content: "<p>start</p>",
+  });
+}
+
+function firePaste(editor: Editor, files: File[]) {
+  const event = {
+    clipboardData: { files, types: ["Files"], getData: () => "" },
+    preventDefault: vi.fn(),
+  } as unknown as ClipboardEvent;
+  // someProp mirrors ProseMirror dispatch: handlers run in order until one
+  // claims the event by returning truthy
+  const handled = !!editor.view.someProp("handlePaste", (fn) =>
+    fn(editor.view, event, editor.state.tr.doc.slice(0)),
+  );
+  return { handled, event };
+}
+
+async function waitFor(check: () => boolean, timeoutMs = 2000) {
+  const start = Date.now();
+  while (!check()) {
+    if (Date.now() - start > timeoutMs) throw new Error("waitFor timed out");
+    await new Promise((r) => setTimeout(r, 10));
+  }
+}
+
+describe("MediaUpload", () => {
+  it("inserts an uploaded image URL when onImageUpload is wired", async () => {
+    const editor = createEditor();
+    const onImageUpload = vi.fn(async () => "https://cdn.example.com/pic.png");
+    editor.storage.mediaUpload.handlers = { onImageUpload };
+
+    const file = new File(["binary"], "pic.png", { type: "image/png" });
+    const { handled, event } = firePaste(editor, [file]);
+
+    expect(handled).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalled();
+    await waitFor(() => editor.getHTML().includes("<img"));
+    expect(onImageUpload).toHaveBeenCalledWith(file);
+    expect(editor.getHTML()).toContain('src="https://cdn.example.com/pic.png"');
+    expect(editor.getHTML()).toContain('alt="pic"');
+    editor.destroy();
+  });
+
+  it("falls back to base64 data URI without an image handler", async () => {
+    const editor = createEditor();
+    const file = new File(["binary"], "photo.jpg", { type: "image/jpeg" });
+    const { handled } = firePaste(editor, [file]);
+
+    expect(handled).toBe(true);
+    await waitFor(() => editor.getHTML().includes("<img"));
+    expect(editor.getHTML()).toContain('src="data:');
+    editor.destroy();
+  });
+
+  it("inserts an attachment chip link for non-image files via onFileUpload", async () => {
+    const editor = createEditor();
+    const onFileUpload = vi.fn(async () => ({
+      url: "https://cdn.example.com/report.pdf",
+      name: "report.pdf",
+    }));
+    editor.storage.mediaUpload.handlers = { onFileUpload };
+
+    const file = new File(["%PDF"], "report.pdf", { type: "application/pdf" });
+    const { handled } = firePaste(editor, [file]);
+
+    expect(handled).toBe(true);
+    await waitFor(() => editor.getHTML().includes("<a"));
+    const html = editor.getHTML();
+    expect(html).toContain('href="https://cdn.example.com/report.pdf"');
+    expect(html).toContain("rt-attachment");
+    expect(html).toContain("report.pdf");
+    editor.destroy();
+  });
+
+  it("ignores non-image files without a file handler (honest no-op)", () => {
+    const editor = createEditor();
+    const file = new File(["%PDF"], "report.pdf", { type: "application/pdf" });
+    const { handled } = firePaste(editor, [file]);
+    expect(handled).toBe(false);
+    expect(editor.getHTML()).not.toContain("<a");
+    editor.destroy();
+  });
+
+  it("does not intercept text-only pastes", () => {
+    const editor = createEditor();
+    const { handled } = firePaste(editor, []);
+    expect(handled).toBeFalsy();
+    editor.destroy();
+  });
+
+  it("survives a failing upload without crashing", async () => {
+    const editor = createEditor();
+    const onImageUpload = vi.fn(async () => {
+      throw new Error("upload broke");
+    });
+    editor.storage.mediaUpload.handlers = { onImageUpload };
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const file = new File(["binary"], "pic.png", { type: "image/png" });
+    const { handled } = firePaste(editor, [file]);
+    expect(handled).toBe(true);
+    await waitFor(() => warn.mock.calls.length > 0);
+    expect(editor.getHTML()).not.toContain("<img");
+    warn.mockRestore();
+    editor.destroy();
+  });
+});