effective_bootstrap 0.7.1 → 0.8.1

data/app/assets/images/icons/x-octagon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

data/app/assets/images/icons/x-square.svg

@@ -1,15 +1 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-  <line x1="9" y1="9" x2="15" y2="15" />
-  <line x1="15" y1="9" x2="9" y2="15" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>

data/app/assets/images/icons/x.svg

@@ -1,14 +1 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <line x1="18" y1="6" x2="6" y2="18" />
-  <line x1="6" y1="6" x2="18" y2="18" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

data/app/assets/images/icons/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>

data/app/assets/images/icons/zap-off.svg

@@ -1,16 +1 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <polyline points="12.41 6.75 13 2 10.57 4.92" />
-  <polyline points="18.57 12.91 21 10 15.66 10" />
-  <polyline points="8 8 3 14 12 14 11 22 16 16" />
-  <line x1="1" y1="1" x2="23" y2="23" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap-off"><polyline points="12.41 6.75 13 2 10.57 4.92"></polyline><polyline points="18.57 12.91 21 10 15.66 10"></polyline><polyline points="8 8 3 14 12 14 11 22 16 16"></polyline><line x1="1" y1="1" x2="23" y2="23"></line></svg>

data/app/assets/images/icons/zap.svg

@@ -1,13 +1 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>

data/app/assets/images/icons/zoom-in.svg

@@ -1,16 +1 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <circle cx="11" cy="11" r="8" />
-  <line x1="21" y1="21" x2="16.65" y2="16.65" />
-  <line x1="11" y1="8" x2="11" y2="14" />
-  <line x1="8" y1="11" x2="14" y2="11" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-in"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>

data/app/assets/images/icons/zoom-out.svg

@@ -1,15 +1 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <circle cx="11" cy="11" r="8" />
-  <line x1="21" y1="21" x2="16.65" y2="16.65" />
-  <line x1="8" y1="11" x2="14" y2="11" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-out"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>

data/app/assets/javascripts/effective_editor/image-drop-and-paste.js

