@surrealdb/ui 1.2.12 → 1.2.13

package/tests/unit/MarkdownConformance/links.test.tsx

@@ -1,71 +1,95 @@
 import { describe, expect, it } from "vitest";
+
 import { renderMarkdown, visibleText } from "./render-helpers";
 
 describe("Conformance / autolinks", () => {
-    it("keeps an absolute URL href unchanged", () => {
-        const html = renderMarkdown("Go https://example.com now");
-        expect(html).toContain('href="https://example.com"');
-    });
+	it("keeps an absolute URL href unchanged", () => {
+		const html = renderMarkdown("Go https://example.com now");
+		expect(html).toContain('href="https://example.com"');
+	});
+
+	it("adds https:// to a www. autolink", () => {
+		const html = renderMarkdown("Visit www.example.com today");
+		expect(html).toContain('href="https://www.example.com"');
+	});
 
-    it("adds https:// to a www. autolink", () => {
-        const html = renderMarkdown("Visit www.example.com today");
-        expect(html).toContain('href="https://www.example.com"');
-    });
+	it("adds mailto: to a bare email autolink", () => {
+		const html = renderMarkdown("Mail me@example.com please");
+		expect(html).toContain('href="mailto:me@example.com"');
+	});
 
-    it("adds mailto: to a bare email autolink", () => {
-        const html = renderMarkdown("Mail me@example.com please");
-        expect(html).toContain('href="mailto:me@example.com"');
-    });
+	it("renders an angle-bracket URL autolink as an anchor", () => {
+		const html = renderMarkdown("See <https://example.com> here");
+		expect(html).toContain('href="https://example.com"');
+		expect(visibleText(html)).toContain("https://example.com");
+		// The angle brackets are delimiters, not visible content.
+		expect(visibleText(html)).not.toContain("<https://example.com>");
+	});
 
-    it("renders an angle-bracket URL autolink as an anchor", () => {
-        const html = renderMarkdown("See <https://example.com> here");
-        expect(html).toContain('href="https://example.com"');
-        expect(visibleText(html)).toContain("https://example.com");
-        // The angle brackets are delimiters, not visible content.
-        expect(visibleText(html)).not.toContain("<https://example.com>");
-    });
+	it("renders an angle-bracket email autolink with mailto:", () => {
+		const html = renderMarkdown("Mail <me@example.com> ok");
+		expect(html).toContain('href="mailto:me@example.com"');
+	});
+
+	it("does not linkify a URL inside inline code", () => {
+		const html = renderMarkdown("Use `https://example.com` verbatim");
+		expect(html).not.toContain('href="https://example.com"');
+		expect(html).toContain("https://example.com");
+	});
+});
 
