♻️ Normalize data

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

@@ -1,19 +1,12 @@
 import { MenuList, MenuItem } from '@chakra-ui/react'
 import { TrashIcon } from 'assets/icons'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 
-export const StepNodeContextMenu = ({
-  blockId,
-  stepId,
-}: {
-  blockId: string
-  stepId: string
-}) => {
-  const { removeStepFromBlock } = useTypebot()
+export const StepNodeContextMenu = ({ stepId }: { stepId: string }) => {
+  const { deleteStep } = useTypebot()
+
+  const handleDeleteClick = () => deleteStep(stepId)
 
-  const handleDeleteClick = () => {
-    removeStepFromBlock(blockId, stepId)
-  }
   return (
     <MenuList>
       <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>

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

@@ -1,5 +1,5 @@
 import { Flex, Text } from '@chakra-ui/react'
-import { Step, StartStep, StepType } from 'bot-engine'
+import { Step, StartStep, StepType } from 'models'
 
 export const StepContent = (props: Step | StartStep) => {
   switch (props.type) {

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

@@ -1,6 +1,6 @@
 import { Box, Flex, HStack, useEventListener } from '@chakra-ui/react'
 import React, { useEffect, useMemo, useState } from 'react'
-import { Block, StartStep, Step, StepType } from 'bot-engine'
+import { Block, Step, StepType } from 'models'
 import { SourceEndpoint } from './SourceEndpoint'
 import { useGraph } from 'contexts/GraphContext'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
@@ -8,7 +8,7 @@ import { isDefined } from 'utils'
 import { Coordinates } from '@dnd-kit/core/dist/types'
 import { TextEditor } from './TextEditor/TextEditor'
 import { StepContent } from './StepContent'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { ContextMenu } from 'components/shared/ContextMenu'
 import { StepNodeContextMenu } from './RightClickMenu'
 
@@ -19,7 +19,7 @@ export const StepNode = ({
   onMouseMoveTopOfElement,
   onMouseDown,
 }: {
-  step: Step | StartStep
+  step: Step
   isConnectable: boolean
   onMouseMoveBottomOfElement?: () => void
   onMouseMoveTopOfElement?: () => void
@@ -29,8 +29,7 @@ export const StepNode = ({
   ) => void
 }) => {
   const { setConnectingIds, connectingIds } = useGraph()
-  const { removeStepFromBlock, typebot } = useTypebot()
-  const { blocks, startBlock } = typebot ?? {}
+  const { deleteStep, typebot } = useTypebot()
   const [isConnecting, setIsConnecting] = useState(false)
   const [mouseDownEvent, setMouseDownEvent] =
     useState<{ absolute: Coordinates; relative: Coordinates }>()
@@ -59,9 +58,8 @@ export const StepNode = ({
       })
   }
 
-  const handleConnectionDragStart = () => {
-    setConnectingIds({ blockId: step.blockId, stepId: step.id })
-  }
+  const handleConnectionDragStart = () =>
+    setConnectingIds({ source: { blockId: step.blockId, stepId: step.id } })
 
   const handleMouseDown = (e: React.MouseEvent) => {
     if (!onMouseDown) return
@@ -95,7 +93,7 @@ export const StepNode = ({
       (event.movementX > 0 || event.movementY > 0)
     if (isMovingAndIsMouseDown) {
       onMouseDown(mouseDownEvent, step as Step)
-      removeStepFromBlock(step.blockId, step.id)
+      deleteStep(step.id)
       setMouseDownEvent(undefined)
     }
     const element = event.currentTarget as HTMLDivElement
@@ -110,18 +108,15 @@ export const StepNode = ({
   }
 
   const connectedStubPosition: 'right' | 'left' | undefined = useMemo(() => {
-    const currentBlock = [startBlock, ...(blocks ?? [])].find(
-      (b) => b?.id === step.blockId
-    )
+    if (!typebot) return
+    const currentBlock = typebot.blocks?.byId[step.blockId]
     const isDragginConnectorFromCurrentBlock =
-      connectingIds?.blockId === currentBlock?.id &&
+      connectingIds?.source.blockId === currentBlock?.id &&
       connectingIds?.target?.blockId
     const targetBlockId = isDragginConnectorFromCurrentBlock
       ? connectingIds.target?.blockId
       : step.target?.blockId
-    const targetedBlock = targetBlockId
-      ? (blocks ?? []).find((b) => b.id === targetBlockId)
-      : undefined
+    const targetedBlock = targetBlockId && typebot.blocks.byId[targetBlockId]
     return targetedBlock
       ? targetedBlock.graphCoordinates.x <
         (currentBlock as Block).graphCoordinates.x
@@ -129,27 +124,24 @@ export const StepNode = ({
         : 'right'
       : undefined
   }, [
-    blocks,
-    connectingIds?.blockId,
-    connectingIds?.target?.blockId,
+    typebot,
     step.blockId,
     step.target?.blockId,
-    startBlock,
+    connectingIds?.source.blockId,
+    connectingIds?.target?.blockId,
   ])
 
   return step.type === StepType.TEXT &&
     (isEditing ||
       (isEditing === undefined && step.content.plainText === '')) ? (
     <TextEditor
-      ids={{ stepId: step.id, blockId: step.blockId }}
+      stepId={step.id}
       initialValue={step.content.richText}
       onClose={handleCloseEditor}
     />
   ) : (
     <ContextMenu<HTMLDivElement>
-      renderMenu={() => (
-        <StepNodeContextMenu blockId={step.blockId} stepId={step.id} />
-      )}
+      renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
     >
       {(ref, isOpened) => (
         <Flex

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

@@ -1,5 +1,5 @@
 import { StackProps, HStack } from '@chakra-ui/react'
-import { StartStep, Step } from 'bot-engine'
+import { StartStep, Step } from 'models'
 import { StepIcon } from 'components/board/StepTypesList/StepIcon'
 import { StepContent } from './StepContent'
 

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

@@ -9,20 +9,25 @@ import {
 } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from 'libs/plate'
 import { useDebounce } from 'use-debounce'
-import { useTypebot } from 'contexts/TypebotContext'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { createEditor } from 'slate'
 import { ToolBar } from './ToolBar'
 import { parseHtmlStringToPlainText } from 'services/utils'
+import { TextStep } from 'models'
 
 type TextEditorProps = {
-  ids: { stepId: string; blockId: string }
+  stepId: string
   initialValue: TDescendant[]
   onClose: () => void
 }
 
-export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
+export const TextEditor = ({
+  initialValue,
+  stepId,
+  onClose,
+}: TextEditorProps) => {
   const editor = useMemo(
-    () => withPlate(createEditor(), { id: ids.stepId, plugins: platePlugins }),
+    () => withPlate(createEditor(), { id: stepId, plugins: platePlugins }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   )
@@ -48,13 +53,13 @@ export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
     const html = serializeHtml(editor, {
       nodes: value,
     })
-    updateStep(ids, {
+    updateStep(stepId, {
       content: {
         html,
         richText: value,
         plainText: parseHtmlStringToPlainText(html),
       },
-    })
+    } as TextStep)
   }
 
   const handleMouseDown = (e: React.MouseEvent) => {
@@ -72,7 +77,7 @@ export const TextEditor = ({ initialValue, ids, onClose }: TextEditorProps) => {
     >
       <ToolBar />
       <Plate
-        id={ids.stepId}
+        id={stepId}
         editableProps={{
           style: editorStyle,
           autoFocus: true,