@surrealdb/ui 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@surrealdb/ui",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -15,8 +15,8 @@
         "./styles.css": {
             "import": "./dist/ui.css"
         },
-        "./yoopta.css": {
-            "import": "./dist/yoopta.css"
+        "./fonts.css": {
+            "import": "./dist/fonts.css"
         },
         "./mixins": {
             "import": "./res/_mixins.scss"
@@ -31,16 +31,25 @@
         "qau": "biome check . --write --unsafe",
         "qts": "tsc --noEmit",
         "qtsw": "tsc --noEmit --watch",
+        "test": "vitest run",
+        "test:unit": "vitest run --project=unit",
+        "test:e2e": "vitest run --project=e2e",
+        "test:storybook": "vitest run --project=storybook",
+        "test:watch": "vitest",
         "icons": "bun run tools/icon-parser.ts"
     },
     "dependencies": {
+        "@codemirror/lang-markdown": "^6.5.0",
         "@codemirror/legacy-modes": "^6.4.2",
+        "@fontsource-variable/geist": "^5.2.9",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@lezer/common": "^1.2.1",
         "@lezer/go": "^1.0.0",
         "@lezer/highlight": "^1.2.1",
         "@lezer/html": "^1.3.10",
         "@lezer/javascript": "^1.4.17",
         "@lezer/json": "^1.0.3",
+        "@lezer/markdown": "^1.6.3",
         "@lezer/php": "^1.0.2",
         "@lezer/python": "^1.1.14",
         "@lezer/rust": "^1.0.2",
@@ -52,7 +61,7 @@
         "vite-tsconfig-paths": "^6.0.5"
     },
     "devDependencies": {
-        "@biomejs/biome": "2.1.2",
+        "@biomejs/biome": "2.4.12",
         "@chromatic-com/storybook": "^4.1.3",
         "@laynezh/vite-plugin-lib-assets": "^2.1.3",
         "@storybook/addon-a11y": "^10.1.11",
@@ -69,16 +78,8 @@
         "@vitejs/plugin-react": "^5.0.2",
         "@vitest/browser-playwright": "^4.0.16",
         "@vitest/coverage-v8": "^4.0.16",
-        "@yoopta/blockquote": "^6.0.1",
-        "@yoopta/callout": "^6.0.1",
-        "@yoopta/divider": "^6.0.1",
-        "@yoopta/editor": "^6.0.1",
-        "@yoopta/headings": "^6.0.1",
-        "@yoopta/lists": "^6.0.1",
-        "@yoopta/marks": "^6.0.1",
-        "@yoopta/paragraph": "^6.0.1",
-        "@yoopta/ui": "^6.0.1",
         "jsdom": "^28.0.0",
+        "mermaid": "^11.14.0",
         "playwright": "^1.57.0",
         "sass-embedded": "^1.92.1",
         "slate": "^0.120.0",
@@ -100,20 +101,17 @@
         "@codemirror/search": "^6.5.6",
         "@codemirror/state": "^6.4.1",
         "@codemirror/view": "^6.24.1",
-        "@mantine/core": "^9.0.2",
-        "@mantine/hooks": "^9.0.2",
-        "@yoopta/blockquote": "^6",
-        "@yoopta/callout": "^6",
-        "@yoopta/divider": "^6",
-        "@yoopta/editor": "^6",
-        "@yoopta/headings": "^6",
-        "@yoopta/lists": "^6",
-        "@yoopta/marks": "^6",
-        "@yoopta/paragraph": "^6",
-        "@yoopta/ui": "^6",
+        "@mantine/core": "^9.2.2",
+        "@mantine/hooks": "^9.2.2",
+        "mermaid": "^11",
         "react": "^19",
         "slate": "^0.120.0",
         "slate-dom": "^0.119.0",
         "slate-react": "^0.120.0"
+    },
+    "peerDependenciesMeta": {
+        "mermaid": {
+            "optional": true
+        }
     }
 }

package/tests/_setup/e2e-helpers.tsx

