@multiplatform.one/rich-text 7.6.2 → 7.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/rich-text",
-  "version": "7.6.2",
+  "version": "7.7.0",
   "description": "Cross-platform rich text editor with markdown support and syntax highlighting",
   "keywords": [
     "cross-platform",
@@ -93,25 +93,24 @@
     "marked": "^17.0.6",
     "tamagui": "2.7.6",
     "turndown": "^7.2.4",
-    "@multiplatform.one/components": "7.6.2",
-    "@multiplatform.one/markdown": "7.6.2",
-    "@multiplatform.one/forms": "7.6.2",
-    "@multiplatform.one/theme": "7.6.2"
+    "@multiplatform.one/components": "7.7.0",
+    "@multiplatform.one/forms": "7.7.0",
+    "@multiplatform.one/markdown": "7.7.0",
+    "@multiplatform.one/theme": "7.7.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.7.6",
     "@testing-library/react": "^16.3.2",
     "@types/katex": "^0.16.7",
-    "@types/react": "~19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.5",
     "i18next": "^25.10.10",
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "7.6.2",
-    "@multiplatform.one/storybook": "7.6.2",
-    "@multiplatform.one/test-utils": "7.6.2"
+    "@multiplatform.one/config": "7.7.0",
+    "@multiplatform.one/storybook": "7.7.0",
+    "@multiplatform.one/test-utils": "7.7.0"
   },
   "peerDependencies": {
     "i18next": "^25.0.0",

package/src/editor/SlashCommands.spec.tsx

@@ -0,0 +1,210 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const suggestion = vi.hoisted(() => ({ fn: vi.fn(() => ({ props: {} })) }));
+
+vi.mock("@tiptap/suggestion", () => ({ default: suggestion.fn }));
+
+const { SlashCommands } = await import("./SlashCommands");
+
+type Item = { id: string; title: string; description: string; command: (a: any) => void };
+
+function items(query = ""): Item[] {
+  return (SlashCommands as any).options.suggestion.items({ query });
+}
+
+function ids(list: Item[]) {
+  return list.map((i) => i.id);
+}
+
+/** Records every link in the command chain so an assertion can read the whole call. */
+function makeEditor(storage: Record<string, unknown> = {}) {
+  const calls: Array<[string, ...unknown[]]> = [];
+  const chain: any = new Proxy(
+    {},
+    {
+      get:
+        (_target, prop: string) =>
+        (...args: unknown[]) => {
+          calls.push([prop, ...args]);
+          return chain;
+        },
+    },
+  );
+  return {
+    editor: { chain: () => chain, storage } as any,
+    calls,
+    names: () => calls.map((c) => c[0]),
+  };
+}
+
+const RANGE = { from: 3, to: 4 };
+
+function run(id: string, editor: any) {
+  const item = items().find((i) => i.id === id);
+  if (!item) throw new Error(`no slash item "${id}"`);
+  item.command({ editor, range: RANGE });
+}
+
+describe("SlashCommands", () => {
+  // happy-dom does not implement window.prompt, so install one to observe.
+  let promptSpy: ReturnType<typeof vi.fn>;
+  let originalPrompt: typeof window.prompt;
+
+  beforeEach(() => {
+    suggestion.fn.mockClear();
+    originalPrompt = window.prompt;
+    promptSpy = vi.fn(() => null as string | null);
+    (window as any).prompt = promptSpy;
+  });
+
+  afterEach(() => {
+    (window as any).prompt = originalPrompt;
+  });
+
+  it("triggers on a slash anywhere in the line, not only at its start", () => {
+    const { suggestion: cfg } = (SlashCommands as any).options;
+    expect(cfg.char).toBe("/");
+    expect(cfg.startOfLine).toBe(false);
+  });
+
+  it("offers the whole block catalog on an empty query", () => {
+    expect(ids(items())).toEqual([
+      "text",
+      "heading1",
+      "heading2",
+      "heading3",
+      "bulletList",
+      "orderedList",
+      "taskList",
+      "codeBlock",
+      "blockquote",
+      "horizontalRule",
+      "table",
+      "image",
+      "mermaid",
+      "mathBlock",
+      "inlineMath",
+      "details",
+      "emoji",
+    ]);
+  });
+
+  it("matches titles without regard to case", () => {
+    expect(ids(items("HEAD"))).toEqual(["heading1", "heading2", "heading3"]);
+    expect(ids(items("head"))).toEqual(ids(items("HEAD")));
+  });
+
+  it("matches the description too, not the title alone", () => {
+    // "checkboxes" appears only in the Task List description
+    const byDescription = items("checkboxes");
+    expect(ids(byDescription)).toEqual(["taskList"]);
+    expect(byDescription[0].title.toLowerCase()).not.toContain("checkboxes");
+  });
+
+  it("returns an empty list rather than the catalog when nothing matches", () => {
+    expect(items("zzzznotathing")).toEqual([]);
+  });
+
+  it("excludeIds removes exactly the named ids from what the suggestion plugin is handed", () => {
+    const ext = (SlashCommands as any).configure({ excludeIds: ["table", "image", "emoji"] });
+    ext.config.addProseMirrorPlugins.call({ options: ext.options, editor: null });
+
+    expect(suggestion.fn).toHaveBeenCalledTimes(1);
+    const passed = suggestion.fn.mock.calls[0][0] as any;
+    const filtered = ids(passed.items({ query: "" }));
+
+    expect(filtered).not.toContain("table");
+    expect(filtered).not.toContain("image");
+    expect(filtered).not.toContain("emoji");
+    expect(filtered.length).toBe(items().length - 3);
+    expect(filtered).toEqual(
+      ids(items()).filter((id) => !["table", "image", "emoji"].includes(id)),
+    );
+  });
+
+  it("an empty excludeIds leaves the catalog whole", () => {
+    const ext = (SlashCommands as any).configure({});
+    ext.config.addProseMirrorPlugins.call({ options: ext.options, editor: null });
+    const passed = suggestion.fn.mock.calls[0][0] as any;
+    expect(ids(passed.items({ query: "" }))).toEqual(ids(items()));
+  });
+
+  it("every command deletes the typed trigger range before it inserts anything", () => {
+    for (const id of ["text", "heading1", "bulletList", "codeBlock", "table", "details"]) {
+      const { editor, calls } = makeEditor();
+      run(id, editor);
+      const deleteCall = calls.find(([name]) => name === "deleteRange");
+      expect(deleteCall, `${id} left the "/" behind`).toEqual(["deleteRange", RANGE]);
+    }
+  });
+
+  it("headings carry their level, and Text resets to a paragraph", () => {
+    const h2 = makeEditor();
+    run("heading2", h2.editor);
+    expect(h2.calls).toContainEqual(["setHeading", { level: 2 }]);
+
+    const p = makeEditor();
+    run("text", p.editor);
+    expect(p.names()).toEqual(["focus", "deleteRange", "setParagraph", "run"]);
+  });
+
+  it("Table inserts a 3x3 grid with a header row", () => {
+    const { editor, calls } = makeEditor();
+    run("table", editor);
+    expect(calls).toContainEqual(["insertTable", { rows: 3, cols: 3, withHeaderRow: true }]);
+  });
+
+  it("Mermaid and Math Block are code blocks with a language, not bespoke nodes", () => {
+    const mermaid = makeEditor();
+    run("mermaid", mermaid.editor);
+    expect(mermaid.calls).toContainEqual(["setCodeBlock", { language: "mermaid" }]);
+
+    const math = makeEditor();
+    run("mathBlock", math.editor);
+    expect(math.calls).toContainEqual(["setCodeBlock", { language: "math" }]);
+  });
+
+  it("a collapsible section is inserted already open, so it can be typed into", () => {
+    const { editor, calls, names } = makeEditor();
+    run("details", editor);
+    expect(names()).toEqual(["focus", "deleteRange", "setDetails", "updateAttributes", "run"]);
+    expect(calls).toContainEqual(["updateAttributes", "details", { open: true }]);
+  });
+
+  it("Emoji hands off to the emoji popup by typing its trigger", () => {
+    const { editor, calls } = makeEditor();
+    run("emoji", editor);
+    expect(calls).toContainEqual(["insertContent", ":"]);
+  });
+
+  it("Image prompts for a URL only when no upload handler is wired", () => {
+    promptSpy.mockReturnValue("https://example.com/a.png");
+    const { editor, calls } = makeEditor();
+
+    run("image", editor);
+
+    expect(promptSpy).toHaveBeenCalled();
+    expect(calls).toContainEqual(["deleteRange", RANGE]);
+    expect(calls).toContainEqual(["setImage", { src: "https://example.com/a.png" }]);
+  });
+
+  it("a dismissed URL prompt inserts nothing", () => {
+    promptSpy.mockReturnValue(null);
+    const { editor, calls } = makeEditor();
+
+    run("image", editor);
+
+    expect(calls).toEqual([]);
+  });
+
+  it("Image opens the file picker instead of prompting when an upload handler exists", () => {
+    const onImageUpload = vi.fn(async () => "https://cdn.example.com/x.png");
+    const { editor, calls } = makeEditor({ mediaUpload: { handlers: { onImageUpload } } });
+
+    run("image", editor);
+
+    expect(promptSpy).not.toHaveBeenCalled();
+    // the picker is opened and nothing is inserted until a file comes back
+    expect(calls).toEqual([]);
+  });
+});

package/src/toolbar/CodeBlockBubble.spec.tsx

@@ -0,0 +1,219 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { act, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+
+const bubble = vi.hoisted(() => ({ props: null as Record<string, any> | null }));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: (props: any) => {
+    bubble.props = props;
+    return <div data-testid="bubble-menu">{props.children}</div>;
+  },
+}));
+
+// The language list lives inside a Popover, which never mounts its content in
+// a headless DOM. Flatten the popover so the list is inspectable.
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, any>>();
+  const Popover: any = ({ children }: any) => <>{children}</>;
+  Popover.Trigger = ({ children }: any) => <>{children}</>;
+  return { ...actual, Popover };
+});
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ children }: any) => children,
+  PopoverContent: ({ children }: any) => <div data-testid="language-menu">{children}</div>,
+}));
+
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Button: (props: any) => (
+    <button role="button" aria-label={props["aria-label"]} onClick={props.onPress}>
+      {props.children}
+    </button>
+  ),
+}));
+
+const { CodeBlockBubble } = await import("./CodeBlockBubble");
+
+function makeEditor(
+  opts: { language?: string | null; code?: string; active?: boolean; attrs?: unknown } = {},
+) {
+  const { language = null, code = "const a = 1;", active = true } = opts;
+  const calls: Array<[string, ...unknown[]]> = [];
+  const chain: any = new Proxy(
+    {},
+    {
+      get:
+        (_target, prop: string) =>
+        (...args: unknown[]) => {
+          calls.push([prop, ...args]);
+          return chain;
+        },
+    },
+  );
+  const codeBlockNode = { type: { name: "codeBlock" }, textContent: code };
+  const docNode = { type: { name: "doc" }, textContent: "outer" };
+  const editor = {
+    chain: () => chain,
+    getAttributes: (name: string) =>
+      "attrs" in opts ? (opts.attrs as any) : name === "codeBlock" ? { language } : {},
+    isActive: (name: string) => name === "codeBlock" && active,
+    state: {
+      selection: { $from: { depth: 1, node: (d: number) => (d === 1 ? codeBlockNode : docNode) } },
+    },
+  } as any;
+  return { editor, calls, names: () => calls.map((c) => c[0]) };
+}
+
+function render(editor: any) {
+  return renderWithProviders(
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      <CodeBlockBubble editor={editor} />
+    </RichEditorContext.Provider>,
+  );
+}
+
+function labelOf(container: HTMLElement, selector: string) {
+  return container.querySelector(selector)?.getAttribute("aria-label");
+}
+
+function menuLabels(container: HTMLElement) {
+  const menu = container.querySelector('[data-testid="language-menu"]');
+  if (!menu) throw new Error("language menu did not render");
+  return Array.from(menu.querySelectorAll("[aria-label]")).map((el) =>
+    el.getAttribute("aria-label"),
+  );
+}
+
+describe("CodeBlockBubble", () => {
+  let writeText: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    writeText = vi.fn(() => Promise.resolve());
+    Object.defineProperty(globalThis.navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders nothing at all without an editor", () => {
+    const { container } = render(null);
+    expect(container.textContent).toBe("");
+  });
+
+  it("shows itself only while the caret is inside a code block", () => {
+    const inside = makeEditor({ active: true });
+    render(inside.editor);
+    expect(bubble.props?.shouldShow({ editor: inside.editor })).toBe(true);
+
+    const outside = makeEditor({ active: false });
+    render(outside.editor);
+    expect(bubble.props?.shouldShow({ editor: outside.editor })).toBe(false);
+  });
+
+  it("anchors to the block rect, not the caret, so it does not chase typing", () => {
+    render(makeEditor().editor);
+    expect(typeof bubble.props?.getReferencedVirtualElement).toBe("function");
+    expect(bubble.props?.options).toMatchObject({ placement: "top-start" });
+  });
+
+  it("labels a null language as Plain text", () => {
+    const { container } = render(makeEditor({ language: null }).editor);
+    expect(container.querySelector('[aria-label="Select language"]')?.textContent).toBe(
+      "Plain text",
+    );
+  });
+
+  it("labels a known language with its catalog label, not its attribute value", () => {
+    const { container } = render(makeEditor({ language: "typescript" }).editor);
+    const trigger = container.querySelector('[aria-label="Select language"]');
+    expect(trigger?.textContent).toBe("TypeScript");
+    expect(trigger?.textContent).not.toBe("typescript");
+  });
+
+  it("falls back to the raw attribute for a language the catalog does not know", () => {
+    const { container } = render(makeEditor({ language: "brainfuck" }).editor);
+    const trigger = container.querySelector('[aria-label="Select language"]');
+    expect(trigger?.textContent).toBe("brainfuck");
+  });
+
+  it("falls back to Plain text when the node carries no language attribute at all", () => {
+    const { container } = render(makeEditor({ attrs: undefined }).editor);
+    const trigger = container.querySelector('[aria-label="Select language"]');
+    expect(trigger?.textContent).toBe("Plain text");
+  });
+
+  it("offers a language list headed by Plain text", () => {
+    const { container } = render(makeEditor().editor);
+    const labels = menuLabels(container);
+    expect(labels[0]).toBe("Plain text");
+    for (const label of ["TypeScript", "Python", "SQL", "Mermaid", "Math (TeX)"]) {
+      expect(labels).toContain(label);
+    }
+  });
+
+  it("picking a language writes it onto the node; picking Plain text clears it to null", () => {
+    const picked = makeEditor({ language: null });
+    const { container } = render(picked.editor);
+    const menu = container.querySelector('[data-testid="language-menu"]') as HTMLElement;
+
+    fireEvent.click(menu.querySelector('[aria-label="Python"]')!);
+    expect(picked.names()).toEqual(["focus", "updateAttributes", "run"]);
+    expect(picked.calls[1]).toEqual(["updateAttributes", "codeBlock", { language: "python" }]);
+
+    const cleared = makeEditor({ language: "python" });
+    const { container: c2 } = render(cleared.editor);
+    const menu2 = c2.querySelector('[data-testid="language-menu"]') as HTMLElement;
+    fireEvent.click(menu2.querySelector('[aria-label="Plain text"]')!);
+    expect(cleared.calls[1]).toEqual(["updateAttributes", "codeBlock", { language: null }]);
+  });
+
+  it("copies the text of the code block the caret is in, and says so for 1.5s", async () => {
+    vi.useFakeTimers();
+    const { container } = render(makeEditor({ code: "print('hi')" }).editor);
+
+    await act(async () => {
+      fireEvent.click(container.querySelector('[aria-label="Copy code"]')!);
+    });
+
+    expect(writeText).toHaveBeenCalledWith("print('hi')");
+    expect(labelOf(container, '[aria-label="Copied"]')).toBe("Copied");
+
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+    expect(container.querySelector('[aria-label="Copied"]')).toBeNull();
+    expect(container.querySelector('[aria-label="Copy code"]')).toBeTruthy();
+  });
+
+  it("a rejected clipboard write warns and leaves the label alone", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    writeText.mockRejectedValueOnce(new Error("denied"));
+    const { container } = render(makeEditor().editor);
+
+    await act(async () => {
+      fireEvent.click(container.querySelector('[aria-label="Copy code"]')!);
+    });
+
+    expect(warn).toHaveBeenCalled();
+    expect(container.querySelector('[aria-label="Copied"]')).toBeNull();
+    warn.mockRestore();
+  });
+
+  it("remove toggles the code block off rather than deleting the selection", () => {
+    const { editor, names, calls } = makeEditor();
+    const { container } = render(editor);
+
+    fireEvent.click(container.querySelector('[aria-label="Remove code block"]')!);
+    expect(names()).toEqual(["focus", "toggleCodeBlock", "run"]);
+    expect(calls.some(([n]) => n === "deleteSelection")).toBe(false);
+  });
+});

