quill-resize-module 1.2.4 → 2.0.0

package/src/QuillResize.js

@@ -1,21 +1,22 @@
 import DefaultOptions from './DefaultOptions'
+import Base from './modules/BaseModule.js'
 import DisplaySize from './modules/DisplaySize'
 import Toolbar from './modules/Toolbar'
 import Resize from './modules/Resize'
 import Keyboard from './modules/Keyboard'
 
 import _Quill from 'quill'
+import { randomString } from './Util.js'
 const Quill = window.Quill || _Quill
 const Parchment = Quill.import('parchment')
 
-const knownModules = { DisplaySize, Toolbar, Resize, Keyboard }
-
 /**
  * Custom module for quilljs to allow user to resize elements
  * (Works on Chrome, Edge, Safari and replaces Firefox's native resize behavior)
  * @see https://quilljs.com/blog/building-a-custom-module/
  */
 export default class QuillResize {
+  static Modules = { Base, DisplaySize, Toolbar, Resize, Keyboard }
   constructor (quill, options = {}) {
     quill.resizer = this
     // save the quill reference and options
@@ -51,8 +52,7 @@ export default class QuillResize {
 
     this.quill.emitter.on('resize-edit', this.handleEdit.bind(this))
 
-    this.quill.root.parentNode.style.position =
-      this.quill.root.parentNode.style.position || 'relative'
+    this.quill.container.style.position = this.quill.container.style.position || 'relative'
 
     // add class to selected parchment
     this.selectedBlots = []
@@ -69,22 +69,39 @@ export default class QuillResize {
     if (this.options.keyboardSelect) {
       Keyboard.injectInit(this.quill)
     }
+
+    // create embed elements style
+    if (this.options.embedTags) {
+      this.initializeEmbed()
+    }
   }
 
   initializeModules () {
     this.removeModules()
 
     this.modules = this.moduleClasses.map(
-      ModuleClass => new (knownModules[ModuleClass] || ModuleClass)(this)
+      ModuleClass => new (this.constructor.Modules[ModuleClass] || ModuleClass)(this)
     )
 
     this.modules.forEach(module => {
-      module.onCreate()
+      module.onCreate(this)
     })
 
     this.onUpdate()
   }
 
+  initializeEmbed () {
+    if (!this.options.embedTags.length) return
+    this.embedClassName = `ql-${randomString()}`
+    let cssText = [''].concat(this.options.embedTags).join(`, .${this.embedClassName} `).slice(2)
+    cssText += '{pointer-events: none;}'
+
+    const style = document.createElement('style')
+    style.textContent = cssText
+    this.quill.container.appendChild(style)
+    this.quill.root.classList.add(this.embedClassName)
+  }
+
   onUpdate (fromModule) {
     this.updateFromModule = fromModule
     this.repositionElements()
@@ -112,8 +129,15 @@ export default class QuillResize {
   handleClick (evt) {
     let show = false
     let blot
-    const target = evt.target
-
+    let target = evt.target
+
+    // 如果是根元素，意味着可能是embed元素事件穿透，需要根据光标位置获取元素
+    if (target === this.quill.root && this.options.embedTags) {
+      const root = this.quill.root
+      root.classList.remove(this.embedClassName)
+      target = document.elementFromPoint(evt.clientX, evt.clientY)
+      root.classList.add(this.embedClassName)
+    }
     if (target && target.tagName) {
       blot = this.quill.constructor.find(target)
       if (blot) {
@@ -193,7 +217,7 @@ export default class QuillResize {
     Object.assign(this.overlay.style, this.options.styles.overlay)
     this.overlay.addEventListener('dblclick', this.handleEdit.bind(this), false)
 
-    this.quill.root.parentNode.appendChild(this.overlay)
+    this.quill.container.appendChild(this.overlay)
 
     this.hideProxy = evt => {
       if (!this.activeEle) return
@@ -214,11 +238,10 @@ export default class QuillResize {
     }
 
     // Remove the overlay
-    this.quill.root.parentNode.removeChild(this.overlay)
+    this.quill.container.removeChild(this.overlay)
     this.overlay = undefined
 
     // stop listening for image deletion or movement
-    document.removeEventListener('keydown', this.keyboardProxy, true)
     this.quill.root.removeEventListener('input', this.hideProxy, true)
     this.quill.root.removeEventListener('scroll', this.updateOverlayPositionProxy)
 
@@ -232,7 +255,7 @@ export default class QuillResize {
     }
 
     // position the overlay over the image
-    const parent = this.quill.root.parentNode
+    const parent = this.quill.container
     const eleRect = this.activeEle.getBoundingClientRect()
     const containerRect = parent.getBoundingClientRect()
 
@@ -255,7 +278,7 @@ export default class QuillResize {
       this.selectedBlots = []
       return
     }
-    const leaves = this.quill.scroll.descendants(Parchment.Leaf, range.index, range.length)
+    const leaves = this.quill.scroll.descendants(Parchment.Leaf || Parchment.LeafBlot, range.index, range.length)
     const blots = leaves.filter(blot => {
       const canBeHandle = !!this.options.parchment[blot.statics.blotName]
       if (canBeHandle) blot.domNode.classList.add(this.options.selectedClass)

package/src/Util.js

@@ -0,0 +1,9 @@
+/**
+ * 生成一个精炼的随机字符串
+ * @param {number} length - 生成字符串的长度
+ * @returns {string} - 随机字符串
+ */
+export function randomString (length = 8) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
+}

package/src/assets/resize.css

@@ -13,44 +13,3 @@
 .ql-resize-style-full {
     width: 100% !important;
 }
-
-.ql-embed-placeholder {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-    width: 400px;
-    height: 225px;
-    background-color: #f0f0f0;
-    border: 1px solid #ccc;
-    cursor: default !important;
-    margin-bottom: 1em;
-    padding: 2em;
-    /* user-select: none; */
-}
-.ql-embed-placeholder:hover {
-    background-color: #e8e8e8;
-}
-.ql-embed-placeholder::before {
-    content: "<" attr(data-type) ">";
-    font-size: 1.5em;
-    margin-bottom: .5em;
-    text-transform: uppercase;
-}
-.ql-embed-placeholder::after {
-    content: attr(data-src);
-    color: #666;
-}
-
-.ql-embed-placeholder.active {
-  border-color: #abc9e9;
-  background-color: #d2e5f9;
-}
-.ql-embed-placeholder.selected {
-  color: #fff;
-  border-color: #4185d2;
-  background-color: #5f9de2;
-}
-.ql-embed-placeholder.selected::after {
-  color: #fff;
-}

package/src/index.js

@@ -1,38 +1,4 @@
-import _Quill from 'quill'
+import QuillResize from './QuillResize'
 import './assets/resize.css'
 
-import Resize from './QuillResize'
-import { Image } from './formats/image'
-import PlaceholderRegister from './formats/placeholder'
-
-const Quill = window.Quill || _Quill
-Quill.register(Image, true)
-
-export {
-  EmbedPlaceholder,
-  TagPlaceholder,
-  ClassNamePlaceholder,
-  convertPlaceholderHTML
-} from './formats/placeholder'
-
-export default Resize
-export { Resize, Image, PlaceholderRegister }
-
-// Polyfill for IE and Element.closest
-if (!Element.prototype.matches) {
-  Element.prototype.matches =
-    Element.prototype.msMatchesSelector ||
-    Element.prototype.webkitMatchesSelector
-}
-
-if (!Element.prototype.closest) {
-  Element.prototype.closest = function (s) {
-    var el = this
-    if (!document.documentElement.contains(el)) return null
-    do {
-      if (el.matches(s)) return el
-      el = el.parentElement || el.parentNode
-    } while (el !== null && el.nodeType === 1)
-    return null
-  }
-}
+export default QuillResize

package/src/modules/Keyboard.js

@@ -1,5 +1,22 @@
 import BaseModule from './BaseModule'
 
+import _Quill from 'quill'
+const Quill = window.Quill || _Quill
+
+const Parchment = Quill.import('parchment')
+
+const keyCodes = {
+  BACKSPACE: 8,
+  TAB: 9,
+  ENTER: 13,
+  ESCAPE: 27,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+  DELETE: 46
+}
+
 export default class Keyboard extends BaseModule {
   static injectInit (quill) {
     // left/right
@@ -10,21 +27,6 @@ export default class Keyboard extends BaseModule {
     bindings[this.keys.RIGHT].unshift(
       this.makeArrowHandler(this.keys.RIGHT, false)
     )
-
-    // // up
-    // const upBinding = this.makeArrowHandler(this.keys.UP, false)
-    // if (bindings[this.keys.UP]) {
-    //   bindings[this.keys.UP].unshift(upBinding)
-    // } else {
-    //   quill.keyboard.addBinding(upBinding)
-    // }
-    // // down
-    // const downBinding = this.makeArrowHandler(this.keys.DOWN, false)
-    // if (bindings[this.keys.DOWN]) {
-    //   bindings[this.keys.DOWN].unshift(downBinding)
-    // } else {
-    //   quill.keyboard.addBinding(downBinding)
-    // }
   }
 
   static makeArrowHandler (key, shiftKey) {
@@ -38,24 +40,29 @@ export default class Keyboard extends BaseModule {
         if (!this.quill.resizer) return true
 
         let index = range.index
+        const isLeft = key === Keyboard.keys.LEFT
+        const isRight = key === Keyboard.keys.RIGHT
 
         // check end of line
-        const [line] = this.quill.getLine(range.index)
+        const [line] = this.quill.getLine(index + (isLeft ? -1 : 0))
+        if (this.quill.resizer.judgeShow(line)) return false
         const lineIndex = this.quill.getIndex(line)
-        if (key === Keyboard.keys.RIGHT && lineIndex + line.length() - 1 === index) return true
+
+        if (isRight && lineIndex + line.length() - 1 === index) return true
 
         // get leaf/offset
-        if (key === Keyboard.keys.RIGHT) {
+        if (isRight) {
           index += (range.length + 1)
         }
         let [leaf] = this.quill.getLeaf(index)
         const offset = leaf.offset(leaf.parent)
+        const isBlock = leaf.constructor.scope === Parchment.Scope.BLOCK_BLOT
 
         // check start of line
-        if (key === Keyboard.keys.LEFT && (index === 0 || index === lineIndex)) return true
+        if (isLeft && ((isBlock && index === offset) || (index === 0 || index === lineIndex))) return true
 
         // get previous leaf
-        if (key === Keyboard.keys.LEFT) {
+        if (isLeft) {
           if (offset === 0) {
             index -= 1
             leaf = this.quill.getLeaf(index)[0]
@@ -89,19 +96,19 @@ export default class Keyboard extends BaseModule {
     let handled = false
 
     // delete
-    if (code === Keyboard.keys.BACKSPACE || code === Keyboard.keys.DELETE) {
+    if (code === keyCodes.BACKSPACE || code === keyCodes.DELETE) {
       this.blot.deleteAt(0)
       this.blot.parent.optimize()
       handled = true
 
     // direction key
-    } else if (code >= Keyboard.keys.LEFT && code <= Keyboard.keys.DOWN) {
-      if (code === Keyboard.keys.RIGHT) {
-        index++
-      } else if (code === Keyboard.keys.UP) {
+    } else if (code >= keyCodes.LEFT && code <= keyCodes.DOWN) {
+      if (code === keyCodes.RIGHT) {
+        index += this.blot.length() || 1
+      } else if (code === keyCodes.UP) {
         index = this.getOtherLineIndex(-1)
         nextBlot = this.quill.getLeaf(index)[0]
-      } else if (code === Keyboard.keys.DOWN) {
+      } else if (code === keyCodes.DOWN) {
         index = this.getOtherLineIndex(1)
         nextBlot = this.quill.getLeaf(index)[0]
       }
@@ -143,14 +150,18 @@ export default class Keyboard extends BaseModule {
   }
 }
 
-Keyboard.keys = {
-  BACKSPACE: 8,
-  TAB: 9,
-  ENTER: 13,
-  ESCAPE: 27,
-  LEFT: 37,
-  UP: 38,
-  RIGHT: 39,
-  DOWN: 40,
-  DELETE: 46
+if (/^2\./.test(Quill.version)) {
+  Keyboard.keys = {
+    BACKSPACE: 'Backspace',
+    TAB: 'Tab',
+    ENTER: 'Enter',
+    ESCAPE: 'Escape',
+    LEFT: 'ArrowLeft',
+    UP: 'ArrowUp',
+    RIGHT: 'ArrowRight',
+    DOWN: 'ArrowDown',
+    DELETE: 'Delete'
+  }
+} else {
+  Keyboard.keys = keyCodes
 }

package/src/modules/Resize.js

@@ -2,6 +2,7 @@ import BaseModule from './BaseModule'
 
 export default class Resize extends BaseModule {
   onCreate () {
+    this.blotOptions = this.options.parchment[this.blot.statics.blotName]
     // track resize handles
     this.boxes = []
 
@@ -80,7 +81,12 @@ export default class Resize extends BaseModule {
     document.addEventListener('mouseup', this.handleMouseupProxy, false)
   }
 
-  handleMouseup () {
+  handleMouseup (evt) {
+    // save size, clear style
+    const calcSize = this.calcSize(evt, this.blotOptions.limit)
+    Object.assign(this.activeEle, calcSize)
+    Object.assign(this.activeEle.style, { width: null, height: null })
+
     // reset cursor everywhere
     this.setCursor('')
     this.blot.handling && this.blot.handling(false)
@@ -94,15 +100,25 @@ export default class Resize extends BaseModule {
       // activeEle not set yet
       return
     }
+
+    const limit = {
+      ...this.blotOptions.limit,
+      unit: true
+    }
+    Object.assign(this.activeEle.style, this.calcSize(evt, limit))
+
+    this.requestUpdate()
+  }
+
+  calcSize (evt, limit = {}) {
     // update size
     const deltaX = evt.clientX - this.dragStartX
     const deltaY = evt.clientY - this.dragStartY
 
-    const options = this.options.parchment[this.blot.statics.blotName]
     const size = {}
     let direction = 1
 
-    ;(options.attribute || ['width']).forEach(key => {
+    ;(this.blotOptions.attribute || ['width']).forEach(key => {
       size[key] = this.preDragSize[key]
     })
 
@@ -118,11 +134,6 @@ export default class Resize extends BaseModule {
       size.height = Math.round(this.preDragSize.height + deltaY * direction)
     }
 
-    Object.assign(this.activeEle.style, this.calcSize(size, options.limit))
-    this.requestUpdate()
-  }
-
-  calcSize (size, limit = {}) {
     let { width, height } = size
 
     // keep ratio
@@ -156,10 +167,15 @@ export default class Resize extends BaseModule {
       }
     }
 
-    if (width) size.width = width + 'px'
-    if (height) size.height = height + 'px'
+    if (limit.unit) {
+      if (width) width = width + 'px'
+      if (height) height = height + 'px'
+    }
 
-    return size
+    const res = {}
+    if (width) res.width = width
+    if (height) res.height = height
+    return res
   }
 
   getNaturalSize () {

package/demo/umd.html

@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <title>Quill Resize Module Demo</title>
-  <link href="http://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
-  <link href="../dist/resize.css" rel="stylesheet">
-  <style>
-    body {
-      width: 1000px;
-      margin: 0 auto;
-    }
-
-    .editor-box {
-      height: 500px;
-      padding-top: 42px;
-      margin: 0 auto;
-    }
-
-    .editor-box .ql-toolbar {
-      margin-top: -42px;
-    }
-
-    .editor-box .ql-container {
-      overflow: hidden;
-    }
-
-    .editor-box .ql-editor img {
-      cursor: default !important;
-    }
-
-    .ql-embed-placeholder[data-type="ql-embed"] {
-      background-color: #fff;
-    }
-
-    .buttons {
-      margin: 1em 0 2em;
-    }
-
-    .btn {
-      padding: 3px .5em;
-    }
-
-    #result {
-      width: 100%;
-    }
-  </style>
-</head>
-
-<body>
-  <h1>Quill Resize Module Demo</h1>
-  <div class="editor-box">
-    <div id="editor">
-      <p>Click on the Image to resize.</p>
-      <p><img src="http://n.sinaimg.cn/sinacn10101/486/w2048h1638/20190518/9909-hwzkfpv0668515.jpg" style="width: 300px;"></p>
-      <p><br></p>
-      <p>And you can custom any element to be resized.</p>
-      <p><iframe src="https://vjs.zencdn.net/" frameborder="0"></iframe>
-        It's inline-block
-        <video src="https://vjs.zencdn.net/v/oceans.mp4" controls preload="auto" poster="https://vjs.zencdn.net/v/oceans.png"></video></p>
-      <p>Try to press left/right key around the placeholder.</p>
-    </div>
-  </div>
-  <div class="buttons">
-    <button class="btn btn-html">getHtml</button>
-    <button class="btn btn-content">getContent</button>
-    <button class="btn btn-text">getText</button>
-    &nbsp;&nbsp;
-    <button class="btn btn-undo">undo</button>
-    <button class="btn btn-redo">redo</button>
-  </div>
-  <textarea id="result" rows="10"></textarea>
-  <script src="http://cdn.quilljs.com/1.3.6/quill.min.js"></script>
-  <script src="../dist/resize.js"></script>
-  <script>
-    // eslint-disable-next-line no-undef
-    QuillResize.PlaceholderRegister()
-    // eslint-disable-next-line no-undef
-    var demoEditor = new Quill('#editor', {
-      theme: 'snow',
-      modules: {
-        resize: {}
-      }
-    })
-
-    var $result = document.querySelector('#result')
-    document.querySelector('.btn-html').addEventListener('click', function () {
-      // call convertPlaceholderHTML to replace source element style
-      // eslint-disable-next-line no-undef
-      var html = QuillResize.convertPlaceholderHTML(demoEditor.root.innerHTML)
-      $result.value = html
-    })
-    document.querySelector('.btn-content').addEventListener('click', function () {
-      var result = demoEditor.getContents()
-      $result.value = JSON.stringify(result)
-    })
-    document.querySelector('.btn-text').addEventListener('click', function () {
-      $result.value = demoEditor.getText()
-    })
-    document.querySelector('.btn-undo').addEventListener('click', function () {
-      demoEditor.history.undo()
-    })
-    document.querySelector('.btn-redo').addEventListener('click', function () {
-      demoEditor.history.redo()
-    })
-  </script>
-</body>
-
-</html>

package/src/formats/image.js

@@ -1,40 +0,0 @@
-import _Quill from 'quill'
-const Quill = window.Quill || _Quill
-
-// BEGIN allow image alignment styles
-const ATTRIBUTES = ['alt', 'height', 'width', 'style', 'data-size']
-
-var BaseImageFormat = Quill.import('formats/image')
-class Image extends BaseImageFormat {
-  static formats (domNode) {
-    if (domNode.__handling && domNode.__formats) {
-      return domNode.__formats
-    }
-
-    return ATTRIBUTES.reduce(function (formats, attribute) {
-      if (domNode.hasAttribute(attribute)) {
-        formats[attribute] = domNode.getAttribute(attribute)
-      }
-      return formats
-    }, {})
-  }
-
-  format (name, value) {
-    if (ATTRIBUTES.indexOf(name) > -1) {
-      if (value) {
-        this.domNode.setAttribute(name, value)
-      } else {
-        this.domNode.removeAttribute(name)
-      }
-    } else {
-      super.format(name, value)
-    }
-  }
-
-  handling (handling) {
-    this.domNode.__formats = this.constructor.formats(this.domNode)
-    this.domNode.__handling = handling
-  }
-}
-
-export { Image, ATTRIBUTES }