@surrealdb/ui 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@surrealdb/ui",
-    "version": "1.2.2",
+    "version": "1.2.4",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/tests/e2e/MarkdownEditor/image-on-image.test.tsx

@@ -0,0 +1,72 @@
+import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
+import type { MediaDescriptor } from "@src/lib/markdown";
+import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import { describe, expect, it } from "vitest";
+import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
+
+function toCdn(node: MediaDescriptor): MediaDescriptor {
+    return { ...node, src: `https://cdn.surrealdb.com/${node.src}.auto` };
+}
+
+function toCdnVideo(node: MediaDescriptor): MediaDescriptor {
+    return { ...node, src: `https://cdn.surrealdb.com/${node.src}.mp4` };
+}
+
+function mount(doc: string, onResolveMedia: (node: MediaDescriptor) => MediaDescriptor): void {
+    mountStory(
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            <Paper
+                p="md"
+                withBorder
+            >
+                <MarkdownEditor
+                    mode="preview"
+                    document={doc}
+                    onResolveMedia={onResolveMedia}
+                    autoFocus={false}
+                    mih={200}
+                />
+            </Paper>
+        </MantineProvider>,
+    );
+}
+
+describe("MarkdownEditor / onImage resolution", () => {
+    it("resolves image widget sources through onResolveMedia (CDN code → URL)", async () => {
+        // Leading paragraph keeps the caret off the image so the widget renders.
+        mount("Intro\n\n![Example](cdn-code-123)", toCdn);
+        await getEditorView();
+        await nextFrame();
+        await nextFrame();
+
+        let img: HTMLImageElement | null = null;
+        for (let i = 0; i < 40 && !img; i++) {
+            img = document.querySelector<HTMLImageElement>('img[src*="cdn.surrealdb.com"]');
+            if (!img) await nextFrame();
+        }
+
+        expect(img).not.toBeNull();
+        expect(img?.getAttribute("src")).toBe("https://cdn.surrealdb.com/cdn-code-123.auto");
+    });
+
+    it("renders a video widget when onResolveMedia resolves the source to a video", async () => {
+        mount("Intro\n\n![clip](cdn-video-123)", toCdnVideo);
+        await getEditorView();
+        await nextFrame();
+        await nextFrame();
+
+        let video: HTMLVideoElement | null = null;
+        for (let i = 0; i < 40 && !video; i++) {
+            video = document.querySelector<HTMLVideoElement>("video");
+            if (!video) await nextFrame();
+        }
+
+        expect(video).not.toBeNull();
+        expect(document.body.innerHTML).toContain("cdn.surrealdb.com/cdn-video-123.mp4");
+    });
+});

package/tests/e2e/MarkdownEditor/jsx-inline-click.test.tsx

@@ -0,0 +1,53 @@
+import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
+import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import { page } from "@vitest/browser/context";
+import { describe, expect, it } from "vitest";
+import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
+
+const DOC = 'Text with <Since v="1.5.0" /> inline here.\n';
+
+describe("MarkdownEditor / inline JSX click reveal", () => {
+    it("reveals the raw source when an inline component badge is clicked", async () => {
+        mountStory(
+            <MantineProvider
+                theme={MANTINE_THEME}
+                cssVariablesResolver={v8CssVariablesResolver}
+                forceColorScheme="dark"
+            >
+                <Paper
+                    p="md"
+                    withBorder
+                >
+                    <MarkdownEditor
+                        mode="preview"
+                        document={DOC}
+                        autoFocus={false}
+                        jsxMode="render"
+                    />
+                </Paper>
+            </MantineProvider>,
+        );
+
+        const view = await getEditorView();
+        await nextFrame();
+
+        // Inactive: the badge renders and the raw tag is hidden.
+        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
+
+        // Click the rendered inline badge.
+        await page.getByText("1.5.0").click();
+        await nextFrame();
+        await nextFrame();
+
+        // The click selects the component's entire source range (not just a caret),
+        // revealing the raw markup for editing.
+        const sel = view.state.selection.main;
+        const from = DOC.indexOf("<Since");
+        const to = DOC.indexOf("/>") + 2;
+        expect(sel.from).toBe(from);
+        expect(sel.to).toBe(to);
+        expect(sel.empty).toBe(false);
+        expect(document.querySelector(".cm-content")?.textContent).toContain("<Since");
+    });
+});

