@surrealdb/ui 1.2.11 → 1.2.13

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

@@ -6,18 +6,19 @@ import { MANTINE_THEME } from "@src/theme/mantine";
 import { composeStories } from "@storybook/react-vite";
 import { type ReactElement, useState } from "react";
 import { describe, expect, it } from "vitest";
+
 import {
-    mountStory,
-    nextFrame,
-    preparePreviewEditor,
-    scrollEditorTo,
-    userEvent,
+	mountStory,
+	nextFrame,
+	preparePreviewEditor,
+	scrollEditorTo,
+	userEvent,
 } from "../../_setup/e2e-helpers";
 
 const Stories = composeStories(MarkdownStories);
 
 function getCheckboxes(): HTMLElement[] {
-    return Array.from(document.querySelectorAll<HTMLElement>("[data-md-task-marker]"));
+	return Array.from(document.querySelectorAll<HTMLElement>("[data-md-task-marker]"));
 }
 
 const SCROLL_FIXTURE = `# Scroll fixture
@@ -26,197 +27,197 @@ ${Array.from({ length: 80 }, (_, i) => `Line ${i + 1} of fixture content.`).join
 `;
 
 function ScrollFixture(): ReactElement {
-    const [doc, setDoc] = useState(SCROLL_FIXTURE);
-    // Mounting the primitive directly here means we have to provide our own
-    // MantineProvider; portable-stories decorators do not apply to ad-hoc JSX.
-    return (
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            <div style={{ height: 240, overflow: "hidden" }}>
-                <MarkdownEditor
-                    mode="preview"
-                    document={doc}
-                    onChangeDocument={setDoc}
-                    style={{ height: "100%" }}
-                />
-            </div>
-        </MantineProvider>
-    );
+	const [doc, setDoc] = useState(SCROLL_FIXTURE);
+	// Mounting the primitive directly here means we have to provide our own
+	// MantineProvider; portable-stories decorators do not apply to ad-hoc JSX.
+	return (
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<div style={{ height: 240, overflow: "hidden" }}>
+				<MarkdownEditor
+					mode="preview"
+					document={doc}
+					onChangeDocument={setDoc}
+					style={{ height: "100%" }}
+				/>
+			</div>
+		</MantineProvider>
+	);
 }
 
 function WrapFixture(): ReactElement {
-    const longParagraph = "Word ".repeat(120).trim();
-    const [doc, setDoc] = useState(longParagraph);
-
-    return (
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            <div style={{ width: 360, overflow: "hidden" }}>
-                <MarkdownEditor
-                    mode="preview"
-                    document={doc}
-                    onChangeDocument={setDoc}
-                    style={{ height: 240 }}
-                />
-            </div>
-        </MantineProvider>
-    );
+	const longParagraph = "Word ".repeat(120).trim();
+	const [doc, setDoc] = useState(longParagraph);
+
+	return (
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<div style={{ width: 360, overflow: "hidden" }}>
+				<MarkdownEditor
+					mode="preview"
+					document={doc}
+					onChangeDocument={setDoc}
+					style={{ height: 240 }}
+				/>
+			</div>
+		</MantineProvider>
+	);
 }
 
 describe("MarkdownEditor / regressions", () => {
-    it("task checkbox toggles between checked and unchecked in the source document", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const taskPos = view.state.doc.toString().indexOf("- [ ] Read the docs");
-
-        // Park caret outside the task list so checkbox widgets render for every item
-        // (preview mode only swaps to raw `[…]` when the selection hits the marker).
-        view.dispatch({ selection: EditorSelection.cursor(0) });
-        await scrollEditorTo(view, taskPos);
-        await nextFrame();
-
-        const initialDoc = view.state.doc.toString();
-        expect(initialDoc).toContain("- [ ] Read the docs");
-        expect(initialDoc).toContain("- [x] Star the repo");
-
-        let first: HTMLElement | undefined;
-        for (let i = 0; i < 40; i++) {
-            [first] = getCheckboxes();
-            if (first) break;
-            await nextFrame();
-        }
-        expect(first).toBeDefined();
-        if (!first) throw new Error("no task marker rendered");
-
-        await userEvent.click(first);
-        await nextFrame();
-        await nextFrame();
-
-        expect(view.state.doc.toString()).toContain("- [x] Read the docs");
-        expect(view.state.doc.toString()).not.toContain("- [ ] Read the docs");
-
-        // Toggle again — single mousedown handler, no double-toggle on click.
-        const [firstAgain] = getCheckboxes();
-        if (!firstAgain) throw new Error("task marker disappeared after toggle");
-        await userEvent.click(firstAgain);
-        await nextFrame();
-        await nextFrame();
-        expect(view.state.doc.toString()).toContain("- [ ] Read the docs");
-    });
-
-    it("repeated checkbox toggles do not duplicate or drift task markers", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const taskPos = view.state.doc.toString().indexOf("- [ ] Read the docs");
-
-        view.dispatch({ selection: EditorSelection.cursor(0) });
-        await scrollEditorTo(view, taskPos);
-        await nextFrame();
-
-        const baselineCount = (view.state.doc.toString().match(/- \[[ x]\] /g) ?? []).length;
-        expect(baselineCount).toBeGreaterThanOrEqual(3);
-
-        let markers = getCheckboxes();
-        for (let i = 0; i < 40 && markers.length < 2; i++) {
-            await nextFrame();
-            markers = getCheckboxes();
-        }
-
-        for (let i = 0; i < 6; i++) {
-            markers = getCheckboxes();
-            const target = markers[1];
-            if (!target) throw new Error("task marker missing during loop");
-            await userEvent.click(target);
-            await nextFrame();
-            await nextFrame();
-        }
-
-        const finalDoc = view.state.doc.toString();
-        const finalCount = (finalDoc.match(/- \[[ x]\] /g) ?? []).length;
-        expect(finalCount).toBe(baselineCount);
-        // Star the repo started as `[x]`, so 6 toggles → still `[x]`.
-        expect(finalDoc).toContain("- [x] Star the repo");
-    });
-
-    it("toggle via checkbox preserves task marker widgets visible from the previous caret position", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const taskPos = view.state.doc.toString().indexOf("- [ ] Read the docs");
-
-        view.dispatch({ selection: EditorSelection.cursor(0) });
-        await scrollEditorTo(view, taskPos);
-        view.contentDOM.blur();
-        await nextFrame();
-
-        let initialMarkers = 0;
-        for (let i = 0; i < 40; i++) {
-            initialMarkers = getCheckboxes().length;
-            if (initialMarkers >= 3) break;
-            await nextFrame();
-        }
-        expect(initialMarkers).toBeGreaterThanOrEqual(3);
-
-        const [marker] = getCheckboxes();
-        if (!marker) throw new Error("no task marker");
-        await userEvent.click(marker);
-        await nextFrame();
-        await nextFrame();
-
-        // If the click had dropped the checkbox widget for that line, the count
-        // would fall (caret would need to sit on the task marker for that).
-        const afterMarkers = getCheckboxes().length;
-        expect(afterMarkers).toBe(initialMarkers);
-    });
-
-    it("scroll position is preserved when an out-of-view edit is dispatched", async () => {
-        mountStory(<ScrollFixture />);
-        const view = await preparePreviewEditor();
-        const scroller = document.querySelector<HTMLElement>(".cm-scroller");
-        if (!scroller) throw new Error("no .cm-scroller in mounted story");
-
-        // Wait for layout to settle before measuring scroll height.
-        await nextFrame();
-        await nextFrame();
-        expect(scroller.scrollHeight).toBeGreaterThan(scroller.clientHeight);
-
-        scroller.scrollTop = 200;
-        await nextFrame();
-        const scrollBefore = scroller.scrollTop;
-        expect(scrollBefore).toBeGreaterThan(0);
-
-        // Insert at offset 5 (well above the current viewport) without
-        // moving the selection. The regression was: ANY content change
-        // reset `.cm-scroller` scrollTop to 0. The fix preserves scroll
-        // unless the dispatch explicitly requests a scrollIntoView.
-        view.dispatch({ changes: { from: 5, insert: "X" } });
-        await nextFrame();
-        await nextFrame();
-
-        expect(Math.abs(scroller.scrollTop - scrollBefore)).toBeLessThan(20);
-        expect(scroller.scrollTop).toBeGreaterThan(0);
-    });
-
-    it("wraps long paragraph lines instead of extending the editor width", async () => {
-        mountStory(<WrapFixture />);
-        await nextFrame();
-        await nextFrame();
-
-        const scroller = document.querySelector<HTMLElement>(".cm-scroller");
-        const content = document.querySelector<HTMLElement>(".cm-content");
-
-        // `EditorView.lineWrapping` applies via contentAttributes, so the
-        // `cm-lineWrapping` class lands on `.cm-content` (not the outer editor).
-        expect(content?.classList.contains("cm-lineWrapping")).toBe(true);
-        expect(scroller).toBeTruthy();
-        expect(content).toBeTruthy();
-        if (!scroller || !content) return;
-
-        expect(content.scrollWidth).toBeLessThanOrEqual(scroller.clientWidth + 2);
-    });
+	it("task checkbox toggles between checked and unchecked in the source document", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const taskPos = view.state.doc.toString().indexOf("- [ ] Read the docs");
+
+		// Park caret outside the task list so checkbox widgets render for every item
+		// (preview mode only swaps to raw `[…]` when the selection hits the marker).
+		view.dispatch({ selection: EditorSelection.cursor(0) });
+		await scrollEditorTo(view, taskPos);
+		await nextFrame();
+
+		const initialDoc = view.state.doc.toString();
+		expect(initialDoc).toContain("- [ ] Read the docs");
+		expect(initialDoc).toContain("- [x] Star the repo");
+
+		let first: HTMLElement | undefined;
+		for (let i = 0; i < 40; i++) {
+			[first] = getCheckboxes();
+			if (first) break;
+			await nextFrame();
+		}
+		expect(first).toBeDefined();
+		if (!first) throw new Error("no task marker rendered");
+
+		await userEvent.click(first);
+		await nextFrame();
+		await nextFrame();
+
+		expect(view.state.doc.toString()).toContain("- [x] Read the docs");
+		expect(view.state.doc.toString()).not.toContain("- [ ] Read the docs");
+
+		// Toggle again — single mousedown handler, no double-toggle on click.
+		const [firstAgain] = getCheckboxes();
+		if (!firstAgain) throw new Error("task marker disappeared after toggle");
+		await userEvent.click(firstAgain);
+		await nextFrame();
+		await nextFrame();
+		expect(view.state.doc.toString()).toContain("- [ ] Read the docs");
+	});
+
+	it("repeated checkbox toggles do not duplicate or drift task markers", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const taskPos = view.state.doc.toString().indexOf("- [ ] Read the docs");
+
+		view.dispatch({ selection: EditorSelection.cursor(0) });
+		await scrollEditorTo(view, taskPos);
+		await nextFrame();
+
+		const baselineCount = (view.state.doc.toString().match(/- \[[ x]\] /g) ?? []).length;
+		expect(baselineCount).toBeGreaterThanOrEqual(3);
+
+		let markers = getCheckboxes();
+		for (let i = 0; i < 40 && markers.length < 2; i++) {
+			await nextFrame();
+			markers = getCheckboxes();
+		}
+
+		for (let i = 0; i < 6; i++) {
+			markers = getCheckboxes();
+			const target = markers[1];
+			if (!target) throw new Error("task marker missing during loop");
+			await userEvent.click(target);
+			await nextFrame();
+			await nextFrame();
+		}
+
+		const finalDoc = view.state.doc.toString();
+		const finalCount = (finalDoc.match(/- \[[ x]\] /g) ?? []).length;
+		expect(finalCount).toBe(baselineCount);
+		// Star the repo started as `[x]`, so 6 toggles → still `[x]`.
+		expect(finalDoc).toContain("- [x] Star the repo");
+	});
+
+	it("toggle via checkbox preserves task marker widgets visible from the previous caret position", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const taskPos = view.state.doc.toString().indexOf("- [ ] Read the docs");
+
+		view.dispatch({ selection: EditorSelection.cursor(0) });
+		await scrollEditorTo(view, taskPos);
+		view.contentDOM.blur();
+		await nextFrame();
+
+		let initialMarkers = 0;
+		for (let i = 0; i < 40; i++) {
+			initialMarkers = getCheckboxes().length;
+			if (initialMarkers >= 3) break;
+			await nextFrame();
+		}
+		expect(initialMarkers).toBeGreaterThanOrEqual(3);
+
+		const [marker] = getCheckboxes();
+		if (!marker) throw new Error("no task marker");
+		await userEvent.click(marker);
+		await nextFrame();
+		await nextFrame();
+
+		// If the click had dropped the checkbox widget for that line, the count
+		// would fall (caret would need to sit on the task marker for that).
+		const afterMarkers = getCheckboxes().length;
+		expect(afterMarkers).toBe(initialMarkers);
+	});
+
+	it("scroll position is preserved when an out-of-view edit is dispatched", async () => {
+		mountStory(<ScrollFixture />);
+		const view = await preparePreviewEditor();
+		const scroller = document.querySelector<HTMLElement>(".cm-scroller");
+		if (!scroller) throw new Error("no .cm-scroller in mounted story");
+
+		// Wait for layout to settle before measuring scroll height.
+		await nextFrame();
+		await nextFrame();
+		expect(scroller.scrollHeight).toBeGreaterThan(scroller.clientHeight);
+
+		scroller.scrollTop = 200;
+		await nextFrame();
+		const scrollBefore = scroller.scrollTop;
+		expect(scrollBefore).toBeGreaterThan(0);
+
+		// Insert at offset 5 (well above the current viewport) without
+		// moving the selection. The regression was: ANY content change
+		// reset `.cm-scroller` scrollTop to 0. The fix preserves scroll
+		// unless the dispatch explicitly requests a scrollIntoView.
+		view.dispatch({ changes: { from: 5, insert: "X" } });
+		await nextFrame();
+		await nextFrame();
+
+		expect(Math.abs(scroller.scrollTop - scrollBefore)).toBeLessThan(20);
+		expect(scroller.scrollTop).toBeGreaterThan(0);
+	});
+
+	it("wraps long paragraph lines instead of extending the editor width", async () => {
+		mountStory(<WrapFixture />);
+		await nextFrame();
+		await nextFrame();
+
+		const scroller = document.querySelector<HTMLElement>(".cm-scroller");
+		const content = document.querySelector<HTMLElement>(".cm-content");
+
+		// `EditorView.lineWrapping` applies via contentAttributes, so the
+		// `cm-lineWrapping` class lands on `.cm-content` (not the outer editor).
+		expect(content?.classList.contains("cm-lineWrapping")).toBe(true);
+		expect(scroller).toBeTruthy();
+		expect(content).toBeTruthy();
+		if (!scroller || !content) return;
+
+		expect(content.scrollWidth).toBeLessThanOrEqual(scroller.clientWidth + 2);
+	});
 });

