@opentiny/fluent-editor 3.20.1 → 3.20.2

package/src/custom-image/BlotFormatter.ts

@@ -0,0 +1,167 @@
+import type Action from './actions/Action'
+import type { Options } from './Options'
+import type BlotSpec from './specs/BlotSpec'
+import { merge as deepmerge } from 'lodash-es'
+import Quill from 'quill'
+import ImageBlot, { ImageContainerBlot } from './image'
+import DefaultOptions from './Options'
+import { CustomImageSpec } from './specs/CustomImageSpec'
+
+const dontMerge = (_destination: Array<any>, source: Array<any>) => source
+
+// @dynamic
+export default class BlotFormatter {
+  quill: any
+  options: Options
+  currentSpec: BlotSpec
+  specs: BlotSpec[]
+  overlay: HTMLElement
+  actions: Action[]
+  observer: any
+
+  static register() {
+    Quill.register('formats/image', ImageBlot, true)
+    Quill.register('formats/image-container', ImageContainerBlot, true)
+    Quill.register('modules/image-spec', CustomImageSpec, true)
+  }
+
+  constructor(quill: any, options: any = {}) {
+    this.quill = quill
+    this.options = deepmerge(DefaultOptions, options, { arrayMerge: dontMerge })
+    this.currentSpec = null
+    this.actions = []
+    this.overlay = document.createElement('div')
+    this.overlay.classList.add(this.options.overlay.className)
+    if (this.options.overlay.style) {
+      Object.assign(this.overlay.style, this.options.overlay.style)
+    }
+
+    // disable native image resizing on firefox
+    document.execCommand('enableObjectResizing', false, 'false') // eslint-disable-next-line-line no-undef
+    this.quill.root.parentNode.style.position = this.quill.root.parentNode.style.position || 'relative'
+    this.quill.root.addEventListener('click', this.onClick)
+    this.specs = this.options.specs.map((SpecClass: any) => new SpecClass(this))
+    this.specs.forEach(spec => spec.init())
+  }
+
+  show(spec: BlotSpec) {
+    this.currentSpec = spec
+    this.currentSpec.setSelection()
+    this.setUserSelect('none')
+    this.quill.root.parentNode.appendChild(this.overlay)
+    this.repositionOverlay()
+    this.createActions(spec)
+
+    // fix: 图片对齐之后，虚线外框应该跟随移动
+    const imageDom = spec.getTargetElement()
+    const win: any = window
+    const MutationObserver = win.MutationObserver || win.WebKitMutationObserver || win.MozMutationObserver
+    const element = imageDom.parentNode
+    this.observer = new MutationObserver((mutationList) => {
+      for (const mutation of mutationList) {
+        const target = mutation.target
+        const image = target.querySelector('img')
+        if (image) {
+          this.repositionOverlay()
+        }
+      }
+    })
+    this.observer.observe(element, {
+      attributes: true,
+      attributeFilter: ['class'],
+      attributeOldValue: true,
+      subtree: true,
+    })
+    document.body.addEventListener('click', this.hideImageOverlay, true)
+  }
+
+  hide() {
+    if (!this.currentSpec) {
+      return
+    }
+
+    const imgDom = this.currentSpec.getTargetElement()
+    if (imgDom) {
+      imgDom.classList.remove('current-select-img')
+    }
+
+    this.currentSpec.onHide()
+    this.currentSpec = null
+    this.quill.root.parentNode.removeChild(this.overlay)
+    this.overlay.style.setProperty('display', 'none')
+    this.setUserSelect('')
+    this.destroyActions()
+  }
+
+  update() {
+    this.repositionOverlay()
+    this.actions.forEach(action => action.onUpdate())
+  }
+
+  createActions(spec: BlotSpec) {
+    this.actions = spec.getActions().map((ActionClass: any) => {
+      const action: Action = new ActionClass(this)
+      action.onCreate()
+      return action
+    })
+  }
+
+  destroyActions() {
+    this.actions.forEach((action: Action) => action.onDestroy())
+    this.actions = []
+  }
+
+  repositionOverlay() {
+    if (!this.currentSpec) {
+      return
+    }
+
+    const overlayTarget = this.currentSpec.getOverlayElement()
+    if (!overlayTarget) {
+      return
+    }
+
+    const parent: HTMLElement = this.quill.root.parentNode
+    const specRect = overlayTarget.getBoundingClientRect()
+    const parentRect = parent.getBoundingClientRect()
+
+    Object.assign(this.overlay.style, {
+      display: 'block',
+      left: `${specRect.left - parentRect.left - 1 + parent.scrollLeft}px`,
+      top: `${specRect.top - parentRect.top + parent.scrollTop}px`,
+      width: `${specRect.width}px`,
+      height: `${specRect.height}px`,
+    })
+  }
+
+  setUserSelect(value: string) {
+    const props: string[] = [
+      'userSelect',
+      'mozUserSelect',
+      'webkitUserSelect',
+      'msUserSelect',
+    ]
+
+    props.forEach((prop: string) => {
+      // set on contenteditable element and <html>
+      this.quill.root.style.setProperty(prop, value)
+      if (document.documentElement) {
+        document.documentElement.style.setProperty(prop, value)
+      }
+    })
+  }
+
+  onClick = () => {
+    this.hide()
+  }
+
+  hideImageOverlay = (event) => {
+    const target = event.target
+    const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay')
+    // 点击图片操作框之外应该将其销毁
+    if (!isBlotFormatter) {
+      this.hide()
+    }
+    document.body.removeEventListener('click', this.hideImageOverlay)
+  }
+}

