🚸 (editor) Improve block dragging behavior

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx

@@ -9,6 +9,7 @@ export const ImageBubbleContent = ({ block }: { block: ImageBubbleBlock }) => {
   ) : (
     <Box w="full">
       <Image
+        pointerEvents="none"
         src={
           containsVariables ? '/images/dynamic-image.png' : block.content?.url
         }

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -1,9 +1,4 @@
-import {
-  Flex,
-  Stack,
-  useColorModeValue,
-  useEventListener,
-} from '@chakra-ui/react'
+import { Flex, Stack, useColorModeValue } from '@chakra-ui/react'
 import React, { useEffect, useRef, useState } from 'react'
 import { Plate, PlateProvider, usePlateEditorRef } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from '@/lib/plate'
@@ -84,14 +79,6 @@ const TextBubbleEditorContent = ({
     }
   }
 
-  useEventListener(
-    'pointerdown',
-    (e) => {
-      e.stopPropagation()
-    },
-    textEditorRef.current
-  )
-
   const handleVariableSelected = (variable?: Variable) => {
     setIsVariableDropdownOpen(false)
     if (!rememberedSelection.current || !variable) return
@@ -115,6 +102,7 @@ const TextBubbleEditorContent = ({
       pos="relative"
       spacing={0}
       cursor="text"
+      className="prevent-group-drag"
       sx={{
         '.slate-ToolbarButton-active': {
           color: useColorModeValue('blue.500', 'blue.300') + ' !important',

apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx

@@ -204,6 +204,7 @@ export const BlockNode = ({
               onClick={handleClick}
               data-testid={`block`}
               w="full"
+              className="prevent-group-drag"
             >
               <HStack
                 flex="1"

apps/builder/src/features/graph/components/nodes/group/GroupNode.tsx

@@ -96,6 +96,7 @@ const NonMemoizedDraggableGroupNode = ({
     handler: () => setIsFocused(false),
     ref: groupRef,
     capture: true,
+    isEnabled: isFocused,
   })
 
   // When the group is moved from external action (e.g. undo/redo), update the current coordinates
@@ -154,8 +155,13 @@ const NonMemoizedDraggableGroupNode = ({
   useDrag(
     ({ first, last, offset: [offsetX, offsetY], event, target }) => {
       event.stopPropagation()
-      if ((target as HTMLElement).classList.contains('prevent-group-drag'))
+      if (
+        (target as HTMLElement)
+          .closest('.prevent-group-drag')
+          ?.classList.contains('prevent-group-drag')
+      )
         return
+
       if (first) {
         setIsFocused(true)
         setIsMouseDown(true)

apps/builder/src/features/theme/components/chat/AvatarForm.tsx

@@ -44,6 +44,7 @@ export const AvatarForm = ({
   useOutsideClick({
     ref: popoverContainerRef,
     handler: onClose,
+    isEnabled: isOpen,
   })
 
   const isDefaultAvatar = !avatarProps?.url || avatarProps.url.includes('{{')

apps/builder/src/features/variables/components/VariablesButton.tsx

@@ -28,6 +28,7 @@ export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
   useOutsideClick({
     ref: popoverRef,
     handler: onClose,
+    isEnabled: isOpen,
   })
 
   return (