@multiplatform.one/rich-text 6.0.4 → 6.3.0

package/src/editor/lazyKatex.ts

@@ -0,0 +1,68 @@
+/**
+ * Lazy KaTeX renderer for `$...$` inline and `$$...$$` block math.
+ *
+ * Bundle discipline: KaTeX (~70 KB gz JS + CSS + fonts) never rides the
+ * editor chunk. Both the library and its stylesheet load through dynamic
+ * import on the first math render and are cached for the session. The
+ * stylesheet colors inherit `currentColor`, so dark schemes work without
+ * a separate dark CSS pass.
+ *
+ * The result contract is Axiom 6 friendly — invalid TeX returns
+ * `{ ok: false, error }` with KaTeX's parse message so callers can show
+ * the error instead of a blank node.
+ */
+
+export type KatexRenderResult = { ok: true; html: string } | { ok: false; error: string };
+
+type KatexModule = typeof import("katex").default;
+
+let katexPromise: Promise<KatexModule> | null = null;
+
+function loadKatex(): Promise<KatexModule> {
+  if (!katexPromise) {
+    katexPromise = Promise.all([
+      import("katex"),
+      // the stylesheet (fonts included) code-splits with this async chunk
+      import("katex/dist/katex.min.css"),
+    ]).then(([mod]) => (mod as any).default ?? mod);
+  }
+  return katexPromise;
+}
+
+/** Renders TeX to KaTeX HTML markup (display mode for `$$` blocks) */
+export async function renderKatexHtml(
+  latex: string,
+  options: { displayMode?: boolean } = {},
+): Promise<KatexRenderResult> {
+  try {
+    const katex = await loadKatex();
+    const html = katex.renderToString(latex, {
+      displayMode: options.displayMode ?? false,
+      throwOnError: true,
+      strict: false,
+    });
+    return { ok: true, html };
+  } catch (err) {
+    return { ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+
+/**
+ * Mounts KaTeX markup as real DOM nodes. KaTeX output is spans + MathML by
+ * construction; parsing inert and stripping executables is defense in
+ * depth, mirroring the mermaid mount helper.
+ */
+export function mountKatexHtml(container: HTMLElement, html: string): void {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  for (const el of Array.from(doc.body.querySelectorAll("script, iframe, object, embed"))) {
+    el.remove();
+  }
+  container.replaceChildren(
+    ...Array.from(doc.body.childNodes).map((node) => document.importNode(node, true)),
+  );
+}
+
+/** Test seam: reset the cached library promise */
+export function resetKatexForTesting(): void {
+  katexPromise = null;
+}

package/src/editor/markdown.spec.ts

@@ -0,0 +1,196 @@
+import { describe, expect, it } from "vitest";
+import { htmlToMarkdown, markdownToHtml } from "./markdown";
+
+describe("htmlToMarkdown", () => {
+  it("converts headings, emphasis, and inline code to GFM", () => {
+    const md = htmlToMarkdown(
+      "<h1>Title</h1><p><strong>bold</strong> and <em>italic</em> and <code>code</code></p>",
+    );
+    expect(md).toContain("# Title");
+    expect(md).toContain("**bold**");
+    expect(md).toContain("_italic_");
+    expect(md).toContain("`code`");
+  });
+
+  it("converts strikethrough to ~~", () => {
+    expect(htmlToMarkdown("<p><s>gone</s></p>")).toContain("~~gone~~");
+    expect(htmlToMarkdown("<p><del>gone</del></p>")).toContain("~~gone~~");
+  });
+
+  it("converts fenced code blocks", () => {
+    const md = htmlToMarkdown('<pre><code class="language-js">const a = 1;</code></pre>');
+    expect(md).toContain("```");
+    expect(md).toContain("const a = 1;");
+  });
+
+  it("converts Tiptap task items to GFM checkboxes", () => {
+    const html =
+      '<ul data-type="taskList">' +
+      '<li data-type="taskItem" data-checked="true"><label><input type="checkbox" checked><span></span></label><div><p>done</p></div></li>' +
+      '<li data-type="taskItem" data-checked="false"><label><input type="checkbox"><span></span></label><div><p>todo</p></div></li>' +
+      "</ul>";
+    const md = htmlToMarkdown(html);
+    expect(md).toContain("- [x] done");
+    expect(md).toContain("- [ ] todo");
+  });
+
+  it("converts tables to GFM pipe tables", () => {
+    const html =
+      "<table><tr><th>Name</th><th>Role</th></tr><tr><td>Ada</td><td>Analyst</td></tr></table>";
+    const md = htmlToMarkdown(html);
+    expect(md).toContain("| Name | Role |");
+    expect(md).toContain("| --- | --- |");
+    expect(md).toContain("| Ada | Analyst |");
+  });
+
+  it("escapes pipes inside table cells", () => {
+    const md = htmlToMarkdown("<table><tr><th>A</th></tr><tr><td>x | y</td></tr></table>");
+    expect(md).toContain("x \\| y");
+  });
+
+  it("keeps marks markdown cannot express as inline HTML (lossless)", () => {
+    const md = htmlToMarkdown(
+      '<p><u>under</u> <sub>sub</sub> <sup>sup</sup> <mark>hi</mark> <span style="color: rgb(255, 0, 0)">red</span></p>',
+    );
+    expect(md).toContain("<u>under</u>");
+    expect(md).toContain("<sub>sub</sub>");
+    expect(md).toContain("<sup>sup</sup>");
+    expect(md).toContain("<mark>hi</mark>");
+    expect(md).toMatch(/<span style="color:\s*rgb\(255,\s*0,\s*0\)/);
+  });
+});
+
+describe("markdownToHtml", () => {
+  it("converts GFM to HTML", () => {
+    const html = markdownToHtml("# Title\n\n**bold** and ~~strike~~");
+    expect(html).toContain("<h1>Title</h1>");
+    expect(html).toContain("<strong>bold</strong>");
+    expect(html).toContain("<del>strike</del>");
+  });
+
+  it("upgrades GFM task lists to the Tiptap taskList schema", () => {
+    const html = markdownToHtml("- [x] done\n- [ ] todo");
+    expect(html).toContain('data-type="taskList"');
+    expect(html).toContain('data-type="taskItem"');
+    expect(html).toContain('data-checked="true"');
+    expect(html).toContain('data-checked="false"');
+    // marked's raw checkbox inputs are removed after the upgrade
+    expect(html).not.toContain("<input");
+  });
+
+  it("parses pipe tables", () => {
+    const html = markdownToHtml("| A | B |\n| --- | --- |\n| 1 | 2 |");
+    expect(html).toContain("<table>");
+    expect(html).toContain("<th>A</th>");
+    expect(html).toContain("<td>1</td>");
+  });
+});
+
+describe("math markdown (GitLab-flavored dollar math)", () => {
+  it("converts inline math spans to $...$", () => {
+    const md = htmlToMarkdown(
+      '<p>energy <span data-type="inline-math" data-latex="E=mc^2">E=mc^2</span> here</p>',
+    );
+    expect(md).toContain("$E=mc^2$");
+  });
+
+  it("converts math code blocks to $$ fences", () => {
+    const md = htmlToMarkdown('<pre><code class="language-math">\\frac{a}{b}</code></pre>');
+    expect(md).toContain("$$\n\\frac{a}{b}\n$$");
+  });
+
+  it("parses $...$ into inline math spans", () => {
+    const html = markdownToHtml("the mass $E=mc^2$ equation");
+    expect(html).toContain('data-type="inline-math"');
+    expect(html).toContain('data-latex="E=mc^2"');
+  });
+
+  it("parses $$ blocks (own-line and single-line) into math code blocks", () => {
+    expect(markdownToHtml("$$\n\\sqrt{x}\n$$")).toContain('<code class="language-math">');
+    expect(markdownToHtml("$$\\sqrt{x}$$")).toContain('<code class="language-math">');
+  });
+
+  it("parses ```math fences into the same math code block", () => {
+    expect(markdownToHtml("```math\n\\sqrt{x}\n```")).toContain('class="language-math"');
+  });
+
+  it("does not treat prices as math", () => {
+    const html = markdownToHtml("costs $5 and $10 total");
+    expect(html).not.toContain("inline-math");
+    expect(html).toContain("costs $5 and $10 total");
+  });
+
+  it("escapes HTML inside latex both directions", () => {
+    const html = markdownToHtml("$a<b$");
+    expect(html).toContain("a&lt;b");
+    expect(html).not.toContain("<b$");
+  });
+
+  it("round-trips inline and block math losslessly", () => {
+    const source =
+      '<p>inline <span data-type="inline-math" data-latex="x^2">x^2</span></p>' +
+      '<pre><code class="language-math">\\sum_{i=0}^n i</code></pre>';
+    const roundTripped = markdownToHtml(htmlToMarkdown(source));
+    expect(roundTripped).toContain('data-latex="x^2"');
+    expect(roundTripped).toContain('<code class="language-math">');
+    expect(roundTripped).toContain("\\sum_{i=0}^n i");
+  });
+});
+
+describe("mermaid markdown", () => {
+  it("round-trips mermaid fences losslessly", () => {
+    const source = '<pre><code class="language-mermaid">graph TD\n  A--&gt;B</code></pre>';
+    const md = htmlToMarkdown(source);
+    expect(md).toContain("```mermaid");
+    expect(md).toContain("graph TD");
+    const roundTripped = markdownToHtml(md);
+    expect(roundTripped).toContain('class="language-mermaid"');
+    expect(roundTripped).toContain("A--&gt;B");
+  });
+});
+
+describe("details markdown (collapsible sections)", () => {
+  it("keeps <details> as raw HTML (GitLab behavior) and round-trips it", () => {
+    const source =
+      "<details><summary>Click me</summary>" +
+      '<div data-type="detailsContent"><p>hidden <strong>content</strong></p></div></details>';
+    const md = htmlToMarkdown(source);
+    expect(md).toContain("<details>");
+    expect(md).toContain("<summary>Click me</summary>");
+    const roundTripped = markdownToHtml(md);
+    expect(roundTripped).toContain("<details>");
+    expect(roundTripped).toContain("<summary>Click me</summary>");
+    expect(roundTripped).toContain("<strong>content</strong>");
+  });
+});
+
+describe("round-trip (rich -> markdown -> rich)", () => {
+  it("preserves headings, lists, tasks, quotes, and inline marks", () => {
+    const source =
+      "<h2>Notes</h2>" +
+      "<p><strong>bold</strong> <em>em</em> <s>strike</s> <code>code</code> <u>under</u></p>" +
+      "<ul><li><p>one</p></li><li><p>two</p></li></ul>" +
+      '<ul data-type="taskList"><li data-type="taskItem" data-checked="true"><label><input type="checkbox" checked><span></span></label><div><p>task</p></div></li></ul>' +
+      "<blockquote><p>quote</p></blockquote>";
+    const roundTripped = markdownToHtml(htmlToMarkdown(source));
+    expect(roundTripped).toContain("<h2>Notes</h2>");
+    expect(roundTripped).toContain("<strong>bold</strong>");
+    expect(roundTripped).toContain("<em>em</em>");
+    expect(roundTripped).toContain("<del>strike</del>");
+    expect(roundTripped).toContain("<code>code</code>");
+    expect(roundTripped).toContain("<u>under</u>");
+    // Tiptap emits loose lists (<li><p>…</p></li>); either form is fine
+    expect(roundTripped).toMatch(/<li>(<p>)?one(<\/p>)?\s*<\/li>/);
+    expect(roundTripped).toContain('data-type="taskItem"');
+    expect(roundTripped).toContain('data-checked="true"');
+    expect(roundTripped).toContain("<blockquote>");
+  });
+
+  it("preserves tables through the round trip", () => {
+    const source = "<table><tr><th>H</th></tr><tr><td>cell</td></tr></table>";
+    const roundTripped = markdownToHtml(htmlToMarkdown(source));
+    expect(roundTripped).toContain("<table>");
+    expect(roundTripped).toContain("<th>H</th>");
+    expect(roundTripped).toContain("<td>cell</td>");
+  });
+});

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();
+  });
+});