@surrealdb/ui 1.1.1 → 1.2.1

package/tests/unit/MarkdownEditor/table.test.ts

@@ -0,0 +1,119 @@
+import {
+    gfmTableAddColumn,
+    gfmTableAddRow,
+    gfmTableRemoveColumn,
+    gfmTableRemoveRow,
+    locateGfmTableCells,
+    parseGfmTable,
+    serialiseGfmTable,
+    type TableModel,
+} from "@src/lib/markdown/tree/gfm-table";
+import { describe, expect, it } from "vitest";
+
+describe("GFM table", () => {
+    it("parses simple GFM tables", () => {
+        const source = "| a | b |\n| - | - |\n| 1 | 2 |";
+        const model = parseGfmTable(source);
+        expect(model).not.toBeNull();
+        expect(model?.headers).toEqual(["a", "b"]);
+        expect(model?.rows).toEqual([["1", "2"]]);
+    });
+
+    it("respects alignment markers", () => {
+        const source = "| a | b | c |\n| :- | :-: | -: |\n| 1 | 2 | 3 |";
+        const model = parseGfmTable(source);
+        expect(model?.alignments).toEqual(["left", "center", "right"]);
+    });
+
+    it("round trips a table preserving content", () => {
+        const source = "| Name | Score |\n| :--- | ----: |\n| Ari  | 12    |\n| Nova | 8     |";
+        const model = parseGfmTable(source);
+        if (!model) throw new Error("expected parse");
+        const serialised = serialiseGfmTable(model);
+
+        const reparsed = parseGfmTable(serialised);
+        expect(reparsed).not.toBeNull();
+        expect(reparsed?.headers).toEqual(model.headers);
+        expect(reparsed?.alignments).toEqual(model.alignments);
+        expect(reparsed?.rows).toEqual(model.rows);
+    });
+
+    it("returns null for non-table input", () => {
+        expect(parseGfmTable("just a paragraph")).toBeNull();
+    });
+});
+
+describe("locateGfmTableCells", () => {
+    it("locates the content start offset of each cell", () => {
+        const source = "| a | b |\n| - | - |\n| 1 | 2 |";
+        const cells = locateGfmTableCells(source);
+        expect(cells).not.toBeNull();
+        // Header content starts: 'a' at 2, 'b' at 6.
+        expect(cells?.headerOffsets).toEqual([2, 6]);
+        expect(source[cells?.headerOffsets[0] ?? -1]).toBe("a");
+        expect(source[cells?.headerOffsets[1] ?? -1]).toBe("b");
+        // Body row content starts: '1' and '2'.
+        expect(source[cells?.rowOffsets[0]?.[0] ?? -1]).toBe("1");
+        expect(source[cells?.rowOffsets[0]?.[1] ?? -1]).toBe("2");
+    });
+
+    it("handles ragged padding and missing outer pipes", () => {
+        const source = "Name | Score\n--- | ---\nAri  |   12";
+        const cells = locateGfmTableCells(source);
+        expect(cells).not.toBeNull();
+        expect(source.slice(cells?.headerOffsets[0] ?? 0, (cells?.headerOffsets[0] ?? 0) + 4)).toBe(
+            "Name",
+        );
+        expect(source.slice(cells?.headerOffsets[1] ?? 0, (cells?.headerOffsets[1] ?? 0) + 5)).toBe(
+            "Score",
+        );
+        expect(source[cells?.rowOffsets[0]?.[1] ?? -1]).toBe("1");
+    });
+
+    it("returns null for non-table input", () => {
+        expect(locateGfmTableCells("just a paragraph")).toBeNull();
+    });
+});
+
+describe("GFM table edits", () => {
+    const base: TableModel = {
+        headers: ["a", "b"],
+        alignments: ["default", "default"],
+        rows: [["1", "2"]],
+    };
+
+    it("adds an empty trailing column", () => {
+        const next = gfmTableAddColumn(base);
+        expect(next.headers).toEqual(["a", "b", ""]);
+        expect(next.alignments).toHaveLength(3);
+        expect(next.rows).toEqual([["1", "2", ""]]);
+    });
+
+    it("removes the last column but keeps at least one", () => {
+        const next = gfmTableRemoveColumn(base);
+        expect(next.headers).toEqual(["a"]);
+        expect(next.rows).toEqual([["1"]]);
+        const single: TableModel = { headers: ["only"], alignments: ["default"], rows: [["x"]] };
+        expect(gfmTableRemoveColumn(single)).toEqual(single);
+    });
+
+    it("adds an empty trailing row sized to the columns", () => {
+        const next = gfmTableAddRow(base);
+        expect(next.rows).toEqual([
+            ["1", "2"],
+            ["", ""],
+        ]);
+    });
+
+    it("removes the last row and is a no-op with no rows", () => {
+        expect(gfmTableRemoveRow(base).rows).toEqual([]);
+        const empty: TableModel = { headers: ["a"], alignments: ["default"], rows: [] };
+        expect(gfmTableRemoveRow(empty)).toEqual(empty);
+    });
+
+    it("round-trips edits through serialise/parse", () => {
+        const widened = serialiseGfmTable(gfmTableAddColumn(base));
+        const reparsed = parseGfmTable(widened);
+        expect(reparsed?.headers).toEqual(["a", "b", ""]);
+    });
+});

