🚸 (editor) Improve block dragging behavior

apps/builder/src/hooks/useOutsideClick.ts

@@ -1,5 +1,4 @@
-import { useEventListener } from '@chakra-ui/react'
-import { RefObject } from 'react'
+import { RefObject, useEffect } from 'react'
 
 type Handler = (event: MouseEvent) => void
 
@@ -7,22 +6,32 @@ type Props<T> = {
   ref: RefObject<T>
   handler: Handler
   capture?: boolean
+  isEnabled?: boolean
 }
 
 export const useOutsideClick = <T extends HTMLElement = HTMLElement>({
   ref,
   handler,
   capture,
+  isEnabled,
 }: Props<T>): void => {
-  const triggerHandlerIfOutside = (event: MouseEvent) => {
-    const el = ref?.current
-    if (!el || el.contains(event.target as Node)) {
-      return
+  useEffect(() => {
+    if (isEnabled === false) return
+    const triggerHandlerIfOutside = (event: MouseEvent) => {
+      const el = ref?.current
+      if (!el || el.contains(event.target as Node)) {
+        return
+      }
+      handler(event)
     }
-    handler(event)
-  }
 
-  useEventListener('pointerdown', triggerHandlerIfOutside, null, {
-    capture,
-  })
+    document.addEventListener('pointerdown', triggerHandlerIfOutside, {
+      capture,
+    })
+    return () => {
+      document.removeEventListener('pointerdown', triggerHandlerIfOutside, {
+        capture,
+      })
+    }
+  }, [capture, handler, isEnabled, ref])
 }