@opentiny/fluent-editor 4.0.0-alpha.8 → 4.0.0-alpha.9

package/src/modules/custom-image/blot-formatter.ts

@@ -1,158 +0,0 @@
-import type FluentEditor from '../../core/fluent-editor'
-import type { Action } from './actions'
-import type { BlotFormatterOptions } from './options'
-import type { BlotSpec } from './specs'
-import { merge as deepmerge } from 'lodash-es'
-import Quill from 'quill'
-import { CustomImage } from './image'
-import DefaultOptions from './options'
-import { CustomImageSpec } from './specs'
-
-const dontMerge = (_destination: Array<any>, source: Array<any>) => source
-
-export class BlotFormatter {
-  options: BlotFormatterOptions
-  currentSpec: BlotSpec
-  specs: BlotSpec[]
-  overlay: HTMLElement
-  actions: Action[]
-  observer: MutationObserver
-
-  static register() {
-    Quill.register({
-      'formats/image': CustomImage,
-      'modules/image-spec': CustomImageSpec,
-    }, true)
-  }
-
-  constructor(public quill: FluentEditor, options: Partial<BlotFormatterOptions> = {}) {
-    this.options = deepmerge({}, DefaultOptions, options, { arrayMerge: dontMerge })
-    if (options.allowInvalidUrl !== undefined) {
-      this.options.allowInvalidUrl = options.allowInvalidUrl
-    }
-    CustomImage.setOptions(this.options.allowInvalidUrl)
-    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.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: typeof window.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 as HTMLElement
-        const image = target.querySelector('img')
-        if (image) {
-          this.repositionOverlay()
-        }
-      }
-    })
-    this.observer.observe(element, {
-      attributes: true,
-      attributeFilter: ['class'],
-      attributeOldValue: true,
-      subtree: 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 = this.quill.root.parentElement
-    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()
-  }
-}

package/src/modules/custom-image/image.ts

@@ -1,132 +0,0 @@
-import type { Parchment as TypeParchment } from 'quill'
-import type TypeEmbed from 'quill/blots/embed'
-import Quill from 'quill'
-import { isNullOrUndefined, sanitize } from '../../config/editor.utils'
-import { isObject } from '../../utils/is'
-import { ALIGN_ATTR, alignmentHandler } from './actions'
-
-const Embed = Quill.import('blots/embed') as typeof TypeEmbed
-const ATTRIBUTES = ['alt', 'height', 'width', 'image-id']
-
-export type ImageValue = string | {
-  src: string
-  align?: string
-  height?: number
-  width?: number
-}
-export class CustomImage extends Embed {
-  static blotName = 'image'
-  static tagName = 'IMG'
-  static ID_SEED = 0
-  static allowInvalidUrl: boolean = false
-  declare domNode: HTMLElement
-
-  static setOptions(allowInvalidUrl: boolean) {
-    this.allowInvalidUrl = allowInvalidUrl
-  }
-
-  static create(value: ImageValue) {
-    const node = super.create(value) as HTMLElement
-    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.style.verticalAlign = 'baseline'
-    if (isObject(value)) {
-      if (value.align && alignmentHandler[value.align]) {
-        node.setAttribute(ALIGN_ATTR, value.align)
-        alignmentHandler[value.align](node)
-      }
-      if (value.width) {
-        node.setAttribute('width', String(value.width))
-      }
-      if (value.height) {
-        node.setAttribute('height', String(value.height))
-      }
-    }
-    return node
-  }
-
-  static formats(domNode: HTMLElement) {
-    return ATTRIBUTES.reduce((formats, attribute) => {
-      if (domNode.hasAttribute(attribute)) {
-        formats[attribute] = domNode.getAttribute(attribute)
-      }
-      return formats
-    }, {})
-  }
-
-  static match(url: string) {
-    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, 'false')
-      }, 1)
-    }
-  }
-
-  static sanitize(url: string) {
-    if (sanitize(url, ['http', 'https', 'blob', 'data']) || this.allowInvalidUrl) {
-      return url
-    }
-    return '//:0'
-  }
-
-  static value(domNode: HTMLElement) {
-    const formats: any = {}
-    const imageSrc = domNode.getAttribute('src')
-    formats.src = this.sanitize(imageSrc)
-    formats.imageId = domNode.dataset.imageId
-    if (domNode.dataset.align) {
-      formats.align = domNode.dataset.align
-    }
-    if (domNode.hasAttribute('width')) {
-      formats.width = domNode.getAttribute('width')
-    }
-    if (domNode.hasAttribute('height')) {
-      formats.height = domNode.getAttribute('height')
-    }
-    return formats
-  }
-
-  format(name: string, value: any) {
-    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 as TypeEmbed)
-  }
-
-  wrap(name: string, value?: any): TypeParchment.Parent
-  wrap(wrapper: TypeParchment.Parent): TypeParchment.Parent
-  wrap(name: string | TypeParchment.Parent, value?: any) {
-    const wrapper = (typeof name === 'string' ? this.scroll.create(name, value) : name) as TypeParchment.Parent
-    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
-  }
-}

