@surrealdb/ui 1.1.0 → 1.2.0

package/tests/unit/MarkdownEditor/jsx-attr-scan.test.ts

@@ -0,0 +1,115 @@
+import {
+    buildJsxTagHighlights,
+    findJsonAttributeClose,
+    parseAttributes,
+    parseJsonAttribute,
+    resolveAttributeValue,
+} from "@src/lib/markdown/tree/html-attrs";
+import { describe, expect, it } from "vitest";
+
+describe("findJsonAttributeClose", () => {
+    it("finds the closing brace for nested JSON objects and strings", () => {
+        const json = '{"version": "2.0.0", "items": [{"id": 1}]}';
+        const full = `{${json}}`;
+        const bounds = findJsonAttributeClose(`${full} trailing`, 0);
+        expect(bounds).toEqual({
+            contentFrom: 1,
+            contentTo: full.length - 1,
+            closeBrace: full.length - 1,
+        });
+    });
+
+    it("handles braces inside JSON strings", () => {
+        const json = '{"note": "}"}';
+        const full = `{${json}}`;
+        const bounds = findJsonAttributeClose(full, 0);
+        expect(bounds?.closeBrace).toBe(full.length - 1);
+    });
+});
+
+describe("parseJsonAttribute", () => {
+    it("parses JSON literals without evaluation", () => {
+        expect(parseJsonAttribute("42")).toBe(42);
+        expect(parseJsonAttribute('"hello"')).toBe("hello");
+        expect(parseJsonAttribute('{"enabled": true}')).toEqual({ enabled: true });
+    });
+
+    it("returns undefined for invalid JSON", () => {
+        expect(parseJsonAttribute("{ foo: 1 }")).toBeUndefined();
+        expect(parseJsonAttribute("count")).toBeUndefined();
+    });
+});
+
+describe("resolveAttributeValue", () => {
+    it("resolves JSON attribute values", () => {
+        expect(resolveAttributeValue({ type: "json", value: "100" })).toBe(100);
+        expect(resolveAttributeValue({ type: "json", value: '"2.0.0"' })).toBe("2.0.0");
+    });
+});
+
+describe("buildJsxTagHighlights", () => {
+    const tag = '<Since v={"2.0.0"} t="true" b="false" />';
+
+    it("covers the attribute section without gaps for the nested HTML parser", () => {
+        const highlights = buildJsxTagHighlights(tag);
+        const attrStart = tag.indexOf(" v=");
+        const attrEnd = tag.lastIndexOf(">");
+
+        const gaps = leftoverGaps(attrStart, attrEnd, highlights);
+        expect(gaps).toEqual([]);
+    });
+
+    it("labels attribute names and quoted literals after a JSON value", () => {
+        const highlights = buildJsxTagHighlights(tag);
+        const names = textAtKinds(tag, highlights, "name");
+        const strings = textAtKinds(tag, highlights, "string");
+
+        expect(names).toEqual(["v", "t", "b"]);
+        expect(strings).toEqual(['"true"', '"false"']);
+    });
+
+    it("matches parseAttributes JSON boundaries", () => {
+        const { endIndex } = readTagNameForTest(tag);
+        const attrString = tag.slice(endIndex, tag.lastIndexOf(">"));
+        const attrs = parseAttributes(attrString);
+        const expr = buildJsxTagHighlights(tag).find((h) => h.kind === "expression-content");
+
+        expect(attrs.v).toEqual({ type: "json", value: '"2.0.0"' });
+        expect(expr).toBeDefined();
+        if (!expr) return;
+        expect(tag.slice(expr.from, expr.to)).toBe('"2.0.0"');
+        expect(attrs.t).toBe("true");
+        expect(attrs.b).toBe("false");
+    });
+});
+
+function readTagNameForTest(text: string): { endIndex: number } {
+    let i = 1;
+    while (i < text.length && !/[\s/>]/.test(text[i] ?? "")) i++;
+    return { endIndex: i };
+}
+
+function leftoverGaps(
+    from: number,
+    to: number,
+    spans: { from: number; to: number }[],
+): { from: number; to: number }[] {
+    const gaps: { from: number; to: number }[] = [];
+    let pos = from;
+
+    for (const span of spans) {
+        if (span.from > pos) gaps.push({ from: pos, to: span.from });
+        pos = Math.max(pos, span.to);
+    }
+
+    if (pos < to) gaps.push({ from: pos, to });
+    return gaps;
+}
+
+function textAtKinds(
+    text: string,
+    highlights: ReturnType<typeof buildJsxTagHighlights>,
+    kind: "name" | "string",
+): string[] {
+    return highlights.filter((h) => h.kind === kind).map((h) => text.slice(h.from, h.to));
+}

