Editor default options refactoring + include imageUploader plugin

In order to use imageUploader plugin:
- js/css files must included in the app;
- an upload method must be provided in Active Admin entity;
- the image_uploader server_url field option needs to be set.

Author: blocknotes

app/assets/javascripts/activeadmin/quill.imageUploader.min.js

@@ -1,25 +1,40 @@
+// --- functions ---------------------------------------------------------------
 function initQuillEditors() {
+  var default_theme = 'snow';
+  var default_toolbar = [
+    ['bold', 'italic', 'underline'],
+    ['link', 'blockquote', 'code-block'],
+    [{ 'script': 'sub'}, { 'script': 'super' }],
+    [{ 'align': [] }, { list: 'ordered' }, { list: 'bullet' }],
+    [{ 'color': [] }, { 'background': [] }],
+    ['image'],
+    ['clean'],
+  ];
   var editors = document.querySelectorAll('.quill-editor');
-  var default_options = {
-    modules: {
-      toolbar: [
-        ['bold', 'italic', 'underline'],
-        ['link', 'blockquote', 'code-block'],
-        [{ 'script': 'sub'}, { 'script': 'super' }],
-        [{ 'align': [] }, { list: 'ordered' }, { list: 'bullet' }],
-        [{ 'color': [] }, { 'background': [] }],
-        ['clean'],
-      ]
-    },
-    placeholder: '',
-    theme: 'snow'
-  };
+  var registered_plugins = {};
 
   for(var i = 0; i < editors.length; i++) {
     var content = editors[i].querySelector('.quill-editor-content');
     var isActive = editors[i].classList.contains('quill-editor--active');
     if(content && !isActive) {
-      var options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : default_options;
+      // Setup editor options
+      var options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : {};
+      if(!options.theme) options.theme = default_theme;
+      if(!options.modules) options.modules = {};
+      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')) : {};
+      if(plugin_options.image_uploader && plugin_options.image_uploader.server_url) {
+        if(!registered_plugins.image_uploader) {
+          Quill.register('modules/imageUploader', ImageUploader);
+          registered_plugins.image_uploader = true;
+        }
+        var opts = plugin_options.image_uploader;
+        options.modules.imageUploader = setupImageUploader(opts.server_url, opts.field_name);
+      }
+
+      // Init editor
       editors[i]['_quill-editor'] = new Quill(content, options);
       editors[i].classList += ' quill-editor--active';
     }
@@ -40,6 +55,33 @@ function initQuillEditors() {
   }
 }
 
+function setupImageUploader(server_url, field_name) {
+  return {
+    upload: file => {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData();
+        formData.append(field_name || 'file_upload', file);
+
+        fetch(server_url, {
+          body: formData,
+          headers: {
+            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+          },
+          method: 'POST'
+        }).then(response => response.json())
+        .then(result => {
+          resolve(result.url);
+        })
+        .catch(error => {
+          reject('Upload failed');
+          console.error('Error: ', error);
+        });
+      });
+    }
+  }
+}
+
+// --- events ------------------------------------------------------------------
 $(document).ready( function() {
   initQuillEditors();
 });

app/assets/javascripts/activeadmin/quill_editor_input.js

@@ -0,0 +1,33 @@
+.image-uploading {
+  position: relative;
+  display: inline-block;
+}
+
+.image-uploading img {
+  max-width: 98% !important;
+  filter: blur(5px);
+  opacity: 0.3;
+}
+
+.image-uploading::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  margin-left: -15px;
+  border-radius: 50%;
+  border: 3px solid #ccc;
+  border-top-color: #1e986c;
+  z-index: 1;
+  animation: spinner 0.6s linear infinite;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}