@@ -0,0 +1,3 @@
+(function(){var exports={};
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var r=t[a];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,a,r){if(a)e(t.prototype,a);if(r)e(t,r);return t}}();function _classCallCheck(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}var ImageData=function(){function e(t,a){_classCallCheck(this,e);this.dataUrl=t;this.type=a}_createClass(e,[{key:"minify",value:function t(){var a=this;var r=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return new Promise(function(t,n){var i=r.maxWidth||800;var l=r.maxHeight||800;var o=r.quality||.8;if(!a.dataUrl){return n({message:"[error] QuillImageDropAndPaste: Fail to minify the image, dataUrl should not be empty."})}var s=new Image;s.onload=function(){var r=s.width;var n=s.height;if(r>n){if(r>i){s.height=n*i/r;s.width=i}}else{if(n>l){s.width=r*l/n;s.height=l}}var u=document.createElement("canvas");u.width=s.width;u.height=s.height;var f=u.getContext("2d");f.drawImage(s,0,0,s.width,s.height);var d=a.type||"image/png";var h=u.toDataURL(d,o);t(new e(h,d))};s.src=a.dataUrl})}},{key:"toFile",value:function e(t){if(!window.File){console.error("[error] QuillImageDropAndPaste: Your browser didnot support File API.");return null}return new File([this.toBlob()],t,{type:this.type})}},{key:"toBlob",value:function e(){var t=this.dataUrl.replace(/^[^,]+,/,"");var a=this.binaryStringToArrayBuffer(atob(t));return this.createBlob([a],{type:this.type})}},{key:"binaryStringToArrayBuffer",value:function e(t){var a=t.length;var r=new ArrayBuffer(a);var n=new Uint8Array(r);var i=-1;while(++i<a){n[i]=t.charCodeAt(i)}return r}},{key:"createBlob",value:function e(){var t=arguments.length>0&&arguments[0]!==undefined?arguments[0]:[];var a=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};if(typeof a==="string")a={type:a};try{return new Blob(t,a)}catch(e){if(e.name!=="TypeError")throw e;var r=typeof BlobBuilder!=="undefined"?BlobBuilder:typeof MSBlobBuilder!=="undefined"?MSBlobBuilder:typeof MozBlobBuilder!=="undefined"?MozBlobBuilder:WebKitBlobBuilder;var n=new r;for(var i=0;i<t.length;i++){n.append(t[i])}return n.getBlob(a.type)}}}]);return e}();var ImageDropAndPaste=function(){function e(t){var a=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,e);this.quill=t;this.options=a;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(e,[{key:"handleDrop",value:function e(t){var a=this;t.preventDefault();if(t.dataTransfer&&t.dataTransfer.files&&t.dataTransfer.files.length){if(document.caretRangeFromPoint){var r=document.getSelection();var n=document.caretRangeFromPoint(t.clientX,t.clientY);if(r&&n){r.setBaseAndExtent(n.startContainer,n.startOffset,n.startContainer,n.startOffset)}}this.readFiles(t.dataTransfer.files,function(e,t){t=t||"image/png";if(typeof a.options.handler==="function"){a.options.handler.call(a,e,t,new ImageData(e,t))}else{a.insert.call(a,e,t)}},t)}}},{key:"handlePaste",value:function e(t){var a=this;if(t.clipboardData&&t.clipboardData.items&&t.clipboardData.items.length){this.readFiles(t.clipboardData.items,function(e,t){t=t||"image/png";if(typeof a.options.handler==="function"){a.options.handler.call(a,e,t,new ImageData(e,t))}else{a.insert(e,t)}},t)}}},{key:"readFiles",value:function e(t,a,r){[].forEach.call(t,function(e){var t=e.type;if(!t.match(/^image\/(gif|jpe?g|a?png|svg|webp|bmp)/i))return;r.preventDefault();var n=new FileReader;n.onload=function(e){a(e.target.result,t)};var i=e.getAsFile?e.getAsFile():e;if(i instanceof Blob)n.readAsDataURL(i)})}},{key:"insert",value:function e(t,a){var r=(this.quill.getSelection()||{}).index||this.quill.getLength();this.quill.insertEmbed(r,"image",t,"user")}}]);return e}();ImageDropAndPaste.ImageData=ImageData;exports.default=ImageDropAndPaste;
+window.QuillImageDropAndPaste = ImageDropAndPaste;window.Quill.register('modules/imageDropAndPaste',ImageDropAndPaste)})();

data/app/assets/javascripts/effective_editor/initialize.js.coffee

@@ -2,6 +2,7 @@
 # https://github.com/quilljs/quill
 
 Quill.register('modules/imageResize', window.ImageResize.default)
+Quill.register('modules/imageDrop', window.QuillImageDropAndPaste)
 
 (this.EffectiveBootstrap || {}).effective_editor = ($element, options) ->
   editor = '#' + $element.attr('id') + '_editor'
@@ -12,6 +13,15 @@ Quill.register('modules/imageResize', window.ImageResize.default)
   content_mode = options['content_mode']
   delete options['content_mode']
 
+  if options['modules']['imageDropAndPaste']
+    # Image Drop & Paste
+    # https://github.com/chenjuneking/quill-image-drop-and-paste
+    dropImage = (imageDataUrl, type, imageData) ->
+      file = imageData.toFile(type.replace('/', '.'))
+      uploadImage(quill, file)
+
+    options['modules']['imageDropAndPaste'] = { handler: dropImage }
+
   quill = new Quill($element.siblings(editor).get(0), options)
   content = $element.val() || ''
 
@@ -56,7 +66,7 @@ Quill.register('modules/imageResize', window.ImageResize.default)
   $element.on 'quill:focus', (event) -> quill.focus()
 
   # Active Storage support
-  if active_storage
+  if active_storage and content_mode != 'code'
     quill.getModule('toolbar').addHandler('image', -> createImage(quill))
 
 # Active Support Direct Upload

data/app/assets/javascripts/effective_editor/input.js

@@ -1,3 +1,4 @@
 //= require ./quill
