quill-resize-module 2.0.4 → 2.0.5

package/README.md

@@ -108,6 +108,11 @@ const quill = new Quill(editor, {
               'left', 'right',
               {
                 text: 'Alt',
+                // set attributes
+                attrs: {
+                  title: 'Set image alt',
+                  class: 'btn-alt'
+                },
                 verify (activeEle) {
                     return (activeEle && activeEle.tagName === 'IMG')
                 },

package/demo/index.html

@@ -46,6 +46,10 @@
       opacity: .5;
     }
 
+    .ql-resize-toolbar .btn-alt {
+      background-color: #ccc;
+    }
+
     #result {
       width: 100%;
     }
@@ -57,9 +61,9 @@
   <div class="editor-box">
     <div id="editor">
       <p>Click target to resize.</p>
-      <p><img src="https://i.ytimg.com/vi/Fp5ghKduTK8/hq720.jpg" width="450"></p>
+      <p><img src="https://i.ytimg.com/vi/Fp5ghKduTK8/hq720.jpg" width="400"> text <img src="https://i.ytimg.com/vi/etdb8-v2enI/hq720.jpg" width="350"></p>
       <p><br></p>
-      <iframe width="560" height="315" src="https://www.youtube.com/embed/vYD1cSQ8jAY?si=DZYEYsGyDlciQRBP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/HGl75kurxok?si=xZWI9qVC3oJs0Lll" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
       <p><br></p>
       <p>Try to press left/right key around the placeholder.</p>
     </div>
@@ -69,6 +73,9 @@
     <button class="btn btn-content">getContent</button>
     <button class="btn btn-text">getText</button>
     &nbsp;&nbsp;
+    <button class="btn btn-set-html">setHTML</button>
+    <button class="btn btn-set-content">setContent</button>
+    &nbsp;&nbsp;
     <button class="btn btn-undo">undo</button>
     <button class="btn btn-redo">redo</button>
   </div>

package/demo/index.js

@@ -26,6 +26,10 @@ const demoEditor = new Quill('#editor', {
         'left', 'center', 'right', 'full', 'edit',
         {
           text: 'Alt',
+          attrs: {
+            title: 'Set image alt',
+            class: 'btn-alt'
+          },
           verify (activeEle) {
             return (activeEle && activeEle.tagName === 'IMG')
           },
@@ -53,6 +57,16 @@ document.querySelector('.btn-content').addEventListener('click', function () {
 document.querySelector('.btn-text').addEventListener('click', function () {
   $result.value = demoEditor.getText()
 })
+document.querySelector('.btn-set-html').addEventListener('click', function () {
+  const contents = demoEditor.clipboard.convert({
+    html: `${$result.value}<p><br></p>`,
+    text: '\n'
+  })
+  demoEditor.setContents(contents)
+})
+document.querySelector('.btn-set-content').addEventListener('click', function () {
+  demoEditor.setContents(JSON.parse($result.value))
+})
 document.querySelector('.btn-undo').addEventListener('click', function () {
   demoEditor.history.undo()
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-resize-module",
-  "version": "2.0.4",
-  "description": "A module for Quill rich text editor to allow images/iframe/video and custom elements(covert to placeholder) to be resized.",
+  "version": "2.0.5",
+  "description": "A module for Quill rich text editor to allow images/iframe/video and custom elements to be resized.",
   "main": "dist/resize.js",
   "module": "src/index.js",
   "scripts": {

package/src/assets/resize.scss

@@ -102,6 +102,7 @@
 .ql-resize-style-center {
     display: block;
     margin: auto;
+    text-align: center;
 }
 .ql-resize-style-right {
     float: right;
@@ -109,4 +110,7 @@
 }
 .ql-resize-style-full {
     width: 100% !important;
+    > * {
+      width: 100%;
+    }
 }

package/src/modules/Resize.js

@@ -32,7 +32,6 @@ export default class Resize extends BaseModule {
   }
 
   handleMousedown (evt) {
-    this.blot.handling && this.blot.handling(true)
     // note which box
     this.dragBox = evt.target
     // note starting mousedown position
@@ -64,7 +63,6 @@ export default class Resize extends BaseModule {
 
     // reset cursor everywhere
     this.setCursor('')
-    this.blot.handling && this.blot.handling(false)
     // stop listening for movement and mouseup
     document.removeEventListener('mousemove', this.handleDragProxy)
     document.removeEventListener('mouseup', this.handleMouseupProxy)

package/src/modules/Toolbar.js

@@ -11,11 +11,32 @@ const Quill = window.Quill || _Quill
 
 const Parchment = Quill.import('parchment')
 
+const ALIGNMENT_CLASSES = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center',
+  FULL: 'full'
+}
+
 // Quill.js 2.x support
 const ClassAttributor = Parchment.ClassAttributor
   ? Parchment.ClassAttributor
   : Parchment.Attributor.Class
-const ImageFormatClass = new ClassAttributor('imagestyle', 'ql-resize-style')
+
+const INLINE_FORMAT_ATTRIBUTOR = 'resize-inline'
+const InlineFormatClass = new ClassAttributor(INLINE_FORMAT_ATTRIBUTOR, 'ql-resize-style', {
+  scope: Parchment.Scope.INLINE,
+  whitelist: Object.values(ALIGNMENT_CLASSES)
+})
+
+const BLOCK_FORMAT_ATTRIBUTOR = 'resize-block'
+const BlockFormatClass = new ClassAttributor(BLOCK_FORMAT_ATTRIBUTOR, 'ql-resize-style', {
+  scope: Parchment.Scope.BLOCK,
+  whitelist: Object.values(ALIGNMENT_CLASSES)
+})
+
+Quill.register(InlineFormatClass, true)
+Quill.register(BlockFormatClass, true)
 
 export default class Toolbar extends BaseModule {
   static Icons = {
@@ -28,35 +49,27 @@ export default class Toolbar extends BaseModule {
 
   static Tools = {
     left: {
-      apply (activeEle) {
-        ImageFormatClass.add(activeEle, 'left')
-      },
-      isApplied (activeEle) {
-        return ImageFormatClass.value(activeEle) === 'left'
+      toolClass: ALIGNMENT_CLASSES.LEFT,
+      isApplied (activeEle, blot) {
+        return this._getFormatValue(activeEle, blot) === ALIGNMENT_CLASSES.LEFT
       }
     },
     center: {
-      apply (activeEle) {
-        ImageFormatClass.add(activeEle, 'center')
-      },
-      isApplied (activeEle) {
-        return ImageFormatClass.value(activeEle) === 'center'
+      toolClass: ALIGNMENT_CLASSES.CENTER,
+      isApplied (activeEle, blot) {
+        return this._getFormatValue(activeEle, blot) === ALIGNMENT_CLASSES.CENTER
       }
     },
     right: {
-      apply (activeEle) {
-        ImageFormatClass.add(activeEle, 'right')
-      },
-      isApplied (activeEle) {
-        return ImageFormatClass.value(activeEle) === 'right'
+      toolClass: ALIGNMENT_CLASSES.RIGHT,
+      isApplied (activeEle, blot) {
+        return this._getFormatValue(activeEle, blot) === ALIGNMENT_CLASSES.RIGHT
       }
     },
     full: {
-      apply (activeEle) {
-        ImageFormatClass.add(activeEle, 'full')
-      },
-      isApplied (activeEle) {
-        return ImageFormatClass.value(activeEle) === 'full'
+      toolClass: ALIGNMENT_CLASSES.FULL,
+      isApplied (activeEle, blot) {
+        return this._getFormatValue(activeEle, blot) === ALIGNMENT_CLASSES.FULL
       }
     },
     edit: {
@@ -88,29 +101,61 @@ export default class Toolbar extends BaseModule {
       button.type = 'button'
       buttons.push(button)
       button.innerHTML = ((tool.icon || '') + (tool.text || '')) || Icons[t]
+      if (typeof t === 'string') button.className = `ql-resize-toolbar-${t}`
+      if (tool.attrs) {
+        Object.keys(tool.attrs).forEach((key) => {
+          button.setAttribute(key, tool.attrs[key])
+        })
+      }
       button.addEventListener('click', (evt) => {
         if (tool.handler && tool.handler.call(this, evt, button, this.activeEle) !== true) return
 
         // deselect all buttons
         buttons.forEach(button => (button.classList.remove('active')))
-        if (tool.isApplied && tool.isApplied.call(this, this.activeEle)) {
+        if (tool.isApplied && tool.isApplied.call(this, this.activeEle, this.blot)) {
           // If applied, unapply
-          ImageFormatClass.remove(this.activeEle)
+          this._applyToolFormatting('')
         } else {
           // otherwise, select button and apply
           button.classList.add('active')
-          tool.apply && tool.apply.call(this, this.activeEle)
+
+          if (tool.toolClass) {
+            this._applyToolFormatting(tool.toolClass)
+          }
         }
 
         // image may change position; redraw drag handles
         this.requestUpdate()
       })
 
-      if (tool.isApplied && tool.isApplied.call(this, this.activeEle)) {
+      if (tool.isApplied && tool.isApplied.call(this, this.activeEle, this.blot)) {
         // select button if previously applied
         button.classList.add('active')
       }
       this.toolbar.appendChild(button)
     })
   }
+
+  _getFormatValue (activeEle, blot) {
+    if (blot.statics.scope === Parchment.Scope.INLINE_BLOT) {
+      // return InlineFormatClass.value(activeEle)
+      const blotIndex = this.quill.getIndex(blot)
+      const formats = this.quill.getFormat(blotIndex, 1)
+      return formats[INLINE_FORMAT_ATTRIBUTOR]
+    } else if (blot.statics.scope === Parchment.Scope.BLOCK_BLOT) {
+      return BlockFormatClass.value(activeEle)
+    }
+  }
+
+  _applyToolFormatting (toolClass) {
+    const blotIndex = this.quill.getIndex(this.blot)
+
+    if (this.blot.statics.scope === Parchment.Scope.INLINE_BLOT) {
+      // Format inline blot
+      this.quill.formatText(blotIndex, 1, INLINE_FORMAT_ATTRIBUTOR, toolClass)
+    } else if (this.blot.statics.scope === Parchment.Scope.BLOCK_BLOT) {
+      // Format block blot
+      this.quill.formatLine(blotIndex, 1, BLOCK_FORMAT_ATTRIBUTOR, toolClass)
+    }
+  }
 }