@surrealdb/ui 1.1.1 → 1.2.1

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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,41 @@
+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

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

package/tests/e2e/MarkdownViewer/parity.test.tsx

@@ -0,0 +1,190 @@
+import { Grid, MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
+import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import { type FC, useState } from "react";
+import { describe, expect, it } from "vitest";
+import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
+import { md, mdViewer } from "../../_setup/markdown-classes";
+
+const PARITY_FIXTURE = `# Title
+
+Paragraph *italic* and **bold** and \`code\`.
+
+## Section
+
+Visit [link](https://surrealdb.com).
+
+- One
+- Two
+
+- [ ] todo one
+- [x] todo two **with bold**
+
+\`\`\`ts
+return true;
+\`\`\`
+
+<details>
+<summary>Expand</summary>
+
+Inside details.
+
+</details>
+`;
+
+const ParityLayout: FC = () => {
+    const [doc] = useState(PARITY_FIXTURE);
+    return (
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            <Grid gap="md">
+                <Grid.Col span={{ base: 12, md: 6 }}>
+                    <Paper
+                        p="md"
+                        radius="md"
+                        withBorder
+                    >
+                        <MarkdownEditor
+                            mode="preview"
+                            document={doc}
+                            autoFocus={false}
+                            mih={200}
+                        />
+                    </Paper>
+                </Grid.Col>
+                <Grid.Col span={{ base: 12, md: 6 }}>
+                    <Paper
+                        p="md"
+                        radius="md"
+                        withBorder
+                    >
+                        <MarkdownViewer content={doc} />
+                    </Paper>
+                </Grid.Col>
+            </Grid>
+        </MantineProvider>
+    );
+};
+
+function visibleText(el: Element): string {
+    const clone = el.cloneNode(true) as Element;
+
+    for (const n of clone.querySelectorAll(`.${md.markHidden}, .cm-line-folded`)) {
+        n.remove();
+    }
+
+    return clone.textContent?.replace(/\s+/g, "") ?? "";
+}
+
+const PARITY_CLASSES = [md.h1, md.h2, md.strong, md.emphasis, md.codeInline, md.link] as const;
+
+describe("MarkdownViewer / editor parity", () => {
+    it("renders checklist text alongside checkboxes in the viewer", async () => {
+        mountStory(<ParityLayout />);
+        await getEditorView();
+        await nextFrame();
+
+        const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
+        expect(vrEl).not.toBeNull();
+        if (vrEl === null) return;
+
+        const taskItems = vrEl.querySelectorAll(`li.${md.taskItem}`);
+        expect(taskItems.length).toBe(2);
+
+        const text = (i: number) =>
+            (taskItems[i]?.querySelector(`.${md.taskText}`)?.textContent ?? "").trim();
+        expect(text(0)).toContain("todo one");
+        expect(text(1)).toContain("todo two");
+        expect(taskItems[1]?.querySelector(`.${md.strong}`)?.textContent).toBe("with bold");
+    });
+
+    it("uses the same link colour as the editor", async () => {
+        mountStory(<ParityLayout />);
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+
+        const cmLink = document.querySelector(`.cm-content .${md.link}`);
+        const vwLink = document.querySelector(`.${mdViewer.viewerRoot} .${md.link}`);
+        expect(cmLink).not.toBeNull();
+        expect(vwLink).not.toBeNull();
+        if (cmLink === null || vwLink === null) return;
+
+        expect(getComputedStyle(vwLink).color).toBe(getComputedStyle(cmLink).color);
+    });
+
+    it("matches visible text between preview editor (blurred) and MarkdownViewer", async () => {
+        mountStory(<ParityLayout />);
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+        await nextFrame();
+
+        const cmEl = document.querySelector(".cm-content");
+        const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
+        expect(cmEl).not.toBeNull();
+        expect(vrEl).not.toBeNull();
+        if (cmEl === null || vrEl === null) {
+            return;
+        }
+
+        expect(visibleText(vrEl)).toBe(visibleText(cmEl));
+    });
+
+    it("matches counts for shared structural classes", async () => {
+        mountStory(<ParityLayout />);
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+
+        const cmEl = document.querySelector(".cm-content");
+        const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
+        expect(cmEl).not.toBeNull();
+        expect(vrEl).not.toBeNull();
+        if (cmEl === null || vrEl === null) {
+            return;
+        }
+
+        for (const cls of PARITY_CLASSES) {
+            expect(vrEl.querySelectorAll(`.${cls}`).length).toBe(
+                cmEl.querySelectorAll(`.${cls}`).length,
+            );
+        }
+    });
+
+    it("matches computed font size on first heading", async () => {
+        mountStory(<ParityLayout />);
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+
+        const cmH1 = document.querySelector(`.cm-content .${md.h1}`);
+        const vwH1 = document.querySelector(`.${mdViewer.viewerRoot} .${md.h1}`);
+        expect(cmH1).not.toBeNull();
+        expect(vwH1).not.toBeNull();
+        if (cmH1 === null || vwH1 === null) {
+            return;
+        }
+
+        const a = getComputedStyle(cmH1);
+        const b = getComputedStyle(vwH1);
+        expect(a.fontSize).toBe(b.fontSize);
+        expect(a.fontWeight).toBe(b.fontWeight);
+    });
+
+    it("renders HTML details in both editor preview and viewer", async () => {
+        mountStory(<ParityLayout />);
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+
+        const vrEl = document.querySelector(`.${mdViewer.viewerRoot}`);
+        expect(vrEl?.textContent).toContain("Expand");
+        expect(vrEl?.textContent).toContain("Inside details");
+        expect(document.querySelector(".cm-content")?.textContent).toContain("Inside details");
+    });
+});

package/tests/e2e/MarkdownViewer/render.test.tsx

@@ -0,0 +1,35 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import { describe, expect, it } from "vitest";
+import { mountStory, nextFrame } from "../../_setup/e2e-helpers";
+import { md, mdViewer } from "../../_setup/markdown-classes";
+
+const FIXTURE = `# Hello
+
+Paragraph **bold**.
+`;
+
+describe("MarkdownViewer / render", () => {
+    it("exercises shared preview class names without mounting CodeMirror", async () => {
+        mountStory(
+            <MantineProvider
+                theme={MANTINE_THEME}
+                cssVariablesResolver={v8CssVariablesResolver}
+                forceColorScheme="dark"
+            >
+                <MarkdownViewer content={FIXTURE} />
+            </MantineProvider>,
+        );
+        await nextFrame();
+        await nextFrame();
+
+        const root = document.querySelector(`.${mdViewer.viewerRoot}`);
+        expect(root).not.toBeNull();
+        expect(document.querySelector(".cm-editor")).toBeNull();
+
+        expect(root?.querySelector(`.${md.heading}`)).not.toBeNull();
+        expect(root?.querySelector(`.${md.h1}`)).not.toBeNull();
+        expect(root?.querySelector(`.${md.strong}`)).not.toBeNull();
+    });
+});

package/tests/unit/Editor/helpers.test.ts

@@ -0,0 +1,42 @@
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { setEditorText } from "@src/lib/editor/helpers";
+import { afterEach, describe, expect, it } from "vitest";
+
+describe("setEditorText", () => {
+    let container: HTMLDivElement;
+    let view: EditorView;
+
+    afterEach(() => {
+        view?.destroy();
+        container?.remove();
+    });
+
+    function createView(doc: string, anchor: number): EditorView {
+        container = document.createElement("div");
+        document.body.appendChild(container);
+
+        return new EditorView({
+            parent: container,
+            state: EditorState.create({ doc, selection: { anchor, head: anchor } }),
+        });
+    }
+
+    it("clamps the selection when replacing with shorter text", () => {
+        view = createView("abcd", 4);
+
+        expect(() => setEditorText(view, "ab")).not.toThrow();
+
+        expect(view.state.doc.toString()).toBe("ab");
+        expect(view.state.selection.main.head).toBe(2);
+    });
+
+    it("preserves a valid selection when replacing with longer text", () => {
+        view = createView("ab", 2);
+
+        setEditorText(view, "abcd");
+
+        expect(view.state.doc.toString()).toBe("abcd");
+        expect(view.state.selection.main.head).toBe(2);
+    });
+});

package/tests/unit/MarkdownEditor/code-info.test.ts

@@ -0,0 +1,63 @@
+import { codeInfoString, parseCodeInfo } from "@src/lib/markdown/tree/code-info";
+import { describe, expect, it } from "vitest";
+
+describe("parseCodeInfo", () => {
+    it("returns an empty language and attributes for a blank info string", () => {
+        expect(parseCodeInfo("")).toEqual({ language: "", attributes: {} });
+        expect(parseCodeInfo("   ")).toEqual({ language: "", attributes: {} });
+    });
+
+    it("reads the language as the first token, lower-cased", () => {
+        expect(parseCodeInfo("TypeScript")).toEqual({
+            language: "typescript",
+            attributes: {},
+        });
+    });
+
+    it("resolves loose flags to true", () => {
+        const parsed = parseCodeInfo("surql runnable");
+        expect(parsed.language).toBe("surql");
+        expect(parsed.attributes.runnable).toBe(true);
+    });
+
+    it("parses double- and single-quoted values", () => {
+        const parsed = parseCodeInfo(`js title="My Example" label='other'`);
+        expect(parsed.attributes.title).toBe("My Example");
+        expect(parsed.attributes.label).toBe("other");
+    });
+
+    it("keeps an empty string value for empty quotes", () => {
+        const parsed = parseCodeInfo(`js title=""`);
+        expect(parsed.attributes.title).toBe("");
+    });
+
+    it("parses bare unquoted values", () => {
+        const parsed = parseCodeInfo("ts height=200");
+        expect(parsed.attributes.height).toBe("200");
+    });
+
+    it("parses braced expression values", () => {
+        const parsed = parseCodeInfo("surql runnable={SELECT 1}");
+        expect(parsed.attributes.runnable).toBe("{SELECT 1}");
+    });
+
+    it("mixes loose flags and key/value pairs", () => {
+        const parsed = parseCodeInfo(`surql runnable title="Demo"`);
+        expect(parsed).toEqual({
+            language: "surql",
+            attributes: { runnable: true, title: "Demo" },
+        });
+    });
+
+    it("preserves attribute value casing", () => {
+        const parsed = parseCodeInfo(`surql runnable="SELECT 1"`);
+        expect(parsed.attributes.runnable).toBe("SELECT 1");
+    });
+
+    it("codeInfoString returns string values and undefined for flags", () => {
+        const parsed = parseCodeInfo(`surql runnable title="Demo"`);
+        expect(codeInfoString(parsed, "title")).toBe("Demo");
+        expect(codeInfoString(parsed, "runnable")).toBeUndefined();
+        expect(codeInfoString(parsed, "missing")).toBeUndefined();
+    });
+});