@payloadcms/richtext-lexical 3.0.0-canary.95fcd13 → 3.0.0-canary.9beaa28

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

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { eventFiles } from '@lexical/rich-text';
@@ -20,323 +22,352 @@ const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
 const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
 let prevIndex = Infinity;
 function getCurrentIndex(keysLength) {
-    if (keysLength === 0) {
-        return Infinity;
-    }
-    if (prevIndex >= 0 && prevIndex < keysLength) {
-        return prevIndex;
-    }
-    return Math.floor(keysLength / 2);
+  if (keysLength === 0) {
+    return Infinity;
+  }
+  if (prevIndex >= 0 && prevIndex < keysLength) {
+    return prevIndex;
+  }
+  return Math.floor(keysLength / 2);
 }
 function setDragImage(dataTransfer, draggableBlockElem) {
-    const { transform } = draggableBlockElem.style;
-    // Remove dragImage borders
-    dataTransfer.setDragImage(draggableBlockElem, 0, 0);
-    setTimeout(()=>{
-        draggableBlockElem.style.transform = transform;
-    });
+  const {
+    transform
+  } = draggableBlockElem.style;
+  // Remove dragImage borders
+  dataTransfer.setDragImage(draggableBlockElem, 0, 0);
+  setTimeout(() => {
+    draggableBlockElem.style.transform = transform;
+  });
 }
 function hideTargetLine(targetLineElem, lastTargetBlockElem) {
-    if (targetLineElem) {
-        targetLineElem.style.opacity = '0';
-    }
-    if (lastTargetBlockElem) {
-        lastTargetBlockElem.style.opacity = '';
-        // Delete marginBottom and marginTop values we set
-        lastTargetBlockElem.style.marginBottom = '';
-        lastTargetBlockElem.style.marginTop = '';
+  if (targetLineElem) {
+    targetLineElem.style.opacity = '0';
+  }
+  if (lastTargetBlockElem) {
+    lastTargetBlockElem.style.opacity = '';
+    // Delete marginBottom and marginTop values we set
+    lastTargetBlockElem.style.marginBottom = '';
+    lastTargetBlockElem.style.marginTop = '';
     //lastTargetBlock.style.border = 'none'
-    }
+  }
 }
 function useDraggableBlockMenu(editor, anchorElem, isEditable) {
-    const scrollerElem = anchorElem.parentElement;
-    const menuRef = useRef(null);
-    const targetLineRef = useRef(null);
-    const debugHighlightRef = useRef(null);
-    const isDraggingBlockRef = useRef(false);
-    const [draggableBlockElem, setDraggableBlockElem] = useState(null);
-    const [lastTargetBlock, setLastTargetBlock] = useState(null);
-    const { editorConfig } = useEditorConfigContext();
-    const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -44 : -8;
-    useEffect(()=>{
-        /**
-     * Handles positioning of the drag handle
-     */ function onDocumentMouseMove(event) {
-            const target = event.target;
-            if (!isHTMLElement(target)) {
-                return;
-            }
-            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
-            if (distanceFromScrollerElem === -1) {
-                setDraggableBlockElem(null);
-                return;
-            }
-            if (isOnHandleElement(target, DRAGGABLE_BLOCK_MENU_CLASSNAME)) {
-                return;
-            }
-            const topLevelNodeKeys = getTopLevelNodeKeys(editor);
-            const { blockElem: _draggableBlockElem, foundAtIndex, isFoundNodeEmptyParagraph } = getNodeCloseToPoint({
-                anchorElem,
-                cache_threshold: 0,
-                editor,
-                horizontalOffset: -distanceFromScrollerElem,
-                point: new Point(event.x, event.y),
-                startIndex: getCurrentIndex(topLevelNodeKeys.length),
-                useEdgeAsDefault: false,
-                verbose: false
-            });
-            prevIndex = foundAtIndex;
-            //if (DEBUG && _draggableBlockElem) {
-            //targetBlockElem.style.border = '3px solid red'
-            // highlightElemOriginalPosition(debugHighlightRef, _draggableBlockElem, anchorElem)
-            //}
-            if (!_draggableBlockElem && !isFoundNodeEmptyParagraph) {
-                return;
-            }
-            if (draggableBlockElem !== _draggableBlockElem) {
-                setDraggableBlockElem(_draggableBlockElem);
-            }
+  const $ = _c(19);
+  const scrollerElem = anchorElem.parentElement;
+  const menuRef = useRef(null);
+  const targetLineRef = useRef(null);
+  const debugHighlightRef = useRef(null);
+  const isDraggingBlockRef = useRef(false);
+  const [draggableBlockElem, setDraggableBlockElem] = useState(null);
+  const [lastTargetBlock, setLastTargetBlock] = useState(null);
+  const {
+    editorConfig
+  } = useEditorConfigContext();
+  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -44 : -8;
+  let t0;
+  let t1;
+  if ($[0] !== scrollerElem || $[1] !== editor || $[2] !== anchorElem || $[3] !== draggableBlockElem) {
+    t0 = () => {
+      const onDocumentMouseMove = function onDocumentMouseMove(event) {
+        const target = event.target;
+        if (!isHTMLElement(target)) {
+          return;
         }
-        // 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);
-        };
-    }, [
-        scrollerElem,
+        const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
+        if (distanceFromScrollerElem === -1) {
+          setDraggableBlockElem(null);
+          return;
+        }
+        if (isOnHandleElement(target, DRAGGABLE_BLOCK_MENU_CLASSNAME)) {
+          return;
+        }
+        const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+        const {
+          blockElem: _draggableBlockElem,
+          foundAtIndex,
+          isFoundNodeEmptyParagraph
+        } = getNodeCloseToPoint({
+          anchorElem,
+          cache_threshold: 0,
+          editor,
+          horizontalOffset: -distanceFromScrollerElem,
+          point: new Point(event.x, event.y),
+          startIndex: getCurrentIndex(topLevelNodeKeys.length),
+          useEdgeAsDefault: false,
+          verbose: false
+        });
+        prevIndex = foundAtIndex;
+        if (!_draggableBlockElem && !isFoundNodeEmptyParagraph) {
+          return;
+        }
+        if (draggableBlockElem !== _draggableBlockElem) {
+          setDraggableBlockElem(_draggableBlockElem);
+        }
+      };
+      document?.addEventListener("mousemove", onDocumentMouseMove);
+      return () => {
+        document?.removeEventListener("mousemove", onDocumentMouseMove);
+      };
+    };
+    t1 = [scrollerElem, anchorElem, editor, draggableBlockElem];
+    $[0] = scrollerElem;
+    $[1] = editor;
+    $[2] = anchorElem;
+    $[3] = draggableBlockElem;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t0 = $[4];
+    t1 = $[5];
+  }
+  useEffect(t0, t1);
+  let t2;
+  let t3;
+  if ($[6] !== draggableBlockElem || $[7] !== anchorElem || $[8] !== blockHandleHorizontalOffset) {
+    t2 = () => {
+      if (menuRef.current) {
+        setHandlePosition(draggableBlockElem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
+      }
+    };
+    t3 = [anchorElem, draggableBlockElem, blockHandleHorizontalOffset];
+    $[6] = draggableBlockElem;
+    $[7] = anchorElem;
+    $[8] = blockHandleHorizontalOffset;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t2 = $[9];
+    t3 = $[10];
+  }
+  useEffect(t2, t3);
+  const t4 = editorConfig?.admin?.hideGutter;
+  let t5;
+  if ($[11] !== scrollerElem || $[12] !== blockHandleHorizontalOffset || $[13] !== anchorElem || $[14] !== editor || $[15] !== lastTargetBlock || $[16] !== draggableBlockElem || $[17] !== t4) {
+    t5 = [scrollerElem, blockHandleHorizontalOffset, anchorElem, editor, lastTargetBlock, draggableBlockElem, t4];
+    $[11] = scrollerElem;
+    $[12] = blockHandleHorizontalOffset;
+    $[13] = anchorElem;
+    $[14] = editor;
+    $[15] = lastTargetBlock;
+    $[16] = draggableBlockElem;
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  useEffect(() => {
+    const onDragover = function onDragover(event_0) {
+      if (!isDraggingBlockRef.current) {
+        return false;
+      }
+      const [isFileTransfer] = eventFiles(event_0);
+      if (isFileTransfer) {
+        return false;
+      }
+      const {
+        pageY,
+        target: target_0
+      } = event_0;
+      if (!isHTMLElement(target_0)) {
+        return false;
+      }
+      const distanceFromScrollerElem_0 = calculateDistanceFromScrollerElem(scrollerElem, event_0.pageX, event_0.pageY, target_0, 100, 50);
+      const topLevelNodeKeys_0 = getTopLevelNodeKeys(editor);
+      const {
+        blockElem: targetBlockElem,
+        foundAtIndex: foundAtIndex_0,
+        isFoundNodeEmptyParagraph: isFoundNodeEmptyParagraph_0
+      } = getNodeCloseToPoint({
         anchorElem,
         editor,
-        draggableBlockElem
-    ]);
-    useEffect(()=>{
-        if (menuRef.current) {
-            setHandlePosition(draggableBlockElem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
+        fuzzy: true,
+        horizontalOffset: -distanceFromScrollerElem_0,
+        point: new Point(event_0.x, event_0.y),
+        startIndex: getCurrentIndex(topLevelNodeKeys_0.length),
+        useEdgeAsDefault: true,
+        verbose: true
+      });
+      prevIndex = foundAtIndex_0;
+      const targetLineElem = targetLineRef.current;
+      if (targetBlockElem === null || targetLineElem === null) {
+        return false;
+      }
+      if (draggableBlockElem !== targetBlockElem) {
+        const {
+          isBelow,
+          willStayInSamePosition
+        } = setTargetLine(editorConfig?.admin?.hideGutter ? "0px" : "3rem", blockHandleHorizontalOffset + (editorConfig?.admin?.hideGutter ? menuRef?.current?.getBoundingClientRect()?.width ?? 0 : -(menuRef?.current?.getBoundingClientRect()?.width ?? 0)), targetLineElem, targetBlockElem, lastTargetBlock, pageY, anchorElem, event_0, debugHighlightRef, isFoundNodeEmptyParagraph_0);
+        event_0.preventDefault();
+        if (!willStayInSamePosition) {
+          setLastTargetBlock({
+            boundingBox: targetBlockElem.getBoundingClientRect(),
+            elem: targetBlockElem,
+            isBelow
+          });
         }
-    }, [
-        anchorElem,
-        draggableBlockElem,
-        blockHandleHorizontalOffset
-    ]);
-    useEffect(()=>{
-        function onDragover(event) {
-            if (!isDraggingBlockRef.current) {
-                return false;
-            }
-            const [isFileTransfer] = eventFiles(event);
-            if (isFileTransfer) {
-                return false;
-            }
-            const { pageY, target } = event;
-            if (!isHTMLElement(target)) {
-                return false;
-            }
-            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target, 100, 50);
-            const topLevelNodeKeys = getTopLevelNodeKeys(editor);
-            const { blockElem: targetBlockElem, foundAtIndex, isFoundNodeEmptyParagraph } = getNodeCloseToPoint({
-                anchorElem,
-                editor,
-                fuzzy: true,
-                horizontalOffset: -distanceFromScrollerElem,
-                point: new Point(event.x, event.y),
-                startIndex: getCurrentIndex(topLevelNodeKeys.length),
-                useEdgeAsDefault: true,
-                verbose: true
-            });
-            prevIndex = foundAtIndex;
-            const targetLineElem = targetLineRef.current;
-            // targetBlockElem === null shouldn't happen
-            if (targetBlockElem === null || targetLineElem === null) {
-                return false;
-            }
-            if (draggableBlockElem !== targetBlockElem) {
-                const { isBelow, willStayInSamePosition } = setTargetLine(editorConfig?.admin?.hideGutter ? '0px' : '3rem', blockHandleHorizontalOffset + (editorConfig?.admin?.hideGutter ? menuRef?.current?.getBoundingClientRect()?.width ?? 0 : -(menuRef?.current?.getBoundingClientRect()?.width ?? 0)), targetLineElem, targetBlockElem, lastTargetBlock, pageY, anchorElem, event, debugHighlightRef, isFoundNodeEmptyParagraph);
-                // Prevent default event to be able to trigger onDrop events
-                // Calling preventDefault() adds the green plus icon to the cursor,
-                // indicating that the drop is allowed.
-                event.preventDefault();
-                if (!willStayInSamePosition) {
-                    setLastTargetBlock({
-                        boundingBox: targetBlockElem.getBoundingClientRect(),
-                        elem: targetBlockElem,
-                        isBelow
-                    });
-                }
-            } else {
-                hideTargetLine(targetLineElem, lastTargetBlock?.elem);
-                setLastTargetBlock({
-                    boundingBox: targetBlockElem.getBoundingClientRect(),
-                    elem: targetBlockElem,
-                    isBelow: false
-                });
-            }
-            return true;
+      } else {
+        hideTargetLine(targetLineElem, lastTargetBlock?.elem);
+        setLastTargetBlock({
+          boundingBox: targetBlockElem.getBoundingClientRect(),
+          elem: targetBlockElem,
+          isBelow: false
+        });
+      }
+      return true;
+    };
+    const onDrop = function onDrop(event_1) {
+      if (!isDraggingBlockRef.current) {
+        return false;
+      }
+      const [isFileTransfer_0] = eventFiles(event_1);
+      if (isFileTransfer_0) {
+        return false;
+      }
+      const {
+        dataTransfer,
+        pageY: pageY_0,
+        target: target_1
+      } = event_1;
+      const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || "";
+      editor.update(() => {
+        const draggedNode = $getNodeByKey(dragData);
+        if (!draggedNode) {
+          return false;
+        }
+        if (!isHTMLElement(target_1)) {
+          return false;
+        }
+        const distanceFromScrollerElem_1 = calculateDistanceFromScrollerElem(scrollerElem, event_1.pageX, event_1.pageY, target_1, 100, 50);
+        const {
+          blockElem: targetBlockElem_0,
+          isFoundNodeEmptyParagraph: isFoundNodeEmptyParagraph_1
+        } = getNodeCloseToPoint({
+          anchorElem,
+          editor,
+          fuzzy: true,
+          horizontalOffset: -distanceFromScrollerElem_1,
+          point: new Point(event_1.x, event_1.y),
+          useEdgeAsDefault: true
+        });
+        if (!targetBlockElem_0) {
+          return false;
+        }
+        const targetNode = $getNearestNodeFromDOMNode(targetBlockElem_0);
+        if (!targetNode) {
+          return false;
+        }
+        if (targetNode === draggedNode) {
+          return true;
         }
-        function onDrop(event) {
-            if (!isDraggingBlockRef.current) {
-                return false;
-            }
-            const [isFileTransfer] = eventFiles(event);
-            if (isFileTransfer) {
-                return false;
-            }
-            const { dataTransfer, pageY, target } = event;
-            const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || '';
-            editor.update(()=>{
-                const draggedNode = $getNodeByKey(dragData);
-                if (!draggedNode) {
-                    return false;
-                }
-                if (!isHTMLElement(target)) {
-                    return false;
-                }
-                const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target, 100, 50);
-                const { blockElem: targetBlockElem, isFoundNodeEmptyParagraph } = getNodeCloseToPoint({
-                    anchorElem,
-                    editor,
-                    fuzzy: true,
-                    horizontalOffset: -distanceFromScrollerElem,
-                    point: new Point(event.x, event.y),
-                    useEdgeAsDefault: true
-                });
-                if (!targetBlockElem) {
-                    return false;
-                }
-                const targetNode = $getNearestNodeFromDOMNode(targetBlockElem);
-                if (!targetNode) {
-                    return false;
-                }
-                if (targetNode === draggedNode) {
-                    return true;
-                }
-                const { height: targetBlockElemHeight, top: targetBlockElemTop } = getBoundingClientRectWithoutTransform(targetBlockElem);
-                const mouseY = pageY;
-                const isBelow = mouseY >= targetBlockElemTop + targetBlockElemHeight / 2 + window.scrollY;
-                if (!isFoundNodeEmptyParagraph) {
-                    if (isBelow) {
-                        // below targetBlockElem
-                        targetNode.insertAfter(draggedNode);
-                    } else {
-                        // above targetBlockElem
-                        targetNode.insertBefore(draggedNode);
-                    }
-                } else {
-                    //
-                    targetNode.insertBefore(draggedNode);
-                    targetNode.remove();
-                }
-                /*
-        if (pageY >= targetBlockElemTop + targetBlockElemHeight / 2) {
-          targetNode.insertAfter(draggedNode)
+        const {
+          height: targetBlockElemHeight,
+          top: targetBlockElemTop
+        } = getBoundingClientRectWithoutTransform(targetBlockElem_0);
+        const mouseY = pageY_0;
+        const isBelow_0 = mouseY >= targetBlockElemTop + targetBlockElemHeight / 2 + window.scrollY;
+        if (!isFoundNodeEmptyParagraph_1) {
+          if (isBelow_0) {
+            targetNode.insertAfter(draggedNode);
+          } else {
+            targetNode.insertBefore(draggedNode);
+          }
         } else {
-          targetNode.insertBefore(draggedNode)
-        }*/ if (draggableBlockElem !== null) {
-                    setDraggableBlockElem(null);
-                }
-                // find all previous elements with lexical-block-highlighter class and remove them
-                const allPrevHighlighters = document.querySelectorAll('.lexical-block-highlighter');
-                allPrevHighlighters.forEach((highlighter)=>{
-                    highlighter.remove();
-                });
-                const newInsertedElem = editor.getElementByKey(draggedNode.getKey());
-                setTimeout(()=>{
-                    // add new temp html element to newInsertedElem with the same height and width and the class block-selected
-                    // to highlight the new inserted element
-                    const newInsertedElemRect = newInsertedElem.getBoundingClientRect();
-                    const highlightElem = document.createElement('div');
-                    highlightElem.className = 'lexical-block-highlighter';
-                    // if html data-theme is dark, set the highlighter color to white
-                    if (document.documentElement.getAttribute('data-theme') === 'dark') {
-                        highlightElem.style.backgroundColor = 'white';
-                    } else {
-                        highlightElem.style.backgroundColor = 'black';
-                    }
-                    highlightElem.style.transition = 'opacity 0.1s ease-in-out';
-                    highlightElem.style.zIndex = '1';
-                    highlightElem.style.pointerEvents = 'none';
-                    highlightElem.style.boxSizing = 'border-box';
-                    highlightElem.style.borderRadius = '4px';
-                    highlightElem.style.position = 'absolute';
-                    document.body.appendChild(highlightElem);
-                    highlightElem.style.opacity = '0.1';
-                    highlightElem.style.height = `${newInsertedElemRect.height + 8}px`;
-                    highlightElem.style.width = `${newInsertedElemRect.width + 8}px`;
-                    highlightElem.style.top = `${newInsertedElemRect.top + window.scrollY - 4}px`;
-                    highlightElem.style.left = `${newInsertedElemRect.left - 4}px`;
-                    setTimeout(()=>{
-                        highlightElem.style.opacity = '0';
-                        setTimeout(()=>{
-                            highlightElem.remove();
-                        }, 1000);
-                    }, 3000);
-                }, 120);
-            });
-            return true;
+          targetNode.insertBefore(draggedNode);
+          targetNode.remove();
         }
-        // register onDragover event listeners:
-        document.addEventListener('dragover', onDragover);
-        // register onDrop event listeners:
-        document.addEventListener('drop', onDrop);
-        return ()=>{
-            document.removeEventListener('dragover', onDragover);
-            document.removeEventListener('drop', onDrop);
-        };
-    }, [
-        scrollerElem,
-        blockHandleHorizontalOffset,
-        anchorElem,
-        editor,
-        lastTargetBlock,
-        draggableBlockElem,
-        editorConfig?.admin?.hideGutter
-    ]);
-    function onDragStart(event) {
-        const dataTransfer = event.dataTransfer;
-        if (!dataTransfer || !draggableBlockElem) {
-            return;
+        if (draggableBlockElem !== null) {
+          setDraggableBlockElem(null);
         }
-        setDragImage(dataTransfer, draggableBlockElem);
-        let nodeKey = '';
-        editor.update(()=>{
-            const node = $getNearestNodeFromDOMNode(draggableBlockElem);
-            if (node) {
-                nodeKey = node.getKey();
-            }
+        const allPrevHighlighters = document.querySelectorAll(".lexical-block-highlighter");
+        allPrevHighlighters.forEach(highlighter => {
+          highlighter.remove();
         });
-        isDraggingBlockRef.current = true;
-        dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
-    }
-    function onDragEnd() {
-        isDraggingBlockRef.current = false;
-        hideTargetLine(targetLineRef.current, lastTargetBlock?.elem);
+        const newInsertedElem = editor.getElementByKey(draggedNode.getKey());
+        setTimeout(() => {
+          const newInsertedElemRect = newInsertedElem.getBoundingClientRect();
+          const highlightElem = document.createElement("div");
+          highlightElem.className = "lexical-block-highlighter";
+          if (document.documentElement.getAttribute("data-theme") === "dark") {
+            highlightElem.style.backgroundColor = "white";
+          } else {
+            highlightElem.style.backgroundColor = "black";
+          }
+          highlightElem.style.transition = "opacity 0.1s ease-in-out";
+          highlightElem.style.zIndex = "1";
+          highlightElem.style.pointerEvents = "none";
+          highlightElem.style.boxSizing = "border-box";
+          highlightElem.style.borderRadius = "4px";
+          highlightElem.style.position = "absolute";
+          document.body.appendChild(highlightElem);
+          highlightElem.style.opacity = "0.1";
+          highlightElem.style.height = `${newInsertedElemRect.height + 8}px`;
+          highlightElem.style.width = `${newInsertedElemRect.width + 8}px`;
+          highlightElem.style.top = `${newInsertedElemRect.top + window.scrollY - 4}px`;
+          highlightElem.style.left = `${newInsertedElemRect.left - 4}px`;
+          setTimeout(() => {
+            highlightElem.style.opacity = "0";
+            setTimeout(() => {
+              highlightElem.remove();
+            }, 1000);
+          }, 3000);
+        }, 120);
+      });
+      return true;
+    };
+    document.addEventListener("dragover", onDragover);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragover", onDragover);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, t5);
+  const onDragStart = function onDragStart(event_2) {
+    const dataTransfer_0 = event_2.dataTransfer;
+    if (!dataTransfer_0 || !draggableBlockElem) {
+      return;
     }
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs(React.Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: "icon draggable-block-menu",
-                draggable: true,
-                onDragEnd: onDragEnd,
-                onDragStart: onDragStart,
-                ref: menuRef,
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: isEditable ? 'icon' : ''
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "draggable-block-target-line",
-                ref: targetLineRef
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "debug-highlight",
-                ref: debugHighlightRef
-            })
-        ]
-    }), anchorElem);
+    setDragImage(dataTransfer_0, draggableBlockElem);
+    let nodeKey;
+    nodeKey = "";
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(draggableBlockElem);
+      if (node) {
+        nodeKey = node.getKey();
+      }
+    });
+    isDraggingBlockRef.current = true;
+    dataTransfer_0.setData(DRAG_DATA_FORMAT, nodeKey);
+  };
+  const onDragEnd = function onDragEnd() {
+    isDraggingBlockRef.current = false;
+    hideTargetLine(targetLineRef.current, lastTargetBlock?.elem);
+  };
+  return createPortal(_jsxs(React.Fragment, {
+    children: [_jsx("div", {
+      className: "icon draggable-block-menu",
+      draggable: true,
+      onDragEnd,
+      onDragStart,
+      ref: menuRef,
+      children: _jsx("div", {
+        className: isEditable ? "icon" : ""
+      })
+    }), _jsx("div", {
+      className: "draggable-block-target-line",
+      ref: targetLineRef
+    }), _jsx("div", {
+      className: "debug-highlight",
+      ref: debugHighlightRef
+    })]
+  }), anchorElem);
 }
-export function DraggableBlockPlugin({ anchorElem = document.body }) {
-    const [editor] = useLexicalComposerContext();
-    return useDraggableBlockMenu(editor, anchorElem, editor._editable);
+export function DraggableBlockPlugin(t0) {
+  const {
+    anchorElem: t1
+  } = t0;
+  const anchorElem = t1 === undefined ? document.body : t1;
+  const [editor] = useLexicalComposerContext();
+  return useDraggableBlockMenu(editor, anchorElem, editor._editable);
 }
-
 //# sourceMappingURL=index.js.map