@datalayer/lexical-loro 1.0.2 → 1.0.5

package/lib/plugins/DebugPlugin/index.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { $getRoot, $createTextNode, $createParagraphNode } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+export function DebugPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [mcpTools, setMcpTools] = useState([]);
+    const [selectedTool, setSelectedTool] = useState('');
+    const [isLoadingTools, setIsLoadingTools] = useState(false);
+    const [toolsError, setToolsError] = useState(null);
+    const getCurrentCollabDocId = () => {
+        const params = new URLSearchParams(window.location.search);
+        return params.get('collabId') || 'main';
+    };
+    const isInSplitScreen = () => {
+        try {
+            return window.parent != null && window.parent.location.pathname === '/split/';
+        }
+        catch {
+            return false;
+        }
+    };
+    const navigateToRoom = (roomId, collabId) => {
+        const url = new URL(window.location.href);
+        url.searchParams.set('roomId', roomId);
+        url.searchParams.set('collabId', collabId);
+        if (isInSplitScreen()) {
+            window.parent.location.href = `/split/${url.search}`;
+            return;
+        }
+        window.location.href = `${url.pathname}${url.search}`;
+    };
+    const createNewRoomWithDocument = async () => {
+        const roomId = Date.now().toString(36);
+        const collabId = `room-${roomId}`;
+        const seedText = `New room ${roomId} created at ${new Date().toISOString()}`;
+        try {
+            const response = await fetch('http://localhost:3001/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    jsonrpc: '2.0',
+                    id: Date.now(),
+                    method: 'append_paragraph',
+                    params: {
+                        doc_id: collabId,
+                        text: seedText,
+                    },
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            if (data.error) {
+                throw new Error(typeof data.error === 'string' ? data.error : JSON.stringify(data.error));
+            }
+            console.log('Created new room document:', collabId, data.result || data);
+        }
+        catch (error) {
+            console.warn('Unable to seed room via MCP, continuing with room navigation:', error);
+        }
+        navigateToRoom(roomId, collabId);
+    };
+    // Fetch available MCP tools from the server
+    const fetchMCPTools = async () => {
+        setIsLoadingTools(true);
+        setToolsError(null);
+        try {
+            // Query the MCP server for available tools
+            const response = await fetch('http://localhost:3001/tools/list', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            if (data.tools) {
+                const tools = data.tools.map((tool) => ({
+                    name: tool.name,
+                    description: tool.description || '',
+                    parameters: tool.parameters || {}
+                }));
+                setMcpTools(tools);
+                console.log('Fetched MCP tools:', tools);
+            }
+            else {
+                throw new Error('Invalid response format from MCP server');
+            }
+        }
+        catch (error) {
+            console.error('Error fetching MCP tools:', error);
+            setToolsError(error instanceof Error ? error.message : 'Unknown error occurred');
+            // Set some mock tools for development
+            setMcpTools([
+                { name: 'create_file', description: 'Create a new file in the workspace' },
+                { name: 'read_file', description: 'Read contents of a file' },
+                { name: 'list_dir', description: 'List directory contents' }
+            ]);
+        }
+        finally {
+            setIsLoadingTools(false);
+        }
+    };
+    // MCP tool execution functions
+    const executeGetDocument = async () => {
+        try {
+            console.log('🔍 Executing get_document MCP tool...');
+            const response = await fetch('http://localhost:3001/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    jsonrpc: '2.0',
+                    id: Date.now(),
+                    method: 'get_document',
+                    params: {
+                        doc_id: getCurrentCollabDocId()
+                    }
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('📄 get_document result:', data);
+            if (data.result) {
+                console.log('✅ Document retrieved successfully:', data.result);
+            }
+            else if (data.error) {
+                console.error('❌ MCP error:', data.error);
+            }
+        }
+        catch (error) {
+            console.error('💥 Error executing get_document:', error);
+        }
+    };
+    const executeAppendParagraph = async () => {
+        try {
+            const timestamp = new Date().toISOString();
+            const paragraphText = `New paragraph added at via MCP at ${timestamp}`;
+            console.log('✏️ Executing append_paragraph MCP tool with text:', paragraphText);
+            const response = await fetch('http://localhost:3001/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    jsonrpc: '2.0',
+                    id: Date.now(),
+                    method: 'append_paragraph',
+                    params: {
+                        doc_id: getCurrentCollabDocId(),
+                        text: paragraphText
+                    }
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('📝 append_paragraph result:', data);
+            if (data.result) {
+                console.log('✅ Paragraph appended successfully:', data.result);
+            }
+            else if (data.error) {
+                console.error('❌ MCP error:', data.error);
+            }
+        }
+        catch (error) {
+            console.error('💥 Error executing append_paragraph:', error);
+        }
+    };
+    // Handle tool selection and execution
+    const handleToolChange = (toolName) => {
+        if (toolName === '') {
+            setSelectedTool('');
+            return;
+        }
+        setSelectedTool(toolName);
+        if (toolName === 'get_document') {
+            executeGetDocument();
+        }
+        else if (toolName === 'append_paragraph') {
+            executeAppendParagraph();
+        }
+        // Reset selection back to "Select a tool" after execution
+        setTimeout(() => {
+            setSelectedTool('');
+        }, 100);
+    };
+    // Set hardcoded tools instead of fetching from server
+    useEffect(() => {
+        const hardcodedTools = [
+            {
+                name: 'get_document',
+                description: 'Get document',
+                parameters: {}
+            },
+            {
+                name: 'append_paragraph',
+                description: 'Append paragraph',
+                parameters: {}
+            }
+        ];
+        setMcpTools(hardcodedTools);
+        console.log('🔧 Hardcoded MCP tools loaded:', hardcodedTools);
+    }, []);
+    const reloadState = (editor) => {
+        const state = editor.getEditorState();
+        // JSON needs to be parsed to load an new state.
+        const newEditorState = editor.parseEditorState(JSON.stringify(state));
+        editor.update(() => {
+            //      editor.setEditorState(state);
+            editor.setEditorState(newEditorState);
+        });
+        console.log(editor.getEditorState().toJSON());
+    };
+    function addParagraph(editor) {
+        editor.update(() => {
+            const root = $getRoot();
+            const timestamp = new Date().toISOString();
+            const textNode = $createTextNode(`Hello ${timestamp}`);
+            const paragraphNode = $createParagraphNode();
+            paragraphNode.append(textNode);
+            // Insert the paragraph at the beginning of the editor
+            const firstChild = root.getFirstChild();
+            if (firstChild) {
+                firstChild.insertBefore(paragraphNode);
+            }
+            else {
+                root.append(paragraphNode);
+            }
+        });
+    }
+    function first100Keys(editor) {
+        editor.getEditorState().read(() => {
+            const root = $getRoot();
+            const children = root.getChildren();
+            const keys = [];
+            // Get up to 100 node keys
+            const maxNodes = Math.min(100, children.length);
+            for (let i = 0; i < maxNodes; i++) {
+                keys.push(children[i].getKey());
+            }
+            console.log(`First ${keys.length} node keys:`, keys);
+        });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => { reloadState(editor); }, children: "Reload State" }), _jsx("button", { onClick: () => { void createNewRoomWithDocument(); }, children: "Create New Room" }), _jsx("button", { onClick: () => { addParagraph(editor); }, children: "Add Paragraph" }), _jsx("button", { onClick: () => { first100Keys(editor); }, children: "100 First keys" }), _jsxs("div", { style: { marginLeft: '10px', display: 'inline-block' }, children: [_jsx("label", { htmlFor: "mcp-tools-select", style: { marginRight: '5px', fontSize: '12px' }, children: "MCP Tools:" }), _jsxs("select", { id: "mcp-tools-select", value: selectedTool, onChange: (e) => handleToolChange(e.target.value), disabled: isLoadingTools, style: {
+                            padding: '4px 8px',
+                            borderRadius: '4px',
+                            border: '1px solid #ccc',
+                            minWidth: '150px',
+                            fontSize: '12px'
+                        }, children: [_jsx("option", { value: "", children: isLoadingTools ? 'Loading tools...' : 'Select a tool' }), mcpTools.map((tool) => (_jsxs("option", { value: tool.name, children: [tool.name, " ", tool.description ? `- ${tool.description}` : ''] }, tool.name)))] }), toolsError && (_jsxs("span", { style: {
+                            marginLeft: '10px',
+                            color: 'red',
+                            fontSize: '12px'
+                        }, children: ["Error: ", toolsError] })), _jsx("button", { onClick: fetchMCPTools, disabled: isLoadingTools, style: {
+                            marginLeft: '5px',
+                            padding: '4px 8px',
+                            fontSize: '12px'
+                        }, children: "\uD83D\uDD04 Refresh" }), selectedTool && (_jsx("span", { style: {
+                            marginLeft: '10px',
+                            color: 'green',
+                            fontSize: '12px'
+                        }, children: selectedTool }))] })] }));
+}
+export default DebugPlugin;

