@vertesia/rich-text 1.5.0-dev.20260725.083715Z

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@vertesia/rich-text",
+  "version": "1.5.0-dev.20260725.083715Z",
+  "description": "Markdown-first rich-text editing primitives for Vertesia",
+  "type": "module",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://docs.vertesiahq.com",
+  "keywords": [
+    "vertesia",
+    "markdown",
+    "rich-text",
+    "tiptap"
+  ],
+  "dependencies": {
+    "@tiptap/core": "^3.27.3",
+    "@tiptap/extension-code-block": "^3.27.3",
+    "@tiptap/extension-image": "^3.27.3",
+    "@tiptap/extension-link": "^3.27.3",
+    "@tiptap/extension-table": "^3.27.3",
+    "@tiptap/markdown": "^3.27.3",
+    "@tiptap/pm": "^3.27.3",
+    "@tiptap/react": "^3.27.3",
+    "@tiptap/starter-kit": "^3.27.3",
+    "marked": "^17.0.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "rolldown": "1.2.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.9",
+    "@vertesia/tsconfig": "0.1.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vertesia/composableai.git",
+    "directory": "packages/rich-text"
+  },
+  "gitHead": "57bcc2f27dd17b3387f27c18e89329c4c37f98ac",
+  "scripts": {
+    "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
+    "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",
+    "build": "pnpm run clean:lib && tsc -p tsconfig.json && pnpm exec rolldown -c rolldown.config.js",
+    "lint": "biome lint src",
+    "lint:fix": "biome lint --write src",
+    "test": "vitest run",
+    "typecheck:test": "tsc -p tsconfig.test.json --noEmit"
+  }
+}

package/src/MarkdownEditors.tsx

@@ -0,0 +1,48 @@
+import { MarkdownRichTextEditor, type MarkdownRichTextEditorProps } from './MarkdownRichTextEditor.js';
+
+interface MarkdownEditorShellProps extends Omit<MarkdownRichTextEditorProps, 'className'> {
+    className?: string;
+    contentClassName?: string;
+}
+
+export interface MarkdownComponentEditorProps extends MarkdownEditorShellProps {}
+
+export interface MarkdownDocumentEditorProps extends MarkdownEditorShellProps {}
+
+function mergeClasses(...values: Array<string | undefined>): string {
+    return values.filter(Boolean).join(' ');
+}
+
+export function MarkdownComponentEditor({
+    className,
+    contentClassName,
+    onChangeDebounceMs = 0,
+    ...props
+}: MarkdownComponentEditorProps) {
+    return (
+        <div className={mergeClasses('vertesia-markdown-component-editor', className)}>
+            <MarkdownRichTextEditor
+                {...props}
+                onChangeDebounceMs={onChangeDebounceMs}
+                className={mergeClasses('vertesia-markdown-component-editor-content', contentClassName)}
+            />
+        </div>
+    );
+}
+
+export function MarkdownDocumentEditor({
+    className,
+    contentClassName,
+    onChangeDebounceMs = 150,
+    ...props
+}: MarkdownDocumentEditorProps) {
+    return (
+        <div className={mergeClasses('vertesia-markdown-document-editor', className)}>
+            <MarkdownRichTextEditor
+                {...props}
+                onChangeDebounceMs={onChangeDebounceMs}
+                className={mergeClasses('vertesia-markdown-document-editor-content', contentClassName)}
+            />
+        </div>
+    );
+}

package/src/MarkdownRichTextEditor.tsx

