Merge pull request #2414 from aignatov-bio/ai-sci-4134-auto-open-tiny-mce-if-unsaved-data

Open unsaved TinyMce editor [SCI-4134]

app/assets/javascripts/my_modules/protocols.js

@@ -10,15 +10,19 @@ var selectedRow = null;
 
 
 function initEditMyModuleDescription() {
-  $('#my_module_description_view').on('click', function() {
+  var viewObject = $('#my_module_description_view');
+  viewObject.on('click', function() {
     TinyMCE.init('#my_module_description_textarea');
   });
+  TinyMCE.initIfHasDraft(viewObject);
 }
 
 function initEditProtocolDescription() {
-  $('#protocol_description_view').on('click', function() {
+  var viewObject = $('#protocol_description_view');
+  viewObject.on('click', function() {
     TinyMCE.init('#protocol_description_textarea', refreshProtocolStatusBar);
   });
+  TinyMCE.initIfHasDraft(viewObject);
 }
 
 // Initialize edit description modal window

app/assets/javascripts/protocols/header.js

@@ -21,9 +21,11 @@ var ProtocolRepositoryHeader = (function() {
   }
 
   function initEditDescription() {
-    $('#protocol_description_view').on('click', function() {
+    var viewObject = $('#protocol_description_view');
+    viewObject.on('click', function() {
       TinyMCE.init('#protocol_description_textarea');
     });
+    TinyMCE.initIfHasDraft(viewObject);
   }
 
   return {

app/assets/javascripts/sitewide/tiny_mce.js

@@ -84,6 +84,25 @@ var TinyMCE = (function() {
     $(editor.getContainer()).find('.tinymce-save-button').removeClass('hidden');
   }
 
+  function draftLocation() {
+    return 'tinymce-drafts-' + document.location.pathname;
+  }
+
+  function removeDraft(editor, textAreaObject) {
+    var location = draftLocation();
+    var storedDrafts = JSON.parse(sessionStorage.getItem(location) || '[]');
+    var draftId = storedDrafts.indexOf(textAreaObject.data('tinymce-object'));
+    if (draftId > -1) {
+      storedDrafts.splice(draftId, 1);
+    }
+
+    if (storedDrafts.length) {
+      sessionStorage.setItem(location, JSON.stringify(storedDrafts));
+    } else {
+      sessionStorage.removeItem(location);
+    }
+  }
+
   // returns a public API for TinyMCE editor
   return Object.freeze({
     init: function(selector, onSaveCallback) {
@@ -252,6 +271,7 @@ var TinyMCE = (function() {
                 editor.remove();
                 editorForm.find('.tinymce-view').html(data.html).removeClass('hidden');
                 editor.plugins.autosave.removeDraft();
+                removeDraft(editor, textAreaObject);
                 if (onSaveCallback) { onSaveCallback(); }
               }).on('ajax:error', function(ev, data) {
                 var model = editor.getElement().dataset.objectType;
@@ -308,6 +328,15 @@ var TinyMCE = (function() {
               makeItDirty(editor);
             });
 
+            editor.on('StoreDraft', function() {
+              var location = draftLocation();
+              var storedDrafts = JSON.parse(sessionStorage.getItem(location) || '[]');
+              var draftName = textAreaObject.data('tinymce-object');
+              if (storedDrafts.includes(draftName) || !draftName) return;
+              storedDrafts.push(draftName);
+              sessionStorage.setItem(location, JSON.stringify(storedDrafts));
+            });
+
             editor.on('remove', function() {
               var menuBar = $(editor.getContainer()).find('.mce-menubar.mce-toolbar.mce-first .mce-flow-layout');
               menuBar.find('.tinymce-save-button').remove();
@@ -361,7 +390,20 @@ var TinyMCE = (function() {
     makeItDirty: function(editor) {
       makeItDirty(editor);
     },
-    highlight: initHighlightjs
+    highlight: initHighlightjs,
+    initIfHasDraft: function(viewObject) {
+      var storedDrafts = sessionStorage.getItem(draftLocation());
+      var draftName = viewObject.data('tinymce-init');
+      if (storedDrafts && JSON.parse(storedDrafts)[0] === draftName) {
+        let top = viewObject.offset().top;
+        setTimeout(() => {
+          viewObject.click();
+        }, 0);
+        setTimeout(() => {
+          window.scrollTo(0, top - 150);
+        }, 2000);
+      }
+    }
   });
 }());
 

app/views/my_modules/_description_form.html.erb

@@ -1,19 +1,16 @@
 <%= bootstrap_form_for @my_module, url: update_description_my_module_path(@my_module, format: :json), remote: :true, html: {class: 'tiny-mce-editor'} do |f| %>
   <%= render partial: 'shared/tiny_mce_extra_buttons.html.erb' %>
-  <% if @my_module.description.present? %>
+  <div id="my_module_description_view"
-    <div id="my_module_description_view"
+       class="ql-editor tinymce-view"
-         class="ql-editor tinymce-view"
+       data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>"
-         data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>">
+       data-tinymce-init="tinymce-my-module-description-<%= @my_module.id %>">
-        <%= custom_auto_link(@my_module.tinymce_render(:description),
+    <% if @my_module.description.present? %>
-                             simple_format: false,
+      <%= custom_auto_link(@my_module.tinymce_render(:description),
-                             tags: %w(img),
+                           simple_format: false,
-                             team: current_team) %>
+                           tags: %w(img),
-    </div>
+                           team: current_team) %>
-  <% else %>
+    <% end %>
-    <div id="my_module_description_view"
+  </div>
-         class="ql-editor tinymce-view"
-         data-placeholder="<%= t('my_modules.module_header.empty_description_edit_label') %>"></div>
-  <% end %>
   <%= f.tiny_mce_editor(:description,
                         id: :my_module_description_textarea,
                         class: 'hidden',
@@ -22,6 +19,7 @@
                         value: sanitize_input(@my_module.tinymce_render(:description)),
                         autocomplete: 'off',
                         data: {
+                          tinymce_object: "tinymce-my-module-description-#{@my_module.id}",
                           object_type: 'my_module',
                           object_id: @my_module.id,
                           highlightjs_path: asset_path('highlightjs-github-theme.css'),

app/views/my_modules/protocols/_protocol_description_form.html.erb

@@ -1,19 +1,16 @@
 <%= bootstrap_form_for protocol, url: update_url, remote: :true, html: {class: 'tiny-mce-editor'} do |f| %>
   <%= render partial: 'shared/tiny_mce_extra_buttons.html.erb' %>
-  <% if protocol.description.present? %>
+  <div id="protocol_description_view"
-    <div id="protocol_description_view"
+       class="ql-editor tinymce-view"
-         class="ql-editor tinymce-view"
+       data-placeholder="<%= t('my_modules.protocols.protocol_status_bar.empty_description_edit_label') %>"
-         data-placeholder="<%= t('my_modules.protocols.protocol_status_bar.empty_description_edit_label') %>">
+       data-tinymce-init="tinymce-protocol-description-<%= protocol.id %>" >
+    <% if protocol.description.present? %>
       <%= custom_auto_link(protocol.tinymce_render(:description),
                            simple_format: false,
                            tags: %w(img),
                            team: current_team) %>
-    </div>
+    <% end %>
-  <% else %>
+  </div>
-    <div id="protocol_description_view"
-         class="ql-editor tinymce-view"
-         data-placeholder="<%= t('my_modules.protocols.protocol_status_bar.empty_description_edit_label') %>"></div>
-  <% end %>
   <%= f.tiny_mce_editor(:description,
                         id: :protocol_description_textarea,
                         class: 'hidden',
@@ -22,6 +19,7 @@
                         value: sanitize_input(protocol.tinymce_render(:description)),
                         autocomplete: 'off',
                         data: {
+                          tinymce_object: "tinymce-protocol-description-#{protocol.id}",
                           object_type: 'protocol',
                           object_id: protocol.id,
                           highlightjs_path: asset_path('highlightjs-github-theme.css'),