package/tests/e2e/MarkdownEditor/onimage-parity.test.tsx

@@ -0,0 +1,49 @@
+import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
+import { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import { mountStory, nextFrame } from "../../_setup/e2e-helpers";
+
+const Stories = composeStories(MarkdownStories);
+
+// Resolved by the story's shared onImage resolver. The optional extension on the
+// code selects the media type: no extension → `.auto` image, `.webp` → image,
+// `.mp4` → video.
+const AUTO_IMAGE_SRC = "cu72bvkattbs738rle0g.auto";
+const WEBP_IMAGE_SRC = "cu72bvkattbs738rle0g.webp";
+const VIDEO_SRC = "cu72bvkattbs738rle0g.mp4";
+
+async function waitFor<T>(get: () => T | null | undefined, tries = 60): Promise<T | null> {
+    for (let i = 0; i < tries; i++) {
+        const value = get();
+        if (value) return value;
+        await nextFrame();
+    }
+    return null;
+}
+
+describe("MarkdownEditor / onImage parity (side-by-side story)", () => {
+    it("resolves CDN codes to URLs by extension in both the editor preview and the viewer", async () => {
+        mountStory(<Stories.SideBySideOnImage />);
+
+        // A bare code resolves to a `.auto` image; a `.webp` code resolves to a
+        // webp image. Both the editor widget and the viewer render each — the same
+        // onImage resolver feeds both surfaces. The editor widget mounts a frame
+        // after the viewer, so poll until parity.
+        const autoImages = await waitFor(() => {
+            const found = document.querySelectorAll(`img[src*="${AUTO_IMAGE_SRC}"]`);
+            return found.length >= 2 ? found : null;
+        });
+        expect(autoImages?.length ?? 0).toBeGreaterThanOrEqual(2);
+        expect(
+            document.querySelectorAll(`img[src*="${WEBP_IMAGE_SRC}"]`).length,
+        ).toBeGreaterThanOrEqual(2);
+
+        // A `.mp4` code resolves to a video container, so both surfaces render a player.
+        const videos = await waitFor(() => {
+            const found = document.querySelectorAll("video");
+            return found.length >= 2 ? found : null;
+        });
+        expect(videos?.length ?? 0).toBeGreaterThanOrEqual(2);
+        expect(document.body.innerHTML).toContain(VIDEO_SRC);
+    });
+});

package/tests/e2e/MarkdownEditor/regressions.test.tsx

@@ -47,6 +47,28 @@ function ScrollFixture(): ReactElement {
     );
 }
 
