@surrealdb/ui 1.2.11 → 1.2.13

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

@@ -8,206 +8,206 @@ import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
 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 });
+	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",
-        });
-    }
+	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;
+	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, "/");
+	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: "" });
+		expect(getSlashSession(view.state)).toEqual({ from: 0, query: "" });
 
-        view.destroy();
-    });
+		view.destroy();
+	});
 
-    it("opens a session when typing / after whitespace", () => {
-        const view = createView("foo ", 4);
-        type(view, "/");
+	it("opens a session when typing / after whitespace", () => {
+		const view = createView("foo ", 4);
+		type(view, "/");
 
-        expect(getSlashSession(view.state)?.from).toBe(4);
+		expect(getSlashSession(view.state)?.from).toBe(4);
 
-        view.destroy();
-    });
+		view.destroy();
+	});
 
-    it("does not open a session mid-word", () => {
-        const view = createView("foo", 3);
-        type(view, "/");
+	it("does not open a session mid-word", () => {
+		const view = createView("foo", 3);
+		type(view, "/");
 
-        expect(getSlashSession(view.state)).toBeNull();
+		expect(getSlashSession(view.state)).toBeNull();
 
-        view.destroy();
-    });
+		view.destroy();
+	});
 
-    it("does not open a session inside a fenced code block", () => {
-        const view = createView("```\n\n```", 4);
-        type(view, "/");
+	it("does not open a session inside a fenced code block", () => {
+		const view = createView("```\n\n```", 4);
+		type(view, "/");
 
-        expect(getSlashSession(view.state)).toBeNull();
+		expect(getSlashSession(view.state)).toBeNull();
 
-        view.destroy();
-    });
+		view.destroy();
+	});
 
-    it("tracks the query as the user continues typing", () => {
-        const view = createView("", 0);
-        type(view, "/head");
+	it("tracks the query as the user continues typing", () => {
+		const view = createView("", 0);
+		type(view, "/head");
 
-        expect(getSlashSession(view.state)?.query).toBe("head");
+		expect(getSlashSession(view.state)?.query).toBe("head");
 
-        view.destroy();
-    });
+		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 ");
+	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();
+		type(view, " ");
+		expect(getSlashSession(view.state)).toBeNull();
 
-        view.destroy();
-    });
+		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;
+	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",
-        });
+		view.dispatch({
+			changes: { from: slashPos, to: slashPos + 1 },
+			userEvent: "delete",
+		});
 
-        expect(getSlashSession(view.state)).toBeNull();
+		expect(getSlashSession(view.state)).toBeNull();
 
-        view.destroy();
-    });
+		view.destroy();
+	});
 
-    it("closes the session when the caret moves before the slash", () => {
-        const view = createView("", 0);
-        type(view, "/h");
+	it("closes the session when the caret moves before the slash", () => {
+		const view = createView("", 0);
+		type(view, "/h");
 
-        view.dispatch({ selection: EditorSelection.cursor(0) });
+		view.dispatch({ selection: EditorSelection.cursor(0) });
 
-        expect(getSlashSession(view.state)).toBeNull();
+		expect(getSlashSession(view.state)).toBeNull();
 
-        view.destroy();
-    });
+		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();
-    });
+	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 };
+	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);
+	it("emits no decorations when there is no active session", () => {
+		const view = createView("hello", 5);
 
-        expect(collectDecorations(view)).toEqual({ marks: [], widgets: 0 });
+		expect(collectDecorations(view)).toEqual({ marks: [], widgets: 0 });
 
-        view.destroy();
-    });
+		view.destroy();
+	});
 
-    it("highlights the lone slash and shows the placeholder when the query is empty", () => {
-        const view = createView("", 0);
-        type(view, "/");
+	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);
+		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();
-    });
+		view.destroy();
+	});
 
-    it("extends the highlight over the query and drops the placeholder once text is typed", () => {
-        const view = createView("", 0);
-        type(view, "/head");
+	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);
+		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();
-    });
+		view.destroy();
+	});
 });

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

@@ -3,81 +3,81 @@ import { markdownTableFormatter, tableFormatSpec } from "@src/lib/markdown/edito
 import { describe, expect, it } from "vitest";
 
 function stateWith(doc: string, caret: number): EditorState {
-    return EditorState.create({
-        doc,
-        selection: EditorSelection.cursor(caret),
-        extensions: [markdownTableFormatter()],
-    });
+	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("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 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("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);
-    });
+	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("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());
-    });
+	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());
+	});
 });