@datalayer/lexical-loro 0.0.7 → 0.1.0

package/lib/plugins/ComponentPickerPlugin/index.js

@@ -0,0 +1,276 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { $createCodeNode } from '@lexical/code';
+import { INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from '@lexical/list';
+import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch, } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { INSERT_TABLE_COMMAND } from '@lexical/table';
+import { $createParagraphNode, $getSelection, $isRangeSelection, FORMAT_ELEMENT_COMMAND, } from 'lexical';
+import { useCallback, useMemo, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import useModal from '../../hooks/useModal';
+import catTypingGif from '../../images/cat-typing.gif';
+import { EmbedConfigs } from '../AutoEmbedPlugin';
+import { INSERT_COLLAPSIBLE_COMMAND } from '../CollapsiblePlugin';
+import { INSERT_DATETIME_COMMAND } from '../DateTimePlugin';
+import { InsertEquationDialog } from '../EquationsPlugin';
+import { INSERT_EXCALIDRAW_COMMAND } from '../ExcalidrawPlugin';
+import { INSERT_IMAGE_COMMAND, InsertImageDialog } from '../ImagesPlugin';
+import InsertLayoutDialog from '../LayoutPlugin/InsertLayoutDialog';
+import { INSERT_PAGE_BREAK } from '../PageBreakPlugin';
+import { InsertPollDialog } from '../PollPlugin';
+import { InsertTableDialog } from '../TablePlugin';
+class ComponentPickerOption extends MenuOption {
+    // What shows up in the editor
+    title;
+    // Icon for display
+    icon;
+    // For extra searching.
+    keywords;
+    // TBD
+    keyboardShortcut;
+    // What happens when you select this option?
+    onSelect;
+    constructor(title, options) {
+        super(title);
+        this.title = title;
+        this.keywords = options.keywords || [];
+        this.icon = options.icon;
+        this.keyboardShortcut = options.keyboardShortcut;
+        this.onSelect = options.onSelect.bind(this);
+    }
+}
+function ComponentPickerMenuItem({ index, isSelected, onClick, onMouseEnter, option, }) {
+    let className = 'item';
+    if (isSelected) {
+        className += ' selected';
+    }
+    return (_jsxs("li", { tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onClick: onClick, children: [option.icon, _jsx("span", { className: "text", children: option.title })] }, option.key));
+}
+function getDynamicOptions(editor, queryString) {
+    const options = [];
+    if (queryString == null) {
+        return options;
+    }
+    const tableMatch = queryString.match(/^([1-9]\d?)(?:x([1-9]\d?)?)?$/);
+    if (tableMatch !== null) {
+        const rows = tableMatch[1];
+        const colOptions = tableMatch[2]
+            ? [tableMatch[2]]
+            : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(String);
+        options.push(...colOptions.map((columns) => new ComponentPickerOption(`${rows}x${columns} Table`, {
+            icon: _jsx("i", { className: "icon table" }),
+            keywords: ['table'],
+            onSelect: () => editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
+        })));
+    }
+    return options;
+}
+function getBaseOptions(editor, showModal) {
+    return [
+        new ComponentPickerOption('Paragraph', {
+            icon: _jsx("i", { className: "icon paragraph" }),
+            keywords: ['normal', 'paragraph', 'p', 'text'],
+            onSelect: () => editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createParagraphNode());
+                }
+            }),
+        }),
+        ...[1, 2, 3].map((n) => new ComponentPickerOption(`Heading ${n}`, {
+            icon: _jsx("i", { className: `icon h${n}` }),
+            keywords: ['heading', 'header', `h${n}`],
+            onSelect: () => editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                }
+            }),
+        })),
+        new ComponentPickerOption('Table', {
+            icon: _jsx("i", { className: "icon table" }),
+            keywords: ['table', 'grid', 'spreadsheet', 'rows', 'columns'],
+            onSelect: () => showModal('Insert Table', (onClose) => (_jsx(InsertTableDialog, { activeEditor: editor, onClose: onClose }))),
+        }),
+        new ComponentPickerOption('Numbered List', {
+            icon: _jsx("i", { className: "icon number" }),
+            keywords: ['numbered list', 'ordered list', 'ol'],
+            onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Bulleted List', {
+            icon: _jsx("i", { className: "icon bullet" }),
+            keywords: ['bulleted list', 'unordered list', 'ul'],
+            onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Check List', {
+            icon: _jsx("i", { className: "icon check" }),
+            keywords: ['check list', 'todo list'],
+            onSelect: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Quote', {
+            icon: _jsx("i", { className: "icon quote" }),
+            keywords: ['block quote'],
+            onSelect: () => editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createQuoteNode());
+                }
+            }),
+        }),
+        new ComponentPickerOption('Code', {
+            icon: _jsx("i", { className: "icon code" }),
+            keywords: ['javascript', 'python', 'js', 'codeblock'],
+            onSelect: () => editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    if (selection.isCollapsed()) {
+                        $setBlocksType(selection, () => $createCodeNode());
+                    }
+                    else {
+                        // Will this ever happen?
+                        const textContent = selection.getTextContent();
+                        const codeNode = $createCodeNode();
+                        selection.insertNodes([codeNode]);
+                        selection.insertRawText(textContent);
+                    }
+                }
+            }),
+        }),
+        new ComponentPickerOption('Divider', {
+            icon: _jsx("i", { className: "icon horizontal-rule" }),
+            keywords: ['horizontal rule', 'divider', 'hr'],
+            onSelect: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Page Break', {
+            icon: _jsx("i", { className: "icon page-break" }),
+            keywords: ['page break', 'divider'],
+            onSelect: () => editor.dispatchCommand(INSERT_PAGE_BREAK, undefined),
+        }),
+        new ComponentPickerOption('Excalidraw', {
+            icon: _jsx("i", { className: "icon diagram-2" }),
+            keywords: ['excalidraw', 'diagram', 'drawing'],
+            onSelect: () => editor.dispatchCommand(INSERT_EXCALIDRAW_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Poll', {
+            icon: _jsx("i", { className: "icon poll" }),
+            keywords: ['poll', 'vote'],
+            onSelect: () => showModal('Insert Poll', (onClose) => (_jsx(InsertPollDialog, { activeEditor: editor, onClose: onClose }))),
+        }),
+        ...EmbedConfigs.map((embedConfig) => new ComponentPickerOption(`Embed ${embedConfig.contentName}`, {
+            icon: embedConfig.icon,
+            keywords: [...embedConfig.keywords, 'embed'],
+            onSelect: () => editor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type),
+        })),
+        new ComponentPickerOption('Date', {
+            icon: _jsx("i", { className: "icon calendar" }),
+            keywords: ['date', 'calendar', 'time'],
+            onSelect: () => {
+                const dateTime = new Date();
+                dateTime.setHours(0, 0, 0, 0); // Set time to midnight
+                editor.dispatchCommand(INSERT_DATETIME_COMMAND, { dateTime });
+            },
+        }),
+        new ComponentPickerOption('Today', {
+            icon: _jsx("i", { className: "icon calendar" }),
+            keywords: ['date', 'calendar', 'time', 'today'],
+            onSelect: () => {
+                const dateTime = new Date();
+                dateTime.setHours(0, 0, 0, 0); // Set time to midnight
+                editor.dispatchCommand(INSERT_DATETIME_COMMAND, { dateTime });
+            },
+        }),
+        new ComponentPickerOption('Tomorrow', {
+            icon: _jsx("i", { className: "icon calendar" }),
+            keywords: ['date', 'calendar', 'time', 'tomorrow'],
+            onSelect: () => {
+                const dateTime = new Date();
+                dateTime.setDate(dateTime.getDate() + 1);
+                dateTime.setHours(0, 0, 0, 0); // Set time to midnight
+                editor.dispatchCommand(INSERT_DATETIME_COMMAND, { dateTime });
+            },
+        }),
+        new ComponentPickerOption('Yesterday', {
+            icon: _jsx("i", { className: "icon calendar" }),
+            keywords: ['date', 'calendar', 'time', 'yesterday'],
+            onSelect: () => {
+                const dateTime = new Date();
+                dateTime.setDate(dateTime.getDate() - 1);
+                dateTime.setHours(0, 0, 0, 0); // Set time to midnight
+                editor.dispatchCommand(INSERT_DATETIME_COMMAND, { dateTime });
+            },
+        }),
+        new ComponentPickerOption('Equation', {
+            icon: _jsx("i", { className: "icon equation" }),
+            keywords: ['equation', 'latex', 'math'],
+            onSelect: () => showModal('Insert Equation', (onClose) => (_jsx(InsertEquationDialog, { activeEditor: editor, onClose: onClose }))),
+        }),
+        new ComponentPickerOption('GIF', {
+            icon: _jsx("i", { className: "icon gif" }),
+            keywords: ['gif', 'animate', 'image', 'file'],
+            onSelect: () => editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                altText: 'Cat typing on a laptop',
+                src: catTypingGif,
+            }),
+        }),
+        new ComponentPickerOption('Image', {
+            icon: _jsx("i", { className: "icon image" }),
+            keywords: ['image', 'photo', 'picture', 'file'],
+            onSelect: () => showModal('Insert Image', (onClose) => (_jsx(InsertImageDialog, { activeEditor: editor, onClose: onClose }))),
+        }),
+        new ComponentPickerOption('Collapsible', {
+            icon: _jsx("i", { className: "icon caret-right" }),
+            keywords: ['collapse', 'collapsible', 'toggle'],
+            onSelect: () => editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Columns Layout', {
+            icon: _jsx("i", { className: "icon columns" }),
+            keywords: ['columns', 'layout', 'grid'],
+            onSelect: () => showModal('Insert Columns Layout', (onClose) => (_jsx(InsertLayoutDialog, { activeEditor: editor, onClose: onClose }))),
+        }),
+        ...['left', 'center', 'right', 'justify'].map((alignment) => new ComponentPickerOption(`Align ${alignment}`, {
+            icon: _jsx("i", { className: `icon ${alignment}-align` }),
+            keywords: ['align', 'justify', alignment],
+            onSelect: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment),
+        })),
+    ];
+}
+export default function ComponentPickerMenuPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [modal, showModal] = useModal();
+    const [queryString, setQueryString] = useState(null);
+    const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
+        allowWhitespace: true,
+        minLength: 0,
+    });
+    const options = useMemo(() => {
+        const baseOptions = getBaseOptions(editor, showModal);
+        if (!queryString) {
+            return baseOptions;
+        }
+        const regex = new RegExp(queryString, 'i');
+        return [
+            ...getDynamicOptions(editor, queryString),
+            ...baseOptions.filter((option) => regex.test(option.title) ||
+                option.keywords.some((keyword) => regex.test(keyword))),
+        ];
+    }, [editor, queryString, showModal]);
+    const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
+        editor.update(() => {
+            nodeToRemove?.remove();
+            selectedOption.onSelect(matchingString);
+            closeMenu();
+        });
+    }, [editor]);
+    return (_jsxs(_Fragment, { children: [modal, _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length
+                    ? ReactDOM.createPortal(_jsx("div", { className: "typeahead-popover component-picker-menu", children: _jsx("ul", { children: options.map((option, i) => (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                                    setHighlightedIndex(i);
+                                    selectOptionAndCleanUp(option);
+                                }, onMouseEnter: () => {
+                                    setHighlightedIndex(i);
+                                }, option: option }, option.key))) }) }), anchorElementRef.current)
+                    : null })] }));
+}

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

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

