feat(workflow): added context menu for block, pane, and multi-block selection on canvas

[waleedlatif1]

Summary

• added context menu for block, pane, and multi-block selection on canvas
• enforced read/write/admin permissions, disable paste when there is an empty clipboard, etc
• fixed ghost background borders in globals.css due to overlayed, redundant backgrounds

Type of Change

• New feature

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 31, 2025 10:35pm

[greptile-apps]

Greptile Summary

Added comprehensive context menu support for the workflow canvas with right-click actions for blocks, panes, and multi-block selections. The implementation includes:

• Context Menu Components: Created BlockContextMenu and PaneContextMenu components with actions like copy, paste, duplicate, delete, toggle enabled/disabled, flip handles, rename, and more
• Permission Enforcement: Properly enforces read/write/admin permissions by passing disableEdit and disableAdmin props based on effectivePermissions
• Clipboard Detection: Disables paste action when clipboard is empty using hasClipboard() check
• Multi-Selection Support: Handles context menu for single blocks, multiple selected blocks, and empty canvas areas
• Rename Integration: Added shouldFocusRename flag to editor store to trigger rename mode from context menu
• Event-Based Communication: Uses existing remove-from-subflow and open-invite-modal custom events for cross-component actions
• Style Fixes: Removed redundant background colors that caused ghost borders in dark mode

The implementation follows established patterns for event handling, collaborative operations, and permissions checking.

Confidence Score: 5/5

• This PR is safe to merge with no critical issues
• The implementation is well-structured, follows established patterns, properly enforces permissions, and integrates cleanly with existing collaborative workflow operations. The code is thoroughly tested manually and addresses the ghost border styling issue as a bonus fix.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts	added custom hook for managing canvas context menu state and event handlers
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/block-context-menu.tsx	added block context menu component with copy, paste, duplicate, delete, and other block actions
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/pane-context-menu.tsx	added pane context menu component with canvas-level actions like undo, redo, paste, and add block
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	integrated context menu hook, added handlers for all context menu actions, removed redundant background styles, added user-select prevention during shift press
apps/sim/stores/panel/editor/store.ts	added shouldFocusRename flag to support triggering rename mode from context menu

Sequence Diagram

sequenceDiagram
participant User
participant Canvas as ReactFlow Canvas
participant Hook as useCanvasContextMenu
participant Menu as Context Menu
participant Workflow as workflow.tsx
participant Store as Zustand Stores
participant Collab as Collaborative System
alt Right-click on Block
User->>Canvas: Right-click block
Canvas->>Hook: handleNodeContextMenu(event, node)
Hook->>Hook: Get selected nodes
Hook->>Hook: Convert nodes to block info
Hook->>Menu: Open block menu with position & blocks
Menu->>User: Display block context menu
User->>Menu: Click action (e.g., Delete)
Menu->>Workflow: handleContextDelete()
Workflow->>Collab: collaborativeBatchRemoveBlocks(blockIds)
Collab->>Store: Update workflow state
Menu->>Hook: closeMenu()
end
alt Right-click on Pane
User->>Canvas: Right-click empty canvas
Canvas->>Hook: handlePaneContextMenu(event)
Hook->>Menu: Open pane menu with position
Menu->>User: Display pane context menu
User->>Menu: Click action (e.g., Add Block)
Menu->>Workflow: handleContextAddBlock()
Workflow->>Store: useSearchModalStore.open()
Menu->>Hook: closeMenu()
end
alt Right-click on Multi-Selection
User->>Canvas: Right-click selection box
Canvas->>Hook: handleSelectionContextMenu(event)
Hook->>Hook: Get all selected nodes
Hook->>Hook: Convert to block infos
Hook->>Menu: Open block menu with multiple blocks
Menu->>User: Display multi-block menu
User->>Menu: Click action (e.g., Toggle Enabled)
Menu->>Workflow: handleContextToggleEnabled()
loop For each block
Workflow->>Collab: collaborativeToggleBlockEnabled(blockId)
Collab->>Store: Update block state
end
Menu->>Hook: closeMenu()
end
alt Rename Action Flow
User->>Menu: Click Rename
Menu->>Workflow: handleContextRename()
Workflow->>Store: setPanelEditorStore.setCurrentBlockId(id)
Workflow->>Store: setShouldFocusRename(true)
Store->>Menu: closeMenu()
Note over Store: Editor component detects flag
Store->>User: Focus rename input
end
alt Close Menu (Click Outside)
User->>Canvas: Click outside menu
Hook->>Hook: Detect click outside via ref
Hook->>Menu: closeMenu()
Menu->>User: Menu closes
end

Loading

[greptile-apps]

_{11 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@greptile

[greptile-apps]

_{11 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[waleedlatif1]

@greptile