@blocklet/editor-lite 2.6.0

package/lib/main/plugins/DraggableBlockPlugin/index.js

@@ -0,0 +1,288 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 './index.css';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { eventFiles } from '@lexical/rich-text';
+import { mergeRegister } from '@lexical/utils';
+import { $getNearestNodeFromDOMNode, $getNodeByKey, $getRoot, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DRAGOVER_COMMAND, DROP_COMMAND, } from 'lexical';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { isHTMLElement } from '../../utils/guard';
+import { Point } from '../../utils/point';
+import { Rect } from '../../utils/rect';
+const SPACE = 4;
+const TARGET_LINE_HALF_HEIGHT = 2;
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
+const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
+const TEXT_BOX_HORIZONTAL_PADDING = 28;
+const Downward = 1;
+const Upward = -1;
+const Indeterminate = 0;
+let prevIndex = Infinity;
+function getCurrentIndex(keysLength) {
+    if (keysLength === 0) {
+        return Infinity;
+    }
+    if (prevIndex >= 0 && prevIndex < keysLength) {
+        return prevIndex;
+    }
+    return Math.floor(keysLength / 2);
+}
+function getTopLevelNodeKeys(editor) {
+    return editor.getEditorState().read(() => $getRoot().getChildrenKeys());
+}
+function getCollapsedMargins(elem) {
+    const getMargin = (element, margin) => element ? parseFloat(window.getComputedStyle(element)[margin]) : 0;
+    const { marginTop, marginBottom } = window.getComputedStyle(elem);
+    const prevElemSiblingMarginBottom = getMargin(elem.previousElementSibling, 'marginBottom');
+    const nextElemSiblingMarginTop = getMargin(elem.nextElementSibling, 'marginTop');
+    const collapsedTopMargin = Math.max(parseFloat(marginTop), prevElemSiblingMarginBottom);
+    const collapsedBottomMargin = Math.max(parseFloat(marginBottom), nextElemSiblingMarginTop);
+    return { marginBottom: collapsedBottomMargin, marginTop: collapsedTopMargin };
+}
+function getBlockElement(anchorElem, editor, event, useEdgeAsDefault = false) {
+    const anchorElementRect = anchorElem.getBoundingClientRect();
+    const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+    let blockElem = null;
+    editor.getEditorState().read(() => {
+        if (useEdgeAsDefault) {
+            const [firstNode, lastNode] = [
+                editor.getElementByKey(topLevelNodeKeys[0]),
+                editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1]),
+            ];
+            const [firstNodeRect, lastNodeRect] = [firstNode?.getBoundingClientRect(), lastNode?.getBoundingClientRect()];
+            if (firstNodeRect && lastNodeRect) {
+                if (event.y < firstNodeRect.top) {
+                    blockElem = firstNode;
+                }
+                else if (event.y > lastNodeRect.bottom) {
+                    blockElem = lastNode;
+                }
+                if (blockElem) {
+                    return;
+                }
+            }
+        }
+        let index = getCurrentIndex(topLevelNodeKeys.length);
+        let direction = Indeterminate;
+        while (index >= 0 && index < topLevelNodeKeys.length) {
+            const key = topLevelNodeKeys[index];
+            const elem = editor.getElementByKey(key);
+            if (elem === null) {
+                break;
+            }
+            const point = new Point(event.x, event.y);
+            const domRect = Rect.fromDOM(elem);
+            const { marginTop, marginBottom } = getCollapsedMargins(elem);
+            const rect = domRect.generateNewRect({
+                bottom: domRect.bottom + marginBottom,
+                left: anchorElementRect.left,
+                right: anchorElementRect.right,
+                top: domRect.top - marginTop,
+            });
+            const { result, reason: { isOnTopSide, isOnBottomSide }, } = rect.contains(point);
+            if (result) {
+                blockElem = elem;
+                prevIndex = index;
+                break;
+            }
+            if (direction === Indeterminate) {
+                if (isOnTopSide) {
+                    direction = Upward;
+                }
+                else if (isOnBottomSide) {
+                    direction = Downward;
+                }
+                else {
+                    // stop search block element
+                    direction = Infinity;
+                }
+            }
+            index += direction;
+        }
+    });
+    return blockElem;
+}
+function isOnMenu(element) {
+    return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+}
+function setMenuPosition(targetElem, floatingElem, anchorElem) {
+    if (!targetElem) {
+        floatingElem.style.opacity = '0';
+        floatingElem.style.transform = 'translate(-10000px, -10000px)';
+        return;
+    }
+    const targetRect = targetElem.getBoundingClientRect();
+    const targetStyle = window.getComputedStyle(targetElem);
+    const floatingElemRect = floatingElem.getBoundingClientRect();
+    const anchorElementRect = anchorElem.getBoundingClientRect();
+    const top = targetRect.top + (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 - anchorElementRect.top;
+    const left = SPACE;
+    floatingElem.style.opacity = '1';
+    floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
+function setDragImage(dataTransfer, draggableBlockElem) {
+    const { transform } = draggableBlockElem.style;
+    // Remove dragImage borders
+    draggableBlockElem.style.transform = 'translateZ(0)';
+    dataTransfer.setDragImage(draggableBlockElem, 0, 0);
+    setTimeout(() => {
+        draggableBlockElem.style.transform = transform;
+    });
+}
+function setTargetLine(targetLineElem, targetBlockElem, mouseY, anchorElem) {
+    const { top: targetBlockElemTop, height: targetBlockElemHeight } = targetBlockElem.getBoundingClientRect();
+    const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect();
+    const { marginTop, marginBottom } = getCollapsedMargins(targetBlockElem);
+    let lineTop = targetBlockElemTop;
+    if (mouseY >= targetBlockElemTop) {
+        lineTop += targetBlockElemHeight + marginBottom / 2;
+    }
+    else {
+        lineTop -= marginTop / 2;
+    }
+    const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT;
+    const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
+    targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
+    targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`;
+    targetLineElem.style.opacity = '.4';
+}
+function hideTargetLine(targetLineElem) {
+    if (targetLineElem) {
+        targetLineElem.style.opacity = '0';
+        targetLineElem.style.transform = 'translate(-10000px, -10000px)';
+    }
+}
+function useDraggableBlockMenu(editor, anchorElem, isEditable) {
+    const scrollerElem = anchorElem.parentElement;
+    const menuRef = useRef(null);
+    const targetLineRef = useRef(null);
+    const isDraggingBlockRef = useRef(false);
+    const [draggableBlockElem, setDraggableBlockElem] = useState(null);
+    useEffect(() => {
+        function onMouseMove(event) {
+            const { target } = event;
+            if (!isHTMLElement(target)) {
+                setDraggableBlockElem(null);
+                return;
+            }
+            if (isOnMenu(target)) {
+                return;
+            }
+            const _draggableBlockElem = getBlockElement(anchorElem, editor, event);
+            setDraggableBlockElem(_draggableBlockElem);
+        }
+        function onMouseLeave() {
+            setDraggableBlockElem(null);
+        }
+        scrollerElem?.addEventListener('mousemove', onMouseMove);
+        scrollerElem?.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            scrollerElem?.removeEventListener('mousemove', onMouseMove);
+            scrollerElem?.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [scrollerElem, anchorElem, editor]);
+    useEffect(() => {
+        if (menuRef.current) {
+            setMenuPosition(draggableBlockElem, menuRef.current, anchorElem);
+        }
+    }, [anchorElem, draggableBlockElem]);
+    useEffect(() => {
+        function onDragover(event) {
+            if (!isDraggingBlockRef.current) {
+                return false;
+            }
+            const [isFileTransfer] = eventFiles(event);
+            if (isFileTransfer) {
+                return false;
+            }
+            const { pageY, target } = event;
+            if (!isHTMLElement(target)) {
+                return false;
+            }
+            const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+            const targetLineElem = targetLineRef.current;
+            if (targetBlockElem === null || targetLineElem === null) {
+                return false;
+            }
+            setTargetLine(targetLineElem, targetBlockElem, pageY, anchorElem);
+            // Prevent default event to be able to trigger onDrop events
+            event.preventDefault();
+            return true;
+        }
+        function onDrop(event) {
+            if (!isDraggingBlockRef.current) {
+                return false;
+            }
+            const [isFileTransfer] = eventFiles(event);
+            if (isFileTransfer) {
+                return false;
+            }
+            const { target, dataTransfer, pageY } = event;
+            const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || '';
+            const draggedNode = $getNodeByKey(dragData);
+            if (!draggedNode) {
+                return false;
+            }
+            if (!isHTMLElement(target)) {
+                return false;
+            }
+            const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+            if (!targetBlockElem) {
+                return false;
+            }
+            const targetNode = $getNearestNodeFromDOMNode(targetBlockElem);
+            if (!targetNode) {
+                return false;
+            }
+            if (targetNode === draggedNode) {
+                return true;
+            }
+            const targetBlockElemTop = targetBlockElem.getBoundingClientRect().top;
+            if (pageY >= targetBlockElemTop) {
+                targetNode.insertAfter(draggedNode);
+            }
+            else {
+                targetNode.insertBefore(draggedNode);
+            }
+            setDraggableBlockElem(null);
+            return true;
+        }
+        return mergeRegister(editor.registerCommand(DRAGOVER_COMMAND, (event) => {
+            return onDragover(event);
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => {
+            return onDrop(event);
+        }, COMMAND_PRIORITY_HIGH));
+    }, [anchorElem, editor]);
+    function onDragStart(event) {
+        const { dataTransfer } = event;
+        if (!dataTransfer || !draggableBlockElem) {
+            return;
+        }
+        setDragImage(dataTransfer, draggableBlockElem);
+        let nodeKey = '';
+        editor.update(() => {
+            const node = $getNearestNodeFromDOMNode(draggableBlockElem);
+            if (node) {
+                nodeKey = node.getKey();
+            }
+        });
+        isDraggingBlockRef.current = true;
+        dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
+    }
+    function onDragEnd() {
+        isDraggingBlockRef.current = false;
+        hideTargetLine(targetLineRef.current);
+    }
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "icon draggable-block-menu", ref: menuRef, draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, children: _jsx("div", { className: isEditable ? 'icon' : '' }) }), _jsx("div", { className: "draggable-block-target-line", ref: targetLineRef })] }), anchorElem);
+}
+export default function DraggableBlockPlugin({ anchorElem = document.body, }) {
+    const [editor] = useLexicalComposerContext();
+    return useDraggableBlockMenu(editor, anchorElem, editor._editable);
+}

package/lib/main/plugins/EmojisPlugin/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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';
+export default function EmojisPlugin(): JSX.Element | null;

package/lib/main/plugins/EmojisPlugin/index.js

@@ -0,0 +1,63 @@
+/**
+ * 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 { 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', '❤']],
+    ['🙂', ['emoji happysmile', '🙂']],
+    ['😀', ['emoji veryhappysmile', '😀']],
+    ['🙁', ['emoji unhappysmile', '🙁']],
+    ['❤', ['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/main/plugins/ExcalidrawPlugin/index.d.ts

@@ -0,0 +1,3 @@
+import { LexicalCommand } from 'lexical';
+export declare const INSERT_EXCALIDRAW_COMMAND: LexicalCommand<void>;
+export default function ExcalidrawPlugin(): null;

package/lib/main/plugins/ExcalidrawPlugin/index.js

@@ -0,0 +1,30 @@
+/**
+ * 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 { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement } from '@lexical/utils';
+import { $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
+import { useEffect } from 'react';
+import { $createExcalidrawNode, ExcalidrawNode } from '../../nodes/ExcalidrawNode';
+export const INSERT_EXCALIDRAW_COMMAND = createCommand('INSERT_EXCALIDRAW_COMMAND');
+export default function ExcalidrawPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([ExcalidrawNode])) {
+            throw new Error('ExcalidrawPlugin: ExcalidrawNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_EXCALIDRAW_COMMAND, () => {
+            const excalidrawNode = $createExcalidrawNode();
+            $insertNodes([excalidrawNode]);
+            if ($isRootOrShadowRoot(excalidrawNode.getParentOrThrow())) {
+                $wrapNodeInElement(excalidrawNode, $createParagraphNode).selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/main/plugins/FigmaPlugin/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { LexicalCommand } from 'lexical';
+import { type JSX } from 'react';
+export declare const INSERT_FIGMA_COMMAND: LexicalCommand<string>;
+export default function FigmaPlugin(): JSX.Element | null;

package/lib/main/plugins/FigmaPlugin/index.js

@@ -0,0 +1,27 @@
+/**
+ * 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 { 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/main/plugins/FloatingLinkEditorPlugin/index.css

@@ -0,0 +1,39 @@
+.link-editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  will-change: transform;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}

package/lib/main/plugins/FloatingLinkEditorPlugin/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 './index.css';
+import { type JSX } from 'react';
+export default function FloatingLinkEditorPlugin({ anchorElem, }: {
+    anchorElem?: HTMLElement;
+}): JSX.Element | null;

package/lib/main/plugins/FloatingLinkEditorPlugin/index.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 './index.css';
+import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $findMatchingParent, mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Box } from '@mui/material';
+import { getSelectedNode } from '../../utils/getSelectedNode';
+import { sanitizeUrl } from '../../utils/sanitizeUrl';
+import { setFloatingElemPosition } from '../../utils/setFloatingElemPosition';
+function FloatingLinkEditor({ editor, anchorElem }) {
+    const editorRef = useRef(null);
+    const inputRef = useRef(null);
+    const [linkUrl, setLinkUrl] = useState('');
+    const [isEditMode, setEditMode] = useState(false);
+    const [lastSelection, setLastSelection] = useState(null);
+    const updateLinkEditor = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const node = getSelectedNode(selection);
+            const parent = node.getParent();
+            if ($isLinkNode(parent)) {
+                setLinkUrl(parent.getURL());
+            }
+            else if ($isLinkNode(node)) {
+                setLinkUrl(node.getURL());
+            }
+            else {
+                setLinkUrl('');
+            }
+        }
+        const editorElem = editorRef.current;
+        const nativeSelection = window.getSelection();
+        const { activeElement } = document;
+        if (editorElem === null) {
+            return;
+        }
+        const rootElement = editor.getRootElement();
+        if (selection !== null &&
+            nativeSelection !== null &&
+            rootElement !== null &&
+            rootElement.contains(nativeSelection.anchorNode)) {
+            const domRange = nativeSelection.getRangeAt(0);
+            let rect;
+            if (nativeSelection.anchorNode === rootElement) {
+                let inner = rootElement;
+                while (inner.firstElementChild != null) {
+                    inner = inner.firstElementChild;
+                }
+                rect = inner.getBoundingClientRect();
+            }
+            else {
+                rect = domRange.getBoundingClientRect();
+            }
+            setFloatingElemPosition(rect, editorElem, anchorElem);
+            setLastSelection(selection);
+        }
+        else if (!activeElement || activeElement.className !== 'link-input') {
+            if (rootElement !== null) {
+                setFloatingElemPosition(null, editorElem, anchorElem);
+            }
+            setLastSelection(null);
+            setEditMode(false);
+            setLinkUrl('');
+        }
+        return true;
+    }, [anchorElem, editor]);
+    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((payload) => {
+            if (!payload)
+                return;
+            const { editorState } = payload;
+            editorState.read(() => {
+                updateLinkEditor();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateLinkEditor();
+            return true;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor, updateLinkEditor]);
+    useEffect(() => {
+        editor.getEditorState().read(() => {
+            updateLinkEditor();
+        });
+    }, [editor, updateLinkEditor]);
+    useEffect(() => {
+        if (isEditMode && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isEditMode]);
+    return (_jsx(Box, { ref: editorRef, className: "link-editor", sx: {
+            bgcolor: 'background.default',
+            color: 'text.primary',
+            border: 1,
+            borderColor: 'divider',
+            '& .link-input': {
+                minHeight: 32,
+                color: 'text.primary',
+                bgcolor: 'grey.100',
+                '& a': {
+                    color: 'primary.main',
+                },
+            },
+        }, children: isEditMode ? (_jsx("input", { ref: inputRef, className: "link-input", value: linkUrl, onChange: (event) => {
+                setLinkUrl(event.target.value);
+            }, onKeyDown: (event) => {
+                if (event.key === 'Enter') {
+                    event.preventDefault();
+                    if (lastSelection !== null) {
+                        if (linkUrl !== '') {
+                            editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(linkUrl));
+                        }
+                        setEditMode(false);
+                    }
+                }
+                else if (event.key === 'Escape') {
+                    event.preventDefault();
+                    setEditMode(false);
+                }
+            } })) : (_jsxs("div", { className: "link-input", children: [_jsx("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: linkUrl }), _jsx("div", { className: "link-edit", role: "button", tabIndex: 0, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                        setEditMode(true);
+                    }, children: _jsx("i", { className: "iconify", "data-icon": "mdi:pencil" }) })] })) }));
+}
+function useFloatingLinkEditorToolbar(editor, anchorElem) {
+    const [activeEditor, setActiveEditor] = useState(editor);
+    const [isLink, setIsLink] = useState(false);
+    const updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const node = getSelectedNode(selection);
+            const linkParent = $findMatchingParent(node, $isLinkNode);
+            const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
+            // We don't want this menu to open for auto links.
+            if (linkParent != null && autoLinkParent == null) {
+                setIsLink(true);
+            }
+            else {
+                setIsLink(false);
+            }
+        }
+    }, []);
+    useEffect(() => {
+        return editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
+            updateToolbar();
+            setActiveEditor(newEditor);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL);
+    }, [editor, updateToolbar]);
+    return isLink ? createPortal(_jsx(FloatingLinkEditor, { editor: activeEditor, anchorElem: anchorElem }), anchorElem) : null;
+}
+export default function FloatingLinkEditorPlugin({ anchorElem = document.body, }) {
+    const [editor] = useLexicalComposerContext();
+    return useFloatingLinkEditorToolbar(editor, anchorElem);
+}

package/lib/main/plugins/FloatingTextFormatToolbarPlugin/ColorPickerButton.d.ts

@@ -0,0 +1,5 @@
+import { LexicalEditor } from 'lexical';
+import { type JSX } from 'react';
+export default function ColorPickerButton({ editor }: {
+    editor: LexicalEditor;
+}): JSX.Element;