@multiplatform.one/rich-text 6.0.4 → 6.3.0

package/src/editor/tiptapEditor.spec.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Button: (props: any) => (
     <button
       role="button"
@@ -13,7 +14,8 @@ vi.mock("@multiplatform.one/forms", () => ({
   ),
 }));
 
-vi.mock("@multiplatform.one/components", () => ({
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Tooltip: ({ children }: any) => children,
 }));
 
@@ -39,6 +41,10 @@ const mockEditor = {
     blur: vi.fn(),
   },
   setEditable: vi.fn(),
+  storage: {
+    mediaUpload: { handlers: {} },
+    suggestionChrome: { value: null },
+  },
 };
 
 vi.mock("@tiptap/react", () => ({
@@ -127,18 +133,19 @@ describe("TiptapEditor", () => {
     expect(container.querySelector("[data-testid='editor-content']")).toBeTruthy();
   });
 
-  it("renders BubbleToolbar when showBubbleToolbar is true and does not when false", () => {
-    // With showBubbleToolbar={true}
+  it("gates the formatting bubbles behind showBubbleToolbar (math bubble stays)", () => {
+    // With showBubbleToolbar={true}: formatting bubbles + math bubble
     const { container: withBubble } = renderWithProviders(
       withContext(<TiptapEditor showBubbleToolbar />),
     );
-    expect(withBubble.querySelector("[data-testid='bubble-menu']")).toBeTruthy();
+    expect(withBubble.querySelectorAll("[data-testid='bubble-menu']").length).toBeGreaterThan(1);
 
-    // With showBubbleToolbar={false} (default)
+    // With showBubbleToolbar={false} (default): only the MathBubble stays
+    // mounted — it is the only edit path for inline math atoms.
     const { container: withoutBubble } = renderWithProviders(
       withContext(<TiptapEditor showBubbleToolbar={false} />),
     );
-    expect(withoutBubble.querySelector("[data-testid='bubble-menu']")).toBeNull();
+    expect(withoutBubble.querySelectorAll("[data-testid='bubble-menu']").length).toBe(1);
   });
 
   it("exposes RichEditorRef methods via forwardRef and useImperativeHandle", () => {
@@ -164,6 +171,6 @@ describe("TiptapEditor", () => {
     const cssContent = styleTag?.textContent ?? "";
     // Should use CSS custom properties for theme-aware colors
     expect(cssContent).toContain("var(--color12)");
-    expect(cssContent).toContain("var(--color8");
+    expect(cssContent).toContain("var(--color10");
   });
 });

package/src/exports.spec.ts

@@ -4,7 +4,8 @@ import { describe, it, expect, vi } from "vitest";
 // Mocks -- must come before imports to prevent Tiptap module errors
 // ---------------------------------------------------------------------------
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Field: () => null,
   FieldLayout: ({ children }: any) => children,
   Skeleton: () => null,
@@ -35,7 +36,8 @@ vi.mock("@multiplatform.one/components", () => ({
   Tooltip: ({ children }: any) => children,
 }));
 
-vi.mock("@multiplatform.one/theme", () => ({
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   useResolvedKnobs: () => ({
     knobProps: {
       body: {},

package/src/index.ts

@@ -10,4 +10,10 @@ export type { RichEditorCombinedProps } from "./RichEditor";
 export { RichTextEditor } from "./RichTextEditor";
 export type { RichTextEditorProps } from "./RichTextEditor";
 
-export type { RichEditorRef, RichEditorProps, EditorCommand, EditorState } from "./types";
+export type {
+  RichEditorRef,
+  RichEditorProps,
+  EditorCommand,
+  EditorState,
+  RichTextMentionOptions,
+} from "./types";

package/src/integration.spec.tsx

@@ -59,11 +59,13 @@ describe("getEditorCSS defaults", () => {
 // 3. ToolbarButton disabled state from context
 // ===========================================================================
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Button: (props: any) => (
     <button
       role="button"
       aria-label={props["aria-label"]}
+      aria-disabled={props["aria-disabled"]}
       disabled={props.disabled}
       onClick={props.onPress}
       data-active={props.theme === "active" ? "true" : undefined}
@@ -117,7 +119,7 @@ vi.mock("@multiplatform.one/forms", () => ({
     isEmpty?: (v: unknown) => boolean,
   ) => {
     if (!required) return validators;
-    const check = isEmpty || ((v: unknown) => v == null || v === "");
+    const check = isEmpty || ((v: unknown) => v === null || v === undefined || v === "");
     const requiredValidator = ({ value }: { value: unknown }) =>
       check(value)
         ? `${typeof label === "string" ? label : name || "Field"} is required`
@@ -142,11 +144,13 @@ vi.mock("@multiplatform.one/forms", () => ({
   },
 }));
 
-vi.mock("@multiplatform.one/components", () => ({
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Tooltip: ({ children }: any) => children,
 }));
 
-vi.mock("@multiplatform.one/theme", () => ({
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   useResolvedKnobs: () => ({
     knobProps: {
       body: {},
@@ -189,6 +193,10 @@ const mockEditor = {
     blur: vi.fn(),
   },
   setEditable: vi.fn(),
+  storage: {
+    mediaUpload: { handlers: {} },
+    suggestionChrome: { value: null },
+  },
 };
 
 vi.mock("@tiptap/react", () => ({
@@ -225,6 +233,7 @@ vi.mock("@tiptap/extension-image", () => ({
 }));
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
 import { RichEditorContext } from "./context";
 import { defaultEditorState } from "./types";
 import type { EditorCommand, EditorState, ToolbarSection } from "./types";
@@ -236,15 +245,21 @@ const { RichTextEditor } = await import("./RichTextEditor/index");
 
 describe("ToolbarButton disabled state from context", () => {
   it("inherits disabled state from RichEditorContext", () => {
+    const onPress = vi.fn();
     const { getByRole } = renderWithProviders(
       <RichEditorContext.Provider size="$true" compact={false} disabled>
-        <ToolbarButton onPress={() => {}} aria-label="Test">
+        <ToolbarButton onPress={onPress} aria-label="Test">
           T
         </ToolbarButton>
       </RichEditorContext.Provider>,
     );
     const button = getByRole("button");
-    expect(button.getAttribute("disabled")).not.toBeNull();
+    // DG-ST-03 / LC-40: an unavailable toolbar action is aria-disabled
+    // (stays focusable, swallows presses), never bare-`disabled`.
+    expect(button.getAttribute("aria-disabled")).toBe("true");
+    expect(button.getAttribute("disabled")).toBeNull();
+    fireEvent.click(button);
+    expect(onPress).not.toHaveBeenCalled();
   });
 });
 
@@ -394,6 +409,17 @@ describe("NATIVE_SUPPORTED_COMMANDS completeness", () => {
       "highlight",
       "horizontalRule",
       "clearFormatting",
+      "insertTable",
+      "addColumnBefore",
+      "addColumnAfter",
+      "deleteColumn",
+      "addRowBefore",
+      "addRowAfter",
+      "deleteRow",
+      "deleteTable",
+      "mergeCells",
+      "splitCell",
+      "toggleHeaderRow",
     ];
 
     for (const cmd of allCommands) {
@@ -421,10 +447,13 @@ describe("RichEditor passes showBubbleToolbar to TiptapEditor", () => {
     expect(bubbleMenu).toBeTruthy();
   });
 
-  it("does not render BubbleMenu when showBubbleToolbar is false", () => {
+  it("renders only the always-on MathBubble when showBubbleToolbar is false", () => {
     const { container } = renderWithProviders(<RichEditor showBubbleToolbar={false} />);
 
-    const bubbleMenu = container.querySelector("[data-testid='bubble-menu']");
-    expect(bubbleMenu).toBeNull();
+    // showBubbleToolbar gates the OPTIONAL formatting bubbles; the math
+    // bubble stays mounted because it is the only edit path for inline
+    // math atoms (a typed $x$ would otherwise be a dead end).
+    const bubbleMenus = container.querySelectorAll("[data-testid='bubble-menu']");
+    expect(bubbleMenus.length).toBe(1);
   });
 });

package/src/preview.spec.ts

@@ -0,0 +1,130 @@
+import { describe, expect, it } from "vitest";
+import { decodeEntities, isPreviewEmpty, parseHtmlPreview } from "./preview";
+
+describe("decodeEntities", () => {
+  it("decodes named and numeric entities", () => {
+    expect(decodeEntities("a & b <c> "d" 'e' A")).toBe(
+      "a & b <c> \"d\" 'e' A",
+    );
+  });
+
+  it("turns &nbsp; into a plain space", () => {
+    expect(decodeEntities("a&nbsp;b")).toBe("a b");
+  });
+
+  it("leaves unknown entities alone", () => {
+    expect(decodeEntities("&bogus;")).toBe("&bogus;");
+  });
+});
+
+describe("isPreviewEmpty", () => {
+  it("treats null, empty string, and empty paragraph as empty", () => {
+    expect(isPreviewEmpty(null)).toBe(true);
+    expect(isPreviewEmpty("")).toBe(true);
+    expect(isPreviewEmpty("<p></p>")).toBe(true);
+    expect(isPreviewEmpty("<p>  </p>")).toBe(true);
+    expect(isPreviewEmpty("<p><br></p>")).toBe(true);
+  });
+
+  it("treats text and images as content", () => {
+    expect(isPreviewEmpty("<p>hi</p>")).toBe(false);
+    expect(isPreviewEmpty('<p><img src="x.png"></p>')).toBe(false);
+  });
+});
+
+describe("parseHtmlPreview", () => {
+  it("parses paragraphs into separate blocks", () => {
+    const { blocks } = parseHtmlPreview("<p>alpha</p><p>beta</p>");
+    expect(blocks).toHaveLength(2);
+    expect(blocks[0].kind).toBe("paragraph");
+    expect(blocks[0].spans).toEqual([{ text: "alpha" }]);
+    expect(blocks[1].spans).toEqual([{ text: "beta" }]);
+  });
+
+  it("skips empty paragraphs", () => {
+    const { blocks } = parseHtmlPreview("<p>alpha</p><p></p><p>beta</p>");
+    expect(blocks).toHaveLength(2);
+  });
+
+  it("captures inline marks with nesting", () => {
+    const { blocks } = parseHtmlPreview(
+      "<p>plain <strong>bold <em>bolditalic</em></strong> <code>mono</code></p>",
+    );
+    expect(blocks[0].spans).toEqual([
+      { text: "plain " },
+      { text: "bold ", bold: true },
+      { text: "bolditalic", bold: true, italic: true },
+      { text: " " },
+      { text: "mono", code: true },
+    ]);
+  });
+
+  it("maps heading levels", () => {
+    const { blocks } = parseHtmlPreview("<h1>one</h1><h2>two</h2><h3>three</h3>");
+    expect(blocks.map((b) => b.kind)).toEqual(["heading1", "heading2", "heading3"]);
+  });
+
+  it("numbers ordered lists and marks bullets", () => {
+    const { blocks } = parseHtmlPreview(
+      "<ul><li>a</li><li>b</li></ul><ol><li>x</li><li>y</li></ol>",
+    );
+    expect(blocks.map((b) => b.kind)).toEqual(["bullet", "bullet", "ordered", "ordered"]);
+    expect(blocks[2].index).toBe(1);
+    expect(blocks[3].index).toBe(2);
+  });
+
+  it("tracks nested list indent", () => {
+    const { blocks } = parseHtmlPreview("<ul><li>a<ul><li>a1</li></ul></li></ul>");
+    expect(blocks[0].indent).toBe(0);
+    expect(blocks[1].indent).toBe(1);
+  });
+
+  it("parses 10Tap task lists with checked state", () => {
+    const { blocks } = parseHtmlPreview(
+      '<ul data-type="taskList">' +
+        '<li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked></label><div><p>done</p></div></li>' +
+        '<li data-checked="false" data-type="taskItem"><label><input type="checkbox"></label><div><p>todo</p></div></li>' +
+        "</ul>",
+    );
+    expect(blocks.map((b) => b.kind)).toEqual(["task", "task"]);
+    expect(blocks[0].checked).toBe(true);
+    expect(blocks[0].spans.map((s) => s.text).join("")).toBe("done");
+    expect(blocks[1].checked).toBe(false);
+  });
+
+  it("flags blockquote content", () => {
+    const { blocks } = parseHtmlPreview("<blockquote><p>quoted</p></blockquote><p>after</p>");
+    expect(blocks[0].quote).toBe(true);
+    expect(blocks[0].spans[0].text).toBe("quoted");
+    expect(blocks[1].quote).toBeUndefined();
+  });
+
+  it("decodes entities and collapses whitespace", () => {
+    const { blocks } = parseHtmlPreview("<p>\n  a &amp;\n\n  b\n</p>");
+    expect(blocks[0].spans).toEqual([{ text: "a & b" }]);
+  });
+
+  it("represents images with a token", () => {
+    const { blocks } = parseHtmlPreview('<p>look <img src="x.png"> here</p>');
+    expect(blocks[0].spans.map((s) => s.text).join("")).toBe("look [image] here");
+  });
+
+  it("truncates at maxBlocks", () => {
+    const html = Array.from({ length: 9 }, (_, i) => `<p>p${i}</p>`).join("");
+    const { blocks, truncated } = parseHtmlPreview(html, 6);
+    expect(blocks).toHaveLength(6);
+    expect(truncated).toBe(true);
+  });
+
+  it("does not flag truncation when content fits", () => {
+    const { blocks, truncated } = parseHtmlPreview("<p>a</p><p>b</p>", 6);
+    expect(blocks).toHaveLength(2);
+    expect(truncated).toBe(false);
+  });
+
+  it("returns no blocks for empty input", () => {
+    expect(parseHtmlPreview("").blocks).toHaveLength(0);
+    expect(parseHtmlPreview("<p></p>").blocks).toHaveLength(0);
+    expect(parseHtmlPreview(null).blocks).toHaveLength(0);
+  });
+});

package/src/preview.ts

@@ -0,0 +1,287 @@
+/**
+ * Lightweight HTML -> preview-block parser for the native inline preview.
+ *
+ * The native RichEditor renders committed content as a compact, read-only
+ * preview surface (tap to open the fullscreen editor). A WebView per field is
+ * too heavy for that, so this parses the editor's own HTML output (Tiptap /
+ * 10Tap both emit a small, predictable tag set) into styled text blocks.
+ *
+ * Not a general HTML parser -- it understands exactly what the editor emits:
+ * p, h1-h6, ul/ol/li (incl. 10Tap taskList), blockquote, br, img and the
+ * inline marks strong/b, em/i, u, s/strike/del, code. Everything else is
+ * ignored (tags stripped, text kept).
+ */
+
+// ===========================================================================
+// Types
+// ===========================================================================
+
+export interface PreviewSpan {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strike?: boolean;
+  code?: boolean;
+}
+
+export type PreviewBlockKind =
+  | "paragraph"
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "heading6"
+  | "bullet"
+  | "ordered"
+  | "task";
+
+export interface PreviewBlock {
+  kind: PreviewBlockKind;
+  spans: PreviewSpan[];
+  /** Inside a blockquote */
+  quote?: boolean;
+  /** Nested-list depth (0 = top level) */
+  indent?: number;
+  /** 1-based number for ordered list items */
+  index?: number;
+  /** Checked state for task list items */
+  checked?: boolean;
+}
+
+export interface PreviewResult {
+  blocks: PreviewBlock[];
+  /** True when content was cut off at maxBlocks */
+  truncated: boolean;
+}
+
+// ===========================================================================
+// Entities
+// ===========================================================================
+
+const NAMED_ENTITIES: Record<string, string> = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+};
+
+export function decodeEntities(text: string): string {
+  return text.replace(/&(#x?[0-9a-fA-F]+|[a-zA-Z]+);/g, (match, entity: string) => {
+    if (entity[0] === "#") {
+      const code =
+        entity[1] === "x" || entity[1] === "X"
+          ? Number.parseInt(entity.slice(2), 16)
+          : Number.parseInt(entity.slice(1), 10);
+      return Number.isFinite(code) ? String.fromCodePoint(code) : match;
+    }
+    return NAMED_ENTITIES[entity.toLowerCase()] ?? match;
+  });
+}
+
+// ===========================================================================
+// Empty check
+// ===========================================================================
+
+/** True when the HTML has no visible text and no image (e.g. "" or "<p></p>") */
+export function isPreviewEmpty(html: string | null | undefined): boolean {
+  if (!html) return true;
+  if (/<img[\s>]/i.test(html)) return false;
+  return decodeEntities(html.replace(/<[^>]*>/g, "")).trim().length === 0;
+}
+
+// ===========================================================================
+// Parser
+// ===========================================================================
+
+const HEADING_KINDS: Record<string, PreviewBlockKind> = {
+  h1: "heading1",
+  h2: "heading2",
+  h3: "heading3",
+  h4: "heading4",
+  h5: "heading5",
+  h6: "heading6",
+};
+
+interface ListFrame {
+  type: "ul" | "ol" | "task";
+  counter: number;
+}
+
+export function parseHtmlPreview(html: string | null | undefined, maxBlocks = 6): PreviewResult {
+  const blocks: PreviewBlock[] = [];
+  let truncated = false;
+  if (!html) return { blocks, truncated };
+
+  let current: PreviewBlock | null = null;
+  const marks = { bold: 0, italic: 0, underline: 0, strike: 0, code: 0 };
+  const listStack: ListFrame[] = [];
+  let quoteDepth = 0;
+  let liDepth = 0;
+  let capped = false;
+
+  const flush = () => {
+    if (!current) return;
+    const spans = current.spans;
+    // trim outer whitespace, drop blanks
+    if (spans.length > 0) {
+      spans[0].text = spans[0].text.replace(/^\s+/, "");
+      spans[spans.length - 1].text = spans[spans.length - 1].text.replace(/\s+$/, "");
+    }
+    const kept = spans.filter((s) => s.text.length > 0);
+    if (kept.some((s) => s.text.trim().length > 0)) {
+      current.spans = kept;
+      blocks.push(current);
+      if (blocks.length >= maxBlocks) capped = true;
+    }
+    current = null;
+  };
+
+  const open = (kind: PreviewBlockKind, extra?: Partial<PreviewBlock>) => {
+    flush();
+    if (capped) {
+      truncated = true;
+      return;
+    }
+    current = { kind, spans: [], ...(quoteDepth > 0 && { quote: true }), ...extra };
+  };
+
+  const appendText = (raw: string) => {
+    const text = decodeEntities(raw).replace(/\s+/g, " ");
+    if (text.length === 0) return;
+    if (capped && !current) {
+      if (text.trim().length > 0) truncated = true;
+      return;
+    }
+    if (!current) {
+      if (text.trim().length === 0) return;
+      // stray text without a block wrapper (e.g. bare text at the root)
+      current = { kind: "paragraph", spans: [], ...(quoteDepth > 0 && { quote: true }) };
+    }
+    const span: PreviewSpan = {
+      text,
+      ...(marks.bold > 0 && { bold: true }),
+      ...(marks.italic > 0 && { italic: true }),
+      ...(marks.underline > 0 && { underline: true }),
+      ...(marks.strike > 0 && { strike: true }),
+      ...(marks.code > 0 && { code: true }),
+    };
+    const last = current.spans[current.spans.length - 1];
+    if (
+      last &&
+      !!last.bold === !!span.bold &&
+      !!last.italic === !!span.italic &&
+      !!last.underline === !!span.underline &&
+      !!last.strike === !!span.strike &&
+      !!last.code === !!span.code
+    ) {
+      last.text += span.text;
+    } else {
+      current.spans.push(span);
+    }
+  };
+
+  const tokens = html.match(/<[^>]*>|[^<]+/g) ?? [];
+  for (const token of tokens) {
+    if (token[0] !== "<") {
+      appendText(token);
+      continue;
+    }
+    const tagMatch = /^<\s*(\/?)\s*([a-zA-Z][a-zA-Z0-9]*)([^>]*)>$/.exec(token);
+    if (!tagMatch) continue;
+    const closing = tagMatch[1] === "/";
+    const name = tagMatch[2].toLowerCase();
+    const attrs = tagMatch[3] ?? "";
+
+    switch (name) {
+      case "p":
+        if (liDepth > 0) {
+          // paragraphs inside a list item flow into the item text
+          if (!closing) appendText(" ");
+        } else if (closing) {
+          flush();
+        } else {
+          open("paragraph");
+        }
+        break;
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6":
+        if (closing) flush();
+        else open(HEADING_KINDS[name]);
+        break;
+      case "br":
+        appendText(" ");
+        break;
+      case "ul":
+        if (closing) listStack.pop();
+        else {
+          listStack.push({
+            type: /data-type\s*=\s*["']taskList["']/i.test(attrs) ? "task" : "ul",
+            counter: 0,
+          });
+        }
+        break;
+      case "ol":
+        if (closing) listStack.pop();
+        else listStack.push({ type: "ol", counter: 0 });
+        break;
+      case "li": {
+        if (closing) {
+          liDepth = Math.max(0, liDepth - 1);
+          flush();
+          break;
+        }
+        const frame = listStack[listStack.length - 1] ?? { type: "ul" as const, counter: 0 };
+        const indent = Math.max(0, listStack.length - 1);
+        if (frame.type === "ol") {
+          frame.counter += 1;
+          open("ordered", { indent, index: frame.counter });
+        } else if (frame.type === "task") {
+          open("task", { indent, checked: /data-checked\s*=\s*["']true["']/i.test(attrs) });
+        } else {
+          open("bullet", { indent });
+        }
+        liDepth += 1;
+        break;
+      }
+      case "blockquote":
+        flush();
+        quoteDepth = Math.max(0, quoteDepth + (closing ? -1 : 1));
+        break;
+      case "strong":
+      case "b":
+        marks.bold = Math.max(0, marks.bold + (closing ? -1 : 1));
+        break;
+      case "em":
+      case "i":
+        marks.italic = Math.max(0, marks.italic + (closing ? -1 : 1));
+        break;
+      case "u":
+        marks.underline = Math.max(0, marks.underline + (closing ? -1 : 1));
+        break;
+      case "s":
+      case "strike":
+      case "del":
+        marks.strike = Math.max(0, marks.strike + (closing ? -1 : 1));
+        break;
+      case "code":
+        marks.code = Math.max(0, marks.code + (closing ? -1 : 1));
+        break;
+      case "img":
+        if (!closing) appendText("[image]");
+        break;
+      default:
+        // input/label/div/span/a/mark/... -- structure ignored, text kept
+        break;
+    }
+  }
+  flush();
+  return { blocks, truncated };
+}

package/src/richEditor.spec.tsx

@@ -4,7 +4,8 @@ import { describe, it, expect, vi } from "vitest";
 // Mocks — must come before imports
 // ---------------------------------------------------------------------------
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Button: (props: any) => (
     <button
       role="button"
@@ -26,11 +27,13 @@ vi.mock("@multiplatform.one/forms", () => ({
   },
 }));
 
-vi.mock("@multiplatform.one/components", () => ({
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Tooltip: ({ children }: any) => children,
 }));
 
-vi.mock("@multiplatform.one/theme", () => ({
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   useResolvedKnobs: (_options?: any) => ({
     knobProps: {
       body: {},
@@ -73,6 +76,10 @@ const mockEditor = {
     blur: vi.fn(),
   },
   setEditable: vi.fn(),
+  storage: {
+    mediaUpload: { handlers: {} },
+    suggestionChrome: { value: null },
+  },
 };
 
 vi.mock("@tiptap/react", () => ({