@datalayer/lexical-loro 0.0.7 → 0.1.0

package/lib/plugins/FloatingLinkEditorPlugin/index.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './index.css';
+import { $createLinkNode, $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND, } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $findMatchingParent, mergeRegister } from '@lexical/utils';
+import { $getSelection, $isLineBreakNode, $isNodeSelection, $isRangeSelection, CLICK_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, getDOMSelection, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+import { setFloatingElemPositionForLinkEditor } from '../../utils/setFloatingElemPositionForLinkEditor';
+import { sanitizeUrl } from '../../utils/url';
+function preventDefault(event) {
+    event.preventDefault();
+}
+function FloatingLinkEditor({ editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode, }) {
+    const editorRef = useRef(null);
+    const inputRef = useRef(null);
+    const [linkUrl, setLinkUrl] = useState('');
+    const [editedLinkUrl, setEditedLinkUrl] = useState('https://');
+    const [lastSelection, setLastSelection] = useState(null);
+    const $updateLinkEditor = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const node = getSelectedNode(selection);
+            const linkParent = $findMatchingParent(node, $isLinkNode);
+            if (linkParent) {
+                setLinkUrl(linkParent.getURL());
+            }
+            else if ($isLinkNode(node)) {
+                setLinkUrl(node.getURL());
+            }
+            else {
+                setLinkUrl('');
+            }
+            if (isLinkEditMode) {
+                setEditedLinkUrl(linkUrl);
+            }
+        }
+        else if ($isNodeSelection(selection)) {
+            const nodes = selection.getNodes();
+            if (nodes.length > 0) {
+                const node = nodes[0];
+                const parent = node.getParent();
+                if ($isLinkNode(parent)) {
+                    setLinkUrl(parent.getURL());
+                }
+                else if ($isLinkNode(node)) {
+                    setLinkUrl(node.getURL());
+                }
+                else {
+                    setLinkUrl('');
+                }
+                if (isLinkEditMode) {
+                    setEditedLinkUrl(linkUrl);
+                }
+            }
+        }
+        const editorElem = editorRef.current;
+        const nativeSelection = getDOMSelection(editor._window);
+        const activeElement = document.activeElement;
+        if (editorElem === null) {
+            return;
+        }
+        const rootElement = editor.getRootElement();
+        if (selection !== null && rootElement !== null && editor.isEditable()) {
+            let domRect;
+            if ($isNodeSelection(selection)) {
+                const nodes = selection.getNodes();
+                if (nodes.length > 0) {
+                    const element = editor.getElementByKey(nodes[0].getKey());
+                    if (element) {
+                        domRect = element.getBoundingClientRect();
+                    }
+                }
+            }
+            else if (nativeSelection !== null &&
+                rootElement.contains(nativeSelection.anchorNode)) {
+                domRect =
+                    nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
+            }
+            if (domRect) {
+                domRect.y += 40;
+                setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
+            }
+            setLastSelection(selection);
+        }
+        else if (!activeElement || activeElement.className !== 'link-input') {
+            if (rootElement !== null) {
+                setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
+            }
+            setLastSelection(null);
+            setIsLinkEditMode(false);
+            setLinkUrl('');
+        }
+        return true;
+    }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
+    useEffect(() => {
+        const scrollerElem = anchorElem.parentElement;
+        const update = () => {
+            editor.getEditorState().read(() => {
+                $updateLinkEditor();
+            });
+        };
+        window.addEventListener('resize', update);
+        if (scrollerElem) {
+            scrollerElem.addEventListener('scroll', update);
+        }
+        return () => {
+            window.removeEventListener('resize', update);
+            if (scrollerElem) {
+                scrollerElem.removeEventListener('scroll', update);
+            }
+        };
+    }, [anchorElem.parentElement, editor, $updateLinkEditor]);
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                $updateLinkEditor();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            $updateLinkEditor();
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+            if (isLink) {
+                setIsLink(false);
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_HIGH));
+    }, [editor, $updateLinkEditor, setIsLink, isLink]);
+    useEffect(() => {
+        editor.getEditorState().read(() => {
+            $updateLinkEditor();
+        });
+    }, [editor, $updateLinkEditor]);
+    useEffect(() => {
+        if (isLinkEditMode && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isLinkEditMode, isLink]);
+    useEffect(() => {
+        const editorElement = editorRef.current;
+        if (editorElement === null) {
+            return;
+        }
+        const handleBlur = (event) => {
+            if (!editorElement.contains(event.relatedTarget) && isLink) {
+                setIsLink(false);
+                setIsLinkEditMode(false);
+            }
+        };
+        editorElement.addEventListener('focusout', handleBlur);
+        return () => {
+            editorElement.removeEventListener('focusout', handleBlur);
+        };
+    }, [editorRef, setIsLink, setIsLinkEditMode, isLink]);
+    const monitorInputInteraction = (event) => {
+        if (event.key === 'Enter') {
+            handleLinkSubmission(event);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            setIsLinkEditMode(false);
+        }
+    };
+    const handleLinkSubmission = (event) => {
+        event.preventDefault();
+        if (lastSelection !== null) {
+            if (linkUrl !== '') {
+                editor.update(() => {
+                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        const parent = getSelectedNode(selection).getParent();
+                        if ($isAutoLinkNode(parent)) {
+                            const linkNode = $createLinkNode(parent.getURL(), {
+                                rel: parent.__rel,
+                                target: parent.__target,
+                                title: parent.__title,
+                            });
+                            parent.replace(linkNode, true);
+                        }
+                    }
+                });
+            }
+            setEditedLinkUrl('https://');
+            setIsLinkEditMode(false);
+        }
+    };
+    return (_jsx("div", { ref: editorRef, className: "link-editor", children: !isLink ? null : isLinkEditMode ? (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, className: "link-input", value: editedLinkUrl, onChange: (event) => {
+                        setEditedLinkUrl(event.target.value);
+                    }, onKeyDown: (event) => {
+                        monitorInputInteraction(event);
+                    } }), _jsxs("div", { children: [_jsx("div", { className: "link-cancel", role: "button", tabIndex: 0, onMouseDown: preventDefault, onClick: () => {
+                                setIsLinkEditMode(false);
+                            } }), _jsx("div", { className: "link-confirm", role: "button", tabIndex: 0, onMouseDown: preventDefault, onClick: handleLinkSubmission })] })] })) : (_jsxs("div", { className: "link-view", children: [_jsx("a", { href: sanitizeUrl(linkUrl), target: "_blank", rel: "noopener noreferrer", children: linkUrl }), _jsx("div", { className: "link-edit", role: "button", tabIndex: 0, onMouseDown: preventDefault, onClick: (event) => {
+                        event.preventDefault();
+                        setEditedLinkUrl(linkUrl);
+                        setIsLinkEditMode(true);
+                    } }), _jsx("div", { className: "link-trash", role: "button", tabIndex: 0, onMouseDown: preventDefault, onClick: () => {
+                        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+                    } })] })) }));
+}
+function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsLinkEditMode) {
+    const [activeEditor, setActiveEditor] = useState(editor);
+    const [isLink, setIsLink] = useState(false);
+    useEffect(() => {
+        function $updateToolbar() {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const focusNode = getSelectedNode(selection);
+                const focusLinkNode = $findMatchingParent(focusNode, $isLinkNode);
+                const focusAutoLinkNode = $findMatchingParent(focusNode, $isAutoLinkNode);
+                if (!(focusLinkNode || focusAutoLinkNode)) {
+                    setIsLink(false);
+                    return;
+                }
+                const badNode = selection
+                    .getNodes()
+                    .filter((node) => !$isLineBreakNode(node))
+                    .find((node) => {
+                    const linkNode = $findMatchingParent(node, $isLinkNode);
+                    const autoLinkNode = $findMatchingParent(node, $isAutoLinkNode);
+                    return ((focusLinkNode && !focusLinkNode.is(linkNode)) ||
+                        (linkNode && !linkNode.is(focusLinkNode)) ||
+                        (focusAutoLinkNode && !focusAutoLinkNode.is(autoLinkNode)) ||
+                        (autoLinkNode &&
+                            (!autoLinkNode.is(focusAutoLinkNode) ||
+                                autoLinkNode.getIsUnlinked())));
+                });
+                if (!badNode) {
+                    setIsLink(true);
+                }
+                else {
+                    setIsLink(false);
+                }
+            }
+            else if ($isNodeSelection(selection)) {
+                const nodes = selection.getNodes();
+                if (nodes.length === 0) {
+                    setIsLink(false);
+                    return;
+                }
+                const node = nodes[0];
+                const parent = node.getParent();
+                if ($isLinkNode(parent) || $isLinkNode(node)) {
+                    setIsLink(true);
+                }
+                else {
+                    setIsLink(false);
+                }
+            }
+        }
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                $updateToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
+            $updateToolbar();
+            setActiveEditor(newEditor);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CLICK_COMMAND, (payload) => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const node = getSelectedNode(selection);
+                const linkNode = $findMatchingParent(node, $isLinkNode);
+                if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
+                    window.open(linkNode.getURL(), '_blank');
+                    return true;
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor]);
+    return createPortal(_jsx(FloatingLinkEditor, { editor: activeEditor, isLink: isLink, anchorElem: anchorElem, setIsLink: setIsLink, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode }), anchorElem);
+}
+export default function FloatingLinkEditorPlugin({ anchorElem = document.body, isLinkEditMode, setIsLinkEditMode, }) {
+    const [editor] = useLexicalComposerContext();
+    return useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsLinkEditMode);
+}

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import './index.css';
+import { Dispatch } from 'react';
+export default function FloatingTextFormatToolbarPlugin({ anchorElem, setIsLinkEditMode, }: {
+    anchorElem?: HTMLElement;
+    setIsLinkEditMode: Dispatch<boolean>;
+}): JSX.Element | null;

