🚑 (editor) Fix block drag when dropping at same spot

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx

@@ -5,7 +5,6 @@ import {
   PopoverTrigger,
   useColorModeValue,
   useDisclosure,
-  useEventListener,
 } from '@chakra-ui/react'
 import React, { useEffect, useRef, useState } from 'react'
 import {
@@ -30,7 +29,6 @@ import { BlockSettings } from './SettingsPopoverContent/SettingsPopoverContent'
 import { TargetEndpoint } from '../../Endpoints'
 import { MediaBubblePopoverContent } from './MediaBubblePopoverContent'
 import { ContextMenu } from '@/components/ContextMenu'
-import { setMultipleRefs } from '@/utils/helpers'
 import { TextBubbleEditor } from '@/features/blocks/bubbles/textBubble'
 import {
   NodePosition,
@@ -40,6 +38,7 @@ import {
   ParentModalProvider,
 } from '../../../providers'
 import { hasDefaultConnector } from '../../../utils'
+import { setMultipleRefs } from '@/utils/helpers'
 
 export const BlockNode = ({
   block,
@@ -86,6 +85,7 @@ export const BlockNode = ({
     if (block.type === 'start' || !onMouseDown) return
     onMouseDown(position, block)
   }
+
   useDragDistance({
     ref: blockRef,
     onDrag,
@@ -160,10 +160,19 @@ export const BlockNode = ({
 
   useEffect(() => {
     setIsPopoverOpened(openedBlockId === block.id)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [openedBlockId])
+  }, [block.id, openedBlockId])
 
-  useEventListener('pointerdown', (e) => e.stopPropagation(), blockRef.current)
+  useEffect(() => {
+    if (!blockRef.current) return
+    const blockElement = blockRef.current
+    blockElement.addEventListener('pointerdown', (e) => e.stopPropagation())
+
+    return () => {
+      blockElement.removeEventListener('pointerdown', (e) =>
+        e.stopPropagation()
+      )
+    }
+  }, [])
 
   const hasIcomingEdge = typebot?.edges.some((edge) => {
     return edge.to.blockId === block.id

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodesList.tsx

@@ -95,15 +95,18 @@ export const BlockNodesList = ({
   const handleBlockMouseDown =
     (blockIndex: number) =>
     (
-      { absolute, relative }: { absolute: Coordinates; relative: Coordinates },
+      { relative, absolute }: { absolute: Coordinates; relative: Coordinates },
       block: DraggableBlock
     ) => {
       if (isReadOnly) return
       placeholderRefs.current.splice(blockIndex + 1, 1)
-      detachBlockFromGroup({ groupIndex, blockIndex })
-      setPosition(absolute)
       setMousePositionInElement(relative)
+      setPosition({
+        x: absolute.x - relative.x,
+        y: absolute.y - relative.y,
+      })
       setDraggedBlock(block)
+      detachBlockFromGroup({ groupIndex, blockIndex })
     }
 
   const handlePushElementRef =

apps/builder/src/features/graph/providers/GraphDndProvider.tsx

@@ -7,6 +7,7 @@ import {
   SetStateAction,
   useCallback,
   useContext,
+  useEffect,
   useRef,
   useState,
 } from 'react'
@@ -114,19 +115,34 @@ export const useDragDistance = ({
   }
   useEventListener('mousedown', handleMouseDown, ref.current)
 
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!mouseDownPosition.current) return
-    const { clientX, clientY } = e
-    if (
-      Math.abs(mouseDownPosition.current.absolute.x - clientX) >
-        distanceTolerance ||
-      Math.abs(mouseDownPosition.current.absolute.y - clientY) >
-        distanceTolerance
-    ) {
-      onDrag(mouseDownPosition.current)
+  useEffect(() => {
+    let triggered = false
+    const triggerDragCallbackIfMouseMovedEnough = (e: MouseEvent) => {
+      if (!mouseDownPosition.current || triggered) return
+      const { clientX, clientY } = e
+      if (
+        Math.abs(mouseDownPosition.current.absolute.x - clientX) >
+          distanceTolerance ||
+        Math.abs(mouseDownPosition.current.absolute.y - clientY) >
+          distanceTolerance
+      ) {
+        triggered = true
+        onDrag(mouseDownPosition.current)
+      }
     }
-  }
-  useEventListener('mousemove', handleMouseMove)
+
+    document.addEventListener(
+      'mousemove',
+      triggerDragCallbackIfMouseMovedEnough
+    )
+
+    return () => {
+      document.removeEventListener(
+        'mousemove',
+        triggerDragCallbackIfMouseMovedEnough
+      )
+    }
+  }, [distanceTolerance, onDrag])
 }
 
 export const computeNearestPlaceholderIndex = (