-    it("renders an angle-bracket email autolink with mailto:", () => {
-        const html = renderMarkdown("Mail <me@example.com> ok");
-        expect(html).toContain('href="mailto:me@example.com"');
-    });
+describe("Conformance / angle brackets in inline code", () => {
+	// Regression: `<…>` inside inline code was scanned as an HTML/JSX tag,
+	// which pushed the whole paragraph down the descriptor path and rendered
+	// every backtick literally while dropping the bracketed text.
+	it("keeps inline code intact when it contains an angle-bracket placeholder", () => {
+		const html = renderMarkdown(
+			"`.{..+collect}` returns the set; and `.{..+shortest=<target>}` returns the shortest path.",
+		);
+		expect(html).toContain("<code");
+		expect(html).toContain(".{..+collect}");
+		expect(html).toContain(".{..+shortest=&lt;target&gt;}");
+		// Backticks must not leak into the visible output.
+		expect(visibleText(html)).not.toContain("`");
+		expect(visibleText(html)).toContain(".{..+shortest=<target>}");
+	});
 
-    it("does not linkify a URL inside inline code", () => {
-        const html = renderMarkdown("Use `https://example.com` verbatim");
-        expect(html).not.toContain('href="https://example.com"');
-        expect(html).toContain("https://example.com");
-    });
+	it("still pairs a real inline tag that sits beside inline code", () => {
+		const html = renderMarkdown("Press `Enter` then <strong>go</strong> now");
+		expect(html).toContain("<code");
+		expect(html).toContain("<strong>go</strong>");
+	});
 });
 
 describe("Conformance / reference-style links", () => {
-    it("resolves a full reference link [text][id]", () => {
-        const html = renderMarkdown("[click here][site] now\n\n[site]: https://example.com");
-        expect(html).toContain('href="https://example.com"');
-        expect(visibleText(html)).toContain("click here");
-    });
+	it("resolves a full reference link [text][id]", () => {
+		const html = renderMarkdown("[click here][site] now\n\n[site]: https://example.com");
+		expect(html).toContain('href="https://example.com"');
+		expect(visibleText(html)).toContain("click here");
+	});
 
-    it("resolves a collapsed reference link [id][]", () => {
-        const html = renderMarkdown("[site][] now\n\n[site]: https://example.com");
-        expect(html).toContain('href="https://example.com"');
-        expect(visibleText(html)).toContain("site");
-    });
+	it("resolves a collapsed reference link [id][]", () => {
+		const html = renderMarkdown("[site][] now\n\n[site]: https://example.com");
+		expect(html).toContain('href="https://example.com"');
+		expect(visibleText(html)).toContain("site");
+	});
 
-    it("resolves a shortcut reference link [id]", () => {
-        const html = renderMarkdown("[site] now\n\n[site]: https://example.com");
-        expect(html).toContain('href="https://example.com"');
-    });
+	it("resolves a shortcut reference link [id]", () => {
+		const html = renderMarkdown("[site] now\n\n[site]: https://example.com");
+		expect(html).toContain('href="https://example.com"');
+	});
 
-    it("matches reference labels case-insensitively", () => {
-        const html = renderMarkdown("[Click][SITE] now\n\n[site]: https://example.com");
-        expect(html).toContain('href="https://example.com"');
-    });
+	it("matches reference labels case-insensitively", () => {
+		const html = renderMarkdown("[Click][SITE] now\n\n[site]: https://example.com");
+		expect(html).toContain('href="https://example.com"');
+	});
 
-    it("emits the visible text (no anchor) when the reference is undefined", () => {
-        const html = renderMarkdown("see [missing][nope] end");
-        expect(html).not.toContain("href=");
-        const text = visibleText(html);
-        expect(text).toContain("missing");
-        // Reference brackets/label are not shown as literal text.
-        expect(text).not.toContain("[missing]");
-    });
+	it("emits the visible text (no anchor) when the reference is undefined", () => {
+		const html = renderMarkdown("see [missing][nope] end");
+		expect(html).not.toContain("href=");
+		const text = visibleText(html);
+		expect(text).toContain("missing");
+		// Reference brackets/label are not shown as literal text.
+		expect(text).not.toContain("[missing]");
+	});
 });

package/tests/unit/MarkdownConformance/render-helpers.tsx

@@ -8,35 +8,35 @@ import { renderToString } from "react-dom/server";
 
 // jsdom lacks matchMedia, which Mantine touches during render.
 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,
