fix: Send message with "enter" also do new line (#5961)

* fix: Send message with "enter" also do new line

* chore: Review fixes

* chore: Naming fixes

* chore: Minor fixes

* chore: Fix line break issue when cmd plus enter enabled

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

@@ -39,10 +39,14 @@ const TYPING_INDICATOR_IDLE_TIME = 4000;
 
 import '@chatwoot/prosemirror-schema/src/woot-editor.css';
 import {
+  hasPressedEnterAndNotCmdOrShift,
+  hasPressedCommandAndEnter,
   hasPressedAltAndPKey,
   hasPressedAltAndLKey,
 } from 'shared/helpers/KeyboardHelpers';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 
 const createState = (content, placeholder, plugins = []) => {
   return EditorState.create({
@@ -58,13 +62,14 @@ const createState = (content, placeholder, plugins = []) => {
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse },
-  mixins: [eventListenerMixins],
+  mixins: [eventListenerMixins, uiSettingsMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     isPrivate: { type: Boolean, default: false },
     enableSuggestions: { type: Boolean, default: true },
+    overrideLineBreaks: { type: Boolean, default: false },
     updateSelectionWith: { type: String, default: '' },
   },
   data() {
@@ -208,6 +213,9 @@ export default {
           keyup: () => {
             this.onKeyup();
           },
+          keydown: (view, event) => {
+            this.onKeydown(event);
+          },
           focus: () => {
             this.onFocus();
           },
@@ -223,6 +231,12 @@ export default {
         },
       });
     },
+    isEnterToSendEnabled() {
+      return isEditorHotKeyEnabled(this.uiSettings, 'enter');
+    },
+    isCmdPlusEnterToSendEnabled() {
+      return isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter');
+    },
     handleKeyEvents(e) {
       if (hasPressedAltAndPKey(e)) {
         this.focusEditorInputField();
@@ -304,6 +318,24 @@ export default {
         clearTimeout(this.idleTimer);
       }
     },
+    handleLineBreakWhenEnterToSendEnabled(event) {
+      if (
+        hasPressedEnterAndNotCmdOrShift(event) &&
+        this.isEnterToSendEnabled() &&
+        !this.overrideLineBreaks
+      ) {
+        event.preventDefault();
+      }
+    },
+    handleLineBreakWhenCmdAndEnterToSendEnabled(event) {
+      if (
+        hasPressedCommandAndEnter(event) &&
+        this.isCmdPlusEnterToSendEnabled() &&
+        !this.overrideLineBreaks
+      ) {
+        event.preventDefault();
+      }
+    },
     onKeyup() {
       if (!this.idleTimer) {
         this.$emit('typing-on');
@@ -314,6 +346,14 @@ export default {
         TYPING_INDICATOR_IDLE_TIME
       );
     },
+    onKeydown(event) {
+      if (this.isEnterToSendEnabled()) {
+        this.handleLineBreakWhenEnterToSendEnabled(event);
+      }
+      if (this.isCmdPlusEnterToSendEnabled()) {
+        this.handleLineBreakWhenCmdAndEnterToSendEnabled(event);
+      }
+    },
     onBlur() {
       this.turnOffIdleTimer();
       this.resetTyping();

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

@@ -590,6 +590,7 @@ export default {
         e.preventDefault();
       } else if (keyCode === 'enter' && this.isAValidEvent('enter')) {
         this.onSendReply();
+        e.preventDefault();
       } else if (
         ['meta+enter', 'ctrl+enter'].includes(keyCode) &&
         this.isAValidEvent('cmd_enter')

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue

@@ -15,6 +15,7 @@
       class="article-content"
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
       :is-format-mode="true"
+      :override-line-breaks="true"
       @focus="onFocus"
       @blur="onBlur"
       @input="onContentInput"

app/javascript/shared/helpers/KeyboardHelpers.js

@@ -14,6 +14,10 @@ export const hasPressedCommand = e => {
   return e.metaKey;
 };
 
+export const hasPressedEnterAndNotCmdOrShift = e => {
+  return isEnter(e) && !hasPressedCommand(e) && !hasPressedShift(e);
+};
+
 export const hasPressedCommandAndEnter = e => {
   return e.metaKey && e.keyCode === 13;
 };