package/tests/unit/MarkdownEditor/jsx-tag-grammar.test.ts

@@ -0,0 +1,88 @@
+import {
+    JSX_ATTR_NAME_NODE,
+    JSX_ATTR_STRING_NODE,
+    JSX_EXPRESSION_CONTENT_NODE,
+    JSX_EXPRESSION_MARK_NODE,
+} from "@src/lib/markdown/editor/jsx-tag";
+import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
+import { describe, expect, it } from "vitest";
+
+function parse(text: string) {
+    const support = createMarkdownLanguage({ addKeymap: false, pasteURLAsLink: false });
+    return support.language.parser.parse(text);
+}
+
+function nodeNames(text: string): string[] {
+    const tree = parse(text);
+    const names: string[] = [];
+    tree.iterate({
+        enter: (n) => {
+            names.push(n.name);
+        },
+    });
+    return names;
+}
+
+function htmlTagSpan(text: string): { from: number; to: number } | null {
+    const tree = parse(text);
+    let span: { from: number; to: number } | null = null;
+    tree.iterate({
+        enter: (n) => {
+            if (n.name === "HTMLTag") span = { from: n.from, to: n.to };
+        },
+    });
+    return span;
+}
+
+describe("JsxTag grammar extension", () => {
+    it("keeps plain quoted attributes on the built-in HTMLTag parser", () => {
+        expect(nodeNames('<Since v="1" />')).toEqual(["Document", "Paragraph", "HTMLTag"]);
+        expect(nodeNames('<Since v="1" />')).not.toContain(JSX_EXPRESSION_CONTENT_NODE);
+    });
+
+    it("parses a full HTMLTag when the attribute value is a JSX expression", () => {
+        const text = '<Component prop={"a"} />';
+        expect(htmlTagSpan(text)).toEqual({ from: 0, to: text.length });
+        expect(nodeNames(text)).toContain(JSX_EXPRESSION_CONTENT_NODE);
+        expect(nodeNames(text)).toContain(JSX_EXPRESSION_MARK_NODE);
+    });
+
+    it("does not truncate at > inside a JSX expression", () => {
+        const text = "<Component prop={foo > bar} />";
+        expect(htmlTagSpan(text)).toEqual({ from: 0, to: text.length });
+    });
+
+    it("parses multiple JSX tags on one line", () => {
+        const text = '<Tabs defaultValue={"a"}><TabItem label={x} /></Tabs>';
+        const tree = parse(text);
+        const tags: string[] = [];
+        tree.iterate({
+            enter: (n) => {
+                if (n.name === "HTMLTag") tags.push(text.slice(n.from, n.to));
+            },
+        });
+        expect(tags).toEqual(['<Tabs defaultValue={"a"}>', "<TabItem label={x} />", "</Tabs>"]);
+    });
+
+    it("highlights quoted attributes that follow a JSX expression", () => {
+        const text = '<Since v={"2.0.0"} t="true" b="false" />';
+        expect(htmlTagSpan(text)).toEqual({ from: 0, to: text.length });
+
+        const tree = parse(text);
+        const names = collectNodes(tree, text, JSX_ATTR_NAME_NODE);
+        const strings = collectNodes(tree, text, JSX_ATTR_STRING_NODE);
+
+        expect(names).toEqual(["v", "t", "b"]);
+        expect(strings).toEqual(['"true"', '"false"']);
+    });
+});
+
+function collectNodes(tree: ReturnType<typeof parse>, text: string, name: string): string[] {
+    const out: string[] = [];
+    tree.iterate({
+        enter: (n) => {
+            if (n.name === name) out.push(text.slice(n.from, n.to));
+        },
+    });
+    return out;
+}

package/tests/unit/MarkdownEditor/list-indent.test.ts

