bugfix contenteditable auto save

Author: alfredfrancis

frontend/src/app/agent/train/train.component.html

@@ -28,7 +28,7 @@ <h2 fxFlex="90">Train your intent</h2>
     </mat-expansion-panel-header>
 
     <div fxLayout="row">
-      <div fxFlex="90" id="textarea_highlight" contenteditable="true" role="textarea" (mouseup)="annotate()" appAutofocus  (blur)="example.text = $event.target.outerText;">{{example.text}}</div>
+      <div fxFlex="90" id="textarea_highlight" contenteditable="true" role="textarea" (mouseup)="annotate()" appAutofocus  (keyup)="example.text = $event.target.outerText;placeCaretAtEnd($event.target)">{{example.text}}</div>
       <button mat-icon-button fxFlex="10">
         <mat-icon aria-label="Delete this example" (click)="deleteExample(example_index)">delete</mat-icon>
       </button>

frontend/src/app/agent/train/train.component.ts

@@ -203,4 +203,24 @@ export class TrainComponent implements OnInit {
         }
     }
 }
+
+//place curser at the end of content editable div
+  placeCaretAtEnd(el) {
+    el.focus();
+    if (typeof window.getSelection != "undefined"
+            && typeof document.createRange != "undefined") {
+        var range = document.createRange();
+        range.selectNodeContents(el);
+        range.collapse(false);
+        var sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+    } else if (typeof document.body.createTextRange != "undefined") {
+        var textRange = document.body.createTextRange();
+        textRange.moveToElementText(el);
+        textRange.collapse(false);
+        textRange.select();
+    }
+  }
+
 }