Revert chore: Adds a bus event to insert text at cursor in editor #7968

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

@@ -58,7 +58,6 @@ import {
   suggestionsPlugin,
   triggerCharacters,
 } from '@chatwoot/prosemirror-schema/src/mentions/plugin';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 import TagAgents from '../conversation/TagAgents.vue';
 import CannedResponse from '../conversation/CannedResponse.vue';
@@ -66,10 +65,6 @@ import VariableList from '../conversation/VariableList.vue';
 import {
   appendSignature,
   removeSignature,
-  insertAtCursor,
-  scrollCursorIntoView,
-  findNodeToInsertImage,
-  setURLWithQueryAndSize,
 } from 'dashboard/helper/editorHelper';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
@@ -305,7 +300,6 @@ export default {
           const tr = this.editorView.state.tr.replaceSelectionWith(node);
           this.editorView.focus();
           this.state = this.editorView.state.apply(tr);
-          this.editorView.updateState(this.state);
           this.emitOnChange();
           this.$emit('clear-selection');
         }
@@ -331,17 +325,7 @@ export default {
   mounted() {
     this.createEditorView();
     this.editorView.updateState(this.state);
-    this.focusEditorInputField();
-
-    // BUS Event to insert text or markdown into the editor at the
-    // current cursor position.
-    // Components using this
-    // 1. SearchPopover.vue
-
-    bus.$on(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
-  },
-  beforeDestroy() {
-    bus.$off(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
+    this.focusEditor(this.value);
   },
   methods: {
     reloadState(content = this.value) {
@@ -428,7 +412,6 @@ export default {
         state: this.state,
         dispatchTransaction: tx => {
           this.state = this.state.apply(tx);
-          this.editorView.updateState(this.state);
           this.emitOnChange();
         },
         handleDOMEvents: {
@@ -532,7 +515,11 @@ export default {
         userFullName: mentionItem.name,
       });
 
-      this.insertNodeIntoEditor(node, this.range.from, this.range.to);
+      const tr = this.editorView.state.tr
+        .replaceWith(this.range.from, this.range.to, node)
+        .insertText(` `);
+      this.state = this.editorView.state.apply(tr);
+      this.emitOnChange();
       this.$track(CONVERSATION_EVENTS.USED_MENTIONS);
 
       return false;
@@ -546,12 +533,26 @@ export default {
         return null;
       }
 
+      let from = this.range.from - 1;
       let node = new MessageMarkdownTransformer(messageSchema).parse(
         updatedMessage
       );
 
-      this.insertNodeIntoEditor(node, this.range.from, this.range.to);
+      if (node.textContent === updatedMessage) {
+        node = this.editorView.state.schema.text(updatedMessage);
+        from = this.range.from;
+      }
 
+      const tr = this.editorView.state.tr.replaceWith(
+        from,
+        this.range.to,
+        node
+      );
+
+      this.state = this.editorView.state.apply(tr);
+      this.emitOnChange();
+
+      tr.scrollIntoView();
       this.$track(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
       return false;
     },
@@ -559,14 +560,23 @@ export default {
       if (!this.editorView) {
         return null;
       }
+      let node = this.editorView.state.schema.text(`{{${variable}}}`);
+      const from = this.range.from;
 
-      const content = `{{${variable}}}`;
-      let node = this.editorView.state.schema.text(content);
-      const { from, to } = this.range;
+      const tr = this.editorView.state.tr.replaceWith(
+        from,
+        this.range.to,
+        node
+      );
 
-      this.insertNodeIntoEditor(node, from, to);
+      this.state = this.editorView.state.apply(tr);
+      this.emitOnChange();
+
+      // The `{{ }}` are added to the message, but the cursor is placed
+      // and onExit of suggestionsPlugin is not called. So we need to manually hide
       this.showVariables = false;
       this.$track(CONVERSATION_EVENTS.INSERTED_A_VARIABLE);
+      tr.scrollIntoView();
       return false;
     },
     openFileBrowser() {
@@ -622,6 +632,8 @@ export default {
     },
 
     emitOnChange() {
+      this.editorView.updateState(this.state);
+
       this.$emit('input', this.contentFromEditor);
     },
 
@@ -682,19 +694,6 @@ export default {
     onFocus() {
       this.$emit('focus');
     },
-    insertContentIntoEditor(content, defaultFrom = 0) {
-      const from = defaultFrom || this.editorView.state.selection.from || 0;
-      let node = new MessageMarkdownTransformer(messageSchema).parse(content);
-
-      this.insertNodeIntoEditor(node, from, undefined);
-    },
-    insertNodeIntoEditor(node, from = 0, to = 0) {
-      this.state = insertAtCursor(this.editorView, node, from, to);
-      this.emitOnChange();
-      this.$nextTick(() => {
-        scrollCursorIntoView(this.editorView);
-      });
-    },
   },
 };
 </script>