[WIP] Add initial keybindings

[stormpython]

This PR will add the initial keybindings to nteract.

My initial thoughts are to create a <Keybindings config={{ ... }} /> component that takes a configuration object that specifies which keybindings are associated with certain actions. These are then applied to the appropriate DOM elements.

I will use the blueprintjs Hotkeys component. For more, see here.

This PR should also address these issues or at least provide a framework for implementing the solutions.

[stormpython]

Running into issue with blueprintjs HotkeysTarget decorator component. The first error I was getting was around not being able to use the decorator because it was expecting to call the wrapped component with new.

Uncaught TypeError Class constructor App cannot be invoked without 'new'

This still seems to be an issue, but I've been looking at this issue to help solve it.

Now, I am having an issue getting the event listeners to fire for keydown events. Kyle removed hot module loading to see if it had anything to do with the build, but I am still experiencing issues with getting the event listeners to fire. I am now looking into the blueprintjs HotkeysTarget decorator function to understand how its attaching the event listeners.

[stormpython]

Ok. This is a bigger issue than I thought. The error I am getting when using the HotkeysTarget decorator is still an open issue. In addition, the blueprintjs HotkeysTarget decorator only works when the component returns a DOM element and not a React element, see this issue.

There may be a work around that allows us to get the Hotkeys component working. It involves wrapping the App in a stateless React.PureComponent. If this fails or is to inelegant, I will look into another way to achieve this.

[stormpython]

Btw, adding experimentalDecorators: true to the tsconfig.json doesn't do the trick either. And after giving the following approach a try (example implementation, not actual):

class StatelessApp extends React.PureComponent {
  // tslint:disable-line max-classes-per-file
  public render() {
    return <App {...{ ...context, settings, noteSettings, hotkeyCallbacks }} />;
  }
}

function AppWrapper() {} // tslint:disable-line no-empty
AppWrapper.prototype = Object.create(StatelessApp.prototype);
AppWrapper.prototype.renderHotkeys = App.hotkeyRenderer(hotkeyCallbacks);
export const AppContainer = HotkeysTarget(AppWrapper as any);

which is a work around for this issue also does not seem to work. I get the following error:

This occurs because the mapStateToProps doesn't seem to map the keybindings state to the props on initialization.

[rgbkrk]

Want to table this one for now and I'll take a look at it next week?

[stormpython]

Sure.

[stormpython]

Closing in favor of #4054.