@surrealdb/ui 1.2.12 → 1.2.14

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

@@ -3,51 +3,52 @@ import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { describe, expect, it } from "vitest";
 import { page } from "vitest/browser";
+
 import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
 
 const DOC = 'Text with <Since v="1.5.0" /> inline here.\n';
 
 describe("MarkdownEditor / inline JSX click reveal", () => {
-    it("reveals the raw source when an inline component badge is clicked", async () => {
-        mountStory(
-            <MantineProvider
-                theme={MANTINE_THEME}
-                cssVariablesResolver={v8CssVariablesResolver}
-                forceColorScheme="dark"
-            >
-                <Paper
-                    p="md"
-                    withBorder
-                >
-                    <MarkdownEditor
-                        mode="preview"
-                        document={DOC}
-                        autoFocus={false}
-                        jsxMode="render"
-                    />
-                </Paper>
-            </MantineProvider>,
-        );
+	it("reveals the raw source when an inline component badge is clicked", async () => {
+		mountStory(
+			<MantineProvider
+				theme={MANTINE_THEME}
+				cssVariablesResolver={v8CssVariablesResolver}
+				forceColorScheme="dark"
+			>
+				<Paper
+					p="md"
+					withBorder
+				>
+					<MarkdownEditor
+						mode="preview"
+						document={DOC}
+						autoFocus={false}
+						jsxMode="render"
+					/>
+				</Paper>
+			</MantineProvider>,
+		);
 
-        const view = await getEditorView();
-        await nextFrame();
+		const view = await getEditorView();
+		await nextFrame();
 
-        // Inactive: the badge renders and the raw tag is hidden.
-        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
+		// Inactive: the badge renders and the raw tag is hidden.
+		expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
 
-        // Click the rendered inline badge.
-        await page.getByText("1.5.0").click();
-        await nextFrame();
-        await nextFrame();
+		// Click the rendered inline badge.
+		await page.getByText("1.5.0").click();
+		await nextFrame();
+		await nextFrame();
 
-        // The click selects the component's entire source range (not just a caret),
-        // revealing the raw markup for editing.
-        const sel = view.state.selection.main;
-        const from = DOC.indexOf("<Since");
-        const to = DOC.indexOf("/>") + 2;
-        expect(sel.from).toBe(from);
-        expect(sel.to).toBe(to);
-        expect(sel.empty).toBe(false);
-        expect(document.querySelector(".cm-content")?.textContent).toContain("<Since");
-    });
+		// The click selects the component's entire source range (not just a caret),
+		// revealing the raw markup for editing.
+		const sel = view.state.selection.main;
+		const from = DOC.indexOf("<Since");
+		const to = DOC.indexOf("/>") + 2;
+		expect(sel.from).toBe(from);
+		expect(sel.to).toBe(to);
+		expect(sel.empty).toBe(false);
+		expect(document.querySelector(".cm-content")?.textContent).toContain("<Since");
+	});
 });

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

@@ -3,6 +3,7 @@ import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
 import { Since } from "@src/primitives/Since";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
 
 const JSX_DOC = `<Since v="9.9.9" />
@@ -11,33 +12,33 @@ Paragraph after component.
 `;
 
 describe("MarkdownEditor / JSX selection reveal", () => {
-    it("shows JSX widget when inactive and raw source when caret is inside the tag", async () => {
-        mountStory(
-            <MantineProvider
-                theme={MANTINE_THEME}
-                cssVariablesResolver={v8CssVariablesResolver}
-                forceColorScheme="dark"
-            >
-                <Paper
-                    p="md"
-                    withBorder
-                >
-                    <MarkdownEditor
-                        mode="preview"
-                        document={JSX_DOC}
-                        autoFocus={false}
-                        jsxMode="render"
-                        components={{ Since }}
-                    />
-                </Paper>
-            </MantineProvider>,
-        );
+	it("shows JSX widget when inactive and raw source when caret is inside the tag", async () => {
+		mountStory(
+			<MantineProvider
+				theme={MANTINE_THEME}
+				cssVariablesResolver={v8CssVariablesResolver}
+				forceColorScheme="dark"
+			>
+				<Paper
+					p="md"
+					withBorder
+				>
+					<MarkdownEditor
+						mode="preview"
+						document={JSX_DOC}
+						autoFocus={false}
+						jsxMode="render"
+						components={{ Since }}
+					/>
+				</Paper>
+			</MantineProvider>,
+		);
 
-        const view = await getEditorView();
-        view.contentDOM.blur();
-        await nextFrame();
+		const view = await getEditorView();
+		view.contentDOM.blur();
+		await nextFrame();
 
-        expect(document.body.textContent).toContain("9.9.9");
-        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
-    });
+		expect(document.body.textContent).toContain("9.9.9");
+		expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
+	});
 });

package/tests/e2e/MarkdownEditor/link-placeholder.test.tsx