@@ -0,0 +1,197 @@
+import type { Editor } from '@tiptap/core';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { type RefObject, useEffect, useMemo, useRef } from 'react';
+import { createVertesiaMarkdownExtensions, type VertesiaMarkdownKitOptions } from './markdown.js';
+import type { RichTextRenderers } from './types.js';
+
+export type ExternalValueSyncPolicy = 'always' | 'when-blurred' | 'manual';
+
+export interface MarkdownRichTextEditorProps extends VertesiaMarkdownKitOptions {
+    value: string;
+    onChange?: (markdown: string) => void;
+    onEditor?: (editor: Editor | null) => void;
+    editable?: boolean;
+    className?: string;
+    editorClassName?: string;
+    ariaLabel?: string;
+    autoFocus?: boolean;
+    onFocusChange?: (focused: boolean) => void;
+    /**
+     * Controls how a new value prop is applied after the editor mounts.
+     *
+     * - `when-blurred` avoids resetting selection and scroll while the user types.
+     * - `always` applies the external value immediately.
+     * - `manual` leaves reconciliation to the host.
+     *
+     * Transaction-level merging remains the host's responsibility for true concurrent editing.
+     */
+    externalValueSync?: ExternalValueSyncPolicy;
+    /** Delay full-document Markdown serialization after an edit. Zero emits synchronously. */
+    onChangeDebounceMs?: number;
+}
+
+function createStableRendererProxies(renderersRef: RefObject<RichTextRenderers>): RichTextRenderers {
+    return {
+        codeBlock(props) {
+            const Renderer = renderersRef.current?.codeBlock;
+            return Renderer ? <Renderer {...props} /> : null;
+        },
+        image(props) {
+            const Renderer = renderersRef.current?.image;
+            return Renderer ? <Renderer {...props} /> : null;
+        },
+        link(props) {
+            const Renderer = renderersRef.current?.link;
+            return Renderer ? <Renderer {...props} /> : props.children;
+        },
+        opaqueBlock(props) {
+            const Renderer = renderersRef.current?.opaqueBlock;
+            return Renderer ? <Renderer {...props} /> : null;
+        },
+    };
+}
+
+export function setEditorMarkdown(editor: Editor, markdown: string, emitUpdate = false): void {
+    editor.commands.setContent(markdown, { contentType: 'markdown', emitUpdate });
+}
+
+export function MarkdownRichTextEditor({
+    value,
+    onChange,
+    onEditor,
+    editable = true,
+    className,
+    editorClassName,
+    ariaLabel,
+    autoFocus = false,
+    onFocusChange,
+    externalValueSync = 'when-blurred',
+    onChangeDebounceMs = 0,
+    codeBlock,
+    image,
+    link,
+    opaqueBlock,
+    tables = true,
+    opaqueBlocks = true,
+}: MarkdownRichTextEditorProps) {
+    const renderersRef = useRef<RichTextRenderers>({ codeBlock, image, link, opaqueBlock });
+    renderersRef.current = { codeBlock, image, link, opaqueBlock };
+    const stableRenderers = useMemo(() => createStableRendererProxies(renderersRef), []);
+    const onChangeRef = useRef(onChange);
+    const onFocusChangeRef = useRef(onFocusChange);
+    const debounceRef = useRef(onChangeDebounceMs);
+    const externalValueSyncRef = useRef(externalValueSync);
+    const lastSerializedMarkdownRef = useRef(value);
+    const pendingExternalValueRef = useRef<string | undefined>(undefined);
+    const changeTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+    onChangeRef.current = onChange;
+    onFocusChangeRef.current = onFocusChange;
+    debounceRef.current = onChangeDebounceMs;
+    externalValueSyncRef.current = externalValueSync;
+
+    const extensions = useMemo(
+        () =>
+            createVertesiaMarkdownExtensions({
+                ...stableRenderers,
+                tables,
+                opaqueBlocks,
+            }),
+        [opaqueBlocks, stableRenderers, tables],
+    );
+
+    const editor = useEditor(
+        {
+            extensions,
+            content: value,
+            contentType: 'markdown',
+            editable,
+            autofocus: autoFocus,
+            immediatelyRender: false,
+            editorProps: {
+                attributes: {
+                    class: editorClassName || '',
+                    role: 'textbox',
+                    'aria-multiline': 'true',
+                    ...(ariaLabel ? { 'aria-label': ariaLabel } : {}),
+                },
+            },
+            onUpdate: ({ editor: updatedEditor }) => {
+                if (changeTimeoutRef.current !== undefined) clearTimeout(changeTimeoutRef.current);
+
+                const emitMarkdown = () => {
+                    changeTimeoutRef.current = undefined;
+                    const markdown = updatedEditor.getMarkdown();
+                    lastSerializedMarkdownRef.current = markdown;
+                    onChangeRef.current?.(markdown);
+                };
+                const delay = Math.max(0, debounceRef.current);
+                if (delay === 0) {
+                    emitMarkdown();
+                } else {
+                    changeTimeoutRef.current = setTimeout(emitMarkdown, delay);
+                }
+            },
+            onFocus: () => onFocusChangeRef.current?.(true),
+            onBlur: ({ editor: blurredEditor }) => {
+                const pendingValue = pendingExternalValueRef.current;
+                if (pendingValue !== undefined && externalValueSyncRef.current === 'when-blurred') {
+                    pendingExternalValueRef.current = undefined;
+                    if (changeTimeoutRef.current !== undefined) {
+                        clearTimeout(changeTimeoutRef.current);
+                        changeTimeoutRef.current = undefined;
+                    }
+                    setEditorMarkdown(blurredEditor, pendingValue);
+                    lastSerializedMarkdownRef.current = pendingValue;
+                }
+                onFocusChangeRef.current?.(false);
+            },
+        },
+        [extensions],
+    );
+
+    useEffect(() => {
+        editor?.setEditable(editable);
+    }, [editable, editor]);
+
+    useEffect(() => {
+        if (!editor || value === lastSerializedMarkdownRef.current) {
+            pendingExternalValueRef.current = undefined;
+            return;
+        }
+        if (externalValueSync === 'manual') return;
+        if (externalValueSync === 'when-blurred' && editor.isFocused) {
+            pendingExternalValueRef.current = value;
+            return;
+        }
+
+        pendingExternalValueRef.current = undefined;
+        if (changeTimeoutRef.current !== undefined) {
+            clearTimeout(changeTimeoutRef.current);
+            changeTimeoutRef.current = undefined;
+        }
+        setEditorMarkdown(editor, value);
+        lastSerializedMarkdownRef.current = value;
+    }, [editor, externalValueSync, value]);
+
+    useEffect(() => {
+        onEditor?.(editor);
+        return () => onEditor?.(null);
+    }, [editor, onEditor]);
+
+    useEffect(
+        () => () => {
+            if (changeTimeoutRef.current === undefined) return;
+            clearTimeout(changeTimeoutRef.current);
+            changeTimeoutRef.current = undefined;
+            if (!editor) return;
+
+            const markdown = editor.getMarkdown();
+            lastSerializedMarkdownRef.current = markdown;
+            onChangeRef.current?.(markdown);
+        },
+        [editor],
+    );
+
+    return <EditorContent editor={editor} className={className} />;
+}

