@surrealdb/ui 1.2.11 → 1.2.13

package/tests/unit/MarkdownViewer/preserve-newlines.test.tsx

@@ -7,41 +7,41 @@ 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 TwoColumn({ children }: { children?: ReactNode }): ReactElement {
-    return <div data-testid="two-column">{children}</div>;
+	return <div data-testid="two-column">{children}</div>;
 }
 
 function ColBox({ children }: { children?: ReactNode }): ReactElement {
-    return <div data-testid="col-box">{children}</div>;
+	return <div data-testid="col-box">{children}</div>;
 }
 
 const LAYOUT = `<TwoColumn>
@@ -51,93 +51,93 @@ const LAYOUT = `<TwoColumn>
 </TwoColumn>`;
 
 describe("MarkdownViewer / custom component preserveNewlines", () => {
-    it("does not inject <br /> between block children (they render as blocks)", () => {
-        const components: MarkdownComponents = {
-            TwoColumn: { component: TwoColumn, block: true },
-            ColBox: { component: ColBox, block: true },
-        };
-        const html = shell(
-            <MarkdownViewer
-                content={LAYOUT}
-                components={components}
-            />,
-        );
+	it("does not inject <br /> between block children (they render as blocks)", () => {
+		const components: MarkdownComponents = {
+			TwoColumn: { component: TwoColumn, block: true },
+			ColBox: { component: ColBox, block: true },
+		};
+		const html = shell(
+			<MarkdownViewer
+				content={LAYOUT}
+				components={components}
+			/>,
+		);
 
-        // Three boxes still render, in order.
-        expect(html.match(/data-testid="col-box"/g)?.length).toBe(3);
-        // Block-level children are carved out and rendered as their own blocks:
-        // the newlines that merely separate them must NOT become <br /> elements.
-        // A stray <br /> here would also be counted as an extra child by
-        // introspecting parents (e.g. <Tabs> reading each <TabItem>), so the two
-        // behaviours are unified — `preserveNewlines` governs prose line breaks
-        // (see the prose test below), not gaps between block children.
-        const inner = html.slice(
-            html.indexOf('data-testid="two-column"'),
-            html.lastIndexOf("</div>"),
-        );
-        expect(inner).not.toMatch(/<br\s*\/?>/);
-    });
+		// Three boxes still render, in order.
+		expect(html.match(/data-testid="col-box"/g)?.length).toBe(3);
+		// Block-level children are carved out and rendered as their own blocks:
+		// the newlines that merely separate them must NOT become <br /> elements.
+		// A stray <br /> here would also be counted as an extra child by
+		// introspecting parents (e.g. <Tabs> reading each <TabItem>), so the two
+		// behaviours are unified — `preserveNewlines` governs prose line breaks
+		// (see the prose test below), not gaps between block children.
+		const inner = html.slice(
+			html.indexOf('data-testid="two-column"'),
+			html.lastIndexOf("</div>"),
+		);
+		expect(inner).not.toMatch(/<br\s*\/?>/);
+	});
 
-    it("omits <br /> between block children when preserveNewlines is false", () => {
-        const components: MarkdownComponents = {
-            TwoColumn: { component: TwoColumn, block: true, preserveNewlines: false },
-            ColBox: { component: ColBox, block: true },
-        };
-        const html = shell(
-            <MarkdownViewer
-                content={LAYOUT}
-                components={components}
-            />,
-        );
+	it("omits <br /> between block children when preserveNewlines is false", () => {
+		const components: MarkdownComponents = {
+			TwoColumn: { component: TwoColumn, block: true, preserveNewlines: false },
+			ColBox: { component: ColBox, block: true },
+		};
+		const html = shell(
+			<MarkdownViewer
+				content={LAYOUT}
+				components={components}
+			/>,
+		);
 
-        // All three boxes still render.
-        expect(html.match(/data-testid="col-box"/g)?.length).toBe(3);
-        // The TwoColumn wrapper is present.
-        expect(html).toContain('data-testid="two-column"');
+		// All three boxes still render.
+		expect(html.match(/data-testid="col-box"/g)?.length).toBe(3);
+		// The TwoColumn wrapper is present.
+		expect(html).toContain('data-testid="two-column"');
 
-        // No stray line breaks injected between the child blocks.
-        const inner = html.slice(
-            html.indexOf('data-testid="two-column"'),
-            html.lastIndexOf("</div>"),
-        );
-        expect(inner).not.toMatch(/<br\s*\/?>/);
-    });
+		// No stray line breaks injected between the child blocks.
+		const inner = html.slice(
+			html.indexOf('data-testid="two-column"'),
+			html.lastIndexOf("</div>"),
+		);
+		expect(inner).not.toMatch(/<br\s*\/?>/);
+	});
 
-    it("still preserves newlines for prose components by default", () => {
-        function Prose({ children }: { children?: ReactNode }): ReactElement {
-            return <section data-testid="prose">{children}</section>;
-        }
-        const components: MarkdownComponents = {
-            Prose: { component: Prose, block: true },
-        };
-        const html = shell(
-            <MarkdownViewer
-                content={"<Prose>\nLine one\nLine two\n</Prose>"}
-                components={components}
-            />,
-        );
-        expect(html).toContain("Line one");
-        expect(html).toContain("Line two");
-        // Multi-line prose keeps its line break.
-        expect(html).toMatch(/<br\s*\/?>/);
-    });
+	it("still preserves newlines for prose components by default", () => {
+		function Prose({ children }: { children?: ReactNode }): ReactElement {
+			return <section data-testid="prose">{children}</section>;
+		}
+		const components: MarkdownComponents = {
+			Prose: { component: Prose, block: true },
+		};
+		const html = shell(
+			<MarkdownViewer
+				content={"<Prose>\nLine one\nLine two\n</Prose>"}
+				components={components}
+			/>,
+		);
+		expect(html).toContain("Line one");
+		expect(html).toContain("Line two");
+		// Multi-line prose keeps its line break.
+		expect(html).toMatch(/<br\s*\/?>/);
+	});
 
-    it("disabling preserveNewlines collapses multi-line text to a single run", () => {
-        function Prose({ children }: { children?: ReactNode }): ReactElement {
-            return <section data-testid="prose">{children}</section>;
-        }
-        const components: MarkdownComponents = {
-            Prose: { component: Prose, block: true, preserveNewlines: false },
-        };
-        const html = shell(
-            <MarkdownViewer
-                content={"<Prose>\nLine one\nLine two\n</Prose>"}
-                components={components}
-            />,
-        );
-        expect(html).toContain("Line one");
-        expect(html).toContain("Line two");
-        const inner = html.slice(html.indexOf('data-testid="prose"'));
-        expect(inner).not.toMatch(/<br\s*\/?>/);
-    });
+	it("disabling preserveNewlines collapses multi-line text to a single run", () => {
+		function Prose({ children }: { children?: ReactNode }): ReactElement {
+			return <section data-testid="prose">{children}</section>;
+		}
+		const components: MarkdownComponents = {
+			Prose: { component: Prose, block: true, preserveNewlines: false },
+		};
+		const html = shell(
+			<MarkdownViewer
+				content={"<Prose>\nLine one\nLine two\n</Prose>"}
+				components={components}
+			/>,
+		);
+		expect(html).toContain("Line one");
+		expect(html).toContain("Line two");
+		const inner = html.slice(html.indexOf('data-testid="prose"'));
+		expect(inner).not.toMatch(/<br\s*\/?>/);
+	});
 });

package/tests/unit/MarkdownViewer/read-time.test.ts

@@ -1,21 +1,21 @@
 import {
-    estimateMarkdownReadTimeMinutes,
-    formatMarkdownReadTime,
-    markdownToPlainText,
+	estimateMarkdownReadTimeMinutes,
+	formatMarkdownReadTime,
+	markdownToPlainText,
 } from "@src/lib/markdown/read-time";
 import { describe, expect, it } from "vitest";
 
 describe("markdown read time", () => {
-    it("strips markdown syntax for word counting", () => {
-        expect(markdownToPlainText("# Title\n\n[link](https://example.com)")).toBe("Title link");
-    });
+	it("strips markdown syntax for word counting", () => {
+		expect(markdownToPlainText("# Title\n\n[link](https://example.com)")).toBe("Title link");
+	});
 
-    it("estimates at least one minute", () => {
-        expect(estimateMarkdownReadTimeMinutes("")).toBe(1);
-    });
+	it("estimates at least one minute", () => {
+		expect(estimateMarkdownReadTimeMinutes("")).toBe(1);
+	});
 
-    it("formats a read-time label", () => {
-        const words = Array.from({ length: 400 }, () => "word").join(" ");
-        expect(formatMarkdownReadTime(words)).toBe("2 min read");
-    });
+	it("formats a read-time label", () => {
+		const words = Array.from({ length: 400 }, () => "word").join(" ");
+		expect(formatMarkdownReadTime(words)).toBe("2 min read");
+	});
 });

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

@@ -6,90 +6,90 @@ 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 / MarkdownViewerRenderers", () => {
-    it("uses heading renderer override", () => {
-        const html = shell(
-            <MarkdownViewer
-                content="## Section title"
-                renderers={{
-                    heading: () => <span data-custom-heading>HEADING_MARKER</span>,
-                }}
-            />,
-        );
-        expect(html).toContain("HEADING_MARKER");
-        expect(html).not.toContain("Section title");
-    });
+	it("uses heading renderer override", () => {
+		const html = shell(
+			<MarkdownViewer
+				content="## Section title"
+				renderers={{
+					heading: () => <span data-custom-heading>HEADING_MARKER</span>,
+				}}
+			/>,
+		);
+		expect(html).toContain("HEADING_MARKER");
+		expect(html).not.toContain("Section title");
+	});
 
-    it("uses link renderer override", () => {
-        const html = shell(
-            <MarkdownViewer
-                content="[Example](https://example.com)"
-                renderers={{
-                    link: () => <span data-custom-link>LINK_MARKER</span>,
-                }}
-            />,
-        );
-        expect(html).toContain("LINK_MARKER");
-        expect(html).not.toContain("Example");
-        expect(html).not.toContain("https://example.com");
-    });
+	it("uses link renderer override", () => {
+		const html = shell(
+			<MarkdownViewer
+				content="[Example](https://example.com)"
+				renderers={{
+					link: () => <span data-custom-link>LINK_MARKER</span>,
+				}}
+			/>,
+		);
+		expect(html).toContain("LINK_MARKER");
+		expect(html).not.toContain("Example");
+		expect(html).not.toContain("https://example.com");
+	});
 
-    it("uses table renderer override without the scroll wrapper", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={`| A | B |
+	it("uses table renderer override without the scroll wrapper", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={`| A | B |
 | - | - |
 | 1 | 2 |`}
-                renderers={{
-                    table: () => <span data-custom-table>TABLE_MARKER</span>,
-                }}
-            />,
-        );
-        expect(html).toContain("TABLE_MARKER");
-        expect(html).not.toContain("<table");
-        expect(html).not.toContain("mantine-TableScrollContainer-scrollContainer");
-    });
+				renderers={{
+					table: () => <span data-custom-table>TABLE_MARKER</span>,
+				}}
+			/>,
+		);
+		expect(html).toContain("TABLE_MARKER");
+		expect(html).not.toContain("<table");
+		expect(html).not.toContain("mantine-TableScrollContainer-scrollContainer");
+	});
 
