@payloadcms/richtext-lexical 4.0.0-internal.ea6e8f8 → 4.0.0-internal.ee5d8bd

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useLexicalComposerContext","$createParagraphNode","isHTMLElement","React","useCallback","useEffect","useRef","useState","createPortal","useEditorConfigContext","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","t0","t1","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, isHTMLElement } from 'lexical'\nimport * as React from 'react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.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.css'\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 (\n        blockNode &&\n        (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem)\n      ) {\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) {\n      setHandlePosition(\n        hoveredElement?.elem ?? null,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])\n\n  const handleAddClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\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        aria-label=\"Add block\"\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","isHTMLElement","React","useCallback","useEffect","useRef","useState","createPortal","useEditorConfigContext","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","t0","t1","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, isHTMLElement } from 'lexical'\nimport * as React from 'react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.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.css'\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 (\n        blockNode &&\n        (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem)\n      ) {\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) {\n      setHandlePosition(\n        hoveredElement?.elem ?? null,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])\n\n  const handleAddClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\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        aria-label=\"Add block\"\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.css

@@ -1,4 +1,20 @@
 @layer payload-default {
+  .draggable-block-menu__button {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: grab;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
+  }
+
   .draggable-block-menu {
     border: none;
     border-radius: var(--radius-medium);

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":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,aAAa,CAAA;AAqbpB,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;AAY9B,OAAO,aAAa,CAAA;AA+hBpB,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,GAC3B,EAAE;IACD,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB,GAAG,KAAK,CAAC,YAAY,CAGrB"}

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

@@ -3,10 +3,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
 import { eventFiles } from '@lexical/rich-text';
-import { useTranslation } from '@payloadcms/ui';
+import { Popup, PopupList, useTranslation } from '@payloadcms/ui';
 import { $getNearestNodeFromDOMNode, $getNodeByKey, isHTMLElement } from 'lexical';
 import * as React from 'react';
-import { useEffect, useId, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js';
 import { Point } from '../../../utils/point.js';
@@ -17,6 +17,7 @@ import { isOnHandleElement } from '../utils/isOnHandleElement.js';
 import { setHandlePosition } from '../utils/setHandlePosition.js';
 import { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js';
 import './index.css';
+import { $moveBlock } from './moveBlock.js';
 import { setTargetLine } from './setTargetLine.js';
 import { useKeyboardReordering } from './useKeyboardReordering.js';
 const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
@@ -64,6 +65,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     instructionsID
   });
   const menuRef = useRef(null);
+  const isMenuOpenRef = useRef(false);
   const targetLineRef = useRef(null);
   const debugHighlightRef = useRef(null);
   const isDraggingBlockRef = useRef(false);
@@ -80,7 +82,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     */
     function onDocumentMouseMove(event) {
       const target = event.target;
-      if (!isHTMLElement(target)) {
+      if (isMenuOpenRef.current || !isHTMLElement(target)) {
         return;
       }
       const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
@@ -121,9 +123,16 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     // 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.
+    const onDocumentPointerDown = event_0 => {
+      if (event_0.pointerType === 'touch' || event_0.pointerType === 'pen') {
+        onDocumentMouseMove(event_0);
+      }
+    };
     document?.addEventListener('mousemove', onDocumentMouseMove);
+    document?.addEventListener('pointerdown', onDocumentPointerDown);
     return () => {
       document?.removeEventListener('mousemove', onDocumentMouseMove);
+      document?.removeEventListener('pointerdown', onDocumentPointerDown);
     };
   }, [scrollerElem, anchorElem, editor, draggableBlockElem]);
   useEffect(() => {
@@ -132,22 +141,22 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     }
   }, [anchorElem, draggableBlockElem, blockHandleHorizontalOffset]);
   useEffect(() => {
-    function onDragover(event_0) {
+    function onDragover(event_1) {
       if (!isDraggingBlockRef.current) {
         return false;
       }
-      const [isFileTransfer] = eventFiles(event_0);
+      const [isFileTransfer] = eventFiles(event_1);
       if (isFileTransfer) {
         return false;
       }
       const {
         pageY,
         target: target_0
-      } = event_0;
+      } = event_1;
       if (!isHTMLElement(target_0)) {
         return false;
       }
-      const distanceFromScrollerElem_0 = calculateDistanceFromScrollerElem(scrollerElem, event_0.pageX, event_0.pageY, target_0, 100, 50);
+      const distanceFromScrollerElem_0 = calculateDistanceFromScrollerElem(scrollerElem, event_1.pageX, event_1.pageY, target_0, 100, 50);
       const topLevelNodeKeys_0 = getTopLevelNodeKeys(editor);
       const {
         blockElem: targetBlockElem,
@@ -158,7 +167,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         editor,
         fuzzy: true,
         horizontalOffset: -distanceFromScrollerElem_0,
-        point: new Point(event_0.x, event_0.y),
+        point: new Point(event_1.x, event_1.y),
         startIndex: getCurrentIndex(topLevelNodeKeys_0.length),
         useEdgeAsDefault: true,
         verbose: true
@@ -170,13 +179,13 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         return false;
       }
       // Always prevent default and set dropEffect during drag to maintain the move cursor
-      event_0.preventDefault();
-      event_0.dataTransfer.dropEffect = 'move';
+      event_1.preventDefault();
+      event_1.dataTransfer.dropEffect = 'move';
       if (draggableBlockElem !== targetBlockElem) {
         const {
           isBelow,
           willStayInSamePosition
-        } = setTargetLine(editorConfig?.admin?.hideGutter ? '0px' : 'var(--spacer-5)', blockHandleHorizontalOffset + (editorConfig?.admin?.hideGutter ? menuRef?.current?.getBoundingClientRect()?.width ?? 0 : -(menuRef?.current?.getBoundingClientRect()?.width ?? 0)), targetLineElem, targetBlockElem, lastTargetBlock, pageY, anchorElem, event_0, debugHighlightRef, isFoundNodeEmptyParagraph_0);
+        } = setTargetLine(editorConfig?.admin?.hideGutter ? '0px' : 'var(--spacer-5)', blockHandleHorizontalOffset + (editorConfig?.admin?.hideGutter ? menuRef?.current?.getBoundingClientRect()?.width ?? 0 : -(menuRef?.current?.getBoundingClientRect()?.width ?? 0)), targetLineElem, targetBlockElem, lastTargetBlock, pageY, anchorElem, event_1, debugHighlightRef, isFoundNodeEmptyParagraph_0);
         if (!willStayInSamePosition) {
           setLastTargetBlock({
             boundingBox: targetBlockElem.getBoundingClientRect(),
@@ -194,11 +203,11 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
       }
       return true;
     }
-    function onDrop(event_1) {
+    function onDrop(event_2) {
       if (!isDraggingBlockRef.current) {
         return false;
       }
-      const [isFileTransfer_0] = eventFiles(event_1);
+      const [isFileTransfer_0] = eventFiles(event_2);
       if (isFileTransfer_0) {
         return false;
       }
@@ -206,7 +215,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         dataTransfer,
         pageY: pageY_0,
         target: target_1
-      } = event_1;
+      } = event_2;
       const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || '';
       editor.update(() => {
         const draggedNode = $getNodeByKey(dragData);
@@ -216,7 +225,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         if (!isHTMLElement(target_1)) {
           return false;
         }
-        const distanceFromScrollerElem_1 = calculateDistanceFromScrollerElem(scrollerElem, event_1.pageX, event_1.pageY, target_1, 100, 50);
+        const distanceFromScrollerElem_1 = calculateDistanceFromScrollerElem(scrollerElem, event_2.pageX, event_2.pageY, target_1, 100, 50);
         const {
           blockElem: targetBlockElem_0,
           isFoundNodeEmptyParagraph: isFoundNodeEmptyParagraph_1
@@ -225,7 +234,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
           editor,
           fuzzy: true,
           horizontalOffset: -distanceFromScrollerElem_1,
-          point: new Point(event_1.x, event_1.y),
+          point: new Point(event_2.x, event_2.y),
           useEdgeAsDefault: true
         });
         if (!targetBlockElem_0) {
@@ -318,44 +327,123 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
       highlightTimersRef.current = [];
     };
   }, [scrollerElem, blockHandleHorizontalOffset, anchorElem, editor, lastTargetBlock, draggableBlockElem, editorConfig?.admin?.hideGutter]);
-  function onDragStart(event_2) {
-    const dataTransfer_0 = event_2.dataTransfer;
-    if (!dataTransfer_0 || !draggableBlockElem) {
+  const startDrag = useCallback(({
+    blockElem,
+    dataTransfer: dataTransfer_0
+  }) => {
+    if (!editor.isEditable() || !dataTransfer_0 || !blockElem) {
       return;
     }
-    setDragImage(dataTransfer_0, draggableBlockElem);
+    setDragImage(dataTransfer_0, blockElem);
     dataTransfer_0.effectAllowed = 'move';
-    let nodeKey = '';
-    editor.update(() => {
-      const node = $getNearestNodeFromDOMNode(draggableBlockElem);
+    editor.read(() => {
+      const node = $getNearestNodeFromDOMNode(blockElem)?.getTopLevelElement();
       if (node) {
-        nodeKey = node.getKey();
+        isDraggingBlockRef.current = true;
+        dataTransfer_0.setData(DRAG_DATA_FORMAT, node.getKey());
       }
     });
-    isDraggingBlockRef.current = true;
-    dataTransfer_0.setData(DRAG_DATA_FORMAT, nodeKey);
-  }
-  function onDragEnd() {
+  }, [editor]);
+  const onDragEnd = useCallback(() => {
     isDraggingBlockRef.current = false;
     if (lastTargetBlock?.elem) {
-      hideTargetLine(targetLineRef.current, lastTargetBlock?.elem);
+      hideTargetLine(targetLineRef.current, lastTargetBlock.elem);
     }
+  }, [lastTargetBlock]);
+  useEffect(() => {
+    const onHeaderDragStart = event_3 => {
+      const handle = event_3.target instanceof HTMLElement ? event_3.target.closest('.collapsible__drag[draggable="true"]') : null;
+      if (!handle || !editor.getRootElement()?.contains(handle)) {
+        return;
+      }
+      const blockElem_0 = editor.getElementByKey(handle.dataset.sortableId ?? '');
+      if (blockElem_0) {
+        setDraggableBlockElem(blockElem_0);
+        startDrag({
+          blockElem: blockElem_0,
+          dataTransfer: event_3.dataTransfer
+        });
+      }
+    };
+    document.addEventListener('dragstart', onHeaderDragStart);
+    document.addEventListener('dragend', onDragEnd);
+    return () => {
+      document.removeEventListener('dragstart', onHeaderDragStart);
+      document.removeEventListener('dragend', onDragEnd);
+    };
+  }, [editor, startDrag, onDragEnd]);
+  function moveBlock({
+    direction
+  }) {
+    if (!editor.isEditable() || !draggableBlockElem) {
+      return;
+    }
+    editor.update(() => {
+      const node_0 = $getNearestNodeFromDOMNode(draggableBlockElem)?.getTopLevelElement();
+      if (node_0) {
+        $moveBlock({
+          direction,
+          node: node_0
+        });
+      }
+    }, {
+      onUpdate: () => {
+        if (menuRef.current) {
+          setHandlePosition(draggableBlockElem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
+        }
+      }
+    });
   }
   return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs("span", {
       className: "sr-only",
       id: instructionsID,
       children: [t('general:moveUp'), ": Alt + Shift + ↑. ", t('general:moveDown'), ": Alt + Shift + ↓."]
-    }), /*#__PURE__*/_jsx("button", {
-      "aria-label": "Drag to move",
-      className: "icon draggable-block-menu",
-      draggable: true,
-      onDragEnd: onDragEnd,
-      onDragStart: onDragStart,
+    }), /*#__PURE__*/_jsx("div", {
+      className: "draggable-block-menu",
       ref: menuRef,
-      type: "button",
-      children: /*#__PURE__*/_jsx("div", {
-        className: isEditable ? 'icon' : ''
+      children: /*#__PURE__*/_jsx(Popup, {
+        caret: false,
+        disabled: !isEditable,
+        onToggleClose: () => {
+          isMenuOpenRef.current = false;
+        },
+        onToggleOpen: () => {
+          isMenuOpenRef.current = true;
+        },
+        popupType: "menu",
+        render: ({
+          close
+        }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+          children: [-1, 1].map(direction_0 => /*#__PURE__*/_jsx(PopupList.Button, {
+            onClick: () => {
+              moveBlock({
+                direction: direction_0
+              });
+              close();
+            },
+            children: t(direction_0 === -1 ? 'general:moveUp' : 'general:moveDown')
+          }, direction_0))
+        }),
+        renderButton: ({
+          active: _active,
+          ...buttonProps
+        }) => /*#__PURE__*/_jsx("button", {
+          ...buttonProps,
+          "aria-label": t('general:dragToMove'),
+          className: "draggable-block-menu__button",
+          disabled: !isEditable,
+          draggable: isEditable,
+          onDragEnd: onDragEnd,
+          onDragStart: event_4 => startDrag({
+            blockElem: draggableBlockElem,
+            dataTransfer: event_4.dataTransfer
+          }),
+          type: "button",
+          children: /*#__PURE__*/_jsx("div", {
+            className: isEditable ? 'icon' : ''
+          })
+        })
       })
     }), /*#__PURE__*/_jsx("div", {
       className: "draggable-block-target-line",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useLexicalComposerContext","eventFiles","useTranslation","$getNearestNodeFromDOMNode","$getNodeByKey","isHTMLElement","React","useEffect","useId","useRef","useState","createPortal","useEditorConfigContext","Point","calculateDistanceFromScrollerElem","getNodeCloseToPoint","getTopLevelNodeKeys","isOnHandleElement","setHandlePosition","getBoundingClientRectWithoutTransform","setTargetLine","useKeyboardReordering","DRAGGABLE_BLOCK_MENU_CLASSNAME","DRAG_DATA_FORMAT","prevIndex","Infinity","getCurrentIndex","keysLength","Math","floor","setDragImage","dataTransfer","draggableBlockElem","transform","style","setTimeout","hideTargetLine","targetLineElem","lastTargetBlockElem","opacity","marginBottom","marginTop","useDraggableBlockMenu","editor","anchorElem","isEditable","scrollerElem","parentElement","instructionsID","t","menuRef","targetLineRef","debugHighlightRef","isDraggingBlockRef","highlightTimersRef","setDraggableBlockElem","lastTargetBlock","setLastTargetBlock","editorConfig","blockHandleHorizontalOffset","admin","hideGutter","onDocumentMouseMove","event","target","distanceFromScrollerElem","pageX","pageY","topLevelNodeKeys","blockElem","_draggableBlockElem","foundAtIndex","isFoundNodeEmptyParagraph","cache_threshold","horizontalOffset","point","x","y","startIndex","length","useEdgeAsDefault","verbose","document","addEventListener","removeEventListener","current","onDragover","isFileTransfer","targetBlockElem","fuzzy","preventDefault","dropEffect","isBelow","willStayInSamePosition","getBoundingClientRect","width","boundingBox","elem","onDrop","dragData","getData","update","draggedNode","targetNode","height","targetBlockElemHeight","top","targetBlockElemTop","mouseY","window","scrollY","insertAfter","insertBefore","remove","allPrevHighlighters","querySelectorAll","forEach","highlighter","newInsertedElem","getElementByKey","getKey","highlightTimer","newInsertedElemRect","highlightElem","createElement","className","backgroundColor","transition","zIndex","pointerEvents","boxSizing","borderRadius","position","body","appendChild","left","fadeTimer","removeTimer","push","clearTimeout","onDragStart","effectAllowed","nodeKey","node","setData","onDragEnd","_jsxs","Fragment","id","_jsx","draggable","ref","type","DraggableBlockPlugin","t0","t1","undefined","_editable"],"sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\nimport type { DragEvent as ReactDragEvent } from 'react'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { eventFiles } from '@lexical/rich-text'\nimport { useTranslation } from '@payloadcms/ui'\nimport { $getNearestNodeFromDOMNode, $getNodeByKey, isHTMLElement } from 'lexical'\nimport * as React from 'react'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js'\nimport { Point } from '../../../utils/point.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 { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js'\nimport './index.css'\nimport { setTargetLine } from './setTargetLine.js'\nimport { useKeyboardReordering } from './useKeyboardReordering.js'\n\nconst DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu'\nconst DRAG_DATA_FORMAT = 'application/x-lexical-drag-block'\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 setDragImage(dataTransfer: DataTransfer, draggableBlockElem: HTMLElement) {\n  const { transform } = draggableBlockElem.style\n\n  // Remove dragImage borders\n  dataTransfer.setDragImage(draggableBlockElem, 0, 0)\n\n  setTimeout(() => {\n    draggableBlockElem.style.transform = transform\n  })\n}\n\nfunction hideTargetLine(\n  targetLineElem: HTMLElement | null,\n  lastTargetBlockElem: HTMLElement | null,\n) {\n  if (targetLineElem) {\n    targetLineElem.style.opacity = '0'\n  }\n  if (lastTargetBlockElem) {\n    lastTargetBlockElem.style.opacity = ''\n    // Delete marginBottom and marginTop values we set\n    lastTargetBlockElem.style.marginBottom = ''\n    lastTargetBlockElem.style.marginTop = ''\n    //lastTargetBlock.style.border = 'none'\n  }\n}\n\nfunction useDraggableBlockMenu(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n  isEditable: boolean,\n): React.ReactElement {\n  const scrollerElem = anchorElem.parentElement\n  const instructionsID = useId()\n  const { t } = useTranslation()\n\n  useKeyboardReordering({ editor, instructionsID })\n\n  const menuRef = useRef<HTMLButtonElement>(null)\n  const targetLineRef = useRef<HTMLDivElement>(null)\n  const debugHighlightRef = useRef<HTMLDivElement>(null)\n  const isDraggingBlockRef = useRef<boolean>(false)\n  const highlightTimersRef = useRef<ReturnType<typeof setTimeout>[]>([])\n  const [draggableBlockElem, setDraggableBlockElem] = useState<HTMLElement | null>(null)\n  const [lastTargetBlock, setLastTargetBlock] = useState<{\n    boundingBox?: DOMRect\n    elem: HTMLElement | null\n    isBelow: boolean\n  } | null>(null)\n\n  const { editorConfig } = useEditorConfigContext()\n\n  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -44 : -8\n\n  useEffect(() => {\n    /**\n     * Handles positioning of the drag handle\n     */\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      if (distanceFromScrollerElem === -1) {\n        setDraggableBlockElem(null)\n        return\n      }\n\n      if (isOnHandleElement(target, DRAGGABLE_BLOCK_MENU_CLASSNAME)) {\n        return\n      }\n\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: _draggableBlockElem,\n        foundAtIndex,\n        isFoundNodeEmptyParagraph,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        cache_threshold: 0,\n        editor,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: false,\n        verbose: false,\n      })\n\n      prevIndex = foundAtIndex\n\n      //if (DEBUG && _draggableBlockElem) {\n      //targetBlockElem.style.border = '3px solid red'\n      // highlightElemOriginalPosition(debugHighlightRef, _draggableBlockElem, anchorElem)\n      //}\n\n      if (!_draggableBlockElem && !isFoundNodeEmptyParagraph) {\n        return\n      }\n\n      if (draggableBlockElem !== _draggableBlockElem) {\n        setDraggableBlockElem(_draggableBlockElem)\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, draggableBlockElem])\n\n  useEffect(() => {\n    if (menuRef.current) {\n      setHandlePosition(\n        draggableBlockElem,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, draggableBlockElem, blockHandleHorizontalOffset])\n\n  useEffect(() => {\n    function onDragover(event: DragEvent): boolean {\n      if (!isDraggingBlockRef.current) {\n        return false\n      }\n      const [isFileTransfer] = eventFiles(event)\n      if (isFileTransfer) {\n        return false\n      }\n\n      const { pageY, target } = event\n      if (!isHTMLElement(target)) {\n        return false\n      }\n\n      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n        scrollerElem,\n        event.pageX,\n        event.pageY,\n        target,\n        100,\n        50,\n      )\n\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: targetBlockElem,\n        foundAtIndex,\n        isFoundNodeEmptyParagraph,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        editor,\n        fuzzy: true,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: true,\n        verbose: true,\n      })\n\n      prevIndex = foundAtIndex\n\n      const targetLineElem = targetLineRef.current\n      // targetBlockElem === null shouldn't happen\n      if (targetBlockElem === null || targetLineElem === null) {\n        return false\n      }\n\n      // Always prevent default and set dropEffect during drag to maintain the move cursor\n      event.preventDefault()\n      event.dataTransfer!.dropEffect = 'move'\n\n      if (draggableBlockElem !== targetBlockElem) {\n        const { isBelow, willStayInSamePosition } = setTargetLine(\n          editorConfig?.admin?.hideGutter ? '0px' : 'var(--spacer-5)',\n          blockHandleHorizontalOffset +\n            (editorConfig?.admin?.hideGutter\n              ? (menuRef?.current?.getBoundingClientRect()?.width ?? 0)\n              : -(menuRef?.current?.getBoundingClientRect()?.width ?? 0)),\n          targetLineElem,\n          targetBlockElem,\n          lastTargetBlock!,\n          pageY,\n          anchorElem,\n          event,\n          debugHighlightRef,\n          isFoundNodeEmptyParagraph,\n        )\n\n        if (!willStayInSamePosition) {\n          setLastTargetBlock({\n            boundingBox: targetBlockElem.getBoundingClientRect(),\n            elem: targetBlockElem,\n            isBelow,\n          })\n        }\n      } else if (lastTargetBlock?.elem) {\n        hideTargetLine(targetLineElem, lastTargetBlock.elem)\n        setLastTargetBlock({\n          boundingBox: targetBlockElem.getBoundingClientRect(),\n          elem: targetBlockElem,\n          isBelow: false,\n        })\n      }\n\n      return true\n    }\n\n    function onDrop(event: DragEvent): boolean {\n      if (!isDraggingBlockRef.current) {\n        return false\n      }\n      const [isFileTransfer] = eventFiles(event)\n      if (isFileTransfer) {\n        return false\n      }\n      const { dataTransfer, pageY, target } = event\n      const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || ''\n\n      editor.update(() => {\n        const draggedNode = $getNodeByKey(dragData)\n        if (!draggedNode) {\n          return false\n        }\n        if (!isHTMLElement(target)) {\n          return false\n        }\n        const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n          scrollerElem,\n          event.pageX,\n          event.pageY,\n          target,\n          100,\n          50,\n        )\n\n        const { blockElem: targetBlockElem, isFoundNodeEmptyParagraph } = getNodeCloseToPoint({\n          anchorElem,\n          editor,\n          fuzzy: true,\n          horizontalOffset: -distanceFromScrollerElem,\n          point: new Point(event.x, event.y),\n          useEdgeAsDefault: true,\n        })\n\n        if (!targetBlockElem) {\n          return false\n        }\n        const targetNode = $getNearestNodeFromDOMNode(targetBlockElem)\n        if (!targetNode) {\n          return false\n        }\n        if (targetNode === draggedNode) {\n          return true\n        }\n\n        const { height: targetBlockElemHeight, top: targetBlockElemTop } =\n          getBoundingClientRectWithoutTransform(targetBlockElem)\n\n        const mouseY = pageY\n        const isBelow = mouseY >= targetBlockElemTop + targetBlockElemHeight / 2 + window.scrollY\n\n        if (!isFoundNodeEmptyParagraph) {\n          if (isBelow) {\n            // below targetBlockElem\n            targetNode.insertAfter(draggedNode)\n          } else {\n            // above targetBlockElem\n            targetNode.insertBefore(draggedNode)\n          }\n        } else {\n          //\n          targetNode.insertBefore(draggedNode)\n          targetNode.remove()\n        }\n\n        /*\n        if (pageY >= targetBlockElemTop + targetBlockElemHeight / 2) {\n          targetNode.insertAfter(draggedNode)\n        } else {\n          targetNode.insertBefore(draggedNode)\n        }*/\n        if (draggableBlockElem !== null) {\n          setDraggableBlockElem(null)\n        }\n\n        // find all previous elements with lexical-block-highlighter class and remove them\n        const allPrevHighlighters = document.querySelectorAll('.lexical-block-highlighter')\n        allPrevHighlighters.forEach((highlighter) => {\n          highlighter.remove()\n        })\n\n        const newInsertedElem = editor.getElementByKey(draggedNode.getKey())\n        const highlightTimer = setTimeout(() => {\n          // add new temp html element to newInsertedElem with the same height and width and the class block-selected\n          // to highlight the new inserted element\n          const newInsertedElemRect = newInsertedElem?.getBoundingClientRect()\n          if (!newInsertedElemRect) {\n            return\n          }\n          const highlightElem = document.createElement('div')\n          highlightElem.className = 'lexical-block-highlighter'\n\n          highlightElem.style.backgroundColor = 'var(--color-bg-inverse)'\n          highlightElem.style.transition = 'opacity 0.5s ease-in-out'\n          highlightElem.style.zIndex = '1'\n          highlightElem.style.pointerEvents = 'none'\n          highlightElem.style.boxSizing = 'border-box'\n          highlightElem.style.borderRadius = '4px'\n          highlightElem.style.position = 'absolute'\n          document.body.appendChild(highlightElem)\n\n          highlightElem.style.opacity = '0.1'\n\n          highlightElem.style.height = `${newInsertedElemRect.height + 8}px`\n          highlightElem.style.width = `${newInsertedElemRect.width + 8}px`\n          highlightElem.style.top = `${newInsertedElemRect.top + window.scrollY - 4}px`\n          highlightElem.style.left = `${newInsertedElemRect.left - 4}px`\n\n          const fadeTimer = setTimeout(() => {\n            highlightElem.style.opacity = '0'\n            const removeTimer = setTimeout(() => {\n              highlightElem.remove()\n            }, 500)\n            highlightTimersRef.current.push(removeTimer)\n          }, 1000)\n          highlightTimersRef.current.push(fadeTimer)\n        }, 120)\n        highlightTimersRef.current.push(highlightTimer)\n      })\n\n      return true\n    }\n\n    // register onDragover event listeners:\n    document.addEventListener('dragover', onDragover)\n    // register onDrop event listeners:\n    document.addEventListener('drop', onDrop)\n\n    return () => {\n      document.removeEventListener('dragover', onDragover)\n      document.removeEventListener('drop', onDrop)\n      highlightTimersRef.current.forEach(clearTimeout)\n      highlightTimersRef.current = []\n    }\n  }, [\n    scrollerElem,\n    blockHandleHorizontalOffset,\n    anchorElem,\n    editor,\n    lastTargetBlock,\n    draggableBlockElem,\n    editorConfig?.admin?.hideGutter,\n  ])\n\n  function onDragStart(event: ReactDragEvent<HTMLButtonElement>): void {\n    const dataTransfer = event.dataTransfer\n    if (!dataTransfer || !draggableBlockElem) {\n      return\n    }\n    setDragImage(dataTransfer, draggableBlockElem)\n    dataTransfer.effectAllowed = 'move'\n    let nodeKey = ''\n    editor.update(() => {\n      const node = $getNearestNodeFromDOMNode(draggableBlockElem)\n      if (node) {\n        nodeKey = node.getKey()\n      }\n    })\n    isDraggingBlockRef.current = true\n    dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey)\n  }\n\n  function onDragEnd(): void {\n    isDraggingBlockRef.current = false\n    if (lastTargetBlock?.elem) {\n      hideTargetLine(targetLineRef.current, lastTargetBlock?.elem)\n    }\n  }\n\n  return createPortal(\n    <React.Fragment>\n      <span className=\"sr-only\" id={instructionsID}>\n        {t('general:moveUp')}: Alt + Shift + ↑. {t('general:moveDown')}: Alt + Shift + ↓.\n      </span>\n      <button\n        aria-label=\"Drag to move\"\n        className=\"icon draggable-block-menu\"\n        draggable\n        onDragEnd={onDragEnd}\n        onDragStart={onDragStart}\n        ref={menuRef}\n        type=\"button\"\n      >\n        <div className={isEditable ? 'icon' : ''} />\n      </button>\n      <div className=\"draggable-block-target-line\" ref={targetLineRef} />\n      <div className=\"debug-highlight\" ref={debugHighlightRef} />\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n\nexport function DraggableBlockPlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): React.ReactElement {\n  const [editor] = useLexicalComposerContext()\n  return useDraggableBlockMenu(editor, anchorElem, editor._editable)\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useLexicalComposerContext","eventFiles","Popup","PopupList","useTranslation","$getNearestNodeFromDOMNode","$getNodeByKey","isHTMLElement","React","useCallback","useEffect","useId","useRef","useState","createPortal","useEditorConfigContext","Point","calculateDistanceFromScrollerElem","getNodeCloseToPoint","getTopLevelNodeKeys","isOnHandleElement","setHandlePosition","getBoundingClientRectWithoutTransform","$moveBlock","setTargetLine","useKeyboardReordering","DRAGGABLE_BLOCK_MENU_CLASSNAME","DRAG_DATA_FORMAT","prevIndex","Infinity","getCurrentIndex","keysLength","Math","floor","setDragImage","dataTransfer","draggableBlockElem","transform","style","setTimeout","hideTargetLine","targetLineElem","lastTargetBlockElem","opacity","marginBottom","marginTop","useDraggableBlockMenu","editor","anchorElem","isEditable","scrollerElem","parentElement","instructionsID","t","menuRef","isMenuOpenRef","targetLineRef","debugHighlightRef","isDraggingBlockRef","highlightTimersRef","setDraggableBlockElem","lastTargetBlock","setLastTargetBlock","editorConfig","blockHandleHorizontalOffset","admin","hideGutter","onDocumentMouseMove","event","target","current","distanceFromScrollerElem","pageX","pageY","topLevelNodeKeys","blockElem","_draggableBlockElem","foundAtIndex","isFoundNodeEmptyParagraph","cache_threshold","horizontalOffset","point","x","y","startIndex","length","useEdgeAsDefault","verbose","onDocumentPointerDown","pointerType","document","addEventListener","removeEventListener","onDragover","isFileTransfer","targetBlockElem","fuzzy","preventDefault","dropEffect","isBelow","willStayInSamePosition","getBoundingClientRect","width","boundingBox","elem","onDrop","dragData","getData","update","draggedNode","targetNode","height","targetBlockElemHeight","top","targetBlockElemTop","mouseY","window","scrollY","insertAfter","insertBefore","remove","allPrevHighlighters","querySelectorAll","forEach","highlighter","newInsertedElem","getElementByKey","getKey","highlightTimer","newInsertedElemRect","highlightElem","createElement","className","backgroundColor","transition","zIndex","pointerEvents","boxSizing","borderRadius","position","body","appendChild","left","fadeTimer","removeTimer","push","clearTimeout","startDrag","effectAllowed","read","node","getTopLevelElement","setData","onDragEnd","onHeaderDragStart","handle","HTMLElement","closest","getRootElement","contains","dataset","sortableId","moveBlock","direction","onUpdate","_jsxs","Fragment","id","_jsx","ref","caret","disabled","onToggleClose","onToggleOpen","popupType","render","close","ButtonGroup","map","Button","onClick","renderButton","active","_active","buttonProps","draggable","onDragStart","type","DraggableBlockPlugin","t0","t1","undefined","_editable"],"sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { eventFiles } from '@lexical/rich-text'\nimport { Popup, PopupList, useTranslation } from '@payloadcms/ui'\nimport { $getNearestNodeFromDOMNode, $getNodeByKey, isHTMLElement } from 'lexical'\nimport * as React from 'react'\nimport { useCallback, useEffect, useId, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js'\nimport { Point } from '../../../utils/point.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 { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js'\nimport './index.css'\nimport { $moveBlock } from './moveBlock.js'\nimport { setTargetLine } from './setTargetLine.js'\nimport { useKeyboardReordering } from './useKeyboardReordering.js'\n\nconst DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu'\nconst DRAG_DATA_FORMAT = 'application/x-lexical-drag-block'\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 setDragImage(dataTransfer: DataTransfer, draggableBlockElem: HTMLElement) {\n  const { transform } = draggableBlockElem.style\n\n  // Remove dragImage borders\n  dataTransfer.setDragImage(draggableBlockElem, 0, 0)\n\n  setTimeout(() => {\n    draggableBlockElem.style.transform = transform\n  })\n}\n\nfunction hideTargetLine(\n  targetLineElem: HTMLElement | null,\n  lastTargetBlockElem: HTMLElement | null,\n) {\n  if (targetLineElem) {\n    targetLineElem.style.opacity = '0'\n  }\n  if (lastTargetBlockElem) {\n    lastTargetBlockElem.style.opacity = ''\n    // Delete marginBottom and marginTop values we set\n    lastTargetBlockElem.style.marginBottom = ''\n    lastTargetBlockElem.style.marginTop = ''\n    //lastTargetBlock.style.border = 'none'\n  }\n}\n\nfunction useDraggableBlockMenu(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n  isEditable: boolean,\n): React.ReactElement {\n  const scrollerElem = anchorElem.parentElement\n  const instructionsID = useId()\n  const { t } = useTranslation()\n\n  useKeyboardReordering({ editor, instructionsID })\n\n  const menuRef = useRef<HTMLDivElement>(null)\n  const isMenuOpenRef = useRef(false)\n  const targetLineRef = useRef<HTMLDivElement>(null)\n  const debugHighlightRef = useRef<HTMLDivElement>(null)\n  const isDraggingBlockRef = useRef<boolean>(false)\n  const highlightTimersRef = useRef<ReturnType<typeof setTimeout>[]>([])\n  const [draggableBlockElem, setDraggableBlockElem] = useState<HTMLElement | null>(null)\n  const [lastTargetBlock, setLastTargetBlock] = useState<{\n    boundingBox?: DOMRect\n    elem: HTMLElement | null\n    isBelow: boolean\n  } | null>(null)\n\n  const { editorConfig } = useEditorConfigContext()\n\n  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -44 : -8\n\n  useEffect(() => {\n    /**\n     * Handles positioning of the drag handle\n     */\n    function onDocumentMouseMove(event: MouseEvent) {\n      const target = event.target\n      if (isMenuOpenRef.current || !isHTMLElement(target)) {\n        return\n      }\n\n      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n        scrollerElem,\n        event.pageX,\n        event.pageY,\n        target,\n      )\n      if (distanceFromScrollerElem === -1) {\n        setDraggableBlockElem(null)\n        return\n      }\n\n      if (isOnHandleElement(target, DRAGGABLE_BLOCK_MENU_CLASSNAME)) {\n        return\n      }\n\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: _draggableBlockElem,\n        foundAtIndex,\n        isFoundNodeEmptyParagraph,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        cache_threshold: 0,\n        editor,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: false,\n        verbose: false,\n      })\n\n      prevIndex = foundAtIndex\n\n      //if (DEBUG && _draggableBlockElem) {\n      //targetBlockElem.style.border = '3px solid red'\n      // highlightElemOriginalPosition(debugHighlightRef, _draggableBlockElem, anchorElem)\n      //}\n\n      if (!_draggableBlockElem && !isFoundNodeEmptyParagraph) {\n        return\n      }\n\n      if (draggableBlockElem !== _draggableBlockElem) {\n        setDraggableBlockElem(_draggableBlockElem)\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    const onDocumentPointerDown = (event: PointerEvent) => {\n      if (event.pointerType === 'touch' || event.pointerType === 'pen') {\n        onDocumentMouseMove(event)\n      }\n    }\n\n    document?.addEventListener('mousemove', onDocumentMouseMove)\n    document?.addEventListener('pointerdown', onDocumentPointerDown)\n\n    return () => {\n      document?.removeEventListener('mousemove', onDocumentMouseMove)\n      document?.removeEventListener('pointerdown', onDocumentPointerDown)\n    }\n  }, [scrollerElem, anchorElem, editor, draggableBlockElem])\n\n  useEffect(() => {\n    if (menuRef.current) {\n      setHandlePosition(\n        draggableBlockElem,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, draggableBlockElem, blockHandleHorizontalOffset])\n\n  useEffect(() => {\n    function onDragover(event: DragEvent): boolean {\n      if (!isDraggingBlockRef.current) {\n        return false\n      }\n      const [isFileTransfer] = eventFiles(event)\n      if (isFileTransfer) {\n        return false\n      }\n\n      const { pageY, target } = event\n      if (!isHTMLElement(target)) {\n        return false\n      }\n\n      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n        scrollerElem,\n        event.pageX,\n        event.pageY,\n        target,\n        100,\n        50,\n      )\n\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: targetBlockElem,\n        foundAtIndex,\n        isFoundNodeEmptyParagraph,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        editor,\n        fuzzy: true,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: true,\n        verbose: true,\n      })\n\n      prevIndex = foundAtIndex\n\n      const targetLineElem = targetLineRef.current\n      // targetBlockElem === null shouldn't happen\n      if (targetBlockElem === null || targetLineElem === null) {\n        return false\n      }\n\n      // Always prevent default and set dropEffect during drag to maintain the move cursor\n      event.preventDefault()\n      event.dataTransfer!.dropEffect = 'move'\n\n      if (draggableBlockElem !== targetBlockElem) {\n        const { isBelow, willStayInSamePosition } = setTargetLine(\n          editorConfig?.admin?.hideGutter ? '0px' : 'var(--spacer-5)',\n          blockHandleHorizontalOffset +\n            (editorConfig?.admin?.hideGutter\n              ? (menuRef?.current?.getBoundingClientRect()?.width ?? 0)\n              : -(menuRef?.current?.getBoundingClientRect()?.width ?? 0)),\n          targetLineElem,\n          targetBlockElem,\n          lastTargetBlock!,\n          pageY,\n          anchorElem,\n          event,\n          debugHighlightRef,\n          isFoundNodeEmptyParagraph,\n        )\n\n        if (!willStayInSamePosition) {\n          setLastTargetBlock({\n            boundingBox: targetBlockElem.getBoundingClientRect(),\n            elem: targetBlockElem,\n            isBelow,\n          })\n        }\n      } else if (lastTargetBlock?.elem) {\n        hideTargetLine(targetLineElem, lastTargetBlock.elem)\n        setLastTargetBlock({\n          boundingBox: targetBlockElem.getBoundingClientRect(),\n          elem: targetBlockElem,\n          isBelow: false,\n        })\n      }\n\n      return true\n    }\n\n    function onDrop(event: DragEvent): boolean {\n      if (!isDraggingBlockRef.current) {\n        return false\n      }\n      const [isFileTransfer] = eventFiles(event)\n      if (isFileTransfer) {\n        return false\n      }\n      const { dataTransfer, pageY, target } = event\n      const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || ''\n\n      editor.update(() => {\n        const draggedNode = $getNodeByKey(dragData)\n        if (!draggedNode) {\n          return false\n        }\n        if (!isHTMLElement(target)) {\n          return false\n        }\n        const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n          scrollerElem,\n          event.pageX,\n          event.pageY,\n          target,\n          100,\n          50,\n        )\n\n        const { blockElem: targetBlockElem, isFoundNodeEmptyParagraph } = getNodeCloseToPoint({\n          anchorElem,\n          editor,\n          fuzzy: true,\n          horizontalOffset: -distanceFromScrollerElem,\n          point: new Point(event.x, event.y),\n          useEdgeAsDefault: true,\n        })\n\n        if (!targetBlockElem) {\n          return false\n        }\n        const targetNode = $getNearestNodeFromDOMNode(targetBlockElem)\n        if (!targetNode) {\n          return false\n        }\n        if (targetNode === draggedNode) {\n          return true\n        }\n\n        const { height: targetBlockElemHeight, top: targetBlockElemTop } =\n          getBoundingClientRectWithoutTransform(targetBlockElem)\n\n        const mouseY = pageY\n        const isBelow = mouseY >= targetBlockElemTop + targetBlockElemHeight / 2 + window.scrollY\n\n        if (!isFoundNodeEmptyParagraph) {\n          if (isBelow) {\n            // below targetBlockElem\n            targetNode.insertAfter(draggedNode)\n          } else {\n            // above targetBlockElem\n            targetNode.insertBefore(draggedNode)\n          }\n        } else {\n          //\n          targetNode.insertBefore(draggedNode)\n          targetNode.remove()\n        }\n\n        /*\n        if (pageY >= targetBlockElemTop + targetBlockElemHeight / 2) {\n          targetNode.insertAfter(draggedNode)\n        } else {\n          targetNode.insertBefore(draggedNode)\n        }*/\n        if (draggableBlockElem !== null) {\n          setDraggableBlockElem(null)\n        }\n\n        // find all previous elements with lexical-block-highlighter class and remove them\n        const allPrevHighlighters = document.querySelectorAll('.lexical-block-highlighter')\n        allPrevHighlighters.forEach((highlighter) => {\n          highlighter.remove()\n        })\n\n        const newInsertedElem = editor.getElementByKey(draggedNode.getKey())\n        const highlightTimer = setTimeout(() => {\n          // add new temp html element to newInsertedElem with the same height and width and the class block-selected\n          // to highlight the new inserted element\n          const newInsertedElemRect = newInsertedElem?.getBoundingClientRect()\n          if (!newInsertedElemRect) {\n            return\n          }\n          const highlightElem = document.createElement('div')\n          highlightElem.className = 'lexical-block-highlighter'\n\n          highlightElem.style.backgroundColor = 'var(--color-bg-inverse)'\n          highlightElem.style.transition = 'opacity 0.5s ease-in-out'\n          highlightElem.style.zIndex = '1'\n          highlightElem.style.pointerEvents = 'none'\n          highlightElem.style.boxSizing = 'border-box'\n          highlightElem.style.borderRadius = '4px'\n          highlightElem.style.position = 'absolute'\n          document.body.appendChild(highlightElem)\n\n          highlightElem.style.opacity = '0.1'\n\n          highlightElem.style.height = `${newInsertedElemRect.height + 8}px`\n          highlightElem.style.width = `${newInsertedElemRect.width + 8}px`\n          highlightElem.style.top = `${newInsertedElemRect.top + window.scrollY - 4}px`\n          highlightElem.style.left = `${newInsertedElemRect.left - 4}px`\n\n          const fadeTimer = setTimeout(() => {\n            highlightElem.style.opacity = '0'\n            const removeTimer = setTimeout(() => {\n              highlightElem.remove()\n            }, 500)\n            highlightTimersRef.current.push(removeTimer)\n          }, 1000)\n          highlightTimersRef.current.push(fadeTimer)\n        }, 120)\n        highlightTimersRef.current.push(highlightTimer)\n      })\n\n      return true\n    }\n\n    // register onDragover event listeners:\n    document.addEventListener('dragover', onDragover)\n    // register onDrop event listeners:\n    document.addEventListener('drop', onDrop)\n\n    return () => {\n      document.removeEventListener('dragover', onDragover)\n      document.removeEventListener('drop', onDrop)\n      highlightTimersRef.current.forEach(clearTimeout)\n      highlightTimersRef.current = []\n    }\n  }, [\n    scrollerElem,\n    blockHandleHorizontalOffset,\n    anchorElem,\n    editor,\n    lastTargetBlock,\n    draggableBlockElem,\n    editorConfig?.admin?.hideGutter,\n  ])\n\n  const startDrag = useCallback(\n    ({\n      blockElem,\n      dataTransfer,\n    }: {\n      blockElem: HTMLElement | null\n      dataTransfer: DataTransfer | null\n    }) => {\n      if (!editor.isEditable() || !dataTransfer || !blockElem) {\n        return\n      }\n\n      setDragImage(dataTransfer, blockElem)\n      dataTransfer.effectAllowed = 'move'\n      editor.read(() => {\n        const node = $getNearestNodeFromDOMNode(blockElem)?.getTopLevelElement()\n\n        if (node) {\n          isDraggingBlockRef.current = true\n          dataTransfer.setData(DRAG_DATA_FORMAT, node.getKey())\n        }\n      })\n    },\n    [editor],\n  )\n\n  const onDragEnd = useCallback(() => {\n    isDraggingBlockRef.current = false\n    if (lastTargetBlock?.elem) {\n      hideTargetLine(targetLineRef.current, lastTargetBlock.elem)\n    }\n  }, [lastTargetBlock])\n\n  useEffect(() => {\n    const onHeaderDragStart = (event: DragEvent) => {\n      const handle =\n        event.target instanceof HTMLElement\n          ? event.target.closest<HTMLElement>('.collapsible__drag[draggable=\"true\"]')\n          : null\n\n      if (!handle || !editor.getRootElement()?.contains(handle)) {\n        return\n      }\n\n      const blockElem = editor.getElementByKey(handle.dataset.sortableId ?? '')\n\n      if (blockElem) {\n        setDraggableBlockElem(blockElem)\n        startDrag({ blockElem, dataTransfer: event.dataTransfer })\n      }\n    }\n\n    document.addEventListener('dragstart', onHeaderDragStart)\n    document.addEventListener('dragend', onDragEnd)\n    return () => {\n      document.removeEventListener('dragstart', onHeaderDragStart)\n      document.removeEventListener('dragend', onDragEnd)\n    }\n  }, [editor, startDrag, onDragEnd])\n\n  function moveBlock({ direction }: { direction: -1 | 1 }) {\n    if (!editor.isEditable() || !draggableBlockElem) {\n      return\n    }\n\n    editor.update(\n      () => {\n        const node = $getNearestNodeFromDOMNode(draggableBlockElem)?.getTopLevelElement()\n\n        if (node) {\n          $moveBlock({ direction, node })\n        }\n      },\n      {\n        onUpdate: () => {\n          if (menuRef.current) {\n            setHandlePosition(\n              draggableBlockElem,\n              menuRef.current,\n              anchorElem,\n              blockHandleHorizontalOffset,\n            )\n          }\n        },\n      },\n    )\n  }\n\n  return createPortal(\n    <React.Fragment>\n      <span className=\"sr-only\" id={instructionsID}>\n        {t('general:moveUp')}: Alt + Shift + ↑. {t('general:moveDown')}: Alt + Shift + ↓.\n      </span>\n      <div className=\"draggable-block-menu\" ref={menuRef}>\n        <Popup\n          caret={false}\n          disabled={!isEditable}\n          onToggleClose={() => {\n            isMenuOpenRef.current = false\n          }}\n          onToggleOpen={() => {\n            isMenuOpenRef.current = true\n          }}\n          popupType=\"menu\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              {([-1, 1] as const).map((direction) => (\n                <PopupList.Button\n                  key={direction}\n                  onClick={() => {\n                    moveBlock({ direction })\n                    close()\n                  }}\n                >\n                  {t(direction === -1 ? 'general:moveUp' : 'general:moveDown')}\n                </PopupList.Button>\n              ))}\n            </PopupList.ButtonGroup>\n          )}\n          renderButton={({ active: _active, ...buttonProps }) => (\n            <button\n              {...buttonProps}\n              aria-label={t('general:dragToMove')}\n              className=\"draggable-block-menu__button\"\n              disabled={!isEditable}\n              draggable={isEditable}\n              onDragEnd={onDragEnd}\n              onDragStart={(event) =>\n                startDrag({ blockElem: draggableBlockElem, dataTransfer: event.dataTransfer })\n              }\n              type=\"button\"\n            >\n              <div className={isEditable ? 'icon' : ''} />\n            </button>\n          )}\n        />\n      </div>\n      <div className=\"draggable-block-target-line\" ref={targetLineRef} />\n      <div className=\"debug-highlight\" ref={debugHighlightRef} />\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n\nexport function DraggableBlockPlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): React.ReactElement {\n  const [editor] = useLexicalComposerContext()\n  return useDraggableBlockMenu(editor, anchorElem, editor._editable)\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/lexical/plugins/handles/DraggableBlockPlugin/moveBlock.d.ts

@@ -0,0 +1,7 @@
+import type { LexicalNode } from 'lexical';
+/** Move a top-level block one position within a Lexical update. */
+export declare function $moveBlock({ direction, node }: {
+    direction: -1 | 1;
+    node: LexicalNode;
+}): LexicalNode;
+//# sourceMappingURL=moveBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moveBlock.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/moveBlock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE;IAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IAAC,IAAI,EAAE,WAAW,CAAA;CAAE,eAYvF"}

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

@@ -0,0 +1,15 @@
+/** Move a top-level block one position within a Lexical update. */export function $moveBlock({
+  direction,
+  node
+}) {
+  const sibling = direction === -1 ? node.getPreviousSibling() : node.getNextSibling();
+  if (sibling) {
+    if (direction === -1) {
+      sibling.insertBefore(node);
+    } else {
+      sibling.insertAfter(node);
+    }
+  }
+  return node;
+}
+//# sourceMappingURL=moveBlock.js.map

package/dist/lexical/plugins/handles/DraggableBlockPlugin/moveBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"moveBlock.js","names":["$moveBlock","direction","node","sibling","getPreviousSibling","getNextSibling","insertBefore","insertAfter"],"sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/moveBlock.ts"],"sourcesContent":["import type { LexicalNode } from 'lexical'\n\n/** Move a top-level block one position within a Lexical update. */\nexport function $moveBlock({ direction, node }: { direction: -1 | 1; node: LexicalNode }) {\n  const sibling = direction === -1 ? node.getPreviousSibling() : node.getNextSibling()\n\n  if (sibling) {\n    if (direction === -1) {\n      sibling.insertBefore(node)\n    } else {\n      sibling.insertAfter(node)\n    }\n  }\n\n  return node\n}\n"],"mappings":"AAEA,mEACA,OAAO,SAASA,WAAW;EAAEC,SAAS;EAAEC;AAAI,CAA4C;EACtF,MAAMC,OAAA,GAAUF,SAAA,KAAc,CAAC,IAAIC,IAAA,CAAKE,kBAAkB,KAAKF,IAAA,CAAKG,cAAc;EAElF,IAAIF,OAAA,EAAS;IACX,IAAIF,SAAA,KAAc,CAAC,GAAG;MACpBE,OAAA,CAAQG,YAAY,CAACJ,IAAA;IACvB,OAAO;MACLC,OAAA,CAAQI,WAAW,CAACL,IAAA;IACtB;EACF;EAEA,OAAOA,IAAA;AACT","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardReordering.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/useKeyboardReordering.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAa5C,qFAAqF;AACrF,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,cAAc,GACf,EAAE;IACD,MAAM,EAAE,aAAa,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;CACvB,QA0EA"}
+{"version":3,"file":"useKeyboardReordering.d.ts","sourceRoot":"","sources":["../../../../../src/lexical/plugins/handles/DraggableBlockPlugin/useKeyboardReordering.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAgB5C,qFAAqF;AACrF,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,cAAc,GACf,EAAE;IACD,MAAM,EAAE,aAAa,CAAA;IACrB,cAAc,EAAE,MAAM,CAAA;CACvB,QAyEA"}

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

@@ -1,13 +1,14 @@
 import { mergeRegister } from '@lexical/utils';
-import { $getSelection, $isNodeSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND } from 'lexical';
+import { $getSelection, $isNodeSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_DOWN_COMMAND } from 'lexical';
 import { useEffect } from 'react';
+import { $moveBlock } from './moveBlock.js';
 /** Move the current top-level line, including decorator nodes, without a pointer. */
 export function useKeyboardReordering({
   editor,
   instructionsID
 }) {
   useEffect(() => {
-    const moveLine = ({
+    const $moveLine = ({
       direction,
       event
     }) => {
@@ -21,20 +22,16 @@ export function useKeyboardReordering({
         return false;
       }
       event.preventDefault();
-      const sibling = direction === -1 ? node.getPreviousSibling() : node.getNextSibling();
-      if (sibling) {
-        if (direction === -1) {
-          sibling.insertBefore(node);
-        } else {
-          sibling.insertAfter(node);
-        }
-      }
+      $moveBlock({
+        direction,
+        node
+      });
       return true;
     };
-    return mergeRegister(editor.registerCommand(KEY_ARROW_UP_COMMAND, event => moveLine({
+    return mergeRegister(editor.registerCommand(KEY_DOWN_COMMAND, event => event.target instanceof HTMLElement && Boolean(event.target.closest('.draggable-block-menu')), COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ARROW_UP_COMMAND, event => $moveLine({
       direction: -1,
       event
-    }), COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, event => moveLine({
+    }), COMMAND_PRIORITY_HIGH), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, event => $moveLine({
       direction: 1,
       event
     }), COMMAND_PRIORITY_HIGH));