@payloadcms/richtext-lexical 3.0.0-beta.35 → 3.0.0-beta.37

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

@@ -1,23 +1,21 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js';
-import { $createParagraphNode, $getNodeByKey } from 'lexical';
+import { $createParagraphNode } from 'lexical';
 import * as React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js';
 import { isHTMLElement } from '../../../utils/guard.js';
 import { Point } from '../../../utils/point.js';
-import { Rect } from '../../../utils/rect.js';
 import { ENABLE_SLASH_MENU_COMMAND } from '../../SlashMenu/LexicalTypeaheadMenuPlugin/index.js';
-import { getCollapsedMargins } from '../utils/getCollapsedMargins.js';
+import { calculateDistanceFromScrollerElem } from '../utils/calculateDistanceFromScrollerElem.js';
+import { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js';
 import { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js';
 import { isOnHandleElement } from '../utils/isOnHandleElement.js';
 import { setHandlePosition } from '../utils/setHandlePosition.js';
 import './index.scss';
-const SPACE = -24;
 const ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu';
-const Downward = 1;
-const Upward = -1;
-const Indeterminate = 0;
 let prevIndex = Infinity;
 function getCurrentIndex(keysLength) {
     if (keysLength === 0) {
@@ -28,80 +26,10 @@ function getCurrentIndex(keysLength) {
     }
     return Math.floor(keysLength / 2);
 }
-function getBlockElement(anchorElem, editor, event, useEdgeAsDefault = false, horizontalOffset = 0) {
-    const anchorElementRect = anchorElem.getBoundingClientRect();
-    const topLevelNodeKeys = getTopLevelNodeKeys(editor);
-    let blockElem = null;
-    let blockNode = null;
-    // Return null if matching block element is the first or last node
-    editor.getEditorState().read(()=>{
-        if (useEdgeAsDefault) {
-            const [firstNode, lastNode] = [
-                editor.getElementByKey(topLevelNodeKeys[0]),
-                editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1])
-            ];
-            const [firstNodeRect, lastNodeRect] = [
-                firstNode?.getBoundingClientRect(),
-                lastNode?.getBoundingClientRect()
-            ];
-            if (firstNodeRect && lastNodeRect) {
-                if (event.y < firstNodeRect.top) {
-                    blockElem = firstNode;
-                } else if (event.y > lastNodeRect.bottom) {
-                    blockElem = lastNode;
-                }
-                if (blockElem) {
-                    return {
-                        blockElem: null
-                    };
-                }
-            }
-        }
-        // Find matching block element
-        let index = getCurrentIndex(topLevelNodeKeys.length);
-        let direction = Indeterminate;
-        while(index >= 0 && index < topLevelNodeKeys.length){
-            const key = topLevelNodeKeys[index];
-            const elem = editor.getElementByKey(key);
-            if (elem === null) {
-                break;
-            }
-            const point = new Point(event.x + horizontalOffset, event.y);
-            const domRect = Rect.fromDOM(elem);
-            const { marginBottom, marginTop } = getCollapsedMargins(elem);
-            const rect = domRect.generateNewRect({
-                bottom: domRect.bottom + marginBottom,
-                left: anchorElementRect.left,
-                right: anchorElementRect.right,
-                top: domRect.top - marginTop
-            });
-            const { reason: { isOnBottomSide, isOnTopSide }, result } = rect.contains(point);
-            if (result) {
-                blockElem = elem;
-                blockNode = $getNodeByKey(key);
-                prevIndex = index;
-                break;
-            }
-            if (direction === Indeterminate) {
-                if (isOnTopSide) {
-                    direction = Upward;
-                } else if (isOnBottomSide) {
-                    direction = Downward;
-                } else {
-                    // stop search block element
-                    direction = Infinity;
-                }
-            }
-            index += direction;
-        }
-    });
-    return {
-        blockElem,
-        blockNode
-    };
-}
 function useAddBlockHandle(editor, anchorElem, isEditable) {
     const scrollerElem = anchorElem.parentElement;
+    const { editorConfig } = useEditorConfigContext();
+    const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12;
     const menuRef = useRef(null);
     const [hoveredElement, setHoveredElement] = useState(null);
     useEffect(()=>{
@@ -110,31 +38,26 @@ function useAddBlockHandle(editor, anchorElem, isEditable) {
             if (!isHTMLElement(target)) {
                 return;
             }
-            let distanceFromScrollerElem = 0;
-            // Calculate distance between scrollerElem and target if target is not in scrollerElem
-            if (scrollerElem && !scrollerElem.contains(target)) {
-                const { bottom, left, right, top } = scrollerElem.getBoundingClientRect();
-                const { pageX, pageY } = event;
-                const horizontalBuffer = 50;
-                const verticalBuffer = 25;
-                const adjustedTop = top + window.scrollY;
-                const adjustedBottom = bottom + window.scrollY;
-                if (pageY < adjustedTop - verticalBuffer || pageY > adjustedBottom + verticalBuffer || pageX < left - horizontalBuffer || pageX > right + horizontalBuffer) {
-                    if (hoveredElement !== null) {
-                        setHoveredElement(null);
-                    }
-                    return;
-                }
-                // This is used to allow the _emptyBlockElem to be found when the mouse is in the
-                // buffer zone around the scrollerElem.
-                if (pageX < left || pageX > right) {
-                    distanceFromScrollerElem = pageX < left ? pageX - left : pageX - right;
-                }
+            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
+            if (distanceFromScrollerElem === -1) {
+                setHoveredElement(null);
+                return;
             }
             if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {
                 return;
             }
-            const { blockElem: _emptyBlockElem, blockNode } = getBlockElement(anchorElem, editor, event, false, -distanceFromScrollerElem);
+            const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+            const { blockElem: _emptyBlockElem, blockNode, foundAtIndex } = getNodeCloseToPoint({
+                anchorElem,
+                cache_threshold: 0,
+                editor,
+                horizontalOffset: -distanceFromScrollerElem,
+                point: new Point(event.x, event.y),
+                returnEmptyParagraphs: true,
+                startIndex: getCurrentIndex(topLevelNodeKeys.length),
+                useEdgeAsDefault: false
+            });
+            prevIndex = foundAtIndex;
             if (!_emptyBlockElem) {
                 return;
             }
@@ -160,19 +83,12 @@ function useAddBlockHandle(editor, anchorElem, isEditable) {
     ]);
     useEffect(()=>{
         if (menuRef.current && hoveredElement?.node) {
-            editor.getEditorState().read(()=>{
-                // Check if blockNode is an empty text node
-                let isEmptyParagraph = true;
-                if (hoveredElement.node.getType() !== 'paragraph' || hoveredElement.node.getTextContent() !== '') {
-                    isEmptyParagraph = false;
-                }
-                setHandlePosition(hoveredElement?.elem, menuRef.current, anchorElem, isEmptyParagraph ? SPACE : SPACE - 20);
-            });
+            setHandlePosition(hoveredElement?.elem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
         }
     }, [
         anchorElem,
         hoveredElement,
-        editor
+        blockHandleHorizontalOffset
     ]);
     const handleAddClick = useCallback((event)=>{
         let hoveredElementToUse = hoveredElement;
@@ -220,16 +136,19 @@ function useAddBlockHandle(editor, anchorElem, isEditable) {
         editor,
         hoveredElement
     ]);
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", {
-        className: "icon add-block-menu",
-        onClick: (event)=>{
-            handleAddClick(event);
-        },
-        ref: menuRef,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: isEditable ? 'icon' : ''
-    }))), anchorElem);
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx(React.Fragment, {
+        children: /*#__PURE__*/ _jsx("button", {
+            className: "icon add-block-menu",
+            onClick: (event)=>{
+                handleAddClick(event);
+            },
+            ref: menuRef,
+            type: "button",
+            children: /*#__PURE__*/ _jsx("div", {
+                className: isEditable ? 'icon' : ''
+            })
+        })
+    }), anchorElem);
 }
 export function AddBlockHandlePlugin({ anchorElem = document.body }) {
     const [editor] = useLexicalComposerContext();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/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, $getNodeByKey } from 'lexical'\nimport * as React from 'react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { isHTMLElement } from '../../../utils/guard.js'\nimport { Point } from '../../../utils/point.js'\nimport { Rect } from '../../../utils/rect.js'\nimport { ENABLE_SLASH_MENU_COMMAND } from '../../SlashMenu/LexicalTypeaheadMenuPlugin/index.js'\nimport { getCollapsedMargins } from '../utils/getCollapsedMargins.js'\nimport { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js'\nimport { isOnHandleElement } from '../utils/isOnHandleElement.js'\nimport { setHandlePosition } from '../utils/setHandlePosition.js'\nimport './index.scss'\n\nconst SPACE = -24\nconst ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu'\n\nconst Downward = 1\nconst Upward = -1\nconst Indeterminate = 0\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 getBlockElement(\n  anchorElem: HTMLElement,\n  editor: LexicalEditor,\n  event: MouseEvent,\n  useEdgeAsDefault = false,\n  horizontalOffset = 0,\n): {\n  blockElem: HTMLElement | null\n  blockNode: LexicalNode | null\n} {\n  const anchorElementRect = anchorElem.getBoundingClientRect()\n  const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n  let blockElem: HTMLElement | null = null\n  let blockNode: LexicalNode | null = null\n\n  // Return null if matching block element is the first or last node\n  editor.getEditorState().read(() => {\n    if (useEdgeAsDefault) {\n      const [firstNode, lastNode] = [\n        editor.getElementByKey(topLevelNodeKeys[0]),\n        editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1]),\n      ]\n\n      const [firstNodeRect, lastNodeRect] = [\n        firstNode?.getBoundingClientRect(),\n        lastNode?.getBoundingClientRect(),\n      ]\n\n      if (firstNodeRect && lastNodeRect) {\n        if (event.y < firstNodeRect.top) {\n          blockElem = firstNode\n        } else if (event.y > lastNodeRect.bottom) {\n          blockElem = lastNode\n        }\n\n        if (blockElem) {\n          return {\n            blockElem: null,\n          }\n        }\n      }\n    }\n\n    // Find matching block element\n    let index = getCurrentIndex(topLevelNodeKeys.length)\n    let direction = Indeterminate\n\n    while (index >= 0 && index < topLevelNodeKeys.length) {\n      const key = topLevelNodeKeys[index]\n      const elem = editor.getElementByKey(key)\n      if (elem === null) {\n        break\n      }\n      const point = new Point(event.x + horizontalOffset, event.y)\n      const domRect = Rect.fromDOM(elem)\n      const { marginBottom, marginTop } = getCollapsedMargins(elem)\n\n      const rect = domRect.generateNewRect({\n        bottom: domRect.bottom + marginBottom,\n        left: anchorElementRect.left,\n        right: anchorElementRect.right,\n        top: domRect.top - marginTop,\n      })\n\n      const {\n        reason: { isOnBottomSide, isOnTopSide },\n        result,\n      } = rect.contains(point)\n\n      if (result) {\n        blockElem = elem\n        blockNode = $getNodeByKey(key)\n        prevIndex = index\n        break\n      }\n\n      if (direction === Indeterminate) {\n        if (isOnTopSide) {\n          direction = Upward\n        } else if (isOnBottomSide) {\n          direction = Downward\n        } else {\n          // stop search block element\n          direction = Infinity\n        }\n      }\n\n      index += direction\n    }\n  })\n\n  return {\n    blockElem,\n    blockNode,\n  }\n}\n\nfunction useAddBlockHandle(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n  isEditable: boolean,\n): JSX.Element {\n  const scrollerElem = anchorElem.parentElement\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      let distanceFromScrollerElem = 0\n      // Calculate distance between scrollerElem and target if target is not in scrollerElem\n      if (scrollerElem && !scrollerElem.contains(target)) {\n        const { bottom, left, right, top } = scrollerElem.getBoundingClientRect()\n        const { pageX, pageY } = event\n        const horizontalBuffer = 50\n        const verticalBuffer = 25\n        const adjustedTop = top + window.scrollY\n        const adjustedBottom = bottom + window.scrollY\n\n        if (\n          pageY < adjustedTop - verticalBuffer ||\n          pageY > adjustedBottom + verticalBuffer ||\n          pageX < left - horizontalBuffer ||\n          pageX > right + horizontalBuffer\n        ) {\n          if (hoveredElement !== null) {\n            setHoveredElement(null)\n          }\n          return\n        }\n\n        // This is used to allow the _emptyBlockElem to be found when the mouse is in the\n        // buffer zone around the scrollerElem.\n        if (pageX < left || pageX > right) {\n          distanceFromScrollerElem = pageX < left ? pageX - left : pageX - right\n        }\n      }\n\n      if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {\n        return\n      }\n      const { blockElem: _emptyBlockElem, blockNode } = getBlockElement(\n        anchorElem,\n        editor,\n        event,\n        false,\n        -distanceFromScrollerElem,\n      )\n      if (!_emptyBlockElem) {\n        return\n      }\n      if (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem) {\n        setHoveredElement({\n          elem: _emptyBlockElem,\n          node: blockNode,\n        })\n      }\n    }\n\n    // Since the draggableBlockElem is outside the actual editor, we need to listen to the document\n    // to be able to detect when the mouse is outside the editor and respect a buffer around\n    // the scrollerElem to avoid the draggableBlockElem disappearing too early.\n    document?.addEventListener('mousemove', onDocumentMouseMove)\n\n    return () => {\n      document?.removeEventListener('mousemove', onDocumentMouseMove)\n    }\n  }, [scrollerElem, anchorElem, editor, hoveredElement])\n\n  useEffect(() => {\n    if (menuRef.current && hoveredElement?.node) {\n      editor.getEditorState().read(() => {\n        // Check if blockNode is an empty text node\n        let isEmptyParagraph = true\n        if (\n          hoveredElement.node.getType() !== 'paragraph' ||\n          hoveredElement.node.getTextContent() !== ''\n        ) {\n          isEmptyParagraph = false\n        }\n\n        setHandlePosition(\n          hoveredElement?.elem,\n          menuRef.current,\n          anchorElem,\n          isEmptyParagraph ? SPACE : SPACE - 20,\n        )\n      })\n    }\n  }, [anchorElem, hoveredElement, editor])\n\n  const handleAddClick = useCallback(\n    (event) => {\n      let hoveredElementToUse = hoveredElement\n      if (!hoveredElementToUse?.node) {\n        return\n      }\n\n      // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node\n      editor.update(() => {\n        // Check if blockNode is an empty text node\n        let isEmptyParagraph = true\n        if (\n          hoveredElementToUse.node.getType() !== 'paragraph' ||\n          hoveredElementToUse.node.getTextContent() !== ''\n        ) {\n          isEmptyParagraph = false\n        }\n\n        if (!isEmptyParagraph) {\n          const newParagraph = $createParagraphNode()\n          hoveredElementToUse.node.insertAfter(newParagraph)\n\n          setTimeout(() => {\n            hoveredElementToUse = {\n              elem: editor.getElementByKey(newParagraph.getKey()),\n              node: newParagraph,\n            }\n            setHoveredElement(hoveredElementToUse)\n          }, 0)\n        }\n      })\n\n      // 2. Focus on the new paragraph node\n      setTimeout(() => {\n        editor.update(() => {\n          editor.focus()\n\n          if (\n            hoveredElementToUse.node &&\n            'select' in hoveredElementToUse.node &&\n            typeof hoveredElementToUse.node.select === 'function'\n          ) {\n            hoveredElementToUse.node.select()\n          }\n        })\n      }, 1)\n\n      // Make sure this is called AFTER the focusing has been processed by the browser\n      // Otherwise, this won't work\n      setTimeout(() => {\n        editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {\n          node: hoveredElementToUse.node as ParagraphNode,\n        })\n      }, 2)\n\n      event.stopPropagation()\n      event.preventDefault()\n    },\n    [editor, hoveredElement],\n  )\n\n  return createPortal(\n    <React.Fragment>\n      <button\n        className=\"icon add-block-menu\"\n        onClick={(event) => {\n          handleAddClick(event)\n        }}\n        ref={menuRef}\n        type=\"button\"\n      >\n        <div className={isEditable ? 'icon' : ''} />\n      </button>\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n\nexport function AddBlockHandlePlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): JSX.Element {\n  const [editor] = useLexicalComposerContext()\n  return useAddBlockHandle(editor, anchorElem, editor._editable)\n}\n"],"names":["useLexicalComposerContext","$createParagraphNode","$getNodeByKey","React","useCallback","useEffect","useRef","useState","createPortal","isHTMLElement","Point","Rect","ENABLE_SLASH_MENU_COMMAND","getCollapsedMargins","getTopLevelNodeKeys","isOnHandleElement","setHandlePosition","SPACE","ADD_BLOCK_MENU_CLASSNAME","Downward","Upward","Indeterminate","prevIndex","Infinity","getCurrentIndex","keysLength","Math","floor","getBlockElement","anchorElem","editor","event","useEdgeAsDefault","horizontalOffset","anchorElementRect","getBoundingClientRect","topLevelNodeKeys","blockElem","blockNode","getEditorState","read","firstNode","lastNode","getElementByKey","length","firstNodeRect","lastNodeRect","y","top","bottom","index","direction","key","elem","point","x","domRect","fromDOM","marginBottom","marginTop","rect","generateNewRect","left","right","reason","isOnBottomSide","isOnTopSide","result","contains","useAddBlockHandle","isEditable","scrollerElem","parentElement","menuRef","hoveredElement","setHoveredElement","onDocumentMouseMove","target","distanceFromScrollerElem","pageX","pageY","horizontalBuffer","verticalBuffer","adjustedTop","window","scrollY","adjustedBottom","_emptyBlockElem","node","document","addEventListener","removeEventListener","current","isEmptyParagraph","getType","getTextContent","handleAddClick","hoveredElementToUse","update","newParagraph","insertAfter","setTimeout","getKey","focus","select","dispatchCommand","stopPropagation","preventDefault","Fragment","button","className","onClick","ref","type","div","AddBlockHandlePlugin","body","_editable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx"],"sourcesContent":["'use client'\nimport type { LexicalEditor, LexicalNode, ParagraphNode } from 'lexical'\n\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'\nimport { $createParagraphNode } from 'lexical'\nimport * as React from 'react'\nimport { type JSX, useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js'\nimport { isHTMLElement } from '../../../utils/guard.js'\nimport { Point } from '../../../utils/point.js'\nimport { ENABLE_SLASH_MENU_COMMAND } from '../../SlashMenu/LexicalTypeaheadMenuPlugin/index.js'\nimport { calculateDistanceFromScrollerElem } from '../utils/calculateDistanceFromScrollerElem.js'\nimport { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js'\nimport { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js'\nimport { isOnHandleElement } from '../utils/isOnHandleElement.js'\nimport { setHandlePosition } from '../utils/setHandlePosition.js'\nimport './index.scss'\n\nconst ADD_BLOCK_MENU_CLASSNAME = 'add-block-menu'\n\nlet prevIndex = Infinity\n\nfunction getCurrentIndex(keysLength: number): number {\n  if (keysLength === 0) {\n    return Infinity\n  }\n  if (prevIndex >= 0 && prevIndex < keysLength) {\n    return prevIndex\n  }\n\n  return Math.floor(keysLength / 2)\n}\n\nfunction useAddBlockHandle(\n  editor: LexicalEditor,\n  anchorElem: HTMLElement,\n  isEditable: boolean,\n): React.ReactElement {\n  const scrollerElem = anchorElem.parentElement\n\n  const { editorConfig } = useEditorConfigContext()\n  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : 12\n\n  const menuRef = useRef<HTMLButtonElement>(null)\n  const [hoveredElement, setHoveredElement] = useState<{\n    elem: HTMLElement\n    node: LexicalNode\n  } | null>(null)\n\n  useEffect(() => {\n    function onDocumentMouseMove(event: MouseEvent) {\n      const target = event.target\n      if (!isHTMLElement(target)) {\n        return\n      }\n\n      const distanceFromScrollerElem = calculateDistanceFromScrollerElem(\n        scrollerElem,\n        event.pageX,\n        event.pageY,\n        target,\n      )\n\n      if (distanceFromScrollerElem === -1) {\n        setHoveredElement(null)\n        return\n      }\n\n      if (isOnHandleElement(target, ADD_BLOCK_MENU_CLASSNAME)) {\n        return\n      }\n      const topLevelNodeKeys = getTopLevelNodeKeys(editor)\n\n      const {\n        blockElem: _emptyBlockElem,\n        blockNode,\n        foundAtIndex,\n      } = getNodeCloseToPoint({\n        anchorElem,\n        cache_threshold: 0,\n        editor,\n        horizontalOffset: -distanceFromScrollerElem,\n        point: new Point(event.x, event.y),\n        returnEmptyParagraphs: true,\n        startIndex: getCurrentIndex(topLevelNodeKeys.length),\n        useEdgeAsDefault: false,\n      })\n\n      prevIndex = foundAtIndex\n\n      if (!_emptyBlockElem) {\n        return\n      }\n      if (hoveredElement?.node !== blockNode || hoveredElement?.elem !== _emptyBlockElem) {\n        setHoveredElement({\n          elem: _emptyBlockElem,\n          node: blockNode,\n        })\n      }\n    }\n\n    // Since the draggableBlockElem is outside the actual editor, we need to listen to the document\n    // to be able to detect when the mouse is outside the editor and respect a buffer around\n    // the scrollerElem to avoid the draggableBlockElem disappearing too early.\n    document?.addEventListener('mousemove', onDocumentMouseMove)\n\n    return () => {\n      document?.removeEventListener('mousemove', onDocumentMouseMove)\n    }\n  }, [scrollerElem, anchorElem, editor, hoveredElement])\n\n  useEffect(() => {\n    if (menuRef.current && hoveredElement?.node) {\n      setHandlePosition(\n        hoveredElement?.elem,\n        menuRef.current,\n        anchorElem,\n        blockHandleHorizontalOffset,\n      )\n    }\n  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])\n\n  const handleAddClick = useCallback(\n    (event) => {\n      let hoveredElementToUse = hoveredElement\n      if (!hoveredElementToUse?.node) {\n        return\n      }\n\n      // 1. Update hoveredElement.node to a new paragraph node if the hoveredElement.node is not a paragraph node\n      editor.update(() => {\n        // Check if blockNode is an empty text node\n        let isEmptyParagraph = true\n        if (\n          hoveredElementToUse.node.getType() !== 'paragraph' ||\n          hoveredElementToUse.node.getTextContent() !== ''\n        ) {\n          isEmptyParagraph = false\n        }\n\n        if (!isEmptyParagraph) {\n          const newParagraph = $createParagraphNode()\n          hoveredElementToUse.node.insertAfter(newParagraph)\n\n          setTimeout(() => {\n            hoveredElementToUse = {\n              elem: editor.getElementByKey(newParagraph.getKey()),\n              node: newParagraph,\n            }\n            setHoveredElement(hoveredElementToUse)\n          }, 0)\n        }\n      })\n\n      // 2. Focus on the new paragraph node\n      setTimeout(() => {\n        editor.update(() => {\n          editor.focus()\n\n          if (\n            hoveredElementToUse.node &&\n            'select' in hoveredElementToUse.node &&\n            typeof hoveredElementToUse.node.select === 'function'\n          ) {\n            hoveredElementToUse.node.select()\n          }\n        })\n      }, 1)\n\n      // Make sure this is called AFTER the focusing has been processed by the browser\n      // Otherwise, this won't work\n      setTimeout(() => {\n        editor.dispatchCommand(ENABLE_SLASH_MENU_COMMAND, {\n          node: hoveredElementToUse.node as ParagraphNode,\n        })\n      }, 2)\n\n      event.stopPropagation()\n      event.preventDefault()\n    },\n    [editor, hoveredElement],\n  )\n\n  return createPortal(\n    <React.Fragment>\n      <button\n        className=\"icon add-block-menu\"\n        onClick={(event) => {\n          handleAddClick(event)\n        }}\n        ref={menuRef}\n        type=\"button\"\n      >\n        <div className={isEditable ? 'icon' : ''} />\n      </button>\n    </React.Fragment>,\n    anchorElem,\n  )\n}\n\nexport function AddBlockHandlePlugin({\n  anchorElem = document.body,\n}: {\n  anchorElem?: HTMLElement\n}): React.ReactElement {\n  const [editor] = useLexicalComposerContext()\n  return useAddBlockHandle(editor, anchorElem, editor._editable)\n}\n"],"names":["useLexicalComposerContext","$createParagraphNode","React","useCallback","useEffect","useRef","useState","createPortal","useEditorConfigContext","isHTMLElement","Point","ENABLE_SLASH_MENU_COMMAND","calculateDistanceFromScrollerElem","getNodeCloseToPoint","getTopLevelNodeKeys","isOnHandleElement","setHandlePosition","ADD_BLOCK_MENU_CLASSNAME","prevIndex","Infinity","getCurrentIndex","keysLength","Math","floor","useAddBlockHandle","editor","anchorElem","isEditable","scrollerElem","parentElement","editorConfig","blockHandleHorizontalOffset","admin","hideGutter","menuRef","hoveredElement","setHoveredElement","onDocumentMouseMove","event","target","distanceFromScrollerElem","pageX","pageY","topLevelNodeKeys","blockElem","_emptyBlockElem","blockNode","foundAtIndex","cache_threshold","horizontalOffset","point","x","y","returnEmptyParagraphs","startIndex","length","useEdgeAsDefault","node","elem","document","addEventListener","removeEventListener","current","handleAddClick","hoveredElementToUse","update","isEmptyParagraph","getType","getTextContent","newParagraph","insertAfter","setTimeout","getElementByKey","getKey","focus","select","dispatchCommand","stopPropagation","preventDefault","Fragment","button","className","onClick","ref","type","div","AddBlockHandlePlugin","body","_editable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/field/lexical/plugins/handles/AddBlockHandlePlugin/index.scss

@@ -10,7 +10,7 @@
   will-change: transform;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background-color: var(--theme-elevation-100);
     .icon {
       opacity: 1;
     }
@@ -25,7 +25,7 @@
 
   html[data-theme='dark'] & {
     .icon {
-      filter: invert(1);
+      background-image: url(../../../ui/icons/Add/light.svg);
     }
   }
 }

