Add TinyMCE functionality and feature spec

spec/features/tinymce_features_spec.rb

@@ -0,0 +1,40 @@
+require 'spec_helper'
+
+feature 'WorthSaving' do
+  let(:fred) { given_user 'Fred Flintstone' }
+  let(:barney) { given_user 'Barney Rubble' }
+
+  scenario "TinyMCE are in place for textareas, user makes edits to new doc without saving", js: true do
+    login fred
+    visit new_page_path editor: 'tinymce'
+
+    within_frame("page_content_ifr") do
+      editor = page.find_by_id('tinymce')
+      editor.native.send_keys 'Test the page content'
+    end
+
+    within_frame("page_subpages_attributes_0_content_ifr") do
+      editor = page.find_by_id('tinymce')
+      editor.native.send_keys 'Test the subpage content'
+    end
+
+    chill_out_long_enough_to_draft
+    visit current_path
+
+    within_frame("page_content_ifr") do
+      expect(page).not_to have_content('Test the page content')
+    end
+
+    within_frame("page_subpages_attributes_0_content_ifr") do
+      expect(page).not_to have_content('Test the subpage content')
+    end
+
+    within_frame("recovered_page_content_ifr") do
+      expect(page).to have_content('Test the page content')
+    end
+
+    within_frame("recovered_page_subpages_attributes_0_content_ifr") do
+      expect(page).to have_content('Test the subpage content')
+    end
+  end
+end

vendor/assets/javascripts/worth_saving.js

@@ -1,10 +1,15 @@
 //= require_self
-//= require_tree .
+//= require ./worth_saving/tinymce_init
+//= require ./worth_saving/form
 
 WorthSaving = {};
 
 $(document).ready(function() {
   $('form[data-worth-saving-form-id]').each(function() {
     new WorthSaving.Form($(this));
   });
-});
+});
+
+WorthSaving.prepareThirdPartyEditorsForSave = function() {
+  if(typeof tinymce !== 'undefined') tinymce.triggerSave();
+};

vendor/assets/javascripts/worth_saving/form.js

@@ -8,6 +8,11 @@ WorthSaving.Form = function($mainForm) {
   var $messageDiv = $('#worth-saving-form-message-' + formId);
 
   var startCountdown = function() {
+    if(countdown) {
+      console.log('returning because countdown is set')
+      return;
+    }
+    console.log('starting countdown')
     countdown = true;
     setTimeout(submitDraftForm, interval);
   };
@@ -21,6 +26,7 @@ WorthSaving.Form = function($mainForm) {
   };
 
   var submitDraftForm = function() {
+    WorthSaving.prepareThirdPartyEditorsForSave();
     prepareDraftForm();
     resetCountdown();
     $.ajax({
@@ -58,7 +64,11 @@ WorthSaving.Form = function($mainForm) {
   };
 
   $worthSavingFields.on('keyup change', function() {
-    countdown || startCountdown();
+    startCountdown();
   });
+
+  if(typeof tinymce !== 'undefined') {
+    WorthSaving.tinymceInit(startCountdown);
+  }
 };
 

vendor/assets/javascripts/worth_saving/tinymce_init.js

@@ -0,0 +1,30 @@
+WorthSaving.tinymceInit = function(startCountdownFn) {
+  if(tinymce.majorVersion === '4') {
+    tinymce.on('addEditor', function(obj) {
+      var editor = obj.editor;
+      var $field = $('#' + editor.id);
+      var isWorthSaving = $field.data().worthSaving;
+      if(editor !== undefined && isWorthSaving) {
+        $field.off('keyup').off('change');
+        editor.on('keyup change', function() {
+          startCountdownFn();
+        });
+      }
+    });
+  } else {
+    tinymce.onAddEditor(function(obj) {
+      var editor = obj.editor;
+      var $field = $('#' + editor.id);
+      var isWorthSaving = $field.data().worthSaving;
+      if(editor !== undefined && isWorthSaving) {
+        $field.off('keyup').off('change');
+        editor.onKeyUp(function() {
+          startCountdownFn();
+        });
+        editor.onChange(function() {
+          startCountdownFn();
+        });
+      }
+    });
+  }
+};