package/tests/unit/MarkdownEditor/triggers.test.ts

@@ -0,0 +1,244 @@
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { EditorView, runScopeHandlers } from "@codemirror/view";
+import { Callout } from "@src/lib/markdown/editor/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
+import { markdownPairKeymap, markdownSnippetHandler } from "@src/lib/markdown/editor/snippets";
+import { describe, expect, it } from "vitest";
+
+function createView(doc: string, cursor?: number | { anchor: number; head: number }): EditorView {
+    const state = EditorState.create({
+        doc,
+        extensions: [
+            createMarkdownLanguage({ extensions: [Callout] }),
+            markdownSnippetHandler,
+            markdownPairKeymap,
+        ],
+        selection:
+            typeof cursor === "number"
+                ? EditorSelection.cursor(cursor)
+                : cursor
+                  ? EditorSelection.range(cursor.anchor, cursor.head)
+                  : undefined,
+    });
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+
+    return new EditorView({ state, parent });
+}
+
+/** Dispatch a Backspace through the registered key handlers. */
+function backspace(view: EditorView): boolean {
+    return runScopeHandlers(view, new KeyboardEvent("keydown", { key: "Backspace" }), "editor");
+}
+
+/**
+ * Simulate a single-character user input by walking the same input-handler
+ * pipeline the editor uses. Falls back to a default insert when no handler
+ * consumes the event so we exercise the trigger but otherwise behave like a
+ * normal keystroke.
+ */
+function type(view: EditorView, text: string): void {
+    const main = view.state.selection.main;
+    const handlers = view.state.facet(EditorView.inputHandler);
+    const buildTransaction = () => view.state.update(view.state.replaceSelection(text));
+    for (const handler of handlers) {
+        if (handler(view, main.from, main.to, text, buildTransaction)) {
+            return;
+        }
+    }
+    view.dispatch(buildTransaction());
+}
+
+describe("markdownSnippetHandler", () => {
+    it("expands triple backtick into a fenced code block with caret on the empty content line", () => {
+        const view = createView("``", 2);
+        type(view, "`");
+
+        expect(view.state.doc.toString()).toBe("```\n\n```");
+        expect(view.state.selection.main.empty).toBe(true);
+        // Caret on the empty middle line, after "```\n".
+        expect(view.state.selection.main.from).toBe(4);
+
+        view.destroy();
+    });
+
+    it("preserves leading indent when expanding a fence inside a nested context", () => {
+        const view = createView("  ``", 4);
+        type(view, "`");
+
+        expect(view.state.doc.toString()).toBe("  ```\n  \n  ```");
+        // Caret on the indented content line.
+        expect(view.state.selection.main.from).toBe(8);
+
+        view.destroy();
+    });
+
+    it("expands a triple backtick typed one keystroke at a time", () => {
+        const view = createView("", 0);
+        type(view, "`");
+        type(view, "`");
+        type(view, "`");
+
+        expect(view.state.doc.toString()).toBe("```\n\n```");
+        expect(view.state.selection.main.from).toBe(4);
+
+        view.destroy();
+    });
+
+    it("does not expand a fence from a single backtick after text", () => {
+        const view = createView("abc", 3);
+        type(view, "`");
+
+        // A lone backtick must auto-pair, never clobber the preceding text.
+        expect(view.state.doc.toString()).toBe("abc``");
+        expect(view.state.selection.main.from).toBe(4);
+
+        view.destroy();
+    });
+
+    it("does not expand a fence when the backticks are not at the line start", () => {
+        const view = createView("x ``", 4);
+        type(view, "`");
+
+        expect(view.state.doc.toString()).toBe("x ```");
+
+        view.destroy();
+    });
+
+    it("does not expand a fence when there is content after the cursor on the same line", () => {
+        const view = createView("``rest", 2);
+        type(view, "`");
+
+        expect(view.state.doc.toString()).toBe("```rest");
+
+        view.destroy();
+    });
+
+    it("does not expand a fence when typing inside an existing fenced code block", () => {
+        const view = createView("```js\nlet x``\n```", 13);
+        type(view, "`");
+
+        expect(view.state.doc.toString()).toBe("```js\nlet x```\n```");
+
+        view.destroy();
+    });
+
+    it("wraps a non-empty selection with backticks", () => {
+        const view = createView("hello world", { anchor: 0, head: 5 });
+        type(view, "`");
+
+        expect(view.state.doc.toString()).toBe("`hello` world");
+        expect(view.state.selection.main.from).toBe(1);
+        expect(view.state.selection.main.to).toBe(6);
+
+        view.destroy();
+    });
+
+    it("wraps a selection with asterisks for italic and again for bold", () => {
+        const view = createView("hello world", { anchor: 0, head: 5 });
+        type(view, "*");
+        expect(view.state.doc.toString()).toBe("*hello* world");
+
+        type(view, "*");
+        expect(view.state.doc.toString()).toBe("**hello** world");
+
+        view.destroy();
+    });
+
+    it("wraps a selection with tildes for strikethrough", () => {
+        const view = createView("hello world", { anchor: 0, head: 5 });
+        type(view, "~");
+        type(view, "~");
+
+        expect(view.state.doc.toString()).toBe("~~hello~~ world");
+
+        view.destroy();
+    });
+
+    it("wraps a selection as a markdown link with caret between the parens", () => {
+        const view = createView("hello world", { anchor: 0, head: 5 });
+        type(view, "[");
+
+        expect(view.state.doc.toString()).toBe("[hello]() world");
+        expect(view.state.selection.main.empty).toBe(true);
+        expect(view.state.selection.main.from).toBe(8);
+
+        view.destroy();
+    });
+
+    it("does not wrap when the selection is inside a fenced code block", () => {
+        const view = createView("```js\nlet x = 1\n```", { anchor: 6, head: 11 });
+        type(view, "*");
+
+        const doc = view.state.doc.toString();
+        expect(doc).not.toContain("*let x *");
+        expect(doc).not.toContain("*let x ");
+
+        view.destroy();
+    });
+
+    it("auto-pairs a lone backtick for inline code", () => {
+        const view = createView("run ", 4);
+        type(view, "`");
+
+        expect(view.state.doc.toString()).toBe("run ``");
+        expect(view.state.selection.main.from).toBe(5);
+
+        view.destroy();
+    });
+
+    it("auto-pairs and steps over brackets", () => {
+        const view = createView("", 0);
+        type(view, "(");
+        expect(view.state.doc.toString()).toBe("()");
+        expect(view.state.selection.main.from).toBe(1);
+
+        type(view, ")");
+        expect(view.state.doc.toString()).toBe("()");
+        expect(view.state.selection.main.from).toBe(2);
+
+        view.destroy();
+    });
+
+    it("does not double a closing bracket that was not auto-paired", () => {
+        const view = createView("foo", 3);
+        type(view, ")");
+
+        expect(view.state.doc.toString()).toBe("foo)");
+
+        view.destroy();
+    });
+
+    it("suppresses emphasis auto-pairing directly in front of a word", () => {
+        const view = createView("word", 0);
+        type(view, "*");
+
+        expect(view.state.doc.toString()).toBe("*word");
+        expect(view.state.selection.main.from).toBe(1);
+
+        view.destroy();
+    });
+
+    it("deletes an empty auto-inserted pair with a single backspace", () => {
+        const view = createView("", 0);
+        type(view, "(");
+        expect(view.state.doc.toString()).toBe("()");
+
+        backspace(view);
+        expect(view.state.doc.toString()).toBe("");
+        expect(view.state.selection.main.from).toBe(0);
+
+        view.destroy();
+    });
+
+    it("leaves a non-empty pair to the default backspace", () => {
+        const view = createView("(x)", 2);
+        // The pair handler declines (no empty pair around the caret), so the
+        // default backspace binding is left to run.
+        expect(backspace(view)).toBe(false);
+        expect(view.state.doc.toString()).toBe("(x)");
+
+        view.destroy();
+    });
+});

