@webiny/lexical-editor 5.41.4 → 5.41.5-beta.1

package/commands/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./image";
 export * from "./list";
 export * from "./quote";
+export * from "./toolbar";

package/commands/index.js

@@ -36,5 +36,16 @@ Object.keys(_quote).forEach(function (key) {
     }
   });
 });
+var _toolbar = require("./toolbar");
+Object.keys(_toolbar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _toolbar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _toolbar[key];
+    }
+  });
+});
 
 //# sourceMappingURL=index.js.map

package/commands/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_image","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_list","_quote"],"sources":["index.ts"],"sourcesContent":["export * from \"~/commands/image\";\nexport * from \"~/commands/list\";\nexport * from \"~/commands/quote\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,KAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,KAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,KAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,KAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,MAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,MAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,MAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAE,MAAA,CAAAN,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["_image","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_list","_quote","_toolbar"],"sources":["index.ts"],"sourcesContent":["export * from \"~/commands/image\";\nexport * from \"~/commands/list\";\nexport * from \"~/commands/quote\";\nexport * from \"~/commands/toolbar\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,KAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,KAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,KAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,KAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,MAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,MAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,MAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAE,MAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,QAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,QAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,QAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAG,QAAA,CAAAP,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/commands/toolbar.d.ts

@@ -0,0 +1 @@
+export declare const HIDE_FLOATING_TOOLBAR: import("lexical").LexicalCommand<unknown>;

package/commands/toolbar.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HIDE_FLOATING_TOOLBAR = void 0;
+var _lexical = require("lexical");
+var HIDE_FLOATING_TOOLBAR = exports.HIDE_FLOATING_TOOLBAR = (0, _lexical.createCommand)("HIDE_FLOATING_TOOLBAR_COMMAND");
+
+//# sourceMappingURL=toolbar.js.map

package/commands/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_lexical","require","HIDE_FLOATING_TOOLBAR","exports","createCommand"],"sources":["toolbar.ts"],"sourcesContent":["import { createCommand } from \"lexical\";\n\nexport const HIDE_FLOATING_TOOLBAR = createCommand(\"HIDE_FLOATING_TOOLBAR_COMMAND\");\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAEO,IAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,IAAAE,sBAAa,EAAC,+BAA+B,CAAC","ignoreList":[]}

package/components/Toolbar/Toolbar.js

@@ -18,6 +18,7 @@ var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig")
 var _useCurrentSelection = require("../../hooks/useCurrentSelection");
 var _hooks = require("../../hooks");
 var _isChildOfFloatingToolbar = require("../../utils/isChildOfFloatingToolbar");
