@multiplatform.one/markdown 7.7.0 → 7.7.1

package/src/mermaid/mountDiagramSvg.spec.ts

@@ -0,0 +1,111 @@
+/**
+ * mountDiagramSvg spec (MPO-195). MermaidBlock.spec.tsx mocks this helper
+ * out, so until now nothing exercised the sanitizer itself. What it owns:
+ * inert parsing, executable-node removal, event-handler and javascript:
+ * stripping, the HTML fallback for markup that is not well-formed XML, and a
+ * false return that leaves the container alone.
+ */
+
+import { describe, expect, it } from "vitest";
+import { mountDiagramSvg } from "./mountDiagramSvg";
+
+function host(): HTMLElement {
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  return el;
+}
+
+const PLAIN = '<svg xmlns="http://www.w3.org/2000/svg"><rect width="10" height="10" /></svg>';
+
+describe("mountDiagramSvg", () => {
+  it("mounts a well-formed diagram as real SVG nodes and reports true", () => {
+    const container = host();
+    expect(mountDiagramSvg(container, PLAIN)).toBe(true);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeTruthy();
+    expect(svg!.namespaceURI).toBe("http://www.w3.org/2000/svg");
+    expect(container.querySelector("rect")).toBeTruthy();
+  });
+
+  it("replaces previous content instead of appending to it", () => {
+    const container = host();
+    container.innerHTML = "<p>stale</p>";
+    mountDiagramSvg(container, PLAIN);
+    expect(container.querySelector("p")).toBeNull();
+    expect(container.childElementCount).toBe(1);
+  });
+
+  it("removes script, iframe, object and embed nodes", () => {
+    const container = host();
+    mountDiagramSvg(
+      container,
+      '<svg xmlns="http://www.w3.org/2000/svg">' +
+        "<script>globalThis.__pwned = true;</script>" +
+        '<iframe src="https://example.com"></iframe>' +
+        '<object data="x.swf"></object>' +
+        '<embed src="x.swf" />' +
+        '<rect width="10" height="10" />' +
+        "</svg>",
+    );
+    expect(container.querySelector("script")).toBeNull();
+    expect(container.querySelector("iframe")).toBeNull();
+    expect(container.querySelector("object")).toBeNull();
+    expect(container.querySelector("embed")).toBeNull();
+    // the drawing that carried them survives
+    expect(container.querySelector("rect")).toBeTruthy();
+  });
+
+  it("strips on* handlers from the root and from descendants", () => {
+    const container = host();
+    mountDiagramSvg(
+      container,
+      '<svg xmlns="http://www.w3.org/2000/svg" onload="globalThis.__pwned = true">' +
+        '<rect width="10" height="10" onclick="globalThis.__pwned = true" ONMOUSEOVER="x()" />' +
+        "</svg>",
+    );
+    const svg = container.querySelector("svg")!;
+    expect(svg.hasAttribute("onload")).toBe(false);
+    const rect = container.querySelector("rect")!;
+    expect(rect.hasAttribute("onclick")).toBe(false);
+    expect(rect.getAttributeNames().some((name) => name.toLowerCase() === "onmouseover")).toBe(
+      false,
+    );
+  });
+
+  it("strips javascript: hrefs but keeps ordinary ones", () => {
+    const container = host();
+    mountDiagramSvg(
+      container,
+      '<svg xmlns="http://www.w3.org/2000/svg">' +
+        '<a href="  JavaScript:alert(1)"><text>bad</text></a>' +
+        '<a href="https://example.com"><text>good</text></a>' +
+        "</svg>",
+    );
+    const anchors = Array.from(container.querySelectorAll("a"));
+    expect(anchors).toHaveLength(2);
+    expect(anchors[0].hasAttribute("href")).toBe(false);
+    expect(anchors[1].getAttribute("href")).toBe("https://example.com");
+    // the defanged anchor's content is still drawn
+    expect(container.textContent).toContain("bad");
+  });
+
+  it("falls back to lenient HTML parsing for markup that is not well-formed XML", () => {
+    const container = host();
+    const mounted = mountDiagramSvg(
+      container,
+      '<svg xmlns="http://www.w3.org/2000/svg"><foreignObject><div>label</foreignObject></svg>',
+    );
+    expect(mounted).toBe(true);
+    expect(container.querySelector("svg")).toBeTruthy();
+    expect(container.textContent).toContain("label");
+  });
+
+  it("returns false and leaves the container untouched when there is no svg", () => {
+    const container = host();
+    container.innerHTML = "<p>kept</p>";
+    expect(mountDiagramSvg(container, "not markup at all")).toBe(false);
+    expect(mountDiagramSvg(container, "")).toBe(false);
+    expect(mountDiagramSvg(container, "<div>html but no svg</div>")).toBe(false);
+    expect(container.querySelector("p")?.textContent).toBe("kept");
+  });
+});