package/tests/e2e/MarkdownEditor/slash-commands.test.tsx

@@ -2,98 +2,99 @@ 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 {
-    focusAndType,
-    getEditorView,
-    mountStory,
-    nextFrame,
-    readDoc,
-    sleep,
-    typeText,
+	focusAndType,
+	getEditorView,
+	mountStory,
+	nextFrame,
+	readDoc,
+	sleep,
+	typeText,
 } from "../../_setup/e2e-helpers";
 
 const Stories = composeStories(MarkdownStories);
 
 /** Query the visible slash menu's command items (rendered in a portal). */
 function menuItems(): HTMLElement[] {
-    return Array.from(document.querySelectorAll<HTMLElement>("[data-navigation-item-id]"));
+	return Array.from(document.querySelectorAll<HTMLElement>("[data-navigation-item-id]"));
 }
 
 /** Move the caret to a fresh empty line at the end of the document. */
 async function caretOnFreshLine() {
-    const view = await getEditorView();
-    view.focus();
-    const end = view.state.doc.length;
-    view.dispatch({
-        changes: { from: end, insert: "\n\n" },
-        selection: EditorSelection.cursor(end + 2),
-        scrollIntoView: true,
-    });
-    await nextFrame();
-    await nextFrame();
-    return view;
+	const view = await getEditorView();
+	view.focus();
+	const end = view.state.doc.length;
+	view.dispatch({
+		changes: { from: end, insert: "\n\n" },
+		selection: EditorSelection.cursor(end + 2),
+		scrollIntoView: true,
+	});
+	await nextFrame();
+	await nextFrame();
+	return view;
 }
 
 describe("MarkdownEditor / slash commands", () => {
-    it("opens a filtered, keyboard-navigable menu and inserts boilerplate on Enter", async () => {
-        mountStory(<Stories.Editor />);
-        await caretOnFreshLine();
-
-        await focusAndType("/head");
-        await sleep(50);
-
-        const items = menuItems();
-        expect(items.length).toBeGreaterThan(0);
-        // Filtering by "head" should only surface heading commands.
-        expect(items.every((el) => el.dataset.navigationItemId?.startsWith("heading"))).toBe(true);
-
-        // Navigate to the second heading and select it.
-        await typeText("{ArrowDown}");
-        await sleep(20);
-        await typeText("{Enter}");
-        await sleep(50);
-
-        const doc = await readDoc();
-        // The "/head" text is replaced by a heading prefix; no stray newline.
-        expect(doc).toContain("## ");
-        expect(doc).not.toContain("/head");
-        expect(menuItems().length).toBe(0);
-    });
-
-    it("dismisses on Escape and leaves the slash as literal text", async () => {
-        mountStory(<Stories.Editor />);
-        await caretOnFreshLine();
-
-        await focusAndType("/quote");
-        await sleep(50);
-        expect(menuItems().length).toBeGreaterThan(0);
-
-        await typeText("{Escape}");
-        await sleep(50);
-
-        expect(menuItems().length).toBe(0);
-        const doc = await readDoc();
-        expect(doc).toContain("/quote");
-    });
-
-    it("highlights the slash and shows an Enter command placeholder until text is typed", async () => {
-        mountStory(<Stories.Editor />);
-        await caretOnFreshLine();
-
-        await focusAndType("/");
-        await sleep(50);
-
-        const highlight = document.querySelector(".cm-md-slash-active");
-        expect(highlight).not.toBeNull();
-        const placeholder = document.querySelector(".cm-md-slash-placeholder");
-        expect(placeholder?.textContent).toBe("Type to search");
-
-        // Typing the query removes the placeholder but keeps the highlight.
-        await typeText("head");
-        await sleep(50);
-
-        expect(document.querySelector(".cm-md-slash-placeholder")).toBeNull();
-        const stillHighlighted = document.querySelector(".cm-md-slash-active");
-        expect(stillHighlighted?.textContent).toBe("/head");
-    });
+	it("opens a filtered, keyboard-navigable menu and inserts boilerplate on Enter", async () => {
+		mountStory(<Stories.Editor />);
+		await caretOnFreshLine();
+
+		await focusAndType("/head");
+		await sleep(50);
+
+		const items = menuItems();
+		expect(items.length).toBeGreaterThan(0);
+		// Filtering by "head" should only surface heading commands.
+		expect(items.every((el) => el.dataset.navigationItemId?.startsWith("heading"))).toBe(true);
+
+		// Navigate to the second heading and select it.
+		await typeText("{ArrowDown}");
+		await sleep(20);
+		await typeText("{Enter}");
+		await sleep(50);
+
+		const doc = await readDoc();
+		// The "/head" text is replaced by a heading prefix; no stray newline.
+		expect(doc).toContain("## ");
+		expect(doc).not.toContain("/head");
+		expect(menuItems().length).toBe(0);
+	});
+
+	it("dismisses on Escape and leaves the slash as literal text", async () => {
+		mountStory(<Stories.Editor />);
+		await caretOnFreshLine();
+
+		await focusAndType("/quote");
+		await sleep(50);
+		expect(menuItems().length).toBeGreaterThan(0);
+
+		await typeText("{Escape}");
+		await sleep(50);
+
+		expect(menuItems().length).toBe(0);
+		const doc = await readDoc();
+		expect(doc).toContain("/quote");
+	});
+
+	it("highlights the slash and shows an Enter command placeholder until text is typed", async () => {
+		mountStory(<Stories.Editor />);
+		await caretOnFreshLine();
+
+		await focusAndType("/");
+		await sleep(50);
+
+		const highlight = document.querySelector(".cm-md-slash-active");
+		expect(highlight).not.toBeNull();
+		const placeholder = document.querySelector(".cm-md-slash-placeholder");
+		expect(placeholder?.textContent).toBe("Type to search");
+
+		// Typing the query removes the placeholder but keeps the highlight.
+		await typeText("head");
+		await sleep(50);
+
+		expect(document.querySelector(".cm-md-slash-placeholder")).toBeNull();
+		const stillHighlighted = document.querySelector(".cm-md-slash-active");
+		expect(stillHighlighted?.textContent).toBe("/head");
+	});
 });