+//= require ./image-drop-and-paste
 //= require ./image-resize
 //= require ./initialize

data/app/helpers/effective_bootstrap_helper.rb

@@ -72,29 +72,42 @@ module EffectiveBootstrapHelper
   # variations can be :dropup, :dropleft, :dropright
   # split can be true, false
   # right is to right align things
-  def dropdown(variation: nil, split: true, btn_class: nil, right: false, &block)
+  def dropdown(variation: nil, split: true, btn_class: nil, btn_content: nil, right: false, &block)
     raise 'expected a block' unless block_given?
 
     btn_class = btn_class.presence || 'btn-outline-primary'
 
-    @_dropdown_link_tos = []; yield
+    @_dropdown_link_tos = []
+    @_dropdown_split = split
+
+    # process dropdown_link_tos
+    yield
 
     return @_dropdown_link_tos.first if @_dropdown_link_tos.length <= 1
 
-    retval = if split
-      first = @_dropdown_link_tos.first
-      menu = content_tag(:div, @_dropdown_link_tos[1..-1].join.html_safe, class: ['dropdown-menu', ('dropdown-menu-right' if right)].compact.join(' '))
-      split = content_tag(:button, class: "btn #{btn_class} dropdown-toggle dropdown-toggle-split", type: 'button', 'data-toggle': 'dropdown', 'aria-haspopup': true, 'aria-expanded': false) do
-        content_tag(:span, 'Toggle Dropdown', class: 'sr-only')
-      end
+    # Build tags
+    first = @_dropdown_link_tos.first
+
+    button = content_tag(:button, class: "btn #{btn_class} dropdown-toggle" + (split ? " dropdown-toggle-split" : ''), type: 'button', 'data-toggle': 'dropdown', 'aria-haspopup': true, 'aria-expanded': false) do
+      btn_content || content_tag(:span, 'Toggle Dropdown', class: 'sr-only')
+    end
 
+    menu = if split
+      content_tag(:div, @_dropdown_link_tos[1..-1].join.html_safe, class: ['dropdown-menu', ('dropdown-menu-right' if right)].compact.join(' '))
+    else
+      content_tag(:div, @_dropdown_link_tos.join.html_safe, class: ['dropdown-menu', ('dropdown-menu-right' if right)].compact.join(' '))
+    end
+
+    retval = if split
       content_tag(:div, class: 'btn-group') do
         content_tag(:div, class: ['btn-group', variation.to_s.presence].compact.join(' '), role: 'group') do
-          [:dropleft].include?(variation) ? (split + menu) : (first + split + menu)
+          [:dropleft].include?(variation) ? (button + menu) : (first + button + menu)
         end + ([:dropleft].include?(variation) ? first : '').html_safe
       end
     else
-      raise 'split false is unsupported'
+      content_tag(:div, class: 'dropdown') do
+        button + menu
+      end
     end
 
     @_dropdown_link_tos = nil
@@ -108,7 +121,7 @@ module EffectiveBootstrapHelper
   def dots(options = nil, &block)
     (options ||= {})[:class] = "dropdown dropdown-dots #{options.delete(:class)}".strip
 
-    content_tag(:span, options) do
+    content_tag(:div, options) do
       content_tag(:button, class: "btn btn-dots dropdown-toggle #{options.delete(:button_class)}", 'aria-expanded': true, 'aria-haspopup': true, 'data-toggle': 'dropdown', type: 'button') do
       end + content_tag(:div, capture(&block), class: 'dropdown-menu')
     end
@@ -129,7 +142,7 @@ module EffectiveBootstrapHelper
       return link_to(label, path, options)
     end
 
-    if @_dropdown_link_tos.length == 0
+    if @_dropdown_link_tos.length == 0 && @_dropdown_split
       options[:class] = [options[:class], 'btn', btn_class].compact.join(' ')
     else
       options[:class] = [options[:class], 'dropdown-item'].compact.join(' ')

data/app/helpers/effective_form_builder_helper.rb

@@ -1,9 +1,9 @@
 module EffectiveFormBuilderHelper
   def effective_form_with(**options, &block)
