@surrealdb/ui 1.1.1 → 1.2.1

package/tests/e2e/MarkdownEditor/heading-fold.test.tsx

@@ -0,0 +1,44 @@
+import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
+import { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
+import { md } from "../../_setup/markdown-classes";
+
+const Stories = composeStories(MarkdownStories);
+
+describe("MarkdownEditor / heading folds", () => {
+    it("MarkdownViewer: heading fold control collapses the first section", async () => {
+        mountStory(<Stories.Viewer />);
+        await nextFrame();
+        await nextFrame();
+
+        const folds = document.querySelectorAll<HTMLButtonElement>(
+            `.${md.headingFold}[data-level="1"]`,
+        );
+        expect(folds.length).toBeGreaterThan(0);
+
+        const h1Fold = folds[0];
+        if (!h1Fold) throw new Error("expected an H1 fold control");
+
+        expect(h1Fold.getAttribute("data-folded")).toBe("false");
+        expect(h1Fold.getAttribute("aria-label")).toBe("Collapse section");
+
+        h1Fold.click();
+        await nextFrame();
+        await nextFrame();
+
+        const folded = document.querySelector<HTMLButtonElement>(
+            `.${md.headingFold}[data-level="1"]`,
+        );
+        expect(folded?.getAttribute("data-folded")).toBe("true");
+        expect(folded?.getAttribute("aria-label")).toBe("Expand section");
+    });
+
+    it("preview mode does not render heading fold controls in the editor", async () => {
+        mountStory(<Stories.Editor />);
+        await getEditorView();
+        await nextFrame();
+
+        expect(document.querySelectorAll(`.${md.headingFold}`).length).toBe(0);
+    });
+});

package/tests/e2e/MarkdownEditor/hybrid-widgets.test.tsx

@@ -0,0 +1,192 @@
+import { EditorSelection } from "@codemirror/state";
+import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
+import { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import {
+    mountStory,
+    nextFrame,
+    preparePreviewEditor,
+    scrollEditorTo,
+    userEvent,
+} from "../../_setup/e2e-helpers";
+import { md } from "../../_setup/markdown-classes";
+
+const Stories = composeStories(MarkdownStories);
+
+function findLineStart(doc: string, prefix: string): number {
+    const idx = doc.indexOf(prefix);
+    if (idx < 0) throw new Error(`prefix not found in doc: ${prefix}`);
+    return idx;
+}
+
+describe("MarkdownEditor / preview widgets", () => {
+    it("reveals heading marks when the caret enters the heading line and hides them when it leaves", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+
+        // Caret far away from the H1 → marks should be hidden.
+        view.dispatch({ selection: EditorSelection.cursor(view.state.doc.length) });
+        await nextFrame();
+        expect(document.querySelectorAll(`.${md.markHidden}`).length).toBeGreaterThan(0);
+
+        // Move caret onto the H1 line → marks revealed for that block.
+        const headingStart = findLineStart(view.state.doc.toString(), "# Welcome");
+        await scrollEditorTo(view, headingStart);
+        view.dispatch({ selection: EditorSelection.cursor(headingStart + 4) });
+        await nextFrame();
+        expect(document.querySelectorAll(`.${md.markShown}`).length).toBeGreaterThan(0);
+    });
+
+    it("keeps list bullets consistent after hopping the caret across items several times", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const docStr = view.state.doc.toString();
+
+        const items = ["- First item", "- Second item", "- Third item"];
+        const positions = items.map((line) => findLineStart(docStr, line) + 2);
+        const listPos = findLineStart(docStr, "- First item");
+
+        // Park the caret away from the list so all three bullets render as widgets.
+        view.dispatch({ selection: EditorSelection.cursor(0) });
+        await scrollEditorTo(view, listPos);
+        await nextFrame();
+
+        let baselineBullets = 0;
+        for (let i = 0; i < 40; i++) {
+            baselineBullets = document.querySelectorAll(`.${md.listBullet}`).length;
+            if (baselineBullets >= 3) break;
+            await nextFrame();
+        }
+        expect(baselineBullets).toBeGreaterThanOrEqual(3);
+
+        // Hop between list items several times. With prefix-scoped hybrid reveal,
+        // the bullet widgets stay visible while the caret is in the item text;
+        // the pre-fix regression was: bullets stuck behind or disappeared once you
+        // moved the caret around a few times.
+        for (let pass = 0; pass < 4; pass++) {
+            for (let i = 0; i < positions.length; i++) {
+                view.dispatch({ selection: EditorSelection.cursor(positions[i] ?? 0) });
+                await nextFrame();
+
+                const bullets = document.querySelectorAll(`.${md.listBullet}`).length;
+                expect(bullets).toBe(baselineBullets);
+            }
+        }
+
+        // Caret on the list mark (the `-`) drops that item's bullet widget only.
+        const dashPos = findLineStart(docStr, "- First item");
+        view.dispatch({ selection: EditorSelection.cursor(dashPos) });
+        await nextFrame();
+        expect(document.querySelectorAll(`.${md.listBullet}`).length).toBe(baselineBullets - 1);
+
+        // After leaving the list entirely all bullets must be back.
+        view.dispatch({ selection: EditorSelection.cursor(0) });
+        await nextFrame();
+        expect(document.querySelectorAll(`.${md.listBullet}`).length).toBe(baselineBullets);
+    });
+
+    it("shows the right callout title when moving focus between consecutive callouts", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const docStr = view.state.doc.toString();
+
+        const noteBody = findLineStart(docStr, "> Callouts use the GFM");
+        const warningBody = findLineStart(docStr, "> Legacy");
+        const tipBody = findLineStart(docStr, "> All systems go");
+        const calloutPos = findLineStart(docStr, "> [!note]");
+
+        // Park caret outside any callout first so all three headers render.
+        view.dispatch({ selection: EditorSelection.cursor(0) });
+        await scrollEditorTo(view, calloutPos);
+        await nextFrame();
+
+        const allHeaders = () =>
+            Array.from(document.querySelectorAll<HTMLElement>(`.${md.calloutHeader}`));
+        const headerForKind = (kind: string) =>
+            allHeaders().find((el) => el.getAttribute("data-callout-kind") === kind) ?? null;
+
+        let initial = allHeaders();
+        for (let i = 0; i < 40 && initial.length < 3; i++) {
+            await nextFrame();
+            initial = allHeaders();
+        }
+        expect(initial.length).toBe(3);
+        expect(headerForKind("note")?.textContent).toContain("Heads up");
+        expect(headerForKind("warning")?.textContent).toContain("Be careful");
+        expect(headerForKind("tip")?.textContent).toContain("Tip");
+
+        // `[!tip]` has no title, falls back to the visual label.
+
+        // Hop between the three callouts repeatedly. After each hop the
+        // header for the active callout disappears (caret on its block); the
+        // other two keep their correct titles. Bug regression: titles would
+        // swap or vanish.
+        const positions = [
+            { pos: noteBody + 2, hidden: "note" as const },
+            { pos: warningBody + 2, hidden: "warning" as const },
+            { pos: tipBody + 2, hidden: "tip" as const },
+        ];
+
+        for (let pass = 0; pass < 4; pass++) {
+            for (const { pos, hidden } of positions) {
+                view.dispatch({ selection: EditorSelection.cursor(pos) });
+                await nextFrame();
+
+                const visible = allHeaders();
+                expect(visible.length).toBe(2);
+                expect(headerForKind(hidden)).toBeNull();
+
+                if (hidden !== "note") {
+                    expect(headerForKind("note")?.textContent).toContain("Heads up");
+                }
+                if (hidden !== "warning") {
+                    expect(headerForKind("warning")?.textContent).toContain("Be careful");
+                }
+                if (hidden !== "tip") {
+                    expect(headerForKind("tip")?.textContent).toContain("Tip");
+                }
+            }
+        }
+    });
+
+    it("clicking a callout header focuses the editor with the caret in that callout", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const docStr = view.state.doc.toString();
+        const calloutPos = findLineStart(docStr, "> [!warning]");
+
+        // Caret far away so all callout headers render as widgets.
+        view.dispatch({ selection: EditorSelection.cursor(0) });
+        await scrollEditorTo(view, calloutPos);
+        view.contentDOM.blur();
+        await nextFrame();
+
+        let warningHeader: HTMLElement | undefined;
+        for (let i = 0; i < 40; i++) {
+            warningHeader = Array.from(
+                document.querySelectorAll<HTMLElement>(`.${md.calloutHeader}`),
+            ).find((el) => el.getAttribute("data-callout-kind") === "warning");
+            if (warningHeader) break;
+            await nextFrame();
+        }
+        expect(warningHeader).toBeDefined();
+        if (!warningHeader) throw new Error("warning callout header not rendered");
+
+        // Use a real pointer gesture so CodeMirror's input layer sees it
+        // (synthetic MouseEvent dispatch does not always reach CM6's
+        // contentDOM listeners through the widget's atomic range).
+        await userEvent.click(warningHeader);
+        await nextFrame();
+        await nextFrame();
+
+        const warningHeaderRange = {
+            from: docStr.indexOf("> [!warning]"),
+            to: docStr.indexOf("Be careful") + "Be careful".length,
+        };
+        expect(warningHeaderRange.from).toBeGreaterThan(-1);
+
+        const sel = view.state.selection.main;
+        expect(sel.from).toBeGreaterThanOrEqual(warningHeaderRange.from);
+        expect(sel.to).toBeLessThanOrEqual(warningHeaderRange.to + 1);
+    });
+});

