@surrealdb/ui 1.2.12 → 1.2.14

package/tests/unit/MarkdownEditor/jsx-block-widget.test.ts

@@ -12,44 +12,44 @@ import { afterEach, describe, expect, it } from "vitest";
 const views: EditorView[] = [];
 
 afterEach(() => {
-    for (const v of views.splice(0)) v.destroy();
+	for (const v of views.splice(0)) v.destroy();
 });
 
 /** Build a focused, preview-mode editor with the caret at `cursor`. */
 function preview(doc: string, cursor: number): EditorView {
-    const state = EditorState.create({
-        doc,
-        extensions: [
-            createMarkdownLanguage({ extensions: [Callout] }),
-            markdownModeField,
-            markdownDecorations({ widgetStore: createWidgetStore() }),
-        ],
-    });
-    const parent = document.createElement("div");
-    document.body.appendChild(parent);
-    const view = new EditorView({ state, parent });
-    views.push(view);
-    view.dispatch({ effects: setMarkdownMode.of("preview") });
-    view.focus();
-    view.dispatch({ effects: setMarkdownEditorFocused.of(true) });
-    view.dispatch({ selection: EditorSelection.cursor(cursor) });
-    return view;
+	const state = EditorState.create({
+		doc,
+		extensions: [
+			createMarkdownLanguage({ extensions: [Callout] }),
+			markdownModeField,
+			markdownDecorations({ widgetStore: createWidgetStore() }),
+		],
+	});
+	const parent = document.createElement("div");
+	document.body.appendChild(parent);
+	const view = new EditorView({ state, parent });
+	views.push(view);
+	view.dispatch({ effects: setMarkdownMode.of("preview") });
+	view.focus();
+	view.dispatch({ effects: setMarkdownEditorFocused.of(true) });
+	view.dispatch({ selection: EditorSelection.cursor(cursor) });
+	return view;
 }
 
 function jsxBlockRanges(view: EditorView): Array<{ from: number; to: number }> {
-    const out: Array<{ from: number; to: number }> = [];
-    for (const set of (view as unknown as { docView: { decorations: DecorationSet[] } }).docView
-        .decorations) {
-        const cursor = set.iter();
-        while (cursor.value) {
-            const widget = (cursor.value.spec as { widget?: Decoration }).widget;
-            if (widget instanceof JsxBlockWidget) {
-                out.push({ from: cursor.from, to: cursor.to });
-            }
-            cursor.next();
-        }
-    }
-    return out;
+	const out: Array<{ from: number; to: number }> = [];
+	for (const set of (view as unknown as { docView: { decorations: DecorationSet[] } }).docView
+		.decorations) {
+		const cursor = set.iter();
+		while (cursor.value) {
+			const widget = (cursor.value.spec as { widget?: Decoration }).widget;
+			if (widget instanceof JsxBlockWidget) {
+				out.push({ from: cursor.from, to: cursor.to });
+			}
+			cursor.next();
+		}
+	}
+	return out;
 }
 
 const TABS = `<Tabs syncKey="demo">
@@ -67,26 +67,26 @@ Beta para one.
 const TABS_WITH_PROSE = `Intro line.\n\n${TABS}`;
 
 describe("MarkdownEditor / JSX block widget", () => {
-    it("renders a multi-paragraph Tabs block as a single widget when the caret is outside", () => {
-        const view = preview(TABS_WITH_PROSE, 0); // caret in the intro line
-        const ranges = jsxBlockRanges(view);
-        expect(ranges).toHaveLength(1);
-        // Covers the whole <Tabs>…</Tabs> span, not a fragment of it.
-        const tabsStart = TABS_WITH_PROSE.indexOf("<Tabs");
-        expect(ranges[0]?.from).toBe(tabsStart);
-        expect(ranges[0]?.to).toBe(TABS_WITH_PROSE.length);
-    });
+	it("renders a multi-paragraph Tabs block as a single widget when the caret is outside", () => {
+		const view = preview(TABS_WITH_PROSE, 0); // caret in the intro line
+		const ranges = jsxBlockRanges(view);
+		expect(ranges).toHaveLength(1);
+		// Covers the whole <Tabs>…</Tabs> span, not a fragment of it.
+		const tabsStart = TABS_WITH_PROSE.indexOf("<Tabs");
+		expect(ranges[0]?.from).toBe(tabsStart);
+		expect(ranges[0]?.to).toBe(TABS_WITH_PROSE.length);
+	});
 
-    it("reveals the entire block as source (no partial widgets) when the caret is inside", () => {
-        // Caret inside the first tab's content.
-        const inside = TABS_WITH_PROSE.indexOf("Alpha para one.") + 3;
-        const view = preview(TABS_WITH_PROSE, inside);
-        expect(jsxBlockRanges(view)).toHaveLength(0);
-    });
+	it("reveals the entire block as source (no partial widgets) when the caret is inside", () => {
+		// Caret inside the first tab's content.
+		const inside = TABS_WITH_PROSE.indexOf("Alpha para one.") + 3;
+		const view = preview(TABS_WITH_PROSE, inside);
+		expect(jsxBlockRanges(view)).toHaveLength(0);
+	});
 
-    it("keeps nested TabItem tags raw when the caret is on the closing tag line", () => {
-        const onClose = TABS_WITH_PROSE.indexOf("</Tabs>") + 1;
-        const view = preview(TABS_WITH_PROSE, onClose);
-        expect(jsxBlockRanges(view)).toHaveLength(0);
-    });
+	it("keeps nested TabItem tags raw when the caret is on the closing tag line", () => {
+		const onClose = TABS_WITH_PROSE.indexOf("</Tabs>") + 1;
+		const view = preview(TABS_WITH_PROSE, onClose);
+		expect(jsxBlockRanges(view)).toHaveLength(0);
+	});
 });

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

@@ -1,88 +1,88 @@
 import {
-    JSX_ATTR_NAME_NODE,
-    JSX_ATTR_STRING_NODE,
-    JSX_EXPRESSION_CONTENT_NODE,
-    JSX_EXPRESSION_MARK_NODE,
+	JSX_ATTR_NAME_NODE,
+	JSX_ATTR_STRING_NODE,
+	JSX_EXPRESSION_CONTENT_NODE,
+	JSX_EXPRESSION_MARK_NODE,
 } from "@src/lib/markdown/grammar/jsx-tag";
 import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
 import { describe, expect, it } from "vitest";
 
 function parse(text: string) {
-    const support = createMarkdownLanguage({ addKeymap: false, pasteURLAsLink: false });
-    return support.language.parser.parse(text);
+	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;
+	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;
+	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("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("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("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("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 });
+	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);
+		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"']);
-    });
+		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;
+	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

@@ -8,88 +8,88 @@ import { afterEach, describe, expect, it } from "vitest";
 let view: EditorView;
 
 afterEach(() => {
-    view?.destroy();
+	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;
+	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;
+	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("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("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("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("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("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 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("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);
-    });
+	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);
+	});
 });