package/src/index.ts

@@ -0,0 +1,35 @@
+export type { Editor } from '@tiptap/core';
+export {
+    MarkdownComponentEditor,
+    type MarkdownComponentEditorProps,
+    MarkdownDocumentEditor,
+    type MarkdownDocumentEditorProps,
+} from './MarkdownEditors.js';
+export {
+    type ExternalValueSyncPolicy,
+    MarkdownRichTextEditor,
+    type MarkdownRichTextEditorProps,
+    setEditorMarkdown,
+} from './MarkdownRichTextEditor.js';
+export {
+    type CreateMarkdownEditorOptions,
+    createMarkdownEditor,
+    createVertesiaMarkdownExtensions,
+    getMarkdownCompatibility,
+    isMarkdownSourcePreserving,
+    isVertesiaWidgetLanguage,
+    type MarkdownCompatibility,
+    parseMarkdown,
+    roundTripMarkdown,
+    serializeMarkdown,
+    VERTESIA_WIDGET_LANGUAGES,
+    type VertesiaMarkdownKitOptions,
+} from './markdown.js';
+export type {
+    OpaqueMarkdownKind,
+    RichTextCodeBlockRendererProps,
+    RichTextImageRendererProps,
+    RichTextLinkRendererProps,
+    RichTextOpaqueBlockRendererProps,
+    RichTextRenderers,
+} from './types.js';

package/src/markdown.test.ts

