Merge pull request #63 from blocknotes/chore/internal-improvements

Update Quill imageUploader plugin

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.imageUploader.js

@@ -1,198 +1,362 @@
-import LoadingImage from "./blots/image.js";
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-class ImageUploader {
+"use strict";
-    constructor(quill, options) {
+__webpack_require__.r(__webpack_exports__);
-        this.quill = quill;
+/* harmony import */ var _blots_image_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
-        this.options = options;
+/* harmony import */ var _quill_imageUploader_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
-        this.range = null;             
+/* harmony import */ var _quill_imageUploader_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_quill_imageUploader_css__WEBPACK_IMPORTED_MODULE_1__);
-        this.placeholderDelta = null; 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-        if (typeof this.options.upload !== "function")
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-            console.warn(
-                "[Missing config] upload function that returns a promise is required"
-            );
 
-        var toolbar = this.quill.getModule("toolbar");
-        if (toolbar) {
-            toolbar.addHandler("image", this.selectLocalImage.bind(this));
-        }
 
-        this.handleDrop = this.handleDrop.bind(this);
-        this.handlePaste = this.handlePaste.bind(this);
 
-        this.quill.root.addEventListener("drop", this.handleDrop, false);
+
-        this.quill.root.addEventListener("paste", this.handlePaste, false);
+var ImageUploader = function () {
+  function ImageUploader(quill, options) {
+    _classCallCheck(this, ImageUploader);
+
+    this.quill = quill;
+    this.options = options;
+    this.range = null;
+
+    if (typeof this.options.upload !== "function") {
+      console.warn("[Missing config] upload function that returns a promise is required");
     }
 
-    selectLocalImage() {
+    if (this.options.loadingClass) {
-        this.quill.focus();
+      _blots_image_js__WEBPACK_IMPORTED_MODULE_0__["default"].className = this.options.loadingClass;
+    }
+
+    var toolbar = this.quill.getModule("toolbar");
+    toolbar.addHandler("image", this.selectLocalImage.bind(this));
+
+    this.handleDrop = this.handleDrop.bind(this);
+    this.handlePaste = this.handlePaste.bind(this);
+
+    this.quill.root.addEventListener("drop", this.handleDrop, false);
+    this.quill.root.addEventListener("paste", this.handlePaste, false);
+  }
+
+  _createClass(ImageUploader, [{
+    key: "selectLocalImage",
+    value: function selectLocalImage() {
+      var _this = this;
+
+      this.range = this.quill.getSelection();
+      this.fileHolder = document.createElement("input");
+      this.fileHolder.setAttribute("type", "file");
+      this.fileHolder.setAttribute("accept", "image/*");
+      this.fileHolder.setAttribute("style", "visibility:hidden");
+
+      this.fileHolder.onchange = this.fileChanged.bind(this);
+
+      document.body.appendChild(this.fileHolder);
+
+      this.fileHolder.click();
+
+      window.requestAnimationFrame(function () {
+        document.body.removeChild(_this.fileHolder);
+      });
+    }
+  }, {
+    key: "handleDrop",
+    value: function handleDrop(evt) {
+      var _this2 = this;
+
+      evt.stopPropagation();
+      evt.preventDefault();
+      if (evt.dataTransfer && evt.dataTransfer.files && evt.dataTransfer.files.length) {
+        if (document.caretRangeFromPoint) {
+          var selection = document.getSelection();
+          var range = document.caretRangeFromPoint(evt.clientX, evt.clientY);
+          if (selection && range) {
+            selection.setBaseAndExtent(range.startContainer, range.startOffset, range.startContainer, range.startOffset);
+          }
+        } else {
+          var _selection = document.getSelection();
+          var _range = document.caretPositionFromPoint(evt.clientX, evt.clientY);
+          if (_selection && _range) {
+            _selection.setBaseAndExtent(_range.offsetNode, _range.offset, _range.offsetNode, _range.offset);
+          }
+        }
+
         this.range = this.quill.getSelection();
-        this.fileHolder = document.createElement("input");
+        var file = evt.dataTransfer.files[0];
-        this.fileHolder.setAttribute("type", "file");
-        this.fileHolder.setAttribute("accept", "image/*");
-        this.fileHolder.setAttribute("style", "visibility:hidden");
 
-        this.fileHolder.onchange = this.fileChanged.bind(this);
+        setTimeout(function () {
-
+          _this2.range = _this2.quill.getSelection();
-        document.body.appendChild(this.fileHolder);
+          _this2.readAndUploadFile(file);
-
-        this.fileHolder.click();
-
-        window.requestAnimationFrame(() => {
-            document.body.removeChild(this.fileHolder);
-        });
-    }
-
-    handleDrop(evt) {
-        if (
-            evt.dataTransfer &&
-            evt.dataTransfer.files &&
-            evt.dataTransfer.files.length
-        ) {
-            evt.stopPropagation();
-            evt.preventDefault();
-            if (document.caretRangeFromPoint) {
-                const selection = document.getSelection();
-                const range = document.caretRangeFromPoint(evt.clientX, evt.clientY);
-                if (selection && range) {
-                    selection.setBaseAndExtent(
-                        range.startContainer,
-                        range.startOffset,
-                        range.startContainer,
-                        range.startOffset
-                    );
-                }
-            } else {
-                const selection = document.getSelection();
-                const range = document.caretPositionFromPoint(evt.clientX, evt.clientY);
-                if (selection && range) {
-                    selection.setBaseAndExtent(
-                        range.offsetNode,
-                        range.offset,
-                        range.offsetNode,
-                        range.offset
-                    );
-                }
-            }
-
-            this.quill.focus();
-            this.range = this.quill.getSelection();
-            let file = evt.dataTransfer.files[0];
-
-            setTimeout(() => {
-                this.quill.focus();
-                this.range = this.quill.getSelection();
-                this.readAndUploadFile(file);
-            }, 0);
-        }
-    }
-
-    handlePaste(evt) {
-        let clipboard = evt.clipboardData || window.clipboardData;
-
-        // IE 11 is .files other browsers are .items
-        if (clipboard && (clipboard.items || clipboard.files)) {
-            let items = clipboard.items || clipboard.files;
-            const IMAGE_MIME_REGEX = /^image\/(jpe?g|gif|png|svg|webp)$/i;
-
-            for (let i = 0; i < items.length; i++) {
-                if (IMAGE_MIME_REGEX.test(items[i].type)) {
-                    let file = items[i].getAsFile ? items[i].getAsFile() : items[i];
-
-                    if (file) {
-                        this.quill.focus();
-                        this.range = this.quill.getSelection();
-                        evt.preventDefault();
-                        setTimeout(() => {
-                            this.quill.focus();
-                            this.range = this.quill.getSelection();
-                            this.readAndUploadFile(file);
-                        }, 0);
-                    }
-                }
-            }
-        }
-    }
-
-    readAndUploadFile(file) {
-        let isUploadReject = false;
-
-        const fileReader = new FileReader();
-
-        fileReader.addEventListener(
-            "load",
-            () => {
-                if (!isUploadReject) {
-                    let base64ImageSrc = fileReader.result;
-                    this.insertBase64Image(base64ImageSrc);
-                }
-            },
-            false
-        );
-
-        if (file) {
-            fileReader.readAsDataURL(file);
-        }
-
-        this.options.upload(file).then(
-            (imageUrl) => {
-                this.insertToEditor(imageUrl);
-            },
-            (error) => {
-                isUploadReject = true;
-                this.removeBase64Image();
-                console.warn(error);
-            }
-        );
-    }
-
-    fileChanged() {
-        const file = this.fileHolder.files[0];
-        this.readAndUploadFile(file);
-    }
-
-    insertBase64Image(url) {
-        const range = this.range;
-                
-        this.placeholderDelta = this.quill.insertEmbed(
-            range.index,
-            LoadingImage.blotName,
-            `${url}`,
-            "user"
-        );
-    }
-
-    insertToEditor(url) {
-        const range = this.range;        
-
-        const lengthToDelete = this.calculatePlaceholderInsertLength();        
-        
-        // Delete the placeholder image
-        this.quill.deleteText(range.index, lengthToDelete, "user");
-        // Insert the server saved image
-        this.quill.insertEmbed(range.index, "image", `${url}`, "user");
-
-        range.index++;
-        this.quill.setSelection(range, "user");
-    }
-
-    // The length of the insert delta from insertBase64Image can vary depending on what part of the line the insert occurs
-    calculatePlaceholderInsertLength() {
-        return this.placeholderDelta.ops.reduce((accumulator, deltaOperation) => {            
-            if (deltaOperation.hasOwnProperty('insert'))
-                accumulator++;
-
-            return accumulator;
         }, 0);
+      }
     }
+  }, {
+    key: "handlePaste",
+    value: function handlePaste(evt) {
+      var _this3 = this;
 
-    removeBase64Image() {        
+      var clipboard = evt.clipboardData || window.clipboardData;
-        const range = this.range;
-        const lengthToDelete = this.calculatePlaceholderInsertLength();
 
-        this.quill.deleteText(range.index, lengthToDelete, "user");
+      // IE 11 is .files other browsers are .items
+      if (clipboard && (clipboard.items || clipboard.files)) {
+        var items = clipboard.items || clipboard.files;
+        var IMAGE_MIME_REGEX = /^image\/(jpe?g|gif|png|svg|webp)$/i;
+
+        for (var i = 0; i < items.length; i++) {
+          if (IMAGE_MIME_REGEX.test(items[i].type)) {
+            (function () {
+              var file = items[i].getAsFile ? items[i].getAsFile() : items[i];
+
+              if (file) {
+                _this3.range = _this3.quill.getSelection();
+                evt.preventDefault();
+                setTimeout(function () {
+                  _this3.range = _this3.quill.getSelection();
+                  _this3.readAndUploadFile(file);
+                }, 0);
+              }
+            })();
+          }
+        }
+      }
     }
-}
+  }, {
+    key: "readAndUploadFile",
+    value: function readAndUploadFile(file) {
+      var _this4 = this;
+
+      var isUploadReject = false;
+
+      var fileReader = new FileReader();
+
+      fileReader.addEventListener("load", function () {
+        if (!isUploadReject) {
+          var base64ImageSrc = fileReader.result;
+          _this4.insertBase64Image(base64ImageSrc);
+        }
+      }, false);
+
+      if (file) {
+        fileReader.readAsDataURL(file);
+      }
+
+      this.options.upload(file).then(function (imageUrl) {
+        _this4.insertToEditor(imageUrl);
+      }, function (error) {
+        isUploadReject = true;
+        _this4.removeBase64Image();
+        console.warn(error);
+      });
+    }
+  }, {
+    key: "fileChanged",
+    value: function fileChanged() {
+      var file = this.fileHolder.files[0];
+      this.readAndUploadFile(file);
+    }
+  }, {
+    key: "insertBase64Image",
+    value: function insertBase64Image(url) {
+      var range = this.range;
+
+      this.quill.insertEmbed(range.index, _blots_image_js__WEBPACK_IMPORTED_MODULE_0__["default"].blotName, "" + url, "user");
+    }
+  }, {
+    key: "insertToEditor",
+    value: function insertToEditor(url) {
+      var range = this.range;
+      // Delete the placeholder image
+
+      this.quill.deleteText(range.index, 3, "user");
+      // Insert the server saved image
+      this.quill.insertEmbed(range.index, "image", "" + url, "user");
+
+      range.index++;
+      this.quill.setSelection(range, "user");
+    }
+  }, {
+    key: "removeBase64Image",
+    value: function removeBase64Image() {
+      var range = this.range;
+
+      this.quill.deleteText(range.index, 3, "user");
+    }
+  }]);
+
+  return ImageUploader;
+}();
 
 window.ImageUploader = ImageUploader;
-export default ImageUploader;
+/* harmony default export */ __webpack_exports__["default"] = (ImageUploader);
+
+/***/ }),
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var quill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var quill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(quill__WEBPACK_IMPORTED_MODULE_0__);
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+
+
+var InlineBlot = quill__WEBPACK_IMPORTED_MODULE_0___default.a.import('blots/block');
+
+var LoadingImage = function (_InlineBlot) {
+  _inherits(LoadingImage, _InlineBlot);
+
+  function LoadingImage() {
+    _classCallCheck(this, LoadingImage);
+
+    return _possibleConstructorReturn(this, (LoadingImage.__proto__ || Object.getPrototypeOf(LoadingImage)).apply(this, arguments));
+  }
+
+  _createClass(LoadingImage, [{
+    key: 'deleteAt',
+    value: function deleteAt(index, length) {
+      _get(LoadingImage.prototype.__proto__ || Object.getPrototypeOf(LoadingImage.prototype), 'deleteAt', this).call(this, index, length);
+      this.cache = {};
+    }
+  }], [{
+    key: 'create',
+    value: function create(src) {
+      var node = _get(LoadingImage.__proto__ || Object.getPrototypeOf(LoadingImage), 'create', this).call(this, src);
+      if (src === true) return node;
+
+      var image = document.createElement('img');
+      image.setAttribute('src', src);
+      node.appendChild(image);
+      return node;
+    }
+  }, {
+    key: 'value',
+    value: function value(domNode) {
+      var _domNode$dataset = domNode.dataset,
+          src = _domNode$dataset.src,
+          custom = _domNode$dataset.custom;
+
+      return { src: src, custom: custom };
+    }
+  }]);
+
+  return LoadingImage;
+}(InlineBlot);
+
+LoadingImage.blotName = 'imageBlot';
+LoadingImage.className = 'quill-image-uploading';
+LoadingImage.tagName = 'span';
+quill__WEBPACK_IMPORTED_MODULE_0___default.a.register({ 'formats/imageBlot': LoadingImage });
+
+/* harmony default export */ __webpack_exports__["default"] = (LoadingImage);
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = Quill;
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
+/***/ })
+/******/ ]);

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() {
+  const initQuillEditors = () => {
-    let default_theme = 'snow'
+    const defaultTheme = 'snow';
-    let default_toolbar = [
+    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]')
+    const editors = document.querySelectorAll('[data-aa-quill-editor]');
-    let registered_plugins = {}
+    const registeredPlugins = {};
 
     for (let i = 0; i < editors.length; i++) {
-      let content = editors[i].querySelector('[data-aa-quill-content]')
+      const content = editors[i].querySelector('[data-aa-quill-content]');
-      let isActive = editors[i].classList.contains('quill-editor--active')
+      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')) : {}
+        const 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.theme) options.theme = defaultTheme;
-        if (!options.modules.toolbar) options.modules.toolbar = default_toolbar
+        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')) : {}
+        const pluginOptions = 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) {
+        if (pluginOptions.image_uploader && pluginOptions.image_uploader.server_url) {
-            Quill.register('modules/imageUploader', ImageUploader)
+          if (!registeredPlugins.image_uploader) {
-            registered_plugins.image_uploader = true
+            Quill.register('modules/imageUploader', ImageUploader);
+            registeredPlugins.image_uploader = true;
           }
-          let opts = plugin_options.image_uploader
+          const opts = pluginOptions.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';
       }
     }
 
-    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()
+          const formData = new FormData();
-          formData.append(field_name || 'file_upload', file)
 
+          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')
+              reject('Upload failed');
-              console.error('Error: ', error)
+              console.error('Error: ', error);
             })
         })
       }
