Bump to version 0.3.4

- Add test examples for bold and italic content
- Move some test examples
- Adjust RSpec options

.github/workflows/brakeman-analysis.yml

@@ -0,0 +1,44 @@
+# This workflow integrates Brakeman with GitHub's Code Scanning feature
+# Brakeman is a static analysis security vulnerability scanner for Ruby on Rails applications
+
+name: Brakeman Scan
+
+# This section configures the trigger for the workflow. Feel free to customize depending on your convention
+on:
+  push:
+    branches: [ "master", "main" ]
+  pull_request:
+    branches: [ "master", "main" ]
+
+jobs:
+  brakeman-scan:
+    name: Brakeman Scan
+    runs-on: ubuntu-latest
+    steps:
+    # Checkout the repository to the GitHub Actions runner
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    # Customize the ruby version depending on your needs
+    - name: Setup Ruby
+      uses: actions/setup-ruby@v1
+      with:
+        ruby-version: '2.7'
+
+    - name: Setup Brakeman
+      env:
+        BRAKEMAN_VERSION: '4.10' # SARIF support is provided in Brakeman version 4.10+
+      run: |
+        gem install brakeman --version $BRAKEMAN_VERSION
+
+    # Execute Brakeman CLI and generate a SARIF output with the security issues identified during the analysis
+    - name: Scan
+      continue-on-error: true
+      run: |
+        brakeman -f sarif -o output.sarif.json .
+
+    # Upload the SARIF file generated in the previous step
+    - name: Upload SARIF
+      uses: github/codeql-action/upload-sarif@v1
+      with:
+        sarif_file: output.sarif.json

.rspec

@@ -1,3 +1,2 @@
 --require rails_helper
 --format documentation
---profile

README.md

@@ -1,11 +1,14 @@
 # ActiveAdmin Quill Editor [![Gem Version](https://badge.fury.io/rb/activeadmin_quill_editor.svg)](https://badge.fury.io/rb/activeadmin_quill_editor) [![CircleCI](https://circleci.com/gh/blocknotes/activeadmin_quill_editor.svg?style=svg)](https://circleci.com/gh/blocknotes/activeadmin_quill_editor)
 
