🚀 Init preview and typebot cotext in editor

apps/builder/components/board/graph/BlockNode/BlockNode.tsx

@@ -5,27 +5,31 @@ import {
   Stack,
   useEventListener,
 } from '@chakra-ui/react'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Block, StartBlock } from 'bot-engine'
 import { useGraph } from 'contexts/GraphContext'
 import { useDnd } from 'contexts/DndContext'
 import { StepsList } from './StepsList'
 import { isNotDefined } from 'services/utils'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { BlockNodeContextMenu } from './BlockNodeContextMenu'
 
 export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
-  const {
-    updateBlockPosition,
-    addNewStepToBlock,
-    connectingIds,
-    setConnectingIds,
-  } = useGraph()
+  const { connectingIds, setConnectingIds, previewingIds } = useGraph()
+  const { updateBlockPosition, addStepToBlock } = useTypebot()
   const { draggedStep, draggedStepType, setDraggedStepType, setDraggedStep } =
     useDnd()
-  const blockRef = useRef<HTMLDivElement | null>(null)
   const [isMouseDown, setIsMouseDown] = useState(false)
   const [titleValue, setTitleValue] = useState(block.title)
   const [showSortPlaceholders, setShowSortPlaceholders] = useState(false)
   const [isConnecting, setIsConnecting] = useState(false)
+  const isPreviewing = useMemo(
+    () =>
+      previewingIds.sourceId === block.id ||
+      previewingIds.targetId === block.id,
+    [block.id, previewingIds.sourceId, previewingIds.targetId]
+  )
 
   useEffect(() => {
     setIsConnecting(
@@ -69,44 +73,56 @@ export const BlockNode = ({ block }: { block: Block | StartBlock }) => {
   const handleStepDrop = (index: number) => {
     setShowSortPlaceholders(false)
     if (draggedStepType) {
-      addNewStepToBlock(block.id, draggedStepType, index)
+      addStepToBlock(block.id, draggedStepType, index)
       setDraggedStepType(undefined)
     }
     if (draggedStep) {
-      addNewStepToBlock(block.id, draggedStep, index)
+      addStepToBlock(block.id, draggedStep, index)
       setDraggedStep(undefined)
     }
   }
 
   return (
-    <Stack
-      p="4"
-      rounded="lg"
-      bgColor="blue.50"
-      borderWidth="2px"
-      borderColor={isConnecting ? 'blue.400' : 'gray.400'}
-      minW="300px"
-      transition="border 300ms"
-      pos="absolute"
-      style={{
-        transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
-      }}
-      onMouseDown={handleMouseDown}
-      onMouseUp={handleMouseUp}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      ref={blockRef}
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => <BlockNodeContextMenu blockId={block.id} />}
     >
-      <Editable value={titleValue} onChange={handleTitleChange}>
-        <EditablePreview _hover={{ bgColor: 'blue.100' }} px="1" />
-        <EditableInput minW="0" px="1" />
-      </Editable>
-      <StepsList
-        blockId={block.id}
-        steps={block.steps}
-        showSortPlaceholders={showSortPlaceholders}
-        onMouseUp={handleStepDrop}
-      />
-    </Stack>
+      {(ref, isOpened) => (
+        <Stack
+          ref={ref}
+          p="4"
+          rounded="lg"
+          bgColor="blue.50"
+          borderWidth="2px"
+          borderColor={
+            isConnecting || isOpened || isPreviewing ? 'blue.400' : 'gray.400'
+          }
+          minW="300px"
+          transition="border 300ms"
+          pos="absolute"
+          style={{
+            transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
+          }}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <Editable value={titleValue} onChange={handleTitleChange}>
+            <EditablePreview
+              _hover={{ bgColor: 'blue.100' }}
+              px="1"
+              userSelect={'none'}
+            />
+            <EditableInput minW="0" px="1" />
+          </Editable>
+          <StepsList
+            blockId={block.id}
+            steps={block.steps}
+            showSortPlaceholders={showSortPlaceholders}
+            onMouseUp={handleStepDrop}
+          />
+        </Stack>
+      )}
+    </ContextMenu>
   )
 }