feat: Add plain-text editor for non-rich content channels (#13058)

# Pull Request Template ## Description This PR restores the plain text editor for all channels except Website, Email, and API. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
2025-12-12 10:14:22 +05:30
parent df4c8cf58b
commit 696564863c
4 changed files with 186 additions and 43 deletions
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -200,6 +200,7 @@ const setSelectedContact = async ({ value, action, ...rest }) => {

 const handleInboxAction = ({ value, action, ...rest }) => {
  v$.value.$reset();
+  state.message = '';
  emit('updateTargetInbox', { ...rest });
  showInboxesDropdown.value = false;
  state.attachedFiles = [];
@@ -220,6 +221,7 @@ const removeSignatureFromMessage = () => {
 const removeTargetInbox = value => {
  v$.value.$reset();
  removeSignatureFromMessage();
+  state.message = '';
  emit('updateTargetInbox', value);
  state.attachedFiles = [];
 };
@@ -227,6 +229,7 @@ const removeTargetInbox = value => {
 const clearSelectedContact = () => {
  removeSignatureFromMessage();
  emit('clearSelectedContact');
+  state.message = '';
  state.attachedFiles = [];
 };

--- a/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/MessageEditor.vue
@@ -1,9 +1,10 @@
 <script setup>
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';

 import Editor from 'dashboard/components-next/Editor/Editor.vue';

-defineProps({
+const props = defineProps({
  hasErrors: { type: Boolean, default: false },
  hasAttachments: { type: Boolean, default: false },
  sendWithSignature: { type: Boolean, default: false },
@@ -12,6 +13,8 @@ defineProps({
  medium: { type: String, default: '' },
 });

+const editorKey = computed(() => `editor-${props.channelType}-${props.medium}`);
+
 const { t } = useI18n();

 const modelValue = defineModel({
@@ -23,6 +26,7 @@ const modelValue = defineModel({
 <template>
  <div class="flex-1 h-full" :class="[!hasAttachments && 'min-h-[200px]']">
    <Editor
+      :key="editorKey"
      v-model="modelValue"
      :placeholder="
        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -7,7 +7,9 @@ import { useTrack } from 'dashboard/composables';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';

+import CannedResponse from './CannedResponse.vue';
 import ReplyToMessage from './ReplyToMessage.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
 import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel.vue';
 import ReplyEmailHead from './ReplyEmailHead.vue';
@@ -44,6 +46,7 @@ import {
  appendSignature,
  removeSignature,
  getEffectiveChannelType,
+  extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';

 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
@@ -69,6 +72,8 @@ export default {
    WhatsappTemplates,
    WootMessageEditor,
    QuotedEmailPreview,
+    ResizableTextArea,
+    CannedResponse,
  },
  mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
  props: {
@@ -109,6 +114,8 @@ export default {
      recordingAudioState: '',
      recordingAudioDurationText: '',
      replyType: REPLY_EDITOR_MODES.REPLY,
+      mentionSearchKey: '',
+      hasSlashCommand: false,
      bccEmails: '',
      ccEmails: '',
      toEmails: '',
@@ -137,9 +144,12 @@ export default {
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
    }),
    currentContact() {
-      return this.$store.getters['contacts/getContact'](
-        this.currentChat.meta.sender.id
-      );
+      const senderId = this.currentChat?.meta?.sender?.id;
+      if (!senderId) return {};
+      return this.$store.getters['contacts/getContact'](senderId);
+    },
+    isRichEditorEnabled() {
+      return this.isAWebWidgetInbox || this.isAnEmailChannel || this.isAPIInbox;
    },
    shouldShowReplyToMessage() {
      return (
@@ -396,6 +406,26 @@ export default {
        !!this.quotedEmailText
      );
    },
+    showRichContentEditor() {
+      if (this.isOnPrivateNote || this.isRichEditorEnabled) {
+        return true;
+      }
+
+      if (this.isAPIInbox) {
+        const {
+          display_rich_content_editor: displayRichContentEditor = false,
+        } = this.uiSettings;
+        return displayRichContentEditor;
+      }
+
+      return false;
+    },
+    // ensure that the signature is plain text depending on `showRichContentEditor`
+    signatureToApply() {
+      return this.showRichContentEditor
+        ? this.messageSignature
+        : extractTextFromMarkdown(this.messageSignature);
+    },
  },
  watch: {
    currentChat(conversation, oldConversation) {
@@ -438,7 +468,25 @@ export default {
        this.resetRecorderAndClearAttachments();
      }
    },
-    message() {
+    message(updatedMessage) {
+      // Check if the message starts with a slash.
+      const bodyWithoutSignature = removeSignature(
+        updatedMessage,
+        this.signatureToApply
+      );
+      const startsWithSlash = bodyWithoutSignature.startsWith('/');
+
+      // Determine if the user is potentially typing a slash command.
+      // This is true if the message starts with a slash and the rich content editor is not active.
+      this.hasSlashCommand = startsWithSlash && !this.showRichContentEditor;
+      this.showMentions = this.hasSlashCommand;
+
+      // If a slash command is active, extract the command text after the slash.
+      // If not, reset the mentionSearchKey.
+      this.mentionSearchKey = this.hasSlashCommand
+        ? bodyWithoutSignature.substring(1)
+        : '';
+
      // Autosave the current message draft.
      this.doAutoSaveDraft();
    },
@@ -488,14 +536,20 @@ export default {
  methods: {
    handleInsert(article) {
      const { url, title } = article;
-      // Removing empty lines from the title
-      const lines = title.split('\n');
-      const nonEmptyLines = lines.filter(line => line.trim() !== '');
-      const filteredMarkdown = nonEmptyLines.join(' ');
-      emitter.emit(
-        BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
-        `[${filteredMarkdown}](${url})`
-      );
+      if (this.isRichEditorEnabled) {
+        // Removing empty lines from the title
+        const lines = title.split('\n');
+        const nonEmptyLines = lines.filter(line => line.trim() !== '');
+        const filteredMarkdown = nonEmptyLines.join(' ');
+        emitter.emit(
+          BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
+          `[${filteredMarkdown}](${url})`
+        );
+      } else {
+        this.addIntoEditor(
+          `${this.$t('CONVERSATION.REPLYBOX.INSERT_READ_MORE')} ${url}`
+        );
+      }

      useTrack(CONVERSATION_EVENTS.INSERT_ARTICLE_LINK);
    },
@@ -564,14 +618,26 @@ export default {
      if (this.isPrivate) {
        return message;
      }
-
-      const effectiveChannelType = getEffectiveChannelType(
-        this.channelType,
-        this.inbox?.medium || ''
-      );
+      if (this.showRichContentEditor) {
+        const effectiveChannelType = getEffectiveChannelType(
+          this.channelType,
+          this.inbox?.medium || ''
+        );
+        return this.sendWithSignature
+          ? appendSignature(
+              message,
+              this.messageSignature,
+              effectiveChannelType
+            )
+          : removeSignature(
+              message,
+              this.messageSignature,
+              effectiveChannelType
+            );
+      }
      return this.sendWithSignature
-        ? appendSignature(message, this.messageSignature, effectiveChannelType)
-        : removeSignature(message, this.messageSignature, effectiveChannelType);
+        ? appendSignature(message, this.signatureToApply)
+        : removeSignature(message, this.signatureToApply);
    },
    removeFromDraft() {
      if (this.conversationIdByRoute) {
@@ -587,6 +653,7 @@ export default {
        Escape: {
          action: () => {
            this.hideEmojiPicker();
+            this.hideMentions();
          },
          allowOnFocusedInput: true,
        },
@@ -629,6 +696,9 @@ export default {
    },
    onPaste(e) {
      const data = e.clipboardData.files;
+      if (!this.showRichContentEditor && data.length !== 0) {
+        this.$refs.messageInput.$el.blur();
+      }
      if (!data.length || !data[0]) {
        return;
      }
@@ -762,15 +832,19 @@ export default {
        // if signature is enabled, append it to the message
        // appendSignature ensures that the signature is not duplicated
        // so we don't need to check if the signature is already present
-        const effectiveChannelType = getEffectiveChannelType(
-          this.channelType,
-          this.inbox?.medium || ''
-        );
-        message = appendSignature(
-          message,
-          this.messageSignature,
-          effectiveChannelType
-        );
+        if (this.showRichContentEditor) {
+          const effectiveChannelType = getEffectiveChannelType(
+            this.channelType,
+            this.inbox?.medium || ''
+          );
+          message = appendSignature(
+            message,
+            this.messageSignature,
+            effectiveChannelType
+          );
+        } else {
+          message = appendSignature(message, this.signatureToApply);
+        }
      }

      const updatedMessage = replaceVariablesInMessage({
@@ -794,30 +868,52 @@ export default {
      });
      if (canReply || this.isAWhatsAppChannel || this.isAPIInbox)
        this.replyType = mode;
-      if (this.isRecordingAudio) {
-        this.toggleAudioRecorder();
+      if (this.showRichContentEditor) {
+        if (this.isRecordingAudio) {
+          this.toggleAudioRecorder();
+        }
+        return;
      }
+      this.$nextTick(() => this.$refs.messageInput.focus());
    },
    clearEditorSelection() {
      this.updateEditorSelectionWith = '';
    },
+    insertIntoTextEditor(text, selectionStart, selectionEnd) {
+      const { message } = this;
+      const newMessage =
+        message.slice(0, selectionStart) +
+        text +
+        message.slice(selectionEnd, message.length);
+      this.message = newMessage;
+    },
    addIntoEditor(content) {
-      this.updateEditorSelectionWith = content;
-      this.onFocus();
+      if (this.showRichContentEditor) {
+        this.updateEditorSelectionWith = content;
+        this.onFocus();
+      }
+      if (!this.showRichContentEditor) {
+        const { selectionStart, selectionEnd } = this.$refs.messageInput.$el;
+        this.insertIntoTextEditor(content, selectionStart, selectionEnd);
+      }
    },
    clearMessage() {
      this.message = '';
      if (this.sendWithSignature && !this.isPrivate) {
        // if signature is enabled, append it to the message
-        const effectiveChannelType = getEffectiveChannelType(
-          this.channelType,
-          this.inbox?.medium || ''
-        );
-        this.message = appendSignature(
-          this.message,
-          this.messageSignature,
-          effectiveChannelType
-        );
+        if (this.showRichContentEditor) {
+          const effectiveChannelType = getEffectiveChannelType(
+            this.channelType,
+            this.inbox?.medium || ''
+          );
+          this.message = appendSignature(
+            this.message,
+            this.messageSignature,
+            effectiveChannelType
+          );
+        } else {
+          this.message = appendSignature(this.message, this.signatureToApply);
+        }
      }
      this.attachedFiles = [];
      this.isRecordingAudio = false;
@@ -852,6 +948,9 @@ export default {
        this.toggleEmojiPicker();
      }
    },
+    hideMentions() {
+      this.showMentions = false;
+    },
    onTypingOn() {
      this.toggleTyping('on');
    },
@@ -1098,6 +1197,13 @@ export default {
        :message="inReplyTo"
        @dismiss="resetReplyToMessage"
      />
+      <CannedResponse
+        v-if="showMentions && hasSlashCommand"
+        v-on-clickaway="hideMentions"
+        class="normal-editor__canned-box"
+        :search-key="mentionSearchKey"
+        @replace="replaceText"
+      />
      <EmojiInput
        v-if="showEmojiPicker"
        v-on-clickaway="hideEmojiPicker"
@@ -1121,7 +1227,23 @@ export default {
        @play="recordingAudioState = 'playing'"
        @pause="recordingAudioState = 'paused'"
      />
+      <ResizableTextArea
+        v-else-if="!showRichContentEditor"
+        ref="messageInput"
+        v-model="message"
+        class="rounded-none input"
+        :placeholder="messagePlaceHolder"
+        :min-height="4"
+        :signature="signatureToApply"
+        allow-signature
+        :send-with-signature="sendWithSignature"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
      <WootMessageEditor
+        v-else
        v-model="message"
        :editor-id="editorStateId"
        class="input popover-prosemirror-menu"
@@ -1247,6 +1369,10 @@ export default {

 .reply-box__top {
  @apply relative py-0 px-4 -mt-px;
+
+  textarea {
+    @apply shadow-none outline-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
+  }
 }

 .emoji-dialog {
@@ -1266,4 +1392,9 @@ export default {
    @apply ltr:left-1 rtl:right-1 -bottom-2;
  }
 }
+
+.normal-editor__canned-box {
+  width: calc(100% - 2 * 1rem);
+  left: 1rem;
+}
 </style>
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -111,10 +111,15 @@ export default {
    // watcher, this means that if the value is true, the signature
    // is supposed to be added, else we remove it.
    toggleSignatureInEditor(signatureEnabled) {
-      const valueWithSignature = signatureEnabled
+      let valueWithSignature = signatureEnabled
        ? appendSignature(this.modelValue, this.cleanedSignature)
        : removeSignature(this.modelValue, this.cleanedSignature);

+      // Clean up whitespace when removing signature from empty body
+      if (!signatureEnabled && !valueWithSignature.trim()) {
+        valueWithSignature = '';
+      }
+
      this.$emit('update:modelValue', valueWithSignature);
      this.$emit('input', valueWithSignature);