package/tests/unit/MarkdownEditor/widget-store.test.ts

@@ -0,0 +1,105 @@
+import { createWidgetStore } from "@src/lib/markdown/editor/widgets/store";
+import { describe, expect, it } from "vitest";
+
+describe("createWidgetStore", () => {
+    it("unregisterHost removes only the portal whose host identity matches registration", () => {
+        const store = createWidgetStore();
+        const host214 = document.createElement("span");
+        const host227 = document.createElement("span");
+        store.register({
+            portalKey: 1,
+            id: "list-bullet:214",
+            host: host214,
+            render: () => null,
+        });
+        store.register({
+            portalKey: 2,
+            id: "list-bullet:227",
+            host: host227,
+            render: () => null,
+        });
+        expect(store.getSnapshot()).toHaveLength(2);
+
+        expect(store.hasPortalKey(1)).toBe(true);
+        expect(store.hasPortalKey(99)).toBe(false);
+
+        store.unregisterHost(host214);
+        expect(store.getSnapshot()).toHaveLength(1);
+        expect(store.getSnapshot()[0]?.id).toBe("list-bullet:227");
+
+        store.unregisterHost(host227);
+        expect(store.getSnapshot()).toHaveLength(0);
+    });
+
+    it("same logical id on two hosts keeps two portals until each host unregisters", () => {
+        const store = createWidgetStore();
+        const hostA = document.createElement("span");
+        const hostB = document.createElement("span");
+        store.register({
+            portalKey: 10,
+            id: "list-bullet:214",
+            host: hostA,
+            render: () => null,
+        });
+        store.register({
+            portalKey: 11,
+            id: "list-bullet:214",
+            host: hostB,
+            render: () => null,
+        });
+        expect(store.getSnapshot()).toHaveLength(2);
+
+        store.unregisterHost(hostA);
+        expect(store.getSnapshot()).toHaveLength(1);
+        expect(store.getSnapshot()[0]?.host).toBe(hostB);
+
+        store.unregisterHost(hostB);
+        expect(store.getSnapshot()).toHaveLength(0);
+    });
+
+    it("re-registering the same host evicts the previous portalKey (one portal per host)", () => {
+        const store = createWidgetStore();
+        const host = document.createElement("span");
+        store.register({
+            portalKey: 1,
+            id: "checkbox:2-5",
+            host,
+            render: () => null,
+        });
+        expect(store.getSnapshot()).toHaveLength(1);
+
+        store.register({
+            portalKey: 2,
+            id: "checkbox:2-5",
+            host,
+            render: () => null,
+        });
+        expect(store.getSnapshot()).toHaveLength(1);
+        expect(store.getSnapshot()[0]?.portalKey).toBe(2);
+        expect(store.hasPortalKey(1)).toBe(false);
+        expect(store.hasPortalKey(2)).toBe(true);
+    });
+
+    it("unregisterHost with expectedPortalKey skips when a newer registration owns the host", () => {
+        const store = createWidgetStore();
+        const host = document.createElement("span");
+        store.register({
+            portalKey: 10,
+            id: "checkbox:2-5",
+            host,
+            render: () => null,
+        });
+        store.register({
+            portalKey: 11,
+            id: "checkbox:2-5",
+            host,
+            render: () => null,
+        });
+        store.unregisterHost(host, 10);
+        expect(store.getSnapshot()).toHaveLength(1);
+        expect(store.getSnapshot()[0]?.portalKey).toBe(11);
+
+        store.unregisterHost(host, 11);
+        expect(store.getSnapshot()).toHaveLength(0);
+    });
+});

