@surrealdb/ui 1.2.11 → 1.2.13

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

@@ -3,121 +3,122 @@ import { EditorView } from "@codemirror/view";
 import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
 import { composeStories } from "@storybook/react-vite";
 import { describe, expect, it } from "vitest";
+
 import {
-    mountStory,
-    nextFrame,
-    preparePreviewEditor,
-    scrollEditorTo,
+	mountStory,
+	nextFrame,
+	preparePreviewEditor,
+	scrollEditorTo,
 } from "../../_setup/e2e-helpers";
 import { md, mdViewer } from "../../_setup/markdown-classes";
 
 const Stories = composeStories(MarkdownStories);
 
 function findLineStart(doc: string, prefix: string): number {
-    const idx = doc.indexOf(prefix);
-    if (idx < 0) throw new Error(`prefix not found in doc: ${prefix}`);
-    return idx;
+	const idx = doc.indexOf(prefix);
+	if (idx < 0) throw new Error(`prefix not found in doc: ${prefix}`);
+	return idx;
 }
 
 describe("MarkdownEditor / media sizing", () => {
-    it("images and videos do not exceed the editor content width", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-
-        const docStr = view.state.doc.toString();
-        const imageLine = findLineStart(docStr, "![SurrealDB logo]");
-        const videoLine = findLineStart(docStr, "![Product demo]");
-
-        // Caret away from media lines so replace widgets render.
-        view.dispatch({ selection: EditorSelection.cursor(0) });
-        await scrollEditorTo(view, imageLine);
-        await nextFrame();
-
-        const scroller = view.scrollDOM;
-        const scrollerWidth = scroller.clientWidth;
-        expect(scrollerWidth).toBeGreaterThan(0);
-
-        let imgs: NodeListOf<HTMLImageElement> = document.querySelectorAll(
-            `.cm-editor [data-md-widget="ImageWidget"] img, .cm-editor .${md.image}`,
-        );
-        for (let i = 0; i < 40 && imgs.length === 0; i++) {
-            await nextFrame();
-            imgs = document.querySelectorAll(
-                `.cm-editor [data-md-widget="ImageWidget"] img, .cm-editor .${md.image}`,
-            );
-        }
-
-        expect(imgs.length).toBeGreaterThan(0);
-        for (const img of Array.from(imgs)) {
-            const rect = img.getBoundingClientRect();
-            expect(
-                rect.width,
-                `image ${img.src} width ${rect.width} vs scroller ${scrollerWidth}`,
-            ).toBeLessThanOrEqual(scrollerWidth + 2);
-        }
-
-        await scrollEditorTo(view, videoLine);
-        await nextFrame();
-
-        let videos: NodeListOf<HTMLElement> = document.querySelectorAll(
-            `.cm-editor [data-md-widget="VideoWidget"] video, .cm-editor [data-md-widget="VideoWidget"] .${md.image}`,
-        );
-        for (let i = 0; i < 40 && videos.length === 0; i++) {
-            await nextFrame();
-            videos = document.querySelectorAll(
-                `.cm-editor [data-md-widget="VideoWidget"] video, .cm-editor [data-md-widget="VideoWidget"] .${md.image}`,
-            );
-        }
-
-        expect(videos.length).toBeGreaterThan(0);
-        for (const video of Array.from(videos)) {
-            const host =
-                video.closest("[data-md-widget='VideoWidget']") ?? video.closest(`.${md.image}`);
-            const rect = (host ?? video).getBoundingClientRect();
-            expect(
-                rect.width,
-                `video width ${rect.width} vs scroller ${scrollerWidth}`,
-            ).toBeLessThanOrEqual(scrollerWidth + 2);
-        }
-    });
-
-    it("matches MarkdownViewer image width in the split playground", async () => {
-        mountStory(<Stories.SideBySide />);
-        const view = await preparePreviewEditor();
-
-        const docStr = view.state.doc.toString();
-        const imagePos = findLineStart(docStr, "![SurrealDB logo]");
-        view.dispatch({
-            selection: EditorSelection.cursor(0),
-            effects: EditorView.scrollIntoView(imagePos, { y: "center" }),
-        });
-        await nextFrame();
-
-        let editorImg: HTMLImageElement | null = null;
-        let viewerImg: HTMLImageElement | null = null;
-        let editorW = 0;
-        let viewerW = 0;
-
-        for (let i = 0; i < 40; i++) {
-            editorImg = document.querySelector<HTMLImageElement>(
-                `.cm-editor [data-md-widget="ImageWidget"] img`,
-            );
-            viewerImg = document.querySelector<HTMLImageElement>(
-                `.${mdViewer.viewerRoot} img.${md.image}`,
-            );
-            if (editorImg && viewerImg) {
-                editorW = editorImg.getBoundingClientRect().width;
-                viewerW = viewerImg.getBoundingClientRect().width;
-                if (editorW > 0 && viewerW > 0 && Math.abs(editorW - viewerW) <= 12) {
-                    break;
-                }
-            }
-            await nextFrame();
-        }
-
-        expect(editorImg).not.toBeNull();
-        expect(viewerImg).not.toBeNull();
-        // Editor `.cm-line` uses 6px inline padding mirrored in viewer.module.scss.
-        expect(Math.abs(editorW - viewerW)).toBeLessThanOrEqual(12);
-    });
+	it("images and videos do not exceed the editor content width", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+
+		const docStr = view.state.doc.toString();
+		const imageLine = findLineStart(docStr, "![SurrealDB logo]");
+		const videoLine = findLineStart(docStr, "![Product demo]");
+
+		// Caret away from media lines so replace widgets render.
+		view.dispatch({ selection: EditorSelection.cursor(0) });
+		await scrollEditorTo(view, imageLine);
+		await nextFrame();
+
+		const scroller = view.scrollDOM;
+		const scrollerWidth = scroller.clientWidth;
+		expect(scrollerWidth).toBeGreaterThan(0);
+
+		let imgs: NodeListOf<HTMLImageElement> = document.querySelectorAll(
+			`.cm-editor [data-md-widget="ImageWidget"] img, .cm-editor .${md.image}`,
+		);
+		for (let i = 0; i < 40 && imgs.length === 0; i++) {
+			await nextFrame();
+			imgs = document.querySelectorAll(
+				`.cm-editor [data-md-widget="ImageWidget"] img, .cm-editor .${md.image}`,
+			);
+		}
+
+		expect(imgs.length).toBeGreaterThan(0);
+		for (const img of Array.from(imgs)) {
+			const rect = img.getBoundingClientRect();
+			expect(
+				rect.width,
+				`image ${img.src} width ${rect.width} vs scroller ${scrollerWidth}`,
+			).toBeLessThanOrEqual(scrollerWidth + 2);
+		}
+
+		await scrollEditorTo(view, videoLine);
+		await nextFrame();
+
+		let videos: NodeListOf<HTMLElement> = document.querySelectorAll(
+			`.cm-editor [data-md-widget="VideoWidget"] video, .cm-editor [data-md-widget="VideoWidget"] .${md.image}`,
+		);
+		for (let i = 0; i < 40 && videos.length === 0; i++) {
+			await nextFrame();
+			videos = document.querySelectorAll(
+				`.cm-editor [data-md-widget="VideoWidget"] video, .cm-editor [data-md-widget="VideoWidget"] .${md.image}`,
+			);
+		}
+
+		expect(videos.length).toBeGreaterThan(0);
+		for (const video of Array.from(videos)) {
+			const host =
+				video.closest("[data-md-widget='VideoWidget']") ?? video.closest(`.${md.image}`);
+			const rect = (host ?? video).getBoundingClientRect();
+			expect(
+				rect.width,
+				`video width ${rect.width} vs scroller ${scrollerWidth}`,
+			).toBeLessThanOrEqual(scrollerWidth + 2);
+		}
+	});
+
+	it("matches MarkdownViewer image width in the split playground", async () => {
+		mountStory(<Stories.SideBySide />);
+		const view = await preparePreviewEditor();
+
+		const docStr = view.state.doc.toString();
+		const imagePos = findLineStart(docStr, "![SurrealDB logo]");
+		view.dispatch({
+			selection: EditorSelection.cursor(0),
+			effects: EditorView.scrollIntoView(imagePos, { y: "center" }),
+		});
+		await nextFrame();
+
+		let editorImg: HTMLImageElement | null = null;
+		let viewerImg: HTMLImageElement | null = null;
+		let editorW = 0;
+		let viewerW = 0;
+
+		for (let i = 0; i < 40; i++) {
+			editorImg = document.querySelector<HTMLImageElement>(
+				`.cm-editor [data-md-widget="ImageWidget"] img`,
+			);
+			viewerImg = document.querySelector<HTMLImageElement>(
+				`.${mdViewer.viewerRoot} img.${md.image}`,
+			);
+			if (editorImg && viewerImg) {
+				editorW = editorImg.getBoundingClientRect().width;
+				viewerW = viewerImg.getBoundingClientRect().width;
+				if (editorW > 0 && viewerW > 0 && Math.abs(editorW - viewerW) <= 12) {
+					break;
+				}
+			}
+			await nextFrame();
+		}
+
+		expect(editorImg).not.toBeNull();
+		expect(viewerImg).not.toBeNull();
+		// Editor `.cm-line` uses 6px inline padding mirrored in viewer.module.scss.
+		expect(Math.abs(editorW - viewerW)).toBeLessThanOrEqual(12);
+	});
 });

