@surrealdb/ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,211 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { extractHeadings, markdownSourceFromString, parseMarkdownTree } from "@src/lib/markdown";
+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 / JSX and HTML", () => {
+    it("renders a JSX component when jsxMode is render", () => {
+        const html = shell(<MarkdownViewer content={'<Since v="2.0.0" />'} />);
+        expect(html).toContain("2.0.0");
+        expect(html).not.toContain("<Since");
+    });
+
+    it("shows graceful fallback when jsxMode is graceful and component is missing", () => {
+        const html = shell(
+            <MarkdownViewer
+                content="<UnknownComponent />"
+                jsxMode="graceful"
+            />,
+        );
+        expect(html).toContain("unsupported JSX");
+    });
+
+    it("parses JSON attribute values on JSX components", () => {
+        function ValueEcho({ value }: { value: unknown }) {
+            return <span data-value={JSON.stringify(value)} />;
+        }
+
+        const html = shell(
+            <MarkdownViewer
+                content={"<ValueEcho value={42} />"}
+                jsxMode="render"
+                components={{ ValueEcho }}
+            />,
+        );
+        expect(html).toContain("data-value");
+        expect(html).toContain("42");
+    });
+
+    it("leaves inline brace text as plain text", () => {
+        const html = shell(<MarkdownViewer content="Count: {count}" />);
+        expect(html).toContain("{count}");
+    });
+
+    it("renders details/summary HTML blocks", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={`<details>
+<summary>Toggle</summary>
+
+Hidden **bold** text
+
+</details>`}
+                jsxMode="render"
+            />,
+        );
+        expect(html).toContain("Toggle");
+        expect(html).toContain("bold");
+    });
+
+    it("extractHeadings returns h2 and h3 slugs", () => {
+        const source = "## Section\n\n### Sub\n";
+        const tree = parseMarkdownTree(source);
+        const headings = extractHeadings(tree, markdownSourceFromString(source));
+        expect(headings).toHaveLength(2);
+        expect(headings[0]?.text).toBe("Section");
+        expect(headings[1]?.text).toBe("Sub");
+    });
+
+    it("onImage rewrites image src", () => {
+        const html = shell(
+            <MarkdownViewer
+                content='<img src="@ui/pictoAI" />'
+                jsxMode="render"
+                onImage={(node) => ({ ...node, src: "https://example.com/resolved.png" })}
+            />,
+        );
+        expect(html).toContain("https://example.com/resolved.png");
+    });
+
+    it("renders inline paired HTML anchor without duplicating link text", () => {
+        const html = shell(
+            <MarkdownViewer content={'Visit <a href="https://example.com">link text</a> here.'} />,
+        );
+        const matches = html.match(/link text/g) ?? [];
+        expect(matches).toHaveLength(1);
+    });
+
+    it("throws when jsxMode is throw and a JSX component is unsupported", () => {
+        expect(() =>
+            shell(
+                <MarkdownViewer
+                    content="<Foo />"
+                    jsxMode="throw"
+                />,
+            ),
+        ).toThrow(/Unsupported JSX component <Foo \/>/);
+    });
+
+    it("omits unsupported JSX when jsxMode is omit", () => {
+        const html = shell(
+            <MarkdownViewer
+                content="<Unknown />"
+                jsxMode="omit"
+            />,
+        );
+        expect(html).not.toContain("unsupported");
+        expect(html).not.toContain("Unsupported JSX");
+    });
+
+    it("adds heading id and autolink anchor by default", () => {
+        const html = shell(<MarkdownViewer content="## Hello" />);
+        expect(html).toMatch(/id="hello"/);
+        expect(html).toContain('href="#hello"');
+    });
+
+    it("renders the same output when tree and source are passed via tree prop", () => {
+        const content = "# Tree prop\n\nParagraph body.";
+        const tree = parseMarkdownTree(content);
+        const source = markdownSourceFromString(content);
+        const fromTree = shell(<MarkdownViewer tree={{ tree, source }} />);
+        const fromContent = shell(<MarkdownViewer content={content} />);
+        expect(fromTree).toBe(fromContent);
+    });
+
+    it("uses paragraph renderer override when provided", () => {
+        const html = shell(
+            <MarkdownViewer
+                content="Custom paragraph."
+                renderers={{
+                    paragraph: () => <span data-custom-paragraph>PARAGRAPH_MARKER</span>,
+                }}
+            />,
+        );
+        expect(html).toContain("PARAGRAPH_MARKER");
+        expect(html).not.toContain("Custom paragraph.");
+    });
+
+    it("renders multi-line paragraph JSX tags", () => {
+        const html = shell(<MarkdownViewer content={'<Since\n  v="2.0.0"\n/>'} />);
+        expect(html).toContain("2.0.0");
+        expect(html).not.toContain("<Since");
+    });
+
+    it("renders multiple JSX components on one line", () => {
+        const html = shell(
+            <MarkdownViewer content={'<Label label="Required" /><Label label="Optional" />'} />,
+        );
+        expect(html.match(/mantine-Badge-label/g)?.length).toBe(2);
+        expect(html).toContain("Required");
+        expect(html).toContain("Optional");
+    });
+
+    it("renders inline HTML on separate source lines with line breaks", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={`<span>foo</span> <span>bar</span>
+<span>hello</span>
+<span>world</span>`}
+            />,
+        );
+        expect(html).toContain("foo");
+        expect(html).toContain("bar");
+        expect(html).toContain("hello");
+        expect(html).toContain("world");
+        expect(html.match(/<br\s*\/?>/g)?.length).toBe(2);
+    });
+
+    it("renders jsx-only paragraphs on separate lines as separate p elements", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={'<Since v="1.5.0" />\n\n<Since v="2.0.0" prefix="Available since" />'}
+            />,
+        );
+        expect(html.match(/mantine-Badge-label/g)?.length).toBe(2);
+        const paragraphs = html.match(/<p[^>]*>[\s\S]*?<\/p>/g) ?? [];
+        expect(paragraphs.length).toBeGreaterThanOrEqual(2);
+    });
+});