package/tests/e2e/MarkdownEditor/jsx-block-content.test.tsx

@@ -0,0 +1,242 @@
+import { Group, MantineProvider, Paper, Text, v8CssVariablesResolver } from "@mantine/core";
+import type { MarkdownComponents } 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 Card({ label }: { label: string }) {
+    return (
+        <Paper
+            withBorder
+            p="xs"
+            radius="sm"
+            mb="xs"
+        >
+            <Group gap="xs">
+                <Text size="sm">value =</Text>
+                <Text size="sm">{label}</Text>
+            </Group>
+        </Paper>
+    );
+}
+
+const inlineComponents: MarkdownComponents = {
+    Card,
+};
+
+const blockComponents: MarkdownComponents = {
+    Card: { component: Card, block: true },
+};
+
+const ONE_PER_LINE_DOC = `# Heading
+
+<Card label="Alpha" />
+
+<Card label="Beta" />
+
+<Card label="Gamma" />
+`;
+
+const MANY_PER_LINE_DOC = `# Heading
+
+<Card label="Alpha" /><Card label="Beta" /><Card label="Gamma" />
+`;
+
+function renderEditor(doc: string, components: MarkdownComponents) {
+    return (
+        <MantineProvider
+            theme={MANTINE_THEME}
+            cssVariablesResolver={v8CssVariablesResolver}
+            forceColorScheme="dark"
+        >
+            <Paper
+                p="md"
+                withBorder
+            >
+                <MarkdownEditor
+                    mode="preview"
+                    document={doc}
+                    autoFocus={false}
+                    jsxMode="render"
+                    components={components}
+                />
+            </Paper>
+        </MantineProvider>
+    );
+}
+
+function lineHeightsForInlineWidgets(): number[] {
+    const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
+    return lines
+        .filter((line) => line.querySelector('[data-md-widget="JsxInlineWidget"]'))
+        .map((line) => line.getBoundingClientRect().height);
+}
+
+/** Block replace widgets render between `.cm-line` rows, not inside them. */
+function blockWidgetHostLine(widget: HTMLElement): HTMLElement | null {
+    let el: HTMLElement | null = widget;
+    while (el) {
+        if (el.classList.contains("cm-line")) return el;
+        el = el.parentElement;
+    }
+    return null;
+}
+
+async function mountPreviewEditor(doc: string, components: MarkdownComponents) {
+    mountStory(renderEditor(doc, components));
+    const view = await getEditorView();
+    view.contentDOM.blur();
+    await nextFrame();
+    await nextFrame();
+    return view;
+}
+
+describe("MarkdownEditor / inline JSX rendering block content", () => {
+    it("does not stack cm-widgetBuffer images above and below the widget", async () => {
+        mountStory(renderEditor(ONE_PER_LINE_DOC, inlineComponents));
+
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+        await nextFrame();
+
+        const cardWidgets = document.querySelectorAll<HTMLElement>(
+            '[data-md-widget="JsxInlineWidget"]',
+        );
+        expect(cardWidgets.length).toBe(3);
+
+        const widgetHeights = Array.from(cardWidgets).map((w) => w.getBoundingClientRect().height);
+        const lineHeights = lineHeightsForInlineWidgets();
+        expect(lineHeights.length).toBe(3);
+
+        for (let i = 0; i < lineHeights.length; i++) {
+            const lineHeight = lineHeights[i] ?? 0;
+            const widgetHeight = widgetHeights[i] ?? 0;
+            expect(widgetHeight).toBeGreaterThan(0);
+            expect(lineHeight).toBeGreaterThan(0);
+            expect(lineHeight).toBeLessThan(widgetHeight + 20);
+        }
+    });
+
+    it("keeps multiple inline JSX widgets on the same line side-by-side", async () => {
+        mountStory(renderEditor(MANY_PER_LINE_DOC, inlineComponents));
+
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+        await nextFrame();
+
+        const cardWidgets = document.querySelectorAll<HTMLElement>(
+            '[data-md-widget="JsxInlineWidget"]',
+        );
+        expect(cardWidgets.length).toBe(3);
+
+        const rects = Array.from(cardWidgets).map((w) => w.getBoundingClientRect());
+        const firstTop = rects[0]?.top ?? 0;
+        const tolerance = 4;
+        for (const r of rects) {
+            expect(Math.abs(r.top - firstTop)).toBeLessThan(tolerance);
+        }
+    });
+});
+
+describe("MarkdownEditor / block JSX components", () => {
+    it("renders block components via JsxBlockWidget with an edit-source action", async () => {
+        await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
+
+        const blockWidgets = document.querySelectorAll<HTMLElement>(
+            '[data-md-widget="JsxBlockWidget"]',
+        );
+        expect(blockWidgets.length).toBe(3);
+        expect(document.querySelectorAll('[data-md-widget="JsxInlineWidget"]').length).toBe(0);
+
+        const editButtons = document.querySelectorAll<HTMLButtonElement>(
+            '[aria-label="Edit source"]',
+        );
+        expect(editButtons.length).toBeGreaterThanOrEqual(3);
+    });
+
+    it("renders block widgets between cm-lines, not inside a cm-line", async () => {
+        await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
+
+        expect(document.querySelectorAll(".jsx-block-line-host").length).toBe(0);
+
+        for (const widget of Array.from(
+            document.querySelectorAll<HTMLElement>('[data-md-widget="JsxBlockWidget"]'),
+        )) {
+            expect(blockWidgetHostLine(widget)).toBeNull();
+            const lineSibling = widget.closest(".cm-line");
+            expect(lineSibling).toBeNull();
+        }
+    });
+
+    it("block widgets do not get cm-widgetBuffer spacer images", async () => {
+        await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
+
+        for (const widget of Array.from(
+            document.querySelectorAll<HTMLElement>('[data-md-widget="JsxBlockWidget"]'),
+        )) {
+            const parent = widget.parentElement;
+            expect(parent?.querySelector("img.cm-widgetBuffer")).toBeNull();
+        }
+    });
+
+    it("clicking the edit-source action selects the component source range", async () => {
+        const view = await mountPreviewEditor(ONE_PER_LINE_DOC, blockComponents);
+
+        const editButton = document.querySelector<HTMLButtonElement>('[aria-label="Edit source"]');
+        expect(editButton).toBeTruthy();
+        editButton?.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+        await nextFrame();
+        await nextFrame();
+
+        const selection = view.state.selection.main;
+        const selectedSource = view.state.sliceDoc(selection.from, selection.to);
+        expect(selectedSource.trim()).toBe('<Card label="Alpha" />');
+    });
+
+    it("renders block components embedded in a mixed paragraph on a dedicated row", async () => {
+        const doc = 'Intro text <Card label="Mid" /> trailing text.';
+        await mountPreviewEditor(doc, blockComponents);
+
+        const blockWidgets = document.querySelectorAll<HTMLElement>(
+            '[data-md-widget="JsxBlockWidget"]',
+        );
+        expect(blockWidgets.length).toBe(1);
+        const midWidget = blockWidgets[0];
+        expect(midWidget?.textContent).toContain("Mid");
+        expect(midWidget && blockWidgetHostLine(midWidget)).toBeNull();
+
+        const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
+        expect(lines.some((line) => line.classList.contains("jsx-block-line-host"))).toBe(false);
+
+        const introLine = lines.find((line) => line.textContent?.includes("Intro text"));
+        const trailingLine = lines.find((line) => line.textContent?.includes("trailing text"));
+        expect(introLine).toBeTruthy();
+        expect(trailingLine).toBeTruthy();
+        expect(introLine?.style.display).not.toBe("flex");
+        expect(trailingLine?.style.display).not.toBe("flex");
+    });
+
+    it("renders block HTML embedded in a mixed paragraph on a dedicated row", async () => {
+        const doc = "hello world `snippet` <div>test</div> foo bar";
+        await mountPreviewEditor(doc, blockComponents);
+
+        const blockWidgets = document.querySelectorAll<HTMLElement>(
+            '[data-md-widget="JsxBlockWidget"]',
+        );
+        expect(blockWidgets.length).toBe(1);
+        const divWidget = blockWidgets[0];
+        expect(divWidget?.textContent).toContain("test");
+        expect(divWidget && blockWidgetHostLine(divWidget)).toBeNull();
+
+        const lines = Array.from(document.querySelectorAll<HTMLElement>(".cm-line"));
+        const helloLine = lines.find((line) => line.textContent?.includes("hello world"));
+        const fooLine = lines.find((line) => line.textContent?.includes("foo bar"));
+        expect(helloLine).toBeTruthy();
+        expect(fooLine).toBeTruthy();
+        expect(helloLine?.classList.contains("jsx-block-line-host")).toBe(false);
+        expect(fooLine?.classList.contains("jsx-block-line-host")).toBe(false);
+    });
+});

