@surrealdb/ui 1.2.12 → 1.2.14

package/tests/e2e/MarkdownEditor/table-click.test.tsx

@@ -2,46 +2,47 @@ import { EditorSelection } from "@codemirror/state";
 import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
 import { composeStories } from "@storybook/react-vite";
 import { describe, expect, it } from "vitest";
+
 import {
-    mountStory,
-    nextFrame,
-    page,
-    preparePreviewEditor,
-    scrollEditorTo,
+	mountStory,
+	nextFrame,
+	page,
+	preparePreviewEditor,
+	scrollEditorTo,
 } from "../../_setup/e2e-helpers";
 import { md } from "../../_setup/markdown-classes";
 
 const Stories = composeStories(MarkdownStories);
 
 describe("MarkdownEditor / table cell click", () => {
-    it("places the caret in the source cell when a rendered cell is clicked", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const doc = view.state.doc.toString();
-
-        const tablePos = doc.indexOf("| Feature |");
-        expect(tablePos).toBeGreaterThan(-1);
-        await scrollEditorTo(view, tablePos);
-
-        // Park the caret far away so the table renders as a widget.
-        view.dispatch({ selection: EditorSelection.cursor(0) });
-        await nextFrame();
-        await nextFrame();
-
-        const widget = document.querySelector(`.${md.tableWidget}`);
-        expect(widget).not.toBeNull();
-
-        // Click the "Headers" body cell.
-        const cell = page.getByText("Headers", { exact: true });
-        await cell.click();
-        await nextFrame();
-
-        // The caret should land on the "Headers" cell inside the table source.
-        const expected = doc.indexOf("Headers", tablePos);
-        expect(view.state.selection.main.head).toBe(expected);
-
-        // Clicking activates the block, revealing the raw source (widget gone).
-        await nextFrame();
-        expect(document.querySelector(`.${md.tableWidget}`)).toBeNull();
-    });
+	it("places the caret in the source cell when a rendered cell is clicked", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const doc = view.state.doc.toString();
+
+		const tablePos = doc.indexOf("| Feature |");
+		expect(tablePos).toBeGreaterThan(-1);
+		await scrollEditorTo(view, tablePos);
+
+		// Park the caret far away so the table renders as a widget.
+		view.dispatch({ selection: EditorSelection.cursor(0) });
+		await nextFrame();
+		await nextFrame();
+
+		const widget = document.querySelector(`.${md.tableWidget}`);
+		expect(widget).not.toBeNull();
+
+		// Click the "Headers" body cell.
+		const cell = page.getByText("Headers", { exact: true });
+		await cell.click();
+		await nextFrame();
+
+		// The caret should land on the "Headers" cell inside the table source.
+		const expected = doc.indexOf("Headers", tablePos);
+		expect(view.state.selection.main.head).toBe(expected);
+
+		// Clicking activates the block, revealing the raw source (widget gone).
+		await nextFrame();
+		expect(document.querySelector(`.${md.tableWidget}`)).toBeNull();
+	});
 });

package/tests/e2e/MarkdownEditor/table-controls.test.tsx