+function WrapFixture(): ReactElement {
+    const longParagraph = "Word ".repeat(120).trim();
+    const [doc, setDoc] = useState(longParagraph);
+
+    return (
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            <div style={{ width: 360, overflow: "hidden" }}>
+                <MarkdownEditor
+                    mode="preview"
+                    document={doc}
+                    onChangeDocument={setDoc}
+                    style={{ height: 240 }}
+                />
+            </div>
+        </MantineProvider>
+    );
+}
+
 describe("MarkdownEditor / regressions", () => {
     it("task checkbox toggles between checked and unchecked in the source document", async () => {
         mountStory(<Stories.Editor />);
@@ -179,4 +201,22 @@ describe("MarkdownEditor / regressions", () => {
         expect(Math.abs(scroller.scrollTop - scrollBefore)).toBeLessThan(20);
         expect(scroller.scrollTop).toBeGreaterThan(0);
     });
+
+    it("wraps long paragraph lines instead of extending the editor width", async () => {
+        mountStory(<WrapFixture />);
+        await nextFrame();
+        await nextFrame();
+
+        const scroller = document.querySelector<HTMLElement>(".cm-scroller");
+        const content = document.querySelector<HTMLElement>(".cm-content");
+
+        // `EditorView.lineWrapping` applies via contentAttributes, so the
+        // `cm-lineWrapping` class lands on `.cm-content` (not the outer editor).
+        expect(content?.classList.contains("cm-lineWrapping")).toBe(true);
+        expect(scroller).toBeTruthy();
+        expect(content).toBeTruthy();
+        if (!scroller || !content) return;
+
+        expect(content.scrollWidth).toBeLessThanOrEqual(scroller.clientWidth + 2);
+    });
 });

package/tests/unit/MarkdownConformance/error-isolation.test.tsx

@@ -0,0 +1,43 @@
+import type { MarkdownComponents } from "@src/lib/markdown";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { renderMarkdownClient, visibleText } from "./render-helpers";
+
+function Boom(): never {
+    throw new Error("boom");
+}
+
+const components: MarkdownComponents = { Boom };
+
+afterEach(() => {
+    vi.restoreAllMocks();
+});
+
+// Error boundaries recover on the client (React does not recover them during SSR
+// `renderToString`), so these render into jsdom via `renderMarkdownClient`.
+describe("Conformance / error isolation", () => {
+    it("renders a fallback for a throwing component instead of crashing", () => {
+        vi.spyOn(console, "error").mockImplementation(() => {});
+        const html = renderMarkdownClient("<Boom />", { components });
+        expect(visibleText(html)).toContain("Failed to render component");
+    });
+
+    it("still renders the rest of the document around a throwing component", () => {
+        vi.spyOn(console, "error").mockImplementation(() => {});
+        const html = renderMarkdownClient("Before\n\n<Boom />\n\nAfter", { components });
+        const text = visibleText(html);
+        expect(text).toContain("Before");
+        expect(text).toContain("After");
+    });
+
+    it("renders a fallback for a throwing code renderer", () => {
+        vi.spyOn(console, "error").mockImplementation(() => {});
+        const html = renderMarkdownClient("```boom\ncode\n```", {
+            codeRenderers: {
+                boom: () => {
+                    throw new Error("renderer boom");
+                },
+            },
+        });
+        expect(visibleText(html)).toContain("Failed to render code block");
+    });
+});

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

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { renderMarkdown, visibleText } from "./render-helpers";
+
+// This library disables CommonMark indented code blocks (see SPEC.md): leading
+// indentation nests JSX children, never forms a code block.
+describe("Conformance / indented code blocks are disabled", () => {
+    it("does not turn a 4-space indented line into a code block", () => {
+        const html = renderMarkdown("    not code");
+        expect(html).not.toContain("<pre");
+        expect(visibleText(html)).toContain("not code");
+    });
+
+    it("does not turn a tab-indented line into a code block", () => {
+        const html = renderMarkdown("\tnot code");
+        expect(html).not.toContain("<pre");
+        expect(visibleText(html)).toContain("not code");
+    });
+
+    it("does not turn a deeply indented (8-space) line into a code block", () => {
+        const html = renderMarkdown("        still not code");
+        expect(html).not.toContain("<pre");
+        expect(visibleText(html)).toContain("still not code");
+    });
+
+    it("still renders an explicit fenced code block", () => {
+        const html = renderMarkdown("```\nreal code\n```");
+        expect(visibleText(html)).toContain("real code");
+    });
+});

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

@@ -0,0 +1,56 @@
+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 components: MarkdownComponents = { Echo };
+
+afterEach(() => {
+    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();
+    });
+});
+
+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");
+    });
+});

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

@@ -0,0 +1,165 @@
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
+import { markdownModeField, markdownSourceFromString, parseMarkdownTree } 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 { collectBlockHtmlDescriptors } from "@src/lib/markdown/tree/html";
+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;
+    };
+}
+
+// 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 |",
+];
+
+const COMPONENTS = mergeMarkdownComponents({
+    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");
+}
+
+function renderViewer(doc: string): void {
+    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();
+}
+
+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);
+});

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

@@ -0,0 +1,71 @@
+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("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("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");
+    });
+});
+
+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 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("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]");
+    });
+});