🐛 (editor) Share groups clipboard state across tabs

apps/builder/package.json

@@ -84,6 +84,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^9.0.1",
+    "shared-zustand": "2.0.0",
     "sonner": "1.3.1",
     "stripe": "12.13.0",
     "svg-round-corners": "0.4.1",
@@ -97,12 +98,17 @@
   "devDependencies": {
     "@chakra-ui/styled-system": "2.9.1",
     "@playwright/test": "1.41.2",
+    "@typebot.io/billing": "workspace:*",
     "@typebot.io/forge": "workspace:*",
     "@typebot.io/forge-repository": "workspace:*",
     "@typebot.io/lib": "workspace:*",
+    "@typebot.io/migrations": "workspace:*",
+    "@typebot.io/playwright": "workspace:*",
     "@typebot.io/prisma": "workspace:*",
     "@typebot.io/radar": "workspace:*",
+    "@typebot.io/results": "workspace:*",
     "@typebot.io/schemas": "workspace:*",
+    "@typebot.io/telemetry": "workspace:*",
     "@typebot.io/tsconfig": "workspace:*",
     "@types/canvas-confetti": "1.6.0",
     "@types/jsonwebtoken": "9.0.2",
@@ -121,11 +127,6 @@
     "next-runtime-env": "1.6.2",
     "superjson": "1.12.4",
     "typescript": "5.3.2",
-    "zod": "3.22.4",
-    "@typebot.io/playwright": "workspace:*",
-    "@typebot.io/billing": "workspace:*",
-    "@typebot.io/results": "workspace:*",
-    "@typebot.io/migrations": "workspace:*",
-    "@typebot.io/telemetry": "workspace:*"
+    "zod": "3.22.4"
   }
 }

apps/builder/src/features/graph/hooks/useGroupsStore.ts

@@ -1,7 +1,8 @@
 import { createWithEqualityFn } from 'zustand/traditional'
 import { Coordinates, CoordinatesMap } from '../types'
 import { Edge, Group, GroupV6 } from '@typebot.io/schemas'
-import { persist } from 'zustand/middleware'
+import { subscribeWithSelector } from 'zustand/middleware'
+import { share } from 'shared-zustand'
 
 type Store = {
   focusedGroups: string[]
@@ -21,80 +22,78 @@ type Store = {
 }
 
 export const useGroupsStore = createWithEqualityFn<Store>()(
-  persist(
-    (set, get) => ({
-      focusedGroups: [],
-      groupsCoordinates: undefined,
-      groupsInClipboard: undefined,
-      isDraggingGraph: false,
-      getGroupsCoordinates: () => get().groupsCoordinates,
-      focusGroup: (groupId, isShiftKeyPressed) =>
-        set((state) => ({
-          focusedGroups: isShiftKeyPressed
-            ? state.focusedGroups.includes(groupId)
-              ? state.focusedGroups.filter((id) => id !== groupId)
-              : [...state.focusedGroups, groupId]
-            : [groupId],
-        })),
-      blurGroups: () => set({ focusedGroups: [] }),
-      moveFocusedGroups: (delta) =>
-        set(({ focusedGroups, groupsCoordinates }) => ({
-          groupsCoordinates: groupsCoordinates
-            ? {
-                ...groupsCoordinates,
-                ...focusedGroups.reduce(
-                  (coords, groupId) => ({
-                    ...coords,
-                    [groupId]: {
-                      x: Number(
-                        (groupsCoordinates[groupId].x + delta.x).toFixed(2)
-                      ),
-                      y: Number(
-                        (groupsCoordinates[groupId].y + delta.y).toFixed(2)
-                      ),
-                    },
-                  }),
-                  groupsCoordinates
-                ),
-              }
-            : undefined,
-        })),
-      setFocusedGroups: (groupIds) => set({ focusedGroups: groupIds }),
-      setGroupsCoordinates: (groups) =>
-        set({
-          groupsCoordinates: groups
-            ? groups.reduce(
-                (coords, group) => ({
+  subscribeWithSelector((set, get) => ({
+    focusedGroups: [],
+    groupsCoordinates: undefined,
+    groupsInClipboard: undefined,
+    isDraggingGraph: false,
+    getGroupsCoordinates: () => get().groupsCoordinates,
+    focusGroup: (groupId, isShiftKeyPressed) =>
+      set((state) => ({
+        focusedGroups: isShiftKeyPressed
+          ? state.focusedGroups.includes(groupId)
+            ? state.focusedGroups.filter((id) => id !== groupId)
+            : [...state.focusedGroups, groupId]
+          : [groupId],
+      })),
+    blurGroups: () => set({ focusedGroups: [] }),
+    moveFocusedGroups: (delta) =>
+      set(({ focusedGroups, groupsCoordinates }) => ({
+        groupsCoordinates: groupsCoordinates
+          ? {
+              ...groupsCoordinates,
+              ...focusedGroups.reduce(
+                (coords, groupId) => ({
                   ...coords,
-                  [group.id]: {
-                    x: group.graphCoordinates.x,
-                    y: group.graphCoordinates.y,
+                  [groupId]: {
+                    x: Number(
+                      (groupsCoordinates[groupId].x + delta.x).toFixed(2)
+                    ),
+                    y: Number(
+                      (groupsCoordinates[groupId].y + delta.y).toFixed(2)
+                    ),
                   },
                 }),
-                {}
-              )
-            : undefined,
-        }),
-      updateGroupCoordinates: (groupId, newCoord) => {
-        set((state) => ({
-          groupsCoordinates: {
-            ...state.groupsCoordinates,
-            [groupId]: newCoord,
-          },
-        }))
-      },
-      copyGroups: (groups, edges) =>
-        set({
-          groupsInClipboard: {
-            groups,
-            edges,
-          },
-        }),
-      setIsDraggingGraph: (isDragging) => set({ isDraggingGraph: isDragging }),
-    }),
-    {
-      name: 'store',
-      partialize: (state) => ({ groupsInClipboard: state.groupsInClipboard }),
-    }
-  )
+                groupsCoordinates
+              ),
+            }
+          : undefined,
+      })),
+    setFocusedGroups: (groupIds) => set({ focusedGroups: groupIds }),
+    setGroupsCoordinates: (groups) =>
+      set({
+        groupsCoordinates: groups
+          ? groups.reduce(
+              (coords, group) => ({
+                ...coords,
+                [group.id]: {
+                  x: group.graphCoordinates.x,
+                  y: group.graphCoordinates.y,
+                },
+              }),
+              {}
+            )
+          : undefined,
+      }),
+    updateGroupCoordinates: (groupId, newCoord) => {
+      set((state) => ({
+        groupsCoordinates: {
+          ...state.groupsCoordinates,
+          [groupId]: newCoord,
+        },
+      }))
+    },
+    copyGroups: (groups, edges) =>
+      set({
+        groupsInClipboard: {
+          groups,
+          edges,
+        },
+      }),
+    setIsDraggingGraph: (isDragging) => set({ isDraggingGraph: isDragging }),
+  }))
 )
+
+if ('BroadcastChannel' in globalThis) {
+  share('groupsInClipboard', useGroupsStore)
+}