package/tests/unit/MarkdownViewer/code-title.test.tsx

@@ -0,0 +1,62 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import type { ReactElement } from "react";
+import { renderToString } from "react-dom/server";
+import { beforeAll, describe, expect, it } from "vitest";
+
+beforeAll(() => {
+    if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+        Object.defineProperty(window, "matchMedia", {
+            writable: true,
+            value: (query: string) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: () => {},
+                removeListener: () => {},
+                addEventListener: () => {},
+                removeEventListener: () => {},
+                dispatchEvent: () => false,
+            }),
+        });
+    }
+});
+
+function shell(node: ReactElement): string {
+    return renderToString(
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            {node}
+        </MantineProvider>,
+    );
+}
+
+describe("MarkdownViewer / code title", () => {
+    it("renders a title attribute as a caption above the code block", () => {
+        const html = shell(
+            <MarkdownViewer content={'```ts title="Example file"\nconst x = 1;\n```'} />,
+        );
+        expect(html).toContain("Example file");
+    });
+
+    it("omits the caption when no title is present", () => {
+        const html = shell(<MarkdownViewer content={"```ts\nconst x = 1;\n```"} />);
+        expect(html).not.toContain("code-block-caption");
+    });
+
+    it("passes the title through the code renderer override", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={'```ts title="From override"\nconst x = 1;\n```'}
+                renderers={{
+                    code: ({ title }) => <span data-title={title}>{title}</span>,
+                }}
+            />,
+        );
+        expect(html).toContain("From override");
+    });
+});