package/src/modules/custom-image/index.ts

@@ -1,4 +0,0 @@
-export * from './actions'
-export * from './blot-formatter'
-export * from './image'
-export * from './specs'

package/src/modules/custom-image/options.ts

@@ -1,139 +0,0 @@
-import type { ImageToolbar, ImageToolbarButtons } from './actions'
-import type { BlotSpec } from './specs'
-import { ImageSpec } from './specs'
-
-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 ToolButtonOption {
-  name: string
-  icon: string
-  isActive?: (el: HTMLElement) => boolean
-  apply: (this: ImageToolbar, el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => void
-}
-
-export interface ToolbarButtonOptions {
-  buttons: Record<string, ToolButtonOption | boolean>
-}
-
-export interface ToolbarOptions extends ToolbarButtonOptions {
-  // class name applied to the root toolbar element
-  mainClassName: string
-  // style applied to root toolbar element, or null to prevent styles
-  mainStyle: Record<string, unknown>
-  // 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: Record<string, unknown>
-  // style applied to the svgs in the buttons
-  svgStyle: Record<string, unknown>
-}
-
-export interface BlotFormatterOptionsInput {
-  specs: typeof BlotSpec[]
-  overlay: Partial<OverlayOptions>
-  resize: Partial<ResizeOptions>
-  toolbar: Partial<ToolbarOptions>
-}
-export interface BlotFormatterOptions {
-  specs: typeof BlotSpec[]
-  overlay: OverlayOptions
-  resize: ResizeOptions
-  toolbar: ToolbarOptions
-  allowInvalidUrl: boolean
-}
-
-export const LEFT_ALIGN = 'align-left'
-export const CENTER_ALIGN = 'align-center'
-export const RIGHT_ALIGN = 'align-right'
-export const COPY = 'copy'
-export const DOWNLOAD = 'download'
-const DefaultOptions: BlotFormatterOptions = {
-  // 默认情况下，`file://` 格式的本地文件路径在浏览器环境无法读取，因此会被转换成 `//:0`，但是在一些特殊的场景下（比如：Electron），需要获取到图片的原始路径，进行后续的上传处理
-  // 注意：该选项一旦设置为 true，本地磁盘路径会暴露出去，这可能会带来安全风险，请确保你了解相关的安全隐患
-  allowInvalidUrl: false,
-
-  specs: [
-    ImageSpec,
-  ],
-  overlay: {
-    className: 'blot-formatter__overlay',
-    style: {
-      position: 'absolute',
-      boxSizing: 'border-box',
-      border: '1px dashed #444',
-    },
-  },
-  toolbar: {
-    mainClassName: 'blot-formatter__toolbar',
-    mainStyle: {
-      position: 'absolute',
-      top: '-12px',
-      right: '0',
-      left: '0',
-      height: '0',
-      minWidth: '120px',
-      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-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '24px',
-      height: '24px',
-      background: 'white',
-      border: '1px solid #999',
-      verticalAlign: 'middle',
-      cursor: 'pointer',
-    },
-    svgStyle: {
-      display: 'inline-block',
-      width: '16px',
-      height: '16px',
-      background: 'white',
-      verticalAlign: 'middle',
-    },
-    buttons: {
-      [LEFT_ALIGN]: true,
-      [CENTER_ALIGN]: true,
-      [RIGHT_ALIGN]: true,
-      [COPY]: true,
-      [DOWNLOAD]: true,
-    },
-  },
-  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/modules/custom-image/specs/blot-spec.ts

@@ -1,30 +0,0 @@
-import type { BlotFormatter } from '../blot-formatter'
-import { CustomResizeAction, DeleteAction, ImageToolbarAction } from '../actions'
-
-export class BlotSpec {
-  formatter: BlotFormatter
-
-  constructor(formatter: BlotFormatter) {
-    this.formatter = formatter
-  }
-
-  init(): void {}
-
-  getActions() {
-    return [ImageToolbarAction, CustomResizeAction, DeleteAction]
-  }
-
-  getTargetElement(): HTMLElement | null {
-    return null
-  }
-
-  getOverlayElement() {
-    return this.getTargetElement()
-  }
-
-  setSelection(): void {
-    this.formatter.quill.setSelection(null)
-  }
-
-  onHide() {}
-}

package/src/modules/custom-image/specs/custom-image-spec.ts

@@ -1,131 +0,0 @@
-import type { BlotFormatter } from '../blot-formatter'
-import { isInside } from '../../../config/editor.utils'
-import { ImageSpec } from './image-spec'
-
-export class CustomImageSpec extends ImageSpec {
-  editorElem: HTMLElement | undefined
-  observer: any
-  oldRootScrollTop: number
-
-  constructor(formatter: BlotFormatter) {
-    super(formatter)
-    this.formatter = formatter
-    this.oldRootScrollTop = this.formatter.quill.root.scrollTop
-    this.editorElem = this.formatter.quill.container
-    this.formatter.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))
-  }
-
-  handleQuillRootScroll() {
-    if (this.formatter.overlay) {
-      this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`
-    }
-  }
-
-  init(): void {
-    this.editorElem.addEventListener('mouseover', this.imageMouseOver.bind(this))
-    this.editorElem.addEventListener('mouseout', this.imageMouseout)
-
-    super.init()
-  }
-
-  imageMouseOver(event) {
-    const target = event.target
-    const isBlotFormatter = target?.classList?.contains('blot-formatter__overlay')
-    if (target.nodeName === 'IMG' || isBlotFormatter) {
-      // this.addImagePreviewOverlay(event);
-    }
-  }
-
-  imageMouseout = (event) => {
-    if (event.target.nodeName === 'IMG'
-      || event.target.classList.contains('blot-formatter__overlay')) {
-      const imgDom = event.target
-      if (!isInside(event, imgDom)) {
-        this.removeImagePreviewOverlay()
-      }
-    }
-  }
-
-  addImagePreviewOverlay(event) {
-    const target = event.target
-    const {
-      left: imgLeft,
-      width: imgWidth,
-    } = target.getBoundingClientRect()
-    // fix: 解决 ql-container 容器设置 calc(100vh - 180px) 这样的视窗相对单位时，滚动视窗导致图片相对视窗的 top 相应改变，从而导致图片预览按钮的位置显示错误
-    const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop
-
-    const {
-      left: editorLeft,
-      top: editorTop,
-    } = event.currentTarget.getBoundingClientRect()
-
-    const imgRelativeLeft = imgLeft - editorLeft
-    const imgRelativeTop = imgTop - editorTop
-
-    const maxmizeWidth = 24
-    const maxmizePadding = 15
-    const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding
-    const previewTop = imgRelativeTop + maxmizePadding
-
-    const previewStyle = `
-        left: ${previewLeft}px;
-        top: ${previewTop}px;
-        width: ${maxmizeWidth}px;
-      `
-    const imageSrc = target.src || target.getAttribute('data-image')
-    const imageId = target.getAttribute('data-image-id')
-
-    const previewDom = event.currentTarget.querySelector('.image-preview__overlay')
-    if (!previewDom) {
-      event.currentTarget.insertAdjacentHTML('beforeend', `
-          <div class="image-preview__overlay" style="${previewStyle}">
-            <i class="icon-maxmize" id="btn-image-preview" data-image-id="${imageId}"
-              data-image="${imageSrc}"></i>
-          </div>
-        `)
-    }
-  }
-
-  removeImagePreviewOverlay() {
-    const previewDom = this.editorElem.querySelector('.image-preview__overlay')
-    if (previewDom) {
-      previewDom.parentNode.removeChild(previewDom)
-    }
-  }
-
-  onHide() {
-    this.removeImagePreviewOverlay()
-    super.onHide()
-  }
-
-  resetOverlayMarginTop() {
-    if (this.formatter.overlay) {
-      this.formatter.overlay.style.marginTop = '0px'
-    }
-  }
-
-  onClick = (event: MouseEvent) => {
-    const el = event.target
-    const isReadonly = this.formatter.quill.options.readOnly
-    if (!(el instanceof HTMLElement) || el.tagName !== 'IMG' || isReadonly) {
-      return
-    }
-
-    this.img = el as HTMLImageElement
-    this.oldRootScrollTop = this.formatter.quill.root.scrollTop
-    this.resetOverlayMarginTop()
-    this.formatter.show(this)
-
-    // 通过图片dom获取图片选区用以复制，设置 current-select-img::selection 取消选区背景
-    const imageDom = this.formatter.currentSpec?.getTargetElement()
-    if (imageDom) {
-      imageDom.classList.add('current-select-img')
-      const quill = this.formatter.quill
-      const imgBlot = quill.scroll.find(this.img)
-      const index = quill.getIndex(imgBlot)
-      const len = imgBlot.length()
-      quill.setSelection(index, len)
-    }
-  }
-}

package/src/modules/custom-image/specs/image-spec.ts

@@ -1,28 +0,0 @@
-import { BlotSpec } from './blot-spec'
-
-export class ImageSpec extends BlotSpec {
-  img: HTMLImageElement | null = null
-
-  init() {
-    this.formatter.quill.root.addEventListener('click', this.onClick)
-  }
-
-  getTargetElement() {
-    return this.img
-  }
-
-  onHide() {
-    this.img = null
-  }
-
-  onClick = (event: MouseEvent) => {
-    const el = event.target
-    if (!(el instanceof HTMLElement) || el.tagName !== 'IMG') {
-      return
-    }
-    event.stopPropagation()
-
-    this.img = el as HTMLImageElement
-    this.formatter.show(this)
-  }
-}

package/src/modules/custom-image/specs/index.ts

@@ -1,3 +0,0 @@
-export * from './blot-spec'
-export * from './custom-image-spec'
-export * from './image-spec'