package/lib/plugins/FloatingTextFormatToolbarPlugin/index.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.css';
+import { $isCodeHighlightNode } from '@lexical/code';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection, $isParagraphNode, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, getDOMSelection, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getDOMRangeRect } from '../../utils/getDOMRangeRect';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition';
+import { INSERT_INLINE_COMMAND } from '../CommentPlugin';
+function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItalic, isUnderline, isUppercase, isLowercase, isCapitalize, isCode, isStrikethrough, isSubscript, isSuperscript, setIsLinkEditMode, }) {
+    const popupCharStylesEditorRef = useRef(null);
+    const insertLink = useCallback(() => {
+        if (!isLink) {
+            setIsLinkEditMode(true);
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
+        }
+        else {
+            setIsLinkEditMode(false);
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
+    }, [editor, isLink, setIsLinkEditMode]);
+    const insertComment = () => {
+        editor.dispatchCommand(INSERT_INLINE_COMMAND, undefined);
+    };
+    function mouseMoveListener(e) {
+        if (popupCharStylesEditorRef?.current &&
+            (e.buttons === 1 || e.buttons === 3)) {
+            if (popupCharStylesEditorRef.current.style.pointerEvents !== 'none') {
+                const x = e.clientX;
+                const y = e.clientY;
+                const elementUnderMouse = document.elementFromPoint(x, y);
+                if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+                    // Mouse is not over the target element => not a normal click, but probably a drag
+                    popupCharStylesEditorRef.current.style.pointerEvents = 'none';
+                }
+            }
+        }
+    }
+    function mouseUpListener(e) {
+        if (popupCharStylesEditorRef?.current) {
+            if (popupCharStylesEditorRef.current.style.pointerEvents !== 'auto') {
+                popupCharStylesEditorRef.current.style.pointerEvents = 'auto';
+            }
+        }
+    }
+    useEffect(() => {
+        if (popupCharStylesEditorRef?.current) {
+            document.addEventListener('mousemove', mouseMoveListener);
+            document.addEventListener('mouseup', mouseUpListener);
+            return () => {
+                document.removeEventListener('mousemove', mouseMoveListener);
+                document.removeEventListener('mouseup', mouseUpListener);
+            };
+        }
+    }, [popupCharStylesEditorRef]);
+    const $updateTextFormatFloatingToolbar = useCallback(() => {
+        const selection = $getSelection();
+        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+        const nativeSelection = getDOMSelection(editor._window);
+        if (popupCharStylesEditorElem === null) {
+            return;
+        }
+        const rootElement = editor.getRootElement();
+        if (selection !== null &&
+            nativeSelection !== null &&
+            !nativeSelection.isCollapsed &&
+            rootElement !== null &&
+            rootElement.contains(nativeSelection.anchorNode)) {
+            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem, isLink);
+        }
+    }, [editor, anchorElem, isLink]);
+    useEffect(() => {
+        const scrollerElem = anchorElem.parentElement;
+        const update = () => {
+            editor.getEditorState().read(() => {
+                $updateTextFormatFloatingToolbar();
+            });
+        };
+        window.addEventListener('resize', update);
+        if (scrollerElem) {
+            scrollerElem.addEventListener('scroll', update);
+        }
+        return () => {
+            window.removeEventListener('resize', update);
+            if (scrollerElem) {
+                scrollerElem.removeEventListener('scroll', update);
+            }
+        };
+    }, [editor, $updateTextFormatFloatingToolbar, anchorElem]);
+    useEffect(() => {
+        editor.getEditorState().read(() => {
+            $updateTextFormatFloatingToolbar();
+        });
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                $updateTextFormatFloatingToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            $updateTextFormatFloatingToolbar();
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor, $updateTextFormatFloatingToolbar]);
+    return (_jsxs("div", { ref: popupCharStylesEditorRef, className: "floating-text-format-popup", children: [editor.isEditable() && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                        }, className: 'popup-item spaced ' + (isBold ? 'active' : ''), title: "Bold", "aria-label": "Format text as bold", children: _jsx("i", { className: "format bold" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                        }, className: 'popup-item spaced ' + (isItalic ? 'active' : ''), title: "Italic", "aria-label": "Format text as italics", children: _jsx("i", { className: "format italic" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+                        }, className: 'popup-item spaced ' + (isUnderline ? 'active' : ''), title: "Underline", "aria-label": "Format text to underlined", children: _jsx("i", { className: "format underline" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+                        }, className: 'popup-item spaced ' + (isStrikethrough ? 'active' : ''), title: "Strikethrough", "aria-label": "Format text with a strikethrough", children: _jsx("i", { className: "format strikethrough" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
+                        }, className: 'popup-item spaced ' + (isSubscript ? 'active' : ''), title: "Subscript", "aria-label": "Format Subscript", children: _jsx("i", { className: "format subscript" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
+                        }, className: 'popup-item spaced ' + (isSuperscript ? 'active' : ''), title: "Superscript", "aria-label": "Format Superscript", children: _jsx("i", { className: "format superscript" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'uppercase');
+                        }, className: 'popup-item spaced ' + (isUppercase ? 'active' : ''), title: "Uppercase", "aria-label": "Format text to uppercase", children: _jsx("i", { className: "format uppercase" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'lowercase');
+                        }, className: 'popup-item spaced ' + (isLowercase ? 'active' : ''), title: "Lowercase", "aria-label": "Format text to lowercase", children: _jsx("i", { className: "format lowercase" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'capitalize');
+                        }, className: 'popup-item spaced ' + (isCapitalize ? 'active' : ''), title: "Capitalize", "aria-label": "Format text to capitalize", children: _jsx("i", { className: "format capitalize" }) }), _jsx("button", { type: "button", onClick: () => {
+                            editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                        }, className: 'popup-item spaced ' + (isCode ? 'active' : ''), title: "Insert code block", "aria-label": "Insert code block", children: _jsx("i", { className: "format code" }) }), _jsx("button", { type: "button", onClick: insertLink, className: 'popup-item spaced ' + (isLink ? 'active' : ''), title: "Insert link", "aria-label": "Insert link", children: _jsx("i", { className: "format link" }) })] })), _jsx("button", { type: "button", onClick: insertComment, className: 'popup-item spaced insert-comment', title: "Insert comment", "aria-label": "Insert comment", children: _jsx("i", { className: "format add-comment" }) })] }));
+}
+function useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode) {
+    const [isText, setIsText] = useState(false);
+    const [isLink, setIsLink] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [isUnderline, setIsUnderline] = useState(false);
+    const [isUppercase, setIsUppercase] = useState(false);
+    const [isLowercase, setIsLowercase] = useState(false);
+    const [isCapitalize, setIsCapitalize] = useState(false);
+    const [isStrikethrough, setIsStrikethrough] = useState(false);
+    const [isSubscript, setIsSubscript] = useState(false);
+    const [isSuperscript, setIsSuperscript] = useState(false);
+    const [isCode, setIsCode] = useState(false);
+    const updatePopup = useCallback(() => {
+        editor.getEditorState().read(() => {
+            // Should not to pop up the floating toolbar when using IME input
+            if (editor.isComposing()) {
+                return;
+            }
+            const selection = $getSelection();
+            const nativeSelection = getDOMSelection(editor._window);
+            const rootElement = editor.getRootElement();
+            if (nativeSelection !== null &&
+                (!$isRangeSelection(selection) ||
+                    rootElement === null ||
+                    !rootElement.contains(nativeSelection.anchorNode))) {
+                setIsText(false);
+                return;
+            }
+            if (!$isRangeSelection(selection)) {
+                return;
+            }
+            const node = getSelectedNode(selection);
+            // Update text format
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            setIsUnderline(selection.hasFormat('underline'));
+            setIsUppercase(selection.hasFormat('uppercase'));
+            setIsLowercase(selection.hasFormat('lowercase'));
+            setIsCapitalize(selection.hasFormat('capitalize'));
+            setIsStrikethrough(selection.hasFormat('strikethrough'));
+            setIsSubscript(selection.hasFormat('subscript'));
+            setIsSuperscript(selection.hasFormat('superscript'));
+            setIsCode(selection.hasFormat('code'));
+            // Update links
+            const parent = node.getParent();
+            if ($isLinkNode(parent) || $isLinkNode(node)) {
+                setIsLink(true);
+            }
+            else {
+                setIsLink(false);
+            }
+            if (!$isCodeHighlightNode(selection.anchor.getNode()) &&
+                selection.getTextContent() !== '') {
+                setIsText($isTextNode(node) || $isParagraphNode(node));
+            }
+            else {
+                setIsText(false);
+            }
+            const rawTextContent = selection.getTextContent().replace(/\n/g, '');
+            if (!selection.isCollapsed() && rawTextContent === '') {
+                setIsText(false);
+                return;
+            }
+        });
+    }, [editor]);
+    useEffect(() => {
+        document.addEventListener('selectionchange', updatePopup);
+        return () => {
+            document.removeEventListener('selectionchange', updatePopup);
+        };
+    }, [updatePopup]);
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(() => {
+            updatePopup();
+        }), editor.registerRootListener(() => {
+            if (editor.getRootElement() === null) {
+                setIsText(false);
+            }
+        }));
+    }, [editor, updatePopup]);
+    if (!isText) {
+        return null;
+    }
+    return createPortal(_jsx(TextFormatFloatingToolbar, { editor: editor, anchorElem: anchorElem, isLink: isLink, isBold: isBold, isItalic: isItalic, isUppercase: isUppercase, isLowercase: isLowercase, isCapitalize: isCapitalize, isStrikethrough: isStrikethrough, isSubscript: isSubscript, isSuperscript: isSuperscript, isUnderline: isUnderline, isCode: isCode, setIsLinkEditMode: setIsLinkEditMode }), anchorElem);
+}
+export default function FloatingTextFormatToolbarPlugin({ anchorElem = document.body, setIsLinkEditMode, }) {
+    const [editor] = useLexicalComposerContext();
+    return useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode);
+}

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

@@ -0,0 +1,24 @@
+import type { JSX } from 'react';
+import { LexicalCommand, LexicalEditor } from 'lexical';
+import { ImagePayload } from '../../nodes/ImageNode';
+export type InsertImagePayload = Readonly<ImagePayload>;
+export declare const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;
+export declare function InsertImageUriDialogBody({ onClick, }: {
+    onClick: (payload: InsertImagePayload) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InsertImageUploadedDialogBody({ onClick, }: {
+    onClick: (payload: InsertImagePayload) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InsertImageDialog({ activeEditor, onClose, }: {
+    activeEditor: LexicalEditor;
+    onClose: () => void;
+}): JSX.Element;
+export default function ImagesPlugin({ captionsEnabled, }: {
+    captionsEnabled?: boolean;
+}): JSX.Element | null;
+declare global {
+    interface DragEvent {
+        rangeOffset?: number;
+        rangeParent?: Node;
+    }
+}