@@ -0,0 +1,323 @@
+import type { Editor, JSONContent } from '@tiptap/core';
+import { describe, expect, it } from 'vitest';
+import {
+    createMarkdownEditor,
+    getMarkdownCompatibility,
+    isMarkdownSourcePreserving,
+    isVertesiaWidgetLanguage,
+    parseMarkdown,
+    roundTripMarkdown,
+} from './markdown.js';
+
+const REPRESENTATIVE_DOCUMENT = `# Aurora launch brief
+
+The **Aurora** release includes [the canonical document](store:6a56458923f5c40964a069e5),
+an [artifact with spaces](<artifact:files/review copy.pdf>), and inline \`code\`.
+
+![Architecture](<artifact:files/architecture v2.png> "Aurora architecture")
+
+## Goals
+
+- Cut review time by 60%.
+- Preserve source-page provenance.
+  - Keep stable anchors for comments.
+
+| Tier | Pages | Support |
+| :--- | ---: | :---: |
+| Starter | 1,000 | Community |
+| Scale | Unlimited | Dedicated |
+
+> Review changes before publishing.
+
+\`\`\`chart
+{"$schema":"https://vega.github.io/schema/vega-lite/v6.json","mark":"bar","encoding":{}}
+\`\`\`
+
+\`\`\`mermaid
+flowchart LR
+    Draft --> Review --> Publish
+\`\`\`
+
+\`\`\`expand:table
+files/pricing.csv
+\`\`\`
+`;
+
+const OPAQUE_WIDGET_DOCUMENT = `# Layout and notation
+
+:::columns
+:::column{width=50%}
+Left **column**.
+:::
+:::column{width=50%}
+Right column.
+:::
+:::
+
+$$
+E = mc^2
+$$
+
+> [!NOTE]
+> This alert must retain its Vertesia rendering semantics.
+`;
+
+const TASK_LIST_DOCUMENT = `# Release checklist
+
+- [ ] Publish the migration guide
+- [x] Verify the conformance suite
+  - [ ] Run the browser smoke test
+`;
+
+const FRONTMATTER_DOCUMENT = `---
+title: Aurora launch brief
+tags:
+  - launch
+  - aurora
+---
+
+# Overview
+
+Keep the frontmatter exact.
+`;
+
+function collectNodes(content: JSONContent, type: string): JSONContent[] {
+    const matches: JSONContent[] = [];
+    if (content.type === type) matches.push(content);
+    for (const child of content.content || []) matches.push(...collectNodes(child, type));
+    return matches;
+}
+
+function findFirstTextPosition(editor: Editor, nodeType: string): number {
+    let textPosition: number | undefined;
+    editor.state.doc.descendants((node, position) => {
+        if (textPosition === undefined && node.type.name === nodeType) textPosition = position + 2;
+    });
+    if (textPosition === undefined) throw new Error(`Expected a ${nodeType} node`);
+    return textPosition;
+}
+
+describe('Vertesia Markdown conformance', () => {
+    it('preserves the document structure through parse and serialize', () => {
+        const parsed = parseMarkdown(REPRESENTATIVE_DOCUMENT);
+        const serialized = roundTripMarkdown(REPRESENTATIVE_DOCUMENT);
+
+        expect(parseMarkdown(serialized)).toEqual(parsed);
+        expect(roundTripMarkdown(serialized)).toBe(serialized);
+    });
+
+    it('preserves custom links, artifact images, tables, and widget code blocks', () => {
+        const parsed = parseMarkdown(REPRESENTATIVE_DOCUMENT);
+        const serialized = roundTripMarkdown(REPRESENTATIVE_DOCUMENT);
+        const codeBlocks = collectNodes(parsed, 'codeBlock');
+        const images = collectNodes(parsed, 'image');
+        const links = collectNodes(parsed, 'text').flatMap((node) => node.marks || []);
+
+        expect(codeBlocks.map((node) => node.attrs?.language)).toEqual(['chart', 'mermaid', 'expand:table']);
+        expect(images[0]?.attrs).toMatchObject({
+            src: 'artifact:files/architecture v2.png',
+            alt: 'Architecture',
+            title: 'Aurora architecture',
+        });
+        expect(links.some((mark) => mark.attrs?.href === 'store:6a56458923f5c40964a069e5')).toBe(true);
+        expect(links.some((mark) => mark.attrs?.href === 'artifact:files/review copy.pdf')).toBe(true);
+        expect(collectNodes(parsed, 'table')).toHaveLength(1);
+        expect(serialized).toContain('[artifact with spaces](<artifact:files/review copy.pdf>)');
+        expect(serialized).toContain('![Architecture](<artifact:files/architecture v2.png> "Aurora architecture")');
+    });
+
+    it('round-trips table row and column insertions without changing unrelated content', () => {
+        const source = `Before the table.
+
+| Name | Value |
+| --- | ---: |
+| Aurora | 1 |
+
+After the table.
+`;
+        const editor = createMarkdownEditor({ content: source });
+        try {
+            editor.commands.setTextSelection(findFirstTextPosition(editor, 'tableCell'));
+
+            expect(editor.commands.addRowAfter()).toBe(true);
+            expect(editor.commands.addColumnAfter()).toBe(true);
+
+            const serialized = editor.getMarkdown();
+            const parsed = parseMarkdown(serialized);
+            const table = collectNodes(parsed, 'table')[0];
+
+            expect(table?.content).toHaveLength(3);
+            expect(table?.content?.every((row) => row.content?.length === 3)).toBe(true);
+            expect(serialized).toContain('Before the table.');
+            expect(serialized).toContain('After the table.');
+            expect(roundTripMarkdown(serialized)).toBe(serialized);
+        } finally {
+            editor.destroy();
+        }
+    });
+
+    it('preserves a valid table when deleting its last row or column is not possible', () => {
+        const editor = createMarkdownEditor({
+            content: `Before.
+
+| Name | Value |
+| --- | --- |
+| Aurora | 1 |
+
+After.
+`,
+        });
+        try {
+            editor.commands.setTextSelection(findFirstTextPosition(editor, 'tableCell'));
+            expect(editor.commands.deleteColumn()).toBe(true);
+            expect(editor.commands.deleteColumn()).toBe(false);
+            expect(editor.commands.deleteRow()).toBe(true);
+            expect(editor.commands.deleteRow()).toBe(false);
+
+            const serialized = editor.getMarkdown();
+            const table = collectNodes(parseMarkdown(serialized), 'table')[0];
+            expect(table?.content).toHaveLength(1);
+            expect(table?.content?.[0]?.content).toHaveLength(1);
+            expect(serialized).toContain('Before.');
+            expect(serialized).toContain('After.');
+            expect(roundTripMarkdown(serialized)).toBe(serialized);
+        } finally {
+            editor.destroy();
+        }
+    });
+
+    it('deletes a table without disturbing an adjacent opaque block', () => {
+        const opaqueBlock = `:::columns
+:::column{width=100%}
+Keep this **opaque block** intact.
+:::
+:::`;
+        const editor = createMarkdownEditor({
+            content: `Before.
+
+| Name | Value |
+| --- | --- |
+| Aurora | 1 |
+
+${opaqueBlock}
+
+After.
+`,
+        });
+        try {
+            editor.commands.setTextSelection(findFirstTextPosition(editor, 'tableCell'));
+            expect(editor.commands.deleteTable()).toBe(true);
+
+            const serialized = editor.getMarkdown();
+            const parsed = parseMarkdown(serialized);
+            expect(collectNodes(parsed, 'table')).toHaveLength(0);
+            expect(collectNodes(parsed, 'opaqueMarkdownBlock')).toHaveLength(1);
+            expect(serialized).toContain(opaqueBlock);
+            expect(serialized).toContain('Before.');
+            expect(serialized).toContain('After.');
+            expect(roundTripMarkdown(serialized)).toBe(serialized);
+        } finally {
+            editor.destroy();
+        }
+    });
+
+    it('keeps unsupported block widgets as exact opaque Markdown nodes', () => {
+        const parsed = parseMarkdown(OPAQUE_WIDGET_DOCUMENT);
+        const opaqueNodes = collectNodes(parsed, 'opaqueMarkdownBlock');
+        const serialized = roundTripMarkdown(OPAQUE_WIDGET_DOCUMENT);
+
+        expect(opaqueNodes.map((node) => node.attrs?.kind)).toEqual(['directive', 'display-math', 'github-alert']);
+        for (const node of opaqueNodes) {
+            expect(serialized).toContain(node.attrs?.raw);
+        }
+        expect(parseMarkdown(serialized)).toEqual(parsed);
+        expect(roundTripMarkdown(serialized)).toBe(serialized);
+    });
+
+    it('preserves task lists as opaque Markdown until task editing is supported', () => {
+        const parsed = parseMarkdown(TASK_LIST_DOCUMENT);
+        const taskLists = collectNodes(parsed, 'opaqueMarkdownBlock').filter(
+            (node) => node.attrs?.kind === 'task-list',
+        );
+        const serialized = roundTripMarkdown(TASK_LIST_DOCUMENT);
+
+        expect(taskLists).toHaveLength(1);
+        expect(taskLists[0]?.attrs?.raw).toContain('- [ ] Publish the migration guide');
+        expect(serialized).toContain('- [x] Verify the conformance suite');
+        expect(parseMarkdown(serialized)).toEqual(parsed);
+    });
+
+    it('preserves YAML frontmatter as an exact opaque Markdown node', () => {
+        const parsed = parseMarkdown(FRONTMATTER_DOCUMENT);
+        const frontmatter = collectNodes(parsed, 'opaqueMarkdownBlock').find(
+            (node) => node.attrs?.kind === 'frontmatter',
+        );
+        const serialized = roundTripMarkdown(FRONTMATTER_DOCUMENT);
+
+        expect(frontmatter?.attrs?.raw).toBe(`---
+title: Aurora launch brief
+tags:
+  - launch
+  - aurora
+---`);
+        expect(serialized).toContain(frontmatter?.attrs?.raw);
+        expect(serialized).not.toContain('## title: Aurora launch brief');
+        expect(parseMarkdown(serialized)).toEqual(parsed);
+    });
+
+    it('does not mistake horizontal rules inside a document for frontmatter', () => {
+        const parsed = parseMarkdown(`# Before
+
+---
+
+Content between horizontal rules.
+
+---
+
+# After`);
+        const frontmatter = collectNodes(parsed, 'opaqueMarkdownBlock').filter(
+            (node) => node.attrs?.kind === 'frontmatter',
+        );
+
+        expect(frontmatter).toHaveLength(0);
+        expect(collectNodes(parsed, 'horizontalRule')).toHaveLength(2);
+    });
+
+    it('detects source syntax that rich-text serialization would normalize', () => {
+        expect(isMarkdownSourcePreserving('# Canonical heading')).toBe(true);
+        expect(isMarkdownSourcePreserving('Setext heading\n==============')).toBe(false);
+        expect(getMarkdownCompatibility('# Canonical heading')).toBe('exact');
+        expect(getMarkdownCompatibility('Setext heading\n==============')).toBe('normalized');
+        expect(getMarkdownCompatibility(REPRESENTATIVE_DOCUMENT)).toBe('normalized');
+    });
+
+    it('registers node and mark views for every important Vertesia widget shape', () => {
+        const editor = createMarkdownEditor({ content: REPRESENTATIVE_DOCUMENT, editable: false });
+        try {
+            const extensions = new Map(
+                editor.extensionManager.extensions.map((extension) => [extension.name, extension]),
+            );
+            const hook = (extensionName: string, hookName: string): unknown => {
+                const config = extensions.get(extensionName)?.config as Record<string, unknown> | undefined;
+                return config?.[hookName];
+            };
+
+            expect(hook('codeBlock', 'addNodeView')).toBeTypeOf('function');
+            expect(hook('image', 'addNodeView')).toBeTypeOf('function');
+            expect(hook('link', 'addMarkView')).toBeTypeOf('function');
+            expect(hook('opaqueMarkdownBlock', 'addNodeView')).toBeTypeOf('function');
+        } finally {
+            editor.destroy();
+        }
+    });
+
+    it('classifies only renderable Vertesia code fences as widgets', () => {
+        expect(isVertesiaWidgetLanguage('chart')).toBe(true);
+        expect(isVertesiaWidgetLanguage('vega-lite')).toBe(true);
+        expect(isVertesiaWidgetLanguage('mermaid')).toBe(true);
+        expect(isVertesiaWidgetLanguage('mockup')).toBe(true);
+        expect(isVertesiaWidgetLanguage('expand:fusion-fragment')).toBe(true);
+        expect(isVertesiaWidgetLanguage('typescript')).toBe(false);
+        expect(isVertesiaWidgetLanguage(undefined)).toBe(false);
+    });
+});