@surrealdb/ui 1.2.2 → 1.2.4

package/tests/unit/MarkdownConformance/render-helpers.tsx

@@ -0,0 +1,88 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import type { MarkdownViewerProps } from "@src/primitives/MarkdownViewer";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+
+// jsdom lacks matchMedia, which Mantine touches during render.
+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,
+        }),
+    });
+}
+
+/** Render a `MarkdownViewer` to an HTML string inside a Mantine provider. */
+export function renderMarkdown(content: string, props?: Partial<MarkdownViewerProps>): string {
+    return renderToString(
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            <MarkdownViewer
+                content={content}
+                {...props}
+            />
+        </MantineProvider>,
+    );
+}
+
+/**
+ * Client-render a `MarkdownViewer` into jsdom and return its HTML. Unlike SSR
+ * `renderToString`, this exercises React error boundaries, which recover on the
+ * client (the environment where a throwing embedded component would blank the UI).
+ */
+export function renderMarkdownClient(
+    content: string,
+    props?: Partial<MarkdownViewerProps>,
+): string {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(
+            <MantineProvider
+                theme={MANTINE_THEME}
+                cssVariablesResolver={v8CssVariablesResolver}
+                forceColorScheme="dark"
+            >
+                <MarkdownViewer
+                    content={content}
+                    {...props}
+                />
+            </MantineProvider>,
+        );
+    });
+    const html = container.innerHTML;
+    act(() => {
+        root.unmount();
+    });
+    container.remove();
+    return html;
+}
+
+/** Strip all HTML tags and decode common entities, returning the visible text. */
+export function visibleText(html: string): string {
+    return html
+        .replace(/<style[^>]*>[\s\S]*?<\/style>/g, "")
+        .replace(/<[^>]+>/g, "")
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/&amp;/g, "&")
+        .replace(/\s+/g, " ")
+        .trim();
+}

package/tests/unit/MarkdownEditor/decorations.test.ts

@@ -7,10 +7,8 @@ import {
     markdownModeField,
     setMarkdownMode,
 } from "@src/lib/markdown";
-import { Callout } from "@src/lib/markdown/editor/callout";
 import { markdownDecorations } from "@src/lib/markdown/editor/decorations";
 import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/editor-focus";
