RFC: Standardizing keyboard shortcut support across nteract apps

[captainsafia]

Context

Currently in nteract, we provide two main applications: an Electron-based desktop app and a Jupyter extension. Each application has a different setup for how it provides keyboard shortcuts. The desktop app uses the wiring that Electron provides for keyboard shortcuts. The Jupyter extension uses the react-hotkeys package to configure keyboard shortcuts.

Ideally, we should have a unified implementation for keyboard shortcuts on both the desktop app and the electron app.

Electron provides support for event-listener based keyboard shortcuts on the renderer process so we could potentially use react-hotekeys there, if need be.

Refs: #4101, #4102

Problem

Keyboard shortcuts should be implemented in a standardized fashion across nteract apps so we don't have to use different technologies to provide keyboard shortcuts in each one.

Proposed Solution

1. Create a new @nteract/keymap package that will export a JSON file that contains a standardized schema for cross-application keymaps in nteract. Based on my research, the keymap should look something like this to support use in both electron and react-hotkeys.

{
    // Should match the Redux action
    name: string;
    // Should match the format that is needed by Electron 
    accelerator: string;
    // A function that passes the hotkey string format as needed by react-hotkey
    hotkey: () => string;
    // A human-friendly description of the string 
    description: string; 
    // A human-friendly label for the keyboard shortcut
    label: string;
}

2. Update src/main/menu.ts to read from the keymap package for keyboard shortcuts for each action.

import keys from "@nteract/keymap";

const menu = {
    new: {
      label: keys[new].label,
      accelerator: keys[new].accelerator;
    },
    open: {
      label: keys[open].label,
      click: () => {
        ...
      },
      accelerator: keys[open].accelerator
    }
};

3. Update the implementation of react-hotkeys in the Jupyter extension to use the same keymap package.

import keys from "@nteract/keymap";
import { HotKeys, KeyMap } from "react-hotkeys";

const keyMap = keys.map(key => {
    return { key.name: key.hotkey() };
});

const handlers = keys.map(key => {
    return { key.name:  () => dispatch(actions.createAction<keyName>())
})

<HotKeys keyMap={keyMap} handlers={handlers}>
    <App/>
</Hotkeys>

Generating the keymaps should be fairly straightforward. However, hooking up the handlers to the Redux action dispatches will probably be interesting to abstract, although I think this can come later.

[stale[bot]]

This issue hasn't had any activity on it in the last 90 days. Unfortunately we don't get around to dealing with every issue that is opened. Instead of leaving issues open we're seeking to be transparent by closing issues that aren't being prioritized. If no other activity happens on this issue in one week, it will be closed. It's more than likely that just by me posting about this, the maintainers will take a closer look at these long forgotten issues to help evaluate what to do next. If you would like to see this issue get prioritized over others, there are multiple avenues 🗓:

• Ask how you can help with this issue 👩🏿‍💻👨🏻‍💻
• Help solve other issues the team is currently working on 👨🏾‍💻👩🏼‍💻
• Donate to nteract so we can support developers to work on these features and bugs more regularly 💰🕐

Thank you!

[stale[bot]]

This issue hasn't had any activity on it in the last 90 days. Unfortunately we don't get around to dealing with every issue that is opened. Instead of leaving issues open we're seeking to be transparent by closing issues that aren't being prioritized. If no other activity happens on this issue in one week, it will be closed. It's more than likely that just by me posting about this, the maintainers will take a closer look at these long forgotten issues to help evaluate what to do next. If you would like to see this issue get prioritized over others, there are multiple avenues 🗓:

• Ask how you can help with this issue 👩🏿‍💻👨🏻‍💻
• Help solve other issues the team is currently working on 👨🏾‍💻👩🏼‍💻
• Donate to nteract so we can support developers to work on these features and bugs more regularly 💰🕐

Thank you!