@datalayer/lexical-loro 0.0.3 → 0.1.0

package/lib/plugins/DateTimePlugin/index.js

@@ -0,0 +1,24 @@
+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/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,33 @@
+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,80 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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,52 @@
+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,20 @@
+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;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * 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';
+import { Dispatch } from 'react';
+export default function FloatingLinkEditorPlugin({ anchorElem, isLinkEditMode, setIsLinkEditMode, }: {
+    anchorElem?: HTMLElement;
+    isLinkEditMode: boolean;
+    setIsLinkEditMode: Dispatch<boolean>;
+}): JSX.Element | null;