-
     # Compute the default ID
     subject = Array(options[:scope] || options[:model]).last
     class_name = subject.class.name.underscore
+    unique_id = options.except(:model).hash.abs
 
     html_id = if subject.kind_of?(Symbol)
       subject.to_s
@@ -14,9 +14,6 @@ module EffectiveFormBuilderHelper
     end
 
     options[:html] = (options[:html] || {}).merge(novalidate: true, onsubmit: 'return EffectiveForm.validate(this)')
-
-    remote_index = options.except(:model).hash.abs
-
     options[:local] = true unless options.key?(:local)
 
     if respond_to?(:inline_datatable?) && inline_datatable?
@@ -33,21 +30,27 @@ module EffectiveFormBuilderHelper
       ('hide-flash-danger' if options[:remote] && options.key?(:flash_error) && !options[:flash_error])
     ].compact.join(' ')
 
-    if options.delete(:remote) == true
-      @_effective_remote_index ||= {}
-      remote_index = remote_index + 1 if @_effective_remote_index[remote_index]
+    if options[:remote] || options[:unique_ids]
+      @_effective_unique_id ||= {}
+
+      if @_effective_unique_id.key?(unique_id)
+        unique_id = unique_id + @_effective_unique_id.length
+      end
 
+      options[:unique_id] = unique_id
+      html_id = "#{html_id}_#{unique_id}"
+
+      @_effective_unique_id[unique_id] = true
+    end
+
+    if options.delete(:remote) == true
       if options[:html][:data].kind_of?(Hash)
         options[:html][:data][:remote] = true
-        options[:html][:data]['data-remote-index'] = remote_index
+        options[:html][:data]['data-remote-index'] = unique_id
       else
         options[:html]['data-remote'] = true
-        options[:html]['data-remote-index'] = remote_index
+        options[:html]['data-remote-index'] = unique_id
       end
-
-      html_id = "#{html_id}_#{remote_index}"
-
-      @_effective_remote_index[remote_index] = true
     end
 
     # Assign default ID

data/app/models/effective/form_builder.rb

@@ -20,6 +20,7 @@ module Effective
     alias_method :super_number_field, :number_field
     alias_method :super_text_field, :text_field
     alias_method :super_text_area, :text_area
+    alias_method :super_hidden_field, :hidden_field
 
     def clear(name = 'Clear', options = {})
       (options = name; name = 'Clear') if name.kind_of?(Hash)
@@ -85,6 +86,10 @@ module Effective
       Effective::FormInputs::FormGroup.new(name, options, builder: self).to_html(&block)
     end
 
+    def hidden_field(name = nil, options = {})
+      Effective::FormInputs::HiddenField.new(name, options, builder: self).to_html
+    end
+
     def integer_field(name, options = {})
       Effective::FormInputs::IntegerField.new(name, options, builder: self).to_html
     end
@@ -196,4 +201,3 @@ module Effective
 
   end
 end
-

data/app/models/effective/form_input.rb

@@ -7,7 +7,7 @@ module Effective
     EXCLUSIVE_CLASS_SUFFIXES = ['-primary', '-secondary', '-success', '-danger', '-warning', '-info', '-light', '-dark']
 
     delegate :object, to: :@builder
-    delegate :capture, :content_tag, :link_to, :icon, :asset_path, to: :@template
+    delegate :capture, :content_tag, :image_tag, :link_to, :icon, :asset_path, to: :@template
 
     # So this takes in the options for an entire form group.
     def initialize(name, options, builder:, html_options: nil)
@@ -24,7 +24,7 @@ module Effective
     end
 
     def input_html_options
-      { class: 'form-control' }
+      { class: 'form-control', id: tag_id }
     end
 
     def input_js_options
@@ -408,7 +408,7 @@ module Effective
 
     # https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/tags/base.rb#L120
     def tag_id(index = nil)
-      case
+      id = case
       when @builder.object_name.empty?
         sanitized_method_name.dup
       when index
@@ -416,6 +416,8 @@ module Effective
       else
         "#{sanitized_object_name}_#{sanitized_method_name}"
       end.downcase.parameterize
