@surrealdb/ui 1.2.16 → 1.2.18

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

@@ -1,223 +0,0 @@
-import { EditorSelection } from "@codemirror/state";
-import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
-import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
-import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
-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,
-} from "../../_setup/e2e-helpers";
-
-const Stories = composeStories(MarkdownStories);
-
-function getCheckboxes(): HTMLElement[] {
-	return Array.from(document.querySelectorAll<HTMLElement>("[data-md-task-marker]"));
-}
-
-const SCROLL_FIXTURE = `# Scroll fixture
-
-${Array.from({ length: 80 }, (_, i) => `Line ${i + 1} of fixture content.`).join("\n")}
-`;
-
-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>
-	);
-}
-
-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>
-	);
-}
-
-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);
-	});
-});

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

@@ -1,100 +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 {
-	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]"));
-}
-
-/** 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;
-}
-
-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");
-	});
-});

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

@@ -1,48 +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 {
-	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();
-	});
-});

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

@@ -1,57 +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 } 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;
-}
-
-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);
-	});
-});

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

@@ -1,42 +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 {
-	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();
-
-		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();
-
-		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

@@ -1,39 +0,0 @@
-import { redo, undo } from "@codemirror/commands";
-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();
-
-		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();
-
-		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");
-
-		expect(undo(view)).toBe(true);
-		expect(view.state.doc.toString()).toBe(before);
-
-		expect(redo(view)).toBe(true);
-		expect(view.state.doc.toString()).toBe(afterEdit);
-	});
-});