package/tests/e2e/MarkdownEditor/modes.test.tsx

@@ -2,92 +2,93 @@ 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,
-    page,
-    readDoc,
-    userEvent,
+	getEditorView,
+	mountStory,
+	nextFrame,
+	page,
+	readDoc,
+	userEvent,
 } from "../../_setup/e2e-helpers";
 import { md, mdViewer } from "../../_setup/markdown-classes";
 
 const Stories = composeStories(MarkdownStories);
 
 async function getMode(): Promise<string | null> {
-    const editor = document.querySelector<HTMLElement>(".cm-editor");
-    return editor?.getAttribute("data-markdown-mode") ?? null;
+	const editor = document.querySelector<HTMLElement>(".cm-editor");
+	return editor?.getAttribute("data-markdown-mode") ?? null;
 }
 
 describe("MarkdownEditor / modes", () => {
-    it("toggling the SegmentedControl swaps mode without remounting the editor", async () => {
-        mountStory(<Stories.Editor />);
-        await getEditorView();
-
-        const initialEditor = document.querySelector(".cm-editor");
-        expect(initialEditor).not.toBeNull();
-        expect(await getMode()).toBe("preview");
-
-        // Mantine's SegmentedControl hides the underlying radio inputs and
-        // styles a sibling label, so we click the visible label text.
-        await userEvent.click(page.getByText("Source", { exact: true }));
-        await nextFrame();
-        expect(await getMode()).toBe("source");
-        expect(document.querySelector(".cm-editor")).toBe(initialEditor);
-
-        await userEvent.click(page.getByText("Preview", { exact: true }));
-        await nextFrame();
-        expect(await getMode()).toBe("preview");
-        expect(document.querySelector(".cm-editor")).toBe(initialEditor);
-    });
-
-    it("standalone MarkdownViewer is not a CodeMirror surface", async () => {
-        mountStory(<Stories.Viewer />);
-        await nextFrame();
-        await nextFrame();
-
-        expect(document.querySelector(`.${mdViewer.viewerRoot}`)).not.toBeNull();
-        expect(document.querySelector(".cm-editor")).toBeNull();
-        expect(document.querySelector(".cm-content")).toBeNull();
-    });
-
-    it("source mode renders raw markdown markers (no hidden marks)", async () => {
-        mountStory(<Stories.Editor />);
-        await getEditorView();
-        await userEvent.click(page.getByText("Source", { exact: true }));
-        await nextFrame();
-        await getEditorView();
-
-        await nextFrame();
-        const hidden = document.querySelectorAll(`.${md.markHidden}`);
-        expect(hidden.length).toBe(0);
-
-        const text = document.querySelector(".cm-content")?.textContent ?? "";
-        expect(text).toContain("# Welcome to the live preview editor");
-        expect(text).toContain("**bold**");
-    });
-
-    it("keeps edits when cycling Source then Preview after a document change", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await getEditorView();
-
-        const token = `\nuniq-e2e-${Date.now()}`;
-        view.dispatch({
-            selection: EditorSelection.cursor(view.state.doc.length),
-            changes: { from: view.state.doc.length, insert: token },
-        });
-        await nextFrame();
-
-        await userEvent.click(page.getByText("Source", { exact: true }));
-        await nextFrame();
-        expect((await readDoc()).includes(token.trim())).toBe(true);
-
-        await userEvent.click(page.getByText("Preview", { exact: true }));
-        await nextFrame();
-
-        expect((await readDoc()).includes(token.trim())).toBe(true);
-        expect(document.querySelector(".cm-content")?.getAttribute("aria-readonly")).not.toBe(
-            "true",
-        );
-    });
+	it("toggling the SegmentedControl swaps mode without remounting the editor", async () => {
+		mountStory(<Stories.Editor />);
+		await getEditorView();
+
+		const initialEditor = document.querySelector(".cm-editor");
+		expect(initialEditor).not.toBeNull();
+		expect(await getMode()).toBe("preview");
+
+		// Mantine's SegmentedControl hides the underlying radio inputs and
+		// styles a sibling label, so we click the visible label text.
+		await userEvent.click(page.getByText("Source", { exact: true }));
+		await nextFrame();
+		expect(await getMode()).toBe("source");
+		expect(document.querySelector(".cm-editor")).toBe(initialEditor);
+
+		await userEvent.click(page.getByText("Preview", { exact: true }));
+		await nextFrame();
+		expect(await getMode()).toBe("preview");
+		expect(document.querySelector(".cm-editor")).toBe(initialEditor);
+	});
+
+	it("standalone MarkdownViewer is not a CodeMirror surface", async () => {
+		mountStory(<Stories.Viewer />);
+		await nextFrame();
+		await nextFrame();
+
+		expect(document.querySelector(`.${mdViewer.viewerRoot}`)).not.toBeNull();
+		expect(document.querySelector(".cm-editor")).toBeNull();
+		expect(document.querySelector(".cm-content")).toBeNull();
+	});
+
+	it("source mode renders raw markdown markers (no hidden marks)", async () => {
+		mountStory(<Stories.Editor />);
+		await getEditorView();
+		await userEvent.click(page.getByText("Source", { exact: true }));
+		await nextFrame();
+		await getEditorView();
+
+		await nextFrame();
+		const hidden = document.querySelectorAll(`.${md.markHidden}`);
+		expect(hidden.length).toBe(0);
+
+		const text = document.querySelector(".cm-content")?.textContent ?? "";
+		expect(text).toContain("# Welcome to the live preview editor");
+		expect(text).toContain("**bold**");
+	});
+
+	it("keeps edits when cycling Source then Preview after a document change", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await getEditorView();
+
+		const token = `\nuniq-e2e-${Date.now()}`;
+		view.dispatch({
+			selection: EditorSelection.cursor(view.state.doc.length),
+			changes: { from: view.state.doc.length, insert: token },
+		});
+		await nextFrame();
+
+		await userEvent.click(page.getByText("Source", { exact: true }));
+		await nextFrame();
+		expect((await readDoc()).includes(token.trim())).toBe(true);
+
+		await userEvent.click(page.getByText("Preview", { exact: true }));
+		await nextFrame();
+
+		expect((await readDoc()).includes(token.trim())).toBe(true);
+		expect(document.querySelector(".cm-content")?.getAttribute("aria-readonly")).not.toBe(
+			"true",
+		);
+	});
 });