@@ -0,0 +1,95 @@
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { Callout } from "@src/lib/markdown/editor/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
+import { indentMarkdownList } from "@src/lib/markdown/editor/list-indent";
+import { afterEach, describe, expect, it } from "vitest";
+
+let view: EditorView;
+
+afterEach(() => {
+    view?.destroy();
+});
+
+function createView(doc: string, cursor: number): EditorView {
+    const state = EditorState.create({
+        doc,
+        selection: EditorSelection.cursor(cursor),
+        extensions: [createMarkdownLanguage({ extensions: [Callout] })],
+    });
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    view = new EditorView({ state, parent });
+    return view;
+}
+
+/** Index just after the marker + space of the line containing `needle`. */
+function cursorInItem(doc: string, needle: string): number {
+    return doc.indexOf(needle) + 1;
+}
+
+describe("indentMarkdownList", () => {
+    it("indents an item under its preceding sibling", () => {
+        const doc = "- one\n- two";
+        const v = createView(doc, cursorInItem(doc, "two"));
+        const handled = indentMarkdownList(v, false);
+        expect(handled).toBe(true);
+        expect(v.state.doc.toString()).toBe("- one\n  - two");
+    });
+
+    it("consumes Tab but does not change the first item (no preceding sibling)", () => {
+        const doc = "- one\n- two";
+        const v = createView(doc, cursorInItem(doc, "one"));
+        const handled = indentMarkdownList(v, false);
+        expect(handled).toBe(true);
+        expect(v.state.doc.toString()).toBe(doc);
+    });
+
+    it("outdents a nested item to its parent level", () => {
+        const doc = "- one\n  - two";
+        const v = createView(doc, cursorInItem(doc, "two"));
+        const handled = indentMarkdownList(v, true);
+        expect(handled).toBe(true);
+        expect(v.state.doc.toString()).toBe("- one\n- two");
+    });
+
+    it("consumes Shift-Tab but does not outdent a top-level item", () => {
+        const doc = "- one\n- two";
+        const v = createView(doc, cursorInItem(doc, "two"));
+        const handled = indentMarkdownList(v, true);
+        expect(handled).toBe(true);
+        expect(v.state.doc.toString()).toBe(doc);
+    });
+
+    it("returns false outside a list", () => {
+        const doc = "just a paragraph";
+        const v = createView(doc, 4);
+        expect(indentMarkdownList(v, false)).toBe(false);
+        expect(indentMarkdownList(v, true)).toBe(false);
+    });
+
+    it("indents ordered list items by the marker width", () => {
+        const doc = "1. one\n2. two";
+        const v = createView(doc, cursorInItem(doc, "two"));
+        const handled = indentMarkdownList(v, false);
+        expect(handled).toBe(true);
+        expect(v.state.doc.toString()).toBe("1. one\n   2. two");
+    });
+
+    it("indents an item together with its nested children", () => {
+        const doc = "- one\n- two\n  - child";
+        const v = createView(doc, cursorInItem(doc, "two"));
+        const handled = indentMarkdownList(v, false);
+        expect(handled).toBe(true);
+        expect(v.state.doc.toString()).toBe("- one\n  - two\n    - child");
+    });
+
+    it("keeps the cursor with the indented text", () => {
+        const doc = "- one\n- two";
+        const start = doc.indexOf("two");
+        const v = createView(doc, start);
+        indentMarkdownList(v, false);
+        // Two spaces inserted before the line shift the cursor right by two.
+        expect(v.state.selection.main.head).toBe(start + 2);
+    });
+});

package/tests/unit/MarkdownEditor/slash-commands.test.ts