package/tests/e2e/MarkdownEditor/jsx-highlight.test.tsx

@@ -0,0 +1,68 @@
+import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
+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";
+
+const TAG = '<Since v={"2.0.0"} t="true" b="false" />';
+
+/** Dark-theme string green from {@link VIVID_THEME}. */
+const STRING_COLOR = "rgb(0, 255, 110)";
+/** Dark-theme property name from {@link VIVID_THEME}. */
+const PROPERTY_COLOR = "rgb(224, 108, 117)";
+
+describe("MarkdownEditor / JSX attribute highlighting", () => {
+    it("does not let the nested HTML parser mis-highlight attributes after an expression", async () => {
+        mountStory(
+            <MantineProvider
+                theme={MANTINE_THEME}
+                cssVariablesResolver={v8CssVariablesResolver}
+                forceColorScheme="dark"
+            >
+                <Paper
+                    p="md"
+                    withBorder
+                >
+                    <MarkdownEditor
+                        mode="source"
+                        document={TAG}
+                        autoFocus={false}
+                        mih={120}
+                    />
+                </Paper>
+            </MantineProvider>,
+        );
+        await getEditorView();
+        await nextFrame();
+
+        const colors = readLineTokenColors();
+        expect(colors.v).toBe(PROPERTY_COLOR);
+        expect(colors.t).toBe(PROPERTY_COLOR);
+        expect(colors.b).toBe(PROPERTY_COLOR);
+        expect(colors.trueQuoted).toBe(STRING_COLOR);
+        expect(colors.falseQuoted).toBe(STRING_COLOR);
+        expect(colors.exprLiteral).toBe(STRING_COLOR);
+    });
+});
+
+function readLineTokenColors(): Record<string, string> {
+    const line = document.querySelector(".cm-line");
+    expect(line).not.toBeNull();
+    if (!line) return {};
+
+    const out: Record<string, string> = {};
+    for (const span of Array.from(line.querySelectorAll("span"))) {
+        const text = span.textContent ?? "";
+        if (!text) continue;
+        const color = getComputedStyle(span).color;
+
+        if (text === "v") out.v = color;
+        if (text === "t") out.t = color;
+        if (text === "b") out.b = color;
+        if (text === '"2.0.0"') out.exprLiteral = color;
+        if (text === '"true"') out.trueQuoted = color;
+        if (text === '"false"') out.falseQuoted = color;
+    }
+
+    return out;
+}

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

