🚀 Init preview and typebot cotext in editor

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

@@ -1,39 +1,25 @@
 import { Flex, useEventListener } from '@chakra-ui/react'
-import React, { useRef, useMemo, useEffect } from 'react'
+import React, { useRef, useMemo } from 'react'
 import { blockWidth, useGraph } from 'contexts/GraphContext'
 import { BlockNode } from './BlockNode/BlockNode'
 import { useDnd } from 'contexts/DndContext'
 import { Edges } from './Edges'
 import { useTypebot } from 'contexts/TypebotContext'
 import { StartBlockNode } from './BlockNode/StartBlockNode'
+import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 
 const Graph = () => {
   const { draggedStepType, setDraggedStepType, draggedStep, setDraggedStep } =
     useDnd()
   const graphContainerRef = useRef<HTMLDivElement | null>(null)
-  const { typebot } = useTypebot()
-  const {
-    blocks,
-    setBlocks,
-    graphPosition,
-    setGraphPosition,
-    addNewBlock,
-    setStartBlock,
-    startBlock,
-  } = useGraph()
+  const { typebot, addNewBlock } = useTypebot()
+  const { graphPosition, setGraphPosition } = useGraph()
   const transform = useMemo(
     () =>
       `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
     [graphPosition]
   )
 
-  useEffect(() => {
-    if (!typebot) return
-    setBlocks(typebot.blocks)
-    setStartBlock(typebot.startBlock)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [typebot?.blocks])
-
   const handleMouseWheel = (e: WheelEvent) => {
     e.preventDefault()
     const isPinchingTrackpad = e.ctrlKey
@@ -59,26 +45,33 @@ const Graph = () => {
       step: draggedStep,
       type: draggedStepType,
       x: e.clientX - graphPosition.x - blockWidth / 3,
-      y: e.clientY - graphPosition.y - 20,
+      y: e.clientY - graphPosition.y - 20 - headerHeight,
     })
     setDraggedStep(undefined)
     setDraggedStepType(undefined)
   }
   useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
 
+  const handleMouseDown = (e: MouseEvent) => {
+    const isRightClick = e.button === 2
+    if (isRightClick) e.stopPropagation()
+  }
+  useEventListener('mousedown', handleMouseDown, undefined, { capture: true })
+
   if (!typebot) return <></>
   return (
-    <Flex ref={graphContainerRef} flex="1" h="full">
+    <Flex ref={graphContainerRef} flex="1">
       <Flex
         flex="1"
         boxSize={'200px'}
+        maxW={'200px'}
         style={{
           transform,
         }}
       >
         <Edges />
-        {startBlock && <StartBlockNode block={startBlock} />}
-        {blocks.map((block) => (
+        {typebot.startBlock && <StartBlockNode block={typebot.startBlock} />}
+        {(typebot.blocks ?? []).map((block) => (
           <BlockNode block={block} key={block.id} />
         ))}
       </Flex>