@@ -90,27 +96,28 @@
 
   // --- public functions --------------------------------------------------------
   window.getQuillEditors = function() {
-    const editors = document.querySelectorAll('[data-aa-quill-editor]')
+    const editors = document.querySelectorAll('[data-aa-quill-editor]');
-    let list = []
+    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).ready(initQuillEditors);
-  $(document).on('has_many_add:after', '.has_many_container', initQuillEditors)
+  $(document).on('has_many_add:after', '.has_many_container', initQuillEditors);
-  $(document).on('turbolinks:load', initQuillEditors)
+  $(document).on('turbolinks:load', initQuillEditors);
-})()
+})();

app/assets/stylesheets/activeadmin/quill.imageUploader.css

@@ -1,33 +0,0 @@
-.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);
-  }
-}

app/assets/stylesheets/activeadmin/quill.imageUploader.min.css

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

extra/development.md

@@ -42,11 +42,9 @@ wget "https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.css" -O "app/assets/s
 wget "https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js" -O "app/assets/javascripts/activeadmin/quill_editor/quill.js"
 wget "https://cdn.jsdelivr.net/npm/quill@2/dist/quill.core.js" -O "app/assets/javascripts/activeadmin/quill_editor/quill.core.js"
 
-wget "https://github.com/NoelOConnell/quill-image-uploader/raw/refs/heads/master/src/quill.imageUploader.js" -O "app/assets/javascripts/activeadmin/quill.imageUploader.js"
+wget "https://github.com/valentsea/quill2-image-uploader/raw/refs/heads/master/dist/quill.imageUploader.min.js" -O "app/assets/javascripts/activeadmin/quill.imageUploader.min.js"
-wget "https://github.com/NoelOConnell/quill-image-uploader/raw/refs/heads/master/dist/quill.imageUploader.min.js" -O "app/assets/javascripts/activeadmin/quill.imageUploader.min.js"
 