package/src/custom-image/Options.ts

@@ -0,0 +1,150 @@
+import ImageSpec from './specs/ImageSpec'
+
+export interface OverlayOptions {
+  // classname applied to the overlay element
+  className: string
+  // style applied to overlay element, or null to prevent styles
+  style: Record<string, string>
+}
+
+export interface ResizeOptions {
+  // class name applied to the resize handles
+  handleClassName: string
+  // style applied to resize handles, or null to prevent styles
+  handleStyle: Record<string, string>
+}
+
+export interface AlignOptions {
+  // the name of the attribute for an element that has its alignment changed
+  attribute: string
+  // the aligner does the actual alignment switch
+  aligner: {
+    // whether or not the aligner should handle the actual alignment properties
+    applyStyle: boolean
+  }
+  // icons used for alignment
+  icons: {
+    left: string
+    center: string
+    right: string
+  }
+  // the toolbar so users can change alignments
+  toolbar: {
+    // whether or not users can deselect an alignment. it's up to you to set the initial alignment
+    allowDeselect: boolean
+    // class name applied to the root toolbar element
+    mainClassName: string
+    // style applied to root toolbar element, or null to prevent styles
+    mainStyle
+    // class name applied to each button in the toolbar
+    buttonClassName: string
+    /* whether or not to add the selected style to the buttons.
+    they'll always get the is-selected class */
+    addButtonSelectStyle: boolean
+    // style applied to buttons, or null to prevent styles
+    buttonStyle
+    // style applied to the svgs in the buttons
+    svgStyle
+  }
+}
+
+export interface Options {
+  // the BlotSpecs supported
+  specs: any
+  overlay: OverlayOptions
+  align: AlignOptions
+  resize: ResizeOptions
+}
+
+const DefaultOptions: Options = {
+  specs: [
+    ImageSpec,
+  ],
+  overlay: {
+    className: 'blot-formatter__overlay',
+    style: {
+      position: 'absolute',
+      boxSizing: 'border-box',
+      border: '1px dashed #444',
+    },
+  },
+  align: {
+    attribute: 'data-align',
+    aligner: {
+      applyStyle: true,
+    },
+    icons: {
+      left: `
+        <svg viewbox="0 0 18 18">
+          <line class="ql-stroke" x1="3" x2="15" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="3" x2="13" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="3" x2="9" y1="4" y2="4"></line>
+        </svg>
+      `,
+      center: `
+        <svg viewbox="0 0 18 18">
+           <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="12" x2="6" y1="4" y2="4"></line>
+        </svg>
+      `,
+      right: `
+        <svg viewbox="0 0 18 18">
+          <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
+          <line class="ql-stroke" x1="15" x2="5" y1="14" y2="14"></line>
+          <line class="ql-stroke" x1="15" x2="9" y1="4" y2="4"></line>
+        </svg>
+      `,
+    },
+    toolbar: {
+      allowDeselect: true,
+      mainClassName: 'blot-formatter__toolbar',
+      mainStyle: {
+        position: 'absolute',
+        top: '-12px',
+        right: '0',
+        left: '0',
+        height: '0',
+        minWidth: '100px',
+        font: '12px/1.0 Arial, Helvetica, sans-serif',
+        textAlign: 'center',
+        color: '#333',
+        boxSizing: 'border-box',
+        cursor: 'default',
+        zIndex: '1',
+      },
+      buttonClassName: 'blot-formatter__toolbar-button',
+      addButtonSelectStyle: true,
+      buttonStyle: {
+        display: 'inline-block',
+        width: '24px',
+        height: '24px',
+        background: 'white',
+        border: '1px solid #999',
+        verticalAlign: 'middle',
+      },
+      svgStyle: {
+        display: 'inline-block',
+        width: '24px',
+        height: '24px',
+        background: 'white',
+        border: '1px solid #999',
+        verticalAlign: 'middle',
+      },
+    },
+  },
+  resize: {
+    handleClassName: 'blot-formatter__resize-handle',
+    handleStyle: {
+      position: 'absolute',
+      height: '12px',
+      width: '12px',
+      backgroundColor: 'white',
+      border: '1px solid #777',
+      boxSizing: 'border-box',
+      opacity: '0.80',
+    },
+  },
+}
+
+export default DefaultOptions

