fix: v2 - proper undo for del action on canvas

[maxy-shpfy]

Description

Closes https://github.com/Shopify/oasis-frontend/issues/609

Delete and Backspace key handling for the canvas has been moved out of ReactFlow's built-in deleteKeyCode prop and into a dedicated useCanvasDeleteShortcuts hook. This gives full control over deletion logic, allowing mixed selections of nodes and edges to be deleted together in a single undo group.

The useNodeEdgeChanges hook no longer handles remove-type changes from ReactFlow — those change events are now filtered out entirely, preventing ReactFlow from triggering its own deletion path. Instead, useCanvasDeleteShortcuts drives all deletion through the editor's action layer, correctly handling conduit metadata cleanup (stripBindingIdsFromConduitMetadata) and undo grouping.

deleteSelectedNodesCore has been extracted from deleteSelectedNodes to allow node deletion to be composed with edge deletion inside a shared undo group. edgeIdToBindingId and removeBindingsAndStripConduits have been introduced to consolidate edge-to-binding resolution and conduit cleanup. DELETE and BACKSPACE key constants are now exported from keys.ts for use in the new hook.

Related Issue and Pull requests

Type of Change

• Bug fix
• Improvement
• Cleanup/Refactor

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Screen Recording 2026-05-03 at 4.35.52 PM.mov (uploaded via Graphite)

Test Instructions

1. Select one or more nodes on the canvas and press Delete or Backspace — nodes should be removed and the action should be undoable as a single step.
2. Select one or more edges and press Delete or Backspace — edges and their associated bindings should be removed, with conduit metadata cleaned up.
3. Select a mix of nodes and edges and delete — all should be removed in a single undo group.
4. Verify that undo correctly restores the deleted nodes and edges in all three cases.

Additional Comments

The actions.ts barrel file has been marked with a todo: remove this file comment and deleteEdge has been removed from its exports as part of the ongoing cleanup of the action layer.

[github-actions]

🎩 Preview

A preview build has been created at: 05-01-fix_v2_-_proper_undo_for_del_action_on_canvas/0b64883

[maxy-shpfy]

• fix: v2 - sync visual selected state of the node #2196
• fix: v2 - rectangle selection of one node #2195
• fix: v2 - proper undo for del action on canvas #2194 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[camielvs]

I'm curious the motivation to skip over ReactFlow's built-in deletion and make our own custom logic?
Can't we hook into the native delete flow using https://reactflow.dev/api-reference/types/on-delete?

[maxy-shpfy]

@camielvs fair question. I explored the option. it is doable via onBeforeDelete. I applied the change

[maxy-shpfy]

Merge activity

• May 7, 7:46 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 7, 7:46 PM UTC: Graphite rebased this pull request as part of a merge.
• May 7, 7:49 PM UTC: @maxy-shpfy merged this pull request with Graphite.