chore: internal improvements to quill editor input js

Author: blocknotes

Makefile

@@ -40,6 +40,7 @@ lint:
 	@docker compose -f extra/docker-compose.yml exec app bin/rubocop
 
 server: seed
+	@rm -f spec/dummy/tmp/pids/server.pid
 	@docker compose -f extra/docker-compose.yml exec app bin/rails server -b 0.0.0.0 -p ${SERVER_PORT}
 
 specs:

app/assets/javascripts/activeadmin/quill_editor_input.js

@@ -1,71 +1,77 @@
-/* eslint-disable no-undef */
+/* globals $ Quill ImageUploader */
 (function () {
-  'use strict'
+  'use strict';
 
   // --- functions ---------------------------------------------------------------
-  function initQuillEditors() {
-    let default_theme = 'snow'
-    let default_toolbar = [
+  const initQuillEditors = () => {
+    const defaultTheme = 'snow';
+    const defaultToolbar = [
       ['bold', 'italic', 'underline'],
       ['link', 'blockquote', 'code-block'],
       [{ 'script': 'sub' }, { 'script': 'super' }],
       [{ 'align': [] }, { list: 'ordered' }, { list: 'bullet' }],
       [{ 'color': [] }, { 'background': [] }],
       ['image'],
       ['clean'],
-    ]
-    let editors = document.querySelectorAll('[data-aa-quill-editor]')
-    let registered_plugins = {}
+    ];
+    const editors = document.querySelectorAll('[data-aa-quill-editor]');
+    const registeredPlugins = {};
 
     for (let i = 0; i < editors.length; i++) {
-      let content = editors[i].querySelector('[data-aa-quill-content]')
-      let isActive = editors[i].classList.contains('quill-editor--active')
+      const content = editors[i].querySelector('[data-aa-quill-content]');
+      const isActive = editors[i].classList.contains('quill-editor--active');
+
       if (content && !isActive) {
         // Setup editor options
-        let 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
+        const options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : {};
+
+        if (!options.theme) options.theme = defaultTheme;
+        if (!options.modules) options.modules = {};
+        if (!options.modules.toolbar) options.modules.toolbar = defaultToolbar;
 
         // Setup plugin options
-        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)
-            registered_plugins.image_uploader = true
+        const pluginOptions = editors[i].getAttribute('data-plugins') ? JSON.parse(editors[i].getAttribute('data-plugins')) : {};
+
+        if (pluginOptions.image_uploader && pluginOptions.image_uploader.server_url) {
+          if (!registeredPlugins.image_uploader) {
+            Quill.register('modules/imageUploader', ImageUploader);
+            registeredPlugins.image_uploader = true;
           }
-          let opts = plugin_options.image_uploader
-          options.modules.imageUploader = setupImageUploader(opts.server_url, opts.field_name)
+          const opts = pluginOptions.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'
+        editors[i]['_quill-editor'] = new Quill(content, options);
+        editors[i].classList += ' quill-editor--active';
       }
     }
 
-    let formtastic = document.querySelector('form.formtastic')
+    const formtastic = document.querySelector('form.formtastic');
+
     if (formtastic) {
       formtastic.onsubmit = () => {
         for (let i = 0; i < editors.length; i++) {
-          let input = editors[i].querySelector('input[type="hidden"]')
+          const 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;
           }
         }
       };
     }
-  }
+  };
 
-  function setupImageUploader(server_url, field_name) {
+  const setupImageUploader = (server_url, field_name) => {
     return {
-      upload: file => {
+      upload: (file) => {
         return new Promise((resolve, reject) => {
-          const formData = new FormData()
-          formData.append(field_name || 'file_upload', file)
+          const formData = new FormData();
 
+          formData.append(field_name || 'file_upload', file);
           fetch(server_url, {
             body: formData,
             headers: {
@@ -75,13 +81,13 @@
           }).then(response => response.json())
             .then(result => {
               if (!result.url) {
-                reject('Upload failed')
+                reject('Upload failed');
               }
               resolve(result.url);
             })
             .catch(error => {
-              reject('Upload failed')
-              console.error('Error: ', error)
+              reject('Upload failed');
+              console.error('Error: ', error);
             })
         })
       }
@@ -90,27 +96,28 @@
 
   // --- public functions --------------------------------------------------------
   window.getQuillEditors = function() {
-    const editors = document.querySelectorAll('[data-aa-quill-editor]')
-    let list = []
+    const editors = document.querySelectorAll('[data-aa-quill-editor]');
+    const list = [];
+
+    editors.forEach(function(editor) { list.push(editor['_quill-editor']) });
 
-    editors.forEach(function(editor) { list.push(editor['_quill-editor']) })
-    return list
+    return list;
   }
 
   window.getQuillEditorByIndex = function(index) {
-    const editors = document.querySelectorAll('[data-aa-quill-editor]')
+    const editors = document.querySelectorAll('[data-aa-quill-editor]');
 
-    return (index >= 0 && index < editors.length) ? editors[index]['_quill-editor'] : null
+    return (index >= 0 && index < editors.length) ? editors[index]['_quill-editor'] : null;
   }
 
   window.getQuillEditorByElementId = function(id) {
-    const editor = document.querySelector(`[data-aa-quill-editor]#${id}`)
+    const editor = document.querySelector(`[data-aa-quill-editor]#${id}`);
 
-    return editor ? editor['_quill-editor'] : null
+    return editor ? editor['_quill-editor'] : null;
   }
 
   // --- events ------------------------------------------------------------------
-  $(document).ready(initQuillEditors)
-  $(document).on('has_many_add:after', '.has_many_container', initQuillEditors)
-  $(document).on('turbolinks:load', initQuillEditors)
-})()
+  $(document).ready(initQuillEditors);
+  $(document).on('has_many_add:after', '.has_many_container', initQuillEditors);
+  $(document).on('turbolinks:load', initQuillEditors);
+})();