@@ -2,55 +2,56 @@ import { EditorSelection } from "@codemirror/state";
 import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
 import { composeStories } from "@storybook/react-vite";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
 
 const Stories = composeStories(MarkdownStories);
 
 function clickControl(label: string): boolean {
-    const button = document.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
-    if (!button) return false;
-    button.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
-    button.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
-    return true;
+	const button = document.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
+	if (!button) return false;
+	button.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+	button.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+	return true;
 }
 
 describe("MarkdownEditor / table controls", () => {
-    it("adds and removes rows and columns from the active table", async () => {
-        mountStory(<Stories.EditorTableFormatter />);
-        const view = await getEditorView();
-        await nextFrame();
-
-        // Park the caret inside the table to reveal the floating controls.
-        const adaPos = view.state.doc.toString().indexOf("Ada");
-        view.dispatch({ selection: EditorSelection.cursor(adaPos) });
-        view.focus();
-        await nextFrame();
-        await nextFrame();
-
-        const tableLines = () =>
-            view.state.doc
-                .toString()
-                .split("\n")
-                .filter((l) => l.includes("|"));
-        const headerPipes = () => (tableLines()[0]?.match(/\|/g) ?? []).length;
-
-        const beforeCols = headerPipes();
-        const beforeRows = tableLines().length;
-
-        expect(clickControl("Add column")).toBe(true);
-        await nextFrame();
-        expect(headerPipes()).toBe(beforeCols + 1);
-
-        expect(clickControl("Add row")).toBe(true);
-        await nextFrame();
-        expect(tableLines().length).toBe(beforeRows + 1);
-
-        expect(clickControl("Remove row")).toBe(true);
-        await nextFrame();
-        expect(tableLines().length).toBe(beforeRows);
-
-        expect(clickControl("Remove column")).toBe(true);
-        await nextFrame();
-        expect(headerPipes()).toBe(beforeCols);
-    });
+	it("adds and removes rows and columns from the active table", async () => {
+		mountStory(<Stories.EditorTableFormatter />);
+		const view = await getEditorView();
+		await nextFrame();
+
+		// Park the caret inside the table to reveal the floating controls.
+		const adaPos = view.state.doc.toString().indexOf("Ada");
+		view.dispatch({ selection: EditorSelection.cursor(adaPos) });
+		view.focus();
+		await nextFrame();
+		await nextFrame();
+
+		const tableLines = () =>
+			view.state.doc
+				.toString()
+				.split("\n")
+				.filter((l) => l.includes("|"));
+		const headerPipes = () => (tableLines()[0]?.match(/\|/g) ?? []).length;
+
+		const beforeCols = headerPipes();
+		const beforeRows = tableLines().length;
+
+		expect(clickControl("Add column")).toBe(true);
+		await nextFrame();
+		expect(headerPipes()).toBe(beforeCols + 1);
+
+		expect(clickControl("Add row")).toBe(true);
+		await nextFrame();
+		expect(tableLines().length).toBe(beforeRows + 1);
+
+		expect(clickControl("Remove row")).toBe(true);
+		await nextFrame();
+		expect(tableLines().length).toBe(beforeRows);
+
+		expect(clickControl("Remove column")).toBe(true);
+		await nextFrame();
+		expect(headerPipes()).toBe(beforeCols);
+	});
 });

package/tests/e2e/MarkdownEditor/table-format.test.tsx

@@ -2,40 +2,41 @@ import { EditorSelection } from "@codemirror/state";
 import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
 import { composeStories } from "@storybook/react-vite";
 import { describe, expect, it } from "vitest";
+
 import {
-    focusEditor,
-    getEditorView,
-    mountStory,
-    nextFrame,
-    userEvent,
+	focusEditor,
+	getEditorView,
+	mountStory,
+	nextFrame,
+	userEvent,
 } from "../../_setup/e2e-helpers";
 
 const Stories = composeStories(MarkdownStories);
 
 describe("MarkdownEditor / table formatter", () => {
-    it("realigns the table columns after typing in a cell", async () => {
-        mountStory(<Stories.EditorTableFormatter />);
-        const view = await getEditorView();
-        await nextFrame();
+	it("realigns the table columns after typing in a cell", async () => {
+		mountStory(<Stories.EditorTableFormatter />);
+		const view = await getEditorView();
+		await nextFrame();
 
-        const doc = view.state.doc.toString();
-        const target = doc.indexOf("Ada") + "Ada".length;
-        expect(target).toBeGreaterThan(0);
+		const doc = view.state.doc.toString();
+		const target = doc.indexOf("Ada") + "Ada".length;
+		expect(target).toBeGreaterThan(0);
 
-        view.dispatch({ selection: EditorSelection.cursor(target) });
-        await focusEditor();
-        await userEvent.keyboard("lyn"); // "Ada" -> "Adalyn"
-        await nextFrame();
-        await nextFrame();
+		view.dispatch({ selection: EditorSelection.cursor(target) });
+		await focusEditor();
+		await userEvent.keyboard("lyn"); // "Ada" -> "Adalyn"
+		await nextFrame();
+		await nextFrame();
 
-        const next = view.state.doc.toString();
-        // Column 1 grew to fit "Adalyn"; the delimiter row should align to it.
-        expect(next).toContain("Adalyn");
-        const lines = next.split("\n");
-        const widths = lines
-            .filter((l) => l.includes("|"))
-            .map((l) => l.indexOf("|", l.indexOf("|") + 1));
-        // All rows share the same position for the second pipe (aligned column 1).
-        expect(new Set(widths).size).toBe(1);
-    });
+		const next = view.state.doc.toString();
+		// Column 1 grew to fit "Adalyn"; the delimiter row should align to it.
+		expect(next).toContain("Adalyn");
+		const lines = next.split("\n");
+		const widths = lines
+			.filter((l) => l.includes("|"))
+			.map((l) => l.indexOf("|", l.indexOf("|") + 1));
+		// All rows share the same position for the second pipe (aligned column 1).
+		expect(new Set(widths).size).toBe(1);
+	});
 });

