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

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

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

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

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

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

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

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

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

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

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