feat: Allow signature in the editor directly (#7881)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/shared/components/ResizableTextArea.vue

@@ -11,6 +11,12 @@
 </template>
 
 <script>
+import {
+  appendSignature,
+  removeSignature,
+  extractTextFromMarkdown,
+} from 'dashboard/helper/editorHelper';
+
 const TYPING_INDICATOR_IDLE_TIME = 4000;
 export default {
   props: {
@@ -26,21 +32,60 @@ export default {
       type: Number,
       default: 2,
     },
+    signature: {
+      type: String,
+      default: '',
+    },
+    // add this as a prop, so that we won't have to include uiSettingsMixin
+    sendWithSignature: {
+      type: Boolean,
+      default: false,
+    },
+    // allowSignature is a kill switch, ensuring no signature methods are triggered except when this flag is true
+    allowSignature: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       idleTimer: null,
     };
   },
+  computed: {
+    cleanedSignature() {
+      // clean the signature, this will ensure that we don't have
+      // any markdown formatted text in the signature
+      return extractTextFromMarkdown(this.signature);
+    },
+  },
   watch: {
     value() {
       this.resizeTextarea();
+      // 🚨 watch triggers every time the value is changed, we cannot set this to focus then
+      // when this runs, it sets the cursor to the end of the body, ignoring the signature
+      // Suppose if someone manually set the cursor to the middle of the body
+      // and starts typing, the cursor will be set to the end of the body
+      // A surprise cursor jump? Definitely not user-friendly.
+      if (document.activeElement !== this.$refs.textarea) {
+        this.$nextTick(() => {
+          this.setCursor();
+        });
+      }
+    },
+    sendWithSignature(newValue) {
+      if (this.allowSignature) {
+        this.toggleSignatureInEditor(newValue);
+      }
     },
   },
   mounted() {
     this.$nextTick(() => {
       if (this.value) {
         this.resizeTextarea();
+        this.setCursor();
+      } else {
+        this.focus();
       }
     });
   },
@@ -52,6 +97,34 @@ export default {
         this.$el.style.height = `${this.$el.scrollHeight}px`;
       }
     },
+    // The toggleSignatureInEditor gets the new value from the
+    // 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
+        ? appendSignature(this.value, this.cleanedSignature)
+        : removeSignature(this.value, this.cleanedSignature);
+
+      this.$emit('input', valueWithSignature);
+
+      this.$nextTick(() => {
+        this.resizeTextarea();
+        this.setCursor();
+      });
+    },
+    setCursor() {
+      const textarea = this.$refs.textarea;
+      const bodyWithoutSignature = removeSignature(
+        this.value,
+        this.cleanedSignature
+      );
+
+      // only trim at end, so if there are spaces at the start, those are not removed
+      const bodyEndsAt = bodyWithoutSignature.trimEnd().length;
+
+      textarea.focus();
+      textarea.setSelectionRange(bodyEndsAt, bodyEndsAt);
+    },
     onInput(event) {
       this.$emit('input', event.target.value);
       this.resizeTextarea();