+
+      @builder.options[:unique_ids] ? "#{id}_#{@builder.options[:unique_id]}" : id
     end
 
     def sanitized_object_name

data/app/models/effective/form_inputs/clear.rb

@@ -9,7 +9,7 @@ module Effective
       end
 
       def input_html_options
-        { class: 'btn btn-primary', type: 'clear' }
+        { class: 'btn btn-primary', type: 'clear', id: tag_id }
       end
 
       def icon_name

data/app/models/effective/form_inputs/collection_input.rb

@@ -36,7 +36,7 @@ module Effective
 
         @collection_options = {
           checked: [checked, selected, polymorphic_value, value].find { |value| value != nil },
-          selected: [selected, checked, polymorphic_value, value].find { |value| value != nil },
+          selected: ([selected, checked, polymorphic_value, value].find { |value| value != nil } unless kind_of?(Effective::FormInputs::Radios)),
           include_blank: include_blank
         }.compact
       end

data/app/models/effective/form_inputs/date_field.rb

@@ -5,7 +5,8 @@ module Effective
       def input_html_options
         {
           class: ['form-control', 'effective_date_time_picker', 'effective_date', ('not-date-linked' if not_date_linked?)].compact.join(' '),
-          pattern: pattern
+          pattern: pattern,
+          id: tag_id
         }
       end
 

data/app/models/effective/form_inputs/datetime_field.rb

@@ -5,7 +5,8 @@ module Effective
       def input_html_options
         {
           class: ['form-control', 'effective_date_time_picker', 'effective_datetime', ('not-date-linked' if not_date_linked?)].compact.join(' '),
-          pattern: pattern
+          pattern: pattern,
+          id: tag_id
         }
       end
 

data/app/models/effective/form_inputs/delete.rb

@@ -14,7 +14,11 @@ module Effective
       end
 
       def input_html_options
-        { class: 'btn btn-warning', data: { method: :delete, remote: true, confirm: "Really delete<br>#{object}?".html_safe } }
+        {
+          class: 'btn btn-warning',
+          id: tag_id,
+          data: { method: :delete, remote: true, confirm: "Really delete<br>#{object}?".html_safe }
+        }
       end
 
       def border?

data/app/models/effective/form_inputs/editor.rb

@@ -15,7 +15,12 @@ module Effective
 
       def input_js_options
         {
-          modules: { toolbar: toolbar, imageResize: imageResize, syntax: (content_mode == :code) },
+          modules: { 
+            toolbar: toolbar, 
+            imageResize: imageResize, 
+            imageDropAndPaste: imageDropAndPaste,
+            syntax: (content_mode == :code) 
+          },
           theme: 'snow',
           placeholder: "Add #{name.to_s.pluralize}...",
           content_mode: content_mode,
@@ -36,6 +41,10 @@ module Effective
         ]
       end
 
+      def imageDropAndPaste
+        active_storage && !(content_mode == :code) 
+      end
+
       def imageResize
         {
           displaySize: true,

data/app/models/effective/form_inputs/email_cc_field.rb

@@ -7,7 +7,7 @@ module Effective
       end
 
       def input_html_options
-        { class: 'form-control', placeholder: 'one@example.com,two@example.com' }
+        { class: 'form-control', placeholder: 'one@example.com,two@example.com', id: tag_id }
       end
 
       def input_group_options

data/app/models/effective/form_inputs/email_field.rb

@@ -3,7 +3,7 @@ module Effective
     class EmailField < Effective::FormInput
 
       def input_html_options
-        { class: 'form-control', placeholder: 'someone@example.com' }
+        { class: 'form-control', placeholder: 'someone@example.com', id: tag_id }
       end
 
       def input_group_options

data/app/models/effective/form_inputs/error_field.rb

@@ -3,7 +3,7 @@ module Effective
     class ErrorField < Effective::FormInput
 
       def input_html_options
-        { class: 'alert alert-danger' }
+        { class: 'alert alert-danger', id: tag_id }
       end
 
       def to_html(&block)