feat(frontend): Add delete key bindings to ReactFlow editor

(#11693)

Issues fixed by this PR
- https://github.com/Significant-Gravitas/AutoGPT/issues/11688
- https://github.com/Significant-Gravitas/AutoGPT/issues/11687

### **Changes 🏗️**

Added keyboard delete functionality to the ReactFlow editor by enabling
the `deleteKeyCode` prop with both "Backspace" and "Delete" keys. This
allows users to delete selected nodes and edges using standard keyboard
shortcuts, improving the editing experience.

**Modified:**

- `Flow.tsx`: Added `deleteKeyCode={["Backspace", "Delete"]}` prop to
the ReactFlow component to enable deletion of selected elements via
keyboard

### **Checklist 📋**

#### **For code changes:**

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Select a node in the flow editor and press Delete key to confirm
it deletes
- [x] Select a node in the flow editor and press Backspace key to
confirm it deletes
    - [x] Verify deletion works for multiple selected elements
This commit is contained in:
Abhimanyu Yadav
2026-01-05 15:58:57 +05:30
committed by GitHub
parent 003affca43
commit b87c64ce38
2 changed files with 6 additions and 4 deletions

View File

@@ -99,6 +99,7 @@ export const Flow = () => {
nodesDraggable={!isLocked}
nodesConnectable={!isLocked}
elementsSelectable={!isLocked}
deleteKeyCode={["Backspace", "Delete"]}
>
<Background />
<CustomControls setIsLocked={setIsLocked} isLocked={isLocked} />

View File

@@ -115,10 +115,11 @@ export const useEdgeStore = create<EdgeStore>((set, get) => ({
edge.data?.beadData ??
new Map<string, NodeExecutionResult["status"]>();
if (
edge.targetHandle &&
edge.targetHandle in executionResult.input_data
) {
const inputValue = edge.targetHandle
? executionResult.input_data[edge.targetHandle]
: undefined;
if (inputValue !== undefined && inputValue !== null) {
beadData.set(executionResult.node_exec_id, executionResult.status);
}