Configurable keyboard shortcuts

All the keyboard shortcuts are listed in the DefaultContainer component. I could see how people would want to use their own keybindings.

Something like:

{
  "a": "createLeaf",
  "shift+a": "createInternal"
  "space": "activate",
  "meta+DownArrow": "activate"
}

[jameskerr]

@holloway I want to break up that giant onKeyDown event listener found in DefaultContainer. Each of those cases should be a named function with the TreeApi as the only argument. All of those could go in their own file called commands.ts.

The commands should be put in an object; the key is the name, the value is function.

Another object will map a keybinding string to the string name of the command function. A user could then configure this by passing their own object.

Then in the DefaultContainer#onKeyDown handler, we have some logic that turns that event into a keybinding string. We could follow VSCode’s example for how to structure the string (Shift+ArrowDown) for example. Then we run whatever command is mapped to that keybinding string using the object above.

I’m wondering if we want to only make a few of the keybindings available for customization. For example, “ArrowDown” should probably not be configurable. But “Space” should be.

Something Like

<DefaultContainer
  onKeyDown={(e) => {
    const keybinding = toKeyBinding(e)
    tree.runCommandAt(keybinding)
  }}
/>

class TreeApi() {
  runCommandAt(key: string) {
    const commandName = this.keybindings[key]
    const command = this.commands[commandName]
    if (command) command(this)
  }
}

[hilmanauz]

it works for me @jameskerr, thanks for your advice. I forgot there’s an onKeyDown prop in every element.