feat: Allow users to select Cmd+Enter as a hotkey (#4401)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/ui/PreviewCard.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="preview-card--wrap" :class="{ activecard: active }">
+    <div class="header--wrap" :class="{ active: active }">
+      <div class="heading-wrap text-block-title">{{ heading }}</div>
+      <fluent-icon
+        v-if="active"
+        icon="checkmark-circle"
+        type="solid"
+        size="24"
+        class="checkmark"
+      />
+    </div>
+    <div class="content-wrap">
+      {{ content }}
+    </div>
+    <div class="image-wrap">
+      <img :src="src" class="image" :class="{ activeimage: active }" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    heading: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    buttonText: {
+      type: String,
+      default: 'Active',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.preview-card--wrap {
+  border-radius: var(--border-radius-normal);
+  border: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  max-height: 34rem;
+  max-width: 38rem;
+  min-width: 24rem;
+
+  .header--wrap {
+    background: var(--s-50);
+    border-bottom: 1px solid var(--color-border);
+    border-top-left-radius: var(--border-radius-normal);
+    border-top-right-radius: var(--border-radius-normal);
+    display: flex;
+    height: 4rem;
+    justify-content: space-between;
+    padding: var(--space-small);
+    width: 100%;
+  }
+
+  .active {
+    background: var(--w-50);
+    border-bottom: 1px solid var(--w-75);
+  }
+
+  .heading-wrap {
+    align-items: center;
+    display: flex;
+    font-weight: var(--font-weight-medium);
+    padding: var(--space-smaller);
+  }
+
+  .checkmark {
+    color: var(--w-500);
+  }
+
+  .content-wrap {
+    color: var(--s-700);
+    font-size: var(--font-size-mini);
+    line-height: 1.4;
+    padding: var(--space-slab) var(--space-slab) 0 var(--space-slab);
+    text-align: start;
+  }
+
+  .image-wrap {
+    padding: var(--space-slab);
+  }
+
+  .image {
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-normal);
+  }
+
+  .activeimage {
+    border: 1px solid var(--w-75);
+  }
+}
+
+.activecard {
+  background: var(--w-25);
+  border: 1px solid var(--w-300);
+}
+</style>

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

@@ -91,17 +91,6 @@
       </transition>
     </div>
     <div class="right-wrap">
-      <div v-if="isFormatMode" class="enter-to-send--checkbox">
-        <input
-          :checked="enterToSendEnabled"
-          type="checkbox"
-          value="enterToSend"
-          @input="toggleEnterToSend"
-        />
-        <label for="enterToSend">
-          {{ $t('CONVERSATION.REPLYBOX.ENTER_TO_SEND') }}
-        </label>
-      </div>
       <woot-button
         size="small"
         :class-names="buttonClass"
@@ -201,10 +190,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    enterToSendEnabled: {
-      type: Boolean,
-      default: true,
-    },
     enableMultipleFileUpload: {
       type: Boolean,
       default: true,
@@ -278,9 +263,6 @@ export default {
         this.$refs.upload.$children[1].$el.click();
       }
     },
-    toggleEnterToSend() {
-      this.$emit('toggleEnterToSend', !this.enterToSendEnabled);
-    },
     toggleMessageSignature() {
       this.updateUISettings({
         send_with_signature: !this.sendWithSignature,
@@ -312,20 +294,6 @@ export default {
 
 .right-wrap {
   display: flex;
-
-  .enter-to-send--checkbox {
-    align-items: center;
-    display: flex;
-
-    input {
-      margin: 0;
-    }
-
-    label {
-      color: var(--s-500);
-      font-size: var(--font-size-mini);
-    }
-  }
 }
 
 ::v-deep .file-uploads {

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

@@ -110,10 +110,8 @@
       :is-recording-audio="isRecordingAudio"
       :is-on-private-note="isOnPrivateNote"
       :is-format-mode="showRichContentEditor"
-      :enter-to-send-enabled="enterToSendEnabled"
       :enable-multiple-file-upload="enableMultipleFileUpload"
       :has-whatsapp-templates="hasWhatsappTemplates"
-      @toggleEnterToSend="toggleEnterToSend"
       @selectWhatsappTemplate="openWhatsappTemplateModal"
     />
     <whatsapp-templates
@@ -150,18 +148,14 @@ import {
 } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
-import {
-  isEscape,
-  isEnter,
-  hasPressedShift,
-  hasPressedCommandPlusKKey,
-} from 'shared/helpers/KeyboardHelpers';
+import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { DirectUpload } from 'activestorage';
 import { frontendURL } from '../../../helper/URLHelper';
 import wootConstants from 'dashboard/constants';
+import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 
 export default {
   components: {
@@ -267,9 +261,6 @@ export default {
       return !!this.$store.getters['inboxes/getWhatsAppTemplates'](this.inboxId)
         .length;
     },
-    enterToSendEnabled() {
-      return !!this.uiSettings.enter_to_send_enabled;
-    },
     isPrivate() {
       if (this.currentChat.can_reply || this.isAWhatsAppChannel) {
         return this.isOnPrivateNote;
@@ -343,13 +334,16 @@ export default {
       );
     },
     replyButtonLabel() {
+      let sendMessageText = this.$t('CONVERSATION.REPLYBOX.SEND');
       if (this.isPrivate) {
-        return this.$t('CONVERSATION.REPLYBOX.CREATE');
+        sendMessageText = this.$t('CONVERSATION.REPLYBOX.CREATE');
+      } else if (this.conversationType === 'tweet') {
+        sendMessageText = this.$t('CONVERSATION.REPLYBOX.TWEET');
       }
-      if (this.conversationType === 'tweet') {
-        return this.$t('CONVERSATION.REPLYBOX.TWEET');
-      }
-      return this.$t('CONVERSATION.REPLYBOX.SEND');
+      const keyLabel = isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter')
+        ? '(⌘ + ↵)'
+        : '(↵)';
+      return `${sendMessageText} ${keyLabel}`;
     },
     replyBoxClass() {
       return {
@@ -430,12 +424,18 @@ export default {
     profilePath() {
       return frontendURL(`accounts/${this.accountId}/profile/settings`);
     },
-    conversationId() {
-      return this.currentChat.id;
+    editorMessageKey() {
+      const { editor_message_key: isEnabled } = this.uiSettings;
+      return isEnabled;
+    },
+    commandPlusEnterToSendEnabled() {
+      return this.editorMessageKey === 'cmd_enter';
+    },
+    enterToSendEnabled() {
+      return this.editorMessageKey === 'enter';
     },
     editorStateId() {
-      const key = `draft-${this.conversationIdByRoute}-${this.replyType}`;
-      return key;
+      return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
   },
   watch: {
@@ -471,16 +471,41 @@ export default {
   mounted() {
     // Donot use the keyboard listener mixin here as the events here are supposed to be
     // working even if input/textarea is focussed.
-    document.addEventListener('keydown', this.handleKeyEvents);
     document.addEventListener('paste', this.onPaste);
-
+    document.addEventListener('keydown', this.handleKeyEvents);
     this.setCCEmailFromLastChat();
   },
   destroyed() {
-    document.removeEventListener('keydown', this.handleKeyEvents);
     document.removeEventListener('paste', this.onPaste);
+    document.removeEventListener('keydown', this.handleKeyEvents);
   },
   methods: {
+    handleKeyEvents(e) {
+      const keyCode = buildHotKeys(e);
+      if (keyCode === 'escape') {
+        this.hideEmojiPicker();
+        this.hideMentions();
+      } else if (keyCode === 'meta+k') {
+        const ninja = document.querySelector('ninja-keys');
+        ninja.open();
+        e.preventDefault();
+      } else if (keyCode === 'enter' && this.isAValidEvent('enter')) {
+        this.onSendReply();
+      } else if (
+        ['meta+enter', 'ctrl+enter'].includes(keyCode) &&
+        this.isAValidEvent('cmd_enter')
+      ) {
+        this.onSendReply();
+      }
+    },
+    isAValidEvent(selectedKey) {
+      return (
+        !this.hasUserMention &&
+        !this.showCannedMenu &&
+        this.isFocused &&
+        isEditorHotKeyEnabled(this.uiSettings, selectedKey)
+      );
+    },
     onPaste(e) {
       const data = e.clipboardData.files;
       if (!this.showRichContentEditor && data.length !== 0) {
@@ -500,34 +525,6 @@ export default {
     toggleCannedMenu(value) {
       this.showCannedMenu = value;
     },
-    handleKeyEvents(e) {
-      if (isEscape(e)) {
-        this.hideEmojiPicker();
-        this.hideMentions();
-      } else if (isEnter(e)) {
-        const hasSendOnEnterEnabled =
-          (this.showRichContentEditor &&
-            this.enterToSendEnabled &&
-            !this.hasUserMention &&
-            !this.showCannedMenu) ||
-          !this.showRichContentEditor;
-        const shouldSendMessage =
-          hasSendOnEnterEnabled && !hasPressedShift(e) && this.isFocused;
-        if (shouldSendMessage) {
-          e.preventDefault();
-          this.onSendReply();
-        }
-      } else if (hasPressedCommandPlusKKey(e)) {
-        this.openCommandBar();
-      }
-    },
-    openCommandBar() {
-      const ninja = document.querySelector('ninja-keys');
-      ninja.open();
-    },
-    toggleEnterToSend(enterToSendEnabled) {
-      this.updateUISettings({ enter_to_send_enabled: enterToSendEnabled });
-    },
     openWhatsappTemplateModal() {
       this.showWhatsAppTemplatesModal = true;
     },
@@ -603,7 +600,6 @@ export default {
     },
     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
       const { can_reply: canReply } = this.currentChat;
-
       if (canReply || this.isAWhatsAppChannel) this.replyType = mode;
       if (this.showRichContentEditor) {
         if (this.isRecordingAudio) {