package/tests/unit/MarkdownViewer/list-bullets.test.tsx

@@ -0,0 +1,49 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { unorderedBulletForDepth } from "@src/lib/markdown/view/components/ListBullet";
+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 { describe, expect, it } from "vitest";
+
+function shell(node: ReactElement): string {
+    return renderToString(
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            {node}
+        </MantineProvider>,
+    );
+}
+
+describe("unorderedBulletForDepth", () => {
+    it("cycles through bullet, circle, square by depth", () => {
+        expect(unorderedBulletForDepth(0)).toBe("•");
+        expect(unorderedBulletForDepth(1)).toBe("◦");
+        expect(unorderedBulletForDepth(2)).toBe("▪");
+    });
+
+    it("repeats the sequence for deeper nesting", () => {
+        expect(unorderedBulletForDepth(3)).toBe("•");
+        expect(unorderedBulletForDepth(4)).toBe("◦");
+        expect(unorderedBulletForDepth(5)).toBe("▪");
+    });
+});
+
+describe("MarkdownViewer / nested list bullets", () => {
+    it("renders distinct glyphs per nesting level", () => {
+        const content = ["- top", "  - second", "    - third"].join("\n");
+        const html = shell(<MarkdownViewer content={content} />);
+        expect(html).toContain("•");
+        expect(html).toContain("◦");
+        expect(html).toContain("▪");
+    });
+
+    it("keeps ordered list markers as numbers regardless of depth", () => {
+        const content = ["1. top", "   1. nested"].join("\n");
+        const html = shell(<MarkdownViewer content={content} />);
+        expect(html).not.toContain("◦");
+    });
+});

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

@@ -0,0 +1,65 @@
+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>,
+    );
+}
+
+// Syntax highlighting splits a line into per-token spans, so assert on single
+// identifier tokens that survive tokenisation rather than whole expressions.
+describe("MarkdownViewer / code inside lists", () => {
+    it("renders a fenced code block nested in a list item", () => {
+        const content = ["- Item with code:", "  ```js", "  alphaVar;", "  ```"].join("\n");
+        const html = shell(<MarkdownViewer content={content} />);
+        expect(html).toContain("alphaVar");
+    });
+
+    it("renders multiple code lines nested in a list item", () => {
+        const content = ["- Item:", "  ```js", "  alphaVar;", "  betaVar;", "  ```"].join("\n");
+        const html = shell(<MarkdownViewer content={content} />);
+        expect(html).toContain("alphaVar");
+        expect(html).toContain("betaVar");
+    });
+
+    it("renders a code block that is the first child of a list item", () => {
+        const content = ["- ```ts", "  codeFirstVar;", "  ```"].join("\n");
+        const html = shell(<MarkdownViewer content={content} />);
+        expect(html).toContain("codeFirstVar");
+    });
+
+    it("renders a fenced code block inside a task list item", () => {
+        const content = ["- [ ] Task with code", "  ```js", "  taskCodeVar;", "  ```"].join("\n");
+        const html = shell(<MarkdownViewer content={content} />);
+        expect(html).toContain("taskCodeVar");
+    });
+});

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

@@ -0,0 +1,79 @@
+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 / 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 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 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

@@ -0,0 +1,69 @@
+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 / 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 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("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");
+    });
+});

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