@@ -0,0 +1,169 @@
+import { EditorView } from "@codemirror/view";
+import { page, userEvent } from "@vitest/browser/context";
+import { type ComponentType, createElement, type ReactElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach } from "vitest";
+
+interface MountedStory {
+    container: HTMLElement;
+    unmount: () => void;
+}
+
+const activeMounts = new Set<MountedStory>();
+
+afterEach(() => {
+    for (const mount of activeMounts) {
+        mount.unmount();
+    }
+    activeMounts.clear();
+});
+
+/**
+ * Mount a composed Storybook story (or any React component) into a fresh
+ * detached container appended to `document.body`. Cleanup happens after
+ * each test automatically; tests can still call `unmount()` early.
+ */
+export function mountStory(node: ReactElement | ComponentType): MountedStory {
+    const container = document.createElement("div");
+    container.dataset.testRoot = "true";
+    document.body.appendChild(container);
+
+    let root: Root | null = createRoot(container);
+    const element = isReactElement(node) ? node : createElement(node);
+    root.render(element);
+
+    const mount: MountedStory = {
+        container,
+        unmount: () => {
+            if (!root) return;
+            root.unmount();
+            root = null;
+            container.remove();
+            activeMounts.delete(mount);
+        },
+    };
+    activeMounts.add(mount);
+    return mount;
+}
+
+function isReactElement(node: ReactElement | ComponentType): node is ReactElement {
+    return typeof node !== "function" && typeof node === "object";
+}
+
+/**
+ * Wait for the CodeMirror editor to mount and return the underlying
+ * `EditorView`. Polls `EditorView.findFromDOM` so callers can read the
+ * authoritative state (selection, doc, mode) directly inside assertions.
+ */
+export async function getEditorView(timeoutMs = 5000): Promise<EditorView> {
+    const start = Date.now();
+    while (Date.now() - start < timeoutMs) {
+        const dom = document.querySelector<HTMLElement>(".cm-editor");
+        if (dom) {
+            const view = EditorView.findFromDOM(dom);
+            if (view) return view;
+        }
+        await sleep(20);
+    }
+    throw new Error("Timed out waiting for the markdown EditorView to mount");
+}
+
+/** Returns the `.cm-content` editable element once it's in the DOM. */
+export async function getContentElement(timeoutMs = 5000): Promise<HTMLElement> {
+    const start = Date.now();
+    while (Date.now() - start < timeoutMs) {
+        const dom = document.querySelector<HTMLElement>(".cm-content");
+        if (dom) return dom;
+        await sleep(20);
+    }
+    throw new Error("Timed out waiting for .cm-content");
+}
+
+/**
+ * Focus the underlying CodeMirror `EditorView` without moving the caret
+ * (unlike `userEvent.click`, which relocates the caret to the click
+ * target). Useful when the test has already positioned the selection via
+ * `view.dispatch({ selection: ... })`.
+ */
+export async function focusEditor(): Promise<EditorView> {
+    const view = await getEditorView();
+    view.focus();
+    await getContentElement();
+    return view;
+}
+
+/** Type at the currently focused element. Caller should call `focusEditor()` first. */
+export async function typeText(text: string): Promise<void> {
+    await userEvent.keyboard(text);
+}
+
+/** Convenience: focus the editor and type at the current caret. */
+export async function focusAndType(text: string): Promise<void> {
+    await focusEditor();
+    await userEvent.keyboard(text);
+}
+
+/**
+ * Resolve when the next animation frame fires. Useful between dispatch
+ * and DOM assertions so CodeMirror's measure cycle has time to run.
+ */
+export function nextFrame(): Promise<void> {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+/** Sleep helper for the polling loops above. */
+export function sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Read the current markdown source out of the live EditorView.
+ */
+export async function readDoc(): Promise<string> {
+    const view = await getEditorView();
+    return view.state.doc.toString();
+}
+
+/** Wait until the editor reports `data-markdown-mode="preview"`. */
+export async function ensurePreviewMode(timeoutMs = 5000): Promise<void> {
+    const start = Date.now();
+    while (Date.now() - start < timeoutMs) {
+        const mode = document.querySelector(".cm-editor")?.getAttribute("data-markdown-mode");
+        if (mode === "preview") return;
+        await nextFrame();
+    }
+
+    const preview = page.getByText("Preview", { exact: true });
+
+    if (preview.elements().length > 0) {
+        await preview.click();
+    }
+
+    const retryStart = Date.now();
+    while (Date.now() - retryStart < timeoutMs) {
+        const mode = document.querySelector(".cm-editor")?.getAttribute("data-markdown-mode");
+        if (mode === "preview") return;
+        await nextFrame();
+    }
+
+    throw new Error("Timed out waiting for preview mode");
+}
+
+/** Mount helper: editor view + preview mode + focus. */
+export async function preparePreviewEditor(): Promise<EditorView> {
+    const view = await getEditorView();
+    await ensurePreviewMode();
+    view.focus();
+    await nextFrame();
+    return view;
+}
+
+/** Scroll the editor so `pos` is centred in the viewport. */
+export async function scrollEditorTo(view: EditorView, pos: number): Promise<void> {
+    view.dispatch({
+        effects: EditorView.scrollIntoView(pos, { y: "center" }),
+    });
+    await nextFrame();
+}
+
+export { page, userEvent };

package/tests/_setup/markdown-classes.ts

@@ -0,0 +1,3 @@
+/** Shared markdown CSS module class names for unit and E2E selectors. */
+export { default as md } from "@src/lib/markdown/style/markdown.module.scss";
+export { default as mdViewer } from "@src/lib/markdown/style/viewer.module.scss";

package/tests/_setup/portable-stories.ts

@@ -0,0 +1,10 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/react-vite";
+import * as projectAnnotations from "../../.storybook/preview";
+
+// Calling `setProjectAnnotations` here ensures any `composeStories(...)` invocation
+// inside the e2e suite gets the same Mantine provider, theme, font links, and a11y
+// decorators that real Storybook stories receive in the iframe. The storybook
+// vitest plugin does this for in-story `play` tests; the e2e project does it
+// here so cross-feature browser tests can mount existing stories verbatim.
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/tests/e2e/MarkdownEditor/content-blocks.test.tsx

@@ -0,0 +1,152 @@
+import { EditorSelection } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import * as MarkdownStories from "@src/stories/playground/Markdown.stories";
+import { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import {
+    focusAndType,
+    mountStory,
+    nextFrame,
+    preparePreviewEditor,
+    scrollEditorTo,
+    sleep,
+} from "../../_setup/e2e-helpers";
+import { md } from "../../_setup/markdown-classes";
+
+const Stories = composeStories(MarkdownStories);
+
+describe("MarkdownEditor / content blocks", () => {
+    it("continues an ordered list when Enter is pressed at the end of a numbered line", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const doc = view.state.doc.toString();
+
+        const line = "4. Fourth step";
+        const idx = doc.indexOf(line);
+        expect(idx).toBeGreaterThan(-1);
+        const eol = idx + line.length;
+
+        await scrollEditorTo(view, idx);
+        view.dispatch({ selection: EditorSelection.cursor(eol) });
+        await nextFrame();
+
+        await focusAndType("{Enter}fifth step");
+        await nextFrame();
+
+        expect(view.state.doc.toString()).toMatch(/\n5\.\s*fifth step/);
+    });
+
+    it("shows blockquote text from the sample document", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const doc = view.state.doc.toString();
+        expect(doc).toContain("> A blockquote");
+
+        const quotePos = doc.indexOf("> A blockquote");
+        await scrollEditorTo(view, quotePos);
+        await nextFrame();
+
+        expect(document.querySelector(`.${md.quote}`)?.textContent ?? "").toMatch(/blockquote/i);
+    });
+
+    it("renders a horizontal rule as a separator", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const hrPos = view.state.doc.toString().indexOf("***");
+        expect(hrPos).toBeGreaterThan(-1);
+        await scrollEditorTo(view, hrPos);
+        view.dispatch({ selection: EditorSelection.cursor(0) });
+        await nextFrame();
+
+        let hrs = 0;
+        for (let i = 0; i < 40; i++) {
+            hrs = document.querySelectorAll(`hr.${md.hr}[aria-label="Horizontal rule"]`).length;
+            if (hrs > 0) break;
+            await nextFrame();
+        }
+
+        expect(hrs).toBeGreaterThan(0);
+    });
+
+    it("renders a read-only table preview when the table block is inactive", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const doc = view.state.doc.toString();
+        const tablePos = doc.indexOf("| Feature | Status");
+        const afterTable = doc.indexOf("## HTML table");
+        expect(tablePos).toBeGreaterThan(-1);
+        expect(afterTable).toBeGreaterThan(-1);
+        view.dispatch({
+            selection: EditorSelection.cursor(afterTable),
+            effects: EditorView.scrollIntoView(tablePos, { y: "center" }),
+        });
+
+        let tables = 0;
+        for (let i = 0; i < 40; i++) {
+            tables = document.querySelectorAll(
+                `.cm-editor [data-md-widget="TableWidget"] table.${md.table}`,
+            ).length;
+            if (tables > 0) break;
+            await nextFrame();
+        }
+
+        expect(tables).toBeGreaterThan(0);
+    });
+
+    it("shows GFM table source when the table block is active", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const doc = view.state.doc.toString();
+        const marker = "| Feature | Status";
+        const idx = doc.indexOf(marker);
+        expect(idx).toBeGreaterThan(-1);
+
+        await scrollEditorTo(view, idx);
+        view.dispatch({ selection: EditorSelection.cursor(idx + 2) });
+        await nextFrame();
+
+        expect(document.querySelector(`.${md.tableWidget}`)).toBeNull();
+        expect(view.state.doc.sliceString(idx, idx + marker.length)).toBe(marker);
+    });
+
+    it("shows fenced TypeScript sample code in the document", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const doc = view.state.doc.toString();
+        expect(doc).toContain("function add");
+
+        const codePos = doc.indexOf("function add");
+        await scrollEditorTo(view, codePos);
+        await nextFrame();
+
+        expect(document.querySelector(".cm-editor")?.textContent ?? "").toContain("function add");
+    });
+
+    it("exposes clickable links with an href matching the Markdown target", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const linkPos = view.state.doc.toString().indexOf("[SurrealDB website]");
+        expect(linkPos).toBeGreaterThan(-1);
+        await scrollEditorTo(view, linkPos);
+        view.dispatch({ selection: EditorSelection.cursor(0) });
+        await nextFrame();
+
+        expect(document.querySelector(`.${md.link}[data-href*='surrealdb.com']`)).not.toBeNull();
+    });
+
+    it("renders a diagram for the fenced mermaid block", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await preparePreviewEditor();
+        const mermaidPos = view.state.doc.toString().indexOf("```mermaid");
+        expect(mermaidPos).toBeGreaterThan(-1);
+        await scrollEditorTo(view, mermaidPos);
+
+        let found = false;
+        for (let i = 0; i < 60; i++) {
+            found = !!document.querySelector('.cm-editor [aria-label="Mermaid diagram"] svg');
+            if (found) break;
+            await sleep(250);
+        }
+        expect(found).toBe(true);
+    });
+});

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

