activeadmin_quill_editor 0.2.0 → 1.0.0

data/app/assets/javascripts/activeadmin/quill_editor_input.js

@@ -1,45 +1,91 @@
-window.onload = function() {
-  initQuillEditors();
-}
-
-$(document).on('has_many_add:after', function() {
-  initQuillEditors();
-});
-
-var initQuillEditors = function() {
-  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'
-  };
-
-  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;
-      editors[i]['_quill-editor'] = new Quill(content, options);
-      editors[i].classList += ' quill-editor--active';
+(function () {
+  'use strict'
+
+  // --- functions ---------------------------------------------------------------
+  function initQuillEditors() {
+    let default_theme = 'snow'
+    let default_toolbar = [
+      ['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 = {}
+
+    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')
+      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
+
+        // 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
+          }
+          let 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'
+      }
+    }
+
+    let 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"]')
+          if (editors[i]['_quill-editor'].editor.isBlank()) {
+            input.value = ''
+          } else {
+            input.value = editors[i]['_quill-editor'].root.innerHTML
+          }
+        }
+      };
     }
   }
 
-  var formtastic = document.querySelector('form.formtastic');
-  if(formtastic) {
-    formtastic.onsubmit = function() {
-      for(var i = 0; i < editors.length; i++) {
-        var input = editors[i].querySelector('input[type="hidden"]');
-        input.value = editors[i]['_quill-editor'].root.innerHTML;
+  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(initQuillEditors)
+  $(document).on('has_many_add:after', '.has_many_container', initQuillEditors)
+  $(document).on('turbolinks:load', initQuillEditors)
+})()

data/app/assets/stylesheets/activeadmin/_quill_editor_input.scss

@@ -0,0 +1,56 @@
+// reset internal elements
+.ql-editor * {
+  margin: initial;
+  padding: initial;
+  text-align: initial;
+}
+
+body.active_admin [data-aa-quill-editor] {
+  display: inline-block;
+  width: calc(80% - 2px);
+
+  button {
+    text-shadow: none;
+    box-shadow: none;
+
+    &:hover {
+      background-image: none;
+      background-color: transparent;
+    }
+  }
+
+  .ql-container {
+    border: 1px solid #c9d0d6;
+    border-radius: 0 0 3px 3px;
+  }
+
+  .ql-editor {
+    background-color: #fff;
+    max-height: 300px;
+    min-height: 150px;
+    padding: 10px;
+    word-break: break-all;
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    p {
+      margin-bottom: 1em;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ul, ol {
+      margin: 0 1.5em 1.5em 0;
+      padding-left: 1.5em;
+    }
+  }
+
+  .ql-toolbar {
+    border: 1px solid #c9d0d6;
+    border-radius: 3px 3px 0 0;
+  }
+}

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

@@ -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);
+  }
+}

data/app/assets/stylesheets/activeadmin/quill_editor/quill.bubble.css

