@surrealdb/ui 1.2.11 → 1.2.13

package/tests/e2e/MarkdownEditor/content-blocks.test.tsx

@@ -3,150 +3,151 @@ 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 {
-    focusAndType,
-    mountStory,
-    nextFrame,
-    preparePreviewEditor,
-    scrollEditorTo,
-    sleep,
+	focusAndType,
+	mountStory,
+	nextFrame,
+	preparePreviewEditor,
+	scrollEditorTo,
+	sleep,
 } from "../../_setup/e2e-helpers";
 import { md } from "../../_setup/markdown-classes";
 
 const Stories = composeStories(MarkdownStories);
 
 describe("MarkdownEditor / content blocks", () => {
-    it("continues an ordered list when Enter is pressed at the end of a numbered line", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const doc = view.state.doc.toString();
-
-        const line = "4. Fourth step";
-        const idx = doc.indexOf(line);
-        expect(idx).toBeGreaterThan(-1);
-        const eol = idx + line.length;
-
-        await scrollEditorTo(view, idx);
-        view.dispatch({ selection: EditorSelection.cursor(eol) });
-        await nextFrame();
-
-        await focusAndType("{Enter}fifth step");
-        await nextFrame();
-
-        expect(view.state.doc.toString()).toMatch(/\n5\.\s*fifth step/);
-    });
-
-    it("shows blockquote text from the sample document", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const doc = view.state.doc.toString();
-        expect(doc).toContain("> A blockquote");
-
-        const quotePos = doc.indexOf("> A blockquote");
-        await scrollEditorTo(view, quotePos);
-        await nextFrame();
-
-        expect(document.querySelector(`.${md.quote}`)?.textContent ?? "").toMatch(/blockquote/i);
-    });
-
-    it("renders a horizontal rule as a separator", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const hrPos = view.state.doc.toString().indexOf("***");
-        expect(hrPos).toBeGreaterThan(-1);
-        await scrollEditorTo(view, hrPos);
-        view.dispatch({ selection: EditorSelection.cursor(0) });
-        await nextFrame();
-
-        let hrs = 0;
-        for (let i = 0; i < 40; i++) {
-            hrs = document.querySelectorAll(`hr.${md.hr}[aria-label="Horizontal rule"]`).length;
-            if (hrs > 0) break;
-            await nextFrame();
-        }
-
-        expect(hrs).toBeGreaterThan(0);
-    });
-
-    it("renders a read-only table preview when the table block is inactive", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const doc = view.state.doc.toString();
-        const tablePos = doc.indexOf("| Feature | Status");
-        const afterTable = doc.indexOf("## HTML table");
-        expect(tablePos).toBeGreaterThan(-1);
-        expect(afterTable).toBeGreaterThan(-1);
-        view.dispatch({
-            selection: EditorSelection.cursor(afterTable),
-            effects: EditorView.scrollIntoView(tablePos, { y: "center" }),
-        });
-
-        let tables = 0;
-        for (let i = 0; i < 40; i++) {
-            tables = document.querySelectorAll(
-                `.cm-editor [data-md-widget="TableWidget"] table.${md.table}`,
-            ).length;
-            if (tables > 0) break;
-            await nextFrame();
-        }
-
-        expect(tables).toBeGreaterThan(0);
-    });
-
-    it("shows GFM table source when the table block is active", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const doc = view.state.doc.toString();
-        const marker = "| Feature | Status";
-        const idx = doc.indexOf(marker);
-        expect(idx).toBeGreaterThan(-1);
-
-        await scrollEditorTo(view, idx);
-        view.dispatch({ selection: EditorSelection.cursor(idx + 2) });
-        await nextFrame();
-
-        expect(document.querySelector(`.${md.tableWidget}`)).toBeNull();
-        expect(view.state.doc.sliceString(idx, idx + marker.length)).toBe(marker);
-    });
-
-    it("shows fenced TypeScript sample code in the document", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const doc = view.state.doc.toString();
-        expect(doc).toContain("function add");
-
-        const codePos = doc.indexOf("function add");
-        await scrollEditorTo(view, codePos);
-        await nextFrame();
-
-        expect(document.querySelector(".cm-editor")?.textContent ?? "").toContain("function add");
-    });
-
-    it("exposes clickable links with an href matching the Markdown target", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const linkPos = view.state.doc.toString().indexOf("[SurrealDB website]");
-        expect(linkPos).toBeGreaterThan(-1);
-        await scrollEditorTo(view, linkPos);
-        view.dispatch({ selection: EditorSelection.cursor(0) });
-        await nextFrame();
-
-        expect(document.querySelector(`.${md.link}[data-href*='surrealdb.com']`)).not.toBeNull();
-    });
-
-    it("renders a diagram for the fenced mermaid block", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await preparePreviewEditor();
-        const mermaidPos = view.state.doc.toString().indexOf("```mermaid");
-        expect(mermaidPos).toBeGreaterThan(-1);
-        await scrollEditorTo(view, mermaidPos);
-
-        let found = false;
-        for (let i = 0; i < 60; i++) {
-            found = !!document.querySelector('.cm-editor [aria-label="Mermaid diagram"] svg');
-            if (found) break;
-            await sleep(250);
-        }
-        expect(found).toBe(true);
-    });
+	it("continues an ordered list when Enter is pressed at the end of a numbered line", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const doc = view.state.doc.toString();
+
+		const line = "4. Fourth step";
+		const idx = doc.indexOf(line);
+		expect(idx).toBeGreaterThan(-1);
+		const eol = idx + line.length;
+
+		await scrollEditorTo(view, idx);
+		view.dispatch({ selection: EditorSelection.cursor(eol) });
+		await nextFrame();
+
+		await focusAndType("{Enter}fifth step");
+		await nextFrame();
+
+		expect(view.state.doc.toString()).toMatch(/\n5\.\s*fifth step/);
+	});
+
+	it("shows blockquote text from the sample document", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const doc = view.state.doc.toString();
+		expect(doc).toContain("> A blockquote");
+
+		const quotePos = doc.indexOf("> A blockquote");
+		await scrollEditorTo(view, quotePos);
+		await nextFrame();
+
+		expect(document.querySelector(`.${md.quote}`)?.textContent ?? "").toMatch(/blockquote/i);
+	});
+
+	it("renders a horizontal rule as a separator", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const hrPos = view.state.doc.toString().indexOf("***");
+		expect(hrPos).toBeGreaterThan(-1);
+		await scrollEditorTo(view, hrPos);
+		view.dispatch({ selection: EditorSelection.cursor(0) });
+		await nextFrame();
+
+		let hrs = 0;
+		for (let i = 0; i < 40; i++) {
+			hrs = document.querySelectorAll(`hr.${md.hr}[aria-label="Horizontal rule"]`).length;
+			if (hrs > 0) break;
+			await nextFrame();
+		}
+
+		expect(hrs).toBeGreaterThan(0);
+	});
+
+	it("renders a read-only table preview when the table block is inactive", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const doc = view.state.doc.toString();
+		const tablePos = doc.indexOf("| Feature | Status");
+		const afterTable = doc.indexOf("## HTML table");
+		expect(tablePos).toBeGreaterThan(-1);
+		expect(afterTable).toBeGreaterThan(-1);
+		view.dispatch({
+			selection: EditorSelection.cursor(afterTable),
+			effects: EditorView.scrollIntoView(tablePos, { y: "center" }),
+		});
+
+		let tables = 0;
+		for (let i = 0; i < 40; i++) {
+			tables = document.querySelectorAll(
+				`.cm-editor [data-md-widget="TableWidget"] table.${md.table}`,
+			).length;
+			if (tables > 0) break;
+			await nextFrame();
+		}
+
+		expect(tables).toBeGreaterThan(0);
+	});
+
+	it("shows GFM table source when the table block is active", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const doc = view.state.doc.toString();
+		const marker = "| Feature | Status";
+		const idx = doc.indexOf(marker);
+		expect(idx).toBeGreaterThan(-1);
+
+		await scrollEditorTo(view, idx);
+		view.dispatch({ selection: EditorSelection.cursor(idx + 2) });
+		await nextFrame();
+
+		expect(document.querySelector(`.${md.tableWidget}`)).toBeNull();
+		expect(view.state.doc.sliceString(idx, idx + marker.length)).toBe(marker);
+	});
+
+	it("shows fenced TypeScript sample code in the document", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const doc = view.state.doc.toString();
+		expect(doc).toContain("function add");
+
+		const codePos = doc.indexOf("function add");
+		await scrollEditorTo(view, codePos);
+		await nextFrame();
+
+		expect(document.querySelector(".cm-editor")?.textContent ?? "").toContain("function add");
+	});
+
+	it("exposes clickable links with an href matching the Markdown target", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const linkPos = view.state.doc.toString().indexOf("[SurrealDB website]");
+		expect(linkPos).toBeGreaterThan(-1);
+		await scrollEditorTo(view, linkPos);
+		view.dispatch({ selection: EditorSelection.cursor(0) });
+		await nextFrame();
+
+		expect(document.querySelector(`.${md.link}[data-href*='surrealdb.com']`)).not.toBeNull();
+	});
+
+	it("renders a diagram for the fenced mermaid block", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await preparePreviewEditor();
+		const mermaidPos = view.state.doc.toString().indexOf("```mermaid");
+		expect(mermaidPos).toBeGreaterThan(-1);
+		await scrollEditorTo(view, mermaidPos);
+
+		let found = false;
+		for (let i = 0; i < 60; i++) {
+			found = !!document.querySelector('.cm-editor [aria-label="Mermaid diagram"] svg');
+			if (found) break;
+			await sleep(250);
+		}
+		expect(found).toBe(true);
+	});
 });

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

