From 3d0ce57f0320d2d241a7c946d0d28266c05d9fed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Mon, 11 May 2020 11:15:45 +0200
Subject: [PATCH] Destroy and intialize ckeditor on browser history back

When a page with ckeditor is restored from browser cache by using browser
history back feature application was trying to re-initialize it but this was
throwing some javascript errors that left ckeditor useless. The ckeditor user
interface seemed to be loaded correctly but editor contents was not shown
and ckeditor locked.

This solution is about destroying all ckeditor instances on page before
leaving it and force the reinitialization after Turbolinks restored the cache.
Inspiration here [1].

There is a similar patch to make it work with Turbolinks 5.x versions [2].

  [1] https://github.com/galetahub/ckeditor/issues/575#issuecomment-132757961
  [2] https://github.com/galetahub/ckeditor/issues/575#issuecomment-241185136
---
 app/assets/javascripts/ckeditor/reinit.js |  7 -------
 app/assets/javascripts/html_editor.js     |  8 ++++++++
 spec/system/ckeditor_spec.rb              | 16 ++++++++++++++++
 3 files changed, 24 insertions(+), 7 deletions(-)
 delete mode 100644 app/assets/javascripts/ckeditor/reinit.js

diff --git a/app/assets/javascripts/ckeditor/reinit.js b/app/assets/javascripts/ckeditor/reinit.js
deleted file mode 100644
index 0ee51a90c..000000000
--- a/app/assets/javascripts/ckeditor/reinit.js
+++ /dev/null
@@ -1,7 +0,0 @@
-$(document).on("page:change", function() {
-  if (typeof(CKEDITOR) != "undefined"){
-    for(name in CKEDITOR.instances){
-      try{CKEDITOR.replace(name);}catch(err){};
-    }
-  }
-});
diff --git a/app/assets/javascripts/html_editor.js b/app/assets/javascripts/html_editor.js
index 4325fa255..590a473ae 100644
--- a/app/assets/javascripts/html_editor.js
+++ b/app/assets/javascripts/html_editor.js
@@ -1,6 +1,11 @@
 (function() {
   "use strict";
   App.HTMLEditor = {
+    destroy: function() {
+      for (var name in CKEDITOR.instances) {
+        CKEDITOR.instances[name].destroy();
+      }
+    },
     initialize: function() {
       $("textarea.html-area").each(function() {
         if ($(this).hasClass("admin")) {
@@ -11,4 +16,7 @@
       });
     }
   };
+
+  $(document).on("page:before-unload", App.HTMLEditor.destroy);
+  $(document).on("page:restore", App.HTMLEditor.initialize);
 }).call(this);
diff --git a/spec/system/ckeditor_spec.rb b/spec/system/ckeditor_spec.rb
index ea72ca4ca..d09732d97 100644
--- a/spec/system/ckeditor_spec.rb
+++ b/spec/system/ckeditor_spec.rb
@@ -51,4 +51,20 @@ describe "CKEditor" do
     expect(page).not_to have_link "Upload"
     expect(page).not_to have_link "Browse Server"
   end
+
+  context "When navigating back to editor page using browser history back" do
+    scenario "display ckeditor unsaved contents", :js do
+      login_as(create(:administrator).user)
+
+      visit new_admin_newsletter_path
+      fill_in_ckeditor "Email content", with: "This is an unsaved body"
+      click_link "Newsletters"
+
+      expect(page).to have_link "New newsletter"
+
+      go_back
+
+      expect(page).to have_ckeditor "Email content", with: "This is an unsaved body"
+    end
+  end
 end