@surrealdb/ui 1.2.11 → 1.2.13

package/tests/unit/MarkdownViewer/features.test.tsx

@@ -7,158 +7,158 @@ import { renderToString } from "react-dom/server";
 import { beforeAll, describe, expect, it } from "vitest";
 
 beforeAll(() => {
-    if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
-        Object.defineProperty(window, "matchMedia", {
-            writable: true,
-            value: (query: string) => ({
-                matches: false,
-                media: query,
-                onchange: null,
-                addListener: () => {},
-                removeListener: () => {},
-                addEventListener: () => {},
-                removeEventListener: () => {},
-                dispatchEvent: () => false,
-            }),
-        });
-    }
+	if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+		Object.defineProperty(window, "matchMedia", {
+			writable: true,
+			value: (query: string) => ({
+				matches: false,
+				media: query,
+				onchange: null,
+				addListener: () => {},
+				removeListener: () => {},
+				addEventListener: () => {},
+				removeEventListener: () => {},
+				dispatchEvent: () => false,
+			}),
+		});
+	}
 });
 
 function shell(node: ReactElement): string {
-    return renderToString(
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            {node}
-        </MantineProvider>,
-    );
+	return renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			{node}
+		</MantineProvider>,
+	);
 }
 
 describe("MarkdownViewer / features", () => {
-    it("renders bare URL autolinks as links", () => {
-        const html = shell(<MarkdownViewer content="Visit https://example.com today." />);
-        expect(html).toContain('href="https://example.com"');
-        expect(html).toContain("https://example.com");
-    });
+	it("renders bare URL autolinks as links", () => {
+		const html = shell(<MarkdownViewer content="Visit https://example.com today." />);
+		expect(html).toContain('href="https://example.com"');
+		expect(html).toContain("https://example.com");
+	});
 
-    it("renders www autolinks with https href", () => {
-        const html = shell(<MarkdownViewer content="Go to www.example.com" />);
-        expect(html).toContain('href="https://www.example.com"');
-    });
+	it("renders www autolinks with https href", () => {
+		const html = shell(<MarkdownViewer content="Go to www.example.com" />);
+		expect(html).toContain('href="https://www.example.com"');
+	});
 
-    it("renders inline <u> and inline <Since /> with default components", () => {
-        const html = shell(
-            <MarkdownViewer content={'Text <u>underlined</u> and <Since v="2.0.0" /> here.'} />,
-        );
-        expect(html).toContain("<u>");
-        expect(html).toContain("underlined");
-        expect(html).toContain("2.0.0");
-        expect(html).not.toContain("<Since");
-        expect(html).not.toMatch(/<p[^>]*>underlined<\/p>/);
-    });
+	it("renders inline <u> and inline <Since /> with default components", () => {
+		const html = shell(
+			<MarkdownViewer content={'Text <u>underlined</u> and <Since v="2.0.0" /> here.'} />,
+		);
+		expect(html).toContain("<u>");
+		expect(html).toContain("underlined");
+		expect(html).toContain("2.0.0");
+		expect(html).not.toContain("<Since");
+		expect(html).not.toMatch(/<p[^>]*>underlined<\/p>/);
+	});
 
-    it("uses custom heading id from {#suffix}", () => {
-        const html = shell(<MarkdownViewer content="## Visible {#my-anchor}" />);
-        expect(html).toMatch(/id="my-anchor"/);
-        expect(html).toContain('href="#my-anchor"');
-        expect(html).not.toContain("{#my-anchor}");
-    });
+	it("uses custom heading id from {#suffix}", () => {
+		const html = shell(<MarkdownViewer content="## Visible {#my-anchor}" />);
+		expect(html).toMatch(/id="my-anchor"/);
+		expect(html).toContain('href="#my-anchor"');
+		expect(html).not.toContain("{#my-anchor}");
+	});
 
-    it("extractHeadings respects custom {#id}", () => {
-        const source = "## Title {#custom}\n";
-        const tree = parseMarkdownTree(source);
-        const headings = extractHeadings(tree, markdownSourceFromString(source));
-        expect(headings[0]?.id).toBe("custom");
-        expect(headings[0]?.text).toBe("Title");
-    });
+	it("extractHeadings respects custom {#id}", () => {
+		const source = "## Title {#custom}\n";
+		const tree = parseMarkdownTree(source);
+		const headings = extractHeadings(tree, markdownSourceFromString(source));
+		expect(headings[0]?.id).toBe("custom");
+		expect(headings[0]?.text).toBe("Title");
+	});
 
-    it("preserves ordered list start attribute", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={`3. Third step
+	it("preserves ordered list start attribute", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={`3. Third step
 4. Fourth step`}
-            />,
-        );
-        expect(html).toMatch(/start="3"/);
-        expect(html).toContain("3.");
-        expect(html).toContain("4.");
-    });
+			/>,
+		);
+		expect(html).toMatch(/start="3"/);
+		expect(html).toContain("3.");
+		expect(html).toContain("4.");
+	});
 
-    it("renders HTML table cells with markdown and inline HTML", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={`<table>
+	it("renders HTML table cells with markdown and inline HTML", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={`<table>
 <thead><tr><th>Fn</th></tr></thead>
 <tbody><tr><td>**bold** and <code>x</code></td></tr></tbody>
 </table>`}
-            />,
-        );
-        expect(html).toContain("<table");
-        expect(html).toContain("bold");
-        expect(html).toContain("<code");
-    });
+			/>,
+		);
+		expect(html).toContain("<table");
+		expect(html).toContain("bold");
+		expect(html).toContain("<code");
+	});
 