package/lib/plugins/DocsPlugin/index.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export default function DocsPlugin(): JSX.Element;

package/lib/plugins/DocsPlugin/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DocsPlugin() {
+    return (_jsx("a", { target: "__blank", href: "https://lexical.dev/docs/intro", children: _jsx("button", { id: "docs-button", className: "editor-dev-button", title: "Lexical Docs" }) }));
+}

package/lib/plugins/DragDropPastePlugin/index.d.ts

@@ -0,0 +1 @@
+export default function DragDropPaste(): null;

package/lib/plugins/DragDropPastePlugin/index.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { DRAG_DROP_PASTE } from '@lexical/rich-text';
+import { isMimeType, mediaFileReader } from '@lexical/utils';
+import { COMMAND_PRIORITY_LOW } from 'lexical';
+import { useEffect } from 'react';
+import { INSERT_IMAGE_COMMAND } from '../ImagesPlugin';
+const ACCEPTABLE_IMAGE_TYPES = [
+    'image/',
+    'image/heic',
+    'image/heif',
+    'image/gif',
+    'image/webp',
+];
+export default function DragDropPaste() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(DRAG_DROP_PASTE, (files) => {
+            (async () => {
+                const filesResult = await mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x));
+                for (const { file, result } of filesResult) {
+                    if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
+                        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                            altText: file.name,
+                            src: result,
+                        });
+                    }
+                }
+            })();
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return null;
+}