-    it("uses image renderer override", () => {
-        const html = shell(
-            <MarkdownViewer
-                content='![Alt text](https://example.com/image.png "Title")'
-                renderers={{
-                    image: () => <span data-custom-image>IMAGE_MARKER</span>,
-                }}
-            />,
-        );
-        expect(html).toContain("IMAGE_MARKER");
-        expect(html).not.toContain("Alt text");
-        expect(html).not.toContain("https://example.com/image.png");
-    });
+	it("uses image renderer override", () => {
+		const html = shell(
+			<MarkdownViewer
+				content='![Alt text](https://example.com/image.png "Title")'
+				renderers={{
+					image: () => <span data-custom-image>IMAGE_MARKER</span>,
+				}}
+			/>,
+		);
+		expect(html).toContain("IMAGE_MARKER");
+		expect(html).not.toContain("Alt text");
+		expect(html).not.toContain("https://example.com/image.png");
+	});
 });

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

@@ -6,64 +6,64 @@ 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 / runnable code", () => {
-    it("renders RunnableCodeBlock when fenced info includes runnable", () => {
-        const html = shell(
-            <MarkdownViewer content={'```surql runnable="SELECT 1"\nRETURN 1;\n```'} />,
-        );
-        expect(html).toContain("Run Query");
-    });
+	it("renders RunnableCodeBlock when fenced info includes runnable", () => {
+		const html = shell(
+			<MarkdownViewer content={'```surql runnable="SELECT 1"\nRETURN 1;\n```'} />,
+		);
+		expect(html).toContain("Run Query");
+	});
 