+var _commands = require("../../commands");
 var FloatingToolbar = function FloatingToolbar(_ref) {
   var anchorElem = _ref.anchorElem,
     editor = _ref.editor;
@@ -104,7 +105,12 @@ var FloatingToolbar = function FloatingToolbar(_ref) {
       editorState.read(function () {
         updateTextFormatFloatingToolbar();
       });
-    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
+    }), editor.registerCommand(_commands.HIDE_FLOATING_TOOLBAR, function () {
+      setTimeout(function () {
+        setIsVisible(false);
+      }, 10);
+      return true;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
       setIsVisible(true);
       updateTextFormatFloatingToolbar();
       return false;

package/components/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_hooks","_isChildOfFloatingToolbar","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n    const [isVisible, setIsVisible] = useState(true);\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    const mouseMoveListener = useCallback(\n        (e: MouseEvent) => {\n            /* Indicates which mouse button(s) was pressed.\n             / 1 = mouse left button\n             / 3 = mouse left and right button in the same time\n             / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n             */\n            if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n                if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n                    const x = e.clientX;\n                    const y = e.clientY;\n                    const elementUnderMouse = document.elementFromPoint(x, y);\n\n                    if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n                        // Mouse is not over the target element => not a normal click, but probably a drag\n                        popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n                    }\n                }\n            }\n        },\n        [popupCharStylesEditorRef]\n    );\n\n    const mouseUpListener = useCallback(() => {\n        if (popupCharStylesEditorRef?.current) {\n            if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n                popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n            }\n        }\n    }, [popupCharStylesEditorRef]);\n\n    useEffect(() => {\n        if (popupCharStylesEditorRef?.current) {\n            document.addEventListener(\"mousemove\", mouseMoveListener);\n            document.addEventListener(\"mouseup\", mouseUpListener);\n\n            return () => {\n                document.removeEventListener(\"mousemove\", mouseMoveListener);\n                document.removeEventListener(\"mouseup\", mouseUpListener);\n            };\n        }\n        return;\n    }, [popupCharStylesEditorRef]);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    setIsVisible(true);\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n                        setIsVisible(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const { editor } = useRichTextEditor();\n    const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n\n        return !rangeSelection.isCollapsed();\n    });\n\n    if (!showToolbar) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_lexical","_reactDom","_utils","_getDOMRangeRect","_setFloatingElemPosition","_LexicalEditorConfig","_useCurrentSelection","_hooks","_isChildOfFloatingToolbar","_commands","FloatingToolbar","_ref","anchorElem","editor","_useState","useState","_useState2","_slicedToArray2","default","isVisible","setIsVisible","popupCharStylesEditorRef","useRef","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","mouseMoveListener","useCallback","e","current","buttons","style","pointerEvents","x","clientX","y","clientY","elementUnderMouse","document","elementFromPoint","contains","mouseUpListener","useEffect","addEventListener","removeEventListener","updateTextFormatFloatingToolbar","selection","$getSelection","popupCharStylesEditorElem","nativeSelection","window","getSelection","rootElement","getRootElement","isCollapsed","anchorNode","rangeRect","getDOMRangeRect","setFloatingElemPosition","scrollerElem","parentElement","update","getEditorState","read","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","HIDE_FLOATING_TOOLBAR","setTimeout","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND","BLUR_COMMAND","payload","isChildOfFloatingToolbar","relatedTarget","createElement","ref","className","isEditable","Fragment","map","action","key","name","element","Toolbar","exports","_ref3","_ref3$anchorElem","body","_useRichTextEditor","useRichTextEditor","showToolbar","useDeriveValueFromSelection","_ref4","rangeSelection","createPortal"],"sources":["Toolbar.tsx"],"sourcesContent":["import React, { FC, Fragment, useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n    $getSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { createPortal } from \"react-dom\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport \"./Toolbar.css\";\nimport { getDOMRangeRect } from \"~/utils/getDOMRangeRect\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { isChildOfFloatingToolbar } from \"~/utils/isChildOfFloatingToolbar\";\nimport { HIDE_FLOATING_TOOLBAR } from \"~/commands\";\n\ninterface FloatingToolbarProps {\n    anchorElem: HTMLElement;\n    editor: LexicalEditor;\n}\n\nconst FloatingToolbar: FC<FloatingToolbarProps> = ({ anchorElem, editor }) => {\n    const [isVisible, setIsVisible] = useState(true);\n    const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    const mouseMoveListener = useCallback(\n        (e: MouseEvent) => {\n            /* Indicates which mouse button(s) was pressed.\n             / 1 = mouse left button\n             / 3 = mouse left and right button in the same time\n             / More info: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n             */\n            if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {\n                if (popupCharStylesEditorRef.current.style.pointerEvents !== \"none\") {\n                    const x = e.clientX;\n                    const y = e.clientY;\n                    const elementUnderMouse = document.elementFromPoint(x, y);\n\n                    if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n                        // Mouse is not over the target element => not a normal click, but probably a drag\n                        popupCharStylesEditorRef.current.style.pointerEvents = \"none\";\n                    }\n                }\n            }\n        },\n        [popupCharStylesEditorRef]\n    );\n\n    const mouseUpListener = useCallback(() => {\n        if (popupCharStylesEditorRef?.current) {\n            if (popupCharStylesEditorRef.current.style.pointerEvents !== \"auto\") {\n                popupCharStylesEditorRef.current.style.pointerEvents = \"auto\";\n            }\n        }\n    }, [popupCharStylesEditorRef]);\n\n    useEffect(() => {\n        if (popupCharStylesEditorRef?.current) {\n            document.addEventListener(\"mousemove\", mouseMoveListener);\n            document.addEventListener(\"mouseup\", mouseUpListener);\n\n            return () => {\n                document.removeEventListener(\"mousemove\", mouseMoveListener);\n                document.removeEventListener(\"mouseup\", mouseUpListener);\n            };\n        }\n        return;\n    }, [popupCharStylesEditorRef]);\n\n    const updateTextFormatFloatingToolbar = useCallback(() => {\n        const selection = $getSelection();\n\n        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n        const nativeSelection = window.getSelection();\n\n        if (popupCharStylesEditorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            !nativeSelection.isCollapsed &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n        }\n    }, [editor, anchorElem]);\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateTextFormatFloatingToolbar();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateTextFormatFloatingToolbar();\n        });\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateTextFormatFloatingToolbar();\n                });\n            }),\n\n            editor.registerCommand(\n                HIDE_FLOATING_TOOLBAR,\n                () => {\n                    setTimeout(() => {\n                        setIsVisible(false);\n                    }, 10);\n                    return true;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    setIsVisible(true);\n                    updateTextFormatFloatingToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfFloatingToolbar(payload.relatedTarget as HTMLElement)) {\n                        setIsVisible(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateTextFormatFloatingToolbar]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    return (\n        <div ref={popupCharStylesEditorRef} className=\"floating-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n\nexport interface ToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\nexport const Toolbar = ({ anchorElem = document.body }: ToolbarProps) => {\n    const { editor } = useRichTextEditor();\n    const showToolbar = useDeriveValueFromSelection(({ rangeSelection }) => {\n        if (!rangeSelection) {\n            return false;\n        }\n\n        return !rangeSelection.isCollapsed();\n    });\n\n    if (!showToolbar) {\n        return null;\n    }\n\n    return createPortal(<FloatingToolbar anchorElem={anchorElem} editor={editor} />, anchorElem);\n};\n"],"mappings":"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","ignoreList":[]}

package/hooks/useCurrentElement.d.ts

@@ -2,6 +2,6 @@ import { RangeSelection } from "lexical";
 export declare function useCurrentElement(): {
     element: null;
 } | {
-    element: import("lexical").TextNode | import("lexical").ElementNode | import("lexical").LexicalNode;
+    element: import("lexical").LexicalNode | import("lexical").ElementNode | import("lexical").TextNode;
 };
-export declare function getNodeFromSelection(selection: RangeSelection): import("lexical").TextNode | import("lexical").ElementNode | import("lexical").LexicalNode;
+export declare function getNodeFromSelection(selection: RangeSelection): import("lexical").LexicalNode | import("lexical").ElementNode | import("lexical").TextNode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/lexical-editor",
-	"version": "5.41.4",
+	"version": "5.41.5-beta.1",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/webiny/webiny-js.git"
@@ -15,19 +15,18 @@
 		"@lexical/selection": "0.16.1",
 		"@lexical/text": "0.16.1",
 		"@lexical/utils": "0.16.1",
-		"@webiny/lexical-nodes": "5.41.4",
-		"@webiny/lexical-theme": "5.41.4",
-		"@webiny/react-composition": "5.41.4",
-		"@webiny/react-properties": "5.41.4",
+		"@webiny/lexical-nodes": "5.41.5-beta.1",
+		"@webiny/lexical-theme": "5.41.5-beta.1",
+		"@webiny/react-composition": "5.41.5-beta.1",
+		"@webiny/react-properties": "5.41.5-beta.1",
 		"emotion": "10.0.27",
 		"lexical": "0.16.1",
-		"lodash": "4.17.21",
 		"react": "18.2.0",
 		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
-		"@webiny/cli": "5.41.4",
-		"@webiny/project-utils": "5.41.4"
+		"@webiny/cli": "5.41.5-beta.1",
+		"@webiny/project-utils": "5.41.5-beta.1"
 	},
 	"publishConfig": {
 		"access": "public",
@@ -37,5 +36,5 @@
 		"build": "yarn webiny run build",
 		"watch": "yarn webiny run watch"
 	},
-	"gitHead": "94922b33af59db5afe75127bb07443ce7f1448c4"
+	"gitHead": "922a47688dd519ddc10b598d3ae79cb3186e3173"
 }

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js

@@ -76,7 +76,7 @@ function FloatingLinkEditor(_ref) {
       return;
     }
     var rootElement = editor.getRootElement();
-    if (selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
+    if (isVisible && selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
       var domRange = nativeSelection.getRangeAt(0);
       var rect;
       if (nativeSelection.anchorNode === rootElement) {
@@ -99,7 +99,7 @@ function FloatingLinkEditor(_ref) {
       setLinkData(emptyLinkData);
     }
     return true;
-  }, [anchorElem, editor]);
+  }, [isVisible, anchorElem, editor]);
   var removeLink = function removeLink() {
     editor.dispatchCommand(_lexicalNodes.TOGGLE_LINK_COMMAND, null);
     setEditMode(false);

package/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_lexical","_lexicalNodes","_getSelectedNode","_setFloatingElemPosition","_useFloatingLinkEditor","_LinkEditForm","_LinkPreviewForm","_sanitizeUrl","_isChildOfLinkEditor","FloatingLinkEditor","_ref","editor","isVisible","anchorElem","editorRef","useRef","_useState","useState","url","target","alt","_useState2","_slicedToArray2","default","linkData","setLinkData","_useState3","_useState4","isEditMode","setEditMode","_useState5","_useState6","lastSelection","setLastSelection","updateLinkEditor","useCallback","selection","$getSelection","emptyLinkData","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","getURL","getTarget","getAlt","editorElem","current","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","domRange","getRangeAt","rect","inner","firstElementChild","getBoundingClientRect","setFloatingElemPosition","className","removeLink","dispatchCommand","TOGGLE_LINK_COMMAND","applyChanges","confirmedLinkData","sanitizeUrl","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfLinkEditor","relatedTarget","createElement","ref","style","display","LinkEditForm","onSave","onCancel","LinkPreviewForm","onEdit","FloatingLinkEditorPlugin","_ref3","_ref3$anchorElem","body","useFloatingLinkEditor"],"sources":["FloatingLinkEditorPlugin.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BaseSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useFloatingLinkEditor } from \"./useFloatingLinkEditor\";\nimport { LinkEditForm } from \"./LinkEditForm\";\nimport { LinkPreviewForm } from \"./LinkPreviewForm\";\nimport \"./FloatingLinkEditorPlugin.css\";\nimport { sanitizeUrl } from \"~/utils/sanitizeUrl\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\n\nexport interface LinkData {\n    url: string;\n    target: string | null;\n    alt: string | null;\n}\n\ninterface FloatingLinkEditorProps {\n    editor: LexicalEditor;\n    isVisible: boolean;\n    anchorElem: HTMLElement;\n}\n\nexport function FloatingLinkEditor({ editor, isVisible, anchorElem }: FloatingLinkEditorProps) {\n    const editorRef = useRef<HTMLDivElement | null>(null);\n    const [linkData, setLinkData] = useState<LinkData>({\n        url: \"\",\n        target: null,\n        alt: null\n    });\n\n    const [isEditMode, setEditMode] = useState(false);\n    const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);\n\n    const updateLinkEditor = useCallback(() => {\n        const selection = $getSelection();\n        const emptyLinkData = { url: \"\", target: null, alt: null };\n        if ($isRangeSelection(selection)) {\n            const node = getSelectedNode(selection);\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent)) {\n                const linkData = {\n                    url: parent.getURL(),\n                    target: parent.getTarget(),\n                    alt: $isLinkNode(parent) ? parent.getAlt() : null\n                };\n                setLinkData(linkData);\n            } else if ($isLinkNode(node)) {\n                const linkData = {\n                    url: node.getURL(),\n                    target: node.getTarget(),\n                    alt: $isLinkNode(node) ? node.getAlt() : null\n                };\n                setLinkData(linkData);\n            } else {\n                setLinkData(emptyLinkData);\n            }\n        }\n        const editorElem = editorRef.current;\n        const nativeSelection = window.getSelection();\n        const activeElement = document.activeElement;\n\n        if (editorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n\n        if (\n            selection !== null &&\n            nativeSelection !== null &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const domRange = nativeSelection.getRangeAt(0);\n            let rect;\n            if (nativeSelection.anchorNode === rootElement) {\n                let inner = rootElement;\n                while (inner.firstElementChild != null) {\n                    inner = inner.firstElementChild as HTMLElement;\n                }\n                rect = inner.getBoundingClientRect();\n            } else {\n                rect = domRange.getBoundingClientRect();\n            }\n\n            setFloatingElemPosition(rect, editorElem, anchorElem);\n            setLastSelection(selection);\n        } else if (!activeElement || activeElement.className !== \"link-input\") {\n            if (rootElement !== null) {\n                setFloatingElemPosition(null, editorElem, anchorElem);\n            }\n            setLastSelection(null);\n            setEditMode(false);\n            setLinkData(emptyLinkData);\n        }\n\n        return true;\n    }, [anchorElem, editor]);\n\n    const removeLink = () => {\n        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        setEditMode(false);\n    };\n\n    const applyChanges = (linkData: LinkData) => {\n        const confirmedLinkData = {\n            url: sanitizeUrl(linkData.url),\n            target: linkData.target,\n            alt: linkData.alt\n        };\n\n        if (lastSelection !== null) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, confirmedLinkData);\n            setEditMode(false);\n        }\n    };\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateLinkEditor();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [anchorElem.parentElement, editor, updateLinkEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateLinkEditor();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateLinkEditor();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n                        setEditMode(false);\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateLinkEditor]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateLinkEditor();\n        });\n    }, [editor, updateLinkEditor]);\n\n    return (\n        <div\n            ref={editorRef}\n            className=\"link-editor\"\n            style={{ display: isVisible ? \"block\" : \"none\" }}\n        >\n            {isEditMode ? (\n                <LinkEditForm\n                    linkData={linkData}\n                    onSave={applyChanges}\n                    onCancel={() => setEditMode(false)}\n                />\n            ) : (\n                <LinkPreviewForm\n                    linkData={linkData}\n                    removeLink={removeLink}\n                    onEdit={() => {\n                        setEditMode(true);\n                    }}\n                />\n            )}\n        </div>\n    );\n}\n\nexport function FloatingLinkEditorPlugin({\n    anchorElem = document.body\n}: {\n    anchorElem?: HTMLElement;\n}): JSX.Element | null {\n    return useFloatingLinkEditor(anchorElem);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_lexical","_lexicalNodes","_getSelectedNode","_setFloatingElemPosition","_useFloatingLinkEditor","_LinkEditForm","_LinkPreviewForm","_sanitizeUrl","_isChildOfLinkEditor","FloatingLinkEditor","_ref","editor","isVisible","anchorElem","editorRef","useRef","_useState","useState","url","target","alt","_useState2","_slicedToArray2","default","linkData","setLinkData","_useState3","_useState4","isEditMode","setEditMode","_useState5","_useState6","lastSelection","setLastSelection","updateLinkEditor","useCallback","selection","$getSelection","emptyLinkData","$isRangeSelection","node","getSelectedNode","parent","getParent","$isLinkNode","getURL","getTarget","getAlt","editorElem","current","nativeSelection","window","getSelection","activeElement","document","rootElement","getRootElement","contains","anchorNode","domRange","getRangeAt","rect","inner","firstElementChild","getBoundingClientRect","setFloatingElemPosition","className","removeLink","dispatchCommand","TOGGLE_LINK_COMMAND","applyChanges","confirmedLinkData","sanitizeUrl","useEffect","scrollerElem","parentElement","update","getEditorState","read","addEventListener","removeEventListener","mergeRegister","registerUpdateListener","_ref2","editorState","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfLinkEditor","relatedTarget","createElement","ref","style","display","LinkEditForm","onSave","onCancel","LinkPreviewForm","onEdit","FloatingLinkEditorPlugin","_ref3","_ref3$anchorElem","body","useFloatingLinkEditor"],"sources":["FloatingLinkEditorPlugin.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BaseSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    LexicalEditor,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { setFloatingElemPosition } from \"~/utils/setFloatingElemPosition\";\nimport { useFloatingLinkEditor } from \"./useFloatingLinkEditor\";\nimport { LinkEditForm } from \"./LinkEditForm\";\nimport { LinkPreviewForm } from \"./LinkPreviewForm\";\nimport \"./FloatingLinkEditorPlugin.css\";\nimport { sanitizeUrl } from \"~/utils/sanitizeUrl\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\n\nexport interface LinkData {\n    url: string;\n    target: string | null;\n    alt: string | null;\n}\n\ninterface FloatingLinkEditorProps {\n    editor: LexicalEditor;\n    isVisible: boolean;\n    anchorElem: HTMLElement;\n}\n\nexport function FloatingLinkEditor({ editor, isVisible, anchorElem }: FloatingLinkEditorProps) {\n    const editorRef = useRef<HTMLDivElement | null>(null);\n    const [linkData, setLinkData] = useState<LinkData>({\n        url: \"\",\n        target: null,\n        alt: null\n    });\n\n    const [isEditMode, setEditMode] = useState(false);\n    const [lastSelection, setLastSelection] = useState<BaseSelection | null>(null);\n\n    const updateLinkEditor = useCallback(() => {\n        const selection = $getSelection();\n        const emptyLinkData = { url: \"\", target: null, alt: null };\n        if ($isRangeSelection(selection)) {\n            const node = getSelectedNode(selection);\n            const parent = node.getParent();\n\n            if ($isLinkNode(parent)) {\n                const linkData = {\n                    url: parent.getURL(),\n                    target: parent.getTarget(),\n                    alt: $isLinkNode(parent) ? parent.getAlt() : null\n                };\n                setLinkData(linkData);\n            } else if ($isLinkNode(node)) {\n                const linkData = {\n                    url: node.getURL(),\n                    target: node.getTarget(),\n                    alt: $isLinkNode(node) ? node.getAlt() : null\n                };\n                setLinkData(linkData);\n            } else {\n                setLinkData(emptyLinkData);\n            }\n        }\n        const editorElem = editorRef.current;\n        const nativeSelection = window.getSelection();\n        const activeElement = document.activeElement;\n\n        if (editorElem === null) {\n            return;\n        }\n\n        const rootElement = editor.getRootElement();\n\n        if (\n            isVisible &&\n            selection !== null &&\n            nativeSelection !== null &&\n            rootElement !== null &&\n            rootElement.contains(nativeSelection.anchorNode)\n        ) {\n            const domRange = nativeSelection.getRangeAt(0);\n            let rect;\n            if (nativeSelection.anchorNode === rootElement) {\n                let inner = rootElement;\n                while (inner.firstElementChild != null) {\n                    inner = inner.firstElementChild as HTMLElement;\n                }\n                rect = inner.getBoundingClientRect();\n            } else {\n                rect = domRange.getBoundingClientRect();\n            }\n\n            setFloatingElemPosition(rect, editorElem, anchorElem);\n            setLastSelection(selection);\n        } else if (!activeElement || activeElement.className !== \"link-input\") {\n            if (rootElement !== null) {\n                setFloatingElemPosition(null, editorElem, anchorElem);\n            }\n            setLastSelection(null);\n            setEditMode(false);\n            setLinkData(emptyLinkData);\n        }\n\n        return true;\n    }, [isVisible, anchorElem, editor]);\n\n    const removeLink = () => {\n        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n        setEditMode(false);\n    };\n\n    const applyChanges = (linkData: LinkData) => {\n        const confirmedLinkData = {\n            url: sanitizeUrl(linkData.url),\n            target: linkData.target,\n            alt: linkData.alt\n        };\n\n        if (lastSelection !== null) {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, confirmedLinkData);\n            setEditMode(false);\n        }\n    };\n\n    useEffect(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        const update = () => {\n            editor.getEditorState().read(() => {\n                updateLinkEditor();\n            });\n        };\n\n        window.addEventListener(\"resize\", update);\n\n        if (scrollerElem) {\n            scrollerElem.addEventListener(\"scroll\", update);\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", update);\n\n            if (scrollerElem) {\n                scrollerElem.removeEventListener(\"scroll\", update);\n            }\n        };\n    }, [anchorElem.parentElement, editor, updateLinkEditor]);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                editorState.read(() => {\n                    updateLinkEditor();\n                });\n            }),\n\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateLinkEditor();\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n                        setEditMode(false);\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            )\n        );\n    }, [editor, updateLinkEditor]);\n\n    useEffect(() => {\n        editor.getEditorState().read(() => {\n            updateLinkEditor();\n        });\n    }, [editor, updateLinkEditor]);\n\n    return (\n        <div\n            ref={editorRef}\n            className=\"link-editor\"\n            style={{ display: isVisible ? \"block\" : \"none\" }}\n        >\n            {isEditMode ? (\n                <LinkEditForm\n                    linkData={linkData}\n                    onSave={applyChanges}\n                    onCancel={() => setEditMode(false)}\n                />\n            ) : (\n                <LinkPreviewForm\n                    linkData={linkData}\n                    removeLink={removeLink}\n                    onEdit={() => {\n                        setEditMode(true);\n                    }}\n                />\n            )}\n        </div>\n    );\n}\n\nexport function FloatingLinkEditorPlugin({\n    anchorElem = document.body\n}: {\n    anchorElem?: HTMLElement;\n}): JSX.Element | null {\n    return useFloatingLinkEditor(anchorElem);\n}\n"],"mappings":"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","ignoreList":[]}

