hotkeys.ts

type Modifiers = {
  ctrl?: boolean;
  shift?: boolean;
};

type HotkeyDetails = { key: string } & Modifiers;

const hotkeyName = ({ key, ctrl, shift }: HotkeyDetails) =>
  `hotkey:${ctrl || ""}+${shift || ""}+${key}`;

function hotkeyPressed(detail: HotkeyDetails) {
  const hotkeyEvent = new CustomEvent(hotkeyName(detail), { detail });
  document.dispatchEvent(hotkeyEvent);
}

export type HotkeyEvent = CustomEvent<{ key: string; mod: Modifiers }>;

/** Dispatches hotkey events */
export function registerHotkeys(supportedHotkeys: HotkeyDetails[]) {
  const handler = (event: KeyboardEvent) => {
    if (
      supportedHotkeys.some((options) => {
        return (
          options.key === event.key &&
          (!!options.ctrl === event.ctrlKey || event.metaKey) &&
          !!options.shift === event.shiftKey
        );
      })
    ) {
      event.preventDefault();
      hotkeyPressed({
        key: event.key,
        ctrl: event.ctrlKey || event.metaKey,
        shift: event.shiftKey,
      });
    }
  };
  document.addEventListener("keydown", handler);
  return () => document.removeEventListener("keydown", handler);
}

/**
 * @returns unsubscribe callback
 */
export function onHotkey(
  options: { key: string; ctrl?: boolean; shift?: boolean },
  callback: (event: HotkeyEvent) => void
) {
  //@ts-ignore no clue how to register the hotkey name
  document.addEventListener(hotkeyName(options), callback);
  return () =>
    //@ts-ignore
    document.removeEventListener(hotkeyName(options), callback);
}