refactor(editor): ♻️ Undo / Redo buttons + structure refacto

Yet another huge refacto... While implementing undo and redo features I understood that I updated the stored typebot too many times (i.e. on each key input) so I had to rethink it entirely. I also moved around some files.

apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNode.tsx

@@ -0,0 +1,156 @@
+import {
+  EditablePreview,
+  EditableInput,
+  Editable,
+  useEventListener,
+  Flex,
+  Fade,
+  IconButton,
+} from '@chakra-ui/react'
+import { PlusIcon } from 'assets/icons'
+import { ContextMenu } from 'components/shared/ContextMenu'
+import { Coordinates } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ChoiceInputStep, ChoiceItem } from 'models'
+import React, { useState } from 'react'
+import { isNotDefined, isSingleChoiceInput } from 'utils'
+import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
+import { ButtonNodeContextMenu } from './ButtonNodeContextMenu'
+
+type Props = {
+  item: ChoiceItem
+  onMouseMoveBottomOfElement?: () => void
+  onMouseMoveTopOfElement?: () => void
+  onMouseDown?: (
+    stepNodePosition: { absolute: Coordinates; relative: Coordinates },
+    item: ChoiceItem
+  ) => void
+}
+
+export const ButtonNode = ({
+  item,
+  onMouseDown,
+  onMouseMoveBottomOfElement,
+  onMouseMoveTopOfElement,
+}: Props) => {
+  const { deleteChoiceItem, updateChoiceItem, typebot, createChoiceItem } =
+    useTypebot()
+  const [mouseDownEvent, setMouseDownEvent] =
+    useState<{ absolute: Coordinates; relative: Coordinates }>()
+  const [isMouseOver, setIsMouseOver] = useState(false)
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!onMouseDown) return
+    e.stopPropagation()
+    const element = e.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const relativeX = e.clientX - rect.left
+    const relativeY = e.clientY - rect.top
+    setMouseDownEvent({
+      absolute: { x: e.clientX + relativeX, y: e.clientY + relativeY },
+      relative: { x: relativeX, y: relativeY },
+    })
+  }
+
+  const handleGlobalMouseUp = () => {
+    setMouseDownEvent(undefined)
+  }
+  useEventListener('mouseup', handleGlobalMouseUp)
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
+    const isMovingAndIsMouseDown =
+      mouseDownEvent &&
+      onMouseDown &&
+      (event.movementX > 0 || event.movementY > 0)
+    if (isMovingAndIsMouseDown) {
+      onMouseDown(mouseDownEvent, item)
+      deleteChoiceItem(item.id)
+      setMouseDownEvent(undefined)
+    }
+    const element = event.currentTarget as HTMLDivElement
+    const rect = element.getBoundingClientRect()
+    const y = event.clientY - rect.top
+    if (y > rect.height / 2) onMouseMoveBottomOfElement()
+    else onMouseMoveTopOfElement()
+  }
+
+  const handleInputSubmit = (content: string) =>
+    updateChoiceItem(item.id, { content: content === '' ? undefined : content })
+
+  const handlePlusClick = () => {
+    const nextIndex =
+      (
+        typebot?.steps.byId[item.stepId] as ChoiceInputStep
+      ).options.itemIds.indexOf(item.id) + 1
+    createChoiceItem({ stepId: item.stepId }, nextIndex)
+  }
+
+  const handleMouseEnter = () => setIsMouseOver(true)
+  const handleMouseLeave = () => setIsMouseOver(false)
+
+  return (
+    <ContextMenu<HTMLDivElement>
+      renderMenu={() => <ButtonNodeContextMenu itemId={item.id} />}
+    >
+      {(ref, isOpened) => (
+        <Flex
+          ref={ref}
+          align="center"
+          pos="relative"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          justifyContent="center"
+          shadow="sm"
+          _hover={{ shadow: 'md' }}
+          transition="box-shadow 200ms"
+          borderWidth="1px"
+          rounded="md"
+          px="4"
+          py="2"
+          borderColor={isOpened ? 'blue.400' : 'gray.300'}
+        >
+          <Editable
+            defaultValue={item.content ?? 'Click to edit'}
+            flex="1"
+            startWithEditView={isNotDefined(item.content)}
+            onSubmit={handleInputSubmit}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+          >
+            <EditablePreview
+              w="full"
+              color={item.content !== 'Click to edit' ? 'inherit' : 'gray.500'}
+            />
+            <EditableInput />
+          </Editable>
+          {typebot && isSingleChoiceInput(typebot.steps.byId[item.stepId]) && (
+            <SourceEndpoint
+              source={{
+                blockId: typebot.steps.byId[item.stepId].blockId,
+                stepId: item.stepId,
+                buttonId: item.id,
+              }}
+              pos="absolute"
+              right="15px"
+            />
+          )}
+          <Fade
+            in={isMouseOver}
+            style={{ position: 'absolute', bottom: '-15px', zIndex: 3 }}
+            unmountOnExit
+          >
+            <IconButton
+              aria-label="Add item"
+              icon={<PlusIcon />}
+              size="xs"
+              shadow="md"
+              colorScheme="blue"
+              onClick={handlePlusClick}
+            />
+          </Fade>
+        </Flex>
+      )}
+    </ContextMenu>
+  )
+}

apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodeContextMenu.tsx

@@ -0,0 +1,17 @@
+import { MenuList, MenuItem } from '@chakra-ui/react'
+import { TrashIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+
+export const ButtonNodeContextMenu = ({ itemId }: { itemId: string }) => {
+  const { deleteChoiceItem } = useTypebot()
+
+  const handleDeleteClick = () => deleteChoiceItem(itemId)
+
+  return (
+    <MenuList>
+      <MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
+        Delete
+      </MenuItem>
+    </MenuList>
+  )
+}

apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodeOverlay.tsx

@@ -0,0 +1,26 @@
+import { Flex, FlexProps } from '@chakra-ui/react'
+import { ChoiceItem } from 'models'
+import React from 'react'
+
+type Props = {
+  item: ChoiceItem
+} & FlexProps
+
+export const ButtonNodeOverlay = ({ item, ...props }: Props) => {
+  return (
+    <Flex
+      px="4"
+      py="2"
+      rounded="md"
+      bgColor="white"
+      borderWidth="1px"
+      borderColor={'gray.300'}
+      w="212px"
+      pointerEvents="none"
+      shadow="lg"
+      {...props}
+    >
+      {item.content ?? 'Click to edit'}
+    </Flex>
+  )
+}

apps/builder/components/shared/Graph/Nodes/ButtonNode/ButtonNodesList.tsx

@@ -0,0 +1,154 @@
+import { Flex, Portal, Stack, Text, useEventListener } from '@chakra-ui/react'
+import { useStepDnd } from 'contexts/StepDndContext'
+import { Coordinates } from 'contexts/GraphContext'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ChoiceInputStep, ChoiceItem } from 'models'
+import React, { useMemo, useState } from 'react'
+import { ButtonNode } from './ButtonNode'
+import { SourceEndpoint } from '../../Endpoints'
+import { ButtonNodeOverlay } from './ButtonNodeOverlay'
+
+type ChoiceItemsListProps = {
+  step: ChoiceInputStep
+}
+
+export const ButtonNodesList = ({ step }: ChoiceItemsListProps) => {
+  const { typebot, createChoiceItem } = useTypebot()
+  const {
+    draggedChoiceItem,
+    mouseOverBlockId,
+    setDraggedChoiceItem,
+    setMouseOverBlockId,
+  } = useStepDnd()
+  const showSortPlaceholders = useMemo(
+    () => mouseOverBlockId === step.blockId && draggedChoiceItem,
+    [draggedChoiceItem, mouseOverBlockId, step.blockId]
+  )
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  })
+  const [relativeCoordinates, setRelativeCoordinates] = useState({ x: 0, y: 0 })
+  const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
+    number | undefined
+  >()
+
+  const handleStepMove = (event: MouseEvent) => {
+    if (!draggedChoiceItem) return
+    const { clientX, clientY } = event
+    setPosition({
+      ...position,
+      x: clientX - relativeCoordinates.x,
+      y: clientY - relativeCoordinates.y,
+    })
+  }
+  useEventListener('mousemove', handleStepMove)
+
+  const handleMouseUp = (e: MouseEvent) => {
+    if (!draggedChoiceItem) return
+    if (expandedPlaceholderIndex !== -1) {
+      e.stopPropagation()
+      createChoiceItem(draggedChoiceItem, expandedPlaceholderIndex)
+    }
+    setMouseOverBlockId(undefined)
+    setExpandedPlaceholderIndex(undefined)
+    setDraggedChoiceItem(undefined)
+  }
+  useEventListener('mouseup', handleMouseUp, undefined, { capture: true })
+
+  const handleStepMouseDown = (
+    { absolute, relative }: { absolute: Coordinates; relative: Coordinates },
+    item: ChoiceItem
+  ) => {
+    setPosition(absolute)
+    setRelativeCoordinates(relative)
+    setMouseOverBlockId(typebot?.steps.byId[item.stepId].blockId)
+    setDraggedChoiceItem(item)
+  }
+
+  const handleMouseOnTopOfStep = (stepIndex: number) => {
+    if (!draggedChoiceItem) return
+    setExpandedPlaceholderIndex(stepIndex === 0 ? 0 : stepIndex)
+  }
+
+  const handleMouseOnBottomOfStep = (stepIndex: number) => {
+    if (!draggedChoiceItem) return
+    setExpandedPlaceholderIndex(stepIndex + 1)
+  }
+
+  const stopPropagating = (e: React.MouseEvent) => e.stopPropagation()
+
+  return (
+    <Stack flex={1} spacing={1} onClick={stopPropagating}>
+      <Flex
+        h={expandedPlaceholderIndex === 0 ? '50px' : '2px'}
+        bgColor={'gray.300'}
+        visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+        rounded="lg"
+        transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+      />
+      {step.options.itemIds.map((itemId, idx) => (
+        <Stack key={itemId} spacing={1}>
+          {typebot?.choiceItems.byId[itemId] && (
+            <ButtonNode
+              item={typebot?.choiceItems.byId[itemId]}
+              onMouseMoveTopOfElement={() => handleMouseOnTopOfStep(idx)}
+              onMouseMoveBottomOfElement={() => {
+                handleMouseOnBottomOfStep(idx)
+              }}
+              onMouseDown={handleStepMouseDown}
+            />
+          )}
+          <Flex
+            h={
+              showSortPlaceholders && expandedPlaceholderIndex === idx + 1
+                ? '50px'
+                : '2px'
+            }
+            bgColor={'gray.300'}
+            visibility={showSortPlaceholders ? 'visible' : 'hidden'}
+            rounded="lg"
+            transition={showSortPlaceholders ? 'height 200ms' : 'none'}
+          />
+        </Stack>
+      ))}
+      <Stack>
+        <Flex
+          px="4"
+          py="2"
+          borderWidth="1px"
+          borderColor="gray.300"
+          bgColor="gray.50"
+          rounded="md"
+          pos="relative"
+          align="center"
+          cursor="not-allowed"
+        >
+          <Text color="gray.500">Default</Text>
+          <SourceEndpoint
+            source={{
+              blockId: step.blockId,
+              stepId: step.id,
+            }}
+            pos="absolute"
+            right="15px"
+          />
+        </Flex>
+      </Stack>
+
+      {draggedChoiceItem && draggedChoiceItem.stepId === step.id && (
+        <Portal>
+          <ButtonNodeOverlay
+            item={draggedChoiceItem}
+            pos="fixed"
+            top="0"
+            left="0"
+            style={{
+              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+            }}
+          />
+        </Portal>
+      )}
+    </Stack>
+  )
+}

apps/builder/components/shared/Graph/Nodes/ButtonNode/index.tsx

@@ -0,0 +1 @@
+export { ButtonNodesList } from './ButtonNodesList'