package/tests/unit/MarkdownViewer/features.test.tsx

@@ -0,0 +1,110 @@
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { extractHeadings, markdownSourceFromString, parseMarkdownTree } from "@src/lib/markdown";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import type { ReactElement } from "react";
+import { renderToString } from "react-dom/server";
+import { beforeAll, describe, expect, it } from "vitest";
+
+beforeAll(() => {
+    if (typeof window !== "undefined" && typeof window.matchMedia !== "function") {
+        Object.defineProperty(window, "matchMedia", {
+            writable: true,
+            value: (query: string) => ({
+                matches: false,
+                media: query,
+                onchange: null,
+                addListener: () => {},
+                removeListener: () => {},
+                addEventListener: () => {},
+                removeEventListener: () => {},
+                dispatchEvent: () => false,
+            }),
+        });
+    }
+});
+
+function shell(node: ReactElement): string {
+    return renderToString(
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            {node}
+        </MantineProvider>,
+    );
+}
+
+describe("MarkdownViewer / features", () => {
+    it("renders bare URL autolinks as links", () => {
+        const html = shell(<MarkdownViewer content="Visit https://example.com today." />);
+        expect(html).toContain('href="https://example.com"');
+        expect(html).toContain("https://example.com");
+    });
+
+    it("renders www autolinks with https href", () => {
+        const html = shell(<MarkdownViewer content="Go to www.example.com" />);
+        expect(html).toContain('href="https://www.example.com"');
+    });
+
+    it("renders inline <u> and inline <Since /> with default components", () => {
+        const html = shell(
+            <MarkdownViewer content={'Text <u>underlined</u> and <Since v="2.0.0" /> here.'} />,
+        );
+        expect(html).toContain("<u>");
+        expect(html).toContain("underlined");
+        expect(html).toContain("2.0.0");
+        expect(html).not.toContain("<Since");
+        expect(html).not.toMatch(/<p[^>]*>underlined<\/p>/);
+    });
+
+    it("uses custom heading id from {#suffix}", () => {
+        const html = shell(<MarkdownViewer content="## Visible {#my-anchor}" />);
+        expect(html).toMatch(/id="my-anchor"/);
+        expect(html).toContain('href="#my-anchor"');
+        expect(html).not.toContain("{#my-anchor}");
+    });
+
+    it("extractHeadings respects custom {#id}", () => {
+        const source = "## Title {#custom}\n";
+        const tree = parseMarkdownTree(source);
+        const headings = extractHeadings(tree, markdownSourceFromString(source));
+        expect(headings[0]?.id).toBe("custom");
+        expect(headings[0]?.text).toBe("Title");
+    });
+
+    it("preserves ordered list start attribute", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={`3. Third step
+4. Fourth step`}
+            />,
+        );
+        expect(html).toMatch(/start="3"/);
+        expect(html).toContain("3.");
+        expect(html).toContain("4.");
+    });
+
+    it("renders HTML table cells with markdown and inline HTML", () => {
+        const html = shell(
+            <MarkdownViewer
+                content={`<table>
+<thead><tr><th>Fn</th></tr></thead>
+<tbody><tr><td>**bold** and <code>x</code></td></tr></tbody>
+</table>`}
+            />,
+        );
+        expect(html).toContain("<table");
+        expect(html).toContain("bold");
+        expect(html).toContain("<code");
+    });
+
+    it("renders default Button component", () => {
+        const html = shell(
+            <MarkdownViewer content={'<Button label="Go" url="https://surrealdb.com" />'} />,
+        );
+        expect(html).toContain("Go");
+        expect(html).toContain('href="https://surrealdb.com"');
+    });
+});