-        }),
-    });
+	Object.defineProperty(window, "matchMedia", {
+		writable: true,
+		value: (query: string) => ({
+			matches: false,
+			media: query,
+			onchange: null,
+			addListener: () => {},
+			removeListener: () => {},
+			addEventListener: () => {},
+			removeEventListener: () => {},
+			dispatchEvent: () => false,
+		}),
+	});
 }
 
 /** Render a `MarkdownViewer` to an HTML string inside a Mantine provider. */
 export function renderMarkdown(content: string, props?: Partial<MarkdownViewerProps>): string {
-    return renderToString(
-        <MantineProvider
-            theme={MANTINE_THEME}
-            cssVariablesResolver={v8CssVariablesResolver}
-            forceColorScheme="dark"
-        >
-            <MarkdownViewer
-                content={content}
-                {...props}
-            />
-        </MantineProvider>,
-    );
+	return renderToString(
+		<MantineProvider
+			theme={MANTINE_THEME}
+			cssVariablesResolver={v8CssVariablesResolver}
+			forceColorScheme="dark"
+		>
+			<MarkdownViewer
+				content={content}
+				{...props}
+			/>
+		</MantineProvider>,
+	);
 }
 
 /**
@@ -45,44 +45,44 @@ export function renderMarkdown(content: string, props?: Partial<MarkdownViewerPr
  * client (the environment where a throwing embedded component would blank the UI).
  */
 export function renderMarkdownClient(
-    content: string,
-    props?: Partial<MarkdownViewerProps>,
+	content: string,
+	props?: Partial<MarkdownViewerProps>,
 ): string {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    const root = createRoot(container);
-    act(() => {
-        root.render(
-            <MantineProvider
-                theme={MANTINE_THEME}
-                cssVariablesResolver={v8CssVariablesResolver}
-                forceColorScheme="dark"
-            >
-                <MarkdownViewer
-                    content={content}
-                    {...props}
-                />
-            </MantineProvider>,
-        );
-    });
-    const html = container.innerHTML;
-    act(() => {
-        root.unmount();
-    });
-    container.remove();
-    return html;
+	const container = document.createElement("div");
+	document.body.appendChild(container);
+	const root = createRoot(container);
+	act(() => {
+		root.render(
+			<MantineProvider
+				theme={MANTINE_THEME}
+				cssVariablesResolver={v8CssVariablesResolver}
+				forceColorScheme="dark"
+			>
+				<MarkdownViewer
+					content={content}
+					{...props}
+				/>
+			</MantineProvider>,
+		);
+	});
+	const html = container.innerHTML;
+	act(() => {
+		root.unmount();
+	});
+	container.remove();
+	return html;
 }
 
 /** Strip all HTML tags and decode common entities, returning the visible text. */
 export function visibleText(html: string): string {
-    return html
-        .replace(/<style[^>]*>[\s\S]*?<\/style>/g, "")
-        .replace(/<[^>]+>/g, "")
-        .replace(/&quot;/g, '"')
-        .replace(/&#39;/g, "'")
-        .replace(/&lt;/g, "<")
-        .replace(/&gt;/g, ">")
-        .replace(/&amp;/g, "&")
-        .replace(/\s+/g, " ")
-        .trim();
+	return html
+		.replace(/<style[^>]*>[\s\S]*?<\/style>/g, "")
+		.replace(/<[^>]+>/g, "")
+		.replace(/&quot;/g, '"')
+		.replace(/&#39;/g, "'")
+		.replace(/&lt;/g, "<")
+		.replace(/&gt;/g, ">")
+		.replace(/&amp;/g, "&")
+		.replace(/\s+/g, " ")
+		.trim();
 }

package/tests/unit/MarkdownEditor/code-info.test.ts

@@ -2,62 +2,62 @@ import { codeInfoString, parseCodeInfo } from "@src/lib/markdown/tree/code-info"
 import { describe, expect, it } from "vitest";
 
 describe("parseCodeInfo", () => {
-    it("returns an empty language and attributes for a blank info string", () => {
-        expect(parseCodeInfo("")).toEqual({ language: "", attributes: {} });
-        expect(parseCodeInfo("   ")).toEqual({ language: "", attributes: {} });
-    });
-
-    it("reads the language as the first token, lower-cased", () => {
-        expect(parseCodeInfo("TypeScript")).toEqual({
-            language: "typescript",
-            attributes: {},
-        });
-    });
-
-    it("resolves loose flags to true", () => {
-        const parsed = parseCodeInfo("surql runnable");
-        expect(parsed.language).toBe("surql");
-        expect(parsed.attributes.runnable).toBe(true);
-    });
-
-    it("parses double- and single-quoted values", () => {
-        const parsed = parseCodeInfo(`js title="My Example" label='other'`);
-        expect(parsed.attributes.title).toBe("My Example");
-        expect(parsed.attributes.label).toBe("other");
-    });
-
-    it("keeps an empty string value for empty quotes", () => {
-        const parsed = parseCodeInfo(`js title=""`);
-        expect(parsed.attributes.title).toBe("");
-    });
-
-    it("parses bare unquoted values", () => {
-        const parsed = parseCodeInfo("ts height=200");
-        expect(parsed.attributes.height).toBe("200");
-    });
-
-    it("parses braced expression values", () => {
-        const parsed = parseCodeInfo("surql runnable={SELECT 1}");
-        expect(parsed.attributes.runnable).toBe("{SELECT 1}");
-    });
-
-    it("mixes loose flags and key/value pairs", () => {
-        const parsed = parseCodeInfo(`surql runnable title="Demo"`);
-        expect(parsed).toEqual({
-            language: "surql",
-            attributes: { runnable: true, title: "Demo" },
-        });
-    });
-
-    it("preserves attribute value casing", () => {
-        const parsed = parseCodeInfo(`surql runnable="SELECT 1"`);
-        expect(parsed.attributes.runnable).toBe("SELECT 1");
-    });
-
-    it("codeInfoString returns string values and undefined for flags", () => {
-        const parsed = parseCodeInfo(`surql runnable title="Demo"`);
-        expect(codeInfoString(parsed, "title")).toBe("Demo");
-        expect(codeInfoString(parsed, "runnable")).toBeUndefined();
-        expect(codeInfoString(parsed, "missing")).toBeUndefined();
-    });
+	it("returns an empty language and attributes for a blank info string", () => {
+		expect(parseCodeInfo("")).toEqual({ language: "", attributes: {} });
+		expect(parseCodeInfo("   ")).toEqual({ language: "", attributes: {} });
+	});
+
+	it("reads the language as the first token, lower-cased", () => {
+		expect(parseCodeInfo("TypeScript")).toEqual({
+			language: "typescript",
+			attributes: {},
+		});
+	});
+
+	it("resolves loose flags to true", () => {
+		const parsed = parseCodeInfo("surql runnable");
+		expect(parsed.language).toBe("surql");
+		expect(parsed.attributes.runnable).toBe(true);
+	});
+
+	it("parses double- and single-quoted values", () => {
+		const parsed = parseCodeInfo(`js title="My Example" label='other'`);
+		expect(parsed.attributes.title).toBe("My Example");
+		expect(parsed.attributes.label).toBe("other");
+	});
+
+	it("keeps an empty string value for empty quotes", () => {
+		const parsed = parseCodeInfo(`js title=""`);
+		expect(parsed.attributes.title).toBe("");
+	});
+
+	it("parses bare unquoted values", () => {
+		const parsed = parseCodeInfo("ts height=200");
+		expect(parsed.attributes.height).toBe("200");
+	});
+
+	it("parses braced expression values", () => {
+		const parsed = parseCodeInfo("surql runnable={SELECT 1}");
+		expect(parsed.attributes.runnable).toBe("{SELECT 1}");
+	});
+
+	it("mixes loose flags and key/value pairs", () => {
+		const parsed = parseCodeInfo(`surql runnable title="Demo"`);
+		expect(parsed).toEqual({
+			language: "surql",
+			attributes: { runnable: true, title: "Demo" },
+		});
+	});
+
+	it("preserves attribute value casing", () => {
+		const parsed = parseCodeInfo(`surql runnable="SELECT 1"`);
+		expect(parsed.attributes.runnable).toBe("SELECT 1");
+	});
+
+	it("codeInfoString returns string values and undefined for flags", () => {
+		const parsed = parseCodeInfo(`surql runnable title="Demo"`);
+		expect(codeInfoString(parsed, "title")).toBe("Demo");
+		expect(codeInfoString(parsed, "runnable")).toBeUndefined();
+		expect(codeInfoString(parsed, "missing")).toBeUndefined();
+	});
 });