package/tests/e2e/MarkdownEditor/onimage-parity.test.tsx

@@ -1,6 +1,7 @@
 import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
 import { composeStories } from "@storybook/react-vite";
 import { describe, expect, it } from "vitest";
+
 import { mountStory, nextFrame } from "../../_setup/e2e-helpers";
 
 const Stories = composeStories(MarkdownStories);
@@ -13,37 +14,37 @@ const WEBP_IMAGE_SRC = "cu72bvkattbs738rle0g.webp";
 const VIDEO_SRC = "cu72bvkattbs738rle0g.mp4";
 
 async function waitFor<T>(get: () => T | null | undefined, tries = 60): Promise<T | null> {
-    for (let i = 0; i < tries; i++) {
-        const value = get();
-        if (value) return value;
-        await nextFrame();
-    }
-    return null;
+	for (let i = 0; i < tries; i++) {
+		const value = get();
+		if (value) return value;
+		await nextFrame();
+	}
+	return null;
 }
 
 describe("MarkdownEditor / onImage parity (side-by-side story)", () => {
-    it("resolves CDN codes to URLs by extension in both the editor preview and the viewer", async () => {
-        mountStory(<Stories.SideBySideOnImage />);
+	it("resolves CDN codes to URLs by extension in both the editor preview and the viewer", async () => {
+		mountStory(<Stories.SideBySideOnImage />);
 
-        // A bare code resolves to a `.auto` image; a `.webp` code resolves to a
-        // webp image. Both the editor widget and the viewer render each — the same
-        // onImage resolver feeds both surfaces. The editor widget mounts a frame
-        // after the viewer, so poll until parity.
-        const autoImages = await waitFor(() => {
-            const found = document.querySelectorAll(`img[src*="${AUTO_IMAGE_SRC}"]`);
-            return found.length >= 2 ? found : null;
-        });
-        expect(autoImages?.length ?? 0).toBeGreaterThanOrEqual(2);
-        expect(
-            document.querySelectorAll(`img[src*="${WEBP_IMAGE_SRC}"]`).length,
-        ).toBeGreaterThanOrEqual(2);
+		// A bare code resolves to a `.auto` image; a `.webp` code resolves to a
+		// webp image. Both the editor widget and the viewer render each — the same
+		// onImage resolver feeds both surfaces. The editor widget mounts a frame
+		// after the viewer, so poll until parity.
+		const autoImages = await waitFor(() => {
+			const found = document.querySelectorAll(`img[src*="${AUTO_IMAGE_SRC}"]`);
+			return found.length >= 2 ? found : null;
+		});
+		expect(autoImages?.length ?? 0).toBeGreaterThanOrEqual(2);
+		expect(
+			document.querySelectorAll(`img[src*="${WEBP_IMAGE_SRC}"]`).length,
+		).toBeGreaterThanOrEqual(2);
 
-        // A `.mp4` code resolves to a video container, so both surfaces render a player.
-        const videos = await waitFor(() => {
-            const found = document.querySelectorAll("video");
-            return found.length >= 2 ? found : null;
-        });
-        expect(videos?.length ?? 0).toBeGreaterThanOrEqual(2);
-        expect(document.body.innerHTML).toContain(VIDEO_SRC);
-    });
+		// A `.mp4` code resolves to a video container, so both surfaces render a player.
+		const videos = await waitFor(() => {
+			const found = document.querySelectorAll("video");
+			return found.length >= 2 ? found : null;
+		});
+		expect(videos?.length ?? 0).toBeGreaterThanOrEqual(2);
+		expect(document.body.innerHTML).toContain(VIDEO_SRC);
+	});
 });