@@ -0,0 +1,213 @@
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { Callout } from "@src/lib/markdown/editor/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/editor/language";
+import { DEFAULT_SLASH_COMMANDS } from "@src/lib/markdown/editor/slash/commands";
+import { slashDecorationsField } from "@src/lib/markdown/editor/slash/decorations";
+import { getSlashSession, slashSessionField } from "@src/lib/markdown/editor/slash/field";
+import { describe, expect, it } from "vitest";
+
+function createView(doc: string, cursor = doc.length): EditorView {
+    const state = EditorState.create({
+        doc,
+        extensions: [
+            createMarkdownLanguage({ extensions: [Callout] }),
+            slashSessionField,
+            slashDecorationsField,
+        ],
+        selection: EditorSelection.cursor(cursor),
+    });
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+
+    return new EditorView({ state, parent });
+}
+
+/** Simulate typing `text` one character at a time as `input.type` events. */
+function type(view: EditorView, text: string): void {
+    for (const char of text) {
+        const pos = view.state.selection.main.head;
+        view.dispatch({
+            changes: { from: pos, insert: char },
+            selection: EditorSelection.cursor(pos + 1),
+            userEvent: "input.type",
+        });
+    }
+}
+
+function command(id: string) {
+    const found = DEFAULT_SLASH_COMMANDS.find((c) => c.id === id);
+    if (!found) throw new Error(`unknown command ${id}`);
+    return found;
+}
+
+describe("slashSessionField", () => {
+    it("opens a session when typing / at the start of a line", () => {
+        const view = createView("", 0);
+        type(view, "/");
+
+        expect(getSlashSession(view.state)).toEqual({ from: 0, query: "" });
+
+        view.destroy();
+    });
+
+    it("opens a session when typing / after whitespace", () => {
+        const view = createView("foo ", 4);
+        type(view, "/");
+
+        expect(getSlashSession(view.state)?.from).toBe(4);
+
+        view.destroy();
+    });
+
+    it("does not open a session mid-word", () => {
+        const view = createView("foo", 3);
+        type(view, "/");
+
+        expect(getSlashSession(view.state)).toBeNull();
+
+        view.destroy();
+    });
+
+    it("does not open a session inside a fenced code block", () => {
+        const view = createView("```\n\n```", 4);
+        type(view, "/");
+
+        expect(getSlashSession(view.state)).toBeNull();
+
+        view.destroy();
+    });
+
+    it("tracks the query as the user continues typing", () => {
+        const view = createView("", 0);
+        type(view, "/head");
+
+        expect(getSlashSession(view.state)?.query).toBe("head");
+
+        view.destroy();
+    });
+
+    it("keeps the session open across a single space but closes on two", () => {
+        const view = createView("", 0);
+        type(view, "/a ");
+        expect(getSlashSession(view.state)?.query).toBe("a ");
+
+        type(view, " ");
+        expect(getSlashSession(view.state)).toBeNull();
+
+        view.destroy();
+    });
+
+    it("closes the session when the slash is deleted", () => {
+        const view = createView("", 0);
+        type(view, "/h");
+        const slashPos = getSlashSession(view.state)?.from ?? -1;
+
+        view.dispatch({
+            changes: { from: slashPos, to: slashPos + 1 },
+            userEvent: "delete",
+        });
+
+        expect(getSlashSession(view.state)).toBeNull();
+
+        view.destroy();
+    });
+
+    it("closes the session when the caret moves before the slash", () => {
+        const view = createView("", 0);
+        type(view, "/h");
+
+        view.dispatch({ selection: EditorSelection.cursor(0) });
+
+        expect(getSlashSession(view.state)).toBeNull();
+
+        view.destroy();
+    });
+});
+
+describe("DEFAULT_SLASH_COMMANDS", () => {
+    it("replaces the /query range with a heading prefix and positions the caret", () => {
+        const view = createView("", 0);
+        type(view, "/h1");
+        const session = getSlashSession(view.state);
+        expect(session).not.toBeNull();
+
+        command("heading-1").run(view, {
+            from: session?.from ?? 0,
+            to: view.state.selection.main.head,
+        });
+
+        expect(view.state.doc.toString()).toBe("# ");
+        expect(view.state.selection.main.head).toBe(2);
+        // Replacing the slash text closes the session.
+        expect(getSlashSession(view.state)).toBeNull();
+
+        view.destroy();
+    });
+
+    it("inserts a fenced code block with the caret on the empty middle line", () => {
+        const view = createView("", 0);
+        type(view, "/code");
+
+        command("code-block").run(view, {
+            from: 0,
+            to: view.state.selection.main.head,
+        });
+
+        expect(view.state.doc.toString()).toBe("```\n\n```");
+        expect(view.state.selection.main.head).toBe(4);
+
+        view.destroy();
+    });
+});
+
+function collectDecorations(view: EditorView) {
+    const set = view.state.field(slashDecorationsField);
+    const marks: Array<{ from: number; to: number }> = [];
+    let widgets = 0;
+
+    set.between(0, view.state.doc.length, (from, to, deco) => {
+        if (deco.spec.widget) {
+            widgets += 1;
+        } else {
+            marks.push({ from, to });
+        }
+    });
+
+    return { marks, widgets };
+}
+
+describe("slashDecorationsField", () => {
+    it("emits no decorations when there is no active session", () => {
+        const view = createView("hello", 5);
+
+        expect(collectDecorations(view)).toEqual({ marks: [], widgets: 0 });
+
+        view.destroy();
+    });
+
+    it("highlights the lone slash and shows the placeholder when the query is empty", () => {
+        const view = createView("", 0);
+        type(view, "/");
+
+        const { marks, widgets } = collectDecorations(view);
+        // Mark wraps the slash and the trailing placeholder widget (0..2).
+        expect(marks).toEqual([{ from: 0, to: 2 }]);
+        expect(widgets).toBe(1);
+
+        view.destroy();
+    });
+
+    it("extends the highlight over the query and drops the placeholder once text is typed", () => {
+        const view = createView("", 0);
+        type(view, "/head");
+
+        const { marks, widgets } = collectDecorations(view);
+        // Mark spans the slash + "head" (positions 0..5).
+        expect(marks).toEqual([{ from: 0, to: 5 }]);
+        expect(widgets).toBe(0);
+
+        view.destroy();
+    });
+});

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