package/src/mermaid/renderMermaidDiagram.spec.ts

@@ -9,7 +9,6 @@ vi.mock("mermaid", () => ({
 }));
 
 import { renderMermaidDiagram, resetMermaidForTesting } from "./renderMermaidDiagram";
-import { mountDiagramSvg } from "./mountDiagramSvg";
 
 beforeEach(() => {
   resetMermaidForTesting();
@@ -56,38 +55,35 @@ describe("renderMermaidDiagram", () => {
     const result = await renderMermaidDiagram("graph TD\n A-->B");
     expect(result).toEqual({ ok: false, error: "boom" });
   });
-});
 
-describe("mountDiagramSvg", () => {
-  it("mounts the svg element as real nodes", () => {
-    const container = document.createElement("div");
-    expect(mountDiagramSvg(container, "<svg><g><text>hi</text></g></svg>")).toBe(true);
-    expect(container.querySelector("svg g text")?.textContent).toBe("hi");
+  it("forwards fontFamily into the theme config and re-inits when it changes", async () => {
+    await renderMermaidDiagram("a", { fontFamily: "Courier New, monospace" });
+    expect(initialize).toHaveBeenCalledWith(
+      expect.objectContaining({ fontFamily: "Courier New, monospace" }),
+    );
+    await renderMermaidDiagram("b", { fontFamily: "Courier New, monospace" });
+    expect(initialize).toHaveBeenCalledTimes(1);
+    await renderMermaidDiagram("c", { fontFamily: "Inter" });
+    expect(initialize).toHaveBeenCalledTimes(2);
   });
 
-  it("strips executable content and handlers (defense in depth)", () => {
-    const container = document.createElement("div");
-    mountDiagramSvg(
-      container,
-      '<svg onload="alert(1)"><script>alert(2)</script>' +
-        '<g onclick="x()"><text>t</text></g>' +
-        '<image href="javascript:alert(3)"></image></svg>',
-    );
-    expect(container.querySelector("script")).toBeNull();
-    expect(container.querySelector("svg")?.getAttribute("onload")).toBeNull();
-    expect(container.querySelector("g")?.getAttribute("onclick")).toBeNull();
-    expect(container.querySelector("image")?.getAttribute("href")).toBeNull();
-    // the safe content survives
-    expect(container.querySelector("text")?.textContent).toBe("t");
+  it("omits fontFamily entirely when none is given", async () => {
+    await renderMermaidDiagram("a");
+    expect(initialize.mock.calls[0][0]).not.toHaveProperty("fontFamily");
   });
 
-  it("returns false for non-svg payloads", () => {
-    const container = document.createElement("div");
-    expect(mountDiagramSvg(container, "<div>nope</div>")).toBe(false);
-    expect(container.childNodes.length).toBe(0);
+  it("stringifies a non-Error rejection instead of dropping it", async () => {
+    parse.mockRejectedValue("plain string failure");
+    await expect(renderMermaidDiagram("graph TD\n A--")).resolves.toEqual({
+      ok: false,
+      error: "plain string failure",
+    });
   });
 });
 
+// mountDiagramSvg has its own colocated spec (mountDiagramSvg.spec.ts);
+// its cases used to live here, one module behind another module's name.
+
 // MPO-10: the native tier ships no mermaid import at all. It answers with
 // the same "requires a DOM" result the web tier gives without a document,
 // so callers need no platform branch.

package/src/renderer.mermaid.spec.tsx

@@ -0,0 +1,69 @@
+/**
+ * Renderer mermaid-fence spec (MPO-195).
+ *
+ * renderer.spec.tsx covers the node types that map onto plain components and
+ * deliberately runs unmocked. The `code` case has a second branch it does not
+ * reach: a ```mermaid fence goes to MermaidBlock (GitLab parity), and a
+ * custom `code` component still wins over that. Both need MermaidBlock
+ * stubbed — the real one lazy-imports the mermaid engine — so they live in
+ * their own file rather than putting a module mock over the whole contract
+ * suite.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+// The factory is hoisted above every import, so it closes over nothing but
+// JSX — a tamagui element here would be read before its module initialises.
+vi.mock("./mermaid/MermaidBlock", () => ({
+  MermaidBlock: ({ children }: { children: string }) => (
+    <span data-testid="mermaid-block">{children}</span>
+  ),
+}));
+
+import { parseMarkdown } from "./parser";
+import { renderMarkdown } from "./renderer";
+import type { MarkdownComponents } from "./types";
+
+const MERMAID_DOC = "```mermaid\ngraph TD\n  A-->B\n```";
+
+function renderDoc(markdown: string, components?: Partial<MarkdownComponents>) {
+  return renderWithProviders(<>{renderMarkdown(parseMarkdown(markdown), { components })}</>);
+}
+
+describe("renderMarkdown — mermaid fences", () => {
+  it("routes a mermaid fence to MermaidBlock, not the code block", () => {
+    const { getByTestId } = renderDoc(MERMAID_DOC);
+    expect(getByTestId("mermaid-block").textContent).toContain("graph TD");
+  });
+
+  it("leaves every other language on the code block path", () => {
+    const { queryByTestId, container } = renderDoc("```typescript\nconst a = 1;\n```");
+    expect(queryByTestId("mermaid-block")).toBeNull();
+    expect(container.textContent).toContain("const a = 1;");
+  });
+
+  it("treats an unlabelled fence as code, never as a diagram", () => {
+    const { queryByTestId } = renderDoc("```\ngraph TD\n  A-->B\n```");
+    expect(queryByTestId("mermaid-block")).toBeNull();
+  });
+
+  it("gives a custom code component precedence over the mermaid branch", () => {
+    const seen: Array<string | null | undefined> = [];
+    const components: Partial<MarkdownComponents> = {
+      code: ({ children, lang }) => {
+        seen.push(lang);
+        return <span data-testid="custom-code">{children}</span>;
+      },
+    };
+    const { getByTestId, queryByTestId } = renderDoc(MERMAID_DOC, components);
+    expect(queryByTestId("mermaid-block")).toBeNull();
+    expect(getByTestId("custom-code").textContent).toContain("graph TD");
+    expect(seen).toEqual(["mermaid"]);
+  });
+
+  it("renders an empty document as an empty frame rather than throwing", () => {
+    const { container } = renderDoc("");
+    expect(container.textContent).toBe("");
+  });
+});

package/src/renderer.spec.tsx

@@ -263,6 +263,26 @@ describe("renderNode — unknown node degradation", () => {
     expect(container.textContent).toContain("still visible");
   });
 
+  it("wraps a bare text child of an unknown container in Text, never a raw string under the View", () => {
+    // A raw string directly under a View is a text node (nodeType 3) and logs
+    // "A text node cannot be a child of a <View>" on native and react-native-web
+    // (MPO-197, Markdown/Renderer --unknown-nodes); a Text wrapper is an element.
+    const { container } = renderWithProviders(
+      <>
+        {renderNode(
+          {
+            type: "futureContainer",
+            children: [{ type: "text", value: "still visible" }],
+          } as any,
+          0,
+        )}
+      </>,
+    );
+    const view = container.firstElementChild as HTMLElement;
+    expect(view.textContent).toBe("still visible");
+    expect(Array.from(view.childNodes).every((n) => n.nodeType === 1)).toBe(true);
+  });
+
   it("renders unknown leaf nodes with a string value as text", () => {
     const { container } = renderWithProviders(
       <>{renderNode({ type: "futureLeaf", value: "leaf value" } as any, 0)}</>,

package/src/renderer.tsx

@@ -311,11 +311,18 @@ export function renderNode(
     }
 
     default:
-      // Handle unknown nodes - try to render children if they exist
+      // Handle unknown nodes - try to render children if they exist. Inline
+      // nodes such as `text` render as raw strings, and a View cannot hold a
+      // bare string on native or react-native-web ("A text node cannot be a
+      // child of a <View>", a console error on every paint), so any string
+      // child gets a Text wrapper here.
       if ("children" in node && Array.isArray(node.children)) {
         return (
           <View key={key}>
-            {node.children.map((child: AnyNode, i: number) => renderNode(child, i, options))}
+            {node.children.map((child: AnyNode, i: number) => {
+              const rendered = renderNode(child, i, options);
+              return typeof rendered === "string" ? <Text key={i}>{rendered}</Text> : rendered;
+            })}
           </View>
         );
       }

package/types/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EACV,IAAI,EACJ,OAAO,IAAI,WAAW,EACtB,SAAS,IAAI,aAAa,EAC1B,IAAI,IAAI,QAAQ,EAChB,QAAQ,IAAI,YAAY,EACxB,MAAM,IAAI,UAAU,EACpB,MAAM,IAAI,UAAU,EACpB,UAAU,IAAI,cAAc,EAC5B,IAAI,IAAI,QAAQ,EAChB,IAAI,IAAI,QAAQ,EAChB,KAAK,IAAI,SAAS,EAClB,IAAI,IAAI,QAAQ,EAChB,QAAQ,IAAI,YAAY,EACxB,UAAU,IAAI,cAAc,EAC5B,aAAa,EACb,KAAK,IAAI,SAAS,EAClB,QAAQ,IAAI,YAAY,EACxB,SAAS,IAAI,aAAa,EAC1B,IAAI,IAAI,QAAQ,EAChB,KAAK,IAAI,SAAS,EACnB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAsB5C,KAAK,OAAO,GACR,IAAI,GACJ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,UAAU,GACV,cAAc,GACd,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,aAAa,GACb,SAAS,GACT,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,SAAS,GACT;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,UAAU,aAAa;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,WAAW,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,MAAM,GAAG,MAAM,EACpB,OAAO,GAAE,aAAkB,GAC1B,SAAS,CA4OX;AAkED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,aAAkB,GAAG,SAAS,CAMjF"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EACV,IAAI,EACJ,OAAO,IAAI,WAAW,EACtB,SAAS,IAAI,aAAa,EAC1B,IAAI,IAAI,QAAQ,EAChB,QAAQ,IAAI,YAAY,EACxB,MAAM,IAAI,UAAU,EACpB,MAAM,IAAI,UAAU,EACpB,UAAU,IAAI,cAAc,EAC5B,IAAI,IAAI,QAAQ,EAChB,IAAI,IAAI,QAAQ,EAChB,KAAK,IAAI,SAAS,EAClB,IAAI,IAAI,QAAQ,EAChB,QAAQ,IAAI,YAAY,EACxB,UAAU,IAAI,cAAc,EAC5B,aAAa,EACb,KAAK,IAAI,SAAS,EAClB,QAAQ,IAAI,YAAY,EACxB,SAAS,IAAI,aAAa,EAC1B,IAAI,IAAI,QAAQ,EAChB,KAAK,IAAI,SAAS,EACnB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAsB5C,KAAK,OAAO,GACR,IAAI,GACJ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,UAAU,GACV,cAAc,GACd,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,cAAc,GACd,aAAa,GACb,SAAS,GACT,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,SAAS,GACT;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,UAAU,aAAa;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,WAAW,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,OAAO,EACb,GAAG,EAAE,MAAM,GAAG,MAAM,EACpB,OAAO,GAAE,aAAkB,GAC1B,SAAS,CAmPX;AAkED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE,aAAkB,GAAG,SAAS,CAMjF"}