package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.d.ts

@@ -1,3 +1,3 @@
 import type React from 'react';
-export declare function highlightElemOriginalPosition(debugHighlightRef: React.RefObject<HTMLDivElement>, htmlElem: HTMLElement, anchorElem: HTMLElement): void;
+export declare function highlightElemOriginalPosition(debugHighlightRef: React.RefObject<HTMLDivElement | null>, htmlElem: HTMLElement, anchorElem: HTMLElement): void;
 //# sourceMappingURL=highlightElemOriginalPosition.d.ts.map

package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlightElemOriginalPosition.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,wBAAgB,6BAA6B,CAC3C,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAClD,QAAQ,EAAE,WAAW,EACrB,UAAU,EAAE,WAAW,QA4BxB"}
+{"version":3,"file":"highlightElemOriginalPosition.d.ts","sourceRoot":"","sources":["../../../../../../src/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,wBAAgB,6BAA6B,CAC3C,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EACzD,QAAQ,EAAE,WAAW,EACrB,UAAU,EAAE,WAAW,QA4BxB"}

package/dist/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.ts"],"sourcesContent":["import type React from 'react'\n\nimport { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js'\n\nexport function highlightElemOriginalPosition(\n  debugHighlightRef: React.RefObject<HTMLDivElement>,\n  htmlElem: HTMLElement,\n  anchorElem: HTMLElement,\n) {\n  if (!debugHighlightRef.current) {\n    // If the ref doesn't point to an existing element, we can't set styles\n    return\n  }\n\n  const { left: anchorLeft, top: anchorTop } = anchorElem.getBoundingClientRect()\n\n  // Get computed styles of the given element\n  const boundingRect = getBoundingClientRectWithoutTransform(htmlElem)\n\n  // Extract necessary styles (ignoring transform)\n  const width = boundingRect.width\n  const height = boundingRect.height\n  const top = boundingRect.top - anchorTop\n  const left = boundingRect.left - anchorLeft\n\n  debugHighlightRef.current.style.border = '2px solid green'\n  debugHighlightRef.current.style.boxSizing = 'border-box'\n  debugHighlightRef.current.style.height = height + 'px'\n  debugHighlightRef.current.style.pointerEvents = 'none'\n  debugHighlightRef.current.style.position = 'absolute'\n  debugHighlightRef.current.style.top = top + 'px'\n  debugHighlightRef.current.style.left = left + 'px'\n  debugHighlightRef.current.style.width = width + 'px'\n  debugHighlightRef.current.style.zIndex = '1000'\n  debugHighlightRef.current.style.opacity = '0.5'\n}\n"],"names":["getBoundingClientRectWithoutTransform","highlightElemOriginalPosition","debugHighlightRef","htmlElem","anchorElem","current","left","anchorLeft","top","anchorTop","getBoundingClientRect","boundingRect","width","height","style","border","boxSizing","pointerEvents","position","zIndex","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,qCAAqC,QAAQ,uCAAsC;AAE5F,OAAO,SAASC,8BACdC,iBAAkD,EAClDC,QAAqB,EACrBC,UAAuB;IAEvB,IAAI,CAACF,kBAAkBG,OAAO,EAAE;QAC9B,uEAAuE;QACvE;IACF;IAEA,MAAM,EAAEC,MAAMC,UAAU,EAAEC,KAAKC,SAAS,EAAE,GAAGL,WAAWM,qBAAqB;IAE7E,2CAA2C;IAC3C,MAAMC,eAAeX,sCAAsCG;IAE3D,gDAAgD;IAChD,MAAMS,QAAQD,aAAaC,KAAK;IAChC,MAAMC,SAASF,aAAaE,MAAM;IAClC,MAAML,MAAMG,aAAaH,GAAG,GAAGC;IAC/B,MAAMH,OAAOK,aAAaL,IAAI,GAAGC;IAEjCL,kBAAkBG,OAAO,CAACS,KAAK,CAACC,MAAM,GAAG;IACzCb,kBAAkBG,OAAO,CAACS,KAAK,CAACE,SAAS,GAAG;IAC5Cd,kBAAkBG,OAAO,CAACS,KAAK,CAACD,MAAM,GAAGA,SAAS;IAClDX,kBAAkBG,OAAO,CAACS,KAAK,CAACG,aAAa,GAAG;IAChDf,kBAAkBG,OAAO,CAACS,KAAK,CAACI,QAAQ,GAAG;IAC3ChB,kBAAkBG,OAAO,CAACS,KAAK,CAACN,GAAG,GAAGA,MAAM;IAC5CN,kBAAkBG,OAAO,CAACS,KAAK,CAACR,IAAI,GAAGA,OAAO;IAC9CJ,kBAAkBG,OAAO,CAACS,KAAK,CAACF,KAAK,GAAGA,QAAQ;IAChDV,kBAAkBG,OAAO,CAACS,KAAK,CAACK,MAAM,GAAG;IACzCjB,kBAAkBG,OAAO,CAACS,KAAK,CAACM,OAAO,GAAG;AAC5C"}
+{"version":3,"sources":["../../../../../../src/field/lexical/plugins/handles/DraggableBlockPlugin/highlightElemOriginalPosition.ts"],"sourcesContent":["import type React from 'react'\n\nimport { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js'\n\nexport function highlightElemOriginalPosition(\n  debugHighlightRef: React.RefObject<HTMLDivElement | null>,\n  htmlElem: HTMLElement,\n  anchorElem: HTMLElement,\n) {\n  if (!debugHighlightRef.current) {\n    // If the ref doesn't point to an existing element, we can't set styles\n    return\n  }\n\n  const { left: anchorLeft, top: anchorTop } = anchorElem.getBoundingClientRect()\n\n  // Get computed styles of the given element\n  const boundingRect = getBoundingClientRectWithoutTransform(htmlElem)\n\n  // Extract necessary styles (ignoring transform)\n  const width = boundingRect.width\n  const height = boundingRect.height\n  const top = boundingRect.top - anchorTop\n  const left = boundingRect.left - anchorLeft\n\n  debugHighlightRef.current.style.border = '2px solid green'\n  debugHighlightRef.current.style.boxSizing = 'border-box'\n  debugHighlightRef.current.style.height = height + 'px'\n  debugHighlightRef.current.style.pointerEvents = 'none'\n  debugHighlightRef.current.style.position = 'absolute'\n  debugHighlightRef.current.style.top = top + 'px'\n  debugHighlightRef.current.style.left = left + 'px'\n  debugHighlightRef.current.style.width = width + 'px'\n  debugHighlightRef.current.style.zIndex = '1000'\n  debugHighlightRef.current.style.opacity = '0.5'\n}\n"],"names":["getBoundingClientRectWithoutTransform","highlightElemOriginalPosition","debugHighlightRef","htmlElem","anchorElem","current","left","anchorLeft","top","anchorTop","getBoundingClientRect","boundingRect","width","height","style","border","boxSizing","pointerEvents","position","zIndex","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,SAASA,qCAAqC,QAAQ,uCAAsC;AAE5F,OAAO,SAASC,8BACdC,iBAAyD,EACzDC,QAAqB,EACrBC,UAAuB;IAEvB,IAAI,CAACF,kBAAkBG,OAAO,EAAE;QAC9B,uEAAuE;QACvE;IACF;IAEA,MAAM,EAAEC,MAAMC,UAAU,EAAEC,KAAKC,SAAS,EAAE,GAAGL,WAAWM,qBAAqB;IAE7E,2CAA2C;IAC3C,MAAMC,eAAeX,sCAAsCG;IAE3D,gDAAgD;IAChD,MAAMS,QAAQD,aAAaC,KAAK;IAChC,MAAMC,SAASF,aAAaE,MAAM;IAClC,MAAML,MAAMG,aAAaH,GAAG,GAAGC;IAC/B,MAAMH,OAAOK,aAAaL,IAAI,GAAGC;IAEjCL,kBAAkBG,OAAO,CAACS,KAAK,CAACC,MAAM,GAAG;IACzCb,kBAAkBG,OAAO,CAACS,KAAK,CAACE,SAAS,GAAG;IAC5Cd,kBAAkBG,OAAO,CAACS,KAAK,CAACD,MAAM,GAAGA,SAAS;IAClDX,kBAAkBG,OAAO,CAACS,KAAK,CAACG,aAAa,GAAG;IAChDf,kBAAkBG,OAAO,CAACS,KAAK,CAACI,QAAQ,GAAG;IAC3ChB,kBAAkBG,OAAO,CAACS,KAAK,CAACN,GAAG,GAAGA,MAAM;IAC5CN,kBAAkBG,OAAO,CAACS,KAAK,CAACR,IAAI,GAAGA,OAAO;IAC9CJ,kBAAkBG,OAAO,CAACS,KAAK,CAACF,KAAK,GAAGA,QAAQ;IAChDV,kBAAkBG,OAAO,CAACS,KAAK,CAACK,MAAM,GAAG;IACzCjB,kBAAkBG,OAAO,CAACS,KAAK,CAACM,OAAO,GAAG;AAC5C"}

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

@@ -1,6 +1,6 @@
-/// <reference types="react" resolution-mode="require"/>
+import * as React from 'react';
 import './index.scss';
 export declare function DraggableBlockPlugin({ anchorElem, }: {
     anchorElem?: HTMLElement;
-}): JSX.Element;
+}): React.ReactElement;
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,20 +1,22 @@
 'use client';
+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 { $getNearestNodeFromDOMNode, $getNodeByKey } from 'lexical';
 import * as React from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useEditorConfigContext } from '../../../config/client/EditorConfigProvider.js';
 import { isHTMLElement } from '../../../utils/guard.js';
 import { Point } from '../../../utils/point.js';
