Configure keys with config object

[peterkogo]

It wildly differs how people embed React/Svelte Flow into web apps, which inevitably leads to keys either not working or working even though the flow is blurred.
The solution for this is to make keys actually configurable to use a specific DOM node, so people are able to decide for themselves.

[peterkogo]

Hm, maybe we are really overcomplicating things here... the available key options are deleteKeyCode, selectionKeyCode, multiSelectionKeyCode, zoomActivationKeyCode and panActivationKeyCode.

deleteKeyCode is the only one which fires an action right away. All other keys are just modifiers which do nothing if you don't interact with the flow directly. In a case of a collision, I think it's effortless to prevent key events from React Flow by setting the key code temporarily to null.

So I believe this issue is just about the deleteKeyCode and all other key handlers should be applied to the document or maybe even the window to observe modifier keys before the flow was in focus.

In the case of deleteKeyCode I am also questioning what the choice of a target really does here.
In the case of a modal inside an RF Panel: setting the target to the React Flow root would not prevent accidentally deleting something, and targeting something deeper down the flow would tank usability. Imagine clicking a button and delete does not work until you click on the viewport again.
If the modal is outside React Flow, deletion would not be triggered if the flow is out of focus. Thus, you'd need to either set the focus programmatically or interact with the flow to allow deletions again, which both sound like viable options.

What do you think @moklick