package/src/toolbar/ImageBubble.spec.tsx

@@ -0,0 +1,140 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+
+const bubble = vi.hoisted(() => ({ props: null as Record<string, any> | null }));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: (props: any) => {
+    bubble.props = props;
+    return <div data-testid="bubble-menu">{props.children}</div>;
+  },
+}));
+
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Button: (props: any) => (
+    <button role="button" aria-label={props["aria-label"]} onClick={props.onPress}>
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ children }: any) => children,
+}));
+
+const { ImageBubble } = await import("./ImageBubble");
+
+/** Records every link in the command chain so an assertion can read the whole call. */
+function makeEditor(attrs: Record<string, unknown> = {}, active = true) {
+  const calls: Array<[string, ...unknown[]]> = [];
+  const chain: any = new Proxy(
+    {},
+    {
+      get:
+        (_target, prop: string) =>
+        (...args: unknown[]) => {
+          calls.push([prop, ...args]);
+          return chain;
+        },
+    },
+  );
+  const editor = {
+    chain: () => chain,
+    getAttributes: (name: string) => (name === "image" ? attrs : {}),
+    isActive: (name: string) => name === "image" && active,
+  } as any;
+  return { editor, calls, names: () => calls.map((c) => c[0]) };
+}
+
+function render(editor: any) {
+  return renderWithProviders(
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      <ImageBubble editor={editor} />
+    </RichEditorContext.Provider>,
+  );
+}
+
+function press(container: HTMLElement, label: string) {
+  const el = container.querySelector(`[aria-label="${label}"]`);
+  if (!el) throw new Error(`no control labelled "${label}"`);
+  fireEvent.click(el);
+  return el;
+}
+
+describe("ImageBubble", () => {
+  it("renders nothing at all without an editor", () => {
+    const { container } = render(null);
+    expect(container.textContent).toBe("");
+    expect(container.querySelector('[data-testid="bubble-menu"]')).toBeNull();
+  });
+
+  it("shows itself only while an image node is selected", () => {
+    const onImage = makeEditor({ src: "a.png" }, true);
+    render(onImage.editor);
+    expect(bubble.props?.shouldShow({ editor: onImage.editor })).toBe(true);
+
+    const offImage = makeEditor({}, false);
+    render(offImage.editor);
+    expect(bubble.props?.shouldShow({ editor: offImage.editor })).toBe(false);
+  });
+
+  it("shows the image's alt text, and says so plainly when there is none", () => {
+    const withAlt = render(makeEditor({ alt: "A red bicycle" }).editor);
+    expect(withAlt.getByText("A red bicycle")).toBeTruthy();
+
+    const withoutAlt = render(makeEditor({ src: "a.png" }).editor);
+    expect(withoutAlt.getByText("No alt text")).toBeTruthy();
+  });
+
+  it("prefills the editing field with the alt text already on the node", () => {
+    const { container, getByText } = render(makeEditor({ alt: "A red bicycle" }).editor);
+    press(container, "Edit alt text");
+
+    expect(getByText("Alt text")).toBeTruthy();
+    const input = container.querySelector("input") as HTMLInputElement;
+    expect(input.value).toBe("A red bicycle");
+  });
+
+  it("writes the edited alt text back onto the image node and leaves editing", () => {
+    const { editor, calls, names } = makeEditor({ alt: "old" });
+    const { container, queryByText } = render(editor);
+
+    press(container, "Edit alt text");
+    fireEvent.change(container.querySelector("input") as HTMLInputElement, {
+      target: { value: "new alt" },
+    });
+    press(container, "Save alt text");
+
+    expect(names()).toEqual(["focus", "updateAttributes", "run"]);
+    expect(calls[1]).toEqual(["updateAttributes", "image", { alt: "new alt" }]);
+    expect(queryByText("Alt text")).toBeNull();
+  });
+
+  it("cancel leaves editing without touching the document", () => {
+    const { editor, calls } = makeEditor({ alt: "old" });
+    const { container, queryByText, getByText } = render(editor);
+
+    press(container, "Edit alt text");
+    fireEvent.change(container.querySelector("input") as HTMLInputElement, {
+      target: { value: "discarded" },
+    });
+    press(container, "Cancel");
+
+    expect(calls).toEqual([]);
+    expect(queryByText("Alt text")).toBeNull();
+    expect(getByText("old")).toBeTruthy();
+  });
+
+  it("delete removes the selected node rather than clearing its attributes", () => {
+    const { editor, calls, names } = makeEditor({ alt: "old" });
+    const { container } = render(editor);
+
+    press(container, "Delete image");
+    expect(names()).toEqual(["focus", "deleteSelection", "run"]);
+    expect(calls.some(([name]) => name === "updateAttributes")).toBe(false);
+  });
+});

