@opentiny/fluent-editor 3.20.2 → 3.20.4-alpha.0

package/src/custom-image/BlotFormatter.ts

@@ -1,167 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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

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

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

@@ -1,207 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,118 +0,0 @@
-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 }