-    it("wraps a GFM table in a horizontal scroll container", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={`| A | B |
+	it("wraps a GFM table in a horizontal scroll container", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={`| A | B |
 | - | - |
 | 1 | 2 |`}
-            />,
-        );
-        expect(html).toContain("mantine-TableScrollContainer-scrollContainer");
-        expect(html).toContain("<table");
-        expect(html).toContain("1");
-    });
+			/>,
+		);
+		expect(html).toContain("mantine-TableScrollContainer-scrollContainer");
+		expect(html).toContain("<table");
+		expect(html).toContain("1");
+	});
 
-    it("wraps an HTML table in a horizontal scroll container", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={`<table>
+	it("wraps an HTML table in a horizontal scroll container", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={`<table>
 <tbody><tr><td>cell</td></tr></tbody>
 </table>`}
-            />,
-        );
-        expect(html).toContain("mantine-TableScrollContainer-scrollContainer");
-        expect(html).toContain("<table");
-        expect(html).toContain("cell");
-    });
+			/>,
+		);
+		expect(html).toContain("mantine-TableScrollContainer-scrollContainer");
+		expect(html).toContain("<table");
+		expect(html).toContain("cell");
+	});
 
-    it("renders default Button component", () => {
-        const html = shell(
-            <MarkdownViewer content={'<Button label="Go" href="https://surrealdb.com" />'} />,
-        );
-        expect(html).toContain("Go");
-        expect(html).toContain('href="https://surrealdb.com"');
-    });
+	it("renders default Button component", () => {
+		const html = shell(
+			<MarkdownViewer content={'<Button label="Go" href="https://surrealdb.com" />'} />,
+		);
+		expect(html).toContain("Go");
+		expect(html).toContain('href="https://surrealdb.com"');
+	});
 
-    it("resolves image sources through onImage (e.g. CDN code → URL)", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={"![Example](cdn-code-123)"}
-                onResolveMedia={(node) => ({
-                    ...node,
-                    src: `https://cdn.surrealdb.com/${node.src}.auto`,
-                })}
-            />,
-        );
-        expect(html).toContain("cdn.surrealdb.com/cdn-code-123.auto");
-        expect(html).toContain("Example");
-    });
+	it("resolves image sources through onImage (e.g. CDN code → URL)", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={"![Example](cdn-code-123)"}
+				onResolveMedia={(node) => ({
+					...node,
+					src: `https://cdn.surrealdb.com/${node.src}.auto`,
+				})}
+			/>,
+		);
+		expect(html).toContain("cdn.surrealdb.com/cdn-code-123.auto");
+		expect(html).toContain("Example");
+	});
 
