diff --git a/Makefile b/Makefile index 7eb4207..1a747bd 100644 --- a/Makefile +++ b/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: diff --git a/app/assets/javascripts/activeadmin/quill_editor_input.js b/app/assets/javascripts/activeadmin/quill_editor_input.js index db89dee..db5271b 100644 --- a/app/assets/javascripts/activeadmin/quill_editor_input.js +++ b/app/assets/javascripts/activeadmin/quill_editor_input.js @@ -1,11 +1,11 @@ -/* 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' }], @@ -13,59 +13,65 @@ [{ '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']) }) - return list + editors.forEach(function(editor) { list.push(editor['_quill-editor']) }); + + 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); +})();