@surrealdb/ui 1.2.2 → 1.2.4

package/tests/unit/MarkdownViewer/jsx-block-nesting.test.tsx

@@ -0,0 +1,234 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import type { MarkdownComponents } from "@src/lib/markdown";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import { Children, isValidElement, type ReactElement, type ReactNode } from "react";
+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,
+            }),
+        });
+    }
+});
+
+function shell(node: ReactElement): string {
+    return renderToString(
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            {node}
+        </MantineProvider>,
+    );
+}
+
+/**
+ * A `<Tabs>`-shaped block component that renders every item's label AND content
+ * (unlike Mantine's `Tabs`, which omits inactive panels in SSR). Lets a single
+ * `renderToString` assert the full parsed structure of all tab bodies.
+ */
+function EagerGroup({ children }: { children?: ReactNode }): ReactElement {
+    const items = Children.toArray(children).filter(isValidElement);
+    return (
+        <div data-eager-group>
+            <div
+                data-labels={items.map((el) => (el.props as { label?: string }).label).join("|")}
+            />
+            {items.map((el, i) => (
+                <section
+                    data-panel={i}
+                    key={(el.props as { label?: string }).label ?? i}
+                >
+                    {(el.props as { children?: ReactNode }).children}
+                </section>
+            ))}
+        </div>
+    );
+}
+
+function EagerItem({ children }: { children?: ReactNode }): ReactElement {
+    return <>{children}</>;
+}
+
+const EAGER_COMPONENTS: MarkdownComponents = {
+    Tabs: { component: EagerGroup, block: true },
+    TabItem: { component: EagerItem, block: true },
+};
+
+function stripTags(html: string): string {
+    return html.replace(/<[^>]+>/g, "");
+}
+
+describe("MarkdownViewer / JSX block nesting", () => {
+    it("pairs a Tabs block into exactly its authored TabItems (no synthetic tabs)", () => {
+        const content = `<Tabs syncKey="demo">
+<TabItem label="Create an instance">
+\tSurrealDB Cloud allows you to connect.
+
+\t**1. Create Instance.**
+
+\tWhen creating an instance, you enter the name.
+</TabItem>
+<TabItem label="Connect to your instance">
+\tYou can connect via [Surrealist](/docs/x).
+
+\tSince SurrealDB Cloud is closely integrated.
+</TabItem>
+</Tabs>`;
+        const html = shell(<MarkdownViewer content={content} />);
+
+        // Exactly two tab buttons with the authored labels — no paragraphs
+        // leaking out as extra "Tab N" children.
+        const tabButtons = html.match(/mantine-Tabs-tab\b/g) ?? [];
+        expect(tabButtons).toHaveLength(2);
+        const labels = [...html.matchAll(/mantine-Tabs-tabLabel">([^<]*)</g)].map((m) => m[1]);
+        expect(labels).toEqual(["Create an instance", "Connect to your instance"]);
+
+        // The active tab renders its full multi-paragraph markdown body.
+        const text = stripTags(html);
+        expect(text).toContain("SurrealDB Cloud allows you to connect.");
+        expect(text).toContain("1. Create Instance.");
+        expect(text).toContain("When creating an instance");
+    });
+
+    it("renders full multi-paragraph markdown for every TabItem (via eager group)", () => {
+        const content = `<Tabs syncKey="demo">
+<TabItem label="Create an instance">
+\tSurrealDB Cloud allows you to connect.
+
+\t**1. Create Instance.**
+
+\tWhen creating an instance, you enter the name.
+</TabItem>
+<TabItem label="Connect to your instance">
+\tYou can connect via [Surrealist](/docs/x).
+
+\t[Connect via Surrealist](/docs/y)
+
+\tSince SurrealDB Cloud is closely integrated.
+</TabItem>
+</Tabs>`;
+        const html = shell(
+            <MarkdownViewer
+                content={content}
+                components={EAGER_COMPONENTS}
+            />,
+        );
+
+        expect(html).toContain('data-labels="Create an instance|Connect to your instance"');
+        expect(html).not.toContain("Tab 2");
+
+        // Both panels rendered, in order, with all their paragraphs.
+        const text = stripTags(html);
+        expect(text).toContain("SurrealDB Cloud allows you to connect.");
+        expect(text).toContain("1. Create Instance.");
+        expect(text).toContain("When creating an instance");
+        expect(text).toContain("You can connect via Surrealist");
+        expect(text).toContain("closely integrated");
+        // Links inside both tabs survive.
+        expect(html).toContain('href="/docs/x"');
+        expect(html).toContain('href="/docs/y"');
+    });
+
+    it("renders a single-paragraph Tabs block (regression)", () => {
+        const content = `<Tabs syncKey="s">
+<TabItem label="First">
+Alpha content.
+</TabItem>
+<TabItem label="Second">
+Beta content.
+</TabItem>
+</Tabs>`;
+        const html = shell(
+            <MarkdownViewer
+                content={content}
+                components={EAGER_COMPONENTS}
+            />,
+        );
+        expect(html).toContain('data-labels="First|Second"');
+        expect(html).not.toContain("Tab 2");
+        const text = stripTags(html);
+        expect(text).toContain("Alpha content.");
+        expect(text).toContain("Beta content.");
+    });
+
+    it("renders block content around a Tabs block", () => {
+        const content = `# Heading
+
+Intro paragraph.
+
+<Tabs syncKey="s">
+<TabItem label="One">
+First tab.
+</TabItem>
+<TabItem label="Two">
+Second tab.
+</TabItem>
+</Tabs>
+
+Outro paragraph.`;
+        const html = shell(
+            <MarkdownViewer
+                content={content}
+                components={EAGER_COMPONENTS}
+            />,
+        );
+        const text = stripTags(html);
+        expect(text).toContain("Heading");
+        expect(text).toContain("Intro paragraph.");
+        expect(text).toContain("Outro paragraph.");
+        expect(html).toContain('data-labels="One|Two"');
+        expect(text).toContain("First tab.");
+        expect(text).toContain("Second tab.");
+    });
+
+    it("renders nested block components (Tabs inside a TabItem)", () => {
+        const content = `<Tabs syncKey="outer">
+<TabItem label="Outer A">
+Outer A body.
+
+<Tabs syncKey="inner">
+<TabItem label="Inner X">
+Inner X body.
+</TabItem>
+<TabItem label="Inner Y">
+Inner Y body.
+</TabItem>
+</Tabs>
+</TabItem>
+<TabItem label="Outer B">
+Outer B body.
+</TabItem>
+</Tabs>`;
+        const html = shell(
+            <MarkdownViewer
+                content={content}
+                components={EAGER_COMPONENTS}
+            />,
+        );
+        // Outer group has exactly the two authored tabs.
+        expect(html).toContain('data-labels="Outer A|Outer B"');
+        // Inner group nested inside Outer A has its own two tabs.
+        expect(html).toContain('data-labels="Inner X|Inner Y"');
+        expect(html).not.toContain("Tab 2");
+        const text = stripTags(html);
+        expect(text).toContain("Outer A body.");
+        expect(text).toContain("Outer B body.");
+        expect(text).toContain("Inner X body.");
+        expect(text).toContain("Inner Y body.");
+    });
+});

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

@@ -99,12 +99,12 @@ Hidden **bold** text
         expect(headings[1]?.text).toBe("Sub");
     });
 