@@ -2,110 +2,111 @@ 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,
+	focusAndType,
+	getEditorView,
+	mountStory,
+	nextFrame,
+	readDoc,
 } from "../../_setup/e2e-helpers";
 
 const Stories = composeStories(MarkdownStories);
 
 describe("MarkdownEditor / edits", () => {
-    it("reflects typed characters in the underlying document", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await getEditorView();
-
-        view.dispatch({ selection: EditorSelection.cursor(view.state.doc.length) });
-        view.focus();
-
-        await focusAndType("\nfresh content");
-        await nextFrame();
-
-        const doc = await readDoc();
-        expect(doc.endsWith("\nfresh content")).toBe(true);
-    });
-
-    it("mirrors the source preview block in the story when the document changes", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await getEditorView();
-
-        view.dispatch({
-            selection: EditorSelection.cursor(view.state.doc.length),
-            changes: { from: view.state.doc.length, insert: "\n\nMirror this line." },
-        });
-        await nextFrame();
-        await nextFrame();
-
-        const previewBlock = document.querySelector<HTMLPreElement>("pre");
-        expect(previewBlock).not.toBeNull();
-        expect(previewBlock?.textContent ?? "").toContain("Mirror this line.");
-    });
-
-    it("expands triple backtick into a fenced block with caret on the empty content line", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await getEditorView();
-
-        view.focus();
-        const insertAt = view.state.doc.length;
-        view.dispatch({
-            changes: { from: insertAt, insert: "\n\n``" },
-            selection: EditorSelection.cursor(insertAt + 4),
-        });
-        await nextFrame();
-
-        await focusAndType("`");
-        await nextFrame();
-
-        const doc = await readDoc();
-        expect(doc.endsWith("\n\n```\n\n```")).toBe(true);
-
-        const main = view.state.selection.main;
-        expect(main.empty).toBe(true);
-        const contentLine = view.state.doc.lineAt(main.head);
-        expect(contentLine.text).toBe("");
-        expect(main.head).toBe(contentLine.from);
-        expect(view.state.doc.line(contentLine.number - 1).text).toBe("```");
-        expect(view.state.doc.line(contentLine.number + 1).text).toBe("```");
-    });
-
-    it("wraps a non-empty selection with backticks when ` is typed", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await getEditorView();
-
-        const target = "First item";
-        const start = view.state.doc.toString().indexOf(target);
-        expect(start).toBeGreaterThan(-1);
-
-        view.focus();
-        view.dispatch({ selection: EditorSelection.range(start, start + target.length) });
-        await nextFrame();
-
-        await focusAndType("`");
-        await nextFrame();
-
-        const doc = await readDoc();
-        expect(doc).toContain("`First item`");
-    });
-
-    it("auto-continues a bullet list when Enter is pressed at the end of a list item", async () => {
-        mountStory(<Stories.Editor />);
-        const view = await getEditorView();
-
-        const target = "- First item";
-        const start = view.state.doc.toString().indexOf(target);
-        expect(start).toBeGreaterThan(-1);
-        const eol = start + target.length;
-
-        view.focus();
-        view.dispatch({ selection: EditorSelection.cursor(eol) });
-        await nextFrame();
-
-        await focusAndType("{Enter}continued");
-        await nextFrame();
-
-        const doc = await readDoc();
-        expect(doc).toContain("- First item\n- continued\n- Second item");
-    });
+	it("reflects typed characters in the underlying document", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await getEditorView();
+
+		view.dispatch({ selection: EditorSelection.cursor(view.state.doc.length) });
+		view.focus();
+
+		await focusAndType("\nfresh content");
+		await nextFrame();
+
+		const doc = await readDoc();
+		expect(doc.endsWith("\nfresh content")).toBe(true);
+	});
+
+	it("mirrors the source preview block in the story when the document changes", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await getEditorView();
+
+		view.dispatch({
+			selection: EditorSelection.cursor(view.state.doc.length),
+			changes: { from: view.state.doc.length, insert: "\n\nMirror this line." },
+		});
+		await nextFrame();
+		await nextFrame();
+
+		const previewBlock = document.querySelector<HTMLPreElement>("pre");
+		expect(previewBlock).not.toBeNull();
+		expect(previewBlock?.textContent ?? "").toContain("Mirror this line.");
+	});
+
+	it("expands triple backtick into a fenced block with caret on the empty content line", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await getEditorView();
+
+		view.focus();
+		const insertAt = view.state.doc.length;
+		view.dispatch({
+			changes: { from: insertAt, insert: "\n\n``" },
+			selection: EditorSelection.cursor(insertAt + 4),
+		});
+		await nextFrame();
+
+		await focusAndType("`");
+		await nextFrame();
+
+		const doc = await readDoc();
+		expect(doc.endsWith("\n\n```\n\n```")).toBe(true);
+
+		const main = view.state.selection.main;
+		expect(main.empty).toBe(true);
+		const contentLine = view.state.doc.lineAt(main.head);
+		expect(contentLine.text).toBe("");
+		expect(main.head).toBe(contentLine.from);
+		expect(view.state.doc.line(contentLine.number - 1).text).toBe("```");
+		expect(view.state.doc.line(contentLine.number + 1).text).toBe("```");
+	});
+
+	it("wraps a non-empty selection with backticks when ` is typed", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await getEditorView();
+
+		const target = "First item";
+		const start = view.state.doc.toString().indexOf(target);
+		expect(start).toBeGreaterThan(-1);
+
+		view.focus();
+		view.dispatch({ selection: EditorSelection.range(start, start + target.length) });
+		await nextFrame();
+
+		await focusAndType("`");
+		await nextFrame();
+
+		const doc = await readDoc();
+		expect(doc).toContain("`First item`");
+	});
+
+	it("auto-continues a bullet list when Enter is pressed at the end of a list item", async () => {
+		mountStory(<Stories.Editor />);
+		const view = await getEditorView();
+
+		const target = "- First item";
+		const start = view.state.doc.toString().indexOf(target);
+		expect(start).toBeGreaterThan(-1);
+		const eol = start + target.length;
+
+		view.focus();
+		view.dispatch({ selection: EditorSelection.cursor(eol) });
+		await nextFrame();
+
+		await focusAndType("{Enter}continued");
+		await nextFrame();
+
+		const doc = await readDoc();
+		expect(doc).toContain("- First item\n- continued\n- Second item");
+	});
 });

