@datalayer/lexical-loro 0.1.0 → 0.2.1

package/lib/plugins/DateTimePlugin/index.js

@@ -1,24 +0,0 @@
-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

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

package/lib/plugins/DocsPlugin/index.js

@@ -1,4 +0,0 @@
-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

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

package/lib/plugins/DragDropPastePlugin/index.js

@@ -1,33 +0,0 @@
-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

@@ -1,12 +0,0 @@
-/**
- * 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

@@ -1,36 +0,0 @@
-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

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

package/lib/plugins/EmojiPickerPlugin/index.js

@@ -1,80 +0,0 @@
-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

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

package/lib/plugins/EmojisPlugin/index.js

@@ -1,52 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,15 +0,0 @@
-/**
- * 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;