Introduce Feature for Keyboard Shortcuts

[jansav]

Motivation:

1. Make creation of keyboard shortcuts easy
2. Remove duplication from current keyboard shortcuts
3. Extract a responsibility to separate, highly extendable Feature
4. Allow future development e.g. for configurable shortcuts in the UI

New keyboard shortcuts can be introduced by any Feature simply by registering implementation for keyboardShortcutInjectionToken

Example:

import { getInjectable } from "@ogre-tools/injectable";
import { keyboardShortcutInjectionToken } from "./keyboard-shortcut-injection-token";

export const someKeyboardShortcutInjectable = getInjectable({
  id: "some-keyboard-shortcut",

  instantiate: () => ({
    binding: { ctrl: true, code: "KeyK" },

    invoke: () => {
      console.log("You pressed Ctrl + K");
    },
  }),

  injectionToken: keyboardShortcutInjectionToken,
});

Given injectable being registered, anywhere in the application where you press Ctrl + K, you will see the console.log.

The Feature also introduces something called KeyboardShortcutScope which is a React Component, which you can use to wrap your component to make keyboard shortcuts only work in that scope.

Example:

import { KeyboardShortcutScope } from "./keyboard-shortcut-injection-token";

const SomeComponent = () => (
  <KeyboardShortcutScope id="some-component">
    <div>Some stuff in the component</div>
  </KeyboardShortcutScope>
);

import { getInjectable } from "@ogre-tools/injectable";
import { keyboardShortcutInjectionToken } from "./keyboard-shortcut-injection-token";

export const someKeyboardShortcutInjectable = getInjectable({
  id: "some-keyboard-shortcut",

  instantiate: () => ({
    binding: { ctrl: true, code: "KeyK" },
    scope: "some-component"

    invoke: () => {
      console.log("You pressed Ctrl + K while focusing content inside SomeComponent");
    },
  }),

  injectionToken: keyboardShortcutInjectionToken,
});

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[Nokel81]

Why not just have the param be SetRequired<Partial<Binding>, "code">?

Furthermore, should do some checks here concerning trying to make sure someone doesn't do Ctrl+KeyK as the code field?

[jansav]

Furthermore, should do some checks here concerning trying to make sure someone doesn't do Ctrl+KeyK as the code field?

We don't have to worry about it. Modifiers trigger their own event in the listener, which means that technically you can't say that the code is Ctrl+KeyK because that doesn't exist. However, if you wish, you are able to add keybinding to e.g. ControlLeft. But, I don't see that as a big deal, because that would be just developer doing weird stuff.

[jansav]

Why not just have the param be SetRequired<Partial, "code">?

I don't understand the question here.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.