@@ -0,0 +1,83 @@
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { markdownTableFormatter, tableFormatSpec } from "@src/lib/markdown/editor/table-format";
+import { describe, expect, it } from "vitest";
+
+function stateWith(doc: string, caret: number): EditorState {
+    return EditorState.create({
+        doc,
+        selection: EditorSelection.cursor(caret),
+        extensions: [markdownTableFormatter()],
+    });
+}
+
+describe("tableFormatSpec", () => {
+    it("aligns columns and pads cells with trailing spaces", () => {
+        const doc = "| a | b |\n| - | - |\n| longvalue | y |";
+        const state = stateWith(doc, doc.indexOf("longvalue"));
+        const spec = tableFormatSpec(state);
+        expect(spec).not.toBeNull();
+        const next = state.update(spec ?? {}).state;
+        expect(next.doc.toString()).toBe(
+            ["| a         | b   |", "| --------- | --- |", "| longvalue | y   |"].join("\n"),
+        );
+    });
+
+    it("returns null for an already-formatted table", () => {
+        const doc = ["| a         | b   |", "| --------- | --- |", "| longvalue | y   |"].join(
+            "\n",
+        );
+        const state = stateWith(doc, doc.indexOf("longvalue"));
+        expect(tableFormatSpec(state)).toBeNull();
+    });
+
+    it("returns null when the caret is not in a table", () => {
+        const doc = "just a paragraph with a | pipe";
+        const state = stateWith(doc, 3);
+        expect(tableFormatSpec(state)).toBeNull();
+    });
+
+    it("keeps the caret within the edited cell after formatting", () => {
+        const doc = "| a | b |\n| - | - |\n| longvalue | y |";
+        // Caret right after "long" inside the body cell.
+        const caret = doc.indexOf("longvalue") + 4;
+        const state = stateWith(doc, caret);
+        const spec = tableFormatSpec(state);
+        const next = state.update(spec ?? {}).state;
+        const formatted = next.doc.toString();
+        const cellStart = formatted.indexOf("longvalue");
+        expect(next.selection.main.head).toBe(cellStart + 4);
+    });
+});
+
+describe("markdownTableFormatter", () => {
+    it("reformats the table after an edit inside it", () => {
+        const doc = "| a | b |\n| - | - |\n| x | y |";
+        const state = EditorState.create({
+            doc,
+            selection: EditorSelection.cursor(doc.indexOf("x") + 1),
+            extensions: [markdownTableFormatter()],
+        });
+        // Type "tra" after "x" → "xtra", which widens column 1.
+        const tr = state.update({
+            changes: { from: doc.indexOf("x") + 1, insert: "tra" },
+            selection: EditorSelection.cursor(doc.indexOf("x") + 4),
+        });
+        const next = tr.state;
+        expect(next.doc.toString()).toContain("| xtra | y   |");
+    });
+
+    it("does not loop on its own formatting transaction", () => {
+        const doc = "| a | b |\n| - | - |\n| x | y |";
+        const state = EditorState.create({
+            doc,
+            selection: EditorSelection.cursor(doc.indexOf("x") + 1),
+            extensions: [markdownTableFormatter()],
+        });
+        const tr = state.update({
+            changes: { from: doc.indexOf("x") + 1, insert: "tra" },
+        });
+        // A single user edit produces a stable, idempotent result.
+        const again = tr.state.update({ selection: EditorSelection.cursor(0) });
+        expect(again.state.doc.toString()).toBe(tr.state.doc.toString());
+    });
+});