@@ -1,5 +1,5 @@
 /*!
- * Quill Editor v1.3.6
+ * Quill Editor v1.3.7
  * https://quilljs.com/
  * Copyright (c) 2014, Jason Chen
  * Copyright (c) 2013, salesforce.com

data/app/assets/stylesheets/activeadmin/quill_editor/quill.core.css

@@ -1,5 +1,5 @@
 /*!
- * Quill Editor v1.3.6
+ * Quill Editor v1.3.7
  * https://quilljs.com/
  * Copyright (c) 2014, Jason Chen
  * Copyright (c) 2013, salesforce.com

data/app/assets/stylesheets/activeadmin/quill_editor/quill.snow.css

@@ -1,5 +1,5 @@
 /*!
- * Quill Editor v1.3.6
+ * Quill Editor v1.3.7
  * https://quilljs.com/
  * Copyright (c) 2014, Jason Chen
  * Copyright (c) 2013, salesforce.com

data/lib/activeadmin/quill_editor/version.rb

@@ -2,6 +2,7 @@
 
 module ActiveAdmin
   module QuillEditor
-    VERSION = '0.2.0'
+    VERSION = '1.0.0'
+    QUILL_VERSION = '1.3.7'
   end
 end

data/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

metadata

@@ -1,47 +1,59 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_quill_editor
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Mattia Roccoberton
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2019-06-15 00:00:00.000000000 Z
+date: 2022-04-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.0'
+        version: '2.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.0'
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: appraisal
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.4'
 description: An Active Admin plugin to use Quill Rich Text Editor
 email: mat@blocknot.es
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- ".gitignore"
-- ".rubocop.yml"
-- Gemfile
 - LICENSE.txt
 - README.md
 - Rakefile
-- activeadmin_quill_editor.gemspec
+- app/assets/javascripts/activeadmin/quill.imageUploader.min.js
 - app/assets/javascripts/activeadmin/quill_editor/quill.core.js
 - app/assets/javascripts/activeadmin/quill_editor/quill.js
 - app/assets/javascripts/activeadmin/quill_editor/quill.min.js
 - app/assets/javascripts/activeadmin/quill_editor_input.js
-- app/assets/stylesheets/activeadmin/_quill_editor_input.sass
+- app/assets/stylesheets/activeadmin/_quill_editor_input.scss
+- app/assets/stylesheets/activeadmin/quill.imageUploader.min.css
 - app/assets/stylesheets/activeadmin/quill_editor/quill.bubble.css
 - app/assets/stylesheets/activeadmin/quill_editor/quill.core.css
 - app/assets/stylesheets/activeadmin/quill_editor/quill.snow.css
@@ -50,12 +62,15 @@ files:
 - lib/activeadmin/quill_editor/version.rb
 - lib/activeadmin_quill_editor.rb
 - lib/formtastic/inputs/quill_editor_input.rb
-- screenshot.jpg
 homepage: https://github.com/blocknotes/activeadmin_quill_editor
 licenses:
 - MIT
-metadata: {}
-post_install_message: 
+metadata:
+  homepage_uri: https://github.com/blocknotes/activeadmin_quill_editor
+  changelog_uri: https://github.com/blocknotes/activeadmin_quill_editor/blob/master/CHANGELOG.md
+  source_code_uri: https://github.com/blocknotes/activeadmin_quill_editor
+  rubygems_mfa_required: 'true'
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -63,15 +78,15 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.6.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.2
-signing_key: 
+rubygems_version: 3.1.6
+signing_key:
 specification_version: 4
 summary: Quill Editor for ActiveAdmin
 test_files: []

data/.gitignore

@@ -1,3 +0,0 @@
-_misc/
-
-*.orig

data/.rubocop.yml

@@ -1,73 +0,0 @@
-require:
-  - rubocop-rspec
-
-Rails:
-  Enabled: true
-
-AllCops:
-  TargetRubyVersion: 2.3.8
-  TargetRailsVersion: 5.2
-  Exclude:
-    - db/schema.rb
-    - bin/*
-    - node_modules/**/*
-    # Temporary files
-    - tmp/**/*
-
-Rails/InverseOf:
-  Enabled: false
-
-Style/Documentation:
-  Enabled: false
-
-Metrics/ClassLength:
-  # Default value is 100
-  Max: 150
-
-Metrics/LineLength:
-  # Default is 80
-  Max: 120
-
-Metrics/ModuleLength:
-  # Default is 100
-  Max: 150
-
-Metrics/ParameterLists:
-  # Default is 5
-  Max: 6
-
-RSpec/ExampleLength:
-  # Default is 10
-  Max: 20
-
-Style/FrozenStringLiteralComment:
-  # Deface DOES edit strings in place
-  Exclude:
-    - 'app/overrides/**/*'
-
-RSpec/MultipleExpectations:
-  # Default is 3
-  Max: 5
-
-RSpec/NestedGroups:
-  # Default is 3
-  Max: 6
-
-Metrics/AbcSize:
-  Max: 25
-
-Metrics/BlockLength:
-  # This value double the rubocop default
-  Max: 50
-
-Metrics/CyclomaticComplexity:
-  # This value double the rubocop default
-  Max: 12
-
-Metrics/MethodLength:
-  # This value double the rubocop default
-  Max: 20
-
-Metrics/PerceivedComplexity:
-  # Default is 7
-  Max: 10

data/Gemfile

@@ -1,3 +0,0 @@
-source 'https://rubygems.org'
-
-gemspec

data/activeadmin_quill_editor.gemspec

@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-lib = File.expand_path('lib', __dir__)
-$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
-require 'activeadmin/quill_editor/version'
-
-Gem::Specification.new do |spec|
-  spec.name          = 'activeadmin_quill_editor'
-  spec.version       = ActiveAdmin::QuillEditor::VERSION
-  spec.summary       = 'Quill Editor for ActiveAdmin'
-  spec.description   = 'An Active Admin plugin to use Quill Rich Text Editor'
-  spec.license       = 'MIT'
-  spec.authors       = ['Mattia Roccoberton']
-  spec.email         = 'mat@blocknot.es'
-  spec.homepage      = 'https://github.com/blocknotes/activeadmin_quill_editor'
-
-  spec.files         = `git ls-files -z`.split("\x0")
-  spec.require_paths = ['lib']
-
-  spec.add_runtime_dependency 'activeadmin', '>= 1.0'
-end

data/app/assets/stylesheets/activeadmin/_quill_editor_input.sass

@@ -1,24 +0,0 @@
-@import 'activeadmin/quill_editor/quill.snow'
-
-body.active_admin form .quill-editor
-  display: inline-block
-  width: calc(80% - 22px)
-  .ql-editor
-    background-color: #fff
-    max-height: 300px
-    min-height: 150px
-    padding: 10px
-    // reset internal elements
-    *
-      margin: initial
-      padding: initial
-      text-align: initial
-    p
-      margin-bottom: 1em
-    ol
-      list-style-type: decimal
-    ul
-      list-style-type: disc
-    ul, ol
-      margin: 0 1.5em 1.5em 0
-      padding-left: 1.5em