package/tests/e2e/MarkdownEditor/undo-redo.test.tsx

@@ -3,36 +3,37 @@ import { EditorSelection } from "@codemirror/state";
 import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
 import { composeStories } from "@storybook/react-vite";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
 
 const Stories = composeStories(MarkdownStories);
 
 describe("MarkdownEditor / undo and redo", () => {
-    it("restores undone document edits via redo", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await getEditorView();
+	it("restores undone document edits via redo", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await getEditorView();
 
-        const start = Date.now();
-        while (view.state.doc.length === 0 && Date.now() - start < 5000) {
-            await nextFrame();
-        }
-        expect(view.state.doc.length).toBeGreaterThan(0);
+		const start = Date.now();
+		while (view.state.doc.length === 0 && Date.now() - start < 5000) {
+			await nextFrame();
+		}
+		expect(view.state.doc.length).toBeGreaterThan(0);
 
-        const before = view.state.doc.toString();
+		const before = view.state.doc.toString();
 
-        view.dispatch({
-            changes: { from: view.state.doc.length, insert: "\nredo-marker" },
-            selection: EditorSelection.cursor(view.state.doc.length),
-        });
-        await nextFrame();
+		view.dispatch({
+			changes: { from: view.state.doc.length, insert: "\nredo-marker" },
+			selection: EditorSelection.cursor(view.state.doc.length),
+		});
+		await nextFrame();
 
-        const afterEdit = view.state.doc.toString();
-        expect(afterEdit).toContain("redo-marker");
+		const afterEdit = view.state.doc.toString();
+		expect(afterEdit).toContain("redo-marker");
 
-        expect(undo(view)).toBe(true);
-        expect(view.state.doc.toString()).toBe(before);
+		expect(undo(view)).toBe(true);
+		expect(view.state.doc.toString()).toBe(before);
 
-        expect(redo(view)).toBe(true);
-        expect(view.state.doc.toString()).toBe(afterEdit);
-    });
+		expect(redo(view)).toBe(true);
+		expect(view.state.doc.toString()).toBe(afterEdit);
+	});
 });

package/tests/e2e/MarkdownViewer/parity.test.tsx

@@ -4,6 +4,7 @@ import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { type FC, useState } from "react";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
 import { md, mdViewer } from "../../_setup/markdown-classes";
 
