@payloadcms/richtext-lexical 3.0.0-beta.90 → 3.0.0-beta.91

package/dist/lexical/plugins/handles/AddBlockHandlePlugin/index.js

@@ -1,6 +1,5 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { $createParagraphNode } from 'lexical';
@@ -28,7 +27,6 @@ function getCurrentIndex(keysLength) {
   return Math.floor(keysLength / 2);
 }
 function useAddBlockHandle(editor, anchorElem, isEditable) {
-  const $ = _c(15);
   const scrollerElem = anchorElem.parentElement;
   const {
     editorConfig
@@ -36,156 +34,119 @@ function useAddBlockHandle(editor, anchorElem, isEditable) {
   const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12;
   const menuRef = useRef(null);
   const [hoveredElement, setHoveredElement] = useState(null);
-  let t0;
-  let t1;
-  if ($[0] !== scrollerElem || $[1] !== editor || $[2] !== anchorElem || $[3] !== hoveredElement) {
-    t0 = () => {
-      const onDocumentMouseMove = function onDocumentMouseMove(event) {
-        const target = event.target;
-        if (!isHTMLElement(target)) {
-          return;
-        }
-        const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
-        if (distanceFromScrollerElem === -1) {
-          setHoveredElement(null);
-          return;
-        }
-        if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {
-          return;
-        }
-        const topLevelNodeKeys = getTopLevelNodeKeys(editor);
-        const {
-          blockElem: _emptyBlockElem,
-          blockNode,
-          foundAtIndex
-        } = getNodeCloseToPoint({
-          anchorElem,
-          cache_threshold: 0,
-          editor,
-          horizontalOffset: -distanceFromScrollerElem,
-          point: new Point(event.x, event.y),
-          returnEmptyParagraphs: true,
-          startIndex: getCurrentIndex(topLevelNodeKeys.length),
-          useEdgeAsDefault: false
+  useEffect(() => {
+    function onDocumentMouseMove(event) {
+      const target = event.target;
+      if (!isHTMLElement(target)) {
+        return;
+      }
+      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
+      if (distanceFromScrollerElem === -1) {
+        setHoveredElement(null);
+        return;
+      }
+      if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {
+        return;
+      }
+      const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+      const {
+        blockElem: _emptyBlockElem,
+        blockNode,
+        foundAtIndex
+      } = getNodeCloseToPoint({
+        anchorElem,
+        cache_threshold: 0,
+        editor,
+        horizontalOffset: -distanceFromScrollerElem,
+        point: new Point(event.x, event.y),
+        returnEmptyParagraphs: true,
+        startIndex: getCurrentIndex(topLevelNodeKeys.length),
+        useEdgeAsDefault: false
+      });
+      prevIndex = foundAtIndex;
+      if (!_emptyBlockElem) {
+        return;
+      }
+      if (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem) {
+        setHoveredElement({
+          elem: _emptyBlockElem,
+          node: blockNode
         });
-        prevIndex = foundAtIndex;
-        if (!_emptyBlockElem) {
-          return;
-        }
-        if (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem) {
-          setHoveredElement({
-            elem: _emptyBlockElem,
-            node: blockNode
-          });
-        }
-      };
-      document?.addEventListener("mousemove", onDocumentMouseMove);
-      return () => {
-        document?.removeEventListener("mousemove", onDocumentMouseMove);
-      };
+      }
+    }
+    // Since the draggableBlockElem is outside the actual editor, we need to listen to the document
+    // to be able to detect when the mouse is outside the editor and respect a buffer around
+    // the scrollerElem to avoid the draggableBlockElem disappearing too early.
+    document?.addEventListener('mousemove', onDocumentMouseMove);
+    return () => {
+      document?.removeEventListener('mousemove', onDocumentMouseMove);
     };
-    t1 = [scrollerElem, anchorElem, editor, hoveredElement];
-    $[0] = scrollerElem;
-    $[1] = editor;
-    $[2] = anchorElem;
-    $[3] = hoveredElement;
-    $[4] = t0;
-    $[5] = t1;
-  } else {
-    t0 = $[4];
-    t1 = $[5];
-  }
-  useEffect(t0, t1);
-  let t2;
-  if ($[6] !== anchorElem || $[7] !== hoveredElement || $[8] !== blockHandleHorizontalOffset) {
-    t2 = [anchorElem, hoveredElement, blockHandleHorizontalOffset];
-    $[6] = anchorElem;
-    $[7] = hoveredElement;
-    $[8] = blockHandleHorizontalOffset;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
-  }
+  }, [scrollerElem, anchorElem, editor, hoveredElement]);
   useEffect(() => {
     if (menuRef.current && hoveredElement?.node) {
       setHandlePosition(hoveredElement?.elem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
     }
-  }, t2);
-  let t3;
-  if ($[10] !== hoveredElement || $[11] !== editor) {
-    t3 = event_0 => {
-      let hoveredElementToUse;
-      hoveredElementToUse = hoveredElement;
-      if (!hoveredElementToUse?.node) {
-        return;
+  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset]);
+  const handleAddClick = useCallback(event_0 => {
+    let hoveredElementToUse = hoveredElement;
+    if (!hoveredElementToUse?.node) {
+      return;
+    }
+    // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node
+    editor.update(() => {
+      // Check if blockNode is an empty text node
+      let isEmptyParagraph = true;
+      if (hoveredElementToUse.node.getType() !== 'paragraph' || hoveredElementToUse.node.getTextContent() !== '') {
+        isEmptyParagraph = false;
+      }
+      if (!isEmptyParagraph) {
+        const newParagraph = $createParagraphNode();
+        hoveredElementToUse.node.insertAfter(newParagraph);
+        setTimeout(() => {
+          hoveredElementToUse = {
+            elem: editor.getElementByKey(newParagraph.getKey()),
+            node: newParagraph
+          };
+          setHoveredElement(hoveredElementToUse);
+        }, 0);
       }
+    });
+    // 2. Focus on the new paragraph node
+    setTimeout(() => {
       editor.update(() => {
-        let isEmptyParagraph = true;
-        if (hoveredElementToUse.node.getType() !== "paragraph" || hoveredElementToUse.node.getTextContent() !== "") {
-          isEmptyParagraph = false;
-        }
-        if (!isEmptyParagraph) {
-          const newParagraph = $createParagraphNode();
-          hoveredElementToUse.node.insertAfter(newParagraph);
-          setTimeout(() => {
-            hoveredElementToUse = {
-              elem: editor.getElementByKey(newParagraph.getKey()),
-              node: newParagraph
-            };
-            setHoveredElement(hoveredElementToUse);
-          }, 0);
+        editor.focus();
+        if (hoveredElementToUse.node && 'select' in hoveredElementToUse.node && typeof hoveredElementToUse.node.select === 'function') {
+          hoveredElementToUse.node.select();
         }
       });
-      setTimeout(() => {
-        editor.update(() => {
-          editor.focus();
-          if (hoveredElementToUse.node && "select" in hoveredElementToUse.node && typeof hoveredElementToUse.node.select === "function") {
-            hoveredElementToUse.node.select();
-          }
-        });
-      }, 1);
-      setTimeout(() => {
-        editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {
-          node: hoveredElementToUse.node
-        });
-      }, 2);
-      event_0.stopPropagation();
-      event_0.preventDefault();
-    };
-    $[10] = hoveredElement;
-    $[11] = editor;
-    $[12] = t3;
-  } else {
-    t3 = $[12];
-  }
-  const handleAddClick = t3;
-  let t4;
-  if ($[13] !== handleAddClick) {
-    t4 = event_1 => {
-      handleAddClick(event_1);
-    };
-    $[13] = handleAddClick;
-    $[14] = t4;
-  } else {
-    t4 = $[14];
-  }
-  return createPortal(_jsx(React.Fragment, {
-    children: _jsx("button", {
+    }, 1);
+    // Make sure this is called AFTER the focusing has been processed by the browser
+    // Otherwise, this won't work
+    setTimeout(() => {
+      editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {
+        node: hoveredElementToUse.node
+      });
+    }, 2);
+    event_0.stopPropagation();
+    event_0.preventDefault();
+  }, [editor, hoveredElement]);
+  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/_jsx("button", {
       className: "icon add-block-menu",
-      onClick: t4,
+      onClick: event_1 => {
+        handleAddClick(event_1);
+      },
       ref: menuRef,
       type: "button",
-      children: _jsx("div", {
-        className: isEditable ? "icon" : ""
+      children: /*#__PURE__*/_jsx("div", {
+        className: isEditable ? 'icon' : ''
       })
     })
   }), anchorElem);
 }
-export function AddBlockHandlePlugin(t0) {
-  const {
-    anchorElem: t1
-  } = t0;
-  const anchorElem = t1 === undefined ? document.body : t1;
+export function AddBlockHandlePlugin({
+  anchorElem = document.body
+}) {
   const [editor] = useLexicalComposerContext();
   return useAddBlockHandle(editor, anchorElem, editor._editable);
 }

package/dist/lexical/plugins/handles/AddBlockHandlePlugin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useLexicalComposerContext","$createParagraphNode","React","useCallback","useEffect","useRef","useState","createPortal","useEditorConfigContext","isHTMLElement","Point","ENABLE_SLASH_MENU_COMMAND","calculateDistanceFromScrollerElem","getNodeCloseToPoint","getTopLevelNodeKeys","isOnHandleElement","setHandlePosition","ADD_BLOCK_MENU_CLASSNAME","prevIndex","Infinity","getCurrentIndex","keysLength","Math","floor","useAddBlockHandle","editor","anchorElem","isEditable","$","scrollerElem","parentElement","editorConfig","blockHandleHorizontalOffset","admin","hideGutter","menuRef","hoveredElement","setHoveredElement","t0","t1","onDocumentMouseMove","event","target","distanceFromScrollerElem","pageX","pageY","topLevelNodeKeys","blockElem","_emptyBlockElem","blockNode","foundAtIndex","cache_threshold","horizontalOffset","point","x","y","returnEmptyParagraphs","startIndex","length","useEdgeAsDefault","node","elem","document","addEventListener","removeEventListener","t2","current","t3","event_0","hoveredElementToUse","update","isEmptyParagraph","getType","getTextContent","newParagraph","insertAfter","setTimeout","getElementByKey","getKey","focus","select","dispatchCommand","stopPropagation","preventDefault","handleAddClick","t4","event_1","_jsx","Fragment","children","className","onClick","ref","type","AddBlockHandlePlugin","undefined","body","_editable"],"sources":["../../../../../src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor, LexicalNode, ParagraphNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $createParagraphNode } from 'lexical'\nimport * as React from 'react'\nimport { type JSX, useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js'\nimport { isHTMLElement } from '../../../utils/guard.js'\nimport { Point } from '../../../utils/point.js'\nimport { ENABLE_SLASH_MENU_COMMAND } from '../../SlashMenu/LexicalTypeaheadMenuPlugin/index.js'\nimport { calculateDistanceFromScrollerElem } from '../utils/calculateDistanceFromScrollerElem.js'\nimport { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js'\nimport { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js'\nimport { isOnHandleElement } from '../utils/isOnHandleElement.js'\nimport { setHandlePosition } from '../utils/setHandlePosition.js'\nimport './index.scss'\n\nconst ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu'\n\nlet prevIndex = Infinity\n\nfunction getCurrentIndex(keysLength: number): number {\n  if (keysLength === 0) {\n    return Infinity\n  }\n  if (prevIndex >= 0 && prevIndex < keysLength) {\n    return prevIndex\n  }\n\n  return Math.floor(keysLength / 2)\n}\n\nfunction useAddBlockHandle(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n  isEditable: boolean,\n): React.ReactElement {\n  const scrollerElem = anchorElem.parentElement\n\n  const { editorConfig } = useEditorConfigContext()\n  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12\n\n  const menuRef = useRef<HTMLButtonElement>(null)\n  const [hoveredElement, setHoveredElement] = useState<{\n    elem: HTMLElement\n    node: LexicalNode\n  } | null>(null)\n\n  useEffect(() => {\n    function onDocumentMouseMove(event: MouseEvent) {\n      const target = event.target\n      if (!isHTMLElement(target)) {\n        return\n      }\n\n      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n        scrollerElem,\n        event.pageX,\n        event.pageY,\n        target,\n      )\n\n      if (distanceFromScrollerElem === -1) {\n        setHoveredElement(null)\n        return\n      }\n\n      if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {\n        return\n      }\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: _emptyBlockElem,\n        blockNode,\n        foundAtIndex,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        cache_threshold: 0,\n        editor,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        returnEmptyParagraphs: true,\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: false,\n      })\n\n      prevIndex = foundAtIndex\n\n      if (!_emptyBlockElem) {\n        return\n      }\n      if (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem) {\n        setHoveredElement({\n          elem: _emptyBlockElem,\n          node: blockNode,\n        })\n      }\n    }\n\n    // Since the draggableBlockElem is outside the actual editor, we need to listen to the document\n    // to be able to detect when the mouse is outside the editor and respect a buffer around\n    // the scrollerElem to avoid the draggableBlockElem disappearing too early.\n    document?.addEventListener('mousemove', onDocumentMouseMove)\n\n    return () => {\n      document?.removeEventListener('mousemove', onDocumentMouseMove)\n    }\n  }, [scrollerElem, anchorElem, editor, hoveredElement])\n\n  useEffect(() => {\n    if (menuRef.current && hoveredElement?.node) {\n      setHandlePosition(\n        hoveredElement?.elem,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])\n\n  const handleAddClick = useCallback(\n    (event) => {\n      let hoveredElementToUse = hoveredElement\n      if (!hoveredElementToUse?.node) {\n        return\n      }\n\n      // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node\n      editor.update(() => {\n        // Check if blockNode is an empty text node\n        let isEmptyParagraph = true\n        if (\n          hoveredElementToUse.node.getType() !== 'paragraph' ||\n          hoveredElementToUse.node.getTextContent() !== ''\n        ) {\n          isEmptyParagraph = false\n        }\n\n        if (!isEmptyParagraph) {\n          const newParagraph = $createParagraphNode()\n          hoveredElementToUse.node.insertAfter(newParagraph)\n\n          setTimeout(() => {\n            hoveredElementToUse = {\n              elem: editor.getElementByKey(newParagraph.getKey()),\n              node: newParagraph,\n            }\n            setHoveredElement(hoveredElementToUse)\n          }, 0)\n        }\n      })\n\n      // 2. Focus on the new paragraph node\n      setTimeout(() => {\n        editor.update(() => {\n          editor.focus()\n\n          if (\n            hoveredElementToUse.node &&\n            'select' in hoveredElementToUse.node &&\n            typeof hoveredElementToUse.node.select === 'function'\n          ) {\n            hoveredElementToUse.node.select()\n          }\n        })\n      }, 1)\n\n      // Make sure this is called AFTER the focusing has been processed by the browser\n      // Otherwise, this won't work\n      setTimeout(() => {\n        editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {\n          node: hoveredElementToUse.node as ParagraphNode,\n        })\n      }, 2)\n\n      event.stopPropagation()\n      event.preventDefault()\n    },\n    [editor, hoveredElement],\n  )\n\n  return createPortal(\n    <React.Fragment>\n      <button\n        className=\"icon add-block-menu\"\n        onClick={(event) => {\n          handleAddClick(event)\n        }}\n        ref={menuRef}\n        type=\"button\"\n      >\n        <div className={isEditable ? 'icon' : ''} />\n      </button>\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n\nexport function AddBlockHandlePlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): React.ReactElement {\n  const [editor] = useLexicalComposerContext()\n  return useAddBlockHandle(editor, anchorElem, editor._editable)\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useLexicalComposerContext","$createParagraphNode","React","useCallback","useEffect","useRef","useState","createPortal","useEditorConfigContext","isHTMLElement","Point","ENABLE_SLASH_MENU_COMMAND","calculateDistanceFromScrollerElem","getNodeCloseToPoint","getTopLevelNodeKeys","isOnHandleElement","setHandlePosition","ADD_BLOCK_MENU_CLASSNAME","prevIndex","Infinity","getCurrentIndex","keysLength","Math","floor","useAddBlockHandle","editor","anchorElem","isEditable","scrollerElem","parentElement","editorConfig","blockHandleHorizontalOffset","admin","hideGutter","menuRef","hoveredElement","setHoveredElement","onDocumentMouseMove","event","target","distanceFromScrollerElem","pageX","pageY","topLevelNodeKeys","blockElem","_emptyBlockElem","blockNode","foundAtIndex","cache_threshold","horizontalOffset","point","x","y","returnEmptyParagraphs","startIndex","length","useEdgeAsDefault","node","elem","document","addEventListener","removeEventListener","current","handleAddClick","hoveredElementToUse","update","isEmptyParagraph","getType","getTextContent","newParagraph","insertAfter","setTimeout","getElementByKey","getKey","focus","select","dispatchCommand","stopPropagation","preventDefault","_jsx","Fragment","className","onClick","ref","type","AddBlockHandlePlugin","body","_editable"],"sources":["../../../../../src/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor, LexicalNode, ParagraphNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $createParagraphNode } from 'lexical'\nimport * as React from 'react'\nimport { type JSX, useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js'\nimport { isHTMLElement } from '../../../utils/guard.js'\nimport { Point } from '../../../utils/point.js'\nimport { ENABLE_SLASH_MENU_COMMAND } from '../../SlashMenu/LexicalTypeaheadMenuPlugin/index.js'\nimport { calculateDistanceFromScrollerElem } from '../utils/calculateDistanceFromScrollerElem.js'\nimport { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js'\nimport { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js'\nimport { isOnHandleElement } from '../utils/isOnHandleElement.js'\nimport { setHandlePosition } from '../utils/setHandlePosition.js'\nimport './index.scss'\n\nconst ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu'\n\nlet prevIndex = Infinity\n\nfunction getCurrentIndex(keysLength: number): number {\n  if (keysLength === 0) {\n    return Infinity\n  }\n  if (prevIndex >= 0 && prevIndex < keysLength) {\n    return prevIndex\n  }\n\n  return Math.floor(keysLength / 2)\n}\n\nfunction useAddBlockHandle(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n  isEditable: boolean,\n): React.ReactElement {\n  const scrollerElem = anchorElem.parentElement\n\n  const { editorConfig } = useEditorConfigContext()\n  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12\n\n  const menuRef = useRef<HTMLButtonElement>(null)\n  const [hoveredElement, setHoveredElement] = useState<{\n    elem: HTMLElement\n    node: LexicalNode\n  } | null>(null)\n\n  useEffect(() => {\n    function onDocumentMouseMove(event: MouseEvent) {\n      const target = event.target\n      if (!isHTMLElement(target)) {\n        return\n      }\n\n      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n        scrollerElem,\n        event.pageX,\n        event.pageY,\n        target,\n      )\n\n      if (distanceFromScrollerElem === -1) {\n        setHoveredElement(null)\n        return\n      }\n\n      if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {\n        return\n      }\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: _emptyBlockElem,\n        blockNode,\n        foundAtIndex,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        cache_threshold: 0,\n        editor,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        returnEmptyParagraphs: true,\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: false,\n      })\n\n      prevIndex = foundAtIndex\n\n      if (!_emptyBlockElem) {\n        return\n      }\n      if (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem) {\n        setHoveredElement({\n          elem: _emptyBlockElem,\n          node: blockNode,\n        })\n      }\n    }\n\n    // Since the draggableBlockElem is outside the actual editor, we need to listen to the document\n    // to be able to detect when the mouse is outside the editor and respect a buffer around\n    // the scrollerElem to avoid the draggableBlockElem disappearing too early.\n    document?.addEventListener('mousemove', onDocumentMouseMove)\n\n    return () => {\n      document?.removeEventListener('mousemove', onDocumentMouseMove)\n    }\n  }, [scrollerElem, anchorElem, editor, hoveredElement])\n\n  useEffect(() => {\n    if (menuRef.current && hoveredElement?.node) {\n      setHandlePosition(\n        hoveredElement?.elem,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])\n\n  const handleAddClick = useCallback(\n    (event) => {\n      let hoveredElementToUse = hoveredElement\n      if (!hoveredElementToUse?.node) {\n        return\n      }\n\n      // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node\n      editor.update(() => {\n        // Check if blockNode is an empty text node\n        let isEmptyParagraph = true\n        if (\n          hoveredElementToUse.node.getType() !== 'paragraph' ||\n          hoveredElementToUse.node.getTextContent() !== ''\n        ) {\n          isEmptyParagraph = false\n        }\n\n        if (!isEmptyParagraph) {\n          const newParagraph = $createParagraphNode()\n          hoveredElementToUse.node.insertAfter(newParagraph)\n\n          setTimeout(() => {\n            hoveredElementToUse = {\n              elem: editor.getElementByKey(newParagraph.getKey()),\n              node: newParagraph,\n            }\n            setHoveredElement(hoveredElementToUse)\n          }, 0)\n        }\n      })\n\n      // 2. Focus on the new paragraph node\n      setTimeout(() => {\n        editor.update(() => {\n          editor.focus()\n\n          if (\n            hoveredElementToUse.node &&\n            'select' in hoveredElementToUse.node &&\n            typeof hoveredElementToUse.node.select === 'function'\n          ) {\n            hoveredElementToUse.node.select()\n          }\n        })\n      }, 1)\n\n      // Make sure this is called AFTER the focusing has been processed by the browser\n      // Otherwise, this won't work\n      setTimeout(() => {\n        editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {\n          node: hoveredElementToUse.node as ParagraphNode,\n        })\n      }, 2)\n\n      event.stopPropagation()\n      event.preventDefault()\n    },\n    [editor, hoveredElement],\n  )\n\n  return createPortal(\n    <React.Fragment>\n      <button\n        className=\"icon add-block-menu\"\n        onClick={(event) => {\n          handleAddClick(event)\n        }}\n        ref={menuRef}\n        type=\"button\"\n      >\n        <div className={isEditable ? 'icon' : ''} />\n      </button>\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n\nexport function AddBlockHandlePlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): React.ReactElement {\n  const [editor] = useLexicalComposerContext()\n  return useAddBlockHandle(editor, anchorElem, editor._editable)\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/lexical/plugins/handles/DraggableBlockPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,cAAc,CAAA;AAuarB,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,KAAK,CAAC,YAAY,CAGrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,cAAc,CAAA;AAiarB,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,KAAK,CAAC,YAAY,CAGrB"}