package/lib/plugins/DraggableBlockPlugin/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+import './index.css';
+export default function DraggableBlockPlugin({ anchorElem, }: {
+    anchorElem?: HTMLElement;
+}): JSX.Element;

package/lib/plugins/DraggableBlockPlugin/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { DraggableBlockPlugin_EXPERIMENTAL } from '@lexical/react/LexicalDraggableBlockPlugin';
+import { $createParagraphNode, $getNearestNodeFromDOMNode } from 'lexical';
+import { useRef, useState } from 'react';
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
+function isOnMenu(element) {
+    return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+}
+export default function DraggableBlockPlugin({ anchorElem = document.body, }) {
+    const [editor] = useLexicalComposerContext();
+    const menuRef = useRef(null);
+    const targetLineRef = useRef(null);
+    const [draggableElement, setDraggableElement] = useState(null);
+    function insertBlock(e) {
+        if (!draggableElement || !editor) {
+            return;
+        }
+        editor.update(() => {
+            const node = $getNearestNodeFromDOMNode(draggableElement);
+            if (!node) {
+                return;
+            }
+            const pNode = $createParagraphNode();
+            if (e.altKey || e.ctrlKey) {
+                node.insertBefore(pNode);
+            }
+            else {
+                node.insertAfter(pNode);
+            }
+            pNode.select();
+        });
+    }
+    return (_jsx(DraggableBlockPlugin_EXPERIMENTAL, { anchorElem: anchorElem, menuRef: menuRef, targetLineRef: targetLineRef, menuComponent: _jsxs("div", { ref: menuRef, className: "icon draggable-block-menu", children: [_jsx("button", { title: "Click to add below", className: "icon icon-plus", onClick: insertBlock }), _jsx("div", { className: "icon" })] }), targetLineComponent: _jsx("div", { ref: targetLineRef, className: "draggable-block-target-line" }), isOnMenu: isOnMenu, onElementChanged: setDraggableElement }));
+}

package/lib/plugins/EmojiPickerPlugin/index.d.ts

@@ -0,0 +1 @@
+export default function EmojiPickerPlugin(): import("react/jsx-runtime").JSX.Element;

package/lib/plugins/EmojiPickerPlugin/index.js

