fix(core): insert column var at caret position

GH-9

Author: maninder-pal-singh

projects/workflows-creator/src/lib/builder/group/group.component.html

@@ -144,7 +144,8 @@
                 emailInput: emailInput,
                 appendEmailBody: appendEmailBody,
                 setFocusKey: setFocusKey,
-                hide: hidePopper()
+                hide: hidePopper(),
+                setFocusOutPos: setFocusOutPos
               }
             "
           ></ng-container>
@@ -284,6 +285,7 @@
     let-appendEmailBody="appendEmailBody"
     let-setFocusKey="setFocusKey"
     let-hide="hide"
+    let-setFocusOutPos="setFocusOutPos"
   >
     <div class="email-template" (document:click)="hide()">
       <input
@@ -292,14 +294,15 @@
         id="email-subject"
         autofocus
         (focus)="setFocusKey(emailInput, 'subject')"
+        (focusout)="setFocusOutPos(emailInput, $event.target.selectionStart)"
         [placeholder]="typeSubjectPlaceholder"
         [(ngModel)]="emailInput.subject"
       />
       <textarea
         [placeholder]="typeEmailPlaceholder"
         id="email-body"
         class="email-input email-body-input"
-        (focus)="setFocusKey(emailInput, 'body')"
+        (focusout)="setFocusOutPos(emailInput, $event.target.selectionStart)"
         [(ngModel)]="emailInput.body"
       ></textarea>
       <div class="auto-populate">
@@ -315,7 +318,7 @@
           (click)="callback(emailInput)"
           [disabled]="!emailInput.subject || !emailInput.body"
         >
-          {{ localizedStringKeys.SetLbl | localization }}
+          {{ setLbl }}
         </button>
       </div>
     </div>

projects/workflows-creator/src/lib/builder/group/group.component.ts

@@ -103,6 +103,7 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     subject: '',
     body: '',
     focusKey: '',
+    caretPos: 0,
   };
   dropdownSettings: IDropdownSettings = {
     singleSelection: false,
@@ -134,6 +135,9 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
 
   typeSubjectPlaceholder = '';
   typeEmailPlaceholder = '';
+  doThisLbl = '';
+  whenThisHappensLbl = '';
+  setLbl = '';
 
   localizedStringKeys = LocalizedStringKeys;
 
@@ -261,11 +265,21 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
    */
   appendEmailBody(item: Select, emailInput: EmailInput) {
     if (emailInput.focusKey === 'subject') {
-      emailInput.subject += ` ${item.value}`;
+      emailInput.subject = [
+        emailInput.subject.slice(0, emailInput.caretPos),
+        `${item.value}`,
+        emailInput.subject.slice(emailInput.caretPos),
+      ].join('');
     }
     if (emailInput.focusKey === 'body') {
-      emailInput.body += ` ${item.value}`;
+      emailInput.body = [
+        emailInput.body.slice(0, emailInput.caretPos),
+        `${item.value}`,
+        emailInput.body.slice(emailInput.caretPos),
+      ].join('');
     }
+
+    emailInput.caretPos += `${item.value}`.length;
   }
 
   /**
@@ -278,6 +292,14 @@ export class GroupComponent<E> implements OnInit, AfterViewInit {
     emailInput.focusKey = key;
   }
 
+  /**
+   * @emailInput this is the object that contains the email input
+   * @caretPosition pos caret position
+   */
+  setFocusOutPos(emailInput: EmailInput, caretPosition: number) {
+    emailInput.caretPos = caretPosition;
+  }
+
   /**
    * If the type is an action, set the node list to the actions, otherwise if the type is an event, set
    * the node list to the trigger events if there is only one event group and no children, otherwise

projects/workflows-creator/src/lib/types/base.types.ts

@@ -172,6 +172,7 @@ export type EmailInput = {
   subject: string;
   body: string;
   focusKey: string;
+  caretPos: number;
 };
 
 /**