@@ -34,157 +35,157 @@ Inside details.
 `;
 
 const ParityLayout: FC = () => {
-    const [doc] = useState(PARITY_FIXTURE);
-    return (
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            <Grid gap="md">
-                <Grid.Col span={{ base: 12, md: 6 }}>
-                    <Paper
-                        p="md"
-                        radius="md"
-                        withBorder
-                    >
-                        <MarkdownEditor
-                            mode="preview"
-                            document={doc}
-                            autoFocus={false}
-                            mih={200}
-                        />
-                    </Paper>
-                </Grid.Col>
-                <Grid.Col span={{ base: 12, md: 6 }}>
-                    <Paper
-                        p="md"
-                        radius="md"
-                        withBorder
-                    >
-                        <MarkdownViewer content={doc} />
-                    </Paper>
-                </Grid.Col>
-            </Grid>
-        </MantineProvider>
-    );
+	const [doc] = useState(PARITY_FIXTURE);
+	return (
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<Grid gap="md">
+				<Grid.Col span={{ base: 12, md: 6 }}>
+					<Paper
+						p="md"
+						radius="md"
+						withBorder
+					>
+						<MarkdownEditor
+							mode="preview"
+							document={doc}
+							autoFocus={false}
+							mih={200}
+						/>
+					</Paper>
+				</Grid.Col>
+				<Grid.Col span={{ base: 12, md: 6 }}>
+					<Paper
+						p="md"
+						radius="md"
+						withBorder
+					>
+						<MarkdownViewer content={doc} />
+					</Paper>
+				</Grid.Col>
+			</Grid>
+		</MantineProvider>
+	);
 };
 
 function visibleText(el: Element): string {
-    const clone = el.cloneNode(true) as Element;
+	const clone = el.cloneNode(true) as Element;
 
-    for (const n of clone.querySelectorAll(`.${md.markHidden}, .cm-line-folded`)) {
-        n.remove();
-    }
+	for (const n of clone.querySelectorAll(`.${md.markHidden}, .cm-line-folded`)) {
+		n.remove();
+	}
 
-    return clone.textContent?.replace(/\s+/g, "") ?? "";
+	return clone.textContent?.replace(/\s+/g, "") ?? "";
 }
 
 const PARITY_CLASSES = [md.h1, md.h2, md.strong, md.emphasis, md.codeInline, md.link] as const;
 
 describe("MarkdownViewer / editor parity", () => {
-    it("renders checklist text alongside checkboxes in the viewer", async () => {
-        mountStory(<ParityLayout />);
-        await getEditorView();
-        await nextFrame();
-
-        const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
-        expect(vrEl).not.toBeNull();
-        if (vrEl === null) return;
-
-        const taskItems = vrEl.querySelectorAll(`li.${md.taskItem}`);
-        expect(taskItems.length).toBe(2);
-
-        const text = (i: number) =>
-            (taskItems[i]?.querySelector(`.${md.taskText}`)?.textContent ?? "").trim();
-        expect(text(0)).toContain("todo one");
-        expect(text(1)).toContain("todo two");
-        expect(taskItems[1]?.querySelector(`.${md.strong}`)?.textContent).toBe("with bold");
-    });
-
-    it("uses the same link colour as the editor", async () => {
-        mountStory(<ParityLayout />);
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
-
-        const cmLink = document.querySelector(`.cm-content .${md.link}`);
-        const vwLink = document.querySelector(`.${mdViewer.viewerRoot} .${md.link}`);
-        expect(cmLink).not.toBeNull();
-        expect(vwLink).not.toBeNull();
-        if (cmLink === null || vwLink === null) return;
-
-        expect(getComputedStyle(vwLink).color).toBe(getComputedStyle(cmLink).color);
-    });
-
-    it("matches visible text between preview editor (blurred) and MarkdownViewer", async () => {
-        mountStory(<ParityLayout />);
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
-        await nextFrame();
-
-        const cmEl = document.querySelector(".cm-content");
-        const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
-        expect(cmEl).not.toBeNull();
-        expect(vrEl).not.toBeNull();
-        if (cmEl === null || vrEl === null) {
-            return;
-        }
-
-        expect(visibleText(vrEl)).toBe(visibleText(cmEl));
-    });
-
-    it("matches counts for shared structural classes", async () => {
-        mountStory(<ParityLayout />);
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
-
-        const cmEl = document.querySelector(".cm-content");
-        const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
-        expect(cmEl).not.toBeNull();
-        expect(vrEl).not.toBeNull();
-        if (cmEl === null || vrEl === null) {
-            return;
-        }
-
-        for (const cls of PARITY_CLASSES) {
-            expect(vrEl.querySelectorAll(`.${cls}`).length).toBe(
-                cmEl.querySelectorAll(`.${cls}`).length,
-            );
-        }
-    });
-
-    it("matches computed font size on first heading", async () => {
-        mountStory(<ParityLayout />);
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
-
-        const cmH1 = document.querySelector(`.cm-content .${md.h1}`);
-        const vwH1 = document.querySelector(`.${mdViewer.viewerRoot} .${md.h1}`);
-        expect(cmH1).not.toBeNull();
-        expect(vwH1).not.toBeNull();
-        if (cmH1 === null || vwH1 === null) {
-            return;
-        }
-
-        const a = getComputedStyle(cmH1);
-        const b = getComputedStyle(vwH1);
-        expect(a.fontSize).toBe(b.fontSize);
-        expect(a.fontWeight).toBe(b.fontWeight);
-    });
-
-    it("renders HTML details in both editor preview and viewer", async () => {
-        mountStory(<ParityLayout />);
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
-
-        const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
-        expect(vrEl?.textContent).toContain("Expand");
-        expect(vrEl?.textContent).toContain("Inside details");
-        expect(document.querySelector(".cm-content")?.textContent).toContain("Inside details");
-    });
+	it("renders checklist text alongside checkboxes in the viewer", async () => {
+		mountStory(<ParityLayout />);
+		await getEditorView();
+		await nextFrame();
+
+		const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
+		expect(vrEl).not.toBeNull();
+		if (vrEl === null) return;
+
+		const taskItems = vrEl.querySelectorAll(`li.${md.taskItem}`);
+		expect(taskItems.length).toBe(2);
+
+		const text = (i: number) =>
+			(taskItems[i]?.querySelector(`.${md.taskText}`)?.textContent ?? "").trim();
+		expect(text(0)).toContain("todo one");
+		expect(text(1)).toContain("todo two");
+		expect(taskItems[1]?.querySelector(`.${md.strong}`)?.textContent).toBe("with bold");
+	});
+
+	it("uses the same link colour as the editor", async () => {
+		mountStory(<ParityLayout />);
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
+
+		const cmLink = document.querySelector(`.cm-content .${md.link}`);
+		const vwLink = document.querySelector(`.${mdViewer.viewerRoot} .${md.link}`);
+		expect(cmLink).not.toBeNull();
+		expect(vwLink).not.toBeNull();
+		if (cmLink === null || vwLink === null) return;
+
+		expect(getComputedStyle(vwLink).color).toBe(getComputedStyle(cmLink).color);
+	});
+
+	it("matches visible text between preview editor (blurred) and MarkdownViewer", async () => {
+		mountStory(<ParityLayout />);
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
+		await nextFrame();
+
+		const cmEl = document.querySelector(".cm-content");
+		const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
+		expect(cmEl).not.toBeNull();
+		expect(vrEl).not.toBeNull();
+		if (cmEl === null || vrEl === null) {
+			return;
+		}
+
+		expect(visibleText(vrEl)).toBe(visibleText(cmEl));
+	});
+
+	it("matches counts for shared structural classes", async () => {
+		mountStory(<ParityLayout />);
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
+
+		const cmEl = document.querySelector(".cm-content");
+		const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
+		expect(cmEl).not.toBeNull();
+		expect(vrEl).not.toBeNull();
+		if (cmEl === null || vrEl === null) {
+			return;
+		}
+
+		for (const cls of PARITY_CLASSES) {
+			expect(vrEl.querySelectorAll(`.${cls}`).length).toBe(
+				cmEl.querySelectorAll(`.${cls}`).length,
+			);
+		}
+	});
+
+	it("matches computed font size on first heading", async () => {
+		mountStory(<ParityLayout />);
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
+
+		const cmH1 = document.querySelector(`.cm-content .${md.h1}`);
+		const vwH1 = document.querySelector(`.${mdViewer.viewerRoot} .${md.h1}`);
+		expect(cmH1).not.toBeNull();
+		expect(vwH1).not.toBeNull();
+		if (cmH1 === null || vwH1 === null) {
+			return;
+		}
+
+		const a = getComputedStyle(cmH1);
+		const b = getComputedStyle(vwH1);
+		expect(a.fontSize).toBe(b.fontSize);
+		expect(a.fontWeight).toBe(b.fontWeight);
+	});
+
+	it("renders HTML details in both editor preview and viewer", async () => {
+		mountStory(<ParityLayout />);
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
+
+		const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
+		expect(vrEl?.textContent).toContain("Expand");
+		expect(vrEl?.textContent).toContain("Inside details");
+		expect(document.querySelector(".cm-content")?.textContent).toContain("Inside details");
+	});
 });