package/tests/unit/MarkdownViewer/headings.test.tsx

@@ -0,0 +1,40 @@
+import { extractHeadings, markdownSourceFromString, parseMarkdownTree } from "@src/lib/markdown";
+import { describe, expect, it } from "vitest";
+
+describe("extractHeadings", () => {
+    it("finds headings nested inside blockquotes", () => {
+        const source = "> ## Inside quote\n\n## Top";
+        const tree = parseMarkdownTree(source);
+        const headings = extractHeadings(tree, markdownSourceFromString(source));
+
+        expect(headings).toHaveLength(2);
+        expect(headings.map((h) => h.text)).toEqual(["Inside quote", "Top"]);
+    });
+
+    it("finds headings between details HTML blocks", () => {
+        const source = `<details>
+<summary>Toggle</summary>
+
+### Inside details
+
+</details>`;
+        const tree = parseMarkdownTree(source);
+        const headings = extractHeadings(tree, markdownSourceFromString(source), {
+            depths: [2, 3],
+        });
+
+        expect(headings).toHaveLength(1);
+        expect(headings[0]?.text).toBe("Inside details");
+        expect(headings[0]?.depth).toBe(3);
+    });
+
+    it("strips inline emphasis marks from heading text", () => {
+        const source = "## Hello **world**";
+        const tree = parseMarkdownTree(source);
+        const headings = extractHeadings(tree, markdownSourceFromString(source));
+
+        expect(headings).toHaveLength(1);
+        expect(headings[0]?.text).toBe("Hello world");
+        expect(headings[0]?.id).toBe("hello-world");
+    });
+});