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.
This commit is contained in:
Baptiste Arnaud
307
apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
Normal file
307
apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
Normal file
@@ -0,0 +1,307 @@
|
||||
import {
|
||||
Flex,
|
||||
HStack,
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
useDisclosure,
|
||||
useEventListener,
|
||||
} from '@chakra-ui/react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import {
|
||||
BubbleStep,
|
||||
BubbleStepContent,
|
||||
DraggableStep,
|
||||
Step,
|
||||
StepOptions,
|
||||
TextBubbleStep,
|
||||
Webhook,
|
||||
} from 'models'
|
||||
import { Coordinates, useGraph } from 'contexts/GraphContext'
|
||||
import { StepIcon } from 'components/editor/StepsSideBar/StepIcon'
|
||||
import { isBubbleStep, isTextBubbleStep, isWebhookStep } from 'utils'
|
||||
import { StepNodeContent } from './StepNodeContent/StepNodeContent'
|
||||
import { useTypebot } from 'contexts/TypebotContext'
|
||||
import { ContextMenu } from 'components/shared/ContextMenu'
|
||||
import { SettingsPopoverContent } from './SettingsPopoverContent'
|
||||
import { StepNodeContextMenu } from './StepNodeContextMenu'
|
||||
import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
|
||||
import { hasDefaultConnector } from 'services/typebots'
|
||||
import { useRouter } from 'next/router'
|
||||
import { SettingsModal } from './SettingsPopoverContent/SettingsModal'
|
||||
import { StepSettings } from './SettingsPopoverContent/SettingsPopoverContent'
|
||||
import { TextBubbleEditor } from './TextBubbleEditor'
|
||||
import { TargetEndpoint } from '../../Endpoints'
|
||||
import { MediaBubblePopoverContent } from './MediaBubblePopoverContent'
|
||||
|
||||
export const StepNode = ({
|
||||
step,
|
||||
isConnectable,
|
||||
onMouseMoveBottomOfElement,
|
||||
onMouseMoveTopOfElement,
|
||||
onMouseDown,
|
||||
}: {
|
||||
step: Step
|
||||
isConnectable: boolean
|
||||
onMouseMoveBottomOfElement?: () => void
|
||||
onMouseMoveTopOfElement?: () => void
|
||||
onMouseDown?: (
|
||||
stepNodePosition: { absolute: Coordinates; relative: Coordinates },
|
||||
step: DraggableStep
|
||||
) => void
|
||||
}) => {
|
||||
const { query } = useRouter()
|
||||
const {
|
||||
setConnectingIds,
|
||||
connectingIds,
|
||||
openedStepId,
|
||||
setOpenedStepId,
|
||||
blocksCoordinates,
|
||||
} = useGraph()
|
||||
const { detachStepFromBlock, updateStep, typebot, updateWebhook } =
|
||||
useTypebot()
|
||||
const [localStep, setLocalStep] = useState(step)
|
||||
const [localWebhook, setLocalWebhook] = useState(
|
||||
isWebhookStep(step)
|
||||
? typebot?.webhooks.byId[step.options.webhookId ?? '']
|
||||
: undefined
|
||||
)
|
||||
const [isConnecting, setIsConnecting] = useState(false)
|
||||
const [isPopoverOpened, setIsPopoverOpened] = useState(
|
||||
openedStepId === step.id
|
||||
)
|
||||
|
||||
const [mouseDownEvent, setMouseDownEvent] =
|
||||
useState<{ absolute: Coordinates; relative: Coordinates }>()
|
||||
const [isEditing, setIsEditing] = useState<boolean>(
|
||||
isTextBubbleStep(step) && step.content.plainText === ''
|
||||
)
|
||||
const {
|
||||
isOpen: isModalOpen,
|
||||
onOpen: onModalOpen,
|
||||
onClose: onModalClose,
|
||||
} = useDisclosure()
|
||||
|
||||
useEffect(() => {
|
||||
setLocalStep(step)
|
||||
}, [step])
|
||||
|
||||
useEffect(() => {
|
||||
if (query.stepId?.toString() === step.id) setOpenedStepId(step.id)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [query])
|
||||
|
||||
useEffect(() => {
|
||||
setIsConnecting(
|
||||
connectingIds?.target?.blockId === step.blockId &&
|
||||
connectingIds?.target?.stepId === step.id
|
||||
)
|
||||
}, [connectingIds, step.blockId, step.id])
|
||||
|
||||
const handleModalClose = () => {
|
||||
updateStep(localStep.id, { ...localStep })
|
||||
onModalClose()
|
||||
}
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (connectingIds?.target)
|
||||
setConnectingIds({
|
||||
...connectingIds,
|
||||
target: { ...connectingIds.target, stepId: step.id },
|
||||
})
|
||||
}
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (connectingIds?.target)
|
||||
setConnectingIds({
|
||||
...connectingIds,
|
||||
target: { ...connectingIds.target, stepId: undefined },
|
||||
})
|
||||
}
|
||||
|
||||
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 handleMouseUp = () => {
|
||||
if (mouseDownEvent) {
|
||||
setIsEditing(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!onMouseMoveBottomOfElement || !onMouseMoveTopOfElement) return
|
||||
const isMovingAndIsMouseDown =
|
||||
mouseDownEvent &&
|
||||
onMouseDown &&
|
||||
(event.movementX > 0 || event.movementY > 0)
|
||||
if (isMovingAndIsMouseDown && step.type !== 'start') {
|
||||
onMouseDown(mouseDownEvent, step)
|
||||
detachStepFromBlock(step.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 handleCloseEditor = () => {
|
||||
setIsEditing(false)
|
||||
}
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
setOpenedStepId(step.id)
|
||||
}
|
||||
|
||||
const handleExpandClick = () => {
|
||||
setOpenedStepId(undefined)
|
||||
onModalOpen()
|
||||
}
|
||||
|
||||
const updateOptions = () => {
|
||||
updateStep(localStep.id, { ...localStep })
|
||||
if (localWebhook) updateWebhook(localWebhook.id, { ...localWebhook })
|
||||
}
|
||||
|
||||
const handleOptionsChange = (options: StepOptions) => {
|
||||
setLocalStep({ ...localStep, options } as Step)
|
||||
}
|
||||
|
||||
const handleContentChange = (content: BubbleStepContent) =>
|
||||
setLocalStep({ ...localStep, content } as Step)
|
||||
|
||||
const handleWebhookChange = (updates: Partial<Webhook>) => {
|
||||
if (!localWebhook) return
|
||||
setLocalWebhook({ ...localWebhook, ...updates })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isPopoverOpened && openedStepId !== step.id) updateOptions()
|
||||
setIsPopoverOpened(openedStepId === step.id)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [openedStepId])
|
||||
|
||||
return isEditing && isTextBubbleStep(localStep) ? (
|
||||
<TextBubbleEditor
|
||||
stepId={localStep.id}
|
||||
initialValue={localStep.content.richText}
|
||||
onClose={handleCloseEditor}
|
||||
/>
|
||||
) : (
|
||||
<ContextMenu<HTMLDivElement>
|
||||
renderMenu={() => <StepNodeContextMenu stepId={step.id} />}
|
||||
>
|
||||
{(ref, isOpened) => (
|
||||
<Popover
|
||||
placement="left"
|
||||
isLazy
|
||||
isOpen={isPopoverOpened}
|
||||
closeOnBlur={false}
|
||||
>
|
||||
<PopoverTrigger>
|
||||
<Flex
|
||||
pos="relative"
|
||||
ref={ref}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onMouseUp={handleMouseUp}
|
||||
onClick={handleClick}
|
||||
data-testid={`step-${step.id}`}
|
||||
w="full"
|
||||
>
|
||||
<HStack
|
||||
flex="1"
|
||||
userSelect="none"
|
||||
p="3"
|
||||
borderWidth="1px"
|
||||
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.300'}
|
||||
rounded="lg"
|
||||
cursor={'pointer'}
|
||||
bgColor="white"
|
||||
align="flex-start"
|
||||
w="full"
|
||||
>
|
||||
<StepIcon
|
||||
type={localStep.type}
|
||||
mt="1"
|
||||
data-testid={`${localStep.id}-icon`}
|
||||
/>
|
||||
<StepNodeContent step={localStep} />
|
||||
<TargetEndpoint
|
||||
pos="absolute"
|
||||
left="-32px"
|
||||
top="19px"
|
||||
stepId={localStep.id}
|
||||
/>
|
||||
{blocksCoordinates &&
|
||||
isConnectable &&
|
||||
hasDefaultConnector(localStep) && (
|
||||
<SourceEndpoint
|
||||
source={{
|
||||
blockId: localStep.blockId,
|
||||
stepId: localStep.id,
|
||||
}}
|
||||
pos="absolute"
|
||||
right="15px"
|
||||
bottom="18px"
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</Flex>
|
||||
</PopoverTrigger>
|
||||
{hasSettingsPopover(localStep) && (
|
||||
<SettingsPopoverContent
|
||||
step={localStep}
|
||||
webhook={localWebhook}
|
||||
onExpandClick={handleExpandClick}
|
||||
onOptionsChange={handleOptionsChange}
|
||||
onWebhookChange={handleWebhookChange}
|
||||
onTestRequestClick={updateOptions}
|
||||
/>
|
||||
)}
|
||||
{isMediaBubbleStep(localStep) && (
|
||||
<MediaBubblePopoverContent
|
||||
step={localStep}
|
||||
onContentChange={handleContentChange}
|
||||
/>
|
||||
)}
|
||||
<SettingsModal isOpen={isModalOpen} onClose={handleModalClose}>
|
||||
<StepSettings
|
||||
step={localStep}
|
||||
webhook={localWebhook}
|
||||
onOptionsChange={handleOptionsChange}
|
||||
onWebhookChange={handleWebhookChange}
|
||||
onTestRequestClick={updateOptions}
|
||||
/>
|
||||
</SettingsModal>
|
||||
</Popover>
|
||||
)}
|
||||
</ContextMenu>
|
||||
)
|
||||
}
|
||||
|
||||
const hasSettingsPopover = (step: Step): step is Exclude<Step, BubbleStep> =>
|
||||
!isBubbleStep(step)
|
||||
|
||||
const isMediaBubbleStep = (
|
||||
step: Step
|
||||
): step is Exclude<BubbleStep, TextBubbleStep> =>
|
||||
isBubbleStep(step) && !isTextBubbleStep(step)
|
||||
Reference in New Issue
Block a user