package/src/custom-image/actions/Action.ts

@@ -0,0 +1,13 @@
+export default class Action {
+  formatter
+
+  constructor(formatter) {
+    this.formatter = formatter
+  }
+
+  onCreate() {}
+
+  onDestroy() {}
+
+  onUpdate() {}
+}

package/src/custom-image/actions/CustomResizeAction.ts

@@ -0,0 +1,207 @@
+import Action from './Action'
+
+const MIN_WIDTH = 40
+
+function getElementStyle(element) {
+  return element.currentStyle
+    ? element.currentStyle
+    : window.getComputedStyle(element, null)
+}
+export default class CustomResizeAction extends Action {
+  topLeftHandle: HTMLElement
+  topRightHandle: HTMLElement
+  bottomRightHandle: HTMLElement
+  bottomLeftHandle: HTMLElement
+  dragHandle: HTMLElement
+  dragStartX: number
+  preDragWidth: number
+  targetRatio: number
+  maxWidth: number
+  minWidth: number
+
+  constructor(formatter) {
+    super(formatter)
+    this.topLeftHandle = this.createHandle('top-left', 'nwse-resize')
+    this.topRightHandle = this.createHandle('top-right', 'nesw-resize')
+    this.bottomRightHandle = this.createHandle('bottom-right', 'nwse-resize')
+    this.bottomLeftHandle = this.createHandle('bottom-left', 'nesw-resize')
+    this.dragHandle = null
+    this.dragStartX = 0
+    this.preDragWidth = 0
+    this.targetRatio = 0
+    this.maxWidth = 0
+    this.minWidth = MIN_WIDTH
+  }
+
+  onCreate() {
+    const target: any = this.formatter.currentSpec.getTargetElement()
+    this.formatter.overlay.setAttribute('data-image', target.src)
+    this.formatter.overlay.appendChild(this.topLeftHandle)
+    this.formatter.overlay.appendChild(this.topRightHandle)
+    this.formatter.overlay.appendChild(this.bottomRightHandle)
+    this.formatter.overlay.appendChild(this.bottomLeftHandle)
+    this.repositionHandles(this.formatter.options.resize.handleStyle)
+  }
+
+  onDestroy() {
+    this.setCursor('')
+    this.formatter.overlay.removeChild(this.topLeftHandle)
+    this.formatter.overlay.removeChild(this.topRightHandle)
+    this.formatter.overlay.removeChild(this.bottomRightHandle)
+    this.formatter.overlay.removeChild(this.bottomLeftHandle)
+  }
+
+  createHandle(position: string, cursor: string): HTMLElement {
+    const box = document.createElement('div')
+    box.classList.add(this.formatter.options.resize.handleClassName)
+    box.setAttribute('data-position', position)
+    box.style.cursor = cursor
+
+    if (this.formatter.options.resize.handleStyle) {
+      Object.assign(box.style, this.formatter.options.resize.handleStyle)
+    }
+
+    box.addEventListener('mousedown', this.onMouseDown)
+    return box
+  }
+
+  repositionHandles(handleStyle: any) {
+    let handleXOffset = '0px'
+    let handleYOffset = '0px'
+    if (handleStyle) {
+      if (handleStyle.width) {
+        handleXOffset = `${-Number.parseFloat(handleStyle.width) / 2}px`
+      }
+      if (handleStyle.height) {
+        handleYOffset = `${-Number.parseFloat(handleStyle.height) / 2}px`
+      }
+    }
+
+    Object.assign(this.topLeftHandle.style, { left: handleXOffset, top: handleYOffset })
+    Object.assign(this.topRightHandle.style, { right: handleXOffset, top: handleYOffset })
+    Object.assign(this.bottomRightHandle.style, { right: handleXOffset, bottom: handleYOffset })
+    Object.assign(this.bottomLeftHandle.style, { left: handleXOffset, bottom: handleYOffset })
+  }
+
+  setCursor(value: string) {
+    if (document.body) {
+      document.body.style.cursor = value
+    }
+
+    if (this.formatter.currentSpec) {
+      const target = this.formatter.currentSpec.getOverlayElement()
+      if (target) {
+        target.style.cursor = value
+      }
+    }
+  }
+
+  onMouseDown = (event: MouseEvent) => {
+    if (!(event.target instanceof HTMLElement)) {
+      return
+    }
+
+    this.dragHandle = event.target
+    this.setCursor(this.dragHandle.style.cursor)
+
+    if (!this.formatter.currentSpec) {
+      return
+    }
+
+    const target = this.formatter.currentSpec.getTargetElement()
+    if (!target) {
+      return
+    }
+    event.preventDefault()
+    const rect = target.getBoundingClientRect()
+
+    this.dragStartX = event.clientX
+    this.preDragWidth = rect.width
+    this.targetRatio = rect.height / rect.width
+
+    let root: HTMLElement
+    let rootStyle: any
+    const tdWrap = this.findTd(target, 0)
+    if (tdWrap) {
+      root = tdWrap
+      rootStyle = getElementStyle(tdWrap)
+    }
+    else {
+      root = this.formatter.quill.root
+      rootStyle = getElementStyle(root)
+    }
+    this.maxWidth = root.clientWidth
+    - Number.parseFloat(rootStyle.paddingRight)
+    - Number.parseFloat(rootStyle.paddingLeft)
+
+    document.addEventListener('mousemove', this.onDrag)
+    document.addEventListener('mouseup', this.onMouseUp)
+  }
+
+  findTd = (node: HTMLElement, level: number) => {
+    if (level > 3) {
+      return null
+    }
+
+    const tagName = node.tagName.toUpperCase()
+    if (tagName === 'TD') {
+      return node
+    }
+    else {
+      const parentNode = node.parentElement
+      if (parentNode) {
+        return (this.findTd(parentNode, level += 1))
+      }
+      else {
+        return null
+      }
+    }
+  }
+
+  onDrag = (event: MouseEvent) => {
+    if (!this.formatter.currentSpec) {
+      return
+    }
+
+    const target = this.formatter.currentSpec.getTargetElement()
+    if (!target) {
+      return
+    }
+
+    const deltaX = event.clientX - this.dragStartX
+    let newWidth = 0
+
+    if (this.dragHandle === this.topLeftHandle || this.dragHandle === this.bottomLeftHandle) {
+      newWidth = Math.round(this.preDragWidth - deltaX)
+    }
+    else {
+      newWidth = Math.round(this.preDragWidth + deltaX)
+    }
+
+    let minWidth = this.minWidth
+
+    if (this.maxWidth < minWidth) {
+      minWidth = this.maxWidth
+    }
+
+    if (newWidth > this.maxWidth) {
+      newWidth = this.maxWidth
+    }
+    else if (newWidth < minWidth) {
+      newWidth = minWidth
+    }
+
+    const newHeight = this.targetRatio * newWidth
+
+    target.setAttribute('width', `${newWidth}`)
+    target.setAttribute('height', `${newHeight}`)
+
+    this.formatter.update()
+  }
+
+  onMouseUp = () => {
+    this.setCursor('')
+    document.removeEventListener('mousemove', this.onDrag)
+    document.removeEventListener('mouseup', this.onMouseUp)
+  }
+}