@@ -4,64 +4,65 @@ import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/e
 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 shell(doc: string) {
-    return (
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            <Paper p="md">
-                <MarkdownEditor
-                    mode="preview"
-                    document={doc}
-                    autoFocus={false}
-                />
-            </Paper>
-        </MantineProvider>
-    );
+	return (
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<Paper p="md">
+				<MarkdownEditor
+					mode="preview"
+					document={doc}
+					autoFocus={false}
+				/>
+			</Paper>
+		</MantineProvider>
+	);
 }
 
 async function caretAt(doc: string, index: number) {
-    mountStory(shell(doc));
-    const view = await getEditorView();
-    view.focus();
-    view.dispatch({
-        selection: EditorSelection.cursor(index),
-        effects: setMarkdownEditorFocused.of(true),
-    });
-    await nextFrame();
-    await nextFrame();
-    return view;
+	mountStory(shell(doc));
+	const view = await getEditorView();
+	view.focus();
+	view.dispatch({
+		selection: EditorSelection.cursor(index),
+		effects: setMarkdownEditorFocused.of(true),
+	});
+	await nextFrame();
+	await nextFrame();
+	return view;
 }
 
 describe("MarkdownEditor / link placeholders", () => {
-    it("shows an 'alt text' placeholder for an empty link label", async () => {
-        const doc = "[](https://surrealdb.com)";
-        await caretAt(doc, 1); // caret between the empty []
-        expect(document.querySelector(".cm-content")?.textContent).toContain("alt text");
-    });
+	it("shows an 'alt text' placeholder for an empty link label", async () => {
+		const doc = "[](https://surrealdb.com)";
+		await caretAt(doc, 1); // caret between the empty []
+		expect(document.querySelector(".cm-content")?.textContent).toContain("alt text");
+	});
 
-    it("shows a 'link' placeholder for an empty link destination", async () => {
-        const doc = "[label]()";
-        await caretAt(doc, doc.indexOf("(") + 1); // caret between the empty ()
-        const text = document.querySelector(".cm-content")?.textContent ?? "";
-        expect(text).toContain("link");
-    });
+	it("shows a 'link' placeholder for an empty link destination", async () => {
+		const doc = "[label]()";
+		await caretAt(doc, doc.indexOf("(") + 1); // caret between the empty ()
+		const text = document.querySelector(".cm-content")?.textContent ?? "";
+		expect(text).toContain("link");
+	});
 
-    it("shows both placeholders for a fully empty link", async () => {
-        const doc = "[]()";
-        await caretAt(doc, 1);
-        const text = document.querySelector(".cm-content")?.textContent ?? "";
-        expect(text).toContain("alt text");
-        expect(text).toContain("link");
-    });
+	it("shows both placeholders for a fully empty link", async () => {
+		const doc = "[]()";
+		await caretAt(doc, 1);
+		const text = document.querySelector(".cm-content")?.textContent ?? "";
+		expect(text).toContain("alt text");
+		expect(text).toContain("link");
+	});
 
-    it("does not show placeholders once the sections have content", async () => {
-        const doc = "[label](https://surrealdb.com)";
-        await caretAt(doc, 3);
-        expect(document.querySelector(".cm-content")?.textContent).not.toContain("alt text");
-    });
+	it("does not show placeholders once the sections have content", async () => {
+		const doc = "[label](https://surrealdb.com)";
+		await caretAt(doc, 3);
+		expect(document.querySelector(".cm-content")?.textContent).not.toContain("alt text");
+	});
 });

package/tests/e2e/MarkdownEditor/media-align.test.tsx

@@ -4,54 +4,55 @@ import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/e
 import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame, sleep } from "../../_setup/e2e-helpers";
 
 const DOC =