@@ -0,0 +1,84 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch, } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { $createTextNode, $getSelection, $isRangeSelection, } from 'lexical';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+class EmojiOption extends MenuOption {
+    title;
+    emoji;
+    keywords;
+    constructor(title, emoji, options) {
+        super(title);
+        this.title = title;
+        this.emoji = emoji;
+        this.keywords = options.keywords || [];
+    }
+}
+function EmojiMenuItem({ index, isSelected, onClick, onMouseEnter, option, }) {
+    let className = 'item';
+    if (isSelected) {
+        className += ' selected';
+    }
+    return (_jsx("li", { tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onClick: onClick, children: _jsxs("span", { className: "text", children: [option.emoji, " ", option.title] }) }, option.key));
+}
+const MAX_EMOJI_SUGGESTION_COUNT = 10;
+export default function EmojiPickerPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [queryString, setQueryString] = useState(null);
+    const [emojis, setEmojis] = useState([]);
+    useEffect(() => {
+        import('../../utils/emoji-list').then((file) => setEmojis(file.default));
+    }, []);
+    const emojiOptions = useMemo(() => emojis != null
+        ? emojis.map(({ emoji, aliases, tags }) => new EmojiOption(aliases[0], emoji, {
+            keywords: [...aliases, ...tags],
+        }))
+        : [], [emojis]);
+    const checkForTriggerMatch = useBasicTypeaheadTriggerMatch(':', {
+        minLength: 0,
+        punctuation: '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\[\\]\\\\/!%\'"~=<>:;', // allow _ and -
+    });
+    const options = useMemo(() => {
+        return emojiOptions
+            .filter((option) => {
+            return queryString != null
+                ? new RegExp(queryString, 'gi').exec(option.title) ||
+                    option.keywords != null
+                    ? option.keywords.some((keyword) => new RegExp(queryString, 'gi').exec(keyword))
+                    : false
+                : emojiOptions;
+        })
+            .slice(0, MAX_EMOJI_SUGGESTION_COUNT);
+    }, [emojiOptions, queryString]);
+    const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection) || selectedOption == null) {
+                return;
+            }
+            if (nodeToRemove) {
+                nodeToRemove.remove();
+            }
+            selection.insertNodes([$createTextNode(selectedOption.emoji)]);
+            closeMenu();
+        });
+    }, [editor]);
+    return (_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+            if (anchorElementRef.current == null || options.length === 0) {
+                return null;
+            }
+            return anchorElementRef.current && options.length
+                ? ReactDOM.createPortal(_jsx("div", { className: "typeahead-popover emoji-menu", children: _jsx("ul", { children: options.map((option, index) => (_jsx(EmojiMenuItem, { index: index, isSelected: selectedIndex === index, onClick: () => {
+                                setHighlightedIndex(index);
+                                selectOptionAndCleanUp(option);
+                            }, onMouseEnter: () => {
+                                setHighlightedIndex(index);
+                            }, option: option }, option.key))) }) }), anchorElementRef.current)
+                : null;
+        } }));
+}

package/lib/plugins/EmojisPlugin/index.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export default function EmojisPlugin(): JSX.Element | null;

package/lib/plugins/EmojisPlugin/index.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { TextNode } from 'lexical';
+import { useEffect } from 'react';
+import { $createEmojiNode, EmojiNode } from '../../nodes/EmojiNode';
+const emojis = new Map([
+    [':)', ['emoji happysmile', '🙂']],
+    [':D', ['emoji veryhappysmile', '😀']],
+    [':(', ['emoji unhappysmile', '🙁']],
+    ['<3', ['emoji heart', '❤']],
+]);
+function $findAndTransformEmoji(node) {
+    const text = node.getTextContent();
+    for (let i = 0; i < text.length; i++) {
+        const emojiData = emojis.get(text[i]) || emojis.get(text.slice(i, i + 2));
+        if (emojiData !== undefined) {
+            const [emojiStyle, emojiText] = emojiData;
+            let targetNode;
+            if (i === 0) {
+                [targetNode] = node.splitText(i + 2);
+            }
+            else {
+                [, targetNode] = node.splitText(i, i + 2);
+            }
+            const emojiNode = $createEmojiNode(emojiStyle, emojiText);
+            targetNode.replace(emojiNode);
+            return emojiNode;
+        }
+    }
+    return null;
+}
+function $textNodeTransform(node) {
+    let targetNode = node;
+    while (targetNode !== null) {
+        if (!targetNode.isSimpleText()) {
+            return;
+        }
+        targetNode = $findAndTransformEmoji(targetNode);
+    }
+}
+function useEmojis(editor) {
+    useEffect(() => {
+        if (!editor.hasNodes([EmojiNode])) {
+            throw new Error('EmojisPlugin: EmojiNode not registered on editor');
+        }
+        return editor.registerNodeTransform(TextNode, $textNodeTransform);
+    }, [editor]);
+}
+export default function EmojisPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEmojis(editor);
+    return null;
+}

