feat(copy-paste): allow cross workflow selection, paste, move for blocks (#2649)

* feat(copy-paste): allow cross workflow selection, paste, move for blocks

* fix drag options

* add keyboard and mouse controls into docs

* refactor sockets and undo/redo for batch additions and removals

* fix tests

* cleanup more code

* fix perms issue

* fix subflow copy/paste

* remove log file

* fit paste in viewport bounds

* fix deselection

Author: icecrasher321

apps/docs/content/docs/en/keyboard-shortcuts/index.mdx

@@ -0,0 +1,64 @@
+---
+title: Keyboard Shortcuts
+description: Master the workflow canvas with keyboard shortcuts and mouse controls
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+
+Speed up your workflow building with these keyboard shortcuts and mouse controls. All shortcuts work when the canvas is focused (not when typing in an input field).
+
+<Callout type="info">
+  **Mod** refers to `Cmd` on macOS and `Ctrl` on Windows/Linux.
+</Callout>
+
+## Canvas Controls
+
+### Mouse Controls
+
+| Action | Control |
+|--------|---------|
+| Pan/move canvas | Left-drag on empty space |
+| Pan/move canvas | Scroll or trackpad |
+| Select multiple blocks | Right-drag to draw selection box |
+| Drag block | Left-drag on block header |
+| Add to selection | `Mod` + click on blocks |
+
+### Workflow Actions
+
+| Shortcut | Action |
+|----------|--------|
+| `Mod` + `Enter` | Run workflow (or cancel if running) |
+| `Mod` + `Z` | Undo |
+| `Mod` + `Shift` + `Z` | Redo |
+| `Mod` + `C` | Copy selected blocks |
+| `Mod` + `V` | Paste blocks |
+| `Delete` or `Backspace` | Delete selected blocks or edges |
+| `Shift` + `L` | Auto-layout canvas |
+
+## Panel Navigation
+
+These shortcuts switch between panel tabs on the right side of the canvas.
+
+| Shortcut | Action |
+|----------|--------|
+| `C` | Focus Copilot tab |
+| `T` | Focus Toolbar tab |
+| `E` | Focus Editor tab |
+| `Mod` + `F` | Focus Toolbar search |
+
+## Global Navigation
+
+| Shortcut | Action |
+|----------|--------|
+| `Mod` + `K` | Open search |
+| `Mod` + `Shift` + `A` | Add new agent workflow |
+| `Mod` + `Y` | Go to templates |
+| `Mod` + `L` | Go to logs |
+
+## Utility
+
+| Shortcut | Action |
+|----------|--------|
+| `Mod` + `D` | Clear terminal console |
+| `Mod` + `E` | Clear notifications |
+

apps/docs/content/docs/en/meta.json

@@ -14,7 +14,8 @@
     "execution",
     "permissions",
     "sdks",
-    "self-hosting"
+    "self-hosting",
+    "./keyboard-shortcuts/index"
   ],
   "defaultOpen": false
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx

@@ -61,7 +61,7 @@ export interface SubflowNodeData {
  */
 export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeData>) => {
   const { getNodes } = useReactFlow()
-  const { collaborativeRemoveBlock } = useCollaborativeWorkflow()
+  const { collaborativeBatchRemoveBlocks } = useCollaborativeWorkflow()
   const blockRef = useRef<HTMLDivElement>(null)
 
   const currentWorkflow = useCurrentWorkflow()
@@ -184,7 +184,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
                 variant='ghost'
                 onClick={(e) => {
                   e.stopPropagation()
-                  collaborativeRemoveBlock(id)
+                  collaborativeBatchRemoveBlocks([id])
                 }}
                 className='h-[14px] w-[14px] p-0 opacity-0 transition-opacity duration-100 group-hover:opacity-100'
               >

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx

@@ -4,8 +4,13 @@ import { Button, Copy, Tooltip, Trash2 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useSubBlockStore } from '@/stores/workflows/subblock/store'
+import { getUniqueBlockName, prepareDuplicateBlockState } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
+const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
+
 /**
  * Props for the ActionBar component
  */
@@ -27,11 +32,39 @@ interface ActionBarProps {
 export const ActionBar = memo(
   function ActionBar({ blockId, blockType, disabled = false }: ActionBarProps) {
     const {
-      collaborativeRemoveBlock,
+      collaborativeBatchAddBlocks,
+      collaborativeBatchRemoveBlocks,
       collaborativeToggleBlockEnabled,
-      collaborativeDuplicateBlock,
       collaborativeToggleBlockHandles,
     } = useCollaborativeWorkflow()
+    const { activeWorkflowId } = useWorkflowRegistry()
+    const blocks = useWorkflowStore((state) => state.blocks)
+    const subBlockStore = useSubBlockStore()
+
+    const handleDuplicateBlock = useCallback(() => {
+      const sourceBlock = blocks[blockId]
+      if (!sourceBlock) return
+
+      const newId = crypto.randomUUID()
+      const newName = getUniqueBlockName(sourceBlock.name, blocks)
+      const subBlockValues = subBlockStore.workflowValues[activeWorkflowId || '']?.[blockId] || {}
+
+      const { block, subBlockValues: filteredValues } = prepareDuplicateBlockState({
+        sourceBlock,
+        newId,
+        newName,
+        positionOffset: DEFAULT_DUPLICATE_OFFSET,
+        subBlockValues,
+      })
+
+      collaborativeBatchAddBlocks([block], [], {}, {}, { [newId]: filteredValues })
+    }, [
+      blockId,
+      blocks,
+      activeWorkflowId,
+      subBlockStore.workflowValues,
+      collaborativeBatchAddBlocks,
+    ])
 
     /**
      * Optimized single store subscription for all block data
@@ -115,7 +148,7 @@ export const ActionBar = memo(
                 onClick={(e) => {
                   e.stopPropagation()
                   if (!disabled) {
-                    collaborativeDuplicateBlock(blockId)
+                    handleDuplicateBlock()
                   }
                 }}
                 className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
@@ -185,7 +218,7 @@ export const ActionBar = memo(
               onClick={(e) => {
                 e.stopPropagation()
                 if (!disabled) {
-                  collaborativeRemoveBlock(blockId)
+                  collaborativeBatchRemoveBlocks([blockId])
                 }
               }}
               className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-7)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'