@surrealdb/ui 1.2.11 → 1.2.13

package/tests/unit/MarkdownConformance/inline-code-fuzz.test.tsx

@@ -0,0 +1,255 @@
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { markdownModeField } from "@src/lib/markdown";
+import { mergeMarkdownComponents } from "@src/lib/markdown/components/defaults";
+import { markdownDecorations } from "@src/lib/markdown/editor/decorations";
+import { setMarkdownEditorFocused } from "@src/lib/markdown/editor/decorations/editor-focus";
+import { setMarkdownMode } from "@src/lib/markdown/editor/mode";
+import { createWidgetStore } from "@src/lib/markdown/editor/widgets/store";
+import { Callout } from "@src/lib/markdown/grammar/callout";
+import { createMarkdownLanguage } from "@src/lib/markdown/grammar/language";
+import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
+import { MANTINE_THEME } from "@src/theme/mantine";
+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,
+			}),
+		});
+	}
+});
+
+/** Deterministic LCG so failures reproduce (no Math.random). */
+function makeRng(seed: number): () => number {
+	let s = seed >>> 0;
+	return () => {
+		s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+		return s / 0x100000000;
+	};
+}
+
+const COMPONENTS = mergeMarkdownComponents({});
+
+function renderViewerHtml(doc: string): string {
+	return renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<MarkdownViewer
+				content={doc}
+				components={COMPONENTS}
+			/>
+		</MantineProvider>,
+	);
+}
+
+/** Build an editor over the doc and sweep the caret so decoration paths run. */
+function buildEditor(doc: string): void {
+	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 });
+	view.dispatch({ effects: setMarkdownMode.of("preview") });
+	view.dispatch({ effects: setMarkdownEditorFocused.of(true) });
+	for (let pos = 0; pos <= doc.length; pos += Math.max(1, Math.floor(doc.length / 6))) {
+		view.dispatch({ selection: { anchor: pos } });
+	}
+	view.destroy();
+	parent.remove();
+}
+
+function decodeEntities(text: string): string {
+	return text
+		.replace(/&lt;/g, "<")
+		.replace(/&gt;/g, ">")
+		.replace(/&quot;/g, '"')
+		.replace(/&#x27;/g, "'")
+		.replace(/&#39;/g, "'")
+		.replace(/&amp;/g, "&");
+}
+
+/** Decoded text content of every inline `<code>` element in the HTML. */
+function codeContents(html: string): string[] {
+	const out: string[] = [];
+	const re = /<code\b[^>]*>([\s\S]*?)<\/code>/g;
+	let m: RegExpExecArray | null;
+	// biome-ignore lint/suspicious/noAssignInExpressions: standard regex iteration
+	while ((m = re.exec(html)) !== null) {
+		out.push(decodeEntities(m[1] ?? ""));
+	}
+	return out;
+}
+
+/** Visible text: strip styles, all tags, then decode entities. */
+function visibleText(html: string): string {
+	return decodeEntities(
+		html.replace(/<style[^>]*>[\s\S]*?<\/style>/g, "").replace(/<[^>]+>/g, ""),
+	);
+}
+
+// Inner contents for inline code spans — all rich in the characters that
+// previously derailed the paragraph scanner (`<`, `>`, `{`, `}`, `=`).
+const CODE_INNERS = [
+	"<target>",
+	"<T>",
+	"<a>",
+	"<div>",
+	"<Tabs>",
+	"</Tabs>",
+	"<Tabs><TabItem/></Tabs>",
+	".{..+collect}",
+	".{..+shortest=<target>}",
+	"a < b > c",
+	"x <= y >= z",
+	"map<string, int>",
+	"Array<Record<string, T>>",
+	"<not closed",
+	"unclosed>",
+	"<<multi>>",
+	"{...spread}",
+	'<a href="x">',
+	"<!-- comment -->",
+	"generic<Foo<Bar>>",
+	"i++ < len && j-- > 0",
+];
+
+// Plain words with no markdown-significant characters.
+const WORDS = ["returns", "the", "unique", "node", "set", "path", "and", "every", "shortest"];
+
+// Real inline HTML tags that should still pair when they sit beside code.
+const REAL_TAGS = ["<strong>bold</strong>", "<em>italic</em>", "text <b>x</b> more"];
+
+const BLOCK_PREFIXES = ["", "", "", "> ", "# ", "- ", "1. "];
+
+function buildParagraph(rng: () => number): { doc: string; expectedCodes: string[] } {
+	const tokenCount = 1 + Math.floor(rng() * 6);
+	const parts: string[] = [];
+	const expectedCodes: string[] = [];
+
+	for (let i = 0; i < tokenCount; i++) {
+		const roll = rng();
+		if (roll < 0.55) {
+			const inner = CODE_INNERS[Math.floor(rng() * CODE_INNERS.length)] ?? "";
+			// Occasionally use double-backtick fencing.
+			if (rng() < 0.25) {
+				parts.push(`\`\` ${inner} \`\``);
+				expectedCodes.push(inner);
+			} else {
+				parts.push(`\`${inner}\``);
+				expectedCodes.push(inner);
+			}
+		} else if (roll < 0.85) {
+			parts.push(WORDS[Math.floor(rng() * WORDS.length)] ?? "");
+		} else {
+			parts.push(REAL_TAGS[Math.floor(rng() * REAL_TAGS.length)] ?? "");
+		}
+	}
+
+	const prefix = BLOCK_PREFIXES[Math.floor(rng() * BLOCK_PREFIXES.length)] ?? "";
+	return { doc: prefix + parts.join(" "), expectedCodes };
+}
+
+function buildDoc(rng: () => number): { doc: string; expectedCodes: string[] } {
+	// Optionally prepend a fenced code block — the reported bug appeared right
+	// after one, so keep exercising that adjacency.
+	const paras: string[] = [];
+	const expectedCodes: string[] = [];
+	if (rng() < 0.4) {
+		paras.push("```surql\nSELECT * FROM person WHERE age > 18;\n```");
+	}
+	const count = 1 + Math.floor(rng() * 2);
+	for (let i = 0; i < count; i++) {
+		const { doc, expectedCodes: codes } = buildParagraph(rng);
+		paras.push(doc);
+		expectedCodes.push(...codes);
+	}
+	return { doc: paras.join("\n\n"), expectedCodes };
+}
+
+describe("MarkdownConformance / inline-code-with-angle-brackets fuzz", () => {
+	it("never leaks backticks and preserves every inline code span", () => {
+		const rng = makeRng(0x5eed42);
+		for (let i = 0; i < 400; i++) {
+			const { doc, expectedCodes } = buildDoc(rng);
+			let html = "";
+			try {
+				html = renderViewerHtml(doc);
+				buildEditor(doc);
+			} catch (err) {
+				throw new Error(`Fuzz #${i} threw for:\n${JSON.stringify(doc)}\n\n${String(err)}`);
+			}
+
+			const visible = visibleText(html);
+			// The backtick delimiters must never survive into visible output.
+			expect(
+				visible.includes("`"),
+				`Fuzz #${i} leaked a backtick.\nDOC: ${JSON.stringify(doc)}\nVISIBLE: ${JSON.stringify(visible)}`,
+			).toBe(false);
+
+			// Every inline code's content must appear inside a <code> element.
+			const rendered = codeContents(html);
+			for (const expected of expectedCodes) {
+				const found = rendered.some((c) => c.includes(expected));
+				expect(
+					found,
+					`Fuzz #${i} lost inline code ${JSON.stringify(expected)}.\nDOC: ${JSON.stringify(doc)}\nCODES: ${JSON.stringify(rendered)}`,
+				).toBe(true);
+			}
+		}
+	}, 60_000);
+
+	it("handles hand-picked adversarial inline-code snippets", () => {
+		const cases: Array<{ md: string; code: string }> = [
+			{ md: "`<target>`", code: "<target>" },
+			{ md: "`.{..+shortest=<target>}`", code: ".{..+shortest=<target>}" },
+			{ md: "before `<div>` after", code: "<div>" },
+			{ md: "`</Tabs>` orphan close", code: "</Tabs>" },
+			{ md: "`Array<Record<string, T>>`", code: "Array<Record<string, T>>" },
+			{ md: "a `x < y` and `p > q` end", code: "x < y" },
+			{ md: "*em with `<code>` inside*", code: "<code>" },
+			{ md: "[link `<x>` text](https://s.example)", code: "<x>" },
+			{ md: "> quote `<target>` here", code: "<target>" },
+			{ md: "# heading `<T>` end", code: "<T>" },
+			{ md: "- item `<li>` text", code: "<li>" },
+			{ md: '`<a href="x">` unbalanced open', code: '<a href="x">' },
+			{ md: "`<<nested>>` chevrons", code: "<<nested>>" },
+			{ md: "| head | `<td>` |\n| - | - |\n| a | `<b>` |", code: "<td>" },
+		];
+
+		for (const { md, code } of cases) {
+			const html = renderViewerHtml(md);
+			const visible = visibleText(html);
+			expect(visible.includes("`"), `backtick leaked for ${JSON.stringify(md)}`).toBe(false);
+			const found = codeContents(html).some((c) => c.includes(code));
+			expect(found, `lost ${JSON.stringify(code)} for ${JSON.stringify(md)}`).toBe(true);
+		}
+	});
+
+	it("still renders a real inline tag adjacent to bracketed inline code", () => {
+		const html = renderViewerHtml("`<target>` then <strong>go</strong> now");
+		expect(html).toContain("<strong>go</strong>");
+		expect(codeContents(html).some((c) => c.includes("<target>"))).toBe(true);
+	});
+});

package/tests/unit/MarkdownConformance/jsx-attributes.test.tsx

@@ -1,56 +1,57 @@
 import type { MarkdownComponents } from "@src/lib/markdown";
 import { afterEach, describe, expect, it, vi } from "vitest";
+
 import { renderMarkdown, visibleText } from "./render-helpers";
 
 /** Echo component that serialises the props it receives for assertion. */
 function Echo(props: Record<string, unknown>): string {
-    const { children, ...rest } = props;
-    return `props=${JSON.stringify(rest)}`;
+	const { children: _, ...rest } = props;
+	return `props=${JSON.stringify(rest)}`;
 }
 
 const components: MarkdownComponents = { Echo };
 
 afterEach(() => {
-    vi.restoreAllMocks();
+	vi.restoreAllMocks();
 });
 
 describe("Conformance / JSX attribute JSON", () => {
-    it("parses a JSON object value", () => {
-        const html = renderMarkdown('<Echo value={{ "a": 1, "b": [2, 3] }} />', { components });
-        expect(visibleText(html)).toContain('"value":{"a":1,"b":[2,3]}');
-    });
-
-    it("parses JSON number, boolean, and array values", () => {
-        const html = renderMarkdown("<Echo n={42} flag={true} list={[1,2]} />", { components });
-        const text = visibleText(html);
-        expect(text).toContain('"n":42');
-        expect(text).toContain('"flag":true');
-        expect(text).toContain('"list":[1,2]');
-    });
-
-    it("parses a quoted string value", () => {
-        const html = renderMarkdown('<Echo label="hello" />', { components });
-        expect(visibleText(html)).toContain('"label":"hello"');
-    });
-
-    it("treats a bare attribute as a boolean flag", () => {
-        const html = renderMarkdown("<Echo disabled />", { components });
-        // Bare booleans resolve to `undefined` props (not serialised) by design.
-        expect(visibleText(html)).toContain("props=");
-    });
-
-    it("drops an invalid-JSON value and warns in development", () => {
-        const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-        const html = renderMarkdown("<Echo value={{ a: 1 }} />", { components });
-        // Single-unquoted-key object is not valid JSON → the prop is dropped.
-        expect(visibleText(html)).not.toContain('"value"');
-        expect(warn).toHaveBeenCalled();
-    });
+	it("parses a JSON object value", () => {
+		const html = renderMarkdown('<Echo value={{ "a": 1, "b": [2, 3] }} />', { components });
+		expect(visibleText(html)).toContain('"value":{"a":1,"b":[2,3]}');
+	});
+
+	it("parses JSON number, boolean, and array values", () => {
+		const html = renderMarkdown("<Echo n={42} flag={true} list={[1,2]} />", { components });
+		const text = visibleText(html);
+		expect(text).toContain('"n":42');
+		expect(text).toContain('"flag":true');
+		expect(text).toContain('"list":[1,2]');
+	});
+
+	it("parses a quoted string value", () => {
+		const html = renderMarkdown('<Echo label="hello" />', { components });
+		expect(visibleText(html)).toContain('"label":"hello"');
+	});
+
+	it("treats a bare attribute as a boolean flag", () => {
+		const html = renderMarkdown("<Echo disabled />", { components });
+		// Bare booleans resolve to `undefined` props (not serialised) by design.
+		expect(visibleText(html)).toContain("props=");
+	});
+
+	it("drops an invalid-JSON value and warns in development", () => {
+		const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+		const html = renderMarkdown("<Echo value={{ a: 1 }} />", { components });
+		// Single-unquoted-key object is not valid JSON → the prop is dropped.
+		expect(visibleText(html)).not.toContain('"value"');
+		expect(warn).toHaveBeenCalled();
+	});
 });
 
 describe("Conformance / inline expressions are literal", () => {
-    it("renders a lone brace expression as text", () => {
-        const html = renderMarkdown("Count: {count} items");
-        expect(visibleText(html)).toContain("Count: {count} items");
-    });
+	it("renders a lone brace expression as text", () => {
+		const html = renderMarkdown("Count: {count} items");
+		expect(visibleText(html)).toContain("Count: {count} items");
+	});
 });

package/tests/unit/MarkdownConformance/jsx-fuzz.test.tsx

@@ -16,150 +16,150 @@ 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,
-            }),
-        });
-    }
+	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,
+			}),
+		});
+	}
 });
 
 /** Deterministic LCG so failures reproduce (no Math.random). */
 function makeRng(seed: number): () => number {
-    let s = seed >>> 0;
-    return () => {
-        s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-        return s / 0x100000000;
-    };
+	let s = seed >>> 0;
+	return () => {
+		s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+		return s / 0x100000000;
+	};
 }
 
 // Fragments chosen to stress tag pairing, attributes, nesting, blank lines,
 // indentation, and malformed/adversarial shapes.
 const FRAGMENTS = [
-    "<Tabs>",
-    "</Tabs>",
-    '<Tabs syncKey="a b c">',
-    '<TabItem label="One">',
-    '<TabItem label="Two" icon="star">',
-    "</TabItem>",
-    "<Since />",
-    '<Since v="1.0.0" />',
-    '<Button label="Go" href="https://x.example" />',
-    "<div>",
-    "</div>",
-    "<details>",
-    "<summary>Toggle</summary>",
-    "</details>",
-    "<strong>bold</strong>",
-    "<em>em",
-    "</em>",
-    'text before <TabItem label="Inline"> and after',
-    '<Echo value={{ "k": [1, 2, {"n": 3}] }} />',
-    "<Echo value={ broken json } />",
-    '<Echo value="unterminated ',
-    '<Tabs><TabItem label="Nested">deep</TabItem></Tabs>',
-    "\tindented content",
-    "    four space indent",
-    "para line one",
-    "",
-    "",
-    "# heading",
-    "> quote",
-    "- list item",
-    "`code`",
-    "<https://autolink.example>",
-    "<not a tag",
-    "a > b < c",
-    "</Orphan>",
-    "<Weird a={{{}}} b='x' c=\"y\" />",
-    "| a | b |\n| - | - |\n| 1 | 2 |",
+	"<Tabs>",
+	"</Tabs>",
+	'<Tabs syncKey="a b c">',
+	'<TabItem label="One">',
+	'<TabItem label="Two" icon="star">',
+	"</TabItem>",
+	"<Since />",
+	'<Since v="1.0.0" />',
+	'<Button label="Go" href="https://x.example" />',
+	"<div>",
+	"</div>",
+	"<details>",
+	"<summary>Toggle</summary>",
+	"</details>",
+	"<strong>bold</strong>",
+	"<em>em",
+	"</em>",
+	'text before <TabItem label="Inline"> and after',
+	'<Echo value={{ "k": [1, 2, {"n": 3}] }} />',
+	"<Echo value={ broken json } />",
+	'<Echo value="unterminated ',
+	'<Tabs><TabItem label="Nested">deep</TabItem></Tabs>',
+	"\tindented content",
+	"    four space indent",
+	"para line one",
+	"",
+	"",
+	"# heading",
+	"> quote",
+	"- list item",
+	"`code`",
+	"<https://autolink.example>",
+	"<not a tag",
+	"a > b < c",
+	"</Orphan>",
+	"<Weird a={{{}}} b='x' c=\"y\" />",
+	"| a | b |\n| - | - |\n| 1 | 2 |",
 ];
 
 const COMPONENTS = mergeMarkdownComponents({
-    Echo: (props: Record<string, unknown>) => JSON.stringify(props.value ?? null),
+	Echo: (props: Record<string, unknown>) => JSON.stringify(props.value ?? null),
 });
 
 function buildDoc(rng: () => number): string {
-    const lines = 1 + Math.floor(rng() * 12);
-    const parts: string[] = [];
-    for (let i = 0; i < lines; i++) {
-        parts.push(FRAGMENTS[Math.floor(rng() * FRAGMENTS.length)] ?? "");
-    }
-    return parts.join("\n");
+	const lines = 1 + Math.floor(rng() * 12);
+	const parts: string[] = [];
+	for (let i = 0; i < lines; i++) {
+		parts.push(FRAGMENTS[Math.floor(rng() * FRAGMENTS.length)] ?? "");
+	}
+	return parts.join("\n");
 }
 
 function renderViewer(doc: string): void {
-    renderToString(
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            <MarkdownViewer
-                content={doc}
-                components={COMPONENTS}
-            />
-        </MantineProvider>,
-    );
+	renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<MarkdownViewer
+				content={doc}
+				components={COMPONENTS}
+			/>
+		</MantineProvider>,
+	);
 }
 
 function buildEditor(doc: string): void {
-    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 });
-    view.dispatch({ effects: setMarkdownMode.of("preview") });
-    view.dispatch({ effects: setMarkdownEditorFocused.of(true) });
-    // Sweep the caret through the doc so active/reveal paths are exercised.
-    for (let pos = 0; pos <= doc.length; pos += Math.max(1, Math.floor(doc.length / 6))) {
-        view.dispatch({ selection: { anchor: pos } });
-    }
-    view.destroy();
-    parent.remove();
+	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 });
+	view.dispatch({ effects: setMarkdownMode.of("preview") });
+	view.dispatch({ effects: setMarkdownEditorFocused.of(true) });
+	// Sweep the caret through the doc so active/reveal paths are exercised.
+	for (let pos = 0; pos <= doc.length; pos += Math.max(1, Math.floor(doc.length / 6))) {
+		view.dispatch({ selection: { anchor: pos } });
+	}
+	view.destroy();
+	parent.remove();
 }
 
 describe("MarkdownConformance / JSX fuzz", () => {
-    // Each case runs a full Mantine SSR render plus an EditorView build with a
-    // caret sweep, so keep the count modest and grant a generous timeout for CI.
-    it("never throws and keeps descriptor offsets sane across random JSX/HTML docs", () => {
-        const rng = makeRng(0xc0ffee);
-        for (let i = 0; i < 200; i++) {
-            const doc = buildDoc(rng);
-            try {
-                const tree = parseMarkdownTree(doc);
-                const src = markdownSourceFromString(doc);
-                const descs = collectBlockHtmlDescriptors(tree, src, COMPONENTS);
-                for (const d of descs) {
-                    expect(d.openFrom).toBeGreaterThanOrEqual(0);
-                    expect(d.openTo).toBeGreaterThan(d.openFrom);
-                    if (d.closeTo !== null) {
-                        expect(d.closeTo).toBeGreaterThanOrEqual(d.openTo);
-                        expect(d.closeTo).toBeLessThanOrEqual(doc.length);
-                    }
-                }
-                renderViewer(doc);
-                buildEditor(doc);
-            } catch (err) {
-                throw new Error(
-                    `Fuzz case #${i} threw for input:\n${JSON.stringify(doc)}\n\n${String(err)}`,
-                );
-            }
-        }
-    }, 30_000);
+	// Each case runs a full Mantine SSR render plus an EditorView build with a
+	// caret sweep, so keep the count modest and grant a generous timeout for CI.
+	it("never throws and keeps descriptor offsets sane across random JSX/HTML docs", () => {
+		const rng = makeRng(0xc0ffee);
+		for (let i = 0; i < 200; i++) {
+			const doc = buildDoc(rng);
+			try {
+				const tree = parseMarkdownTree(doc);
+				const src = markdownSourceFromString(doc);
+				const descs = collectBlockHtmlDescriptors(tree, src, COMPONENTS);
+				for (const d of descs) {
+					expect(d.openFrom).toBeGreaterThanOrEqual(0);
+					expect(d.openTo).toBeGreaterThan(d.openFrom);
+					if (d.closeTo !== null) {
+						expect(d.closeTo).toBeGreaterThanOrEqual(d.openTo);
+						expect(d.closeTo).toBeLessThanOrEqual(doc.length);
+					}
+				}
+				renderViewer(doc);
+				buildEditor(doc);
+			} catch (err) {
+				throw new Error(
+					`Fuzz case #${i} threw for input:\n${JSON.stringify(doc)}\n\n${String(err)}`,
+				);
+			}
+		}
+	}, 30_000);
 });