+import { calculateDistanceFromScrollerElem } from '../utils/calculateDistanceFromScrollerElem.js';
+import { getNodeCloseToPoint } from '../utils/getNodeCloseToPoint.js';
 import { getTopLevelNodeKeys } from '../utils/getTopLevelNodeKeys.js';
 import { isOnHandleElement } from '../utils/isOnHandleElement.js';
 import { setHandlePosition } from '../utils/setHandlePosition.js';
 import { getBoundingClientRectWithoutTransform } from './getBoundingRectWithoutTransform.js';
-import { getNodeCloseToPoint } from './getNodeCloseToPoint.js';
 import './index.scss';
 import { setTargetLine } from './setTargetLine.js';
-const SPACE = -24;
 const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
 const DRAG_DATA_FORMAT = 'application/x-lexical-drag-block';
 let prevIndex = Infinity;
@@ -41,11 +43,10 @@ function hideTargetLine(targetLineElem, lastTargetBlockElem) {
     }
     if (lastTargetBlockElem) {
         lastTargetBlockElem.style.opacity = '';
-        lastTargetBlockElem.style.transform = '';
         // Delete marginBottom and marginTop values we set
         lastTargetBlockElem.style.marginBottom = '';
         lastTargetBlockElem.style.marginTop = '';
-    //lastTargetBlockElem.style.border = 'none'
+    //lastTargetBlock.style.border = 'none'
     }
 }
 function useDraggableBlockMenu(editor, anchorElem, isEditable) {
@@ -55,28 +56,9 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     const debugHighlightRef = useRef(null);
     const isDraggingBlockRef = useRef(false);
     const [draggableBlockElem, setDraggableBlockElem] = useState(null);
-    const [lastTargetBlockElem, setLastTargetBlockElem] = useState(null);
-    const calculateDistanceFromScrollerElem = useCallback((pageX, pageY, target, horizontalBuffer = 50, verticalBuffer = 25)=>{
-        let distanceFromScrollerElem = 0;
-        // Calculate distance between scrollerElem and target if target is not in scrollerElem
-        if (scrollerElem && !scrollerElem.contains(target)) {
-            const { bottom, left, right, top } = scrollerElem.getBoundingClientRect();
-            const adjustedTop = top + window.scrollY;
-            const adjustedBottom = bottom + window.scrollY;
-            if (pageY < adjustedTop - verticalBuffer || pageY > adjustedBottom + verticalBuffer || pageX < left - horizontalBuffer || pageX > right + horizontalBuffer) {
-                setDraggableBlockElem(null);
-                return distanceFromScrollerElem;
-            }
-            // This is used to allow the _draggableBlockElem to be found when the mouse is in the
-            // buffer zone around the scrollerElem.
-            if (pageX < left || pageX > right) {
-                distanceFromScrollerElem = pageX < left ? pageX - left : pageX - right;
-            }
-        }
-        return distanceFromScrollerElem;
-    }, [
-        scrollerElem
-    ]);
+    const [lastTargetBlock, setLastTargetBlock] = useState(null);
+    const { editorConfig } = useEditorConfigContext();
+    const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -44 : -8;
     useEffect(()=>{
         /**
      * Handles positioning of the drag handle
@@ -85,7 +67,11 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
             if (!isHTMLElement(target)) {
                 return;
             }
-            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(event.pageX, event.pageY, target);
+            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target);
+            if (distanceFromScrollerElem === -1) {
+                setDraggableBlockElem(null);
+                return;
+            }
             if (isOnHandleElement(target, DRAGGABLE_BLOCK_MENU_CLASSNAME)) {
                 return;
             }
@@ -97,13 +83,14 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
                 horizontalOffset: -distanceFromScrollerElem,
                 point: new Point(event.x, event.y),
                 startIndex: getCurrentIndex(topLevelNodeKeys.length),
-                useEdgeAsDefault: false
+                useEdgeAsDefault: false,
+                verbose: false
             });
+            prevIndex = foundAtIndex;
             //if (DEBUG && _draggableBlockElem) {
             //targetBlockElem.style.border = '3px solid red'
             // highlightElemOriginalPosition(debugHighlightRef, _draggableBlockElem, anchorElem)
             //}
-            prevIndex = foundAtIndex;
             if (!_draggableBlockElem && !isFoundNodeEmptyParagraph) {
                 return;
             }
@@ -112,7 +99,7 @@ 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
+        // 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 ()=>{
@@ -122,16 +109,16 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         scrollerElem,
         anchorElem,
         editor,
-        calculateDistanceFromScrollerElem,
         draggableBlockElem
     ]);
     useEffect(()=>{
         if (menuRef.current) {
-            setHandlePosition(draggableBlockElem, menuRef.current, anchorElem, SPACE);
+            setHandlePosition(draggableBlockElem, menuRef.current, anchorElem, blockHandleHorizontalOffset);
         }
     }, [
         anchorElem,
-        draggableBlockElem
+        draggableBlockElem,
+        blockHandleHorizontalOffset
     ]);
     useEffect(()=>{
         function onDragover(event) {
@@ -146,7 +133,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
             if (!isHTMLElement(target)) {
                 return false;
             }
-            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(event.pageX, event.pageY, target, 100, 50);
+            const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target, 100, 50);
             const topLevelNodeKeys = getTopLevelNodeKeys(editor);
             const { blockElem: targetBlockElem, foundAtIndex, isFoundNodeEmptyParagraph } = getNodeCloseToPoint({
                 anchorElem,
@@ -165,15 +152,26 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
                 return false;
             }
             if (draggableBlockElem !== targetBlockElem) {
-                setTargetLine(SPACE, targetLineElem, targetBlockElem, lastTargetBlockElem, pageY, anchorElem, event, debugHighlightRef, isFoundNodeEmptyParagraph);
+                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, lastTargetBlockElem);
+                hideTargetLine(targetLineElem, lastTargetBlock?.elem);
+                setLastTargetBlock({
+                    boundingBox: targetBlockElem.getBoundingClientRect(),
+                    elem: targetBlockElem,
+                    isBelow: false
+                });
             }
-            setLastTargetBlockElem(targetBlockElem);
             return true;
         }
         function onDrop(event) {
@@ -194,7 +192,7 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
                 if (!isHTMLElement(target)) {
                     return false;
                 }
-                const distanceFromScrollerElem = calculateDistanceFromScrollerElem(event.pageX, event.pageY, target, 100, 50);
+                const distanceFromScrollerElem = calculateDistanceFromScrollerElem(scrollerElem, event.pageX, event.pageY, target, 100, 50);
                 const { blockElem: targetBlockElem, isFoundNodeEmptyParagraph } = getNodeCloseToPoint({
                     anchorElem,
                     editor,
@@ -237,6 +235,43 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
         }*/ 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;
         }
@@ -249,11 +284,13 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
             document.removeEventListener('drop', onDrop);
         };
     }, [
+        scrollerElem,
+        blockHandleHorizontalOffset,
         anchorElem,
         editor,
-        lastTargetBlockElem,
-        calculateDistanceFromScrollerElem,
-        draggableBlockElem
+        lastTargetBlock,
+        draggableBlockElem,
+        editorConfig?.admin?.hideGutter
     ]);
     function onDragStart(event) {
         const dataTransfer = event.dataTransfer;
@@ -273,23 +310,30 @@ function useDraggableBlockMenu(editor, anchorElem, isEditable) {
     }
     function onDragEnd() {
         isDraggingBlockRef.current = false;
-        hideTargetLine(targetLineRef.current, lastTargetBlockElem);
+        hideTargetLine(targetLineRef.current, lastTargetBlock?.elem);
     }
-    return /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
-        className: "icon draggable-block-menu",
-        draggable: true,
-        onDragEnd: onDragEnd,
-        onDragStart: onDragStart,
-        ref: menuRef
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: isEditable ? 'icon' : ''
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: "draggable-block-target-line",
-        ref: targetLineRef
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "debug-highlight",
-        ref: debugHighlightRef
-    })), anchorElem);
+    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);
 }
 export function DraggableBlockPlugin({ anchorElem = document.body }) {
     const [editor] = useLexicalComposerContext();