package/lib/plugins/ContextMenuPlugin/index.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { NodeContextMenuOption, NodeContextMenuPlugin, NodeContextMenuSeparator, } from '@lexical/react/LexicalNodeContextMenuPlugin';
+import { $getSelection, $isDecoratorNode, $isNodeSelection, $isRangeSelection, COPY_COMMAND, CUT_COMMAND, PASTE_COMMAND, } from 'lexical';
+import { useMemo } from 'react';
+export default function ContextMenuPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const items = useMemo(() => {
+        return [
+            new NodeContextMenuOption(`Remove Link`, {
+                $onSelect: () => {
+                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+                },
+                $showOn: (node) => $isLinkNode(node.getParent()),
+                disabled: false,
+                icon: _jsx("i", { className: "PlaygroundEditorTheme__contextMenuItemIcon" }),
+            }),
+            new NodeContextMenuSeparator({
+                $showOn: (node) => $isLinkNode(node.getParent()),
+            }),
+            new NodeContextMenuOption(`Cut`, {
+                $onSelect: () => {
+                    editor.dispatchCommand(CUT_COMMAND, null);
+                },
+                disabled: false,
+                icon: (_jsx("i", { className: "PlaygroundEditorTheme__contextMenuItemIcon page-break" })),
+            }),
+            new NodeContextMenuOption(`Copy`, {
+                $onSelect: () => {
+                    editor.dispatchCommand(COPY_COMMAND, null);
+                },
+                disabled: false,
+                icon: _jsx("i", { className: "PlaygroundEditorTheme__contextMenuItemIcon copy" }),
+            }),
+            new NodeContextMenuOption(`Paste`, {
+                $onSelect: () => {
+                    navigator.clipboard.read().then(async function (...args) {
+                        const data = new DataTransfer();
+                        const readClipboardItems = await navigator.clipboard.read();
+                        const item = readClipboardItems[0];
+                        const permission = await navigator.permissions.query({
+                            // @ts-expect-error These types are incorrect.
+                            name: 'clipboard-read',
+                        });
+                        if (permission.state === 'denied') {
+                            alert('Not allowed to paste from clipboard.');
+                            return;
+                        }
+                        for (const type of item.types) {
+                            const dataString = await (await item.getType(type)).text();
+                            data.setData(type, dataString);
+                        }
+                        const event = new ClipboardEvent('paste', {
+                            clipboardData: data,
+                        });
+                        editor.dispatchCommand(PASTE_COMMAND, event);
+                    });
+                },
+                disabled: false,
+                icon: (_jsx("i", { className: "PlaygroundEditorTheme__contextMenuItemIcon paste" })),
+            }),
+            new NodeContextMenuOption(`Paste as Plain Text`, {
+                $onSelect: () => {
+                    navigator.clipboard.read().then(async function (...args) {
+                        const permission = await navigator.permissions.query({
+                            // @ts-expect-error These types are incorrect.
+                            name: 'clipboard-read',
+                        });
+                        if (permission.state === 'denied') {
+                            alert('Not allowed to paste from clipboard.');
+                            return;
+                        }
+                        const data = new DataTransfer();
+                        const clipboardText = await navigator.clipboard.readText();
+                        data.setData('text/plain', clipboardText);
+                        const event = new ClipboardEvent('paste', {
+                            clipboardData: data,
+                        });
+                        editor.dispatchCommand(PASTE_COMMAND, event);
+                    });
+                },
+                disabled: false,
+                icon: _jsx("i", { className: "PlaygroundEditorTheme__contextMenuItemIcon" }),
+            }),
+            new NodeContextMenuSeparator(),
+            new NodeContextMenuOption(`Delete Node`, {
+                $onSelect: () => {
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        const currentNode = selection.anchor.getNode();
+                        const ancestorNodeWithRootAsParent = currentNode
+                            .getParents()
+                            .at(-2);
+                        ancestorNodeWithRootAsParent?.remove();
+                    }
+                    else if ($isNodeSelection(selection)) {
+                        const selectedNodes = selection.getNodes();
+                        selectedNodes.forEach((node) => {
+                            if ($isDecoratorNode(node)) {
+                                node.remove();
+                            }
+                        });
+                    }
+                },
+                disabled: false,
+                icon: (_jsx("i", { className: "PlaygroundEditorTheme__contextMenuItemIcon clear" })),
+            }),
+        ];
+    }, [editor]);
+    return (_jsx(NodeContextMenuPlugin, { className: "PlaygroundEditorTheme__contextMenu", itemClassName: "PlaygroundEditorTheme__contextMenuItem", separatorClassName: "PlaygroundEditorTheme__contextMenuSeparator", items: items }));
+}

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

