@surrealdb/ui 1.2.12 → 1.2.14

package/tests/e2e/MarkdownEditor/jsx-block-content.test.tsx

@@ -3,30 +3,31 @@ import type { MarkdownComponents } from "@src/lib/markdown";
 import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
 
 function Card({ label }: { label: string }) {
-    return (
-        <Paper
-            withBorder
-            p="xs"
-            radius="sm"
-            mb="xs"
-        >
-            <Group gap="xs">
-                <Text size="sm">value =</Text>
-                <Text size="sm">{label}</Text>
-            </Group>
-        </Paper>
-    );
+	return (
+		<Paper
+			withBorder
+			p="xs"
+			radius="sm"
+			mb="xs"
+		>
+			<Group gap="xs">
+				<Text size="sm">value =</Text>
+				<Text size="sm">{label}</Text>
+			</Group>
+		</Paper>
+	);
 }
 
 const inlineComponents: MarkdownComponents = {
-    Card,
+	Card,
 };
 
 const blockComponents: MarkdownComponents = {
-    Card: { component: Card, block: true },
+	Card: { component: Card, block: true },
 };
 
 const ONE_PER_LINE_DOC = `# Heading
@@ -44,199 +45,199 @@ const MANY_PER_LINE_DOC = `# Heading
 `;
 
 function renderEditor(doc: string, components: MarkdownComponents) {
-    return (
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            <Paper
-                p="md"
-                withBorder
-            >
-                <MarkdownEditor
-                    mode="preview"
-                    document={doc}
-                    autoFocus={false}
-                    jsxMode="render"
-                    components={components}
-                />
-            </Paper>
-        </MantineProvider>
-    );
+	return (
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<Paper
+				p="md"
+				withBorder
+			>
+				<MarkdownEditor
+					mode="preview"
+					document={doc}
+					autoFocus={false}
+					jsxMode="render"
+					components={components}
+				/>
+			</Paper>
+		</MantineProvider>
+	);
 }
 
 function lineHeightsForInlineWidgets(): number[] {
-    const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
-    return lines
-        .filter((line) => line.querySelector('[data-md-widget="JsxInlineWidget"]'))
-        .map((line) => line.getBoundingClientRect().height);
+	const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
+	return lines
+		.filter((line) => line.querySelector('[data-md-widget="JsxInlineWidget"]'))
+		.map((line) => line.getBoundingClientRect().height);
 }
 
 /** Block replace widgets render between `.cm-line` rows, not inside them. */
 function blockWidgetHostLine(widget: HTMLElement): HTMLElement | null {
-    let el: HTMLElement | null = widget;
-    while (el) {
-        if (el.classList.contains("cm-line")) return el;
-        el = el.parentElement;
-    }
-    return null;
+	let el: HTMLElement | null = widget;
+	while (el) {
+		if (el.classList.contains("cm-line")) return el;
+		el = el.parentElement;
+	}
+	return null;
 }
 
 async function mountPreviewEditor(doc: string, components: MarkdownComponents) {
-    mountStory(renderEditor(doc, components));
-    const view = await getEditorView();
-    view.contentDOM.blur();
-    await nextFrame();
-    await nextFrame();
-    return view;
+	mountStory(renderEditor(doc, components));
+	const view = await getEditorView();
+	view.contentDOM.blur();
+	await nextFrame();
+	await nextFrame();
+	return view;
 }
 
 describe("MarkdownEditor / inline JSX rendering block content", () => {
-    it("does not stack cm-widgetBuffer images above and below the widget", async () => {
-        mountStory(renderEditor(ONE_PER_LINE_DOC, inlineComponents));
-
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
-        await nextFrame();
-
-        const cardWidgets = document.querySelectorAll<HTMLElement>(
-            '[data-md-widget="JsxInlineWidget"]',
-        );
-        expect(cardWidgets.length).toBe(3);
-
-        const widgetHeights = Array.from(cardWidgets).map((w) => w.getBoundingClientRect().height);
-        const lineHeights = lineHeightsForInlineWidgets();
-        expect(lineHeights.length).toBe(3);
-
-        for (let i = 0; i < lineHeights.length; i++) {
-            const lineHeight = lineHeights[i] ?? 0;
-            const widgetHeight = widgetHeights[i] ?? 0;
-            expect(widgetHeight).toBeGreaterThan(0);
-            expect(lineHeight).toBeGreaterThan(0);
-            expect(lineHeight).toBeLessThan(widgetHeight + 20);
-        }
-    });
-
-    it("keeps multiple inline JSX widgets on the same line side-by-side", async () => {
-        mountStory(renderEditor(MANY_PER_LINE_DOC, inlineComponents));
-
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
-        await nextFrame();
-
-        const cardWidgets = document.querySelectorAll<HTMLElement>(
-            '[data-md-widget="JsxInlineWidget"]',
-        );
-        expect(cardWidgets.length).toBe(3);
-
-        const rects = Array.from(cardWidgets).map((w) => w.getBoundingClientRect());
-        const firstTop = rects[0]?.top ?? 0;
-        const tolerance = 4;
-        for (const r of rects) {
-            expect(Math.abs(r.top - firstTop)).toBeLessThan(tolerance);
-        }
-    });
+	it("does not stack cm-widgetBuffer images above and below the widget", async () => {
+		mountStory(renderEditor(ONE_PER_LINE_DOC, inlineComponents));
+
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
+		await nextFrame();
+
+		const cardWidgets = document.querySelectorAll<HTMLElement>(
+			'[data-md-widget="JsxInlineWidget"]',
+		);
+		expect(cardWidgets.length).toBe(3);
+
+		const widgetHeights = Array.from(cardWidgets).map((w) => w.getBoundingClientRect().height);
+		const lineHeights = lineHeightsForInlineWidgets();
+		expect(lineHeights.length).toBe(3);
+
+		for (let i = 0; i < lineHeights.length; i++) {
+			const lineHeight = lineHeights[i] ?? 0;
+			const widgetHeight = widgetHeights[i] ?? 0;
+			expect(widgetHeight).toBeGreaterThan(0);
+			expect(lineHeight).toBeGreaterThan(0);
+			expect(lineHeight).toBeLessThan(widgetHeight + 20);
+		}
+	});
+
+	it("keeps multiple inline JSX widgets on the same line side-by-side", async () => {
+		mountStory(renderEditor(MANY_PER_LINE_DOC, inlineComponents));
+
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
+		await nextFrame();
+
+		const cardWidgets = document.querySelectorAll<HTMLElement>(
+			'[data-md-widget="JsxInlineWidget"]',
+		);
+		expect(cardWidgets.length).toBe(3);
+
+		const rects = Array.from(cardWidgets).map((w) => w.getBoundingClientRect());
+		const firstTop = rects[0]?.top ?? 0;
+		const tolerance = 4;
+		for (const r of rects) {
+			expect(Math.abs(r.top - firstTop)).toBeLessThan(tolerance);
+		}
+	});
 });
 
 describe("MarkdownEditor / block JSX components", () => {
-    it("renders block components via JsxBlockWidget with an edit-source action", async () => {
-        await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
-
-        const blockWidgets = document.querySelectorAll<HTMLElement>(
-            '[data-md-widget="JsxBlockWidget"]',
-        );
-        expect(blockWidgets.length).toBe(3);
-        expect(document.querySelectorAll('[data-md-widget="JsxInlineWidget"]').length).toBe(0);
-
-        const editButtons = document.querySelectorAll<HTMLButtonElement>(
-            '[aria-label="Edit source"]',
-        );
-        expect(editButtons.length).toBeGreaterThanOrEqual(3);
-    });
-
-    it("renders block widgets between cm-lines, not inside a cm-line", async () => {
-        await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
-
-        expect(document.querySelectorAll(".jsx-block-line-host").length).toBe(0);
-
-        for (const widget of Array.from(
-            document.querySelectorAll<HTMLElement>('[data-md-widget="JsxBlockWidget"]'),
-        )) {
-            expect(blockWidgetHostLine(widget)).toBeNull();
-            const lineSibling = widget.closest(".cm-line");
-            expect(lineSibling).toBeNull();
-        }
-    });
-
-    it("block widgets do not get cm-widgetBuffer spacer images", async () => {
-        await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
-
-        for (const widget of Array.from(
-            document.querySelectorAll<HTMLElement>('[data-md-widget="JsxBlockWidget"]'),
-        )) {
-            const parent = widget.parentElement;
-            expect(parent?.querySelector("img.cm-widgetBuffer")).toBeNull();
-        }
-    });
-
-    it("clicking the edit-source action selects the component source range", async () => {
-        const view = await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
-
-        const editButton = document.querySelector<HTMLButtonElement>('[aria-label="Edit source"]');
-        expect(editButton).toBeTruthy();
-        editButton?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
-        await nextFrame();
-        await nextFrame();
-
-        const selection = view.state.selection.main;
-        const selectedSource = view.state.sliceDoc(selection.from, selection.to);
-        expect(selectedSource.trim()).toBe('<Card label="Alpha" />');
-    });
-
-    it("renders block components embedded in a mixed paragraph on a dedicated row", async () => {
-        const doc = 'Intro text <Card label="Mid" /> trailing text.';
-        await mountPreviewEditor(doc, blockComponents);
-
-        const blockWidgets = document.querySelectorAll<HTMLElement>(
-            '[data-md-widget="JsxBlockWidget"]',
-        );
-        expect(blockWidgets.length).toBe(1);
-        const midWidget = blockWidgets[0];
-        expect(midWidget?.textContent).toContain("Mid");
-        expect(midWidget && blockWidgetHostLine(midWidget)).toBeNull();
-
-        const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
-        expect(lines.some((line) => line.classList.contains("jsx-block-line-host"))).toBe(false);
-
-        const introLine = lines.find((line) => line.textContent?.includes("Intro text"));
-        const trailingLine = lines.find((line) => line.textContent?.includes("trailing text"));
-        expect(introLine).toBeTruthy();
-        expect(trailingLine).toBeTruthy();
-        expect(introLine?.style.display).not.toBe("flex");
-        expect(trailingLine?.style.display).not.toBe("flex");
-    });
-
-    it("renders block HTML embedded in a mixed paragraph on a dedicated row", async () => {
-        const doc = "hello world `snippet` <div>test</div> foo bar";
-        await mountPreviewEditor(doc, blockComponents);
-
-        const blockWidgets = document.querySelectorAll<HTMLElement>(
-            '[data-md-widget="JsxBlockWidget"]',
-        );
-        expect(blockWidgets.length).toBe(1);
-        const divWidget = blockWidgets[0];
-        expect(divWidget?.textContent).toContain("test");
-        expect(divWidget && blockWidgetHostLine(divWidget)).toBeNull();
-
-        const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
-        const helloLine = lines.find((line) => line.textContent?.includes("hello world"));
-        const fooLine = lines.find((line) => line.textContent?.includes("foo bar"));
-        expect(helloLine).toBeTruthy();
-        expect(fooLine).toBeTruthy();
-        expect(helloLine?.classList.contains("jsx-block-line-host")).toBe(false);
-        expect(fooLine?.classList.contains("jsx-block-line-host")).toBe(false);
-    });
+	it("renders block components via JsxBlockWidget with an edit-source action", async () => {
+		await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
+
+		const blockWidgets = document.querySelectorAll<HTMLElement>(
+			'[data-md-widget="JsxBlockWidget"]',
+		);
+		expect(blockWidgets.length).toBe(3);
+		expect(document.querySelectorAll('[data-md-widget="JsxInlineWidget"]').length).toBe(0);
+
+		const editButtons = document.querySelectorAll<HTMLButtonElement>(
+			'[aria-label="Edit source"]',
+		);
+		expect(editButtons.length).toBeGreaterThanOrEqual(3);
+	});
+
+	it("renders block widgets between cm-lines, not inside a cm-line", async () => {
+		await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
+
+		expect(document.querySelectorAll(".jsx-block-line-host").length).toBe(0);
+
+		for (const widget of Array.from(
+			document.querySelectorAll<HTMLElement>('[data-md-widget="JsxBlockWidget"]'),
+		)) {
+			expect(blockWidgetHostLine(widget)).toBeNull();
+			const lineSibling = widget.closest(".cm-line");
+			expect(lineSibling).toBeNull();
+		}
+	});
+
+	it("block widgets do not get cm-widgetBuffer spacer images", async () => {
+		await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
+
+		for (const widget of Array.from(
+			document.querySelectorAll<HTMLElement>('[data-md-widget="JsxBlockWidget"]'),
+		)) {
+			const parent = widget.parentElement;
+			expect(parent?.querySelector("img.cm-widgetBuffer")).toBeNull();
+		}
+	});
+
+	it("clicking the edit-source action selects the component source range", async () => {
+		const view = await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
+
+		const editButton = document.querySelector<HTMLButtonElement>('[aria-label="Edit source"]');
+		expect(editButton).toBeTruthy();
+		editButton?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+		await nextFrame();
+		await nextFrame();
+
+		const selection = view.state.selection.main;
+		const selectedSource = view.state.sliceDoc(selection.from, selection.to);
+		expect(selectedSource.trim()).toBe('<Card label="Alpha" />');
+	});
+
+	it("renders block components embedded in a mixed paragraph on a dedicated row", async () => {
+		const doc = 'Intro text <Card label="Mid" /> trailing text.';
+		await mountPreviewEditor(doc, blockComponents);
+
+		const blockWidgets = document.querySelectorAll<HTMLElement>(
+			'[data-md-widget="JsxBlockWidget"]',
+		);
+		expect(blockWidgets.length).toBe(1);
+		const midWidget = blockWidgets[0];
+		expect(midWidget?.textContent).toContain("Mid");
+		expect(midWidget && blockWidgetHostLine(midWidget)).toBeNull();
+
+		const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
+		expect(lines.some((line) => line.classList.contains("jsx-block-line-host"))).toBe(false);
+
+		const introLine = lines.find((line) => line.textContent?.includes("Intro text"));
+		const trailingLine = lines.find((line) => line.textContent?.includes("trailing text"));
+		expect(introLine).toBeTruthy();
+		expect(trailingLine).toBeTruthy();
+		expect(introLine?.style.display).not.toBe("flex");
+		expect(trailingLine?.style.display).not.toBe("flex");
+	});
+
+	it("renders block HTML embedded in a mixed paragraph on a dedicated row", async () => {
+		const doc = "hello world `snippet` <div>test</div> foo bar";
+		await mountPreviewEditor(doc, blockComponents);
+
+		const blockWidgets = document.querySelectorAll<HTMLElement>(
+			'[data-md-widget="JsxBlockWidget"]',
+		);
+		expect(blockWidgets.length).toBe(1);
+		const divWidget = blockWidgets[0];
+		expect(divWidget?.textContent).toContain("test");
+		expect(divWidget && blockWidgetHostLine(divWidget)).toBeNull();
+
+		const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
+		const helloLine = lines.find((line) => line.textContent?.includes("hello world"));
+		const fooLine = lines.find((line) => line.textContent?.includes("foo bar"));
+		expect(helloLine).toBeTruthy();
+		expect(fooLine).toBeTruthy();
+		expect(helloLine?.classList.contains("jsx-block-line-host")).toBe(false);
+		expect(fooLine?.classList.contains("jsx-block-line-host")).toBe(false);
+	});
 });

package/tests/e2e/MarkdownEditor/jsx-highlight.test.tsx

@@ -2,6 +2,7 @@ import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
 import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
 
 const TAG = '<Since v={"2.0.0"} t="true" b="false" />';
@@ -12,57 +13,57 @@ const STRING_COLOR = "rgb(0, 255, 110)";
 const PROPERTY_COLOR = "rgb(224, 108, 117)";
 
 describe("MarkdownEditor / JSX attribute highlighting", () => {
-    it("does not let the nested HTML parser mis-highlight attributes after an expression", async () => {
-        mountStory(
-            <MantineProvider
-                theme={MANTINE_THEME}
-                cssVariablesResolver={v8CssVariablesResolver}
-                forceColorScheme="dark"
-            >
-                <Paper
-                    p="md"
-                    withBorder
-                >
-                    <MarkdownEditor
-                        mode="source"
-                        document={TAG}
-                        autoFocus={false}
-                        mih={120}
-                    />
-                </Paper>
-            </MantineProvider>,
-        );
-        await getEditorView();
-        await nextFrame();
+	it("does not let the nested HTML parser mis-highlight attributes after an expression", async () => {
+		mountStory(
+			<MantineProvider
+				theme={MANTINE_THEME}
+				cssVariablesResolver={v8CssVariablesResolver}
+				forceColorScheme="dark"
+			>
+				<Paper
+					p="md"
+					withBorder
+				>
+					<MarkdownEditor
+						mode="source"
+						document={TAG}
+						autoFocus={false}
+						mih={120}
+					/>
+				</Paper>
+			</MantineProvider>,
+		);
+		await getEditorView();
+		await nextFrame();
 
-        const colors = readLineTokenColors();
-        expect(colors.v).toBe(PROPERTY_COLOR);
-        expect(colors.t).toBe(PROPERTY_COLOR);
-        expect(colors.b).toBe(PROPERTY_COLOR);
-        expect(colors.trueQuoted).toBe(STRING_COLOR);
-        expect(colors.falseQuoted).toBe(STRING_COLOR);
-        expect(colors.exprLiteral).toBe(STRING_COLOR);
-    });
+		const colors = readLineTokenColors();
+		expect(colors.v).toBe(PROPERTY_COLOR);
+		expect(colors.t).toBe(PROPERTY_COLOR);
+		expect(colors.b).toBe(PROPERTY_COLOR);
+		expect(colors.trueQuoted).toBe(STRING_COLOR);
+		expect(colors.falseQuoted).toBe(STRING_COLOR);
+		expect(colors.exprLiteral).toBe(STRING_COLOR);
+	});
 });
 
 function readLineTokenColors(): Record<string, string> {
-    const line = document.querySelector(".cm-line");
-    expect(line).not.toBeNull();
-    if (!line) return {};
+	const line = document.querySelector(".cm-line");
+	expect(line).not.toBeNull();
+	if (!line) return {};
 
-    const out: Record<string, string> = {};
-    for (const span of Array.from(line.querySelectorAll("span"))) {
-        const text = span.textContent ?? "";
-        if (!text) continue;
-        const color = getComputedStyle(span).color;
+	const out: Record<string, string> = {};
+	for (const span of Array.from(line.querySelectorAll("span"))) {
+		const text = span.textContent ?? "";
+		if (!text) continue;
+		const color = getComputedStyle(span).color;
 
-        if (text === "v") out.v = color;
-        if (text === "t") out.t = color;
-        if (text === "b") out.b = color;
-        if (text === '"2.0.0"') out.exprLiteral = color;
-        if (text === '"true"') out.trueQuoted = color;
-        if (text === '"false"') out.falseQuoted = color;
-    }
+		if (text === "v") out.v = color;
+		if (text === "t") out.t = color;
+		if (text === "b") out.b = color;
+		if (text === '"2.0.0"') out.exprLiteral = color;
+		if (text === '"true"') out.trueQuoted = color;
+		if (text === '"false"') out.falseQuoted = color;
+	}
 
-    return out;
+	return out;
 }

package/tests/e2e/MarkdownEditor/jsx-inline-badges.test.tsx

@@ -2,6 +2,7 @@ import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
 import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
 
 const JSX_BADGES_DOC = `### Since
