twenty/packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts

import { useHotkeys } from 'react-hotkeys-hook';
import {
  HotkeyCallback,
  Keys,
  Options,
  OptionsOrDependencyArray,
} from 'react-hotkeys-hook/dist/types';
import { useRecoilState } from 'recoil';

import { pendingHotkeyState } from '../states/internal/pendingHotkeysState';

import { useScopedHotkeyCallback } from './useScopedHotkeyCallback';

export const useScopedHotkeys = (
  keys: Keys,
  callback: HotkeyCallback,
  scope: string,
  dependencies?: OptionsOrDependencyArray,
  options: Options = {
    enableOnContentEditable: true,
    enableOnFormTags: true,
    preventDefault: true,
  },
) => {
  const [pendingHotkey, setPendingHotkey] =
    useRecoilState(pendingHotkeyState());

  const callScopedHotkeyCallback = useScopedHotkeyCallback();

  return useHotkeys(
    keys,
    (keyboardEvent, hotkeysEvent) => {
      callScopedHotkeyCallback({
        keyboardEvent,
        hotkeysEvent,
        callback: () => {
          if (!pendingHotkey) {
            callback(keyboardEvent, hotkeysEvent);
            return;
          }
          setPendingHotkey(null);
        },
        scope,
        preventDefault: !!options.preventDefault,
      });
    },
    {
      enableOnContentEditable: options.enableOnContentEditable,
      enableOnFormTags: options.enableOnFormTags,
    },
    dependencies,
  );
};