✨ (editor) Actions on multiple groups

You can now select groups, move, copy, delete them easily

Closes #830, closes #1092

apps/builder/package.json

@@ -88,12 +88,14 @@
     "slate": "0.94.1",
     "slate-history": "0.93.0",
     "slate-react": "0.94.2",
+    "sonner": "1.3.1",
     "stripe": "12.13.0",
     "svg-round-corners": "0.4.1",
     "swr": "2.2.0",
     "tinycolor2": "1.6.0",
     "unsplash-js": "7.0.18",
-    "use-debounce": "9.0.4"
+    "use-debounce": "9.0.4",
+    "zustand": "4.5.0"
   },
   "devDependencies": {
     "@chakra-ui/styled-system": "2.9.1",

apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx

@@ -11,7 +11,6 @@ import { StatsCards } from './StatsCards'
 import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
 import { Graph } from '@/features/graph/components/Graph'
 import { GraphProvider } from '@/features/graph/providers/GraphProvider'
-import { GroupsCoordinatesProvider } from '@/features/graph/providers/GroupsCoordinateProvider'
 import { useTranslate } from '@tolgee/react'
 import { trpc } from '@/lib/trpc'
 import { isDefined } from '@typebot.io/lib'
@@ -51,17 +50,15 @@ export const AnalyticsGraphContainer = ({ stats }: { stats?: Stats }) => {
     >
       {publishedTypebot && stats ? (
         <GraphProvider isReadOnly>
-          <GroupsCoordinatesProvider groups={publishedTypebot?.groups}>
-            <EventsCoordinatesProvider events={publishedTypebot?.events}>
-              <Graph
-                flex="1"
-                typebot={publishedTypebot}
-                onUnlockProPlanClick={onOpen}
-                totalAnswers={data?.totalAnswers}
-                totalVisitedEdges={edgesData?.totalVisitedEdges}
-              />
-            </EventsCoordinatesProvider>
-          </GroupsCoordinatesProvider>
+          <EventsCoordinatesProvider events={publishedTypebot?.events}>
+            <Graph
+              flex="1"
+              typebot={publishedTypebot}
+              onUnlockProPlanClick={onOpen}
+              totalAnswers={data?.totalAnswers}
+              totalVisitedEdges={edgesData?.totalVisitedEdges}
+            />
+          </EventsCoordinatesProvider>
         </GraphProvider>
       ) : (
         <Flex

apps/builder/src/features/editor/components/BlocksSideBar.tsx

@@ -24,6 +24,7 @@ import { IntegrationBlockType } from '@typebot.io/schemas/features/blocks/integr
 import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
 import { BlockV6 } from '@typebot.io/schemas'
 import { enabledBlocks } from '@typebot.io/forge-repository'
+import { useDebouncedCallback } from 'use-debounce'
 
 // Integration blocks migrated to forged blocks
 const legacyIntegrationBlocks = [
@@ -42,6 +43,8 @@ export const BlocksSideBar = () => {
   const [isLocked, setIsLocked] = useState(true)
   const [isExtended, setIsExtended] = useState(true)
 
+  const closeSideBar = useDebouncedCallback(() => setIsExtended(false), 200)
+
   const handleMouseMove = (event: MouseEvent) => {
     if (!draggedBlockType) return
     const { clientX, clientY } = event
@@ -75,11 +78,14 @@ export const BlocksSideBar = () => {
 
   const handleLockClick = () => setIsLocked(!isLocked)
 
-  const handleDockBarEnter = () => setIsExtended(true)
+  const handleDockBarEnter = () => {
+    closeSideBar.flush()
+    setIsExtended(true)
+  }
 
   const handleMouseLeave = () => {
     if (isLocked) return
-    setIsExtended(false)
+    closeSideBar()
   }
 
   return (
@@ -200,12 +206,14 @@ export const BlocksSideBar = () => {
         <Flex
           pos="absolute"
           h="100%"
-          right="-50px"
-          w="50px"
+          right="-70px"
+          w="450px"
           top="0"
-          justify="center"
+          justify="flex-end"
+          pr="10"
           align="center"
           onMouseEnter={handleDockBarEnter}
+          zIndex={-1}
         >
           <Flex w="5px" h="20px" bgColor="gray.400" rounded="md" />
         </Flex>

apps/builder/src/features/editor/components/EditorPage.tsx

@@ -14,7 +14,6 @@ import { TypebotHeader } from './TypebotHeader'
 import { Graph } from '@/features/graph/components/Graph'
 import { GraphDndProvider } from '@/features/graph/providers/GraphDndProvider'
 import { GraphProvider } from '@/features/graph/providers/GraphProvider'
-import { GroupsCoordinatesProvider } from '@/features/graph/providers/GroupsCoordinateProvider'
 import { EventsCoordinatesProvider } from '@/features/graph/providers/EventsCoordinateProvider'
 import { TypebotNotFoundPage } from './TypebotNotFoundPage'
 
@@ -50,13 +49,11 @@ export const EditorPage = () => {
                   currentUserMode === 'read' || currentUserMode === 'guest'
                 }
               >
-                <GroupsCoordinatesProvider groups={typebot.groups}>
-                  <EventsCoordinatesProvider events={typebot.events}>
-                    <Graph flex="1" typebot={typebot} key={typebot.id} />
-                    <BoardMenuButton pos="absolute" right="40px" top="20px" />
-                    <RightPanel />
-                  </EventsCoordinatesProvider>
-                </GroupsCoordinatesProvider>
+                <EventsCoordinatesProvider events={typebot.events}>
+                  <Graph flex="1" typebot={typebot} key={typebot.id} />
+                  <BoardMenuButton pos="absolute" right="40px" top="20px" />
+                  <RightPanel />
+                </EventsCoordinatesProvider>
               </GraphProvider>
             </GraphDndProvider>
           ) : (

apps/builder/src/features/editor/components/TypebotHeader.tsx

@@ -22,7 +22,6 @@ import { isDefined, isNotDefined } from '@typebot.io/lib'
 import { EditableTypebotName } from './EditableTypebotName'
 import Link from 'next/link'
 import { EditableEmojiOrImageIcon } from '@/components/EditableEmojiOrImageIcon'
-import { useUndoShortcut } from '@/hooks/useUndoShortcut'
 import { useDebouncedCallback } from 'use-debounce'
 import { ShareTypebotButton } from '@/features/share/components/ShareTypebotButton'
 import { PublishButton } from '@/features/publish/components/PublishButton'
@@ -33,6 +32,7 @@ import { SupportBubble } from '@/components/SupportBubble'
 import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 import { useTranslate } from '@tolgee/react'
 import { GuestTypebotHeader } from './UnauthenticatedTypebotHeader'
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
 
 export const TypebotHeader = () => {
   const { t } = useTranslate()
@@ -60,6 +60,11 @@ export const TypebotHeader = () => {
   const hideUndoShortcutTooltipLater = useDebouncedCallback(() => {
     setUndoShortcutTooltipOpen(false)
   }, 1000)
+  const [isRedoShortcutTooltipOpen, setRedoShortcutTooltipOpen] =
+    useState(false)
+  const hideRedoShortcutTooltipLater = useDebouncedCallback(() => {
+    setRedoShortcutTooltipOpen(false)
+  }, 1000)
   const { isOpen, onOpen } = useDisclosure()
   const headerBgColor = useColorModeValue('white', 'gray.900')
 
@@ -76,12 +81,21 @@ export const TypebotHeader = () => {
     setRightPanel(RightPanel.PREVIEW)
   }
 
-  useUndoShortcut(() => {
-    if (!canUndo) return
-    hideUndoShortcutTooltipLater.flush()
-    setUndoShortcutTooltipOpen(true)
-    hideUndoShortcutTooltipLater()
-    undo()
+  useKeyboardShortcuts({
+    undo: () => {
+      if (!canUndo) return
+      hideUndoShortcutTooltipLater.flush()
+      setUndoShortcutTooltipOpen(true)
+      hideUndoShortcutTooltipLater()
+      undo()
+    },
+    redo: () => {
+      if (!canRedo) return
+      hideUndoShortcutTooltipLater.flush()
+      setRedoShortcutTooltipOpen(true)
+      hideRedoShortcutTooltipLater()
+      redo()
+    },
   })
 
   const handleHelpClick = () => {
@@ -229,7 +243,15 @@ export const TypebotHeader = () => {
                 />
               </Tooltip>
 
-              <Tooltip label={t('editor.header.redoButton.label')}>
+              <Tooltip
+                label={
+                  isRedoShortcutTooltipOpen
+                    ? t('editor.header.undo.tooltip.label')
+                    : t('editor.header.redoButton.label')
+                }
+                isOpen={isRedoShortcutTooltipOpen ? true : undefined}
+                hasArrow={isRedoShortcutTooltipOpen}
+              >
                 <IconButton
                   display={['none', 'flex']}
                   icon={<RedoIcon />}

apps/builder/src/features/editor/hooks/useUndo.ts

@@ -23,11 +23,15 @@ const initialState = {
   future: [],
 }
 
-type Params = { isReadOnly?: boolean }
+type Params<T extends { updatedAt: Date }> = {
+  isReadOnly?: boolean
+  onUndo?: (state: T) => void
+  onRedo?: (state: T) => void
+}
 
 export const useUndo = <T extends { updatedAt: Date }>(
   initialPresent?: T,
-  params?: Params
+  params?: Params<T>
 ): [T | undefined, Actions<T>] => {
   const [history, setHistory] = useState<History<T>>(initialState)
   const presentRef = useRef<T | null>(initialPresent ?? null)
@@ -51,7 +55,8 @@ export const useUndo = <T extends { updatedAt: Date }>(
       future: [present, ...future],
     })
     presentRef.current = newPresent
-  }, [history, params?.isReadOnly])
+    if (params?.onUndo) params.onUndo(newPresent)
+  }, [history, params])
 
   const redo = useCallback(() => {
     if (params?.isReadOnly) return
@@ -66,7 +71,8 @@ export const useUndo = <T extends { updatedAt: Date }>(
       future: newFuture,
     })
     presentRef.current = next
-  }, [history, params?.isReadOnly])
+    if (params?.onRedo) params.onRedo(next)
+  }, [history, params])
 
   const set = useCallback(
     (newPresentArg: T | ((current: T) => T) | undefined) => {

apps/builder/src/features/editor/providers/TypebotProvider.tsx

@@ -25,6 +25,7 @@ import { isPublished as isPublishedHelper } from '@/features/publish/helpers/isP
 import { convertPublicTypebotToTypebot } from '@/features/publish/helpers/convertPublicTypebotToTypebot'
 import { trpc } from '@/lib/trpc'
 import { EventsActions, eventsActions } from './typebotActions/events'
+import { useGroupsStore } from '@/features/graph/hooks/useGroupsStore'
 
 const autoSaveTimeout = 10000
 
@@ -87,6 +88,9 @@ export const TypebotProvider = ({
 }) => {
   const { showToast } = useToast()
   const [is404, setIs404] = useState(false)
+  const setGroupsCoordinates = useGroupsStore(
+    (state) => state.setGroupsCoordinates
+  )
 
   const {
     data: typebotData,
@@ -168,23 +172,34 @@ export const TypebotProvider = ({
     { redo, undo, flush, canRedo, canUndo, set: setLocalTypebot },
   ] = useUndo<TypebotV6>(undefined, {
     isReadOnly,
+    onUndo: (t) => {
+      setGroupsCoordinates(t.groups)
+    },
+    onRedo: (t) => {
+      setGroupsCoordinates(t.groups)
+    },
   })
 
   useEffect(() => {
-    if (!typebot && isDefined(localTypebot)) setLocalTypebot(undefined)
+    if (!typebot && isDefined(localTypebot)) {
+      setLocalTypebot(undefined)
+      setGroupsCoordinates(undefined)
+    }
     if (isFetchingTypebot || !typebot) return
     if (
       typebot.id !== localTypebot?.id ||
       new Date(typebot.updatedAt).getTime() >
         new Date(localTypebot.updatedAt).getTime()
     ) {
       setLocalTypebot({ ...typebot })
+      setGroupsCoordinates(typebot.groups)
       flush()
     }
   }, [
     flush,
     isFetchingTypebot,
     localTypebot,
+    setGroupsCoordinates,
     setLocalTypebot,
     showToast,
     typebot,