package/lib/plugins/EquationsPlugin/index.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from 'react';
+import 'katex/dist/katex.css';
+import { LexicalCommand, LexicalEditor } from 'lexical';
+type CommandPayload = {
+    equation: string;
+    inline: boolean;
+};
+export declare const INSERT_EQUATION_COMMAND: LexicalCommand<CommandPayload>;
+export declare function InsertEquationDialog({ activeEditor, onClose, }: {
+    activeEditor: LexicalEditor;
+    onClose: () => void;
+}): JSX.Element;
+export default function EquationsPlugin(): JSX.Element | null;
+export {};

package/lib/plugins/EquationsPlugin/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'katex/dist/katex.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement } from '@lexical/utils';
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { useCallback, useEffect } from 'react';
+import { $createEquationNode, EquationNode } from '../../nodes/EquationNode';
+import KatexEquationAlterer from '../../ui/KatexEquationAlterer';
+export const INSERT_EQUATION_COMMAND = createCommand('INSERT_EQUATION_COMMAND');
+export function InsertEquationDialog({ activeEditor, onClose, }) {
+    const onEquationConfirm = useCallback((equation, inline) => {
+        activeEditor.dispatchCommand(INSERT_EQUATION_COMMAND, { equation, inline });
+        onClose();
+    }, [activeEditor, onClose]);
+    return _jsx(KatexEquationAlterer, { onConfirm: onEquationConfirm });
+}
+export default function EquationsPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([EquationNode])) {
+            throw new Error('EquationsPlugins: EquationsNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_EQUATION_COMMAND, (payload) => {
+            const { equation, inline } = payload;
+            const equationNode = $createEquationNode(equation, inline);
+            $insertNodes([equationNode]);
+            if ($isRootOrShadowRoot(equationNode.getParentOrThrow())) {
+                $wrapNodeInElement(equationNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/plugins/ExcalidrawPlugin/index.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+import '@excalidraw/excalidraw/index.css';
+import { LexicalCommand } from 'lexical';
+export declare const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<void>;
+export default function ExcalidrawPlugin(): JSX.Element | null;

package/lib/plugins/ExcalidrawPlugin/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@excalidraw/excalidraw/index.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement } from '@lexical/utils';
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { useEffect, useState } from 'react';
+import { $createExcalidrawNode, ExcalidrawNode, } from '../../nodes/ExcalidrawNode';
+import ExcalidrawModal from '../../ui/ExcalidrawModal';
+export const INSERT_EXCALIDRAW_COMMAND = createCommand('INSERT_EXCALIDRAW_COMMAND');
+export default function ExcalidrawPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [isModalOpen, setModalOpen] = useState(false);
+    useEffect(() => {
+        if (!editor.hasNodes([ExcalidrawNode])) {
+            throw new Error('ExcalidrawPlugin: ExcalidrawNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_EXCALIDRAW_COMMAND, () => {
+            setModalOpen(true);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    const onClose = () => {
+        setModalOpen(false);
+    };
+    const onDelete = () => {
+        setModalOpen(false);
+    };
+    const onSave = (elements, appState, files) => {
+        editor.update(() => {
+            const excalidrawNode = $createExcalidrawNode();
+            excalidrawNode.setData(JSON.stringify({
+                appState,
+                elements,
+                files,
+            }));
+            $insertNodes([excalidrawNode]);
+            if ($isRootOrShadowRoot(excalidrawNode.getParentOrThrow())) {
+                $wrapNodeInElement(excalidrawNode, $createParagraphNode).selectEnd();
+            }
+        });
+        setModalOpen(false);
+    };
+    return isModalOpen ? (_jsx(ExcalidrawModal, { initialElements: [], initialAppState: {}, initialFiles: {}, isShown: isModalOpen, onDelete: onDelete, onClose: onClose, onSave: onSave, closeOnClickOutside: false })) : null;
+}

package/lib/plugins/FigmaPlugin/index.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import { LexicalCommand } from 'lexical';
+export declare const INSERT_FIGMA_COMMAND: LexicalCommand<string>;
+export default function FigmaPlugin(): JSX.Element | null;

package/lib/plugins/FigmaPlugin/index.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { useEffect } from 'react';
+import { $createFigmaNode, FigmaNode } from '../../nodes/FigmaNode';
+export const INSERT_FIGMA_COMMAND = createCommand('INSERT_FIGMA_COMMAND');
+export default function FigmaPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([FigmaNode])) {
+            throw new Error('FigmaPlugin: FigmaNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_FIGMA_COMMAND, (payload) => {
+            const figmaNode = $createFigmaNode(payload);
+            $insertNodeToNearestRoot(figmaNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}