@@ -0,0 +1,111 @@
+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 {
+    focusAndType,
+    getEditorView,
+    mountStory,
+    nextFrame,
+    readDoc,
+} from "../../_setup/e2e-helpers";
+
+const Stories = composeStories(MarkdownStories);
+
+describe("MarkdownEditor / edits", () => {
+    it("reflects typed characters in the underlying document", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await getEditorView();
+
+        view.dispatch({ selection: EditorSelection.cursor(view.state.doc.length) });
+        view.focus();
+
+        await focusAndType("\nfresh content");
+        await nextFrame();
+
+        const doc = await readDoc();
+        expect(doc.endsWith("\nfresh content")).toBe(true);
+    });
+
+    it("mirrors the source preview block in the story when the document changes", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await getEditorView();
+
+        view.dispatch({
+            selection: EditorSelection.cursor(view.state.doc.length),
+            changes: { from: view.state.doc.length, insert: "\n\nMirror this line." },
+        });
+        await nextFrame();
+        await nextFrame();
+
+        const previewBlock = document.querySelector<HTMLPreElement>("pre");
+        expect(previewBlock).not.toBeNull();
+        expect(previewBlock?.textContent ?? "").toContain("Mirror this line.");
+    });
+
+    it("expands triple backtick into a fenced block with caret on the empty content line", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await getEditorView();
+
+        view.focus();
+        const insertAt = view.state.doc.length;
+        view.dispatch({
+            changes: { from: insertAt, insert: "\n\n``" },
+            selection: EditorSelection.cursor(insertAt + 4),
+        });
+        await nextFrame();
+
+        await focusAndType("`");
+        await nextFrame();
+
+        const doc = await readDoc();
+        expect(doc.endsWith("\n\n```\n\n```")).toBe(true);
+
+        const main = view.state.selection.main;
+        expect(main.empty).toBe(true);
+        const contentLine = view.state.doc.lineAt(main.head);
+        expect(contentLine.text).toBe("");
+        expect(main.head).toBe(contentLine.from);
+        expect(view.state.doc.line(contentLine.number - 1).text).toBe("```");
+        expect(view.state.doc.line(contentLine.number + 1).text).toBe("```");
+    });
+
+    it("wraps a non-empty selection with backticks when ` is typed", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await getEditorView();
+
+        const target = "First item";
+        const start = view.state.doc.toString().indexOf(target);
+        expect(start).toBeGreaterThan(-1);
+
+        view.focus();
+        view.dispatch({ selection: EditorSelection.range(start, start + target.length) });
+        await nextFrame();
+
+        await focusAndType("`");
+        await nextFrame();
+
+        const doc = await readDoc();
+        expect(doc).toContain("`First item`");
+    });
+
+    it("auto-continues a bullet list when Enter is pressed at the end of a list item", async () => {
+        mountStory(<Stories.Editor />);
+        const view = await getEditorView();
+
+        const target = "- First item";
+        const start = view.state.doc.toString().indexOf(target);
+        expect(start).toBeGreaterThan(-1);
+        const eol = start + target.length;
+
+        view.focus();
+        view.dispatch({ selection: EditorSelection.cursor(eol) });
+        await nextFrame();
+
+        await focusAndType("{Enter}continued");
+        await nextFrame();
+
+        const doc = await readDoc();
+        expect(doc).toContain("- First item\n- continued\n- Second item");
+    });
+});