-    it("onImage rewrites image src", () => {
+    it("onResolveMedia rewrites image src", () => {
         const html = shell(
             <MarkdownViewer
                 content='<img src="@ui/pictoAI" />'
                 jsxMode="render"
-                onImage={(node) => ({ ...node, src: "https://example.com/resolved.png" })}
+                onResolveMedia={(node) => ({ ...node, src: "https://example.com/resolved.png" })}
             />,
         );
         expect(html).toContain("https://example.com/resolved.png");

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

@@ -0,0 +1,143 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import type { MarkdownComponents } from "@src/lib/markdown";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import type { ReactElement, ReactNode } from "react";
+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,
+            }),
+        });
+    }
+});
+
+function shell(node: ReactElement): string {
+    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>;
+}
+
+function ColBox({ children }: { children?: ReactNode }): ReactElement {
+    return <div data-testid="col-box">{children}</div>;
+}
+
+const LAYOUT = `<TwoColumn>
+<ColBox></ColBox>
+<ColBox></ColBox>
+<ColBox></ColBox>
+</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}
+            />,
+        );
+
+        // 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}
+            />,
+        );
+
+        // 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*\/?>/);
+    });
+
+    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*\/?>/);
+    });
+});

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

@@ -0,0 +1,21 @@
+import {
+    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("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");
+    });
+});

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

@@ -63,6 +63,22 @@ describe("MarkdownViewer / MarkdownViewerRenderers", () => {
         expect(html).not.toContain("https://example.com");
     });
 
+    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");
+    });
+
     it("uses image renderer override", () => {
         const html = shell(
             <MarkdownViewer

package/tests/unit/MarkdownViewer/syntax-highlighting.test.tsx

@@ -0,0 +1,73 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import type { ReactElement } from "react";
+import { renderToString } from "react-dom/server";
+import { beforeAll, describe, expect, it } from "vitest";
+import { md } from "../../_setup/markdown-classes";
+
+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,
+            }),
+        });
+    }
+});
+
+function shell(node: ReactElement): string {
+    return renderToString(
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            {node}
+        </MantineProvider>,
+    );
+}
+
+describe("MarkdownViewer / syntax highlighting", () => {
+    it("highlights bash and sh fenced blocks", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={`\`\`\`bash
+cd project
+\`\`\`
+
+\`\`\`sh
+export FOO=bar
+\`\`\`
+`}
+            />,
+        );
+
+        expect(html).toContain(md.codeBlock);
+        expect(html).toMatch(/style="color:#ffd000"/);
+    });
+
+    it("highlights json fenced blocks", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={`\`\`\`json
+{
+  "name": "example"
+}
+\`\`\`
+`}
+            />,
+        );
+
+        expect(html).toContain(md.codeBlock);
+        expect(html).toMatch(/style="color:#00ff6e"/);
+    });
+});