feat: Keyboard shortcuts improvements (#2790)

app/javascript/dashboard/components/Modal.vue

@@ -54,7 +54,7 @@ export default {
   },
   mounted() {
     document.addEventListener('keydown', e => {
-      if (this.show && e.keyCode === 27) {
+      if (this.show && e.code === 'Escape') {
         this.onClose();
       }
     });

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -198,6 +198,7 @@ export default {
             allConversations[0].click();
             document.querySelector('.conversations-list').scrollTop = 0;
           }
+          e.preventDefault();
         }
       }
     },

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -94,7 +94,10 @@ import AccountSelector from './sidebarComponents/AccountSelector.vue';
 import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
 import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
 import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
-import { hasPressedCommandAndForwardSlash } from 'shared/helpers/KeyboardHelpers';
+import {
+  hasPressedCommandAndForwardSlash,
+  isEscape,
+} from 'shared/helpers/KeyboardHelpers';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 
 export default {
@@ -278,6 +281,9 @@ export default {
       if (hasPressedCommandAndForwardSlash(e)) {
         this.toggleKeyShortcutModal();
       }
+      if (isEscape(e)) {
+        this.closeKeyShortcutModal();
+      }
     },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -38,6 +38,11 @@ import CannedResponse from '../conversation/CannedResponse';
 const TYPING_INDICATOR_IDLE_TIME = 4000;
 
 import '@chatwoot/prosemirror-schema/src/woot-editor.css';
+import {
+  hasPressedAltAndPKey,
+  hasPressedAltAndLKey,
+} from 'shared/helpers/KeyboardHelpers';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 
 const createState = (content, placeholder, plugins = []) => {
   return EditorState.create({
@@ -53,6 +58,7 @@ const createState = (content, placeholder, plugins = []) => {
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse },
+  mixins: [eventListenerMixins],
   props: {
     value: { type: String, default: '' },
     placeholder: { type: String, default: '' },
@@ -177,8 +183,20 @@ export default {
         },
       },
     });
+    this.focusEditorInputField();
   },
   methods: {
+    handleKeyEvents(e) {
+      if (hasPressedAltAndPKey(e)) {
+        this.focusEditorInputField();
+      }
+      if (hasPressedAltAndLKey(e)) {
+        this.focusEditorInputField();
+      }
+    },
+    focusEditorInputField() {
+      this.$refs.editor.querySelector('div.ProseMirror-woot-style').focus();
+    },
     insertMentionNode(mentionItem) {
       if (!this.view) {
         return null;

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -354,9 +354,6 @@ export default {
       if (this.showRichContentEditor) {
         return;
       }
-      if (this.$refs.messageInput === undefined) {
-        return;
-      }
       this.$nextTick(() => this.$refs.messageInput.focus());
     },
     emojiOnClick(emoji) {

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -9,7 +9,7 @@
             </h2>
             <div class="shortcut-key__wrap">
               <p class="shortcut-key">
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.COMMAND_KEY') }}
+                {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
               </p>
               <p class="shortcut-key key">
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
@@ -51,7 +51,7 @@
             </span>
             <div class="shortcut-key__wrap">
               <span class="shortcut-key">
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.COMMAND_KEY') }}
+                {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
               </span>
               <span class="shortcut-key">
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -178,14 +178,14 @@
       "GO_TO_REPORTS_SIDEBAR": "Go to Reports sidebar",
       "MOVE_TO_NEXT_TAB": "Move to next tab in conversation list",
       "GO_TO_SETTINGS": "Go to Settings",
-      "SWITCH_CONVERSATION_STATUS": "Switch Conversation status",
+      "SWITCH_CONVERSATION_STATUS": "Switch to the next conversation status",
       "SWITCH_TO_PRIVATE_NOTE": "Switch to Private Note",
       "TOGGLE_RICH_CONTENT_EDITOR": "Toggle Rich Content editor",
       "SWITCH_TO_REPLY": "Switch to Reply",
       "TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"
     },
     "KEYS": {
-      "COMMAND_KEY": "⌘",
+      "WINDOWS_KEY_AND_COMMAND_KEY": "Win / ⌘",
       "ALT_OR_OPTION_KEY": "Alt / ⌥",
       "FORWARD_SLASH_KEY": "/"
     }