quill-resize-module 2.0.1 → 2.0.3

package/README.md

@@ -7,7 +7,9 @@ This module is original forked from <https://github.com/whatcould/quill-image-re
 ## Changed V2
 1. Support Quill2
 2. Removed formats/image formats/placeholder
-3. Add `embedTags` option for custom embed element
+3. Removed `options.styles`
+4. Add `embedTags` option for custom embed element
+4. Add `tools` option for custom toolbar
 
 ## Features
  - Image resize
@@ -92,7 +94,35 @@ const quill = new Quill(editor, {
 });
 ```
 
-Each module is described below.
+Customize the toolbar buttons with "tools" option.
+
+For example, add handler for image alt attribute:
+
+```javascript
+const quill = new Quill(editor, {
+    // ...
+    modules: {
+        // ...
+        resize: {
+            tools: [
+              'left', 'right',
+              {
+                text: 'Alt',
+                verify (activeEle) {
+                    return (activeEle && activeEle.tagName === 'IMG')
+                },
+                handler (evt, button, activeEle) {
+                    let alt = activeEle.alt || ''
+                    alt = window.prompt('Alt for image', alt)
+                    if (alt == null) return
+                    activeEle.setAttribute('alt', alt)
+                }
+              }
+            ]
+        }
+    }
+});
+```
 
 #### `Resize` - Resize the element
 
@@ -119,72 +149,6 @@ var quill = new Quill(editor, {
                         ratio: .5625  // keep width/height ratio. (ratio=height/width)
                     }
                 }
-            },
-            styles: {
-                handle: {
-                    backgroundColor: 'black',
-                    border: 'none',
-                    color: white
-                    // other camelCase styles for size display
-                }
-            }
-        }
-    }
-});
-```
-
-#### `DisplaySize` - Display pixel size
-
-Shows the size of the image in pixels near the bottom right of the image.
-
-The look and feel can be controlled with options:
-
-```javascript
-var quill = new Quill(editor, {
-    // ...
-    modules: {
-        // ...
-        resize: {
-            // ...
-            styles: {
-                display: {
-                    backgroundColor: 'black',
-                    border: 'none',
-                    color: white
-                    // other camelCase styles for size display
-                }
-            }
-        }
-    }
-});
-```
-
-#### `Toolbar` - Image alignment tools
-
-Displays a toolbar below the image, where the user can select an alignment for the image.
-
-The look and feel can be controlled with options:
-
-```javascript
-var quill = new Quill(editor, {
-    // ...
-    modules: {
-        // ...
-        resize: {
-            styles: {
-                // ...
-                toolbar: {
-                    backgroundColor: 'black',
-                    border: 'none',
-                    color: white
-                    // other camelCase styles for size display
-                },
-                toolbarButton: {
-                    // ...
-                },
-                toolbarButtonSvg: {
-                    // ...
-                },
             }
         }
     }

package/demo/index.js

@@ -1,5 +1,5 @@
 import 'quill/dist/quill.snow.css'
-import '../src/assets/resize.css'
+import '../src/assets/resize.scss'
 
 import Resize from '../src/index'
 
@@ -20,7 +20,23 @@ const demoEditor = new Quill('#editor', {
     ],
     resize: {
       // set embed tags to capture resize
-      embedTags: ['VIDEO', 'IFRAME']
+      embedTags: ['VIDEO', 'IFRAME'],
+      // custom toolbar
+      tools: [
+        'left', 'center', 'right', 'full', 'edit',
+        {
+          text: 'Alt',
+          verify (activeEle) {
+            return (activeEle && activeEle.tagName === 'IMG')
+          },
+          handler (evt, button, activeEle) {
+            let alt = activeEle.alt || ''
+            alt = window.prompt('Alt for image', alt)
+            if (alt == null) return
+            activeEle.setAttribute('alt', alt)
+          }
+        }
+      ]
     }
   }
 })

package/dist/resize.css

@@ -1,20 +1,5 @@
 /*!
- * Quill Resize Module v2.0.1
+ * Quill Resize Module v2.0.3
  * https://github.com/mudoo/quill-resize-module
  */
-.ql-resize-style-left {
-    float: left;
-    margin: 0 1em 1em 0;
-}
-.ql-resize-style-center {
-    display: block;
-    margin: auto;
-}
-.ql-resize-style-right {
-    float: right;
-    margin: 0 0 1em 1em;
-}
-.ql-resize-style-full {
-    width: 100% !important;
-}
-
+.ql-resize-overlay{position:absolute;box-sizing:border-box;border:1px dashed #444;pointer-events:none}.ql-resize-toolbar{position:absolute;top:-12px;right:0;left:0;height:0;min-width:120px;text-align:center;color:#333;box-sizing:border-box;cursor:default;pointer-events:all}.ql-resize-toolbar button{display:inline-block;min-width:24px;height:24px;padding:2px;background-color:#fff;border:1px solid #999;vertical-align:middle}.ql-resize-toolbar button:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.ql-resize-toolbar button:last-child{border-bottom-right-radius:3px;border-top-right-radius:3px}.ql-resize-toolbar button:not(:first-child){border-left:none}.ql-resize-toolbar button.active{filter:invert(20%)}.ql-resize-toolbar svg{width:18px}.ql-resize-handle{position:absolute;height:12px;width:12px;background-color:#fff;border:1px solid #777;box-sizing:border-box;opacity:.8;pointer-events:all}.ql-resize-handle.tl{top:-6px;left:-6px;cursor:nwse-resize}.ql-resize-handle.tr{top:-6px;right:-6px;cursor:nesw-resize}.ql-resize-handle.br{right:-6px;bottom:-6px;cursor:nwse-resize}.ql-resize-handle.bl{left:-6px;bottom:-6px;cursor:nwse-resize}.ql-resize-display{position:absolute;padding:4px 8px;text-align:center;background-color:#fff;color:#333;border:1px solid #777;box-sizing:border-box;opacity:.8;cursor:default;line-height:1}.ql-resize-style-left{float:left;margin:0 1em 1em 0}.ql-resize-style-center{display:block;margin:auto}.ql-resize-style-right{float:right;margin:0 0 1em 1em}.ql-resize-style-full{width:100% !important}

package/dist/resize.js

@@ -1,5 +1,5 @@
 /*!
- * Quill Resize Module v2.0.1
+ * Quill Resize Module v2.0.3
  * https://github.com/mudoo/quill-resize-module
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("Quill")):"function"==typeof define&&define.amd?define(["Quill"],e):"object"==typeof exports?exports.QuillResize=e(require("Quill")):t.QuillResize=e(t.Quill)}(self,(t=>(()=>{"use strict";var e=[,e=>{e.exports=t}],i={};function o(t){var n=i[t];if(void 0!==n)return n.exports;var r=i[t]={exports:{}};return e[t](r,r.exports,o),r.exports}o.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return o.d(e,{a:e}),e},o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};o.r(n),o.d(n,{default:()=>ut});const r={modules:["DisplaySize","Toolbar","Resize","Keyboard"],keyboardSelect:!0,selectedClass:"selected",activeClass:"active",embedTags:["VIDEO","IFRAME"],parchment:{image:{attribute:["width"],limit:{minWidth:100}},video:{attribute:["width","height"],limit:{minWidth:200,ratio:.5625}}},styles:{overlay:{position:"absolute",boxSizing:"border-box",border:"1px dashed #444",pointerEvents:"none"},handle:{position:"absolute",height:"12px",width:"12px",backgroundColor:"white",border:"1px solid #777",boxSizing:"border-box",opacity:"0.80",pointerEvents:"all"},display:{position:"absolute",padding:"4px 8px",textAlign:"center",backgroundColor:"white",color:"#333",border:"1px solid #777",boxSizing:"border-box",opacity:"0.80",cursor:"default",lineHeight:"1"},toolbar:{position:"absolute",top:"-12px",right:"0",left:"0",height:"0",minWidth:"120px",textAlign:"center",color:"#333",boxSizing:"border-box",cursor:"default",pointerEvents:"all"},toolbarButton:{display:"inline-block",width:"24px",height:"24px",background:"white",border:"1px solid #999",verticalAlign:"middle"},toolbarButtonSvg:{}}};function l(t){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},l(t)}function s(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,a(o.key),o)}}function a(t){var e=function(t,e){if("object"!=l(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!=l(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==l(e)?e:e+""}var u=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.resizer=e,this.quill=e.quill,this.overlay=e.overlay,this.activeEle=e.activeEle,this.blot=e.blot,this.options=e.options,this.requestUpdate=function(){e.onUpdate(!0)}},(e=[{key:"onCreate",value:function(){}},{key:"onDestroy",value:function(){}},{key:"onUpdate",value:function(){}}])&&s(t.prototype,e),i&&s(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e,i}();function c(t){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c(t)}function h(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,f(o.key),o)}}function f(t){var e=function(t,e){if("object"!=c(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!=c(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==c(e)?e:e+""}function d(t,e,i){return e=y(e),function(t,e){if(e&&("object"==c(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,p()?Reflect.construct(e,i||[],y(t).constructor):e.apply(t,i))}function p(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(p=function(){return!!t})()}function y(t){return y=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},y(t)}function b(t,e){return b=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},b(t,e)}var v=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),d(this,e,arguments)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&b(t,e)}(e,t),i=e,(o=[{key:"onCreate",value:function(){this.display=document.createElement("div"),Object.assign(this.display.style,this.options.styles.display),this.overlay.appendChild(this.display)}},{key:"onUpdate",value:function(){if(this.display&&this.activeEle){var t=this.getCurrentSize();if(this.display.innerHTML=t.join(" &times; "),t[0]>120&&t[1]>30)Object.assign(this.display.style,{right:"4px",bottom:"4px",left:"auto"});else if("right"===this.activeEle.style.float){var e=this.display.getBoundingClientRect();Object.assign(this.display.style,{right:"auto",bottom:"-".concat(e.height+4,"px"),left:"-".concat(e.width+4,"px")})}else{var i=this.display.getBoundingClientRect();Object.assign(this.display.style,{right:"-".concat(i.width+4,"px"),bottom:"-".concat(i.height+4,"px"),left:"auto"})}}}},{key:"getCurrentSize",value:function(){return[this.activeEle.offsetWidth,this.activeEle.offsetHeight]}}])&&h(i.prototype,o),n&&h(i,n),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,o,n}(u);var m=o(1),g=o.n(m);function w(t){return w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},w(t)}function E(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,O(o.key),o)}}function O(t){var e=function(t,e){if("object"!=w(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!=w(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==w(e)?e:e+""}function x(t,e,i){return e=S(e),function(t,e){if(e&&("object"==w(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,j()?Reflect.construct(e,i||[],S(t).constructor):e.apply(t,i))}function j(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(j=function(){return!!t})()}function S(t){return S=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},S(t)}function P(t,e){return P=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},P(t,e)}var k=(window.Quill||g()).import("parchment"),C=new(k.ClassAttributor?k.ClassAttributor:k.Attributor.Class)("imagestyle","ql-resize-style"),q=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),x(this,e,arguments)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&P(t,e)}(e,t),i=e,(o=[{key:"onCreate",value:function(){this.toolbar=document.createElement("div"),Object.assign(this.toolbar.style,this.options.styles.toolbar),this.overlay.appendChild(this.toolbar),this._defineAlignments(),this._addToolbarButtons()}},{key:"_defineAlignments",value:function(){var t=this;this.alignments=[{icon:'<svg viewbox="0 0 18 18">\n  <path class="ql-fill" d="M15,8H13a1,1,0,0,1,0-2h2A1,1,0,0,1,15,8Z"/>\n  <path class="ql-fill" d="M15,12H13a1,1,0,0,1,0-2h2A1,1,0,0,1,15,12Z"/>\n  <path class="ql-fill" d="M15,16H5a1,1,0,0,1,0-2H15A1,1,0,0,1,15,16Z"/>\n  <path class="ql-fill" d="M15,4H5A1,1,0,0,1,5,2H15A1,1,0,0,1,15,4Z"/>\n  <rect class="ql-fill" x="2" y="6" width="8" height="6" rx="1" ry="1"/>\n</svg>',apply:function(){C.add(t.activeEle,"left")},isApplied:function(){return"left"===C.value(t.activeEle)}},{icon:'<svg viewbox="0 0 18 18">\n  <path class="ql-fill" d="M14,16H4a1,1,0,0,1,0-2H14A1,1,0,0,1,14,16Z"/>\n  <path class="ql-fill" d="M14,4H4A1,1,0,0,1,4,2H14A1,1,0,0,1,14,4Z"/>\n  <rect class="ql-fill" x="3" y="6" width="12" height="6" rx="1" ry="1"/>\n</svg>',apply:function(){C.add(t.activeEle,"center")},isApplied:function(){return"center"===C.value(t.activeEle)}},{icon:'<svg viewbox="0 0 18 18">\n  <path class="ql-fill" d="M5,8H3A1,1,0,0,1,3,6H5A1,1,0,0,1,5,8Z"/>\n  <path class="ql-fill" d="M5,12H3a1,1,0,0,1,0-2H5A1,1,0,0,1,5,12Z"/>\n  <path class="ql-fill" d="M13,16H3a1,1,0,0,1,0-2H13A1,1,0,0,1,13,16Z"/>\n  <path class="ql-fill" d="M13,4H3A1,1,0,0,1,3,2H13A1,1,0,0,1,13,4Z"/>\n  <rect class="ql-fill" x="8" y="6" width="8" height="6" rx="1" ry="1" transform="translate(24 18) rotate(-180)"/>\n</svg>',apply:function(){C.add(t.activeEle,"right")},isApplied:function(){return"right"===C.value(t.activeEle)}},{icon:'<svg viewbox="0 0 18 18">\n  <path class="ql-fill" d="M13,16H5a1,1,0,0,1,0-2h8A1,1,0,0,1,13,16Z"/>\n  <path class="ql-fill" d="M13,4H5A1,1,0,0,1,5,2h8A1,1,0,0,1,13,4Z"/>\n  <rect class="ql-fill" x="2" y="6" width="14" height="6" rx="1" ry="1"/>\n</svg>',apply:function(){C.add(t.activeEle,"full")},isApplied:function(){return"full"===C.value(t.activeEle)}}]}},{key:"_addToolbarButtons",value:function(){var t=this,e=[];this.alignments.forEach((function(i,o){var n=document.createElement("span");e.push(n),n.innerHTML=i.icon,n.addEventListener("click",(function(){e.forEach((function(t){return t.style.filter=""})),i.isApplied()?C.remove(t.activeEle):(t._selectButton(n),i.apply()),t.requestUpdate()})),Object.assign(n.style,t.options.styles.toolbarButton),o>0&&(n.style.borderLeftWidth="0"),Object.assign(n.children[0].style,t.options.styles.toolbarButtonSvg),i.isApplied()&&t._selectButton(n),t.toolbar.appendChild(n)}));var i=document.createElement("span");i.innerHTML='<svg viewBox="0 0 18 18">\n  <path class="ql-fill" d="M 12.9 2 L 11.3 3.6 L 14.8 7 L 16.3 5.5 L 12.9 2 Z M 9.3 5.5 L 2 12.2 L 2 15.5 L 5.7 15.5 L 13 8.9 L 9.3 5.5 Z"></path>\n</svg>\n',Object.assign(i.style,this.options.styles.toolbarButton),i.style.borderLeftWidth="0",i.addEventListener("click",(function(){t.quill.emitter.emit("resize-edit",t.activeEle,t.blot)})),this.toolbar.appendChild(i)}},{key:"_selectButton",value:function(t){t.style.filter="invert(20%)"}}])&&E(i.prototype,o),n&&E(i,n),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,o,n}(u);function A(t){return A="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},A(t)}function T(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,o)}return i}function L(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?T(Object(i),!0).forEach((function(e){B(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):T(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function B(t,e,i){return(e=z(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function M(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,z(o.key),o)}}function z(t){var e=function(t,e){if("object"!=A(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!=A(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==A(e)?e:e+""}function H(t,e,i){return e=D(e),function(t,e){if(e&&("object"==A(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,_()?Reflect.construct(e,i||[],D(t).constructor):e.apply(t,i))}function _(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(_=function(){return!!t})()}function D(t){return D=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},D(t)}function R(t,e){return R=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},R(t,e)}var N=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),H(this,e,arguments)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&R(t,e)}(e,t),i=e,o=[{key:"onCreate",value:function(){this.blotOptions=this.options.parchment[this.blot.statics.blotName],this.boxes=[],this.addBox("nwse-resize"),this.addBox("nesw-resize"),this.addBox("nwse-resize"),this.addBox("nesw-resize"),this.positionBoxes()}},{key:"onDestroy",value:function(){this.setCursor("")}},{key:"positionBoxes",value:function(){var t=this,e="".concat(-parseFloat(this.options.styles.handle.width)/2,"px"),i="".concat(-parseFloat(this.options.styles.handle.height)/2,"px");[{left:e,top:i},{right:e,top:i},{right:e,bottom:i},{left:e,bottom:i}].forEach((function(e,i){Object.assign(t.boxes[i].style,e)}))}},{key:"addBox",value:function(t){var e=document.createElement("div");Object.assign(e.style,this.options.styles.handle),e.style.cursor=t,e.style.width="".concat(this.options.styles.handle.width,"px"),e.style.height="".concat(this.options.styles.handle.height,"px"),e.addEventListener("mousedown",this.handleMousedown.bind(this),!1),this.overlay.appendChild(e),this.boxes.push(e)}},{key:"handleMousedown",value:function(t){var e=this;this.blot.handling&&this.blot.handling(!0),this.dragBox=t.target,this.dragStartX=t.clientX,this.dragStartY=t.clientY,this.preDragSize={width:this.activeEle.offsetWidth,height:this.activeEle.offsetHeight},this.naturalSize=this.getNaturalSize(),this.setCursor(this.dragBox.style.cursor),this.handleDragProxy=function(t){return e.handleDrag(t)},this.handleMouseupProxy=function(t){return e.handleMouseup(t)},document.addEventListener("mousemove",this.handleDragProxy,!1),document.addEventListener("mouseup",this.handleMouseupProxy,!1)}},{key:"handleMouseup",value:function(t){var e=this.calcSize(t,this.blotOptions.limit);Object.assign(this.activeEle,e),Object.assign(this.activeEle.style,{width:null,height:null}),this.setCursor(""),this.blot.handling&&this.blot.handling(!1),document.removeEventListener("mousemove",this.handleDragProxy),document.removeEventListener("mouseup",this.handleMouseupProxy)}},{key:"handleDrag",value:function(t){if(this.activeEle&&this.blot){var e=L(L({},this.blotOptions.limit),{},{unit:!0});Object.assign(this.activeEle.style,this.calcSize(t,e)),this.requestUpdate()}}},{key:"calcSize",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=t.clientX-this.dragStartX,n=t.clientY-this.dragStartY,r={},l=1;(this.blotOptions.attribute||["width"]).forEach((function(t){r[t]=e.preDragSize[t]})),this.dragBox!==this.boxes[0]&&this.dragBox!==this.boxes[3]||(l=-1),r.width&&(r.width=Math.round(this.preDragSize.width+o*l)),r.height&&(r.height=Math.round(this.preDragSize.height+n*l));var s,a=r.width,u=r.height;i.ratio?(i.minWidth&&(a=Math.max(i.minWidth,a)),i.maxWidth&&(a=Math.min(i.maxWidth,a)),u=a*i.ratio,i.minHeight&&u<i.minHeight&&(s=!0,u=i.minHeight),i.maxHeight&&u>i.maxHeight&&(s=!0,u=i.maxHeight),s&&(a=u/i.ratio)):(r.width&&(i.minWidth&&(a=Math.max(i.minWidth,a)),i.maxWidth&&(a=Math.min(i.maxWidth,a))),r.height&&(i.minHeight&&(u=Math.max(i.minHeight,u)),i.maxHeight&&(u=Math.min(i.maxHeight,u)))),i.unit&&(a&&(a+="px"),u&&(u+="px"));var c={};return a&&(c.width=a),u&&(c.height=u),c}},{key:"getNaturalSize",value:function(){var t=this.activeEle,e=[0,0];return t.getAttribute("data-size")?e=t.getAttribute("data-size").split(","):(e=[t.naturalWidth||t.offsetWidth,t.naturalHeight||t.offsetHeight],t.setAttribute("data-size",e[0]+","+e[1])),{width:parseInt(e[0]),height:parseInt(e[1])}}},{key:"setCursor",value:function(t){[document.body,this.activeEle].forEach((function(e){e.style.cursor=t}))}}],o&&M(i.prototype,o),n&&M(i,n),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,o,n}(u);function W(t){return W="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},W(t)}function U(t,e,i){return(e=K(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function I(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=i){var o,n,r,l,s=[],a=!0,u=!1;try{if(r=(i=i.call(t)).next,0===e){if(Object(i)!==i)return;a=!1}else for(;!(a=(o=r.call(i)).done)&&(s.push(o.value),s.length!==e);a=!0);}catch(t){u=!0,n=t}finally{try{if(!a&&null!=i.return&&(l=i.return(),Object(l)!==l))return}finally{if(u)throw n}}return s}}(t,e)||function(t,e){if(t){if("string"==typeof t)return F(t,e);var i={}.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?F(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function F(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,o=Array(e);i<e;i++)o[i]=t[i];return o}function Z(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,K(o.key),o)}}function K(t){var e=function(t,e){if("object"!=W(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!=W(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==W(e)?e:e+""}function Q(t,e,i){return e=X(e),function(t,e){if(e&&("object"==W(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,G()?Reflect.construct(e,i||[],X(t).constructor):e.apply(t,i))}function G(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(G=function(){return!!t})()}function X(t){return X=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},X(t)}function Y(t,e){return Y=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},Y(t,e)}var V=window.Quill||g(),$=V.import("parchment"),J={BACKSPACE:8,TAB:9,ENTER:13,ESCAPE:27,LEFT:37,UP:38,RIGHT:39,DOWN:40,DELETE:46},tt=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),Q(this,e,arguments)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&Y(t,e)}(e,t),i=e,n=[{key:"injectInit",value:function(t){var e=t.keyboard.bindings;e[this.keys.LEFT].unshift(this.makeArrowHandler(this.keys.LEFT,!1)),e[this.keys.RIGHT].unshift(this.makeArrowHandler(this.keys.RIGHT,!1))}},{key:"makeArrowHandler",value:function(t,i){var o=t===e.keys.LEFT?"prefix":"suffix";return U(U({key:t,shiftKey:i,altKey:null},o,/^$/),"handler",(function(i){if(!this.quill.resizer)return!0;var o=i.index,n=t===e.keys.LEFT,r=t===e.keys.RIGHT,l=I(this.quill.getLine(o+(n?-1:0)),1)[0];if(this.quill.resizer.judgeShow(l))return!1;var s=this.quill.getIndex(l);if(r&&s+l.length()-1===o)return!0;r&&(o+=i.length+1);var a=I(this.quill.getLeaf(o),1)[0],u=a.offset(a.parent),c=a.constructor.scope===$.Scope.BLOCK_BLOT;return!(!n||!(c&&o===u||0===o||o===s))||(n&&0===u&&(o-=1,a=this.quill.getLeaf(o)[0]),!this.quill.resizer.judgeShow(a))}))}}],(o=[{key:"onCreate",value:function(t){var e=this;this.keyboardProxy=function(t){return e.keyboardHandle(t)},document.addEventListener("keydown",this.keyboardProxy,!0)}},{key:"onDestroy",value:function(){document.removeEventListener("keydown",this.keyboardProxy,!0)}},{key:"keyboardHandle",value:function(t){if(!t.defaultPrevented&&!(t.shiftKey||t.ctrlKey||t.altKey)&&this.activeEle&&!t.fromResize&&!t.ctrlKey){var e,i=t.keyCode,o=this.blot.offset(this.quill.scroll),n=!1;i===J.BACKSPACE||i===J.DELETE?(this.blot.deleteAt(0),this.blot.parent.optimize(),n=!0):i>=J.LEFT&&i<=J.DOWN&&(i===J.RIGHT?o+=this.blot.length()||1:i===J.UP?(o=this.getOtherLineIndex(-1),e=this.quill.getLeaf(o)[0]):i===J.DOWN&&(o=this.getOtherLineIndex(1),e=this.quill.getLeaf(o)[0]),n=!0),n&&(t.stopPropagation(),t.preventDefault()),e&&this.resizer.judgeShow(e,e.domNode)||(this.quill.setSelection(o),this.resizer.hide())}}},{key:"getOtherLineIndex",value:function(t){var e=this.blot.offset(this.quill.scroll),i=I(this.quill.getLine(e),1)[0],o=this.blot.offset(i)+1,n=t>0?i.next:i.prev;if(n){var r=n.length();"block"===n.statics.blotName&&r--,e=n.offset(this.quill.scroll)+Math.min(r,o)}return e}},{key:"dispatchEvent",value:function(t){var e=new t.constructor(t);e.fromResize=!0,this.quill.root.dispatchEvent(e)}}])&&Z(i.prototype,o),n&&Z(i,n),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,o,n}(u);function et(t){return et="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},et(t)}function it(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,ot(o.key),o)}}function ot(t){var e=function(t,e){if("object"!=et(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!=et(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==et(e)?e:e+""}/^2\./.test(V.version)?tt.keys={BACKSPACE:"Backspace",TAB:"Tab",ENTER:"Enter",ESCAPE:"Escape",LEFT:"ArrowLeft",UP:"ArrowUp",RIGHT:"ArrowRight",DOWN:"ArrowDown",DELETE:"Delete"}:tt.keys=J;var nt,rt,lt,st=(window.Quill||g()).import("parchment"),at=function(){return t=function t(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),e.resizer=this,this.quill=e;var o=!1;i.modules&&(o=i.modules.slice()),this.options=Object.assign({},r,i),this.options.styles=Object.assign({},r.styles,i.styles),!1!==o&&(this.options.modules=o),document.execCommand("enableObjectResizing",!1,"false"),this.quill.root.addEventListener("mousedown",this.handleClick.bind(this),!1),this.quill.on("text-change",this.handleChange.bind(this)),this.quill.emitter.on("resize-edit",this.handleEdit.bind(this)),this.quill.container.style.position=this.quill.container.style.position||"relative",this.selectedBlots=[],this.options.selectedClass&&this.quill.on("selection-change",this.addBlotsSelectedClass.bind(this)),this.moduleClasses=this.options.modules,this.modules=[],this.options.keyboardSelect&&tt.injectInit(this.quill),this.options.embedTags&&this.initializeEmbed()},e=[{key:"initializeModules",value:function(){var t=this;this.removeModules(),this.modules=this.moduleClasses.map((function(e){return new(t.constructor.Modules[e]||e)(t)})),this.modules.forEach((function(e){e.onCreate(t)})),this.onUpdate()}},{key:"initializeEmbed",value:function(){if(this.options.embedTags.length){this.embedClassName="ql-".concat(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:8,e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";return Array.from({length:t},(function(){return e[Math.floor(62*Math.random())]})).join("")}());var t=[""].concat(this.options.embedTags).join(", .".concat(this.embedClassName," ")).slice(2);t+="{pointer-events: none;}";var e=document.createElement("style");e.textContent=t,this.quill.container.appendChild(e),this.quill.root.classList.add(this.embedClassName)}}},{key:"onUpdate",value:function(t){this.updateFromModule=t,this.repositionElements(),this.modules.forEach((function(t){t.onUpdate()}))}},{key:"removeModules",value:function(){this.modules.forEach((function(t){t.onDestroy()})),this.modules=[]}},{key:"handleEdit",value:function(){if(this.blot){var t=this.blot.offset(this.quill.scroll);this.hide(),this.quill.focus(),this.quill.setSelection(t,1)}}},{key:"handleClick",value:function(t){var e,i,o=!1,n=t.target,r=null===(e=this.options.embedTags)||void 0===e?void 0:e.join();if(r){var l=this.quill.root;(n===l||n.querySelectorAll(r).length)&&(l.classList.remove(this.embedClassName),n=document.elementFromPoint(t.clientX,t.clientY),l.classList.add(this.embedClassName))}n&&n.tagName&&(i=this.quill.constructor.find(n))&&(o=this.judgeShow(i,n)),o?t.preventDefault():this.activeEle&&this.hide()}},{key:"judgeShow",value:function(t,e){var i=!1;if(!t)return i;!e&&t.domNode&&(e=t.domNode);var o=this.options.parchment[t.statics.blotName];if(!o)return i;if(this.activeEle===e)return!0;var n=o.limit||{};return(!n.minWidth||n.minWidth&&e.offsetWidth>=n.minWidth)&&(i=!0,this.activeEle&&this.hide(),this.activeEle=e,this.blot=t,this.show(e)),i}},{key:"handleChange",value:function(t,e,i){this.updateFromModule?this.updateFromModule=!1:"user"===i&&this.overlay&&this.activeEle&&this.onUpdate()}},{key:"show",value:function(){this.showOverlay(),this.initializeModules(),this.options.activeClass&&this.activeEle.classList.add(this.options.activeClass)}},{key:"showOverlay",value:function(){var t=this;this.overlay&&this.hideOverlay(),this.quill.setSelection(null),this.setUserSelect("none"),this.overlay=document.createElement("div"),Object.assign(this.overlay.style,this.options.styles.overlay),this.overlay.addEventListener("dblclick",this.handleEdit.bind(this),!1),this.quill.container.appendChild(this.overlay),this.hideProxy=function(e){t.activeEle&&t.hide()},this.quill.root.addEventListener("input",this.hideProxy,!0),this.updateOverlayPositionProxy=this.updateOverlayPosition.bind(this),this.quill.root.addEventListener("scroll",this.updateOverlayPositionProxy),this.repositionElements()}},{key:"hideOverlay",value:function(){this.overlay&&(this.quill.container.removeChild(this.overlay),this.overlay=void 0,this.quill.root.removeEventListener("input",this.hideProxy,!0),this.quill.root.removeEventListener("scroll",this.updateOverlayPositionProxy),this.setUserSelect(""))}},{key:"repositionElements",value:function(){if(this.overlay&&this.activeEle){var t=this.quill.container,e=this.activeEle.getBoundingClientRect(),i=t.getBoundingClientRect();Object.assign(this.overlay.style,{left:"".concat(e.left-i.left-1+t.scrollLeft,"px"),top:"".concat(e.top-i.top+this.quill.root.scrollTop,"px"),width:"".concat(e.width,"px"),height:"".concat(e.height,"px"),marginTop:-1*this.quill.root.scrollTop+"px"})}}},{key:"updateOverlayPosition",value:function(){this.overlay.style.marginTop=-1*this.quill.root.scrollTop+"px"}},{key:"addBlotsSelectedClass",value:function(t,e){var i=this;if(!t)return this.removeBlotsSelectedClass(),void(this.selectedBlots=[]);var o=this.quill.scroll.descendants(st.Leaf||st.LeafBlot,t.index,t.length).filter((function(t){var e=!!i.options.parchment[t.statics.blotName];return e&&t.domNode.classList.add(i.options.selectedClass),e}));this.removeBlotsSelectedClass(o),this.selectedBlots=o}},{key:"removeBlotsSelectedClass",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];Array.isArray(e)||(e=[e]),this.selectedBlots.forEach((function(i){-1===e.indexOf(i)&&i.domNode.classList.remove(t.options.selectedClass)}))}},{key:"hide",value:function(){this.hideOverlay(),this.removeModules(),this.activeEle&&this.options.activeClass&&this.activeEle.classList.remove(this.options.activeClass),this.activeEle=void 0,this.blot=void 0}},{key:"setUserSelect",value:function(t){var e=this;["userSelect","mozUserSelect","webkitUserSelect","msUserSelect"].forEach((function(i){e.quill.root.style[i]=t,document.documentElement.style[i]=t}))}}],e&&it(t.prototype,e),i&&it(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e,i}();nt=at,lt={Base:u,DisplaySize:v,Toolbar:q,Resize:N,Keyboard:tt},(rt=ot(rt="Modules"))in nt?Object.defineProperty(nt,rt,{value:lt,enumerable:!0,configurable:!0,writable:!0}):nt[rt]=lt,window.Quill&&window.Quill.register("modules/resize",at);const ut=at;return n})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("Quill")):"function"==typeof define&&define.amd?define(["Quill"],e):"object"==typeof exports?exports.QuillResize=e(require("Quill")):t.QuillResize=e(t.Quill)}(self,(t=>(()=>{"use strict";var e=[,e=>{e.exports=t}],i={};function r(t){var o=i[t];if(void 0!==o)return o.exports;var n=i[t]={exports:{}};return e[t](n,n.exports,r),n.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};r.r(o),r.d(o,{default:()=>ct});const n={modules:["DisplaySize","Toolbar","Resize","Keyboard"],keyboardSelect:!0,selectedClass:"selected",activeClass:"active",embedTags:["VIDEO","IFRAME"],tools:["left","center","right","full","edit"],parchment:{image:{attribute:["width"],limit:{minWidth:100}},video:{attribute:["width","height"],limit:{minWidth:200,ratio:.5625}}}};function l(t){return l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},l(t)}function s(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,a(r.key),r)}}function a(t){var e=function(t,e){if("object"!=l(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,e||"default");if("object"!=l(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==l(e)?e:e+""}var u=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.resizer=e,this.quill=e.quill,this.overlay=e.overlay,this.activeEle=e.activeEle,this.blot=e.blot,this.options=e.options,this.requestUpdate=function(){e.onUpdate(!0)}},(e=[{key:"onCreate",value:function(){}},{key:"onDestroy",value:function(){}},{key:"onUpdate",value:function(){}}])&&s(t.prototype,e),i&&s(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e,i}();function c(t){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c(t)}function h(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,f(r.key),r)}}function f(t){var e=function(t,e){if("object"!=c(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,e||"default");if("object"!=c(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==c(e)?e:e+""}function d(t,e,i){return e=y(e),function(t,e){if(e&&("object"==c(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,p()?Reflect.construct(e,i||[],y(t).constructor):e.apply(t,i))}function p(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(p=function(){return!!t})()}function y(t){return y=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},y(t)}function v(t,e){return v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},v(t,e)}var b=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),d(this,e,arguments)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&v(t,e)}(e,t),i=e,(r=[{key:"onCreate",value:function(){this.display=document.createElement("div"),this.display.className="ql-resize-display",this.overlay.appendChild(this.display)}},{key:"onUpdate",value:function(){if(this.display&&this.activeEle){var t=this.getCurrentSize();if(this.display.innerHTML=t.join(" &times; "),t[0]>120&&t[1]>30)Object.assign(this.display.style,{right:"4px",bottom:"4px",left:"auto"});else if("right"===this.activeEle.style.float){var e=this.display.getBoundingClientRect();Object.assign(this.display.style,{right:"auto",bottom:"-".concat(e.height+4,"px"),left:"-".concat(e.width+4,"px")})}else{var i=this.display.getBoundingClientRect();Object.assign(this.display.style,{right:"-".concat(i.width+4,"px"),bottom:"-".concat(i.height+4,"px"),left:"auto"})}}}},{key:"getCurrentSize",value:function(){return[this.activeEle.offsetWidth,this.activeEle.offsetHeight]}}])&&h(i.prototype,r),o&&h(i,o),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,r,o}(u);var m=r(1),g=r.n(m);function w(t){return w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},w(t)}function E(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,k(r.key),r)}}function O(t,e,i){return e=S(e),function(t,e){if(e&&("object"==w(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,j()?Reflect.construct(e,i||[],S(t).constructor):e.apply(t,i))}function j(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(j=function(){return!!t})()}function S(t){return S=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},S(t)}function x(t,e){return x=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},x(t,e)}function P(t,e,i){return(e=k(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function k(t){var e=function(t,e){if("object"!=w(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,e||"default");if("object"!=w(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==w(e)?e:e+""}var q=(window.Quill||g()).import("parchment"),C=new(q.ClassAttributor?q.ClassAttributor:q.Attributor.Class)("imagestyle","ql-resize-style"),T=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),O(this,e,arguments)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&x(t,e)}(e,t),i=e,r=[{key:"onCreate",value:function(){this.toolbar=document.createElement("div"),this.toolbar.className="ql-resize-toolbar",this.overlay.appendChild(this.toolbar),this._addToolbarButtons()}},{key:"_addToolbarButtons",value:function(){var t=this,e=this.constructor.Icons,i=this.constructor.Tools,r=[];this.options.tools.forEach((function(o){var n=i[o]||o;if(!n.verify||!1!==n.verify.call(t,t.activeEle)){var l=document.createElement("button");r.push(l),l.innerHTML=(n.icon||"")+(n.text||"")||e[o],l.addEventListener("click",(function(e){n.handler&&!0!==n.handler.call(t,e,l,t.activeEle)||(r.forEach((function(t){return t.classList.remove("active")})),n.isApplied&&n.isApplied.call(t,t.activeEle)?C.remove(t.activeEle):(l.classList.add("active"),n.apply&&n.apply.call(t,t.activeEle)),t.requestUpdate())})),n.isApplied&&n.isApplied.call(t,t.activeEle)&&l.classList.add("active"),t.toolbar.appendChild(l)}}))}}],r&&E(i.prototype,r),o&&E(i,o),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,r,o}(u);function A(t){return A="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},A(t)}function L(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,r)}return i}function M(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?L(Object(i),!0).forEach((function(e){H(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):L(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function H(t,e,i){return(e=B(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function z(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,B(r.key),r)}}function B(t){var e=function(t,e){if("object"!=A(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,e||"default");if("object"!=A(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==A(e)?e:e+""}function _(t,e,i){return e=N(e),function(t,e){if(e&&("object"==A(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,D()?Reflect.construct(e,i||[],N(t).constructor):e.apply(t,i))}function D(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(D=function(){return!!t})()}function N(t){return N=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},N(t)}function R(t,e){return R=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},R(t,e)}P(T,"Icons",{left:'<svg viewbox="0 0 18 18">\n  <path class="ql-fill" d="M15,8H13a1,1,0,0,1,0-2h2A1,1,0,0,1,15,8Z"/>\n  <path class="ql-fill" d="M15,12H13a1,1,0,0,1,0-2h2A1,1,0,0,1,15,12Z"/>\n  <path class="ql-fill" d="M15,16H5a1,1,0,0,1,0-2H15A1,1,0,0,1,15,16Z"/>\n  <path class="ql-fill" d="M15,4H5A1,1,0,0,1,5,2H15A1,1,0,0,1,15,4Z"/>\n  <rect class="ql-fill" x="2" y="6" width="8" height="6" rx="1" ry="1"/>\n</svg>',center:'<svg viewbox="0 0 18 18">\n  <path class="ql-fill" d="M14,16H4a1,1,0,0,1,0-2H14A1,1,0,0,1,14,16Z"/>\n  <path class="ql-fill" d="M14,4H4A1,1,0,0,1,4,2H14A1,1,0,0,1,14,4Z"/>\n  <rect class="ql-fill" x="3" y="6" width="12" height="6" rx="1" ry="1"/>\n</svg>',right:'<svg viewbox="0 0 18 18">\n  <path class="ql-fill" d="M5,8H3A1,1,0,0,1,3,6H5A1,1,0,0,1,5,8Z"/>\n  <path class="ql-fill" d="M5,12H3a1,1,0,0,1,0-2H5A1,1,0,0,1,5,12Z"/>\n  <path class="ql-fill" d="M13,16H3a1,1,0,0,1,0-2H13A1,1,0,0,1,13,16Z"/>\n  <path class="ql-fill" d="M13,4H3A1,1,0,0,1,3,2H13A1,1,0,0,1,13,4Z"/>\n  <rect class="ql-fill" x="8" y="6" width="8" height="6" rx="1" ry="1" transform="translate(24 18) rotate(-180)"/>\n</svg>',full:'<svg viewbox="0 0 18 18">\n  <path class="ql-fill" d="M13,16H5a1,1,0,0,1,0-2h8A1,1,0,0,1,13,16Z"/>\n  <path class="ql-fill" d="M13,4H5A1,1,0,0,1,5,2h8A1,1,0,0,1,13,4Z"/>\n  <rect class="ql-fill" x="2" y="6" width="14" height="6" rx="1" ry="1"/>\n</svg>',edit:'<svg viewBox="0 0 18 18">\n  <path class="ql-fill" d="M 12.9 2 L 11.3 3.6 L 14.8 7 L 16.3 5.5 L 12.9 2 Z M 9.3 5.5 L 2 12.2 L 2 15.5 L 5.7 15.5 L 13 8.9 L 9.3 5.5 Z"></path>\n</svg>\n'}),P(T,"Tools",{left:{apply:function(t){C.add(t,"left")},isApplied:function(t){return"left"===C.value(t)}},center:{apply:function(t){C.add(t,"center")},isApplied:function(t){return"center"===C.value(t)}},right:{apply:function(t){C.add(t,"right")},isApplied:function(t){return"right"===C.value(t)}},full:{apply:function(t){C.add(t,"full")},isApplied:function(t){return"full"===C.value(t)}},edit:{handler:function(t,e,i){this.quill.emitter.emit("resize-edit",i,this.blot)}}});var W=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),_(this,e,arguments)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&R(t,e)}(e,t),i=e,r=[{key:"onCreate",value:function(){this.blotOptions=this.options.parchment[this.blot.statics.blotName],this.boxes=[],this.addBox("tl"),this.addBox("tr"),this.addBox("br"),this.addBox("bl")}},{key:"onDestroy",value:function(){this.setCursor("")}},{key:"addBox",value:function(t){var e=document.createElement("div");e.className="ql-resize-handle ".concat(t),e.addEventListener("mousedown",this.handleMousedown.bind(this),!1),this.overlay.appendChild(e),this.boxes.push(e)}},{key:"handleMousedown",value:function(t){var e=this;this.blot.handling&&this.blot.handling(!0),this.dragBox=t.target,this.dragStartX=t.clientX,this.dragStartY=t.clientY,this.preDragSize={width:this.activeEle.offsetWidth,height:this.activeEle.offsetHeight},this.naturalSize=this.getNaturalSize();var i=window.getComputedStyle(this.dragBox).cursor;this.setCursor(i),this.handleDragProxy=function(t){return e.handleDrag(t)},this.handleMouseupProxy=function(t){return e.handleMouseup(t)},document.addEventListener("mousemove",this.handleDragProxy,!1),document.addEventListener("mouseup",this.handleMouseupProxy,!1)}},{key:"handleMouseup",value:function(t){var e=this.calcSize(t,this.blotOptions.limit);Object.assign(this.activeEle,e),Object.assign(this.activeEle.style,{width:null,height:null}),this.setCursor(""),this.blot.handling&&this.blot.handling(!1),document.removeEventListener("mousemove",this.handleDragProxy),document.removeEventListener("mouseup",this.handleMouseupProxy)}},{key:"handleDrag",value:function(t){if(this.activeEle&&this.blot){var e=M(M({},this.blotOptions.limit),{},{unit:!0});Object.assign(this.activeEle.style,this.calcSize(t,e)),this.requestUpdate()}}},{key:"calcSize",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.clientX-this.dragStartX,o=t.clientY-this.dragStartY,n={},l=1;(this.blotOptions.attribute||["width"]).forEach((function(t){n[t]=e.preDragSize[t]})),this.dragBox!==this.boxes[0]&&this.dragBox!==this.boxes[3]||(l=-1),n.width&&(n.width=Math.round(this.preDragSize.width+r*l)),n.height&&(n.height=Math.round(this.preDragSize.height+o*l));var s,a=n.width,u=n.height;i.ratio?(i.minWidth&&(a=Math.max(i.minWidth,a)),i.maxWidth&&(a=Math.min(i.maxWidth,a)),u=a*i.ratio,i.minHeight&&u<i.minHeight&&(s=!0,u=i.minHeight),i.maxHeight&&u>i.maxHeight&&(s=!0,u=i.maxHeight),s&&(a=u/i.ratio)):(n.width&&(i.minWidth&&(a=Math.max(i.minWidth,a)),i.maxWidth&&(a=Math.min(i.maxWidth,a))),n.height&&(i.minHeight&&(u=Math.max(i.minHeight,u)),i.maxHeight&&(u=Math.min(i.maxHeight,u)))),i.unit&&(a&&(a+="px"),u&&(u+="px"));var c={};return a&&(c.width=a),u&&(c.height=u),c}},{key:"getNaturalSize",value:function(){var t=this.activeEle,e=[0,0];return t.getAttribute("data-size")?e=t.getAttribute("data-size").split(","):(e=[t.naturalWidth||t.offsetWidth,t.naturalHeight||t.offsetHeight],t.setAttribute("data-size",e[0]+","+e[1])),{width:parseInt(e[0]),height:parseInt(e[1])}}},{key:"setCursor",value:function(t){[document.body,this.activeEle].forEach((function(e){e.style.cursor="".concat(t," !important")}))}}],r&&z(i.prototype,r),o&&z(i,o),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,r,o}(u);function I(t){return I="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},I(t)}function U(t,e,i){return(e=Q(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function Z(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=i){var r,o,n,l,s=[],a=!0,u=!1;try{if(n=(i=i.call(t)).next,0===e){if(Object(i)!==i)return;a=!1}else for(;!(a=(r=n.call(i)).done)&&(s.push(r.value),s.length!==e);a=!0);}catch(t){u=!0,o=t}finally{try{if(!a&&null!=i.return&&(l=i.return(),Object(l)!==l))return}finally{if(u)throw o}}return s}}(t,e)||function(t,e){if(t){if("string"==typeof t)return F(t,e);var i={}.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?F(t,e):void 0}}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function F(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=Array(e);i<e;i++)r[i]=t[i];return r}function K(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,Q(r.key),r)}}function Q(t){var e=function(t,e){if("object"!=I(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,e||"default");if("object"!=I(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==I(e)?e:e+""}function G(t,e,i){return e=Y(e),function(t,e){if(e&&("object"==I(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}(t,X()?Reflect.construct(e,i||[],Y(t).constructor):e.apply(t,i))}function X(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(X=function(){return!!t})()}function Y(t){return Y=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},Y(t)}function V(t,e){return V=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},V(t,e)}var $=window.Quill||g(),J=$.import("parchment"),tt={BACKSPACE:8,TAB:9,ENTER:13,ESCAPE:27,LEFT:37,UP:38,RIGHT:39,DOWN:40,DELETE:46},et=function(t){function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),G(this,e,arguments)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&V(t,e)}(e,t),i=e,o=[{key:"injectInit",value:function(t){var e=t.keyboard.bindings;e[this.keys.LEFT].unshift(this.makeArrowHandler(this.keys.LEFT,!1)),e[this.keys.RIGHT].unshift(this.makeArrowHandler(this.keys.RIGHT,!1))}},{key:"makeArrowHandler",value:function(t,i){var r=t===e.keys.LEFT?"prefix":"suffix";return U(U({key:t,shiftKey:i,altKey:null},r,/^$/),"handler",(function(i){if(!this.quill.resizer)return!0;var r=i.index,o=t===e.keys.LEFT,n=t===e.keys.RIGHT,l=Z(this.quill.getLine(r+(o?-1:0)),1)[0];if(this.quill.resizer.judgeShow(l))return!1;var s=this.quill.getIndex(l);if(n&&s+l.length()-1===r)return!0;n&&(r+=i.length+1);var a=Z(this.quill.getLeaf(r),1)[0],u=a.offset(a.parent),c=a.constructor.scope===J.Scope.BLOCK_BLOT;return!(!o||!(c&&r===u||0===r||r===s))||(o&&0===u&&(r-=1,a=this.quill.getLeaf(r)[0]),!this.quill.resizer.judgeShow(a))}))}}],(r=[{key:"onCreate",value:function(t){var e=this;this.keyboardProxy=function(t){return e.keyboardHandle(t)},document.addEventListener("keydown",this.keyboardProxy,!0)}},{key:"onDestroy",value:function(){document.removeEventListener("keydown",this.keyboardProxy,!0)}},{key:"keyboardHandle",value:function(t){if(!t.defaultPrevented&&!(t.shiftKey||t.ctrlKey||t.altKey)&&this.activeEle&&!t.fromResize&&!t.ctrlKey){var e,i=t.keyCode,r=this.blot.offset(this.quill.scroll),o=!1;i===tt.BACKSPACE||i===tt.DELETE?(this.blot.deleteAt(0),this.blot.parent.optimize(),o=!0):i>=tt.LEFT&&i<=tt.DOWN&&(i===tt.RIGHT?r+=this.blot.length()||1:i===tt.UP?(r=this.getOtherLineIndex(-1),e=this.quill.getLeaf(r)[0]):i===tt.DOWN&&(r=this.getOtherLineIndex(1),e=this.quill.getLeaf(r)[0]),o=!0),o&&(t.stopPropagation(),t.preventDefault()),e&&this.resizer.judgeShow(e,e.domNode)||(this.quill.setSelection(r),this.resizer.hide())}}},{key:"getOtherLineIndex",value:function(t){var e=this.blot.offset(this.quill.scroll),i=Z(this.quill.getLine(e),1)[0],r=this.blot.offset(i)+1,o=t>0?i.next:i.prev;if(o){var n=o.length();"block"===o.statics.blotName&&n--,e=o.offset(this.quill.scroll)+Math.min(n,r)}return e}},{key:"dispatchEvent",value:function(t){var e=new t.constructor(t);e.fromResize=!0,this.quill.root.dispatchEvent(e)}}])&&K(i.prototype,r),o&&K(i,o),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,r,o}(u);function it(t){return it="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},it(t)}function rt(t,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,ot(r.key),r)}}function ot(t){var e=function(t,e){if("object"!=it(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var r=i.call(t,e||"default");if("object"!=it(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==it(e)?e:e+""}/^2\./.test($.version)?et.keys={BACKSPACE:"Backspace",TAB:"Tab",ENTER:"Enter",ESCAPE:"Escape",LEFT:"ArrowLeft",UP:"ArrowUp",RIGHT:"ArrowRight",DOWN:"ArrowDown",DELETE:"Delete"}:et.keys=tt;var nt,lt,st,at=(window.Quill||g()).import("parchment"),ut=function(){return t=function t(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),e.resizer=this,this.quill=e;var r=!1;i.modules&&(r=i.modules.slice()),this.options=Object.assign({},n,i),!1!==r&&(this.options.modules=r),document.execCommand("enableObjectResizing",!1,"false"),this.quill.root.addEventListener("mousedown",this.handleClick.bind(this),!1),this.quill.on("text-change",this.handleChange.bind(this)),this.quill.emitter.on("resize-edit",this.handleEdit.bind(this)),this.quill.container.style.position=this.quill.container.style.position||"relative",this.selectedBlots=[],this.options.selectedClass&&this.quill.on("selection-change",this.addBlotsSelectedClass.bind(this)),this.moduleClasses=this.options.modules,this.modules=[],this.options.keyboardSelect&&et.injectInit(this.quill),this.options.embedTags&&this.initializeEmbed()},e=[{key:"initializeModules",value:function(){var t=this;this.removeModules(),this.modules=this.moduleClasses.map((function(e){return new(t.constructor.Modules[e]||e)(t)})),this.modules.forEach((function(e){e.onCreate(t)})),this.onUpdate()}},{key:"initializeEmbed",value:function(){if(this.options.embedTags.length){this.embedClassName="ql-".concat(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:8,e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";return Array.from({length:t},(function(){return e[Math.floor(62*Math.random())]})).join("")}());var t=[""].concat(this.options.embedTags).join(", .".concat(this.embedClassName," ")).slice(2);t+="{pointer-events: none;}";var e=document.createElement("style");e.textContent=t,this.quill.container.appendChild(e),this.quill.root.classList.add(this.embedClassName)}}},{key:"onUpdate",value:function(t){this.updateFromModule=t,this.repositionElements(),this.modules.forEach((function(t){t.onUpdate()}))}},{key:"removeModules",value:function(){this.modules.forEach((function(t){t.onDestroy()})),this.modules=[]}},{key:"handleEdit",value:function(){if(this.blot){var t=this.blot.offset(this.quill.scroll);this.hide(),this.quill.focus(),this.quill.setSelection(t,1)}}},{key:"handleClick",value:function(t){var e,i,r=!1,o=t.target,n=null===(e=this.options.embedTags)||void 0===e?void 0:e.join();if(n){var l=this.quill.root;(o===l||o.querySelectorAll(n).length)&&(l.classList.remove(this.embedClassName),o=document.elementFromPoint(t.clientX,t.clientY),l.classList.add(this.embedClassName))}o&&o.tagName&&(i=this.quill.constructor.find(o))&&(r=this.judgeShow(i,o)),r?t.preventDefault():this.activeEle&&this.hide()}},{key:"judgeShow",value:function(t,e){var i=!1;if(!t)return i;!e&&t.domNode&&(e=t.domNode);var r=this.options.parchment[t.statics.blotName];if(!r)return i;if(this.activeEle===e)return!0;var o=r.limit||{};return(!o.minWidth||o.minWidth&&e.offsetWidth>=o.minWidth)&&(i=!0,this.activeEle&&this.hide(),this.activeEle=e,this.blot=t,this.show(e)),i}},{key:"handleChange",value:function(t,e,i){this.updateFromModule?this.updateFromModule=!1:"user"===i&&this.overlay&&this.activeEle&&this.onUpdate()}},{key:"show",value:function(){this.showOverlay(),this.initializeModules(),this.options.activeClass&&this.activeEle.classList.add(this.options.activeClass)}},{key:"showOverlay",value:function(){var t=this;this.overlay&&this.hideOverlay(),this.quill.setSelection(null),this.setUserSelect("none"),this.overlay=document.createElement("div"),this.overlay.className="ql-resize-overlay",this.overlay.addEventListener("dblclick",this.handleEdit.bind(this),!1),this.quill.container.appendChild(this.overlay),this.hideProxy=function(e){t.activeEle&&t.hide()},this.quill.root.addEventListener("input",this.hideProxy,!0),this.updateOverlayPositionProxy=this.updateOverlayPosition.bind(this),this.quill.root.addEventListener("scroll",this.updateOverlayPositionProxy),this.repositionElements()}},{key:"hideOverlay",value:function(){this.overlay&&(this.quill.container.removeChild(this.overlay),this.overlay=void 0,this.quill.root.removeEventListener("input",this.hideProxy,!0),this.quill.root.removeEventListener("scroll",this.updateOverlayPositionProxy),this.setUserSelect(""))}},{key:"repositionElements",value:function(){if(this.overlay&&this.activeEle){var t=this.quill.container,e=this.activeEle.getBoundingClientRect(),i=t.getBoundingClientRect();Object.assign(this.overlay.style,{left:"".concat(e.left-i.left-1+t.scrollLeft,"px"),top:"".concat(e.top-i.top+this.quill.root.scrollTop,"px"),width:"".concat(e.width,"px"),height:"".concat(e.height,"px"),marginTop:-1*this.quill.root.scrollTop+"px"})}}},{key:"updateOverlayPosition",value:function(){this.overlay.style.marginTop=-1*this.quill.root.scrollTop+"px"}},{key:"addBlotsSelectedClass",value:function(t,e){var i=this;if(!t)return this.removeBlotsSelectedClass(),void(this.selectedBlots=[]);var r=this.quill.scroll.descendants(at.Leaf||at.LeafBlot,t.index,t.length).filter((function(t){var e=!!i.options.parchment[t.statics.blotName];return e&&t.domNode.classList.add(i.options.selectedClass),e}));this.removeBlotsSelectedClass(r),this.selectedBlots=r}},{key:"removeBlotsSelectedClass",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];Array.isArray(e)||(e=[e]),this.selectedBlots.forEach((function(i){-1===e.indexOf(i)&&i.domNode.classList.remove(t.options.selectedClass)}))}},{key:"hide",value:function(){this.hideOverlay(),this.removeModules(),this.activeEle&&this.options.activeClass&&this.activeEle.classList.remove(this.options.activeClass),this.activeEle=void 0,this.blot=void 0}},{key:"setUserSelect",value:function(t){var e=this;["userSelect","mozUserSelect","webkitUserSelect","msUserSelect"].forEach((function(i){e.quill.root.style[i]=t,document.documentElement.style[i]=t}))}}],e&&rt(t.prototype,e),i&&rt(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e,i}();nt=ut,st={Base:u,DisplaySize:b,Toolbar:T,Resize:W,Keyboard:et},(lt=ot(lt="Modules"))in nt?Object.defineProperty(nt,lt,{value:st,enumerable:!0,configurable:!0,writable:!0}):nt[lt]=st,window.Quill&&window.Quill.register("modules/resize",ut);const ct=ut;return o})()));

package/package.json

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

package/src/DefaultOptions.js

@@ -4,6 +4,7 @@ export default {
   selectedClass: 'selected',
   activeClass: 'active',
   embedTags: ['VIDEO', 'IFRAME'],
+  tools: ['left', 'center', 'right', 'full', 'edit'],
 
   parchment: {
     image: {
@@ -19,58 +20,5 @@ export default {
         ratio: 0.5625
       }
     }
-  },
-
-  styles: {
-    overlay: {
-      position: 'absolute',
-      boxSizing: 'border-box',
-      border: '1px dashed #444',
-      pointerEvents: 'none'
-    },
-    handle: {
-      position: 'absolute',
-      height: '12px',
-      width: '12px',
-      backgroundColor: 'white',
-      border: '1px solid #777',
-      boxSizing: 'border-box',
-      opacity: '0.80',
-      pointerEvents: 'all'
-    },
-    display: {
-      position: 'absolute',
-      padding: '4px 8px',
-      textAlign: 'center',
-      backgroundColor: 'white',
-      color: '#333',
-      border: '1px solid #777',
-      boxSizing: 'border-box',
-      opacity: '0.80',
-      cursor: 'default',
-      lineHeight: '1'
-    },
-    toolbar: {
-      position: 'absolute',
-      top: '-12px',
-      right: '0',
-      left: '0',
-      height: '0',
-      minWidth: '120px',
-      textAlign: 'center',
-      color: '#333',
-      boxSizing: 'border-box',
-      cursor: 'default',
-      pointerEvents: 'all'
-    },
-    toolbarButton: {
-      display: 'inline-block',
-      width: '24px',
-      height: '24px',
-      background: 'white',
-      border: '1px solid #999',
-      verticalAlign: 'middle'
-    },
-    toolbarButtonSvg: {}
   }
 }

package/src/QuillResize.js

@@ -31,7 +31,6 @@ export default class QuillResize {
 
     // Apply options to default options
     this.options = Object.assign({}, DefaultOptions, options)
-    this.options.styles = Object.assign({}, DefaultOptions.styles, options.styles)
 
     // (see above about moduleClasses)
     if (moduleClasses !== false) {
@@ -216,8 +215,8 @@ export default class QuillResize {
 
     // Create and add the overlay
     this.overlay = document.createElement('div')
+    this.overlay.className = 'ql-resize-overlay'
     // this.overlay.setAttribute('title', "Double-click to select image");
-    Object.assign(this.overlay.style, this.options.styles.overlay)
     this.overlay.addEventListener('dblclick', this.handleEdit.bind(this), false)
 
     this.quill.container.appendChild(this.overlay)

package/src/assets/resize.scss

@@ -0,0 +1,112 @@
+.ql-resize-overlay {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed #444;
+  pointer-events: none;
+}
+
+.ql-resize-toolbar {
+  position: absolute;
+  top: -12px;
+  right: 0;
+  left: 0;
+  height: 0;
+  min-width: 120px;
+  text-align: center;
+  color: #333;
+  box-sizing: border-box;
+  cursor: default;
+  pointer-events: all;
+
+  button {
+    display: inline-block;
+    min-width: 24px;
+    height: 24px;
+    padding: 2px;
+    background-color: #fff;
+    border: 1px solid #999;
+    vertical-align: middle;
+
+    &:first-child {
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+    &:last-child {
+      border-bottom-right-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+
+    &:not(:first-child) {
+      border-left: none;
+    }
+
+    &.active {
+      filter: invert(20%);
+    }
+  }
+
+  svg {
+    width: 18px;
+  }
+}
+
+.ql-resize-handle {
+  position: absolute;
+  height: 12px;
+  width: 12px;
+  background-color: white;
+  border: 1px solid #777;
+  box-sizing: border-box;
+  opacity: 0.80;
+  pointer-events: all;
+
+  &.tl {
+    top: -6px;
+    left: -6px;
+    cursor: nwse-resize;
+  }
+  &.tr {
+    top: -6px;
+    right: -6px;
+    cursor: nesw-resize;
+  }
+  &.br {
+    right: -6px;
+    bottom: -6px;
+    cursor: nwse-resize;
+  }
+  &.bl {
+    left: -6px;
+    bottom: -6px;
+    cursor: nwse-resize;
+  }
+}
+
+.ql-resize-display {
+  position: absolute;
+  padding: 4px 8px;
+  text-align: center;
+  background-color: white;
+  color: #333;
+  border: 1px solid #777;
+  box-sizing: border-box;
+  opacity: 0.80;
+  cursor: default;
+  line-height: 1;
+}
+
+.ql-resize-style-left {
+    float: left;
+    margin: 0 1em 1em 0;
+}
+.ql-resize-style-center {
+    display: block;
+    margin: auto;
+}
+.ql-resize-style-right {
+    float: right;
+    margin: 0 0 1em 1em;
+}
+.ql-resize-style-full {
+    width: 100% !important;
+}

package/src/index.js

@@ -1,4 +1,4 @@
 import QuillResize from './QuillResize'
-import './assets/resize.css'
+import './assets/resize.scss'
 
 export default QuillResize

package/src/modules/DisplaySize.js

@@ -4,9 +4,7 @@ export default class DisplaySize extends BaseModule {
   onCreate () {
     // Create the container to hold the size display
     this.display = document.createElement('div')
-
-    // Apply styles
-    Object.assign(this.display.style, this.options.styles.display)
+    this.display.className = 'ql-resize-display'
 
     // Attach it
     this.overlay.appendChild(this.display)

package/src/modules/Resize.js

@@ -7,12 +7,10 @@ export default class Resize extends BaseModule {
     this.boxes = []
 
     // add 4 resize handles
-    this.addBox('nwse-resize') // top left
-    this.addBox('nesw-resize') // top right
-    this.addBox('nwse-resize') // bottom right
-    this.addBox('nesw-resize') // bottom left
-
-    this.positionBoxes()
+    this.addBox('tl') // top left
+    this.addBox('tr') // top right
+    this.addBox('br') // bottom right
+    this.addBox('bl') // bottom left
   }
 
   onDestroy () {
@@ -20,34 +18,10 @@ export default class Resize extends BaseModule {
     this.setCursor('')
   }
 
-  positionBoxes () {
-    const handleXOffset = `${-parseFloat(this.options.styles.handle.width) /
-      2}px`
-    const handleYOffset = `${-parseFloat(this.options.styles.handle.height) /
-      2}px`
-
-    // set the top and left for each drag handle
-    ;[
-      { left: handleXOffset, top: handleYOffset }, // top left
-      { right: handleXOffset, top: handleYOffset }, // top right
-      { right: handleXOffset, bottom: handleYOffset }, // bottom right
-      { left: handleXOffset, bottom: handleYOffset } // bottom left
-    ].forEach((pos, idx) => {
-      Object.assign(this.boxes[idx].style, pos)
-    })
-  }
-
-  addBox (cursor) {
+  addBox (place) {
     // create div element for resize handle
     const box = document.createElement('div')
-
-    // Star with the specified styles
-    Object.assign(box.style, this.options.styles.handle)
-    box.style.cursor = cursor
-
-    // Set the width/height to use 'px'
-    box.style.width = `${this.options.styles.handle.width}px`
-    box.style.height = `${this.options.styles.handle.height}px`
+    box.className = `ql-resize-handle ${place}`
 
     // listen for mousedown on each box
     box.addEventListener('mousedown', this.handleMousedown.bind(this), false)
@@ -72,7 +46,8 @@ export default class Resize extends BaseModule {
     // store the natural size
     this.naturalSize = this.getNaturalSize()
     // set the proper cursor everywhere
-    this.setCursor(this.dragBox.style.cursor)
+    const cursor = window.getComputedStyle(this.dragBox).cursor
+    this.setCursor(cursor)
 
     this.handleDragProxy = evt => this.handleDrag(evt)
     this.handleMouseupProxy = evt => this.handleMouseup(evt)
@@ -198,7 +173,7 @@ export default class Resize extends BaseModule {
 
   setCursor (value) {
     [document.body, this.activeEle].forEach(el => {
-      el.style.cursor = value // eslint-disable-line no-param-reassign
+      el.style.cursor = `${value} !important` // eslint-disable-line no-param-reassign
     })
   }
 }

package/src/modules/Toolbar.js

@@ -1,10 +1,10 @@
 import BaseModule from './BaseModule'
 
-import IconAlignLeft from 'quill/assets/icons/float-left.svg'
-import IconAlignCenter from 'quill/assets/icons/float-center.svg'
-import IconAlignRight from 'quill/assets/icons/float-right.svg'
-import IconFloatFull from 'quill/assets/icons/float-full.svg'
-import IconPencil from '../assets/pencil.svg'
+import IconAlignLeft from 'quill/assets/icons/float-left.svg?raw'
+import IconAlignCenter from 'quill/assets/icons/float-center.svg?raw'
+import IconAlignRight from 'quill/assets/icons/float-right.svg?raw'
+import IconFloatFull from 'quill/assets/icons/float-full.svg?raw'
+import IconPencil from '../assets/pencil.svg?raw'
 
 import _Quill from 'quill'
 const Quill = window.Quill || _Quill
@@ -18,97 +18,98 @@ const ClassAttributor = Parchment.ClassAttributor
 const ImageFormatClass = new ClassAttributor('imagestyle', 'ql-resize-style')
 
 export default class Toolbar extends BaseModule {
+  static Icons = {
+    left: IconAlignLeft,
+    center: IconAlignCenter,
+    right: IconAlignRight,
+    full: IconFloatFull,
+    edit: IconPencil
+  }
+
+  static Tools = {
+    left: {
+      apply (activeEle) {
+        ImageFormatClass.add(activeEle, 'left')
+      },
+      isApplied (activeEle) {
+        return ImageFormatClass.value(activeEle) === 'left'
+      }
+    },
+    center: {
+      apply (activeEle) {
+        ImageFormatClass.add(activeEle, 'center')
+      },
+      isApplied (activeEle) {
+        return ImageFormatClass.value(activeEle) === 'center'
+      }
+    },
+    right: {
+      apply (activeEle) {
+        ImageFormatClass.add(activeEle, 'right')
+      },
+      isApplied (activeEle) {
+        return ImageFormatClass.value(activeEle) === 'right'
+      }
+    },
+    full: {
+      apply (activeEle) {
+        ImageFormatClass.add(activeEle, 'full')
+      },
+      isApplied (activeEle) {
+        return ImageFormatClass.value(activeEle) === 'full'
+      }
+    },
+    edit: {
+      handler (evt, button, activeEle) {
+        this.quill.emitter.emit('resize-edit', activeEle, this.blot)
+      }
+    }
+  }
+
   onCreate () {
     // Setup Toolbar
     this.toolbar = document.createElement('div')
-    Object.assign(this.toolbar.style, this.options.styles.toolbar)
+    this.toolbar.className = 'ql-resize-toolbar'
     this.overlay.appendChild(this.toolbar)
 
     // Setup Buttons
-    this._defineAlignments()
     this._addToolbarButtons()
   }
 
-  _defineAlignments () {
-    this.alignments = [
-      {
-        icon: IconAlignLeft,
-        apply: () => {
-          ImageFormatClass.add(this.activeEle, 'left')
-        },
-        isApplied: () => ImageFormatClass.value(this.activeEle) === 'left'
-      },
-      {
-        icon: IconAlignCenter,
-        apply: () => {
-          ImageFormatClass.add(this.activeEle, 'center')
-        },
-        isApplied: () => ImageFormatClass.value(this.activeEle) === 'center'
-      },
-      {
-        icon: IconAlignRight,
-        apply: () => {
-          ImageFormatClass.add(this.activeEle, 'right')
-        },
-        isApplied: () => ImageFormatClass.value(this.activeEle) === 'right'
-      },
-      {
-        icon: IconFloatFull,
-        apply: () => {
-          ImageFormatClass.add(this.activeEle, 'full')
-        },
-        isApplied: () => ImageFormatClass.value(this.activeEle) === 'full'
-      }
-    ]
-  }
-
   _addToolbarButtons () {
+    const Icons = this.constructor.Icons
+    const Tools = this.constructor.Tools
     const buttons = []
-    this.alignments.forEach((alignment, idx) => {
-      const button = document.createElement('span')
+    this.options.tools.forEach((t) => {
+      const tool = Tools[t] || t
+      if (tool.verify && tool.verify.call(this, this.activeEle) === false) return
+
+      const button = document.createElement('button')
       buttons.push(button)
-      button.innerHTML = alignment.icon
-      button.addEventListener('click', () => {
+      button.innerHTML = ((tool.icon || '') + (tool.text || '')) || Icons[t]
+      button.addEventListener('click', (evt) => {
+        if (tool.handler && tool.handler.call(this, evt, button, this.activeEle) !== true) return
+
         // deselect all buttons
-        buttons.forEach(button => (button.style.filter = ''))
-        if (alignment.isApplied()) {
+        buttons.forEach(button => (button.classList.remove('active')))
+        if (tool.isApplied && tool.isApplied.call(this, this.activeEle)) {
           // If applied, unapply
           ImageFormatClass.remove(this.activeEle)
         } else {
           // otherwise, select button and apply
-          this._selectButton(button)
-          alignment.apply()
+          button.classList.add('active')
+          tool.apply && tool.apply.call(this, this.activeEle)
         }
+
         // image may change position; redraw drag handles
         this.requestUpdate()
       })
-      Object.assign(button.style, this.options.styles.toolbarButton)
-      if (idx > 0) {
-        button.style.borderLeftWidth = '0'
-      }
-      Object.assign(
-        button.children[0].style,
-        this.options.styles.toolbarButtonSvg
-      )
-      if (alignment.isApplied()) {
+
+      if (tool.isApplied && tool.isApplied.call(this, this.activeEle)) {
         // select button if previously applied
-        this._selectButton(button)
+        button.classList.add('active')
       }
       this.toolbar.appendChild(button)
     })
-
-    // Edit button
-    const button = document.createElement('span')
-    button.innerHTML = IconPencil
-    Object.assign(button.style, this.options.styles.toolbarButton)
-    button.style.borderLeftWidth = '0'
-    button.addEventListener('click', () => {
-      this.quill.emitter.emit('resize-edit', this.activeEle, this.blot)
-    })
-    this.toolbar.appendChild(button)
-  }
-
-  _selectButton (button) {
-    button.style.filter = 'invert(20%)'
   }
 }

package/src/assets/resize.css

@@ -1,15 +0,0 @@
-.ql-resize-style-left {
-    float: left;
-    margin: 0 1em 1em 0;
-}
-.ql-resize-style-center {
-    display: block;
-    margin: auto;
-}
-.ql-resize-style-right {
-    float: right;
-    margin: 0 0 1em 1em;
-}
-.ql-resize-style-full {
-    width: 100% !important;
-}