-import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
 import { CalloutHeaderWidget } from "@src/lib/markdown/editor/widgets/callout-header-widget";
 import { CheckboxWidget } from "@src/lib/markdown/editor/widgets/checkbox-widget";
 import {
@@ -22,6 +20,8 @@ import { HeadingFoldWidget } from "@src/lib/markdown/editor/widgets/heading-fold
 import { ListBulletWidget } from "@src/lib/markdown/editor/widgets/list-bullet-widget";
 import { createWidgetStore } from "@src/lib/markdown/editor/widgets/store";
 import { TableWidget } from "@src/lib/markdown/editor/widgets/table-widget";
+import { Callout } from "@src/lib/markdown/grammar/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
 import type { CodeRenderer } from "@src/lib/markdown/types";
 import { describe, expect, it } from "vitest";
 import { md } from "../../_setup/markdown-classes";

package/tests/unit/MarkdownEditor/indented-fence.test.ts

@@ -0,0 +1,103 @@
+import { markdownSourceFromString, parseMarkdownTree } from "@src/lib/markdown";
+import { readCodeText } from "@src/lib/markdown/tree/code-node";
+import { describe, expect, it } from "vitest";
+
+/** Reconstructed body text of the (single) FencedCode node. */
+function fencedCodeBody(text: string): string | null {
+    const tree = parseMarkdownTree(text);
+    const src = markdownSourceFromString(text);
+    let body: string | null = null;
+    tree.iterate({
+        enter: (n) => {
+            if (n.name === "FencedCode" && body === null) body = readCodeText(n.node, src);
+        },
+    });
+    return body;
+}
+
+/** Top-level node names of a parsed document. */
+function topLevelNodes(text: string): { name: string; text: string }[] {
+    const tree = parseMarkdownTree(text);
+    const src = markdownSourceFromString(text);
+    const out: { name: string; text: string }[] = [];
+    let ch = tree.topNode.firstChild;
+    while (ch) {
+        out.push({ name: ch.name, text: src.slice(ch.from, ch.to) });
+        ch = ch.nextSibling;
+    }
+    return out;
+}
+
+/** The source text of the (single) FencedCode node, or null if none. */
+function fencedCodeText(text: string): string | null {
+    const tree = parseMarkdownTree(text);
+    const src = markdownSourceFromString(text);
+    let found: string | null = null;
+    tree.iterate({
+        enter: (n) => {
+            if (n.name === "FencedCode" && found === null) found = src.slice(n.from, n.to);
+        },
+    });
+    return found;
+}
+
+describe("MarkdownEditor / indented fenced code closing", () => {
+    it("closes a tab-indented fence and does not swallow following content", () => {
+        const text = "\t```ts\n\tcode\n\t```\ntext";
+        const fence = fencedCodeText(text);
+        expect(fence).not.toBeNull();
+        expect(fence).not.toContain("text");
+        // The trailing paragraph survives as its own node.
+        expect(
+            topLevelNodes(text).some((n) => n.name === "Paragraph" && n.text.includes("text")),
+        ).toBe(true);
+    });
+
+    it("closes a 4-space-indented fence and does not swallow following content", () => {
+        const text = "    ```ts\n    code\n    ```\ntext";
+        const fence = fencedCodeText(text);
+        expect(fence).not.toBeNull();
+        expect(fence).not.toContain("text");
+    });
+
+    it("does not let an indented fence swallow the closing </Tabs> tag", () => {
+        const text = [
+            "<Tabs>",
+            '\t<TabItem value="esm" label="ESM">',
+            "\t```ts",
+            "\tconst db = 1;",
+            "\t```",
+            "\t</TabItem>",
+            "</Tabs>",
+        ].join("\n");
+        // </Tabs> and </TabItem> must be their own HTMLBlock nodes, not buried
+        // inside a runaway FencedCode.
+        const fence = fencedCodeText(text);
+        expect(fence).not.toContain("</TabItem>");
+        expect(fence).not.toContain("</Tabs>");
+        const names = topLevelNodes(text).map((n) => n.name);
+        expect(names.filter((n) => n === "HTMLBlock").length).toBeGreaterThanOrEqual(4);
+    });
+
+    it("still parses a flush fence normally (regression)", () => {
+        const text = "```ts\ncode\n```\ntext";
+        expect(fencedCodeText(text)).toBe("```ts\ncode\n```");
+    });
+
+    it("still parses a fence nested in a list item (regression)", () => {
+        const text = ["- item", "  ```js", "  code;", "  ```", "", "after"].join("\n");
+        const fence = fencedCodeText(text);
+        expect(fence).not.toBeNull();
+        expect(fence).not.toContain("after");
+    });
+
+    // Matches MDX/micromark: exactly the opening fence's indentation is removed
+    // from each content line; deeper indentation is preserved.
+    it("strips the opening fence indent from content, preserving deeper indent", () => {
+        const text =
+            "\t```ts\n\timport { Surreal } from 'surrealdb';\n\t\tconst indented = 1;\n\t```";
+        expect(fencedCodeBody(text)).toBe(
+            "import { Surreal } from 'surrealdb';\n\tconst indented = 1;",
+        );
+    });
+});

package/tests/unit/MarkdownEditor/jsx-attr-scan.test.ts

@@ -4,7 +4,7 @@ import {
     parseAttributes,
     parseJsonAttribute,
     resolveAttributeValue,
-} from "@src/lib/markdown/tree/html-attrs";
+} from "@src/lib/markdown/grammar/html-attrs";
 import { describe, expect, it } from "vitest";
 
 describe("findJsonAttributeClose", () => {

package/tests/unit/MarkdownEditor/jsx-block-widget.test.ts

@@ -0,0 +1,92 @@
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { type Decoration, type DecorationSet, EditorView } from "@codemirror/view";
+import { markdownModeField, setMarkdownMode } from "@src/lib/markdown";
+import { markdownDecorations } from "@src/lib/markdown/editor/decorations";
+import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/editor-focus";
+import { JsxBlockWidget } from "@src/lib/markdown/editor/widgets/jsx-widget";
+import { createWidgetStore } from "@src/lib/markdown/editor/widgets/store";
+import { Callout } from "@src/lib/markdown/grammar/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
+import { afterEach, describe, expect, it } from "vitest";
+
+const views: EditorView[] = [];
+
+afterEach(() => {
+    for (const v of views.splice(0)) v.destroy();
+});
+
+/** Build a focused, preview-mode editor with the caret at `cursor`. */
+function preview(doc: string, cursor: number): EditorView {
+    const state = EditorState.create({
+        doc,
+        extensions: [
+            createMarkdownLanguage({ extensions: [Callout] }),
+            markdownModeField,
+            markdownDecorations({ widgetStore: createWidgetStore() }),
+        ],
+    });
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const view = new EditorView({ state, parent });
+    views.push(view);
+    view.dispatch({ effects: setMarkdownMode.of("preview") });
+    view.focus();
+    view.dispatch({ effects: setMarkdownEditorFocused.of(true) });
+    view.dispatch({ selection: EditorSelection.cursor(cursor) });
+    return view;
+}
+
+function jsxBlockRanges(view: EditorView): Array<{ from: number; to: number }> {
+    const out: Array<{ from: number; to: number }> = [];
+    for (const set of (view as unknown as { docView: { decorations: DecorationSet[] } }).docView
+        .decorations) {
+        const cursor = set.iter();
+        while (cursor.value) {
+            const widget = (cursor.value.spec as { widget?: Decoration }).widget;
+            if (widget instanceof JsxBlockWidget) {
+                out.push({ from: cursor.from, to: cursor.to });
+            }
+            cursor.next();
+        }
+    }
+    return out;
+}
+
+const TABS = `<Tabs syncKey="demo">
+<TabItem label="A">
+Alpha para one.
+
+Alpha para two.
+</TabItem>
+<TabItem label="B">
+Beta para one.
+</TabItem>
+</Tabs>`;
+
+// Some prose before the block so the caret can sit fully outside it.
+const TABS_WITH_PROSE = `Intro line.\n\n${TABS}`;
+
+describe("MarkdownEditor / JSX block widget", () => {
+    it("renders a multi-paragraph Tabs block as a single widget when the caret is outside", () => {
+        const view = preview(TABS_WITH_PROSE, 0); // caret in the intro line
+        const ranges = jsxBlockRanges(view);
+        expect(ranges).toHaveLength(1);
+        // Covers the whole <Tabs>…</Tabs> span, not a fragment of it.
+        const tabsStart = TABS_WITH_PROSE.indexOf("<Tabs");
+        expect(ranges[0]?.from).toBe(tabsStart);
+        expect(ranges[0]?.to).toBe(TABS_WITH_PROSE.length);
+    });
+
+    it("reveals the entire block as source (no partial widgets) when the caret is inside", () => {
+        // Caret inside the first tab's content.
+        const inside = TABS_WITH_PROSE.indexOf("Alpha para one.") + 3;
+        const view = preview(TABS_WITH_PROSE, inside);
+        expect(jsxBlockRanges(view)).toHaveLength(0);
+    });
+
+    it("keeps nested TabItem tags raw when the caret is on the closing tag line", () => {
+        const onClose = TABS_WITH_PROSE.indexOf("</Tabs>") + 1;
+        const view = preview(TABS_WITH_PROSE, onClose);
+        expect(jsxBlockRanges(view)).toHaveLength(0);
+    });
+});

package/tests/unit/MarkdownEditor/jsx-tag-grammar.test.ts

@@ -3,8 +3,8 @@ import {
     JSX_ATTR_STRING_NODE,
     JSX_EXPRESSION_CONTENT_NODE,
     JSX_EXPRESSION_MARK_NODE,
-} from "@src/lib/markdown/editor/jsx-tag";
-import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
+} from "@src/lib/markdown/grammar/jsx-tag";
+import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
 import { describe, expect, it } from "vitest";
 
 function parse(text: string) {

package/tests/unit/MarkdownEditor/list-indent.test.ts

@@ -1,8 +1,8 @@
 import { EditorSelection, EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import { Callout } from "@src/lib/markdown/editor/callout";
-import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
 import { indentMarkdownList } from "@src/lib/markdown/editor/list-indent";
+import { Callout } from "@src/lib/markdown/grammar/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
 import { afterEach, describe, expect, it } from "vitest";
 
 let view: EditorView;

package/tests/unit/MarkdownEditor/slash-commands.test.ts

@@ -1,10 +1,10 @@
 import { EditorSelection, EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import { Callout } from "@src/lib/markdown/editor/callout";
-import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
 import { DEFAULT_SLASH_COMMANDS } from "@src/lib/markdown/editor/slash/commands";
 import { slashDecorationsField } from "@src/lib/markdown/editor/slash/decorations";
 import { getSlashSession, slashSessionField } from "@src/lib/markdown/editor/slash/field";
+import { Callout } from "@src/lib/markdown/grammar/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
 import { describe, expect, it } from "vitest";
 
 function createView(doc: string, cursor = doc.length): EditorView {

package/tests/unit/MarkdownEditor/triggers.test.ts

@@ -1,8 +1,8 @@
 import { EditorSelection, EditorState } from "@codemirror/state";
 import { EditorView, runScopeHandlers } from "@codemirror/view";
-import { Callout } from "@src/lib/markdown/editor/callout";
-import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
 import { markdownPairKeymap, markdownSnippetHandler } from "@src/lib/markdown/editor/snippets";
+import { Callout } from "@src/lib/markdown/grammar/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
 import { describe, expect, it } from "vitest";
 
 function createView(doc: string, cursor?: number | { anchor: number; head: number }): EditorView {

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

@@ -0,0 +1,60 @@
+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";
+
+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 / callouts", () => {
+    it("renders the title and body without a leading <br> between them", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={"> [!NOTE]\n> Sandbox data is **not persistent**: it is reset later."}
+            />,
+        );
+
+        expect(html).toContain("Note");
+        expect(html).toContain("Sandbox data is");
+        expect(html).toContain("not persistent");
+
+        // The body paragraph must not open with a stray line break.
+        expect(html).not.toMatch(/<p[^>]*><br\s*\/?>/);
+    });
+
+    it("supports the title and body on adjacent lines", () => {
+        const html = shell(<MarkdownViewer content={"> [!WARNING]\n> Be careful here."} />);
+        expect(html).toContain("Warning");
+        expect(html).toContain("Be careful here.");
+        expect(html).not.toMatch(/<p[^>]*><br\s*\/?>/);
+    });
+});

package/tests/unit/MarkdownViewer/code-highlight.test.tsx

@@ -0,0 +1,61 @@
+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";
+
+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>,
+    );
+}
+
+// Dark-scheme syntax colors (see src/syntax/theme.ts).
+const STRING_COLOR = "#00ff6e";
+const PROPERTY_COLOR = "#e06c75";
+
+describe("MarkdownViewer / code syntax highlighting", () => {
+    it("highlights object keys as property names (not bare identifiers)", () => {
+        const code = ["{", '  "monthly_sales": "DEFINE TABLE monthly_sales TYPE NORMAL"', "}"].join(
+            "\n",
+        );
+        const html = shell(<MarkdownViewer content={`\`\`\`json\n${code}\n\`\`\``} />);
+        expect(html).toContain(PROPERTY_COLOR);
+        expect(html).toContain(STRING_COLOR);
+    });
+
+    it("keeps a multi-line string token highlighted as one string across lines", () => {
+        const code = ["const q = `DEFINE TABLE wishlist", "SCHEMAFULL PERMISSIONS NONE`;"].join(
+            "\n",
+        );
+        const html = shell(<MarkdownViewer content={`\`\`\`js\n${code}\n\`\`\``} />);
+        // Continuation line content must be inside a string-colored span — proof
+        // the whole block was parsed once rather than line by line.
+        expect(html).toMatch(new RegExp(`color:${STRING_COLOR}[^>]*>SCHEMAFULL PERMISSIONS NONE`));
+    });
+});

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