-    it("renders RunnableCodeBlock for a loose runnable flag with no value", () => {
-        const html = shell(<MarkdownViewer content={"```surql runnable\nRETURN 1;\n```"} />);
-        expect(html).toContain("Run Query");
-    });
+	it("renders RunnableCodeBlock for a loose runnable flag with no value", () => {
+		const html = shell(<MarkdownViewer content={"```surql runnable\nRETURN 1;\n```"} />);
+		expect(html).toContain("Run Query");
+	});
 
-    it("does not render RunnableCodeBlock for plain fenced code", () => {
-        const html = shell(<MarkdownViewer content={"```surql\nRETURN 1;\n```"} />);
-        expect(html).not.toContain("Run Query");
-    });
+	it("does not render RunnableCodeBlock for plain fenced code", () => {
+		const html = shell(<MarkdownViewer content={"```surql\nRETURN 1;\n```"} />);
+		expect(html).not.toContain("Run Query");
+	});
 
-    it("preserves runnable attribute casing through the render pipeline", () => {
-        const html = shell(
-            <MarkdownViewer
-                content={'```surql runnable="SELECT 1"\nRETURN 1;\n```'}
-                codeRenderers={{}}
-                renderers={{
-                    code: ({ runnable }) => <span data-runnable={runnable}>{runnable}</span>,
-                }}
-            />,
-        );
-        expect(html).toContain("SELECT 1");
-        expect(html).not.toContain("select 1");
-    });
+	it("preserves runnable attribute casing through the render pipeline", () => {
+		const html = shell(
+			<MarkdownViewer
+				content={'```surql runnable="SELECT 1"\nRETURN 1;\n```'}
+				codeRenderers={{}}
+				renderers={{
+					code: ({ runnable }) => <span data-runnable={runnable}>{runnable}</span>,
+				}}
+			/>,
+		);
+		expect(html).toContain("SELECT 1");
+		expect(html).not.toContain("select 1");
+	});
 });