@echozedlabs/wysiwyg-lexical 0.1.0

package/dist/index.js

@@ -0,0 +1,1352 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { $applyNodeReplacement, $createParagraphNode, $createTextNode, $getNodeByKey, $getRoot, $getSelection, $insertNodes, $isRangeSelection, COMMAND_PRIORITY_LOW, DecoratorNode, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, createCommand, createEditor, } from 'lexical';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createCodeNode, $isCodeNode, CodeHighlightNode, CodeNode, registerCodeHighlighting, } from '@lexical/code';
+import { LinkNode, AutoLinkNode } from '@lexical/link';
+import { $isListNode, $isListItemNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListItemNode, ListNode, } from '@lexical/list';
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode, } from '@lexical/rich-text';
+import { $convertFromMarkdownString, $convertToMarkdownString, CHECK_LIST, TRANSFORMERS, } from '@lexical/markdown';
+import { $setBlocksType } from '@lexical/selection';
+import { $createTableCellNode, $createTableNode, $createTableRowNode, $getTableCellNodeFromLexicalNode, $isTableCellNode, $isTableNode, $isTableRowNode, $isTableSelection, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode, } from '@lexical/table';
+import { sanitizeDiagramHtml } from './sanitizeHtml.js';
+const INSERT_MERMAID_COMMAND = createCommand('INSERT_MERMAID_COMMAND');
+const INSERT_PLANTUML_COMMAND = createCommand('INSERT_PLANTUML_COMMAND');
+const INSERT_IMAGE_COMMAND = createCommand('INSERT_IMAGE_COMMAND');
+const INSERT_TABLE_COMMAND = createCommand('INSERT_TABLE_COMMAND');
+const APPLY_TABLE_ACTION_COMMAND = createCommand('APPLY_TABLE_ACTION_COMMAND');
+const DEFAULT_MERMAID_SOURCE = 'graph TD\n  A[Start] --> B[Done]';
+const DEFAULT_PLANTUML_SOURCE = '@startuml\nAlice -> Bob: Hello\n@enduml';
+const DEFAULT_IMAGE = {
+    src: 'https://placehold.co/960x540?text=Image',
+    alt: 'Image',
+};
+const DEFAULT_TABLE_ROWS = [
+    ['Name', 'Owner', 'Status'],
+    ['Runbook', 'Platform', 'Draft'],
+    ['Release notes', 'Docs', 'Ready'],
+];
+const WysiwygRenderServicesContext = React.createContext({});
+const BLOCK_OPTIONS = [
+    { value: 'paragraph', label: 'Paragraph' },
+    { value: 'h1', label: 'Heading 1' },
+    { value: 'h2', label: 'Heading 2' },
+    { value: 'h3', label: 'Heading 3' },
+    { value: 'quote', label: 'Quote' },
+    { value: 'code', label: 'Code block' },
+    { value: 'bullet', label: 'Bulleted list' },
+    { value: 'number', label: 'Numbered list' },
+    { value: 'check', label: 'Checkbox list' },
+];
+const CODE_LANGUAGE_OPTIONS = [
+    { value: 'plain', label: 'Plain text' },
+    { value: 'typescript', label: 'TypeScript' },
+    { value: 'javascript', label: 'JavaScript' },
+    { value: 'markup', label: 'HTML/XML' },
+    { value: 'css', label: 'CSS' },
+    { value: 'python', label: 'Python' },
+    { value: 'markdown', label: 'Markdown' },
+    { value: 'sql', label: 'SQL' },
+    { value: 'java', label: 'Java' },
+    { value: 'cpp', label: 'C++' },
+    { value: 'rust', label: 'Rust' },
+    { value: 'swift', label: 'Swift' },
+    { value: 'powershell', label: 'PowerShell' },
+];
+function normalizeCodeLanguageForControl(language) {
+    if (language === 'ts' || language === 'tsx') {
+        return 'typescript';
+    }
+    if (language === 'js' || language === 'jsx') {
+        return 'javascript';
+    }
+    if (language === 'html' || language === 'xml') {
+        return 'markup';
+    }
+    if (language === 'py') {
+        return 'python';
+    }
+    if (language === 'text' || language === 'plaintext') {
+        return 'plain';
+    }
+    const normalized = language ?? 'plain';
+    return CODE_LANGUAGE_OPTIONS.some((option) => option.value === normalized) ? normalized : 'plain';
+}
+class MermaidNode extends DecoratorNode {
+    __source;
+    static getType() {
+        return 'mermaid';
+    }
+    static clone(node) {
+        return new MermaidNode(node.__source, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return $createMermaidNode(serializedNode.source);
+    }
+    constructor(source, key) {
+        super(key);
+        this.__source = source;
+    }
+    createDOM() {
+        const element = document.createElement('div');
+        element.className = 'me-wysiwyg-mermaid-node';
+        return element;
+    }
+    updateDOM() {
+        return false;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'mermaid',
+            version: 1,
+            source: this.__source,
+        };
+    }
+    getTextContent() {
+        return `\`\`\`mermaid\n${this.__source}\n\`\`\``;
+    }
+    setSource(source) {
+        const writable = this.getWritable();
+        writable.__source = source;
+    }
+    getSource() {
+        return this.getLatest().__source;
+    }
+    isInline() {
+        return false;
+    }
+    isIsolated() {
+        return true;
+    }
+    decorate(editor) {
+        return _jsx(MermaidBlock, { source: this.__source, nodeKey: this.__key, editor: editor });
+    }
+}
+class PlantUmlNode extends DecoratorNode {
+    __source;
+    static getType() {
+        return 'plantuml';
+    }
+    static clone(node) {
+        return new PlantUmlNode(node.__source, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return $createPlantUmlNode(serializedNode.source);
+    }
+    constructor(source, key) {
+        super(key);
+        this.__source = source;
+    }
+    createDOM() {
+        const element = document.createElement('div');
+        element.className = 'me-wysiwyg-plantuml-node';
+        return element;
+    }
+    updateDOM() {
+        return false;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'plantuml',
+            version: 1,
+            source: this.__source,
+        };
+    }
+    getTextContent() {
+        return `\`\`\`plantuml\n${this.__source}\n\`\`\``;
+    }
+    setSource(source) {
+        const writable = this.getWritable();
+        writable.__source = source;
+    }
+    getSource() {
+        return this.getLatest().__source;
+    }
+    isInline() {
+        return false;
+    }
+    isIsolated() {
+        return true;
+    }
+    decorate(editor) {
+        return _jsx(PlantUmlBlock, { source: this.__source, nodeKey: this.__key, editor: editor });
+    }
+}
+class ImageNode extends DecoratorNode {
+    __src;
+    __alt;
+    __title;
+    static getType() {
+        return 'image';
+    }
+    static clone(node) {
+        return new ImageNode({ src: node.__src, alt: node.__alt, title: node.__title }, node.__key);
+    }
+    static importJSON(serializedNode) {
+        return $createImageNode({
+            src: serializedNode.src,
+            alt: serializedNode.alt,
+            title: serializedNode.title,
+        });
+    }
+    constructor(payload, key) {
+        super(key);
+        this.__src = payload.src;
+        this.__alt = payload.alt ?? '';
+        this.__title = payload.title;
+    }
+    createDOM() {
+        const element = document.createElement('div');
+        element.className = 'me-wysiwyg-image-node';
+        return element;
+    }
+    updateDOM() {
+        return false;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'image',
+            version: 1,
+            src: this.__src,
+            alt: this.__alt,
+            title: this.__title,
+        };
+    }
+    getTextContent() {
+        return formatImageMarkdown(this.getImage());
+    }
+    setImage(payload) {
+        const writable = this.getWritable();
+        writable.__src = payload.src;
+        writable.__alt = payload.alt ?? '';
+        writable.__title = payload.title;
+    }
+    getImage() {
+        const latest = this.getLatest();
+        return {
+            src: latest.__src,
+            alt: latest.__alt,
+            title: latest.__title,
+        };
+    }
+    isInline() {
+        return false;
+    }
+    isIsolated() {
+        return true;
+    }
+    decorate(editor) {
+        return _jsx(ImageBlock, { image: this.getImage(), nodeKey: this.__key, editor: editor });
+    }
+}
+function $createMermaidNode(source) {
+    return $applyNodeReplacement(new MermaidNode(source));
+}
+function $isMermaidNode(node) {
+    return node instanceof MermaidNode;
+}
+function $createPlantUmlNode(source) {
+    return $applyNodeReplacement(new PlantUmlNode(source));
+}
+function $isPlantUmlNode(node) {
+    return node instanceof PlantUmlNode;
+}
+function $createImageNode(payload) {
+    return $applyNodeReplacement(new ImageNode(payload));
+}
+function $isImageNode(node) {
+    return node instanceof ImageNode;
+}
+const MERMAID_TRANSFORMER = {
+    type: 'multiline-element',
+    dependencies: [MermaidNode],
+    regExpStart: /^```mermaid\s*$/,
+    regExpEnd: /^```\s*$/,
+    replace(rootNode, _children, _startMatch, _endMatch, linesInBetween) {
+        rootNode.append($createMermaidNode((linesInBetween ?? []).join('\n')));
+    },
+    export(node) {
+        if (!$isMermaidNode(node)) {
+            return null;
+        }
+        return `\`\`\`mermaid\n${node.getSource()}\n\`\`\``;
+    },
+};
+const PLANTUML_TRANSFORMER = {
+    type: 'multiline-element',
+    dependencies: [PlantUmlNode],
+    regExpStart: /^```(?:plantuml|puml)\s*$/,
+    regExpEnd: /^```\s*$/,
+    replace(rootNode, _children, _startMatch, _endMatch, linesInBetween) {
+        rootNode.append($createPlantUmlNode((linesInBetween ?? []).join('\n')));
+    },
+    export(node) {
+        if (!$isPlantUmlNode(node)) {
+            return null;
+        }
+        return `\`\`\`plantuml\n${node.getSource()}\n\`\`\``;
+    },
+};
+const IMAGE_TRANSFORMER = {
+    type: 'element',
+    dependencies: [ImageNode],
+    regExp: /^!\[([^\]]*)\]\((\S+?)(?:\s+"((?:[^"\\]|\\.)*)")?\)\s*$/,
+    replace(parentNode, _children, match) {
+        const [, alt, src, title] = match;
+        parentNode.replace($createImageNode({
+            src: unescapeMarkdownAttribute(src ?? ''),
+            alt: unescapeMarkdownAttribute(alt ?? ''),
+            title: title ? unescapeMarkdownAttribute(title) : undefined,
+        }));
+    },
+    export(node) {
+        if (!$isImageNode(node)) {
+            return null;
+        }
+        return formatImageMarkdown(node.getImage());
+    },
+};
+const TABLE_TRANSFORMER = {
+    type: 'multiline-element',
+    dependencies: [TableNode, TableRowNode, TableCellNode],
+    regExpStart: /^ {0,3}\|.*\|\s*$/,
+    handleImportAfterStartMatch({ lines, rootNode, startLineIndex }) {
+        const headerLine = lines[startLineIndex] ?? '';
+        const separatorLine = lines[startLineIndex + 1] ?? '';
+        if (!isMarkdownTableRowLine(headerLine) || !isMarkdownTableSeparatorLine(separatorLine)) {
+            return null;
+        }
+        const headerCells = parseMarkdownTableRow(headerLine);
+        const separatorCells = parseMarkdownTableRow(separatorLine);
+        if (headerCells.length === 0 || separatorCells.length !== headerCells.length) {
+            return null;
+        }
+        let endLineIndex = startLineIndex + 1;
+        const rows = [headerCells];
+        for (let lineIndex = startLineIndex + 2; lineIndex < lines.length; lineIndex += 1) {
+            const line = lines[lineIndex] ?? '';
+            if (!isMarkdownTableRowLine(line)) {
+                break;
+            }
+            rows.push(normalizeMarkdownTableRow(parseMarkdownTableRow(line), headerCells.length));
+            endLineIndex = lineIndex;
+        }
+        rootNode.append($createMarkdownTableNode(rows));
+        return [true, endLineIndex];
+    },
+    replace() {
+        return false;
+    },
+    export(node) {
+        if (!$isTableNode(node)) {
+            return null;
+        }
+        return formatMarkdownTableNode(node);
+    },
+};
+const WYSIWYG_TRANSFORMERS = [
+    IMAGE_TRANSFORMER,
+    TABLE_TRANSFORMER,
+    MERMAID_TRANSFORMER,
+    PLANTUML_TRANSFORMER,
+    CHECK_LIST,
+    ...TRANSFORMERS,
+];
+const WYSIWYG_NODES = [
+    HeadingNode,
+    QuoteNode,
+    ListNode,
+    ListItemNode,
+    LinkNode,
+    AutoLinkNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableRowNode,
+    TableCellNode,
+    ImageNode,
+    MermaidNode,
+    PlantUmlNode,
+];
+const UNORDERED_ITEM = /^ *[-*+] /;
+const CODE_FENCE = /^ *(```|~~~)/;
+/**
+ * Merge adjacent unordered lists that Lexical serialized with a blank line
+ * between them. Lexical models a checkbox list and a plain bullet list as
+ * different node types, so `- [ ] task` followed by `- bullet` exports as two
+ * lists separated by a blank line — which is the "weird blank lines" a checkbox
+ * introduces when list types are mixed. In Markdown both share the `-` marker
+ * and render as a single list, so dropping the blank line is faithful and makes
+ * the round-trip tight. Same-type lists are already merged by Lexical; this only
+ * affects the check<->bullet boundary. Fenced code blocks are skipped so a code
+ * line that merely looks like a list item is never touched.
+ */
+function mergeAdjacentUnorderedLists(markdown) {
+    const lines = markdown.split('\n');
+    const out = [];
+    let inFence = false;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (CODE_FENCE.test(line)) {
+            inFence = !inFence;
+        }
+        if (!inFence &&
+            line === '' &&
+            UNORDERED_ITEM.test(out[out.length - 1] ?? '') &&
+            UNORDERED_ITEM.test(lines[i + 1] ?? '')) {
+            continue; // drop the blank line between two adjacent unordered list items
+        }
+        out.push(line);
+    }
+    return out.join('\n');
+}
+/** Serialize the current editor body to Markdown with list normalization applied. */
+function serializeWysiwygBody() {
+    return mergeAdjacentUnorderedLists($convertToMarkdownString(WYSIWYG_TRANSFORMERS));
+}
+export function WysiwygLexicalEditor({ markdown, readOnly = false, ariaLabel = 'Rich text Markdown editor', placeholder = 'Start typing...', renderServices, toolbarIcons, onChange, onDiagnostics, }) {
+    const lastEmittedMarkdown = React.useRef(null);
+    const renderServiceValue = React.useMemo(() => ({
+        ...renderServices,
+        reportDiagnostics: onDiagnostics,
+    }), [onDiagnostics, renderServices]);
+    const editorConfig = React.useMemo(() => ({
+        namespace: 'MarkdownEditorWysiwyg',
+        nodes: WYSIWYG_NODES,
+        editable: !readOnly,
+        theme: lexicalTheme,
+        onError(error) {
+            onDiagnostics?.([
+                {
+                    code: 'wysiwyg.lexical.error',
+                    message: error.message,
+                    severity: 'error',
+                    source: 'mode',
+                    details: error,
+                },
+            ]);
+        },
+        editorState: () => {
+            importMarkdownBody(markdown);
+        },
+    }), []);
+    return (_jsx("div", { className: "me-wysiwyg", "data-readonly": readOnly ? 'true' : 'false', children: _jsx(WysiwygRenderServicesContext.Provider, { value: renderServiceValue, children: _jsxs(LexicalComposer, { initialConfig: editorConfig, children: [_jsx(EditableStatePlugin, { readOnly: readOnly }), _jsx(ExternalMarkdownPlugin, { markdown: markdown, lastEmittedMarkdown: lastEmittedMarkdown }), _jsx(WysiwygCommandPlugin, {}), !readOnly ? _jsx(WysiwygToolbar, { icons: toolbarIcons }) : null, !readOnly ? _jsx(WysiwygCodeLanguagePlugin, {}) : null, _jsx(WysiwygCodeHighlightPlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "me-wysiwyg-input", "aria-label": ariaLabel, spellCheck: false }), placeholder: _jsx("div", { className: "me-wysiwyg-placeholder-text", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), !readOnly ? _jsx(MarkdownShortcutPlugin, { transformers: WYSIWYG_TRANSFORMERS }) : null, _jsx(LinkPlugin, {}), _jsx(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false, hasHorizontalScroll: true }), _jsx(WysiwygChangePlugin, { sourceMarkdown: markdown, lastEmittedMarkdown: lastEmittedMarkdown, onChange: onChange })] }) }) }));
+}
+export function roundTripWysiwygMarkdown(markdown) {
+    const envelope = splitMarkdownEnvelope(markdown);
+    const editor = createEditor({
+        namespace: 'MarkdownEditorWysiwygHeadless',
+        nodes: WYSIWYG_NODES,
+        theme: lexicalTheme,
+        onError(error) {
+            throw error;
+        },
+    });
+    editor.update(() => {
+        importMarkdownBody(markdown);
+    }, { discrete: true });
+    let body = '';
+    editor.getEditorState().read(() => {
+        body = serializeWysiwygBody();
+    });
+    return replaceEnvelopeBody(envelope, body);
+}
+/** @internal Test-only semantic inspection helper; not part of the stable package API. */
+export function inspectWysiwygMarkdownForTests(markdown) {
+    const editor = createEditor({
+        namespace: 'MarkdownEditorWysiwygHeadlessInspect',
+        nodes: WYSIWYG_NODES,
+        theme: lexicalTheme,
+        onError(error) {
+            throw error;
+        },
+    });
+    editor.update(() => {
+        importMarkdownBody(markdown);
+    }, { discrete: true });
+    const lists = [];
+    editor.getEditorState().read(() => {
+        for (const node of $getRoot().getChildren()) {
+            if (!$isListNode(node)) {
+                continue;
+            }
+            lists.push({
+                type: 'list',
+                listType: node.getListType(),
+                items: node.getChildren().map((child) => ({
+                    checked: $isListItemNode(child) ? child.getChecked() : undefined,
+                    text: child.getTextContent(),
+                })),
+            });
+        }
+    });
+    return lists;
+}
+/** @internal Test-only semantic inspection helper; not part of the stable package API. */
+export function inspectWysiwygMarkdownTablesForTests(markdown) {
+    const editor = createEditor({
+        namespace: 'MarkdownEditorWysiwygHeadlessInspectTables',
+        nodes: WYSIWYG_NODES,
+        theme: lexicalTheme,
+        onError(error) {
+            throw error;
+        },
+    });
+    editor.update(() => {
+        importMarkdownBody(markdown);
+    }, { discrete: true });
+    const tables = [];
+    editor.getEditorState().read(() => {
+        for (const node of $getRoot().getChildren()) {
+            if (!$isTableNode(node)) {
+                continue;
+            }
+            tables.push({
+                type: 'table',
+                rows: getTableNodeRows(node),
+            });
+        }
+    });
+    return tables;
+}
+/** @internal Test-only table action helper; not part of the stable package API. */
+export function applyWysiwygTableActionForTests(markdown, action, target = {}) {
+    const envelope = splitMarkdownEnvelope(markdown);
+    const editor = createEditor({
+        namespace: 'MarkdownEditorWysiwygHeadlessTableAction',
+        nodes: WYSIWYG_NODES,
+        theme: lexicalTheme,
+        onError(error) {
+            throw error;
+        },
+    });
+    editor.update(() => {
+        importMarkdownBody(markdown);
+        const tableNode = $getRoot().getChildren().find($isTableNode);
+        if (!$isTableNode(tableNode)) {
+            return;
+        }
+        $applyMarkdownTableActionAt(tableNode, action, target.rowIndex ?? 0, target.columnIndex ?? 0);
+    }, { discrete: true });
+    let body = '';
+    editor.getEditorState().read(() => {
+        body = serializeWysiwygBody();
+    });
+    return replaceEnvelopeBody(envelope, body);
+}
+function WysiwygCommandPlugin() {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => {
+        const removeMermaidCommand = editor.registerCommand(INSERT_MERMAID_COMMAND, (source) => {
+            $insertNodes([$createMermaidNode(source), $createParagraphNode()]);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+        const removePlantUmlCommand = editor.registerCommand(INSERT_PLANTUML_COMMAND, (source) => {
+            $insertNodes([$createPlantUmlNode(source), $createParagraphNode()]);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+        const removeImageCommand = editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
+            $insertNodes([$createImageNode(payload), $createParagraphNode()]);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+        const removeTableCommand = editor.registerCommand(INSERT_TABLE_COMMAND, () => {
+            const tableNode = $createMarkdownTableNode(DEFAULT_TABLE_ROWS);
+            $insertNodes([tableNode, $createParagraphNode()]);
+            tableNode.selectStart();
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+        const removeTableActionCommand = editor.registerCommand(APPLY_TABLE_ACTION_COMMAND, (action) => {
+            const context = $getActiveMarkdownTableContext();
+            if (context === null) {
+                return false;
+            }
+            return $applyMarkdownTableActionAt(context.tableNode, action, context.rowIndex, context.columnIndex);
+        }, COMMAND_PRIORITY_LOW);
+        return () => {
+            removeMermaidCommand();
+            removePlantUmlCommand();
+            removeImageCommand();
+            removeTableCommand();
+            removeTableActionCommand();
+        };
+    }, [editor]);
+    return null;
+}
+function WysiwygCodeHighlightPlugin() {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => registerCodeHighlighting(editor), [editor]);
+    return null;
+}
+function WysiwygCodeLanguagePlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [activeCode, setActiveCode] = React.useState(null);
+    const updateCodeLanguageState = React.useCallback(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+            setActiveCode(null);
+            return;
+        }
+        const topLevelNode = selection.anchor.getNode().getTopLevelElement();
+        if (!$isCodeNode(topLevelNode)) {
+            setActiveCode(null);
+            return;
+        }
+        const codeKey = topLevelNode.getKey();
+        const language = normalizeCodeLanguageForControl(topLevelNode.getLanguage());
+        window.requestAnimationFrame(() => {
+            const codeElement = editor.getElementByKey(codeKey);
+            const rootElement = editor.getRootElement();
+            const container = rootElement?.closest('.me-wysiwyg') ?? null;
+            if (codeElement === null || container === null) {
+                setActiveCode(null);
+                return;
+            }
+            const codeRect = codeElement.getBoundingClientRect();
+            const containerRect = container.getBoundingClientRect();
+            setActiveCode({
+                key: codeKey,
+                language,
+                top: codeRect.top - containerRect.top + container.scrollTop + 6,
+                left: codeRect.left - containerRect.left + container.scrollLeft + 6,
+                width: Math.max(160, codeRect.width - 12),
+            });
+        });
+    }, [editor]);
+    const readCodeLanguageState = React.useCallback(() => {
+        editor.getEditorState().read(updateCodeLanguageState);
+    }, [editor, updateCodeLanguageState]);
+    React.useEffect(() => {
+        readCodeLanguageState();
+        const removeUpdateListener = editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(updateCodeLanguageState);
+        });
+        const removeSelectionListener = editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            readCodeLanguageState();
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+        const rootElement = editor.getRootElement();
+        const container = rootElement?.closest('.me-wysiwyg');
+        container?.addEventListener('scroll', readCodeLanguageState);
+        window.addEventListener('resize', readCodeLanguageState);
+        return () => {
+            removeUpdateListener();
+            removeSelectionListener();
+            container?.removeEventListener('scroll', readCodeLanguageState);
+            window.removeEventListener('resize', readCodeLanguageState);
+        };
+    }, [editor, readCodeLanguageState, updateCodeLanguageState]);
+    if (activeCode === null) {
+        return null;
+    }
+    return (_jsxs("div", { className: "me-wysiwyg-code-language-popover", style: { top: activeCode.top, left: activeCode.left, width: activeCode.width }, children: [_jsx("span", { children: "Code" }), _jsx("select", { "aria-label": "Code block language", value: activeCode.language, onChange: (event) => {
+                    const nextLanguage = event.currentTarget.value;
+                    editor.update(() => {
+                        const node = $getNodeByKey(activeCode.key);
+                        if ($isCodeNode(node)) {
+                            node.setLanguage(nextLanguage);
+                        }
+                    });
+                    setActiveCode((current) => current === null ? current : { ...current, language: nextLanguage });
+                }, children: CODE_LANGUAGE_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }));
+}
+function WysiwygToolbar({ icons = {} }) {
+    const [editor] = useLexicalComposerContext();
+    const [activeBlock, setActiveBlock] = React.useState('paragraph');
+    const [activeTable, setActiveTable] = React.useState(null);
+    const [isBold, setIsBold] = React.useState(false);
+    const [isItalic, setIsItalic] = React.useState(false);
+    const [isCode, setIsCode] = React.useState(false);
+    const updateToolbarState = React.useCallback(() => {
+        const selection = $getSelection();
+        const tableContext = $getActiveMarkdownTableContext();
+        setActiveTable(tableContext === null ? null : {
+            rowCount: tableContext.rowCount,
+            columnCount: tableContext.columnCount,
+        });
+        if (!$isRangeSelection(selection) && !$isTableSelection(selection)) {
+            return;
+        }
+        setIsBold(selection.hasFormat('bold'));
+        setIsItalic(selection.hasFormat('italic'));
+        setIsCode(selection.hasFormat('code'));
+        if (!$isRangeSelection(selection)) {
+            setActiveBlock('paragraph');
+            return;
+        }
+        const anchorNode = selection.anchor.getNode();
+        const topLevelNode = anchorNode.getTopLevelElement();
+        if (topLevelNode === null) {
+            setActiveBlock('paragraph');
+            return;
+        }
+        if ($isHeadingNode(topLevelNode)) {
+            const tag = topLevelNode.getTag();
+            setActiveBlock(tag === 'h1' || tag === 'h2' || tag === 'h3' ? tag : 'paragraph');
+            return;
+        }
+        if ($isQuoteNode(topLevelNode)) {
+            setActiveBlock('quote');
+            return;
+        }
+        if ($isCodeNode(topLevelNode)) {
+            setActiveBlock('code');
+            return;
+        }
+        if ($isListNode(topLevelNode)) {
+            const listType = topLevelNode.getListType();
+            setActiveBlock(listType === 'number' ? 'number' : listType === 'check' ? 'check' : 'bullet');
+            return;
+        }
+        setActiveBlock('paragraph');
+    }, []);
+    React.useEffect(() => {
+        editor.getEditorState().read(updateToolbarState);
+        const removeUpdateListener = editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(updateToolbarState);
+        });
+        const removeSelectionListener = editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateToolbarState();
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+        return () => {
+            removeUpdateListener();
+            removeSelectionListener();
+        };
+    }, [editor, updateToolbarState]);
+    const setBlock = React.useCallback((block) => {
+        if (block === 'bullet') {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+            return;
+        }
+        if (block === 'number') {
+            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+            return;
+        }
+        if (block === 'check') {
+            editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
+            return;
+        }
+        editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) {
+                return;
+            }
+            if (block === 'paragraph') {
+                $setBlocksType(selection, () => $createParagraphNode());
+                return;
+            }
+            if (block === 'quote') {
+                $setBlocksType(selection, () => $createQuoteNode());
+                return;
+            }
+            if (block === 'code') {
+                $setBlocksType(selection, () => $createCodeNode('typescript'));
+                return;
+            }
+            $setBlocksType(selection, () => $createHeadingNode(block));
+        });
+    }, [editor]);
+    const insertCodeBlock = React.useCallback(() => {
+        editor.update(() => {
+            const codeNode = $createCodeNode('typescript');
+            codeNode.append($createTextNode('const value = 1;'));
+            $insertNodes([codeNode, $createParagraphNode()]);
+            codeNode.selectStart();
+        });
+    }, [editor]);
+    const insertBlock = React.useCallback((block) => {
+        if (block === 'code') {
+            insertCodeBlock();
+            return;
+        }
+        if (block === 'table') {
+            editor.dispatchCommand(INSERT_TABLE_COMMAND, undefined);
+            return;
+        }
+        if (block === 'image') {
+            editor.dispatchCommand(INSERT_IMAGE_COMMAND, DEFAULT_IMAGE);
+            return;
+        }
+        if (block === 'mermaid') {
+            editor.dispatchCommand(INSERT_MERMAID_COMMAND, DEFAULT_MERMAID_SOURCE);
+            return;
+        }
+        editor.dispatchCommand(INSERT_PLANTUML_COMMAND, DEFAULT_PLANTUML_SOURCE);
+    }, [editor, insertCodeBlock]);
+    const applyTableAction = React.useCallback((action) => {
+        editor.dispatchCommand(APPLY_TABLE_ACTION_COMMAND, action);
+    }, [editor]);
+    return (_jsxs("div", { className: "me-wysiwyg-toolbar", role: "toolbar", "aria-label": "Rich text formatting controls", children: [_jsx("span", { className: "me-wysiwyg-toolbar-group", "aria-label": "Block formatting", children: _jsx("select", { className: "me-wysiwyg-block-select", "aria-label": "Current block style", value: activeBlock, onChange: (event) => setBlock(event.currentTarget.value), children: BLOCK_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }) }), _jsxs("span", { className: "me-wysiwyg-toolbar-group", "aria-label": "Inline formatting", children: [_jsx("button", { type: "button", title: "Bold", "aria-pressed": isBold, "data-active": isBold ? 'true' : 'false', onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold'), children: icons.bold ?? 'B' }), _jsx("button", { type: "button", title: "Italic", "aria-pressed": isItalic, "data-active": isItalic ? 'true' : 'false', onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic'), children: icons.italic ?? 'I' }), _jsx("button", { type: "button", title: "Inline code", "aria-pressed": isCode, "data-active": isCode ? 'true' : 'false', onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code'), children: icons.inlineCode ?? '</>' })] }), _jsxs("span", { className: "me-wysiwyg-toolbar-group", "aria-label": "List formatting", children: [_jsx("button", { type: "button", "aria-label": "Bulleted list", title: "Bulleted list", "aria-pressed": activeBlock === 'bullet', "data-active": activeBlock === 'bullet' ? 'true' : 'false', onClick: () => setBlock('bullet'), children: icons.bulletedList ?? '•' }), _jsx("button", { type: "button", "aria-label": "Numbered list", title: "Numbered list", "aria-pressed": activeBlock === 'number', "data-active": activeBlock === 'number' ? 'true' : 'false', onClick: () => setBlock('number'), children: icons.numberedList ?? '1.' }), _jsx("button", { type: "button", "aria-label": "Checkbox list", title: "Checkbox list", "aria-pressed": activeBlock === 'check', "data-active": activeBlock === 'check' ? 'true' : 'false', onClick: () => setBlock('check'), children: icons.checkboxList ?? '☑' })] }), _jsx("span", { className: "me-wysiwyg-toolbar-group", "aria-label": "Insert blocks", children: _jsxs("select", { className: "me-wysiwyg-insert-select", "aria-label": "Insert block", value: "", onChange: (event) => {
+                        insertBlock(event.currentTarget.value);
+                    }, children: [_jsx("option", { value: "", disabled: true, children: "Insert" }), _jsx("option", { value: "code", children: "Code block" }), _jsx("option", { value: "table", children: "Table" }), _jsx("option", { value: "image", children: "Image" }), _jsx("option", { value: "mermaid", children: "Mermaid diagram" }), _jsx("option", { value: "plantuml", children: "PlantUML diagram" })] }) }), activeTable === null ? null : (_jsxs("span", { className: "me-wysiwyg-toolbar-group", "aria-label": "Table operations", children: [_jsx("button", { className: "me-wysiwyg-table-action", type: "button", "aria-label": "Insert table row", title: "Insert table row", onClick: () => applyTableAction('insert-row'), children: "R+" }), _jsx("button", { className: "me-wysiwyg-table-action", type: "button", "aria-label": "Insert table column", title: "Insert table column", onClick: () => applyTableAction('insert-column'), children: "C+" }), _jsx("button", { className: "me-wysiwyg-table-action", type: "button", "aria-label": "Delete table row", title: "Delete table row", disabled: activeTable.rowCount <= 1, onClick: () => applyTableAction('delete-row'), children: "R-" }), _jsx("button", { className: "me-wysiwyg-table-action", type: "button", "aria-label": "Delete table column", title: "Delete table column", disabled: activeTable.columnCount <= 1, onClick: () => applyTableAction('delete-column'), children: "C-" })] }))] }));
+}
+function MermaidBlock({ source, nodeKey, editor, }) {
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(source);
+    const [html, setHtml] = React.useState('');
+    const [error, setError] = React.useState(null);
+    const renderServices = React.useContext(WysiwygRenderServicesContext);
+    React.useEffect(() => {
+        setDraft(source);
+    }, [source]);
+    React.useEffect(() => {
+        if (isEditing) {
+            return;
+        }
+        let disposed = false;
+        const diagramId = `me-wysiwyg-mermaid-${nodeKey.replace(/[^a-zA-Z0-9_-]/g, '-')}`;
+        setError(null);
+        setHtml('');
+        import('mermaid')
+            .then(async (module) => {
+            const renderer = module.default;
+            // Top-level htmlLabels:false -> SVG <text> labels that survive HTML
+            // sanitization (DOMPurify strips foreignObject HTML labels, hiding text).
+            // Mermaid v11 only honors the top-level flag for flowcharts.
+            renderer.initialize({ startOnLoad: false, securityLevel: 'strict', theme: 'default', htmlLabels: false, flowchart: { htmlLabels: false } });
+            const rendered = await renderer.render(diagramId, source);
+            if (!disposed) {
+                setHtml(rendered.svg);
+            }
+        })
+            .catch((cause) => {
+            if (!disposed) {
+                const message = formatMermaidRenderError(cause);
+                setError(message);
+                renderServices.reportDiagnostics?.([{
+                        code: 'wysiwyg.mermaid.render.failed',
+                        message,
+                        severity: 'error',
+                        source: 'renderer',
+                        details: cause,
+                    }]);
+            }
+        });
+        return () => {
+            disposed = true;
+        };
+    }, [isEditing, nodeKey, renderServices, source]);
+    function saveSource() {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isMermaidNode(node)) {
+                node.setSource(draft);
+            }
+        });
+        setIsEditing(false);
+    }
+    return (_jsxs("figure", { className: "me-wysiwyg-mermaid", children: [_jsxs("figcaption", { children: [_jsx("span", { children: "Mermaid" }), _jsx("button", { type: "button", onClick: () => setIsEditing((current) => !current), children: isEditing ? 'Preview' : 'Edit' })] }), isEditing ? (_jsxs("div", { className: "me-wysiwyg-mermaid-editor", children: [_jsx("textarea", { "aria-label": "Mermaid diagram source", value: draft, onChange: (event) => setDraft(event.currentTarget.value), rows: 7 }), _jsx("button", { type: "button", onClick: saveSource, children: "Apply" })] })) : error ? (_jsx("pre", { className: "me-wysiwyg-mermaid-error", children: error })) : html ? (_jsx("div", { className: "me-wysiwyg-mermaid-rendered", dangerouslySetInnerHTML: { __html: sanitizeDiagramHtml(html) } })) : (_jsx("div", { className: "me-wysiwyg-mermaid-loading", children: "Rendering diagram..." }))] }));
+}
+function PlantUmlBlock({ source, nodeKey, editor, }) {
+    const services = React.useContext(WysiwygRenderServicesContext);
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(source);
+    const [html, setHtml] = React.useState('');
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        setDraft(source);
+    }, [source]);
+    React.useEffect(() => {
+        if (isEditing) {
+            return;
+        }
+        if (!services.renderPlantUml) {
+            setHtml('');
+            setError('PlantUML rendering requires a host renderer.');
+            return;
+        }
+        const controller = new AbortController();
+        setError(null);
+        setHtml('');
+        Promise.resolve(services.renderPlantUml(source, { signal: controller.signal }))
+            .then((result) => {
+            if (controller.signal.aborted) {
+                return;
+            }
+            setHtml(result.html);
+            if (result.diagnostics && result.diagnostics.length > 0) {
+                services.reportDiagnostics?.(result.diagnostics);
+            }
+        })
+            .catch((cause) => {
+            if (!controller.signal.aborted) {
+                setError(cause instanceof Error ? cause.message : String(cause));
+            }
+        });
+        return () => {
+            controller.abort();
+        };
+    }, [isEditing, services, source]);
+    function saveSource() {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isPlantUmlNode(node)) {
+                node.setSource(draft);
+            }
+        });
+        setIsEditing(false);
+    }
+    return (_jsxs("figure", { className: "me-wysiwyg-plantuml", children: [_jsxs("figcaption", { children: [_jsx("span", { children: "PlantUML" }), _jsx("button", { type: "button", onClick: () => setIsEditing((current) => !current), children: isEditing ? 'Preview' : 'Edit' })] }), isEditing ? (_jsxs("div", { className: "me-wysiwyg-diagram-editor", children: [_jsx("textarea", { "aria-label": "PlantUML diagram source", value: draft, onChange: (event) => setDraft(event.currentTarget.value), rows: 7 }), _jsx("button", { type: "button", onClick: saveSource, children: "Apply" })] })) : error ? (_jsx("pre", { className: "me-wysiwyg-diagram-error", children: error })) : html ? (_jsx("div", { className: "me-wysiwyg-diagram-rendered", dangerouslySetInnerHTML: { __html: sanitizeDiagramHtml(html) } })) : (_jsx("div", { className: "me-wysiwyg-diagram-loading", children: "Rendering diagram..." }))] }));
+}
+function ImageBlock({ image, nodeKey, editor, }) {
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(image);
+    React.useEffect(() => {
+        setDraft(image);
+    }, [image]);
+    function saveImage() {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setImage({
+                    src: draft.src.trim(),
+                    alt: draft.alt,
+                    title: draft.title?.trim() ? draft.title : undefined,
+                });
+            }
+        });
+        setIsEditing(false);
+    }
+    return (_jsxs("figure", { className: "me-wysiwyg-image", children: [_jsxs("figcaption", { children: [_jsx("span", { children: "Image" }), _jsx("button", { type: "button", onClick: () => setIsEditing((current) => !current), children: isEditing ? 'Preview' : 'Edit' })] }), isEditing ? (_jsxs("div", { className: "me-wysiwyg-image-editor", children: [_jsxs("label", { children: [_jsx("span", { children: "URL" }), _jsx("input", { type: "url", value: draft.src, onChange: (event) => setDraft((current) => ({ ...current, src: event.currentTarget.value })) })] }), _jsxs("label", { children: [_jsx("span", { children: "Alt text" }), _jsx("input", { type: "text", value: draft.alt, onChange: (event) => setDraft((current) => ({ ...current, alt: event.currentTarget.value })) })] }), _jsxs("label", { children: [_jsx("span", { children: "Title" }), _jsx("input", { type: "text", value: draft.title ?? '', onChange: (event) => setDraft((current) => ({ ...current, title: event.currentTarget.value })) })] }), _jsx("button", { type: "button", onClick: saveImage, children: "Apply" })] })) : image.src ? (_jsxs(_Fragment, { children: [_jsx("img", { src: image.src, alt: image.alt, title: image.title }), image.alt || image.title ? (_jsx("p", { children: image.title || image.alt })) : null] })) : (_jsx("pre", { className: "me-wysiwyg-diagram-error", children: "Image URL is empty." }))] }));
+}
+function EditableStatePlugin({ readOnly }) {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => {
+        editor.setEditable(!readOnly);
+    }, [editor, readOnly]);
+    return null;
+}
+function ExternalMarkdownPlugin({ markdown, lastEmittedMarkdown, }) {
+    const [editor] = useLexicalComposerContext();
+    const lastAppliedMarkdown = React.useRef(markdown);
+    React.useEffect(() => {
+        if (markdown === lastAppliedMarkdown.current || markdown === lastEmittedMarkdown.current) {
+            return;
+        }
+        lastAppliedMarkdown.current = markdown;
+        editor.update(() => {
+            importMarkdownBody(markdown);
+        }, { discrete: true });
+    }, [editor, lastEmittedMarkdown, markdown]);
+    return null;
+}
+function WysiwygChangePlugin({ sourceMarkdown, lastEmittedMarkdown, onChange, }) {
+    const sourceMarkdownRef = React.useRef(sourceMarkdown);
+    sourceMarkdownRef.current = sourceMarkdown;
+    return (_jsx(OnChangePlugin, { ignoreSelectionChange: true, onChange: (editorState) => {
+            const nextMarkdown = exportEditorState(editorState, sourceMarkdownRef.current);
+            if (nextMarkdown === lastEmittedMarkdown.current || nextMarkdown === sourceMarkdownRef.current) {
+                return;
+            }
+            lastEmittedMarkdown.current = nextMarkdown;
+            onChange?.(nextMarkdown, {
+                source: 'user',
+                mode: 'wysiwyg',
+                timestamp: Date.now(),
+            });
+        } }));
+}
+function importMarkdownBody(markdown) {
+    const envelope = splitMarkdownEnvelope(markdown);
+    const root = $getRoot();
+    root.clear();
+    if (envelope.body.trim() === '') {
+        root.append($createParagraphNode());
+        return;
+    }
+    $convertFromMarkdownString(envelope.body, WYSIWYG_TRANSFORMERS);
+}
+function exportEditorState(editorState, sourceMarkdown) {
+    let body = '';
+    editorState.read(() => {
+        body = serializeWysiwygBody();
+    });
+    return replaceEnvelopeBody(splitMarkdownEnvelope(sourceMarkdown), body);
+}
+function splitMarkdownEnvelope(markdown) {
+    if (!/^---\r?\n/.test(markdown)) {
+        return { rawFrontmatter: '', body: markdown, trailing: '' };
+    }
+    const firstNewline = markdown.indexOf('\n');
+    if (firstNewline === -1) {
+        return { rawFrontmatter: '', body: markdown, trailing: '' };
+    }
+    let cursor = firstNewline + 1;
+    while (cursor < markdown.length) {
+        const lineEnd = markdown.indexOf('\n', cursor);
+        const lineRawEnd = lineEnd === -1 ? markdown.length : lineEnd;
+        const line = markdown.slice(cursor, lineRawEnd).replace(/\r$/, '');
+        if (line === '---') {
+            const frontmatterEnd = lineEnd === -1 ? markdown.length : lineEnd + 1;
+            return {
+                rawFrontmatter: markdown.slice(0, frontmatterEnd),
+                body: markdown.slice(frontmatterEnd),
+                trailing: '',
+            };
+        }
+        if (lineEnd === -1) {
+            break;
+        }
+        cursor = lineEnd + 1;
+    }
+    return { rawFrontmatter: '', body: markdown, trailing: '' };
+}
+function replaceEnvelopeBody(envelope, body) {
+    return `${envelope.rawFrontmatter}${body}${envelope.trailing}`;
+}
+function $getActiveMarkdownTableContext() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) && !$isTableSelection(selection)) {
+        return null;
+    }
+    const cellNode = $getTableCellNodeFromLexicalNode(selection.focus.getNode()) ??
+        $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+    if (cellNode === null) {
+        return null;
+    }
+    const rowNode = cellNode.getParent();
+    const tableNode = rowNode?.getParent();
+    if (!$isTableRowNode(rowNode) || !$isTableNode(tableNode)) {
+        return null;
+    }
+    const rowIndex = getChildNodeIndex(tableNode, rowNode);
+    const columnIndex = getChildNodeIndex(rowNode, cellNode);
+    if (rowIndex < 0 || columnIndex < 0) {
+        return null;
+    }
+    return {
+        tableNode,
+        rowIndex,
+        columnIndex,
+        rowCount: getTableRowNodes(tableNode).length,
+        columnCount: getMarkdownTableColumnCount(tableNode),
+    };
+}
+function $applyMarkdownTableActionAt(tableNode, action, rowIndex, columnIndex) {
+    $normalizeSimpleMarkdownTableShape(tableNode);
+    const rowNodes = getTableRowNodes(tableNode);
+    const rowCount = rowNodes.length;
+    const columnCount = getMarkdownTableColumnCount(tableNode);
+    const safeRowIndex = clampIndex(rowIndex, rowCount);
+    const safeColumnIndex = clampIndex(columnIndex, columnCount);
+    if (action === 'insert-row') {
+        const targetRow = rowNodes[safeRowIndex];
+        if (!$isTableRowNode(targetRow)) {
+            return false;
+        }
+        const insertedRow = $createEmptyMarkdownTableRow(columnCount);
+        targetRow.insertAfter(insertedRow);
+        $normalizeSimpleMarkdownTableShape(tableNode);
+        $selectMarkdownTableCell(tableNode, safeRowIndex + 1, safeColumnIndex);
+        return true;
+    }
+    if (action === 'insert-column') {
+        rowNodes.forEach((rowNode, currentRowIndex) => {
+            const cellNode = rowNode.getChildAtIndex(safeColumnIndex);
+            const nextCell = $createEmptyMarkdownTableCell(currentRowIndex === 0 ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS);
+            if ($isTableCellNode(cellNode)) {
+                cellNode.insertAfter(nextCell);
+            }
+            else {
+                rowNode.append(nextCell);
+            }
+        });
+        $normalizeSimpleMarkdownTableShape(tableNode);
+        $selectMarkdownTableCell(tableNode, safeRowIndex, safeColumnIndex + 1);
+        return true;
+    }
+    if (action === 'delete-row') {
+        if (rowCount <= 1) {
+            return false;
+        }
+        rowNodes[safeRowIndex]?.remove();
+        $normalizeSimpleMarkdownTableShape(tableNode);
+        $selectMarkdownTableCell(tableNode, Math.min(safeRowIndex, rowCount - 2), safeColumnIndex);
+        return true;
+    }
+    if (columnCount <= 1) {
+        return false;
+    }
+    rowNodes.forEach((rowNode) => {
+        const cellNode = rowNode.getChildAtIndex(safeColumnIndex);
+        if ($isTableCellNode(cellNode)) {
+            cellNode.remove();
+        }
+    });
+    $normalizeSimpleMarkdownTableShape(tableNode);
+    $selectMarkdownTableCell(tableNode, safeRowIndex, Math.min(safeColumnIndex, columnCount - 2));
+    return true;
+}
+function $createMarkdownTableNode(rows) {
+    const columnCount = Math.max(1, rows[0]?.length ?? 1);
+    const tableNode = $createTableNode();
+    rows.forEach((row, rowIndex) => {
+        const rowNode = $createTableRowNode();
+        const normalizedRow = normalizeMarkdownTableRow(row, columnCount);
+        normalizedRow.forEach((cellText) => {
+            const cellNode = $createTableCellNode(rowIndex === 0 ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS);
+            const paragraphNode = $createParagraphNode();
+            paragraphNode.append($createTextNode(cellText));
+            cellNode.append(paragraphNode);
+            rowNode.append(cellNode);
+        });
+        tableNode.append(rowNode);
+    });
+    return tableNode;
+}
+function $createEmptyMarkdownTableRow(columnCount) {
+    const rowNode = $createTableRowNode();
+    for (let index = 0; index < Math.max(1, columnCount); index += 1) {
+        rowNode.append($createEmptyMarkdownTableCell(TableCellHeaderStates.NO_STATUS));
+    }
+    return rowNode;
+}
+function $createEmptyMarkdownTableCell(headerState) {
+    const cellNode = $createTableCellNode(headerState);
+    cellNode.append($createParagraphNode());
+    return cellNode;
+}
+function $normalizeSimpleMarkdownTableShape(tableNode) {
+    const rowNodes = getTableRowNodes(tableNode);
+    const columnCount = Math.max(1, getMarkdownTableColumnCount(tableNode));
+    rowNodes.forEach((rowNode, rowIndex) => {
+        while (rowNode.getChildrenSize() < columnCount) {
+            rowNode.append($createEmptyMarkdownTableCell(rowIndex === 0 ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS));
+        }
+        rowNode.getChildren().forEach((cellNode, columnIndex) => {
+            if (!$isTableCellNode(cellNode)) {
+                return;
+            }
+            if (columnIndex >= columnCount) {
+                cellNode.remove();
+                return;
+            }
+            cellNode.setHeaderStyles(rowIndex === 0 ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS, TableCellHeaderStates.BOTH);
+        });
+    });
+}
+function getTableRowNodes(tableNode) {
+    return tableNode.getChildren().filter($isTableRowNode);
+}
+function getMarkdownTableColumnCount(tableNode) {
+    return Math.max(0, ...getTableRowNodes(tableNode).map((rowNode) => rowNode.getChildrenSize()));
+}
+function getChildNodeIndex(parentNode, childNode) {
+    return parentNode.getChildren().findIndex((node) => node.is(childNode));
+}
+function $selectMarkdownTableCell(tableNode, rowIndex, columnIndex) {
+    const rowNode = getTableRowNodes(tableNode)[rowIndex];
+    if (!$isTableRowNode(rowNode)) {
+        return;
+    }
+    const cellNode = rowNode.getChildAtIndex(columnIndex);
+    if ($isTableCellNode(cellNode)) {
+        cellNode.selectStart();
+    }
+}
+function clampIndex(index, length) {
+    if (length <= 0) {
+        return 0;
+    }
+    return Math.min(Math.max(index, 0), length - 1);
+}
+function formatMermaidRenderError(cause) {
+    const rawMessage = cause instanceof Error ? cause.message : String(cause);
+    const firstLine = rawMessage
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .find((line) => line.length > 0 && !/^mermaid version/i.test(line));
+    return `Mermaid diagram could not render${firstLine ? `: ${firstLine}` : '.'}`;
+}
+function isMarkdownTableRowLine(line) {
+    return /^ {0,3}\|.*\|\s*$/.test(line);
+}
+function isMarkdownTableSeparatorLine(line) {
+    if (!isMarkdownTableRowLine(line)) {
+        return false;
+    }
+    const cells = parseMarkdownTableRow(line);
+    return cells.length > 0 && cells.every((cell) => /^:?-{3,}:?$/.test(cell.replace(/\s/g, '')));
+}
+function parseMarkdownTableRow(line) {
+    const trimmed = line.trim();
+    const inner = trimmed.startsWith('|') && trimmed.endsWith('|')
+        ? trimmed.slice(1, -1)
+        : trimmed;
+    const cells = [];
+    let current = '';
+    let escaped = false;
+    for (const character of inner) {
+        if (escaped) {
+            current += character === '|' ? character : `\\${character}`;
+            escaped = false;
+            continue;
+        }
+        if (character === '\\') {
+            escaped = true;
+            continue;
+        }
+        if (character === '|') {
+            cells.push(normalizeMarkdownTableCell(current));
+            current = '';
+            continue;
+        }
+        current += character;
+    }
+    if (escaped) {
+        current += '\\';
+    }
+    cells.push(normalizeMarkdownTableCell(current));
+    return cells;
+}
+function normalizeMarkdownTableRow(row, columnCount) {
+    if (row.length === columnCount) {
+        return row;
+    }
+    if (row.length > columnCount) {
+        return row.slice(0, columnCount);
+    }
+    return [...row, ...Array.from({ length: columnCount - row.length }, () => '')];
+}
+function normalizeMarkdownTableCell(cell) {
+    return cell.trim().replace(/\s+/g, ' ');
+}
+function formatMarkdownTableNode(tableNode) {
+    const rows = getTableNodeRows(tableNode);
+    if (rows.length === 0) {
+        return '';
+    }
+    const columnCount = Math.max(...rows.map((row) => row.length), 1);
+    const normalizedRows = rows.map((row) => normalizeMarkdownTableRow(row, columnCount));
+    const [headerRow = []] = normalizedRows;
+    const delimiterRow = Array.from({ length: columnCount }, () => '---');
+    return [
+        formatMarkdownTableRow(headerRow),
+        formatMarkdownTableRow(delimiterRow),
+        ...normalizedRows.slice(1).map(formatMarkdownTableRow),
+    ].join('\n');
+}
+function getTableNodeRows(tableNode) {
+    return tableNode.getChildren().flatMap((rowNode) => {
+        if (!$isTableRowNode(rowNode)) {
+            return [];
+        }
+        return [
+            rowNode.getChildren().flatMap((cellNode) => {
+                if (!$isTableCellNode(cellNode)) {
+                    return [];
+                }
+                return [formatMarkdownTableCellText(cellNode)];
+            }),
+        ];
+    });
+}
+function formatMarkdownTableRow(cells) {
+    return `| ${cells.map(escapeMarkdownTableCell).join(' | ')} |`;
+}
+function formatMarkdownTableCellText(cellNode) {
+    return cellNode
+        .getChildren()
+        .map((child) => child.getTextContent())
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+function escapeMarkdownTableCell(cell) {
+    return cell.replace(/\r?\n/g, ' ').replace(/\|/g, '\\|').trim();
+}
+function formatImageMarkdown(image) {
+    const alt = escapeMarkdownAttribute(image.alt ?? '');
+    const src = escapeMarkdownAttribute(image.src);
+    const title = image.title?.trim();
+    return title ? `![${alt}](${src} "${escapeMarkdownAttribute(title)}")` : `![${alt}](${src})`;
+}
+function escapeMarkdownAttribute(value) {
+    return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\]/g, '\\]');
+}
+function unescapeMarkdownAttribute(value) {
+    return value.replace(/\\(["\\\]])/g, '$1');
+}
+const lexicalTheme = {
+    paragraph: 'me-wysiwyg-paragraph',
+    heading: {
+        h1: 'me-wysiwyg-heading me-wysiwyg-heading-1',
+        h2: 'me-wysiwyg-heading me-wysiwyg-heading-2',
+        h3: 'me-wysiwyg-heading me-wysiwyg-heading-3',
+        h4: 'me-wysiwyg-heading me-wysiwyg-heading-4',
+        h5: 'me-wysiwyg-heading me-wysiwyg-heading-5',
+        h6: 'me-wysiwyg-heading me-wysiwyg-heading-6',
+    },
+    list: {
+        ul: 'me-wysiwyg-list',
+        ol: 'me-wysiwyg-list',
+        checklist: 'me-wysiwyg-check-list',
+        listitem: 'me-wysiwyg-list-item',
+        listitemChecked: 'me-wysiwyg-list-item-checked',
+        listitemUnchecked: 'me-wysiwyg-list-item-unchecked',
+    },
+    quote: 'me-wysiwyg-quote',
+    code: 'me-wysiwyg-code',
+    table: 'me-wysiwyg-table',
+    tableCell: 'me-wysiwyg-table-cell',
+    tableCellHeader: 'me-wysiwyg-table-cell-header',
+    tableCellSelected: 'me-wysiwyg-table-cell-selected',
+    tableRow: 'me-wysiwyg-table-row',
+    tableScrollableWrapper: 'me-wysiwyg-table-scroll',
+    tableSelection: 'me-wysiwyg-table-selection',
+    codeHighlight: {
+        atrule: 'me-wysiwyg-token-atrule',
+        attr: 'me-wysiwyg-token-attr-name',
+        'attr-name': 'me-wysiwyg-token-attr-name',
+        'attr-value': 'me-wysiwyg-token-attr-value',
+        boolean: 'me-wysiwyg-token-boolean',
+        builtin: 'me-wysiwyg-token-builtin',
+        cdata: 'me-wysiwyg-token-cdata',
+        char: 'me-wysiwyg-token-char',
+        class: 'me-wysiwyg-token-class-name',
+        'class-name': 'me-wysiwyg-token-class-name',
+        comment: 'me-wysiwyg-token-comment',
+        constant: 'me-wysiwyg-token-constant',
+        deleted: 'me-wysiwyg-token-deleted',
+        doctype: 'me-wysiwyg-token-doctype',
+        entity: 'me-wysiwyg-token-entity',
+        function: 'me-wysiwyg-token-function',
+        important: 'me-wysiwyg-token-important',
+        inserted: 'me-wysiwyg-token-inserted',
+        keyword: 'me-wysiwyg-token-keyword',
+        namespace: 'me-wysiwyg-token-namespace',
+        number: 'me-wysiwyg-token-number',
+        operator: 'me-wysiwyg-token-operator',
+        prolog: 'me-wysiwyg-token-prolog',
+        property: 'me-wysiwyg-token-property',
+        punctuation: 'me-wysiwyg-token-punctuation',
+        regex: 'me-wysiwyg-token-regex',
+        selector: 'me-wysiwyg-token-selector',
+        string: 'me-wysiwyg-token-string',
+        symbol: 'me-wysiwyg-token-symbol',
+        tag: 'me-wysiwyg-token-tag',
+        url: 'me-wysiwyg-token-url',
+        variable: 'me-wysiwyg-token-variable',
+    },
+    link: 'me-wysiwyg-link',
+    text: {
+        bold: 'me-wysiwyg-text-bold',
+        italic: 'me-wysiwyg-text-italic',
+        code: 'me-wysiwyg-text-code',
+    },
+};
+//# sourceMappingURL=index.js.map