@datalayer/lexical-loro 0.2.4 → 0.2.5

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,24 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+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/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 {};

package/lib/plugins/DateTimePlugin/index.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { useEffect } from 'react';
+import { $createDateTimeNode, DateTimeNode, } from '../../nodes/DateTimeNode/DateTimeNode';
+export const INSERT_DATETIME_COMMAND = createCommand('INSERT_DATETIME_COMMAND');
+export default function DateTimePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([DateTimeNode])) {
+            throw new Error('DateTimePlugin: DateTimeNode not registered on editor');
+        }
+        return mergeRegister(editor.registerCommand(INSERT_DATETIME_COMMAND, (payload) => {
+            const { dateTime } = payload;
+            const dateTimeNode = $createDateTimeNode(dateTime);
+            $insertNodes([dateTimeNode]);
+            if ($isRootOrShadowRoot(dateTimeNode.getParentOrThrow())) {
+                $wrapNodeInElement(dateTimeNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR));
+    }, [editor]);
+    return null;
+}

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

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