-An Active Admin plugin to use [Quill Rich Text Editor](https://github.com/quilljs/quill)
+An Active Admin plugin to use [Quill Rich Text Editor](https://github.com/quilljs/quill) in form fields.
 
 ![screenshot](screenshot.png)
 
 ## Install
-- After installing Active Admin, add to your Gemfile: `gem 'activeadmin_quill_editor'` (and execute *bundle*)
+After installing Active Admin, add to your Gemfile: `gem 'activeadmin_quill_editor'` (and execute *bundle*)
+
+If you installed Active Admin without Webpacker support (default for now):
+
 - Add at the end of your Active Admin styles (_app/assets/stylesheets/active_admin.scss_):
 ```scss
 @import 'activeadmin/quill_editor/quill.snow';
@@ -16,13 +19,23 @@ An Active Admin plugin to use [Quill Rich Text Editor](https://github.com/quillj
 //= require activeadmin/quill_editor/quill
 //= require activeadmin/quill_editor_input
 ```
-- Use the input with `as: :quill_editor` in Active Admin model conf
-
-Why 2 separated scripts? In this way you can include a different version of *quill editor* if you like.
 
 > **UPDATE FROM VERSION <= 2.0**: please add to your _app/assets/stylesheets/active_admin.scss_ the line `@import 'activeadmin/quill_editor/quill.snow';`
 
-## Options
+If you installed Active Admin with Webpacker support:
+
+- Execute in your project root:
+```sh
+yarn add blocknotes/activeadmin_quill_editor
+```
+- Add to your *app/javascript/packs/active_admin.js*:
+```js
+require('activeadmin_quill_editor')
+```
+
+## Usage
+In your Active Admin models, form configuration, set the text inputs with `as: :quill_editor` where needed.
+
 **data-options**: permits to set *quill editor* options directly - see [options list](https://quilljs.com/docs/configuration/)
 
 ## Examples
@@ -44,20 +57,43 @@ Why 2 separated scripts? In this way you can include a different version of *qui
 ### Toolbar buttons configuration
 
 ```ruby
-f.input :description, as: :quill_editor, input_html: {data: {options: {modules: {toolbar: [['bold', 'italic', 'underline'], ['link']]}, placeholder: 'Type something...', theme: 'snow'}}}
+f.input :description, as: :quill_editor, input_html: { data: { options: { modules: { toolbar: [['bold', 'italic', 'underline'], ['link']] }, placeholder: 'Type something...', theme: 'snow' } } }
 ```
 
-## Notes
+### ImageUploader plugin
-- Upload functions (Images, Documents, Files, etc.) are not implemented yet
+This plugin allows to upload images to the server (instead of storing them in *base64* by default), reference [here](https://github.com/NoelOConnell/quill-image-uploader).
+
+```ruby
+# Upload method (to be included in the admin entity configuration)
+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
+```
+
+```ruby
+# Form field
+unless object.new_record?
+  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
+```
+
+For the relevant files of the upload example see [here](examples/upload_plugin_using_activestorage/).
+Consider that this is just a basic example: images are uploaded as soon as they are attached to the
+ editor (regardless of the form submit), it shows the editor only for an existing record (because of
+the *upload_admin_post_path*) and it doesn't provide a way to remove images (just deleting them from
+the editor will not destroy them, you'll need to implement a purge logic for that).
 
 ## Do you like it? Star it!
-If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
+If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other [Active Admin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source).
 
-Take a look at [other Active Admin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source) that I made if you are curious.
+Or consider offering me a coffee, it's a small thing but it is greatly appreciated: [about me](https://www.blocknot.es/about-me).
 
 ## Contributors
 - [Mattia Roccoberton](http://blocknot.es): author
 - The good guys that opened issues and pull requests from time to time
 
 ## License
-- The gem is available as open-source under the terms of the [MIT](LICENSE.txt)
+The gem is available as open-source under the terms of the [MIT](LICENSE.txt).

Rakefile

@@ -5,7 +5,10 @@ require 'bundler/gem_tasks'
 begin
   require 'rspec/core/rake_task'
 
-  RSpec::Core::RakeTask.new(:spec)
+  RSpec::Core::RakeTask.new(:spec) do |t|
+    # t.ruby_opts = %w[-w]
+    t.rspec_opts = ['--color', '--format documentation']
+  end
 
   task default: :spec
 rescue LoadError

activeadmin_quill_editor.gemspec

@@ -19,13 +19,15 @@ Gem::Specification.new do |spec|
 
   spec.add_runtime_dependency 'activeadmin', '~> 2.0'
 
-  spec.add_development_dependency 'activestorage', '~> 6.0.3.2'
+  spec.add_development_dependency 'activestorage', '~> 6.0'
-  spec.add_development_dependency 'capybara', '~> 3.33.0'
+  spec.add_development_dependency 'capybara', '~> 3.33'
-  spec.add_development_dependency 'pry', '~> 0.13.1'
+  spec.add_development_dependency 'pry', '~> 0.13'
-  spec.add_development_dependency 'puma', '~> 4.3.5'
+  spec.add_development_dependency 'puma', '~> 4.3'
-  spec.add_development_dependency 'rspec_junit_formatter', '~> 0.4.1'
+  spec.add_development_dependency 'rspec_junit_formatter', '~> 0.4'
-  spec.add_development_dependency 'rspec-rails', '~> 4.0.1'
+  spec.add_development_dependency 'rspec-rails', '~> 4.0'
-  spec.add_development_dependency 'rubocop', '~> 0.90.0'
+  spec.add_development_dependency 'rubocop', '~> 0.90'
-  spec.add_development_dependency 'selenium-webdriver', '~> 3.142.7'
+  spec.add_development_dependency 'sassc', '~> 2.4'
-  spec.add_development_dependency 'sqlite3', '~> 1.4.2'
+  spec.add_development_dependency 'selenium-webdriver', '~> 3.142'
+  spec.add_development_dependency 'sprockets-rails', '~> 3.2'
+  spec.add_development_dependency 'sqlite3', '~> 1.4'
 end

app/assets/javascripts/activeadmin/quill_editor_input.js

@@ -1,45 +1,91 @@
-function initQuillEditors() {
+(function () {
-  var editors = document.querySelectorAll('.quill-editor');
+  'use strict'
-  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++) {
+  // --- functions ---------------------------------------------------------------
-    var content = editors[i].querySelector('.quill-editor-content');
+  function initQuillEditors() {
-    var isActive = editors[i].classList.contains('quill-editor--active');
+    let default_theme = 'snow'
-    if(content && !isActive) {
+    let default_toolbar = [
-      var options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : default_options;
+      ['bold', 'italic', 'underline'],
-      editors[i]['_quill-editor'] = new Quill(content, options);
+      ['link', 'blockquote', 'code-block'],
-      editors[i].classList += ' quill-editor--active';
+      [{ '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');
+  function setupImageUploader(server_url, field_name) {
-  if(formtastic) {
+    return {
-    formtastic.onsubmit = function() {
+      upload: file => {
-      for(var i = 0; i < editors.length; i++) {
+        return new Promise((resolve, reject) => {
-        var input = editors[i].querySelector('input[type="hidden"]');
+          const formData = new FormData()
-        input.value = editors[i]['_quill-editor'].root.innerHTML;
+          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)
+            })
+        })
       }
-    };
+    }
   }
-}
 
-$(document).ready( function() {
+  // --- events ------------------------------------------------------------------
-  initQuillEditors();
+  $(document).ready(initQuillEditors)
-});
+  $(document).on('has_many_add:after', '.has_many_container', initQuillEditors)
-
+  $(document).on('turbolinks:load', initQuillEditors)
-$(document).on('has_many_add:after', function() {
+})()
-  initQuillEditors();
-});

app/assets/stylesheets/activeadmin/_quill_editor_input.scss

@@ -1,4 +1,11 @@
-body.active_admin .quill-editor {
+// 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);
 
@@ -22,13 +29,7 @@ body.active_admin .quill-editor {
     max-height: 300px;
     min-height: 150px;
     padding: 10px;
-
+    word-break: break-all;
-    // reset internal elements
-    * {
-      margin: initial;
-      padding: initial;
-      text-align: initial;
-    }
 
     ol {
       list-style-type: decimal;

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

examples/upload_plugin_using_activestorage/app/admin/posts.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+ActiveAdmin.register Post do
+  permit_params :author_id,
+                :title,
+                :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
+    column :title
+    column :author
+    column :published
+    column :created_at
+    actions
+  end
+
+  show do
+    attributes_table do
+      row :author
+      row :title
+      row :description
+      row :category
+      row :dt
+      row :position
+      row :published
+      row :tags
+      row :created_at
+      row :updated_at
+      row :images do |resurce|
+        resurce.images.each do |image|
+          div do
+            link_to image.filename, image, target: '_blank'
+          end
+        end
+        nil
+      end
+    end
+    active_admin_comments
+  end
+
+  form do |f|
+    f.inputs 'Post' do
+      f.input :author
+      f.input :title
+      unless object.new_record?
+        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
+      f.input :published
+    end
+
+    f.inputs 'Tags' do
+      f.input :tags
+    end
+
+    f.actions
+  end
+end

examples/upload_plugin_using_activestorage/app/assets/javascripts/active_admin.js

@@ -0,0 +1,6 @@
+//= require active_admin/base
+
+//= require activeadmin/quill_editor/quill
+//= require activeadmin/quill_editor_input
+
+//= require activeadmin/quill.imageUploader.min

examples/upload_plugin_using_activestorage/app/assets/stylesheets/active_admin.scss

@@ -0,0 +1,7 @@
+@import 'active_admin/mixins';
+@import 'active_admin/base';
+
+@import 'activeadmin/quill_editor/quill.snow';
+@import 'activeadmin/quill_editor_input';
+
+@import 'activeadmin/quill.imageUploader.min';

examples/upload_plugin_using_activestorage/app/models/post.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Post < ApplicationRecord
+  has_many_attached :images
+
+  validates :title, allow_blank: false, presence: true
+end

index.js

@@ -0,0 +1,7 @@
+// Styles
+import 'activeadmin_quill_editor/app/assets/stylesheets/activeadmin/quill_editor/quill.snow'
+import 'activeadmin_quill_editor/app/assets/stylesheets/activeadmin/_quill_editor_input'
+
+// JS
+window.Quill = require('activeadmin_quill_editor/app/assets/javascripts/activeadmin/quill_editor/quill')
+require('activeadmin_quill_editor/app/assets/javascripts/activeadmin/quill_editor_input')

lib/activeadmin/quill_editor/version.rb

@@ -2,6 +2,6 @@
 
 module ActiveAdmin
   module QuillEditor
-    VERSION = '0.2.8'
+    VERSION = '0.3.4'
   end
 end

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

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "activeadmin_quill_editor",
+  "version": "0.3.4",
+  "description": "Quill Editor for ActiveAdmin",
+  "author": "Mattia Roccoberton <mat@blocknot.es>",
+  "license": "MIT",
+  "homepage": "https://github.com/blocknotes/activeadmin_quill_editor",
+  "main": "index.js",
+  "files": [
+    "app/**/*",
+    "index.js"
+  ]
+}

spec/dummy/app/admin/posts.rb

@@ -38,10 +38,11 @@ ActiveAdmin.register Post do
   end
 
   form do |f|
+    toolbar = %w[bold italic underline link]
     f.inputs 'Post' do
       f.input :author
       f.input :title
-      f.input :description, as: :quill_editor
+      f.input :description, as: :quill_editor, input_html: { data: { options: { modules: { toolbar: toolbar } } } }
       f.input :category
       f.input :dt
       f.input :position

spec/dummy/config/application.rb

@@ -1,6 +1,7 @@
 require_relative 'boot'
 
 require 'rails/all'
+require 'sprockets/railtie'
 
 Bundler.require(*Rails.groups)
 

spec/system/quill_editor_spec.rb

@@ -9,22 +9,50 @@ RSpec.describe 'Quill editor', type: :system do
   end
 
   after do
-    Post.destroy_all
+    Post.delete_all
-    author.destroy
+    author.delete
   end
 
   context 'with a Quill editor' do
-    it 'updates some HTML content' do
+    it 'initialize the editor' do
       visit "/admin/posts/#{post.id}/edit"
 
+      %w[bold italic underline link].each do |button|
+        expect(page).to have_css(".ql-toolbar button.ql-#{button}")
+      end
+      expect(page).to have_css('#post_description[data-aa-quill-editor]')
       expect(page).to have_css('#post_description_input .ql-editor', text: 'Some content...')
+    end
+
+    it 'adds some text to the description' do
+      visit "/admin/posts/#{post.id}/edit"
+
       find('#post_description_input .ql-editor').click
       find('#post_description_input .ql-editor').base.send_keys('more text')
-
       find('[type="submit"]').click
       expect(page).to have_content('was successfully updated')
       expect(post.reload.description).to eq '<p>Some content...more text</p>'
     end
+
+    it 'adds some bold text to the description' do
+      visit "/admin/posts/#{post.id}/edit"
+
+      find('#post_description_input .ql-editor').click
+      find('#post_description_input .ql-toolbar .ql-bold').click
+      find('#post_description_input .ql-editor').base.send_keys('more text')
+      find('[type="submit"]').click
+      expect(post.reload.description).to eq '<p>Some content...<strong>more text</strong></p>'
+    end
+
+    it 'adds some italic text to the description' do
+      visit "/admin/posts/#{post.id}/edit"
+
+      find('#post_description_input .ql-editor').click
+      find('#post_description_input .ql-toolbar .ql-italic').click
+      find('#post_description_input .ql-editor').base.send_keys('more text')
+      find('[type="submit"]').click
+      expect(post.reload.description).to eq '<p>Some content...<em>more text</em></p>'
+    end
   end
 
   context 'with a Quill editor in a nested resource' do