@surrealdb/ui 1.2.16 → 1.2.18

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

@@ -1,44 +0,0 @@
-import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
-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" />
-
-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>,
-		);
-
-		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");
-	});
-});

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

@@ -1,68 +0,0 @@
-import { EditorSelection } from "@codemirror/state";
-import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
-import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/editor-focus";
-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>
-	);
-}
-
-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;
-}
-
-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 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("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

@@ -1,58 +0,0 @@
-import { EditorSelection } from "@codemirror/state";
-import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
-import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/editor-focus";
-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";
-
-/** 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;
-}
-
-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();
-
-		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);
-	});
-});

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

@@ -1,64 +0,0 @@
-import { EditorSelection } from "@codemirror/state";
-import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
-import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/editor-focus";
-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>
-	);
-}
-
-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);
-	});
-});

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

@@ -1,124 +0,0 @@
-import { EditorSelection } from "@codemirror/state";
-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,
-} 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;
-}
-
-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);
-	});
-});

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

@@ -1,94 +0,0 @@
-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,
-} 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;
-}
-
-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",
-		);
-	});
-});

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

@@ -1,50 +0,0 @@
-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);
-
-// Resolved by the story's shared onImage resolver. The optional extension on the
-// code selects the media type: no extension → `.auto` image, `.webp` → image,
-// `.mp4` → video.
-const AUTO_IMAGE_SRC = "cu72bvkattbs738rle0g.auto";
-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;
-}
-
-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 />);
-
-		// 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);
-	});
-});