effective_bootstrap 0.0.27 → 0.0.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6cc4dc8605f978a57f6ae9c843dc44d4278ecd5d
-  data.tar.gz: 190608e681e7b4c355e8ebd7d871750ff8445343
+  metadata.gz: c86bfcfaf09f0b377e597a73666b33345fe4cbfb
+  data.tar.gz: 903be952705a11736f591a3cf7dacf78ed9a3979
 SHA512:
-  metadata.gz: 81a5fc220dcff6ff77d9323d4eaef179f8c7cfc3663ea8391e5101cb1ee2ff9518de4cdf9092a8940ce212288b77e41984715bf497c59c4b8d3264dce6113efd
-  data.tar.gz: 3fcdc2ec8c1c48ab4d4407818b5999935554d74f290ef48c7568158381544051e0129d4f0572c7020d865d7a2a5be1be8de6d88dadde4fb0bd9f92685cf65139
+  metadata.gz: ba71de31350daf7d706034f2bf39837b893446573ab616be7ae962ef7e798901eeb0a72826da659dfc9e4bf79cacfa7a85557f05f24f184eaf22ff2ff9785efb
+  data.tar.gz: 4983d532de3560846fdb43667bf845feb0ec2aff2805e2cd384eb1734e6c100696cded837d112402172bee362d4eef1f6fdacaa9a2e56c80435d77345ccacc93

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

@@ -3,12 +3,29 @@
 (this.EffectiveBootstrap || {}).effective_editor = ($element, options) ->
   editor = '#' + $element.attr('id') + '_editor'
 
+  delta = options['delta']
+  delete options['delta']
+
   quill = new Quill(editor, options)
-  quill.pasteHTML($element.val())
+  content = $element.val() || ''
+
+  if content.length > 0
+    if content.startsWith('{') then quill.setContents(JSON.parse(content)) else quill.pasteHTML(content)
 
-  quill.on 'text-change', (delta, old, source) ->
-    html = $(editor).children('.ql-editor').html()
-    html = '' if html == '<p><br></p>' || html == '<p></p>'
-    $element.val(html)
+  if delta
+    quill.on 'text-change', (delta, old, source) ->
+      $element.val(JSON.stringify(quill.getContents()))
+  else
+    quill.on 'text-change', (delta, old, source) ->
+      html = $(editor).children('.ql-editor').html()
+      html = '' if html == '<p><br></p>' || html == '<p></p>'
+      $element.val(html)
 
   $element.on 'quill:focus', (event) -> quill.focus()
+
+# This is the read only region. Always delta.
+(this.EffectiveBootstrap || {}).effective_editor_tag = ($element, options) ->
+  quill = new Quill('#' + $element.attr('id'), options)
+
+  if $element.data('delta')
+    quill.setContents($element.data('delta'))

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

@@ -4162,7 +4162,7 @@ var Scroll = function (_Parchment$Scroll) {
       }, {});
     }
     // Some reason fixes composition issues with character languages in Windows/Chrome, Safari
-    // _this.domNode.addEventListener('DOMNodeInserted', function () {});
+    // matt: _this.domNode.addEventListener('DOMNodeInserted', function () {});
     _this.optimize();
     _this.enable();
     return _this;

data/app/assets/stylesheets/effective_editor/overrides.scss

@@ -1,4 +1,4 @@
-.effective-editor { height: 0; width: 0; padding: 0; margin: 0; visibility: hidden; }
+.effective_editor { height: 0; width: 0; padding: 0; margin: 0; visibility: hidden; }
 
 // Bootstrap 4 Feedback client side
 .was-validated .form-control:invalid ~ .ql-container, { border-color: #dc3545; }
@@ -11,3 +11,15 @@
 .form-control.is-invalid ~ .ql-toolbar { border-color: #dc3545; }
 .form-control.is-valid ~ .ql-container { border-color: #28a745; }
 .form-control.is-valid ~ .ql-toolbar { border-color: #28a745; }
+
+.ql-effective.ql-container {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+// Now for the editor itself
+.effective_editor_content.ql-container {
+  border: none;
+
+  .ql-editor { padding: 0; }
+}

data/app/helpers/effective_editor_helper.rb

@@ -0,0 +1,9 @@
+module EffectiveEditorHelper
+
+  def effective_editor_tag(delta)
+    input_js = { method_name: 'effective_editor_tag', theme: 'snow', readOnly: true, modules: { toolbar: false } }
+
+    content_tag(:div, '', id: "ql-#{delta.object_id}", class: 'effective_editor_content ql-effective', data: { 'input-js-options': input_js, 'delta': delta.presence || '{}'})
+  end
+
+end

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

@@ -10,23 +10,33 @@ module Effective
       end
 
       def input_html_options
-        { class: 'effective-editor form-control', id: unique_id }
+        { class: 'effective_editor form-control', id: unique_id }
       end
 
       def input_js_options
-        { modules: { toolbar: toolbar }, theme: 'snow', placeholder: "Add #{name.to_s.pluralize}..." }
+        { modules: { toolbar: toolbar }, theme: 'snow', placeholder: "Add #{name.to_s.pluralize}...", delta: delta? }
       end
 
       def toolbar
         [
-          [{ 'header': [1, 2, 3, 4, false] }],
+          [{'header': [1, 2, 3, 4, false] }],
           ['bold', 'italic', 'underline'],
           ['link', 'image', 'video', 'code-block'],
-          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-          [{ 'align': [] }, 'clean'],
+          [{'list': 'ordered'}, { 'list': 'bullet' }],
+          [{'align': [] }, 'clean'],
         ]
       end
 
+      def delta? # default false
+        return @delta unless @delta.nil?
+
+        if options.key?(:html)
+          @delta = (options.delete(:html) == false)
+        else
+          @delta = (options.delete(:delta) || false)
+        end
+      end
+
     end
   end
 end

data/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.0.27'.freeze
+  VERSION = '0.0.28'.freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.0.27
+  version: 0.0.28
 platform: ruby
 authors:
 - Code and Effect
@@ -421,6 +421,7 @@ files:
 - app/assets/stylesheets/effective_select/select2.css
 - app/assets/stylesheets/effective_time/input.scss
 - app/helpers/effective_bootstrap_helper.rb
+- app/helpers/effective_editor_helper.rb
 - app/helpers/effective_form_builder_helper.rb
 - app/helpers/effective_icons_helper.rb
 - app/models/effective/access_denied.rb