fix(richtext-lexical): order of add/drag handles was inconsistent between gutter and no-gutter mode

Author: AlessioGr

packages/richtext-lexical/src/field/lexical/plugins/handles/AddBlockHandlePlugin/index.tsx

@@ -113,33 +113,14 @@ function useAddBlockHandle(
 
   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
-            ? blockHandleHorizontalOffset
-            : blockHandleHorizontalOffset - (editorConfig?.admin?.hideGutter ? 20 : 0),
-        )
-      })
+      setHandlePosition(
+        hoveredElement?.elem,
+        menuRef.current,
+        anchorElem,
+        blockHandleHorizontalOffset,
+      )
     }
-  }, [
-    anchorElem,
-    hoveredElement,
-    editor,
-    blockHandleHorizontalOffset,
-    editorConfig?.admin?.hideGutter,
-  ])
+  }, [anchorElem, hoveredElement, blockHandleHorizontalOffset])
 
   const handleAddClick = useCallback(
     (event) => {

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/index.tsx

@@ -80,7 +80,7 @@ function useDraggableBlockMenu(
   const [lastTargetBlockElem, setLastTargetBlockElem] = useState<HTMLElement | null>(null)
   const { editorConfig } = useEditorConfigContext()
 
-  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -24 : -8
+  const blockHandleHorizontalOffset = editorConfig?.admin?.hideGutter ? -44 : -8
 
   useEffect(() => {
     /**
@@ -212,7 +212,11 @@ function useDraggableBlockMenu(
 
       if (draggableBlockElem !== targetBlockElem) {
         setTargetLine(
-          blockHandleHorizontalOffset,
+          editorConfig?.admin?.hideGutter ? '0px' : '3rem',
+          blockHandleHorizontalOffset +
+            (editorConfig?.admin?.hideGutter
+              ? menuRef?.current?.getBoundingClientRect()?.width ?? 0
+              : -menuRef?.current?.getBoundingClientRect()?.width ?? 0),
           targetLineElem,
           targetBlockElem,
           lastTargetBlockElem,

packages/richtext-lexical/src/field/lexical/plugins/handles/DraggableBlockPlugin/setTargetLine.ts

@@ -6,7 +6,8 @@ const TEXT_BOX_HORIZONTAL_PADDING = -24
 const DEBUG = false
 
 export function setTargetLine(
-  SPACE: number,
+  offsetWidth: string,
+  offsetLeft: number,
   targetLineElem: HTMLElement,
   targetBlockElem: HTMLElement,
   lastTargetBlockElem: HTMLElement | null,
@@ -51,10 +52,10 @@ export function setTargetLine(
   if (!isBelow) {
     top -= TARGET_LINE_HALF_HEIGHT * 2
   }
-  const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE
+  const left = TEXT_BOX_HORIZONTAL_PADDING - offsetLeft
 
   targetLineElem.style.transform = `translate(${left}px, ${top}px)`
-  targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`
+  targetLineElem.style.width = `calc(${anchorWidth}px - ${offsetWidth})`
   targetLineElem.style.opacity = '.4'
 
   /**