@@ -100,11 +100,65 @@ describe("MarkdownViewer / features", () => {
         expect(html).toContain("<code");
     });
 
+    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");
+    });
+
+    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");
+    });
+
     it("renders default Button component", () => {
         const html = shell(
-            <MarkdownViewer content={'<Button label="Go" url="https://surrealdb.com" />'} />,
+            <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("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/indented-jsx-children.test.tsx

@@ -0,0 +1,98 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import type { MarkdownComponents } from "@src/lib/markdown";
+import { parseMarkdownTree } 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 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;
+}
+
+function Boxes({ children }: { children?: ReactNode }): ReactElement {
+    return <div data-boxes>{children}</div>;
+}
+function IconBox({ title }: { title?: string }): ReactElement {
+    return <div data-iconbox>{title}</div>;
+}
+
+const components: MarkdownComponents = {
+    Boxes: { component: Boxes, block: true },
+    IconBox: { component: IconBox, block: true },
+};
+
+// Children indented with tabs, exactly as authored in docs' index.mdx.
+const CONTENT = `<Boxes>
+\t<IconBox
+\t\ttitle="Querying"
+\t\tdescription="Learn to query your data."
+\t\thref="/docs/learn/querying"
+\t\ticon="@ui/pictoSpeed"
+\t/>
+\t<IconBox
+\t\ttitle="Schema management"
+\t\tdescription="Learn how to shape data."
+\t\thref="/docs/learn/schema-management"
+\t\ticon="@ui/pictoPath"
+\t/>
+</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("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");
+    });
+});