Keyboard Shortcuts: Create shortcuts API for React components.

[seanparsons]

interface Shortcut {
  description: string
  defaultShortcut: { // Might be optional?
    modifiers: Modifiers
    key: Key
  }
}

const shortcuts: {[key: string]: Shortcut} = {...}

Start with no configurability with the goal of reproducing what we have currently and just for React onKeyDown/onKeyUp/onKeyPress.

onKeyDown={(event: React.KeyboardEvent<HTMLElement>) => {
  handleShortcuts(event, {
    [DELETE_ELEMENTS_SHORTCUT]: () => {
      this.editorDispatch(deleteElements(this.selectedViews))
    }
  })
}}

The handleShortcuts function here does most of the heavy lifting, marrying up the buttons and modifiers against the actions which are in the anonymous function. In this example it’s playing fast and loose with how this object is created, we’ll have to do a memoisation dance for functional components no doubt.

In the above example there’s a DELETE_ELEMENTS_SHORTCUT constant which would be used in the object containing all the shortcuts ever so that those match up.

This should be minimally intrusive and things like propagation can still be prevented with the standard APIs for that.

[maltenuhn]

@seanparsons I’m moving this to TODO on the assumption that until this is done we will have lost shortcuts to insert. But is that the case?