From 8e6413b031ece67aa8db8fd1ad15d80104cf176c Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mlorber@biosistemika.com>
Date: Fri, 10 May 2019 10:52:14 +0200
Subject: [PATCH] Fix tiny mce visuals, saving and cursor position

---
 app/assets/javascripts/sitewide/tiny_mce.js | 18 +++++++++++++++++-
 app/assets/stylesheets/tiny_mce.scss        |  8 ++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/sitewide/tiny_mce.js b/app/assets/javascripts/sitewide/tiny_mce.js
index 2e807c876..9ed72ee10 100644
--- a/app/assets/javascripts/sitewide/tiny_mce.js
+++ b/app/assets/javascripts/sitewide/tiny_mce.js
@@ -57,6 +57,7 @@ var TinyMCE = (function() {
           menubar: 'file edit view insert format',
           toolbar: 'undo redo restoredraft | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | forecolor backcolor | customimageuploader | codesample',
           plugins: 'autosave autoresize customimageuploader link advlist codesample autolink lists charmap hr anchor searchreplace wordcount visualblocks visualchars insertdatetime nonbreaking save directionality paste textcolor colorpicker textpattern',
+          autoresize_bottom_margin: 20,
           codesample_languages: [
             { text: 'R', value: 'r' },
             { text: 'MATLAB', value: 'matlab' },
@@ -139,6 +140,7 @@ var TinyMCE = (function() {
               $('.tinymce-placeholder').remove();
               moveToolbar(editor, editorToolbar, editorToolbaroffset);
             }, 400);
+
             // Init saved status label
             if (editor.getContent() !== '') {
               editorForm.find('.tinymce-status-badge').removeClass('hidden');
@@ -149,7 +151,6 @@ var TinyMCE = (function() {
               moveToolbar(editor, editorToolbar, editorToolbaroffset);
             });
 
-
             // Update scroll position after exit
             function updateScrollPosition() {
               if (editorForm.offset().top < $(window).scrollTop()) {
@@ -157,6 +158,16 @@ var TinyMCE = (function() {
               }
             }
 
+            // Saving at clicking anywhere outside of the editor
+            editor.on('blur', function(event) {
+              event.preventDefault();
+              editorForm.clearFormErrors();
+              editor.setProgressState(1);
+              editor.save();
+              editorForm.submit();
+              updateScrollPosition();
+            });
+
             // Init Save button
             editorForm
               .find('.tinymce-save-button')
@@ -202,6 +213,11 @@ var TinyMCE = (function() {
               })
               .removeClass('hidden');
 
+            // Set cursor to the end of the content
+            editor.focus();
+            editor.selection.select(editor.getBody(), true);
+            editor.selection.collapse(false);
+
             SmartAnnotation.init($(editor.contentDocument.activeElement));
             initHighlightjsIframe($(this.iframeElement).contents());
           },
diff --git a/app/assets/stylesheets/tiny_mce.scss b/app/assets/stylesheets/tiny_mce.scss
index b6357efae..b11276534 100644
--- a/app/assets/stylesheets/tiny_mce.scss
+++ b/app/assets/stylesheets/tiny_mce.scss
@@ -4,12 +4,12 @@
 .tinymce-view {
   border: solid 1px;
   border-color: $color-white;
-  box-shadow: 1px 0 2px $color-alto;
-  min-height: 200px;
+  border-radius: 3px;
+  min-height: 100px;
   padding: 3px;
 
   &:hover {
-    border-color: $color-alto;
+    border-color: $color-gainsboro;
     cursor: pointer;
   }
 
@@ -59,4 +59,4 @@
 .mce-toolbar {
   background: $color-white !important;
 }
-// scss-lint:enable ImportantRule
\ No newline at end of file
+// scss-lint:enable ImportantRule