@surrealdb/ui 1.2.12 → 1.2.13

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

@@ -2,104 +2,104 @@ 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);
+	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);
+		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(host214);
+		expect(store.getSnapshot()).toHaveLength(1);
+		expect(store.getSnapshot()[0]?.id).toBe("list-bullet:227");
 
-        store.unregisterHost(host227);
-        expect(store.getSnapshot()).toHaveLength(0);
-    });
+		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);
+	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(hostA);
+		expect(store.getSnapshot()).toHaveLength(1);
+		expect(store.getSnapshot()[0]?.host).toBe(hostB);
 
-        store.unregisterHost(hostB);
-        expect(store.getSnapshot()).toHaveLength(0);
-    });
+		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);
+	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);
-    });
+		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);
+	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);
-    });
+		store.unregisterHost(host, 11);
+		expect(store.getSnapshot()).toHaveLength(0);
+	});
 });

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

@@ -6,55 +6,55 @@ 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 / 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."}
-            />,
-        );
+	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");
+		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*\/?>/);
-    });
+		// 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*\/?>/);
-    });
+	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

@@ -6,33 +6,33 @@ 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>,
+	);
 }
 
 // Dark-scheme syntax colors (see src/syntax/theme.ts).
@@ -40,22 +40,22 @@ 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("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`));
-    });
+	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

@@ -6,57 +6,57 @@ 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 / 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("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("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");
-    });
+	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");
+	});
 });