-wget "https://github.com/NoelOConnell/quill-image-uploader/raw/refs/heads/master/src/quill.imageUploader.css" -O "app/assets/stylesheets/activeadmin/quill.imageUploader.css"
+wget "https://github.com/valentsea/quill2-image-uploader/raw/refs/heads/master/dist/quill.imageUploader.min.css" -O "app/assets/stylesheets/activeadmin/quill.imageUploader.min.css"
-wget "https://github.com/NoelOConnell/quill-image-uploader/raw/refs/heads/master/dist/quill.imageUploader.min.css" -O "app/assets/stylesheets/activeadmin/quill.imageUploader.min.css"
 ```
 
 - Check the changes, most of them should be for updated files plus some new / removed file

spec/dummy/app/admin/posts.rb

@@ -3,6 +3,12 @@
 ActiveAdmin.register Post do
   permit_params :author_id, :title, :summary, :description, :category, :dt, :position, :published, tag_ids: []
 
+  member_action :upload, method: [:post] do
+    result = { success: resource.images.attach(params[:file_upload]) }
+    result[:url] = url_for(resource.images.last) if result[:success]
+    render json: result
+  end
+
   index do
     selectable_column
     id_column
@@ -44,7 +50,12 @@ ActiveAdmin.register Post do
       f.input :author
       f.input :title
       f.input :summary, as: :quill_editor, input_html: { data: { options: { modules: { toolbar: toolbar } } } }
-      f.input :description, as: :quill_editor # using default options
+      if object.new_record?
+        f.input :description, as: :quill_editor # using default options
+      else
+        plugin_opts = { image_uploader: { server_url: upload_admin_post_path(object.id), field_name: 'file_upload' } }
+        f.input :description, as: :quill_editor, input_html: { data: { plugins: plugin_opts } }
+      end
       f.input :category
       f.input :dt
       f.input :position

spec/dummy/app/assets/javascripts/active_admin.js

@@ -2,3 +2,5 @@
 
 //= require activeadmin/quill_editor/quill
 //= require activeadmin/quill_editor_input
+
+//= require activeadmin/quill.imageUploader.min

spec/dummy/app/assets/stylesheets/active_admin.scss

@@ -14,6 +14,8 @@
 @import 'activeadmin/quill_editor/quill.snow';
 @import 'activeadmin/quill_editor_input';
 
+@import 'activeadmin/quill.imageUploader.min';
+
 // Overriding any non-variable SASS must be done after the fact.
 // For example, to change the default status-tag color:
 //

spec/dummy/db/migrate/20170806125915_create_active_storage_tables.active_storage.rb

@@ -1,27 +0,0 @@
-# This migration comes from active_storage (originally 20170806125915)
-class CreateActiveStorageTables < ActiveRecord::Migration[5.2]
-  def change
-    create_table :active_storage_blobs do |t|
-      t.string   :key,        null: false
-      t.string   :filename,   null: false
-      t.string   :content_type
-      t.text     :metadata
-      t.bigint   :byte_size,  null: false
-      t.string   :checksum,   null: false
-      t.datetime :created_at, null: false
-
-      t.index [ :key ], unique: true
-    end
-
-    create_table :active_storage_attachments do |t|
-      t.string     :name,     null: false
-      t.references :record,   null: false, polymorphic: true, index: false
-      t.references :blob,     null: false
-
-      t.datetime :created_at, null: false
-
-      t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
-      t.foreign_key :active_storage_blobs, column: :blob_id
-    end
-  end
-end

spec/dummy/db/migrate/20180101010101_create_active_admin_comments.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class CreateActiveAdminComments < ActiveRecord::Migration[6.0]
   def self.up
     create_table :active_admin_comments do |t|

spec/dummy/db/migrate/20180101010102_create_active_storage_tables.active_storage.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+# This migration comes from active_storage (originally 20170806125915)
+
+class CreateActiveStorageTables < ActiveRecord::Migration[6.0]
+  def change
+    # Use Active Record's configured type for primary and foreign keys
+    primary_key_type, foreign_key_type = primary_and_foreign_key_types
+
+    create_table :active_storage_blobs, id: primary_key_type do |t|
+      t.string   :key,          null: false
+      t.string   :filename,     null: false
+      t.string   :content_type
+      t.text     :metadata
+      t.string   :service_name, null: false
+      t.bigint   :byte_size,    null: false
+      t.string   :checksum
+
+      if connection.supports_datetime_with_precision?
+        t.datetime :created_at, precision: 6, null: false
+      else
+        t.datetime :created_at, null: false
+      end
+
+      t.index [ :key ], unique: true
+    end
+
+    create_table :active_storage_attachments, id: primary_key_type do |t|
+      t.string     :name,     null: false
+      t.references :record,   null: false, polymorphic: true, index: false, type: foreign_key_type
+      t.references :blob,     null: false, type: foreign_key_type
+
+      if connection.supports_datetime_with_precision?
+        t.datetime :created_at, precision: 6, null: false
+      else
+        t.datetime :created_at, null: false
+      end
+
+      t.index [ :record_type, :record_id, :name, :blob_id ], name: :index_active_storage_attachments_uniqueness, unique: true
+      t.foreign_key :active_storage_blobs, column: :blob_id
+    end
+
+    create_table :active_storage_variant_records, id: primary_key_type do |t|
+      t.belongs_to :blob, null: false, index: false, type: foreign_key_type
+      t.string :variation_digest, null: false
+
+      t.index [ :blob_id, :variation_digest ], name: :index_active_storage_variant_records_uniqueness, unique: true
+      t.foreign_key :active_storage_blobs, column: :blob_id
+    end
+  end
+
+  private
+    def primary_and_foreign_key_types
+      config = Rails.configuration.generators
+      setting = config.options[config.orm][:primary_key_type]
+      primary_key_type = setting || :primary_key
+      foreign_key_type = setting || :bigint
+      [ primary_key_type, foreign_key_type ]
+    end
+end

spec/dummy/db/migrate/20180607053251_create_authors.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class CreateAuthors < ActiveRecord::Migration[5.2]
+class CreateAuthors < ActiveRecord::Migration[6.0]
   def change
     create_table :authors do |t|
       t.string :name

spec/dummy/db/migrate/20180607053254_create_profiles.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class CreateProfiles < ActiveRecord::Migration[5.2]
+class CreateProfiles < ActiveRecord::Migration[6.0]
   def change
     create_table :profiles do |t|
       t.text :description

spec/dummy/db/migrate/20180607053255_create_tags.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class CreateTags < ActiveRecord::Migration[5.2]
+class CreateTags < ActiveRecord::Migration[6.0]
   def change
     create_table :tags do |t|
       t.string :name

spec/dummy/db/migrate/20180607053257_create_post_tags.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class CreatePostTags < ActiveRecord::Migration[5.2]
+class CreatePostTags < ActiveRecord::Migration[6.0]
   def change
     create_table :post_tags do |t|
       t.belongs_to :post, foreign_key: true

spec/dummy/db/migrate/20180607053739_create_posts.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class CreatePosts < ActiveRecord::Migration[5.2]
+class CreatePosts < ActiveRecord::Migration[6.0]
   def change
     create_table :posts do |t|
       t.string :title

spec/dummy/db/schema.rb

@@ -11,16 +11,15 @@
 # It's strongly recommended that you check this file into your version control system.
 
 ActiveRecord::Schema.define(version: 2018_06_07_053739) do
-
   create_table "active_admin_comments", force: :cascade do |t|
     t.string "namespace"
     t.text "body"
     t.string "resource_type"
-    t.bigint "resource_id"
+    t.integer "resource_id"
     t.string "author_type"
-    t.bigint "author_id"
+    t.integer "author_id"
-    t.datetime "created_at", precision: 6, null: false
+    t.datetime "created_at", null: false
-    t.datetime "updated_at", precision: 6, null: false
+    t.datetime "updated_at", null: false
     t.index ["author_type", "author_id"], name: "index_active_admin_comments_on_author_type_and_author_id"
     t.index ["namespace"], name: "index_active_admin_comments_on_namespace"
     t.index ["resource_type", "resource_id"], name: "index_active_admin_comments_on_resource_type_and_resource_id"
@@ -29,8 +28,8 @@ ActiveRecord::Schema.define(version: 2018_06_07_053739) do
   create_table "active_storage_attachments", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false
-    t.integer "record_id", null: false
+    t.bigint "record_id", null: false
-    t.integer "blob_id", null: false
+    t.bigint "blob_id", null: false
     t.datetime "created_at", null: false
     t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id"
     t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness", unique: true
@@ -41,25 +40,32 @@ ActiveRecord::Schema.define(version: 2018_06_07_053739) do
     t.string "filename", null: false
     t.string "content_type"
     t.text "metadata"
+    t.string "service_name", null: false
     t.bigint "byte_size", null: false
-    t.string "checksum", null: false
+    t.string "checksum"
     t.datetime "created_at", null: false
     t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true
   end
 
+  create_table "active_storage_variant_records", force: :cascade do |t|
+    t.bigint "blob_id", null: false
+    t.string "variation_digest", null: false
+    t.index ["blob_id", "variation_digest"], name: "index_active_storage_variant_records_uniqueness", unique: true
+  end
+
   create_table "authors", force: :cascade do |t|
     t.string "name"
     t.integer "age"
     t.string "email"
-    t.datetime "created_at", null: false
+    t.datetime "created_at", precision: nil, null: false
-    t.datetime "updated_at", null: false
+    t.datetime "updated_at", precision: nil, null: false
   end
 
   create_table "post_tags", force: :cascade do |t|
     t.integer "post_id"
     t.integer "tag_id"
-    t.datetime "created_at", null: false
+    t.datetime "created_at", precision: nil, null: false
-    t.datetime "updated_at", null: false
+    t.datetime "updated_at", precision: nil, null: false
     t.index ["post_id"], name: "index_post_tags_on_post_id"
     t.index ["tag_id"], name: "index_post_tags_on_tag_id"
   end
@@ -70,29 +76,30 @@ ActiveRecord::Schema.define(version: 2018_06_07_053739) do
     t.text "description"
     t.integer "author_id"
     t.string "category"
-    t.datetime "dt"
+    t.datetime "dt", precision: nil
     t.float "position"
     t.boolean "published"
-    t.datetime "created_at", null: false
+    t.datetime "created_at", precision: nil, null: false
-    t.datetime "updated_at", null: false
+    t.datetime "updated_at", precision: nil, null: false
     t.index ["author_id"], name: "index_posts_on_author_id"
   end
 
   create_table "profiles", force: :cascade do |t|
     t.text "description"
     t.integer "author_id"
-    t.datetime "created_at", null: false
+    t.datetime "created_at", precision: nil, null: false
-    t.datetime "updated_at", null: false
+    t.datetime "updated_at", precision: nil, null: false
     t.index ["author_id"], name: "index_profiles_on_author_id"
   end
 
   create_table "tags", force: :cascade do |t|
     t.string "name"
-    t.datetime "created_at", null: false
+    t.datetime "created_at", precision: nil, null: false
-    t.datetime "updated_at", null: false
+    t.datetime "updated_at", precision: nil, null: false
   end
 
   add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
+  add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
   add_foreign_key "post_tags", "posts"
   add_foreign_key "post_tags", "tags"
   add_foreign_key "posts", "authors"