-    "Regular paragraph line.\n\n![Some alt text](https://surrealdb.com/static/logo/light.svg)\n\nAnother paragraph.\n";
+	"Regular paragraph line.\n\n![Some alt text](https://surrealdb.com/static/logo/light.svg)\n\nAnother paragraph.\n";
 
 /** Left edge of a line's rendered text content (text nodes have no element box). */
 function textLeft(line: HTMLElement): number {
-    const range = document.createRange();
-    range.selectNodeContents(line);
-    return range.getBoundingClientRect().left;
+	const range = document.createRange();
+	range.selectNodeContents(line);
+	return range.getBoundingClientRect().left;
 }
 
 describe("MarkdownEditor / media alignment", () => {
-    it("aligns the image preview's left edge with regular text", async () => {
-        mountStory(
-            <MantineProvider
-                theme={MANTINE_THEME}
-                cssVariablesResolver={v8CssVariablesResolver}
-                forceColorScheme="dark"
-            >
-                <Paper p="md">
-                    <MarkdownEditor
-                        mode="preview"
-                        document={DOC}
-                        autoFocus={false}
-                    />
-                </Paper>
-            </MantineProvider>,
-        );
-        const view = await getEditorView();
-        view.focus();
-        view.dispatch({
-            selection: EditorSelection.cursor(view.state.doc.length),
-            effects: setMarkdownEditorFocused.of(true),
-        });
-        await sleep(200);
-        await nextFrame();
+	it("aligns the image preview's left edge with regular text", async () => {
+		mountStory(
+			<MantineProvider
+				theme={MANTINE_THEME}
+				cssVariablesResolver={v8CssVariablesResolver}
+				forceColorScheme="dark"
+			>
+				<Paper p="md">
+					<MarkdownEditor
+						mode="preview"
+						document={DOC}
+						autoFocus={false}
+					/>
+				</Paper>
+			</MantineProvider>,
+		);
+		const view = await getEditorView();
+		view.focus();
+		view.dispatch({
+			selection: EditorSelection.cursor(view.state.doc.length),
+			effects: setMarkdownEditorFocused.of(true),
+		});
+		await sleep(200);
+		await nextFrame();
 
-        const para = Array.from(document.querySelectorAll<HTMLElement>(".cm-line")).find((l) =>
-            (l.textContent ?? "").includes("Regular"),
-        );
-        const img = document.querySelector<HTMLElement>('[data-md-widget="ImageWidget"] img');
-        expect(para).toBeTruthy();
-        expect(img).toBeTruthy();
+		const para = Array.from(document.querySelectorAll<HTMLElement>(".cm-line")).find((l) =>
+			(l.textContent ?? "").includes("Regular"),
+		);
+		const img = document.querySelector<HTMLElement>('[data-md-widget="ImageWidget"] img');
+		expect(para).toBeTruthy();
+		expect(img).toBeTruthy();
 
-        const paraLeft = textLeft(para as HTMLElement);
-        const imageLeft = (img as HTMLElement).getBoundingClientRect().left;
-        // Within a pixel of the text inset (previously 6px to the left).
-        expect(Math.abs(imageLeft - paraLeft)).toBeLessThanOrEqual(1.5);
-    });
+		const paraLeft = textLeft(para as HTMLElement);
+		const imageLeft = (img as HTMLElement).getBoundingClientRect().left;
+		// Within a pixel of the text inset (previously 6px to the left).
+		expect(Math.abs(imageLeft - paraLeft)).toBeLessThanOrEqual(1.5);
+	});
 });

package/tests/e2e/MarkdownEditor/media-edit.test.tsx

@@ -4,60 +4,61 @@ import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/e
 import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
 import { MANTINE_THEME } from "@src/theme/mantine";
 import { describe, expect, it } from "vitest";
+
 import { getEditorView, mountStory, nextFrame, sleep } from "../../_setup/e2e-helpers";
 
 const IMAGE_DOC = "![A logo](https://surrealdb.com/static/logo/light.svg)\n\nParagraph after.\n";
 
 function shell(doc: string) {
-    return (
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            <Paper
-                p="md"
-                withBorder
-            >
-                <MarkdownEditor
-                    mode="preview"
-                    document={doc}
-                    autoFocus={false}
-                />
-            </Paper>
-        </MantineProvider>
-    );
+	return (
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<Paper
+				p="md"
+				withBorder
+			>
+				<MarkdownEditor
+					mode="preview"
+					document={doc}
+					autoFocus={false}
+				/>
+			</Paper>
+		</MantineProvider>
+	);
 }
 
 describe("MarkdownEditor / media edit action", () => {
-    it("shows an image preview with an edit-source action that reveals the source", async () => {
-        mountStory(shell(IMAGE_DOC));
-        const view = await getEditorView();
-
-        // Focused, with the caret away from the image, so the image renders as a
-        // preview widget rather than raw source.
-        view.focus();
-        view.dispatch({
-            selection: EditorSelection.cursor(view.state.doc.length),
-            effects: setMarkdownEditorFocused.of(true),
-        });
-        await nextFrame();
-        await nextFrame();
-
-        expect(document.querySelector(".cm-content")?.textContent).not.toContain("![A logo]");
-        expect(document.querySelector("img")).not.toBeNull();
-
-        const action = document.querySelector<HTMLButtonElement>(
-            'button[aria-label="Edit source"]',
-        );
-        expect(action).not.toBeNull();
-
-        action?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
-        await sleep(120);
-        await nextFrame();
-
-        // The image markdown source becomes visible and is selected.
-        expect(document.querySelector(".cm-content")?.textContent).toContain("![A logo]");
-        expect(view.state.selection.main.empty).toBe(false);
-    });
+	it("shows an image preview with an edit-source action that reveals the source", async () => {
+		mountStory(shell(IMAGE_DOC));
+		const view = await getEditorView();
+
+		// Focused, with the caret away from the image, so the image renders as a
+		// preview widget rather than raw source.
+		view.focus();
+		view.dispatch({
+			selection: EditorSelection.cursor(view.state.doc.length),
+			effects: setMarkdownEditorFocused.of(true),
+		});
+		await nextFrame();
+		await nextFrame();
+
+		expect(document.querySelector(".cm-content")?.textContent).not.toContain("![A logo]");
+		expect(document.querySelector("img")).not.toBeNull();
+
+		const action = document.querySelector<HTMLButtonElement>(
+			'button[aria-label="Edit source"]',
+		);
+		expect(action).not.toBeNull();
+
+		action?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+		await sleep(120);
+		await nextFrame();
+
+		// The image markdown source becomes visible and is selected.
+		expect(document.querySelector(".cm-content")?.textContent).toContain("![A logo]");
+		expect(view.state.selection.main.empty).toBe(false);
+	});
 });