-    it("renders a video player when onImage resolves a source to a video container", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={"![clip](cdn-video-123)"}
-                onResolveMedia={(node) => ({
-                    ...node,
-                    src: `https://cdn.surrealdb.com/${node.src}.mp4`,
-                })}
-            />,
-        );
-        expect(html).toContain("cdn.surrealdb.com/cdn-video-123.mp4");
-        expect(html).toContain("<video");
-    });
+	it("renders a video player when onImage resolves a source to a video container", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={"![clip](cdn-video-123)"}
+				onResolveMedia={(node) => ({
+					...node,
+					src: `https://cdn.surrealdb.com/${node.src}.mp4`,
+				})}
+			/>,
+		);
+		expect(html).toContain("cdn.surrealdb.com/cdn-video-123.mp4");
+		expect(html).toContain("<video");
+	});
 });

package/tests/unit/MarkdownViewer/headings.test.tsx

@@ -2,39 +2,39 @@ import { extractHeadings, markdownSourceFromString, parseMarkdownTree } from "@s
 import { describe, expect, it } from "vitest";
 
 describe("extractHeadings", () => {
-    it("finds headings nested inside blockquotes", () => {
-        const source = "> ## Inside quote\n\n## Top";
-        const tree = parseMarkdownTree(source);
-        const headings = extractHeadings(tree, markdownSourceFromString(source));
+	it("finds headings nested inside blockquotes", () => {
+		const source = "> ## Inside quote\n\n## Top";
+		const tree = parseMarkdownTree(source);
+		const headings = extractHeadings(tree, markdownSourceFromString(source));
 
-        expect(headings).toHaveLength(2);
-        expect(headings.map((h) => h.text)).toEqual(["Inside quote", "Top"]);
-    });
+		expect(headings).toHaveLength(2);
+		expect(headings.map((h) => h.text)).toEqual(["Inside quote", "Top"]);
+	});
 
-    it("finds headings between details HTML blocks", () => {
-        const source = `<details>
+	it("finds headings between details HTML blocks", () => {
+		const source = `<details>
 <summary>Toggle</summary>
 
 ### Inside details
 
 </details>`;
-        const tree = parseMarkdownTree(source);
-        const headings = extractHeadings(tree, markdownSourceFromString(source), {
-            depths: [2, 3],
-        });
-
-        expect(headings).toHaveLength(1);
-        expect(headings[0]?.text).toBe("Inside details");
-        expect(headings[0]?.depth).toBe(3);
-    });
-
-    it("strips inline emphasis marks from heading text", () => {
-        const source = "## Hello **world**";
-        const tree = parseMarkdownTree(source);
-        const headings = extractHeadings(tree, markdownSourceFromString(source));
-
-        expect(headings).toHaveLength(1);
-        expect(headings[0]?.text).toBe("Hello world");
-        expect(headings[0]?.id).toBe("hello-world");
-    });
+		const tree = parseMarkdownTree(source);
+		const headings = extractHeadings(tree, markdownSourceFromString(source), {
+			depths: [2, 3],
+		});
+
+		expect(headings).toHaveLength(1);
+		expect(headings[0]?.text).toBe("Inside details");
+		expect(headings[0]?.depth).toBe(3);
+	});
+
+	it("strips inline emphasis marks from heading text", () => {
+		const source = "## Hello **world**";
+		const tree = parseMarkdownTree(source);
+		const headings = extractHeadings(tree, markdownSourceFromString(source));
+
+		expect(headings).toHaveLength(1);
+		expect(headings[0]?.text).toBe("Hello world");
+		expect(headings[0]?.id).toBe("hello-world");
+	});
 });

package/tests/unit/MarkdownViewer/indented-jsx-children.test.tsx

@@ -8,55 +8,55 @@ import { renderToString } from "react-dom/server";
 import { beforeAll, describe, expect, it } from "vitest";
 
 beforeAll(() => {
-    if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
-        Object.defineProperty(window, "matchMedia", {
-            writable: true,
-            value: (query: string) => ({
-                matches: false,
-                media: query,
-                onchange: null,
-                addListener: () => {},
-                removeListener: () => {},
-                addEventListener: () => {},
-                removeEventListener: () => {},
-                dispatchEvent: () => false,
-            }),
-        });
-    }
+	if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+		Object.defineProperty(window, "matchMedia", {
+			writable: true,
+			value: (query: string) => ({
+				matches: false,
+				media: query,
+				onchange: null,
+				addListener: () => {},
+				removeListener: () => {},
+				addEventListener: () => {},
+				removeEventListener: () => {},
+				dispatchEvent: () => false,
+			}),
+		});
+	}
 });
 
 function shell(node: ReactElement): string {
-    return renderToString(
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            {node}
-        </MantineProvider>,
-    );
+	return renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			{node}
+		</MantineProvider>,
+	);
 }
 
 function nodeNames(text: string): string[] {
-    const tree = parseMarkdownTree(text);
-    const names: string[] = [];
-    const cursor = tree.cursor();
-    do {
-        names.push(cursor.name);
-    } while (cursor.next());
-    return names;
+	const tree = parseMarkdownTree(text);
+	const names: string[] = [];
+	const cursor = tree.cursor();
+	do {
+		names.push(cursor.name);
+	} while (cursor.next());
+	return names;
 }
 
 function Boxes({ children }: { children?: ReactNode }): ReactElement {
-    return <div data-boxes>{children}</div>;
+	return <div data-boxes>{children}</div>;
 }
 function IconBox({ title }: { title?: string }): ReactElement {
-    return <div data-iconbox>{title}</div>;
+	return <div data-iconbox>{title}</div>;
 }
 
 const components: MarkdownComponents = {
-    Boxes: { component: Boxes, block: true },
-    IconBox: { component: IconBox, block: true },
+	Boxes: { component: Boxes, block: true },
+	IconBox: { component: IconBox, block: true },
 };
 
 // Children indented with tabs, exactly as authored in docs' index.mdx.
@@ -76,23 +76,23 @@ const CONTENT = `<Boxes>
 </Boxes>`;
 
 describe("MarkdownViewer / no indented code blocks", () => {
-    it("does not parse tab/4-space indented lines as code blocks", () => {
-        expect(nodeNames("\t<IconBox />")).not.toContain("CodeBlock");
-        expect(nodeNames("    plain indented text")).not.toContain("CodeBlock");
-        // Fenced code blocks still work.
-        expect(nodeNames("```\ncode\n```")).toContain("FencedCode");
-    });
+	it("does not parse tab/4-space indented lines as code blocks", () => {
+		expect(nodeNames("\t<IconBox />")).not.toContain("CodeBlock");
+		expect(nodeNames("    plain indented text")).not.toContain("CodeBlock");
+		// Fenced code blocks still work.
+		expect(nodeNames("```\ncode\n```")).toContain("FencedCode");
+	});
 
-    it("renders tab-indented IconBox children inside a Boxes block", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={CONTENT}
-                components={components}
-            />,
-        );
-        expect(html).toContain("data-boxes");
-        expect(html).toContain("data-iconbox");
-        expect(html).toContain("Querying");
-        expect(html).toContain("Schema management");
-    });
+	it("renders tab-indented IconBox children inside a Boxes block", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={CONTENT}
+				components={components}
+			/>,
+		);
+		expect(html).toContain("data-boxes");
+		expect(html).toContain("data-iconbox");
+		expect(html).toContain("Querying");
+		expect(html).toContain("Schema management");
+	});
 });