package/tests/e2e/MarkdownEditor/heading-fold.test.tsx

@@ -1,44 +1,45 @@
 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";
 import { md } from "../../_setup/markdown-classes";
 
 const Stories = composeStories(MarkdownStories);
 
 describe("MarkdownEditor / heading folds", () => {
-    it("MarkdownViewer: heading fold control collapses the first section", async () => {
-        mountStory(<Stories.Viewer />);
-        await nextFrame();
-        await nextFrame();
-
-        const folds = document.querySelectorAll<HTMLButtonElement>(
-            `.${md.headingFold}[data-level="1"]`,
-        );
-        expect(folds.length).toBeGreaterThan(0);
-
-        const h1Fold = folds[0];
-        if (!h1Fold) throw new Error("expected an H1 fold control");
-
-        expect(h1Fold.getAttribute("data-folded")).toBe("false");
-        expect(h1Fold.getAttribute("aria-label")).toBe("Collapse section");
-
-        h1Fold.click();
-        await nextFrame();
-        await nextFrame();
-
-        const folded = document.querySelector<HTMLButtonElement>(
-            `.${md.headingFold}[data-level="1"]`,
-        );
-        expect(folded?.getAttribute("data-folded")).toBe("true");
-        expect(folded?.getAttribute("aria-label")).toBe("Expand section");
-    });
-
-    it("preview mode does not render heading fold controls in the editor", async () => {
-        mountStory(<Stories.Editor />);
-        await getEditorView();
-        await nextFrame();
-
-        expect(document.querySelectorAll(`.${md.headingFold}`).length).toBe(0);
-    });
+	it("MarkdownViewer: heading fold control collapses the first section", async () => {
+		mountStory(<Stories.Viewer />);
+		await nextFrame();
+		await nextFrame();
+
+		const folds = document.querySelectorAll<HTMLButtonElement>(
+			`.${md.headingFold}[data-level="1"]`,
+		);
+		expect(folds.length).toBeGreaterThan(0);
+
+		const h1Fold = folds[0];
+		if (!h1Fold) throw new Error("expected an H1 fold control");
+
+		expect(h1Fold.getAttribute("data-folded")).toBe("false");
+		expect(h1Fold.getAttribute("aria-label")).toBe("Collapse section");
+
+		h1Fold.click();
+		await nextFrame();
+		await nextFrame();
+
+		const folded = document.querySelector<HTMLButtonElement>(
+			`.${md.headingFold}[data-level="1"]`,
+		);
+		expect(folded?.getAttribute("data-folded")).toBe("true");
+		expect(folded?.getAttribute("aria-label")).toBe("Expand section");
+	});
+
+	it("preview mode does not render heading fold controls in the editor", async () => {
+		mountStory(<Stories.Editor />);
+		await getEditorView();
+		await nextFrame();
+
+		expect(document.querySelectorAll(`.${md.headingFold}`).length).toBe(0);
+	});
 });