@surrealdb/ui 1.2.16 → 1.2.17

package/tests/unit/MarkdownEditor/widget-store.test.ts

@@ -1,105 +0,0 @@
-import { createWidgetStore } from "@src/lib/markdown/editor/widgets/store";
-import { describe, expect, it } from "vitest";
-
-describe("createWidgetStore", () => {
-	it("unregisterHost removes only the portal whose host identity matches registration", () => {
-		const store = createWidgetStore();
-		const host214 = document.createElement("span");
-		const host227 = document.createElement("span");
-		store.register({
-			portalKey: 1,
-			id: "list-bullet:214",
-			host: host214,
-			render: () => null,
-		});
-		store.register({
-			portalKey: 2,
-			id: "list-bullet:227",
-			host: host227,
-			render: () => null,
-		});
-		expect(store.getSnapshot()).toHaveLength(2);
-
-		expect(store.hasPortalKey(1)).toBe(true);
-		expect(store.hasPortalKey(99)).toBe(false);
-
-		store.unregisterHost(host214);
-		expect(store.getSnapshot()).toHaveLength(1);
-		expect(store.getSnapshot()[0]?.id).toBe("list-bullet:227");
-
-		store.unregisterHost(host227);
-		expect(store.getSnapshot()).toHaveLength(0);
-	});
-
-	it("same logical id on two hosts keeps two portals until each host unregisters", () => {
-		const store = createWidgetStore();
-		const hostA = document.createElement("span");
-		const hostB = document.createElement("span");
-		store.register({
-			portalKey: 10,
-			id: "list-bullet:214",
-			host: hostA,
-			render: () => null,
-		});
-		store.register({
-			portalKey: 11,
-			id: "list-bullet:214",
-			host: hostB,
-			render: () => null,
-		});
-		expect(store.getSnapshot()).toHaveLength(2);
-
-		store.unregisterHost(hostA);
-		expect(store.getSnapshot()).toHaveLength(1);
-		expect(store.getSnapshot()[0]?.host).toBe(hostB);
-
-		store.unregisterHost(hostB);
-		expect(store.getSnapshot()).toHaveLength(0);
-	});
-
-	it("re-registering the same host evicts the previous portalKey (one portal per host)", () => {
-		const store = createWidgetStore();
-		const host = document.createElement("span");
-		store.register({
-			portalKey: 1,
-			id: "checkbox:2-5",
-			host,
-			render: () => null,
-		});
-		expect(store.getSnapshot()).toHaveLength(1);
-
-		store.register({
-			portalKey: 2,
-			id: "checkbox:2-5",
-			host,
-			render: () => null,
-		});
-		expect(store.getSnapshot()).toHaveLength(1);
-		expect(store.getSnapshot()[0]?.portalKey).toBe(2);
-		expect(store.hasPortalKey(1)).toBe(false);
-		expect(store.hasPortalKey(2)).toBe(true);
-	});
-
-	it("unregisterHost with expectedPortalKey skips when a newer registration owns the host", () => {
-		const store = createWidgetStore();
-		const host = document.createElement("span");
-		store.register({
-			portalKey: 10,
-			id: "checkbox:2-5",
-			host,
-			render: () => null,
-		});
-		store.register({
-			portalKey: 11,
-			id: "checkbox:2-5",
-			host,
-			render: () => null,
-		});
-		store.unregisterHost(host, 10);
-		expect(store.getSnapshot()).toHaveLength(1);
-		expect(store.getSnapshot()[0]?.portalKey).toBe(11);
-
-		store.unregisterHost(host, 11);
-		expect(store.getSnapshot()).toHaveLength(0);
-	});
-});

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

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

@@ -1,61 +0,0 @@
-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/code-title.test.tsx

@@ -1,62 +0,0 @@
-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 / code title", () => {
-	it("renders a title attribute as a caption above the code block", () => {
-		const html = shell(
-			<MarkdownViewer content={'```ts title="Example file"\nconst x = 1;\n```'} />,
-		);
-		expect(html).toContain("Example file");
-	});
-
-	it("omits the caption when no title is present", () => {
-		const html = shell(<MarkdownViewer content={"```ts\nconst x = 1;\n```"} />);
-		expect(html).not.toContain("code-block-caption");
-	});
-
-	it("passes the title through the code renderer override", () => {
-		const html = shell(
-			<MarkdownViewer
-				content={'```ts title="From override"\nconst x = 1;\n```'}
-				renderers={{
-					code: ({ title }) => <span data-title={title}>{title}</span>,
-				}}
-			/>,
-		);
-		expect(html).toContain("From override");
-	});
-});

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

@@ -1,164 +0,0 @@
-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 / 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 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("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("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.");
-	});
-
-	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");
-	});
-
-	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" 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/headings.test.tsx

@@ -1,40 +0,0 @@
-import { extractHeadings, markdownSourceFromString, parseMarkdownTree } from "@src/lib/markdown";
-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));
-
-		expect(headings).toHaveLength(2);
-		expect(headings.map((h) => h.text)).toEqual(["Inside quote", "Top"]);
-	});
-
-	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");
-	});
-});

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

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