package/src/custom-image/actions/DeleteAction.ts

@@ -0,0 +1,29 @@
+import Quill from 'quill'
+import Action from './Action'
+
+export default class DeleteAction extends Action {
+  onCreate() {
+    document.addEventListener('keyup', this.onKeyUp, true)
+    this.formatter.quill.root.addEventListener('input', this.onKeyUp, true)
+  }
+
+  onDestroy() {
+    document.removeEventListener('keyup', this.onKeyUp)
+    this.formatter.quill.root.removeEventListener('input', this.onKeyUp)
+  }
+
+  onKeyUp = (event: any) => {
+    if (!this.formatter.currentSpec) {
+      return
+    }
+
+    // delete or backspace
+    if (event.keyCode === 46 || event.keyCode === 8) {
+      const blot = Quill.find(this.formatter.currentSpec.getTargetElement())
+      if (blot) {
+        blot.deleteAt(0)
+      }
+      this.formatter.hide()
+    }
+  }
+}

package/src/custom-image/image.ts

@@ -0,0 +1,118 @@
+import Quill from 'quill'
+import { isNullOrUndefined, sanitize } from '../config/editor.utils'
+
+const Embed = Quill.imports['blots/embed']
+const Inline = Quill.imports['blots/inline']
+
+const ATTRIBUTES = ['alt', 'height', 'width', 'image-id']
+
+// @dynamic
+class CustomImage extends Embed {
+  static ID_SEED = 0
+  static blotName: string
+  static tagName: string
+  domNode: any
+  parent: any
+  scroll: any
+  next: any
+  static create(value) {
+    const node = super.create(value)
+    const url = typeof value === 'string' ? value : value.src
+    if (url) {
+      const imgURL = this.sanitize(url)
+      if (!imgURL?.startsWith('data:image')) {
+        node.dataset.src = imgURL
+      }
+      node.setAttribute('src', imgURL)
+    }
+    node.setAttribute('data-image-id', `img${CustomImage.ID_SEED++}`)
+    node.setAttribute('devui-editorx-image', true)
+    node.style.verticalAlign = 'baseline'
+    return node
+  }
+
+  static formats(domNode) {
+    return ATTRIBUTES.reduce((formats, attribute) => {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute)
+      }
+      return formats
+    }, {})
+  }
+
+  static match(url) {
+    return /\.(jpe?g|gif|png)$/.test(url) || /^data:image\/.+;base64/.test(url)
+  }
+
+  static register() {
+    if (/Firefox/i.test(navigator.userAgent)) {
+      setTimeout(() => {
+        // Disable image resizing in Firefox
+        document.execCommand('enableObjectResizing', false, null)
+      }, 1)
+    }
+  }
+
+  static sanitize(url) {
+    return sanitize(url, ['http', 'https', 'data']) ? url : '//:0'
+  }
+
+  static value(domNode) {
+    const formats: any = {}
+    const imageSrc = domNode.getAttribute('src')
+    formats.src = this.sanitize(imageSrc)
+    formats.hasExisted = domNode.getAttribute('devui-editorx-image')
+    formats.imageId = domNode.dataset.imageId
+    return formats
+  }
+
+  format(name, value) {
+    if (ATTRIBUTES.includes(name)) {
+      if (value) {
+        this.domNode.setAttribute(name, value)
+      }
+      else {
+        this.domNode.removeAttribute(name)
+      }
+    }
+    else {
+      super.format(name, value)
+    }
+  }
+
+  unWrap() {
+    this.parent.replaceWith(this)
+  }
+
+  wrap(name, value) {
+    const wrapper = typeof name === 'string' ? this.scroll.create(name, value) : name
+    if (!isNullOrUndefined(this.parent)) {
+      this.parent.insertBefore(wrapper, this.next || undefined)
+    }
+    if (typeof wrapper.appendChild !== 'function') {
+      throw new TypeError(`Cannot wrap ${name}`)
+    }
+    wrapper.appendChild(this)
+    return wrapper
+  }
+}
+CustomImage.blotName = 'image'
+CustomImage.tagName = 'IMG'
+
+// @dynamic
+class CustomImageContainer extends Inline {
+  static tagName: string
+  static className: string
+  static blotName: string
+  static allowedChildren: typeof CustomImage[]
+  constructor(scroll, domNode) {
+    super(scroll, domNode)
+    domNode.setAttribute('contenteditable', false)
+  }
+}
+CustomImageContainer.blotName = 'image-container'
+CustomImageContainer.className = 'ql-image-container'
+CustomImageContainer.tagName = 'DIV'
+
+CustomImageContainer.allowedChildren = [CustomImage]
+export { CustomImage as default, CustomImageContainer as ImageContainerBlot }