package/src/toolbar/LinkBubble.spec.tsx

@@ -0,0 +1,159 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+
+const bubble = vi.hoisted(() => ({ props: null as Record<string, any> | null }));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: (props: any) => {
+    bubble.props = props;
+    return <div data-testid="bubble-menu">{props.children}</div>;
+  },
+}));
+
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Button: (props: any) => (
+    <button role="button" aria-label={props["aria-label"]} onClick={props.onPress}>
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ children }: any) => children,
+}));
+
+const { LinkBubble } = await import("./LinkBubble");
+
+function makeEditor(attrs: Record<string, unknown> = {}, active = true) {
+  const calls: Array<[string, ...unknown[]]> = [];
+  const chain: any = new Proxy(
+    {},
+    {
+      get:
+        (_target, prop: string) =>
+        (...args: unknown[]) => {
+          calls.push([prop, ...args]);
+          return chain;
+        },
+    },
+  );
+  const editor = {
+    chain: () => chain,
+    getAttributes: (name: string) => (name === "link" ? attrs : {}),
+    isActive: (name: string) => name === "link" && active,
+  } as any;
+  return { editor, calls, names: () => calls.map((c) => c[0]) };
+}
+
+function render(editor: any) {
+  return renderWithProviders(
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      <LinkBubble editor={editor} />
+    </RichEditorContext.Provider>,
+  );
+}
+
+function press(container: HTMLElement, label: string) {
+  const el = container.querySelector(`[aria-label="${label}"]`);
+  if (!el) throw new Error(`no control labelled "${label}"`);
+  fireEvent.click(el);
+  return el;
+}
+
+describe("LinkBubble", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders nothing at all without an editor", () => {
+    const { container } = render(null);
+    expect(container.textContent).toBe("");
+  });
+
+  it("shows itself only while the caret is on a link", () => {
+    const onLink = makeEditor({ href: "https://example.com" }, true);
+    render(onLink.editor);
+    expect(bubble.props?.shouldShow({ editor: onLink.editor })).toBe(true);
+
+    const offLink = makeEditor({}, false);
+    render(offLink.editor);
+    expect(bubble.props?.shouldShow({ editor: offLink.editor })).toBe(false);
+  });
+
+  it("shows the href, and says so plainly when the mark carries none", () => {
+    const withHref = render(makeEditor({ href: "https://example.com/a" }).editor);
+    expect(withHref.getByText("https://example.com/a")).toBeTruthy();
+
+    const withoutHref = render(makeEditor({}).editor);
+    expect(withoutHref.getByText("No URL")).toBeTruthy();
+  });
+
+  it("opens the href in a new tab with noopener, from both the label and the button", () => {
+    const open = vi.spyOn(window, "open").mockImplementation(() => null);
+    const { container, getByText } = render(makeEditor({ href: "https://example.com" }).editor);
+
+    fireEvent.click(getByText("https://example.com"));
+    press(container, "Open link");
+
+    expect(open).toHaveBeenCalledTimes(2);
+    expect(open).toHaveBeenCalledWith("https://example.com", "_blank", "noopener,noreferrer");
+  });
+
+  it("does not open a window when there is no href to open", () => {
+    const open = vi.spyOn(window, "open").mockImplementation(() => null);
+    const { container } = render(makeEditor({}).editor);
+
+    press(container, "Open link");
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it("prefills the edit field with the current href", () => {
+    const { container } = render(makeEditor({ href: "https://example.com" }).editor);
+    press(container, "Edit link");
+    expect((container.querySelector("input") as HTMLInputElement).value).toBe(
+      "https://example.com",
+    );
+  });
+
+  it("saves over the whole mark range, with the value trimmed", () => {
+    const { editor, calls, names } = makeEditor({ href: "https://old.example" });
+    const { container } = render(editor);
+
+    press(container, "Edit link");
+    fireEvent.change(container.querySelector("input") as HTMLInputElement, {
+      target: { value: "  https://new.example  " },
+    });
+    press(container, "Save link");
+
+    expect(names()).toEqual(["focus", "extendMarkRange", "setLink", "run"]);
+    expect(calls[1]).toEqual(["extendMarkRange", "link"]);
+    expect(calls[2]).toEqual(["setLink", { href: "https://new.example" }]);
+  });
+
+  it("refuses to save a blank href, and still closes the editor", () => {
+    const { editor, calls } = makeEditor({ href: "https://old.example" });
+    const { container, getByText } = render(editor);
+
+    press(container, "Edit link");
+    fireEvent.change(container.querySelector("input") as HTMLInputElement, {
+      target: { value: "   " },
+    });
+    press(container, "Save link");
+
+    expect(calls).toEqual([]);
+    expect(getByText("https://old.example")).toBeTruthy();
+  });
+
+  it("unlinks over the whole mark range rather than the selection alone", () => {
+    const { editor, calls, names } = makeEditor({ href: "https://example.com" });
+    const { container } = render(editor);
+
+    press(container, "Remove link");
+    expect(names()).toEqual(["focus", "extendMarkRange", "unsetLink", "run"]);
+    expect(calls[1]).toEqual(["extendMarkRange", "link"]);
+  });
+});

