refactor: handling keyboard shortcuts (#9242)

* fix: Resolve and go next keyboard shortcuts doesn't work

* refactor: use buildHotKeys instead of  hasPressedCommandPlusAltAndEKey

* feat: install tinykeys

* refactor: use tinykeys

* test: update buildKeyEvents

* fix: remove stray import

* feat: handle action list globally

* feat: allow configuring `allowOnFocusedInput`

* chore: Navigate chat list item

* chore: Navigate dashboard

* feat: Navigate editor top panel

* feat: Toggle file upload

* chore: More keyboard shortcuts

* chore: Update mention selection mixin

* chore: Phone input

* chore: Clean up

* chore: Clean up

* chore: Dropdown and editor

* chore: Enter key to send and clean up

* chore: Rename mixin

* chore: Review fixes

* chore: Removed unused shortcut from modal

* fix: Specs

---------

Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/shared/helpers/KeyboardHelpers.js

@@ -1,9 +1,9 @@
 export const isEnter = e => {
-  return e.keyCode === 13;
+  return e.key === 'Enter';
 };
 
 export const isEscape = e => {
-  return e.keyCode === 27;
+  return e.key === 'Escape';
 };
 
 export const hasPressedShift = e => {
@@ -19,118 +19,7 @@ export const hasPressedEnterAndNotCmdOrShift = e => {
 };
 
 export const hasPressedCommandAndEnter = e => {
-  return e.metaKey && e.keyCode === 13;
-};
-
-export const hasPressedCommandAndForwardSlash = e => {
-  return e.metaKey && e.keyCode === 191;
-};
-
-export const hasPressedAltAndCKey = e => {
-  return e.altKey && e.keyCode === 67;
-};
-
-export const hasPressedAltAndVKey = e => {
-  return e.altKey && e.keyCode === 86;
-};
-
-export const hasPressedAltAndRKey = e => {
-  return e.altKey && e.keyCode === 82;
-};
-
-export const hasPressedAltAndSKey = e => {
-  return e.altKey && e.keyCode === 83;
-};
-
-export const hasPressedAltAndBKey = e => {
-  return e.altKey && e.keyCode === 66;
-};
-
-export const hasPressedAltAndNKey = e => {
-  return e.altKey && e.keyCode === 78;
-};
-
-export const hasPressedAltAndAKey = e => {
-  return e.altKey && e.keyCode === 65;
-};
-
-export const hasPressedAltAndPKey = e => {
-  return e.altKey && e.keyCode === 80;
-};
-
-export const hasPressedAltAndLKey = e => {
-  return e.altKey && e.keyCode === 76;
-};
-
-export const hasPressedAltAndEKey = e => {
-  return e.altKey && e.keyCode === 69;
-};
-
-export const hasPressedCommandPlusAltAndEKey = e => {
-  return e.metaKey && e.altKey && e.keyCode === 69;
-};
-
-export const hasPressedAltAndOKey = e => {
-  return e.altKey && e.keyCode === 79;
-};
-
-export const hasPressedAltAndJKey = e => {
-  return e.altKey && e.keyCode === 74;
-};
-
-export const hasPressedAltAndKKey = e => {
-  return e.altKey && e.keyCode === 75;
-};
-
-export const hasPressedAltAndMKey = e => {
-  return e.altKey && e.keyCode === 77;
-};
-
-export const hasPressedArrowUpKey = e => {
-  return e.keyCode === 38;
-};
-
-export const hasPressedArrowDownKey = e => {
-  return e.keyCode === 40;
-};
-
-export const hasPressedArrowLeftKey = e => {
-  return e.keyCode === 37;
-};
-
-export const hasPressedArrowRightKey = e => {
-  return e.keyCode === 39;
-};
-
-export const hasPressedCommandPlusKKey = e => {
-  return e.metaKey && e.keyCode === 75;
-};
-
-/**
- * Returns a string representation of the hotkey pattern based on the provided event object.
- * @param {KeyboardEvent} e - The keyboard event object.
- * @returns {string} - The hotkey pattern string.
- */
-export const buildHotKeys = e => {
-  const key = e.key.toLowerCase();
-  if (['shift', 'meta', 'alt', 'control'].includes(key)) {
-    return key;
-  }
-  let hotKeyPattern = '';
-  if (e.altKey) {
-    hotKeyPattern += 'alt+';
-  }
-  if (e.ctrlKey) {
-    hotKeyPattern += 'ctrl+';
-  }
-  if (e.metaKey && !e.ctrlKey) {
-    hotKeyPattern += 'meta+';
-  }
-  if (e.shiftKey) {
-    hotKeyPattern += 'shift+';
-  }
-  hotKeyPattern += key;
-  return hotKeyPattern;
+  return hasPressedCommand(e) && isEnter(e);
 };
 
 /**

app/javascript/shared/helpers/specs/KeyboardHelpers.spec.js

@@ -3,20 +3,19 @@ import {
   isEscape,
   hasPressedShift,
   hasPressedCommand,
-  buildHotKeys,
   isActiveElementTypeable,
 } from '../KeyboardHelpers';
 
 describe('#KeyboardHelpers', () => {
   describe('#isEnter', () => {
     it('return correct values', () => {
-      expect(isEnter({ keyCode: 13 })).toEqual(true);
+      expect(isEnter({ key: 'Enter' })).toEqual(true);
     });
   });
 
   describe('#isEscape', () => {
     it('return correct values', () => {
-      expect(isEscape({ keyCode: 27 })).toEqual(true);
+      expect(isEscape({ key: 'Escape' })).toEqual(true);
     });
   });
 
@@ -31,14 +30,6 @@ describe('#KeyboardHelpers', () => {
       expect(hasPressedCommand({ metaKey: true })).toEqual(true);
     });
   });
-
-  describe('#buildHotKeys', () => {
-    it('returns hot keys', () => {
-      expect(buildHotKeys({ altKey: true, key: 'alt' })).toEqual('alt');
-      expect(buildHotKeys({ ctrlKey: true, key: 'a' })).toEqual('ctrl+a');
-      expect(buildHotKeys({ metaKey: true, key: 'b' })).toEqual('meta+b');
-    });
-  });
 });
 
 describe('isActiveElementTypeable', () => {