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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="editor-root">
+  <div class="editor-root relative">
     <tag-agents
       v-if="showUserMentions && isPrivate"
       :search-key="mentionSearchKey"
@@ -40,6 +40,7 @@ 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';
@@ -295,7 +296,17 @@ export default {
   mounted() {
     this.createEditorView();
     this.editorView.updateState(this.state);
-    this.focusEditor(this.value);
+    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);
   },
   methods: {
     reloadState(content = this.value) {
@@ -438,11 +449,7 @@ export default {
         userFullName: mentionItem.name,
       });
 
-      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.insertNodeIntoEditor(node, this.range.from, this.range.to);
       this.$track(CONVERSATION_EVENTS.USED_MENTIONS);
 
       return false;
@@ -456,26 +463,17 @@ export default {
         return null;
       }
 
-      let from = this.range.from - 1;
       let node = new MessageMarkdownTransformer(messageSchema).parse(
         updatedMessage
       );
 
-      if (node.textContent === updatedMessage) {
-        node = this.editorView.state.schema.text(updatedMessage);
-        from = this.range.from;
-      }
-
-      const tr = this.editorView.state.tr.replaceWith(
-        from,
+      this.insertNodeIntoEditor(
+        node,
+        this.range.from,
         this.range.to,
-        node
+        updatedMessage
       );
 
-      this.state = this.editorView.state.apply(tr);
-      this.emitOnChange();
-
-      tr.scrollIntoView();
       this.$track(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
       return false;
     },
@@ -483,23 +481,14 @@ export default {
       if (!this.editorView) {
         return null;
       }
-      let node = this.editorView.state.schema.text(`{{${variable}}}`);
+
+      const content = `{{${variable}}}`;
+      let node = this.editorView.state.schema.text(content);
       const 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();
-
-      // 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.insertNodeIntoEditor(node, from, this.range.to, content);
       this.showVariables = false;
       this.$track(CONVERSATION_EVENTS.INSERTED_A_VARIABLE);
-      tr.scrollIntoView();
       return false;
     },
     openFileBrowser() {
@@ -616,6 +605,44 @@ 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, content);
+    },
+    insertNodeIntoEditor(node, from = 0, to = 0, content = '') {
+      if (!this.editorView) {
+        return;
+      }
+
+      // If the node is of type 'doc' and has only one child which is a paragraph,
+      // then extract its inline content to be inserted as inline.
+      if (
+        node.type.name === 'doc' &&
+        node.childCount === 1 &&
+        node.firstChild.type.name === 'paragraph'
+      ) {
+        node = node.firstChild.content;
+      } else if (content && node.textContent === content) {
+        node = this.editorView.state.schema.text(content);
+      }
+
+      let tr;
+      if (to) {
+        tr = this.editorView.state.tr
+          .replaceWith(from, to, node)
+          .insertText(` `);
+      } else {
+        tr = this.editorView.state.tr.insert(from, node);
+      }
+
+      this.state = this.editorView.state.apply(tr);
+      this.emitOnChange();
+
+      tr.scrollIntoView();
+      this.editorView.focus();
+    },
   },
 };
 </script>