@@ -0,0 +1,93 @@
+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, mdViewer } from "../../_setup/markdown-classes";
+
+// Mantine's `useComputedColorScheme` reaches for `window.matchMedia` even
+// during a `renderToString` pass; stub it so the SSR test can exercise the
+// full viewer pipeline (including `MarkdownCodeLines`).
+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 / SSR", () => {
+    it("renders to a static HTML string with semantic markdown structure", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={`# Title
+
+Body with **bold**, *italic* and [a link](https://surrealdb.com).
+
+- One
+- Two
+
+1. Alpha
+2. Beta
+
+\`\`\`ts
+return true;
+\`\`\`
+`}
+            />,
+        );
+
+        // Wrapper.
+        expect(html).toContain(mdViewer.viewerRoot);
+
+        // Semantic heading.
+        expect(html).toContain(md.h1);
+        expect(html).toMatch(/id="title"/);
+        expect(html).toContain("Title");
+
+        // Paragraph and inline marks (paragraph uses bare <p> without module class).
+        expect(html).toMatch(/<p[^>]*>Body with/);
+        expect(html).toContain(md.strong);
+        expect(html).toContain("bold</strong>");
+        expect(html).toContain(md.emphasis);
+        expect(html).toContain(md.link);
+
+        // Semantic lists.
+        expect(html).toContain(md.list);
+        expect(html).toContain("<li");
+
+        // Semantic code block.
+        expect(html).toContain(md.codeBlock);
+        expect(html).toContain("<code");
+        expect(html).toContain("</code></pre>");
+
+        // Raw markdown markers must not leak through.
+        expect(html).not.toContain("**bold**");
+        expect(html).not.toContain("*italic*");
+        expect(html).not.toContain("## ");
+        expect(html).not.toMatch(/<p[^>]*>#/);
+    });
+});

package/dist/yoopta.css

@@ -1 +0,0 @@
-:root[data-mantine-color-scheme=dark]{--yoopta-ui-background: 250 20% 7%;--yoopta-ui-foreground: 240 7% 96%;--yoopta-ui-muted: 252 16% 14%;--yoopta-ui-muted-foreground: 255 5% 59%;--yoopta-ui-border: 252 16% 14%;--yoopta-ui-ring: 240 7% 96%;--yoopta-ui-accent: 255 17% 14%;--yoopta-ui-accent-foreground: 240 7% 96%;--yoopta-ui-primary: 255 86% 63%;--yoopta-ui-primary-foreground: 0 0% 100%;--yoopta-ui-destructive: 0 84% 60%;--yoopta-ui-destructive-foreground: 0 0% 100%;--yoopta-ui-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--yoopta-ui-shadow: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .3);--yoopta-ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -4px rgba(0, 0, 0, .3);--yoopta-ui-shadow-xl: 0 16px 48px -12px rgba(0, 0, 0, .5), 0 4px 16px -4px rgba(0, 0, 0, .3)}:root[data-mantine-color-scheme=light]{--yoopta-ui-background: 240 7% 96%;--yoopta-ui-foreground: 250 20% 7%;--yoopta-ui-muted: 245 7% 90%;--yoopta-ui-muted-foreground: 255 5% 59%;--yoopta-ui-border: 248 7% 88%;--yoopta-ui-ring: 250 20% 7%;--yoopta-ui-accent: 245 7% 90%;--yoopta-ui-accent-foreground: 250 20% 7%;--yoopta-ui-primary: 255 86% 63%;--yoopta-ui-primary-foreground: 0 0% 100%;--yoopta-ui-destructive: 0 84% 60%;--yoopta-ui-destructive-foreground: 0 0% 100%}:root{--yoopta-ui-radius-sm: var(--mantine-radius-xs);--yoopta-ui-radius: var(--mantine-radius-sm);--yoopta-ui-radius-lg: var(--mantine-radius-md)}.yoopta-block[data-hovered-block=true],.yoopta-block:hover{background:transparent!important}.yoopta-block:last-child{margin-bottom:0}.yoopta-block p,.yoopta-block h1,.yoopta-block h2,.yoopta-block h3,.yoopta-block blockquote,.yoopta-block ul,.yoopta-block ol,.yoopta-block li{margin:var(--mantine-spacing-xs) 0}.yoopta-block h1,.yoopta-block h2,.yoopta-block h3{margin-bottom:0;margin-top:var(--mantine-spacing-lg);color:var(--mantine-color-bright)}.yoopta-slate{outline:none;border-radius:var(--mantine-radius-xs);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .25s ease;padding:var(--mantine-spacing-xs)}.yoopta-block[data-block-selected=true]>.yoopta-slate{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mantine-color-violet-3) 75%,var(--surreal-glass-subtle))}.yoopta-placeholder{position:relative}.yoopta-placeholder:before{content:attr(data-placeholder);color:var(--mantine-color-text);opacity:var(--surreal-opacity-strong);position:absolute;top:0;left:0;pointer-events:none;white-space:nowrap}.yoopta-ui-slash-command-group-heading{padding-left:6px!important}.cdn-image-overlay-input{background-color:#ffffff26!important;border-color:#ffffff40!important;color:#fff!important}.cdn-image-overlay-input::placeholder{color:#ffffff80!important}.cdn-image-overlay-input:focus{border-color:#ffffff80!important}.cdn-image-overlay-label{color:#fff!important}.yoopta-heading-link{opacity:0;transition:opacity .15s ease}h1:hover>.yoopta-heading-link,h2:hover>.yoopta-heading-link,h3:hover>.yoopta-heading-link{opacity:1}