@@ -0,0 +1,3 @@
+import type { LexicalCommand } from 'lexical';
+export declare const INSERT_COUNTER_COMMAND: LexicalCommand<number | undefined>;
+export default function CounterPlugin(): null;

package/lib/plugins/CounterPlugin/index.js

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { createCommand, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { useEffect } from 'react';
+import { $createCounterNode, CounterNode } from '../../nodes/CounterNode';
+export const INSERT_COUNTER_COMMAND = createCommand('INSERT_COUNTER_COMMAND');
+export default function CounterPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([CounterNode])) {
+            throw new Error('CounterPlugin: CounterNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_COUNTER_COMMAND, (payload) => {
+            const counterNode = $createCounterNode(payload || 0);
+            $insertNodeToNearestRoot(counterNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

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

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

package/lib/plugins/DatalayerPlugin/index.js

@@ -0,0 +1,218 @@
+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 default function DatalayerPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [mcpTools, setMcpTools] = useState([]);
+    const [selectedTool, setSelectedTool] = useState('');
+    const [isLoadingTools, setIsLoadingTools] = useState(false);
+    const [toolsError, setToolsError] = useState(null);
+    // 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: 'playground/0/main'
+                    }
+                })
+            });
+            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: 'playground/0/main',
+                        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: () => { 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 }))] })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import { LexicalCommand } from 'lexical';
+type CommandPayload = {
+    dateTime: Date;
+};
+export declare const INSERT_DATETIME_COMMAND: LexicalCommand<CommandPayload>;
+export default function DateTimePlugin(): JSX.Element | null;
+export {};