package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js

@@ -13,57 +13,81 @@ var _hooks = require("../../hooks");
 var _getSelectedNode = require("../../utils/getSelectedNode");
 var _lexicalNodes = require("@webiny/lexical-nodes");
 var _isChildOfLinkEditor = require("./isChildOfLinkEditor");
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _lexical = require("lexical");
 var _utils = require("@lexical/utils");
 var _FloatingLinkEditorPlugin = require("./FloatingLinkEditorPlugin");
+var _commands = require("../../commands");
+var isLink = function isLink(selection) {
+  if (!(0, _lexical.$isRangeSelection)(selection)) {
+    return;
+  }
+  var node = (0, _getSelectedNode.getSelectedNode)(selection);
+  var linkParent = (0, _utils.$findMatchingParent)(node, _lexicalNodes.$isLinkNode);
+  var autoLinkParent = (0, _utils.$findMatchingParent)(node, _lexicalNodes.$isAutoLinkNode);
+  var isLinkOrChildOfLink = Boolean((0, _lexicalNodes.$isLinkNode)(node) || linkParent);
+  if (!isLinkOrChildOfLink) {
+    return false;
+  }
+  return linkParent !== null && autoLinkParent == null;
+};
+var isSelectionCollapsed = function isSelectionCollapsed(selection) {
+  return (0, _lexical.$isRangeSelection)(selection) && selection.isCollapsed();
+};
+var isLinkFocused = function isLinkFocused(selection) {
+  return isLink(selection) && isSelectionCollapsed(selection);
+};
+var isLinkSelected = function isLinkSelected(selection) {
+  return isLink(selection) && !isSelectionCollapsed(selection);
+};
 function useFloatingLinkEditor(anchorElem) {
   var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
     editor = _useRichTextEditor.editor;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isLink = _useState2[0],
-    setIsLink = _useState2[1];
-  var debounceSetIsLink = (0, _react.useCallback)((0, _debounce.default)(setIsLink, 50), []);
-  var updateToolbar = (0, _react.useCallback)(function () {
-    var selection = (0, _lexical.$getSelection)();
-    if (!(0, _lexical.$isRangeSelection)(selection)) {
-      return;
+    isLinkEditorVisible = _useState2[0],
+    setShowLinkEditor = _useState2[1];
+  var newLinkRef = (0, _react.useRef)(false);
+  var showLinkEditor = function showLinkEditor(state) {
+    setShowLinkEditor(state);
+    if (!state) {
+      newLinkRef.current = false;
     }
-    var node = (0, _getSelectedNode.getSelectedNode)(selection);
-    var linkParent = (0, _utils.$findMatchingParent)(node, _lexicalNodes.$isLinkNode);
-    var autoLinkParent = (0, _utils.$findMatchingParent)(node, _lexicalNodes.$isAutoLinkNode);
-    var isLinkOrChildOfLink = Boolean((0, _lexicalNodes.$isLinkNode)(node) || linkParent);
-    if (!isLinkOrChildOfLink) {
-      // When hiding the toolbar, we want to hide immediately.
-      setIsLink(false);
-    }
-    if (selection.dirty) {
-      // We don't want this menu to open for auto links.
-      if (linkParent != null && autoLinkParent == null) {
-        // When showing the toolbar, we want to debounce it, because sometimes selection gets updated
-        // multiple times, and the `selection.dirty` flag goes from true to false multiple times,
-        // eventually settling on `false`, which we want to set once it has settled.
-        debounceSetIsLink(true);
-      }
-    }
-  }, []);
+  };
   (0, _react.useEffect)(function () {
     return (0, _utils.mergeRegister)(editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function () {
-      updateToolbar();
+      var selection = (0, _lexical.$getSelection)();
+      if (isLinkFocused(selection)) {
+        showLinkEditor(true);
+        return false;
+      }
+      if (isLinkSelected(selection) && newLinkRef.current) {
+        return false;
+      }
+      if (isLinkSelected(selection) && !newLinkRef.current) {
+        showLinkEditor(false);
+        return false;
+      }
+      showLinkEditor(false);
       return false;
-    }, _lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(_lexical.BLUR_COMMAND, function (payload) {
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.BLUR_COMMAND, function (payload) {
       if (!(0, _isChildOfLinkEditor.isChildOfLinkEditor)(payload.relatedTarget)) {
-        setIsLink(false);
+        showLinkEditor(false);
       }
       return false;
     }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexicalNodes.TOGGLE_LINK_COMMAND, function (payload) {
-      setIsLink(!!payload);
+      var addLink = !!payload;
+      if (addLink) {
+        newLinkRef.current = true;
+        showLinkEditor(true);
+        editor.dispatchCommand(_commands.HIDE_FLOATING_TOOLBAR, {});
+      } else {
+        showLinkEditor(false);
+      }
       return false;
     }, _lexical.COMMAND_PRIORITY_CRITICAL));
-  }, [editor, updateToolbar]);
+  }, [editor]);
   return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_FloatingLinkEditorPlugin.FloatingLinkEditor, {
-    isVisible: isLink,
+    isVisible: isLinkEditorVisible,
     editor: editor,
     anchorElem: anchorElem
   }), anchorElem);