@@ -22,38 +23,38 @@ const JSX_BADGES_DOC = `### Since
 `;
 
 describe("MarkdownEditor / inline JSX badges", () => {
-    it("renders all Since and Label components inline like the viewer", async () => {
-        mountStory(
-            <MantineProvider
-                theme={MANTINE_THEME}
-                cssVariablesResolver={v8CssVariablesResolver}
-                forceColorScheme="dark"
-            >
-                <Paper
-                    p="md"
-                    withBorder
-                >
-                    <MarkdownEditor
-                        mode="preview"
-                        document={JSX_BADGES_DOC}
-                        autoFocus={false}
-                        jsxMode="render"
-                    />
-                </Paper>
-            </MantineProvider>,
-        );
-
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
-
-        const badges = document.querySelectorAll(".mantine-Badge-label");
-        expect(badges.length).toBe(7);
-        expect(document.body.textContent).toContain("1.5.0");
-        expect(document.body.textContent).toContain("Required");
-        expect(document.body.textContent).toContain("Optional");
-        expect(document.body.textContent).toContain("Deprecated");
-        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
-        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Label");
-    });
+	it("renders all Since and Label components inline like the viewer", async () => {
+		mountStory(
+			<MantineProvider
+				theme={MANTINE_THEME}
+				cssVariablesResolver={v8CssVariablesResolver}
+				forceColorScheme="dark"
+			>
+				<Paper
+					p="md"
+					withBorder
+				>
+					<MarkdownEditor
+						mode="preview"
+						document={JSX_BADGES_DOC}
+						autoFocus={false}
+						jsxMode="render"
+					/>
+				</Paper>
+			</MantineProvider>,
+		);
+
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
+
+		const badges = document.querySelectorAll(".mantine-Badge-label");
+		expect(badges.length).toBe(7);
+		expect(document.body.textContent).toContain("1.5.0");
+		expect(document.body.textContent).toContain("Required");
+		expect(document.body.textContent).toContain("Optional");
+		expect(document.body.textContent).toContain("Deprecated");
+		expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
+		expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Label");
+	});
 });