package/src/toolbar/ResizeHandle.spec.tsx

@@ -0,0 +1,118 @@
+import { createRef } from "react";
+import { describe, expect, it, beforeEach } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { ResizeHandle } from "./ResizeHandle";
+
+/** The handle drives a real element, so give it one with a measurable height. */
+function makeContainer(height: number) {
+  const el = document.createElement("div");
+  el.getBoundingClientRect = () => ({ height }) as DOMRect;
+  document.body.appendChild(el);
+  const ref = createRef<HTMLElement>();
+  (ref as { current: HTMLElement | null }).current = el;
+  return { el, ref };
+}
+
+function grab(container: HTMLElement) {
+  const handle = container.querySelector('[role="separator"]');
+  if (!handle) throw new Error("resize handle did not render");
+  return handle;
+}
+
+function drag(handle: Element, fromY: number, toY: number) {
+  fireEvent.mouseDown(handle, { clientY: fromY });
+  document.dispatchEvent(new MouseEvent("mousemove", { clientY: toY }));
+}
+
+describe("ResizeHandle", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  });
+
+  it("exposes itself to assistive tech as a labelled separator", () => {
+    const { ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+    const handle = grab(container);
+    expect(handle.getAttribute("aria-label")).toBe("Resize editor");
+  });
+
+  it("adds the drag delta to the height the container had when the drag started", () => {
+    const { el, ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+
+    drag(grab(container), 100, 180);
+    expect(el.style.height).toBe("380px");
+  });
+
+  it("shrinks on an upward drag, and floors at minHeight (default 150)", () => {
+    const { el, ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+    const handle = grab(container);
+
+    drag(handle, 100, 60);
+    expect(el.style.height).toBe("260px");
+
+    document.dispatchEvent(new MouseEvent("mousemove", { clientY: -500 }));
+    expect(el.style.height).toBe("150px");
+  });
+
+  it("honours an explicit minHeight over the default", () => {
+    const { el, ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} minHeight={220} />);
+
+    drag(grab(container), 100, -900);
+    expect(el.style.height).toBe("220px");
+  });
+
+  it("caps at maxHeight when one is given, and does not cap when it is omitted", () => {
+    const capped = makeContainer(300);
+    const { container: cappedDom } = renderWithProviders(
+      <ResizeHandle containerRef={capped.ref} maxHeight={400} />,
+    );
+    drag(grab(cappedDom), 100, 900);
+    expect(capped.el.style.height).toBe("400px");
+
+    document.dispatchEvent(new MouseEvent("mouseup"));
+
+    const free = makeContainer(300);
+    const { container: freeDom } = renderWithProviders(<ResizeHandle containerRef={free.ref} />);
+    drag(grab(freeDom), 100, 900);
+    expect(free.el.style.height).toBe("1100px");
+  });
+
+  it("locks the page cursor and selection for the length of the drag only", () => {
+    const { ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+
+    fireEvent.mouseDown(grab(container), { clientY: 100 });
+    expect(document.body.style.cursor).toBe("ns-resize");
+    expect(document.body.style.userSelect).toBe("none");
+
+    document.dispatchEvent(new MouseEvent("mouseup"));
+    expect(document.body.style.cursor).toBe("");
+    expect(document.body.style.userSelect).toBe("");
+  });
+
+  it("stops resizing after mouseup, so a later pointer move is inert", () => {
+    const { el, ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+
+    drag(grab(container), 100, 200);
+    expect(el.style.height).toBe("400px");
+
+    document.dispatchEvent(new MouseEvent("mouseup"));
+    document.dispatchEvent(new MouseEvent("mousemove", { clientY: 900 }));
+    expect(el.style.height).toBe("400px");
+  });
+
+  it("is a no-op while the container ref is still empty", () => {
+    const ref = createRef<HTMLElement>();
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+
+    fireEvent.mouseDown(grab(container), { clientY: 100 });
+    expect(document.body.style.cursor).toBe("");
+  });
+});

package/src/toolbar/StatusBar.spec.tsx

@@ -0,0 +1,100 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+import { defaultEditorState } from "../types";
+import type { EditorState } from "../types";
+import { StatusBar } from "./StatusBar";
+
+function withContext(ui: React.ReactElement) {
+  return (
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      {ui}
+    </RichEditorContext.Provider>
+  );
+}
+
+function stateWith(counts: Partial<EditorState>): EditorState {
+  return { ...defaultEditorState, ...counts };
+}
+
+describe("StatusBar", () => {
+  it("offers both editor modes as pressable labels", () => {
+    const { getByText } = renderWithProviders(
+      withContext(<StatusBar state={defaultEditorState} mode="richtext" onModeChange={() => {}} />),
+    );
+    expect(getByText("Rich text")).toBeTruthy();
+    expect(getByText("Markdown")).toBeTruthy();
+  });
+
+  it("reports the mode the user picked, not the mode it is already in", () => {
+    const onModeChange = vi.fn();
+    const { getByText } = renderWithProviders(
+      withContext(
+        <StatusBar state={defaultEditorState} mode="richtext" onModeChange={onModeChange} />,
+      ),
+    );
+
+    fireEvent.click(getByText("Markdown"));
+    expect(onModeChange).toHaveBeenCalledWith("markdown");
+
+    fireEvent.click(getByText("Rich text"));
+    expect(onModeChange).toHaveBeenLastCalledWith("richtext");
+    expect(onModeChange).toHaveBeenCalledTimes(2);
+  });
+
+  it("marks the active mode, and swaps the marking when the mode changes", () => {
+    const { getByText, rerender } = renderWithProviders(
+      withContext(<StatusBar state={defaultEditorState} mode="richtext" onModeChange={() => {}} />),
+    );
+    // Tamagui compiles the weight/colour props to class tokens, so the
+    // rendered class list is where "active" is actually observable.
+    const classesOf = (label: string) => (getByText(label) as HTMLElement).className;
+
+    const activeClasses = classesOf("Rich text");
+    const idleClasses = classesOf("Markdown");
+    expect(activeClasses).not.toBe(idleClasses);
+    expect(activeClasses).toContain("_fow-600");
+    expect(idleClasses).toContain("_fow-400");
+
+    rerender(
+      withContext(<StatusBar state={defaultEditorState} mode="markdown" onModeChange={() => {}} />),
+    );
+    expect(classesOf("Markdown")).toBe(activeClasses);
+    expect(classesOf("Rich text")).toBe(idleClasses);
+  });
+
+  it("singularises exactly at one word and one character", () => {
+    const { getByText } = renderWithProviders(
+      withContext(
+        <StatusBar
+          state={stateWith({ wordCount: 1, characterCount: 1 })}
+          mode="richtext"
+          onModeChange={() => {}}
+        />,
+      ),
+    );
+    expect(getByText("1 word")).toBeTruthy();
+    expect(getByText("1 character")).toBeTruthy();
+  });
+
+  it("pluralises at zero as well as at many", () => {
+    const { getByText, rerender } = renderWithProviders(
+      withContext(<StatusBar state={defaultEditorState} mode="richtext" onModeChange={() => {}} />),
+    );
+    expect(getByText("0 words")).toBeTruthy();
+    expect(getByText("0 characters")).toBeTruthy();
+
+    rerender(
+      withContext(
+        <StatusBar
+          state={stateWith({ wordCount: 42, characterCount: 240 })}
+          mode="richtext"
+          onModeChange={() => {}}
+        />,
+      ),
+    );
+    expect(getByText("42 words")).toBeTruthy();
+    expect(getByText("240 characters")).toBeTruthy();
+  });
+});

package/src/toolbar/TableBubble.spec.tsx

@@ -0,0 +1,189 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+import type { EditorCapabilities } from "../types";
+
+const bubble = vi.hoisted(() => ({ props: null as Record<string, any> | null }));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: (props: any) => {
+    bubble.props = props;
+    return <div data-testid="bubble-menu">{props.children}</div>;
+  },
+}));
+
+// The table menu lives inside a Popover, which never mounts its content in a
+// headless DOM. Flatten the popover so the menu is inspectable; nothing else
+// about tamagui is replaced.
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, any>>();
+  const Popover: any = ({ children }: any) => <>{children}</>;
+  Popover.Trigger = ({ children }: any) => <>{children}</>;
+  return { ...actual, Popover };
+});
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ children }: any) => children,
+  PopoverContent: ({ children }: any) => <div data-testid="table-menu">{children}</div>,
+}));
+
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Button: (props: any) => (
+    <button role="button" aria-label={props["aria-label"]} onClick={props.onPress}>
+      {props.children}
+    </button>
+  ),
+}));
+
+const { TableBubble } = await import("./TableBubble");
+
+function makeEditor(active = true) {
+  const calls: Array<[string, ...unknown[]]> = [];
+  const chain: any = new Proxy(
+    {},
+    {
+      get:
+        (_target, prop: string) =>
+        (...args: unknown[]) => {
+          calls.push([prop, ...args]);
+          return chain;
+        },
+    },
+  );
+  const editor = {
+    chain: () => chain,
+    getAttributes: () => ({}),
+    isActive: (name: string) => name === "table" && active,
+  } as any;
+  return { editor, calls, names: () => calls.map((c) => c[0]) };
+}
+
+function render(editor: any, capabilities?: EditorCapabilities) {
+  return renderWithProviders(
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      <TableBubble editor={editor} capabilities={capabilities} />
+    </RichEditorContext.Provider>,
+  );
+}
+
+/** Labels of the items inside the Table dropdown, in document order. */
+function menuLabels(container: HTMLElement) {
+  const menu = container.querySelector('[data-testid="table-menu"]');
+  if (!menu) throw new Error("table menu did not render");
+  return Array.from(menu.querySelectorAll("[aria-label]")).map((el) =>
+    el.getAttribute("aria-label"),
+  );
+}
+
+function pressInMenu(container: HTMLElement, label: string) {
+  const menu = container.querySelector('[data-testid="table-menu"]') as HTMLElement;
+  const el = menu.querySelector(`[aria-label="${label}"]`);
+  if (!el) throw new Error(`no menu item labelled "${label}"`);
+  fireEvent.click(el);
+}
+
+const ROW_AND_COLUMN = [
+  "Add row above",
+  "Add row below",
+  "Delete row",
+  "Add column before",
+  "Add column after",
+  "Delete column",
+];
+
+describe("TableBubble", () => {
+  it("renders nothing at all without an editor", () => {
+    const { container } = render(null);
+    expect(container.textContent).toBe("");
+  });
+
+  it("shows itself only while the caret is inside a table", () => {
+    const inTable = makeEditor(true);
+    render(inTable.editor);
+    expect(bubble.props?.shouldShow({ editor: inTable.editor })).toBe(true);
+
+    const outside = makeEditor(false);
+    render(outside.editor);
+    expect(bubble.props?.shouldShow({ editor: outside.editor })).toBe(false);
+  });
+
+  it("anchors to the table rect, not the caret, so it cannot cover the first row", () => {
+    const { editor } = makeEditor();
+    render(editor);
+    expect(typeof bubble.props?.getReferencedVirtualElement).toBe("function");
+    expect(bubble.props?.options).toMatchObject({ placement: "top-start" });
+  });
+
+  // LC-52: GFM pipe tables are plain grids, so merge and split have no
+  // markdown form. The markdown capability must drop exactly those two.
+  it("markdown capability removes exactly mergeCells and splitCell", () => {
+    const { container } = render(makeEditor().editor, "markdown");
+    const labels = menuLabels(container);
+
+    expect(labels).not.toContain("Merge cells");
+    expect(labels).not.toContain("Split cell");
+    expect(labels).toContain("Toggle header row");
+    expect(labels).toContain("Delete table");
+  });
+
+  it("full capability keeps all four table actions", () => {
+    const { container } = render(makeEditor().editor, "full");
+    const labels = menuLabels(container);
+
+    expect(labels).toContain("Toggle header row");
+    expect(labels).toContain("Merge cells");
+    expect(labels).toContain("Split cell");
+    expect(labels).toContain("Delete table");
+  });
+
+  it("defaults to the full surface when no capability is passed", () => {
+    const { container } = render(makeEditor().editor);
+    expect(menuLabels(container)).toEqual(
+      menuLabels(render(makeEditor().editor, "full").container),
+    );
+  });
+
+  it("the capability filter touches table actions only — every row and column action survives", () => {
+    const full = menuLabels(render(makeEditor().editor, "full").container);
+    const markdown = menuLabels(render(makeEditor().editor, "markdown").container);
+
+    for (const label of ROW_AND_COLUMN) {
+      expect(full).toContain(label);
+      expect(markdown).toContain(label);
+    }
+    expect(full.length - markdown.length).toBe(2);
+  });
+
+  it("the quick buttons add after the current row and column, not before", () => {
+    const { editor, names } = makeEditor();
+    const { container } = render(editor);
+
+    fireEvent.click(container.querySelector('[aria-label="Add row"]')!);
+    expect(names()).toEqual(["focus", "addRowAfter", "run"]);
+
+    fireEvent.click(container.querySelector('[aria-label="Add column"]')!);
+    expect(names()).toEqual(["focus", "addRowAfter", "run", "focus", "addColumnAfter", "run"]);
+  });
+
+  it("each menu item runs its own command", () => {
+    const cases: Array<[string, string]> = [
+      ["Add row above", "addRowBefore"],
+      ["Delete row", "deleteRow"],
+      ["Add column before", "addColumnBefore"],
+      ["Delete column", "deleteColumn"],
+      ["Toggle header row", "toggleHeaderRow"],
+      ["Merge cells", "mergeCells"],
+      ["Split cell", "splitCell"],
+    ];
+
+    for (const [label, command] of cases) {
+      const { editor, names } = makeEditor();
+      const { container } = render(editor, "full");
+      pressInMenu(container, label);
+      expect(names()).toEqual(["focus", command, "run"]);
+    }
+  });
+});