package/plugins/FloatingLinkEditorPlugin/useFloatingLinkEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactDom","_hooks","_getSelectedNode","_lexicalNodes","_isChildOfLinkEditor","_debounce","_interopRequireDefault","_lexical","_utils","_FloatingLinkEditorPlugin","useFloatingLinkEditor","anchorElem","_useRichTextEditor","useRichTextEditor","editor","_useState","useState","_useState2","_slicedToArray2","default","isLink","setIsLink","debounceSetIsLink","useCallback","debounce","updateToolbar","selection","$getSelection","$isRangeSelection","node","getSelectedNode","linkParent","$findMatchingParent","$isLinkNode","autoLinkParent","$isAutoLinkNode","isLinkOrChildOfLink","Boolean","dirty","useEffect","mergeRegister","registerCommand","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_CRITICAL","BLUR_COMMAND","payload","isChildOfLinkEditor","relatedTarget","COMMAND_PRIORITY_LOW","TOGGLE_LINK_COMMAND","createPortal","createElement","FloatingLinkEditor","isVisible"],"sources":["useFloatingLinkEditor.tsx"],"sourcesContent":["import React, { useCallback, useState, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\nimport debounce from \"lodash/debounce\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_CRITICAL,\n    COMMAND_PRIORITY_LOW,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $findMatchingParent, mergeRegister } from \"@lexical/utils\";\nimport { FloatingLinkEditor } from \"./FloatingLinkEditorPlugin\";\n\nexport function useFloatingLinkEditor(anchorElem: HTMLElement): JSX.Element | null {\n    const { editor } = useRichTextEditor();\n    const [isLink, setIsLink] = useState(false);\n\n    const debounceSetIsLink = useCallback(debounce(setIsLink, 50), []);\n\n    const updateToolbar = useCallback(() => {\n        const selection = $getSelection();\n        if (!$isRangeSelection(selection)) {\n            return;\n        }\n\n        const node = getSelectedNode(selection);\n        const linkParent = $findMatchingParent(node, $isLinkNode);\n        const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);\n        const isLinkOrChildOfLink = Boolean($isLinkNode(node) || linkParent);\n\n        if (!isLinkOrChildOfLink) {\n            // When hiding the toolbar, we want to hide immediately.\n            setIsLink(false);\n        }\n\n        if (selection.dirty) {\n            // We don't want this menu to open for auto links.\n            if (linkParent != null && autoLinkParent == null) {\n                // When showing the toolbar, we want to debounce it, because sometimes selection gets updated\n                // multiple times, and the `selection.dirty` flag goes from true to false multiple times,\n                // eventually settling on `false`, which we want to set once it has settled.\n                debounceSetIsLink(true);\n            }\n        }\n    }, []);\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    updateToolbar();\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            ),\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n                        setIsLink(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                TOGGLE_LINK_COMMAND,\n                payload => {\n                    setIsLink(!!payload);\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            )\n        );\n    }, [editor, updateToolbar]);\n\n    return createPortal(\n        <FloatingLinkEditor isVisible={isLink} editor={editor} anchorElem={anchorElem} />,\n        anchorElem\n    );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactDom","_hooks","_getSelectedNode","_lexicalNodes","_isChildOfLinkEditor","_lexical","_utils","_FloatingLinkEditorPlugin","_commands","isLink","selection","$isRangeSelection","node","getSelectedNode","linkParent","$findMatchingParent","$isLinkNode","autoLinkParent","$isAutoLinkNode","isLinkOrChildOfLink","Boolean","isSelectionCollapsed","isCollapsed","isLinkFocused","isLinkSelected","useFloatingLinkEditor","anchorElem","_useRichTextEditor","useRichTextEditor","editor","_useState","useState","_useState2","_slicedToArray2","default","isLinkEditorVisible","setShowLinkEditor","newLinkRef","useRef","showLinkEditor","state","current","useEffect","mergeRegister","registerCommand","SELECTION_CHANGE_COMMAND","$getSelection","COMMAND_PRIORITY_LOW","BLUR_COMMAND","payload","isChildOfLinkEditor","relatedTarget","TOGGLE_LINK_COMMAND","addLink","dispatchCommand","HIDE_FLOATING_TOOLBAR","COMMAND_PRIORITY_CRITICAL","createPortal","createElement","FloatingLinkEditor","isVisible"],"sources":["useFloatingLinkEditor.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useRichTextEditor } from \"~/hooks\";\nimport { getSelectedNode } from \"~/utils/getSelectedNode\";\nimport { BaseSelection } from \"lexical\";\nimport { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from \"@webiny/lexical-nodes\";\nimport { isChildOfLinkEditor } from \"~/plugins/FloatingLinkEditorPlugin/isChildOfLinkEditor\";\nimport {\n    $getSelection,\n    $isRangeSelection,\n    BLUR_COMMAND,\n    COMMAND_PRIORITY_CRITICAL,\n    COMMAND_PRIORITY_LOW,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { $findMatchingParent, mergeRegister } from \"@lexical/utils\";\nimport { FloatingLinkEditor } from \"./FloatingLinkEditorPlugin\";\nimport { HIDE_FLOATING_TOOLBAR } from \"~/commands\";\n\nconst isLink = (selection: BaseSelection | null) => {\n    if (!$isRangeSelection(selection)) {\n        return;\n    }\n\n    const node = getSelectedNode(selection);\n    const linkParent = $findMatchingParent(node, $isLinkNode);\n    const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);\n    const isLinkOrChildOfLink = Boolean($isLinkNode(node) || linkParent);\n\n    if (!isLinkOrChildOfLink) {\n        return false;\n    }\n\n    return linkParent !== null && autoLinkParent == null;\n};\n\nconst isSelectionCollapsed = (selection: BaseSelection | null) => {\n    return $isRangeSelection(selection) && selection.isCollapsed();\n};\n\nconst isLinkFocused = (selection: BaseSelection | null) => {\n    return isLink(selection) && isSelectionCollapsed(selection);\n};\n\nconst isLinkSelected = (selection: BaseSelection | null) => {\n    return isLink(selection) && !isSelectionCollapsed(selection);\n};\n\nexport function useFloatingLinkEditor(anchorElem: HTMLElement): JSX.Element | null {\n    const { editor } = useRichTextEditor();\n    const [isLinkEditorVisible, setShowLinkEditor] = useState(false);\n    const newLinkRef = useRef(false);\n\n    const showLinkEditor = (state: boolean) => {\n        setShowLinkEditor(state);\n        if (!state) {\n            newLinkRef.current = false;\n        }\n    };\n\n    useEffect(() => {\n        return mergeRegister(\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                () => {\n                    const selection = $getSelection();\n\n                    if (isLinkFocused(selection)) {\n                        showLinkEditor(true);\n                        return false;\n                    }\n\n                    if (isLinkSelected(selection) && newLinkRef.current) {\n                        return false;\n                    }\n\n                    if (isLinkSelected(selection) && !newLinkRef.current) {\n                        showLinkEditor(false);\n                        return false;\n                    }\n\n                    showLinkEditor(false);\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                BLUR_COMMAND,\n                payload => {\n                    if (!isChildOfLinkEditor(payload.relatedTarget as HTMLElement)) {\n                        showLinkEditor(false);\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                TOGGLE_LINK_COMMAND,\n                payload => {\n                    const addLink = !!payload;\n\n                    if (addLink) {\n                        newLinkRef.current = true;\n                        showLinkEditor(true);\n                        editor.dispatchCommand(HIDE_FLOATING_TOOLBAR, {});\n                    } else {\n                        showLinkEditor(false);\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_CRITICAL\n            )\n        );\n    }, [editor]);\n\n    return createPortal(\n        <FloatingLinkEditor\n            isVisible={isLinkEditorVisible}\n            editor={editor}\n            anchorElem={anchorElem}\n        />,\n        anchorElem\n    );\n}\n"],"mappings":"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","ignoreList":[]}

