JS refactoring

app/assets/javascripts/activeadmin/quill_editor_input.js

@@ -1,7 +1,8 @@
+(function () {
   // --- functions ---------------------------------------------------------------
   function initQuillEditors() {
-  var default_theme = 'snow';
+    let default_theme = 'snow'
-  var default_toolbar = [
+    let default_toolbar = [
       ['bold', 'italic', 'underline'],
       ['link', 'blockquote', 'code-block'],
       [{ 'script': 'sub' }, { 'script': 'super' }],
@@ -9,46 +10,46 @@ function initQuillEditors() {
       [{ 'color': [] }, { 'background': [] }],
       ['image'],
       ['clean'],
-  ];
+    ]
-  var editors = document.querySelectorAll('.quill-editor');
+    let editors = document.querySelectorAll('[data-aa-quill-editor]')
-  var registered_plugins = {};
+    let registered_plugins = {}
 
-  for(var i = 0; i < editors.length; i++) {
+    for (let i = 0; i < editors.length; i++) {
-    var content = editors[i].querySelector('.quill-editor-content');
+      let content = editors[i].querySelector('[data-aa-quill-content]')
-    var isActive = editors[i].classList.contains('quill-editor--active');
+      let isActive = editors[i].classList.contains('quill-editor--active')
       if (content && !isActive) {
         // Setup editor options
-      var options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : {};
+        let options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : {}
-      if(!options.theme) options.theme = default_theme;
+        if (!options.theme) options.theme = default_theme
-      if(!options.modules) options.modules = {};
+        if (!options.modules) options.modules = {}
-      if(!options.modules.toolbar) options.modules.toolbar = default_toolbar;
+        if (!options.modules.toolbar) options.modules.toolbar = default_toolbar
 
         // Setup plugin options
-      var plugin_options = editors[i].getAttribute('data-plugins') ? JSON.parse(editors[i].getAttribute('data-plugins')) : {};
+        let plugin_options = editors[i].getAttribute('data-plugins') ? JSON.parse(editors[i].getAttribute('data-plugins')) : {}
         if (plugin_options.image_uploader && plugin_options.image_uploader.server_url) {
           if (!registered_plugins.image_uploader) {
-          Quill.register('modules/imageUploader', ImageUploader);
+            Quill.register('modules/imageUploader', ImageUploader)
-          registered_plugins.image_uploader = true;
+            registered_plugins.image_uploader = true
           }
-        var opts = plugin_options.image_uploader;
+          let opts = plugin_options.image_uploader
-        options.modules.imageUploader = setupImageUploader(opts.server_url, opts.field_name);
+          options.modules.imageUploader = setupImageUploader(opts.server_url, opts.field_name)
         }
 
         // Init editor
-      editors[i]['_quill-editor'] = new Quill(content, options);
+        editors[i]['_quill-editor'] = new Quill(content, options)
-      editors[i].classList += ' quill-editor--active';
+        editors[i].classList += ' quill-editor--active'
       }
     }
 
-  var formtastic = document.querySelector('form.formtastic');
+    let formtastic = document.querySelector('form.formtastic')
     if (formtastic) {
-    formtastic.onsubmit = function() {
+      formtastic.onsubmit = () => {
-      for(var i = 0; i < editors.length; i++) {
+        for (let i = 0; i < editors.length; i++) {
-        var input = editors[i].querySelector('input[type="hidden"]');
+          let input = editors[i].querySelector('input[type="hidden"]')
           if (editors[i]['_quill-editor'].editor.isBlank()) {
-          input.value = '';
+            input.value = ''
           } else {
-          input.value = editors[i]['_quill-editor'].root.innerHTML;
+            input.value = editors[i]['_quill-editor'].root.innerHTML
           }
         }
       };
@@ -59,8 +60,8 @@ function setupImageUploader(server_url, field_name) {
     return {
       upload: file => {
         return new Promise((resolve, reject) => {
-        const formData = new FormData();
+          const formData = new FormData()
-        formData.append(field_name || 'file_upload', file);
+          formData.append(field_name || 'file_upload', file)
 
           fetch(server_url, {
             body: formData,
@@ -73,19 +74,20 @@ function setupImageUploader(server_url, field_name) {
               resolve(result.url);
             })
             .catch(error => {
-          reject('Upload failed');
+              reject('Upload failed')
-          console.error('Error: ', error);
+              console.error('Error: ', error)
-        });
+            })
-      });
+        })
       }
     }
   }
 
   // --- events ------------------------------------------------------------------
-$(document).ready( function() {
+  $(document).ready(() => {
-  initQuillEditors();
+    initQuillEditors()
-});
+  })
 
-$(document).on('has_many_add:after', function() {
+  $(document).on('has_many_add:after', '.has_many_container', () => {
-  initQuillEditors();
+    initQuillEditors()
-});
+  })
+})()

app/assets/stylesheets/activeadmin/_quill_editor_input.scss

@@ -5,7 +5,7 @@
   text-align: initial;
 }
 
-body.active_admin .quill-editor {
+body.active_admin [data-aa-quill-editor] {
   display: inline-block;
   width: calc(80% - 2px);
 

lib/formtastic/inputs/quill_editor_input.rb

@@ -6,9 +6,9 @@ module Formtastic
       def to_html
         input_wrapping do
           label_html <<
-            template.content_tag(:div, input_html_options.merge(class: 'quill-editor')) do
+            template.content_tag(:div, input_html_options.merge('data-aa-quill-editor': '1')) do
               builder.hidden_field(input_name) <<
-                template.content_tag(:div, class: 'quill-editor-content') do
+                template.content_tag(:div, 'data-aa-quill-content': '1') do
                   object.send(method).try :html_safe
                 end
             end