@@ -0,0 +1,59 @@
+import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
+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";
+
+const JSX_BADGES_DOC = `### Since
+
+<Since v="1.5.0" />
+
+<Since v="2.0.0" prefix="Available since" />
+
+### Label
+
+<Label label="Required" />
+
+<Label label="Optional" />
+
+<Label label="Deprecated" />
+
+<Label label="Required" /><Label label="Optional" />
+`;
+
+describe("MarkdownEditor / inline JSX badges", () => {
+    it("renders all Since and Label components inline like the viewer", async () => {
+        mountStory(
+            <MantineProvider
+                theme={MANTINE_THEME}
+                cssVariablesResolver={v8CssVariablesResolver}
+                forceColorScheme="dark"
+            >
+                <Paper
+                    p="md"
+                    withBorder
+                >
+                    <MarkdownEditor
+                        mode="preview"
+                        document={JSX_BADGES_DOC}
+                        autoFocus={false}
+                        jsxMode="render"
+                    />
+                </Paper>
+            </MantineProvider>,
+        );
+
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+
+        const badges = document.querySelectorAll(".mantine-Badge-label");
+        expect(badges.length).toBe(7);
+        expect(document.body.textContent).toContain("1.5.0");
+        expect(document.body.textContent).toContain("Required");
+        expect(document.body.textContent).toContain("Optional");
+        expect(document.body.textContent).toContain("Deprecated");
+        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
+        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Label");
+    });
+});

package/tests/e2e/MarkdownEditor/jsx-selection.test.tsx

@@ -0,0 +1,43 @@
+import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
+import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
+import { Since } from "@src/primitives/Since";
+import { MANTINE_THEME } from "@src/theme/mantine";
+import { describe, expect, it } from "vitest";
+import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";
+
+const JSX_DOC = `<Since v="9.9.9" />
+
+Paragraph after component.
+`;
+
+describe("MarkdownEditor / JSX selection reveal", () => {
+    it("shows JSX widget when inactive and raw source when caret is inside the tag", async () => {
+        mountStory(
+            <MantineProvider
+                theme={MANTINE_THEME}
+                cssVariablesResolver={v8CssVariablesResolver}
+                forceColorScheme="dark"
+            >
+                <Paper
+                    p="md"
+                    withBorder
+                >
+                    <MarkdownEditor
+                        mode="preview"
+                        document={JSX_DOC}
+                        autoFocus={false}
+                        jsxMode="render"
+                        components={{ Since }}
+                    />
+                </Paper>
+            </MantineProvider>,
+        );
+
+        const view = await getEditorView();
+        view.contentDOM.blur();
+        await nextFrame();
+
+        expect(document.body.textContent).toContain("9.9.9");
+        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
+    });
+});