package/utils/setFloatingElemPosition.d.ts

@@ -1 +1 @@
-export declare function setFloatingElemPosition(targetRect: ClientRect | null, floatingElem: HTMLElement, anchorElem: HTMLElement, verticalGap?: number, horizontalOffset?: number): void;
+export declare function setFloatingElemPosition(basePosition: ClientRect | null, elementToPosition: HTMLElement, anchorElem: HTMLElement, verticalGap?: number, horizontalOffset?: number): void;

package/utils/setFloatingElemPosition.js

@@ -4,39 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setFloatingElemPosition = setFloatingElemPosition;
-/**
- * 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.
- *
- */
 var VERTICAL_GAP = 10;
 var HORIZONTAL_OFFSET = 5;
-function setFloatingElemPosition(targetRect, floatingElem, anchorElem) {
+function setFloatingElemPosition(basePosition, elementToPosition, anchorElem) {
   var verticalGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : VERTICAL_GAP;
   var horizontalOffset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : HORIZONTAL_OFFSET;
-  var scrollerElem = anchorElem.parentElement;
-  if (targetRect === null || !scrollerElem) {
-    floatingElem.style.opacity = "0";
-    floatingElem.style.transform = "translate(-10000px, -10000px)";
-    return;
-  }
-  var floatingElemRect = floatingElem.getBoundingClientRect();
-  var anchorElementRect = anchorElem.getBoundingClientRect();
-  var editorScrollerRect = scrollerElem.getBoundingClientRect();
-  var top = targetRect.top - floatingElemRect.height - verticalGap;
-  var left = targetRect.left - horizontalOffset;
-  if (top < editorScrollerRect.top) {
-    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
-  }
-  if (left + floatingElemRect.width > editorScrollerRect.right) {
-    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
-  }
-  top -= anchorElementRect.top;
-  left -= anchorElementRect.left;
-  floatingElem.style.opacity = "1";
-  floatingElem.style.transform = "translate(".concat(left, "px, ").concat(top, "px)");
+  // A small timeout gives enough time for DOM to update and provides us with correct bounding rect values.
+  setTimeout(function () {
+    var scrollerElem = anchorElem.parentElement;
+    if (basePosition === null || !scrollerElem) {
+      elementToPosition.style.opacity = "0";
+      elementToPosition.style.transform = "translate(-10000px, -10000px)";
+      return;
+    }
+    var rectToPosition = elementToPosition.getBoundingClientRect();
+    var anchorElementRect = anchorElem.getBoundingClientRect();
+    var editorScrollerRect = scrollerElem.getBoundingClientRect();
+    var top = basePosition.top - rectToPosition.height - verticalGap;
+    var left = basePosition.left - horizontalOffset;
+    if (top < editorScrollerRect.top) {
+      top += rectToPosition.height + basePosition.height + verticalGap * 2;
+    }
+    if (left + rectToPosition.width > editorScrollerRect.right) {
+      left = editorScrollerRect.right - rectToPosition.width - horizontalOffset;
+    }
+    top -= anchorElementRect.top;
+    left -= anchorElementRect.left;
+    elementToPosition.style.opacity = "1";
+    elementToPosition.style.transform = "translate(".concat(left, "px, ").concat(top, "px)");
+  }, 10);
 }
 
 //# sourceMappingURL=setFloatingElemPosition.js.map

package/utils/setFloatingElemPosition.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERTICAL_GAP","HORIZONTAL_OFFSET","setFloatingElemPosition","targetRect","floatingElem","anchorElem","verticalGap","arguments","length","undefined","horizontalOffset","scrollerElem","parentElement","style","opacity","transform","floatingElemRect","getBoundingClientRect","anchorElementRect","editorScrollerRect","top","height","left","width","right","concat"],"sources":["setFloatingElemPosition.ts"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nconst VERTICAL_GAP = 10;\nconst HORIZONTAL_OFFSET = 5;\n\nexport function setFloatingElemPosition(\n    targetRect: ClientRect | null,\n    floatingElem: HTMLElement,\n    anchorElem: HTMLElement,\n    verticalGap: number = VERTICAL_GAP,\n    horizontalOffset: number = HORIZONTAL_OFFSET\n): void {\n    const scrollerElem = anchorElem.parentElement;\n\n    if (targetRect === null || !scrollerElem) {\n        floatingElem.style.opacity = \"0\";\n        floatingElem.style.transform = \"translate(-10000px, -10000px)\";\n        return;\n    }\n\n    const floatingElemRect = floatingElem.getBoundingClientRect();\n    const anchorElementRect = anchorElem.getBoundingClientRect();\n    const editorScrollerRect = scrollerElem.getBoundingClientRect();\n\n    let top = targetRect.top - floatingElemRect.height - verticalGap;\n    let left = targetRect.left - horizontalOffset;\n\n    if (top < editorScrollerRect.top) {\n        top += floatingElemRect.height + targetRect.height + verticalGap * 2;\n    }\n\n    if (left + floatingElemRect.width > editorScrollerRect.right) {\n        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;\n    }\n\n    top -= anchorElementRect.top;\n    left -= anchorElementRect.left;\n\n    floatingElem.style.opacity = \"1\";\n    floatingElem.style.transform = `translate(${left}px, ${top}px)`;\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,YAAY,GAAG,EAAE;AACvB,IAAMC,iBAAiB,GAAG,CAAC;AAEpB,SAASC,uBAAuBA,CACnCC,UAA6B,EAC7BC,YAAyB,EACzBC,UAAuB,EAGnB;EAAA,IAFJC,WAAmB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGP,YAAY;EAAA,IAClCU,gBAAwB,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,iBAAiB;EAE5C,IAAMU,YAAY,GAAGN,UAAU,CAACO,aAAa;EAE7C,IAAIT,UAAU,KAAK,IAAI,IAAI,CAACQ,YAAY,EAAE;IACtCP,YAAY,CAACS,KAAK,CAACC,OAAO,GAAG,GAAG;IAChCV,YAAY,CAACS,KAAK,CAACE,SAAS,GAAG,+BAA+B;IAC9D;EACJ;EAEA,IAAMC,gBAAgB,GAAGZ,YAAY,CAACa,qBAAqB,CAAC,CAAC;EAC7D,IAAMC,iBAAiB,GAAGb,UAAU,CAACY,qBAAqB,CAAC,CAAC;EAC5D,IAAME,kBAAkB,GAAGR,YAAY,CAACM,qBAAqB,CAAC,CAAC;EAE/D,IAAIG,GAAG,GAAGjB,UAAU,CAACiB,GAAG,GAAGJ,gBAAgB,CAACK,MAAM,GAAGf,WAAW;EAChE,IAAIgB,IAAI,GAAGnB,UAAU,CAACmB,IAAI,GAAGZ,gBAAgB;EAE7C,IAAIU,GAAG,GAAGD,kBAAkB,CAACC,GAAG,EAAE;IAC9BA,GAAG,IAAIJ,gBAAgB,CAACK,MAAM,GAAGlB,UAAU,CAACkB,MAAM,GAAGf,WAAW,GAAG,CAAC;EACxE;EAEA,IAAIgB,IAAI,GAAGN,gBAAgB,CAACO,KAAK,GAAGJ,kBAAkB,CAACK,KAAK,EAAE;IAC1DF,IAAI,GAAGH,kBAAkB,CAACK,KAAK,GAAGR,gBAAgB,CAACO,KAAK,GAAGb,gBAAgB;EAC/E;EAEAU,GAAG,IAAIF,iBAAiB,CAACE,GAAG;EAC5BE,IAAI,IAAIJ,iBAAiB,CAACI,IAAI;EAE9BlB,YAAY,CAACS,KAAK,CAACC,OAAO,GAAG,GAAG;EAChCV,YAAY,CAACS,KAAK,CAACE,SAAS,gBAAAU,MAAA,CAAgBH,IAAI,UAAAG,MAAA,CAAOL,GAAG,QAAK;AACnE","ignoreList":[]}
+{"version":3,"names":["VERTICAL_GAP","HORIZONTAL_OFFSET","setFloatingElemPosition","basePosition","elementToPosition","anchorElem","verticalGap","arguments","length","undefined","horizontalOffset","setTimeout","scrollerElem","parentElement","style","opacity","transform","rectToPosition","getBoundingClientRect","anchorElementRect","editorScrollerRect","top","height","left","width","right","concat"],"sources":["setFloatingElemPosition.ts"],"sourcesContent":["const VERTICAL_GAP = 10;\nconst HORIZONTAL_OFFSET = 5;\n\nexport function setFloatingElemPosition(\n    basePosition: ClientRect | null,\n    elementToPosition: HTMLElement,\n    anchorElem: HTMLElement,\n    verticalGap: number = VERTICAL_GAP,\n    horizontalOffset: number = HORIZONTAL_OFFSET\n): void {\n    // A small timeout gives enough time for DOM to update and provides us with correct bounding rect values.\n    setTimeout(() => {\n        const scrollerElem = anchorElem.parentElement;\n\n        if (basePosition === null || !scrollerElem) {\n            elementToPosition.style.opacity = \"0\";\n            elementToPosition.style.transform = \"translate(-10000px, -10000px)\";\n            return;\n        }\n\n        const rectToPosition = elementToPosition.getBoundingClientRect();\n        const anchorElementRect = anchorElem.getBoundingClientRect();\n        const editorScrollerRect = scrollerElem.getBoundingClientRect();\n\n        let top = basePosition.top - rectToPosition.height - verticalGap;\n        let left = basePosition.left - horizontalOffset;\n\n        if (top < editorScrollerRect.top) {\n            top += rectToPosition.height + basePosition.height + verticalGap * 2;\n        }\n\n        if (left + rectToPosition.width > editorScrollerRect.right) {\n            left = editorScrollerRect.right - rectToPosition.width - horizontalOffset;\n        }\n\n        top -= anchorElementRect.top;\n        left -= anchorElementRect.left;\n\n        elementToPosition.style.opacity = \"1\";\n        elementToPosition.style.transform = `translate(${left}px, ${top}px)`;\n    }, 10);\n}\n"],"mappings":";;;;;;AAAA,IAAMA,YAAY,GAAG,EAAE;AACvB,IAAMC,iBAAiB,GAAG,CAAC;AAEpB,SAASC,uBAAuBA,CACnCC,YAA+B,EAC/BC,iBAA8B,EAC9BC,UAAuB,EAGnB;EAAA,IAFJC,WAAmB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGP,YAAY;EAAA,IAClCU,gBAAwB,GAAAH,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGN,iBAAiB;EAE5C;EACAU,UAAU,CAAC,YAAM;IACb,IAAMC,YAAY,GAAGP,UAAU,CAACQ,aAAa;IAE7C,IAAIV,YAAY,KAAK,IAAI,IAAI,CAACS,YAAY,EAAE;MACxCR,iBAAiB,CAACU,KAAK,CAACC,OAAO,GAAG,GAAG;MACrCX,iBAAiB,CAACU,KAAK,CAACE,SAAS,GAAG,+BAA+B;MACnE;IACJ;IAEA,IAAMC,cAAc,GAAGb,iBAAiB,CAACc,qBAAqB,CAAC,CAAC;IAChE,IAAMC,iBAAiB,GAAGd,UAAU,CAACa,qBAAqB,CAAC,CAAC;IAC5D,IAAME,kBAAkB,GAAGR,YAAY,CAACM,qBAAqB,CAAC,CAAC;IAE/D,IAAIG,GAAG,GAAGlB,YAAY,CAACkB,GAAG,GAAGJ,cAAc,CAACK,MAAM,GAAGhB,WAAW;IAChE,IAAIiB,IAAI,GAAGpB,YAAY,CAACoB,IAAI,GAAGb,gBAAgB;IAE/C,IAAIW,GAAG,GAAGD,kBAAkB,CAACC,GAAG,EAAE;MAC9BA,GAAG,IAAIJ,cAAc,CAACK,MAAM,GAAGnB,YAAY,CAACmB,MAAM,GAAGhB,WAAW,GAAG,CAAC;IACxE;IAEA,IAAIiB,IAAI,GAAGN,cAAc,CAACO,KAAK,GAAGJ,kBAAkB,CAACK,KAAK,EAAE;MACxDF,IAAI,GAAGH,kBAAkB,CAACK,KAAK,GAAGR,cAAc,CAACO,KAAK,GAAGd,gBAAgB;IAC7E;IAEAW,GAAG,IAAIF,iBAAiB,CAACE,GAAG;IAC5BE,IAAI,IAAIJ,iBAAiB,CAACI,IAAI;IAE9BnB,iBAAiB,CAACU,KAAK,CAACC,OAAO,GAAG,GAAG;IACrCX,iBAAiB,CAACU,KAAK,CAACE,SAAS,gBAAAU,MAAA,CAAgBH,IAAI,UAAAG,MAAA,CAAOL,GAAG,QAAK;EACxE,CAAC,EAAE,EAAE,CAAC;AACV","ignoreList":[]}