Add the ability to focus on paste (#545)

* pasting should focus the message field

also refactored a small amount to use KeyEvent.code
instead of KeyEvent.keyCode, which is deprecated.

fixes ajbura/cinny#544

* fix lint

* comments

diff --git a/src/client/event/hotkeys.js b/src/client/event/hotkeys.js
index 11f72bea63886b2b5fbaa2350d2035210f562372..393dc871e527ba04e151bdf90d59487afe609fdd 100644 (file)
--- a/src/client/event/hotkeys.js
+++ b/src/client/event/hotkeys.js
@@ -2,25 +2,66 @@ import { openSearch, toggleRoomSettings } from '../action/navigation';
 import navigation from '../state/navigation';
 import { markAsRead } from '../action/notifications';
 
+// describes which keys should auto-focus the message field
+function shouldFocusMessageField(code) {
+  // should focus on alphanumeric values, and backspace
+  if (code.startsWith('Key')) {
+    return true;
+  }
+  if (code.startsWith('Digit')) {
+    return true;
+  }
+  if (code === 'Backspace') {
+    return true;
+  }
+
+  // do not focus if super key is pressed
+  if (code.startsWith('Meta')) { // chrome
+    return false;
+  }
+  if (code.startsWith('OS')) { // firefox
+    return false;
+  }
+
+  // do not focus on F keys
+  if (/^F\d+$/.test(code)) {
+    return false;
+  }
+
+  // do not focus on numlock/scroll lock
+  if (code === 'NumLock' || code === 'ScrollLock') {
+    return false;
+  }
+
+  return true;
+}
+
 function listenKeyboard(event) {
   // Ctrl/Cmd +
   if (event.ctrlKey || event.metaKey) {
-    // k - for search Modal
-    if (event.keyCode === 75) {
+    // open search modal
+    if (event.code === 'KeyK') {
       event.preventDefault();
-      if (navigation.isRawModalVisible) return;
+      if (navigation.isRawModalVisible) {
+        return;
+      }
       openSearch();
     }
+
+    // focus message field on paste
+    if (event.code === 'KeyV') {
+      const msgTextarea = document.getElementById('message-textarea');
+      msgTextarea?.focus();
+    }
   }
 
-  if (!event.ctrlKey && !event.altKey) {
+  if (!event.ctrlKey && !event.altKey && !event.metaKey) {
     if (navigation.isRawModalVisible) return;
     if (['text', 'textarea'].includes(document.activeElement.type)) {
       return;
     }
 
-    // esc
-    if (event.keyCode === 27) {
+    if (event.code === 'Escape') {
       if (navigation.isRoomSettings) {
         toggleRoomSettings();
         return;
@@ -31,16 +72,12 @@ function listenKeyboard(event) {
       }
     }
 
-    // Don't allow these keys to type/focus message field
-    if ((event.keyCode !== 8 && event.keyCode < 48)
-      || (event.keyCode >= 91 && event.keyCode <= 93)
-      || (event.keyCode >= 112 && event.keyCode <= 183)) {
-      return;
+    // focus the text field on most keypresses
+    if (shouldFocusMessageField(event.code)) {
+      // press any key to focus and type in message field
+      const msgTextarea = document.getElementById('message-textarea');
+      msgTextarea?.focus();
     }
-
-    // press any key to focus and type in message field
-    const msgTextarea = document.getElementById('message-textarea');
-    msgTextarea?.focus();
   }
 }