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

package/src/modules/custom-image/actions/custom-resize-action.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 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/modules/custom-image/actions/delete-action.ts

@@ -1,32 +0,0 @@
-import type { Parchment as TypeParchment } from 'quill'
-import Quill from 'quill'
-import { Action } from './action'
-
-export 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()) as TypeParchment.Blot
-      if (blot) {
-        // TODO: fix later
-        // @ts-ignore
-        blot.deleteAt(0)
-      }
-      this.formatter.hide()
-    }
-  }
-}

package/src/modules/custom-image/actions/image-toolbar-buttons.ts

@@ -1,135 +0,0 @@
-import type { ToolbarButtonOptions, ToolButtonOption } from '../options'
-import { isBoolean, isObject } from '../../../utils/is'
-import { CENTER_ALIGN, COPY, DOWNLOAD, LEFT_ALIGN, RIGHT_ALIGN } from '../options'
-
-export const ALIGN_ATTR = 'data-align'
-
-export function setAlignStyle(el: HTMLElement, display: string | null, float: string | null, margin: string | null) {
-  el.style.setProperty('display', display)
-  el.style.setProperty('float', float)
-  el.style.setProperty('margin', margin)
-}
-export const alignmentHandler = {
-  left: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {
-    setAlignStyle(el, 'inline', 'left', '0 1em 1em 0')
-  },
-  center: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {
-    setAlignStyle(el, 'block', null, 'auto')
-  },
-  right: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => {
-    setAlignStyle(el, 'inline', 'right', '0 0 1em 1em')
-  },
-  download: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {
-    const imageName = el.dataset.title || 'image'
-    const url = el.src || ''
-    if (!url) return
-    const a = document.createElement('a')
-    a.href = url
-    a.target = '_blank'
-    a.download = imageName
-    a.style.display = 'none'
-    document.body.appendChild(a)
-    a.click()
-    a.parentNode.removeChild(a)
-  },
-  copy: async (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {
-    if (!el.src) return
-    const imageUrl = el.src
-    try {
-      const response = await fetch(imageUrl)
-      if (!response.ok) {
-        throw new Error('Copy image failed')
-      }
-      const blob = await response.blob()
-      await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])
-    }
-    catch (e) {
-      throw new Error('Copy image failed')
-    }
-  },
-}
-const defaultButtons: Record<string, ToolButtonOption> = {
-  [LEFT_ALIGN]: {
-    name: LEFT_ALIGN,
-    icon: `
-        <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>
-      `,
-    isActive: el => el.getAttribute(ALIGN_ATTR) === 'left',
-    apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {
-      el.setAttribute(ALIGN_ATTR, 'left')
-      alignmentHandler.left(el, toolbarButtons)
-    },
-  },
-  [CENTER_ALIGN]: {
-    name: CENTER_ALIGN,
-    icon: `
-        <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>
-      `,
-    isActive: el => el.getAttribute(ALIGN_ATTR) === 'center',
-    apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {
-      el.setAttribute(ALIGN_ATTR, 'center')
-      alignmentHandler.center(el, toolbarButtons)
-    },
-  },
-  [RIGHT_ALIGN]: {
-    name: RIGHT_ALIGN,
-    icon: `
-        <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>
-      `,
-    isActive: el => el.getAttribute(ALIGN_ATTR) === 'right',
-    apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {
-      el.setAttribute(ALIGN_ATTR, 'right')
-      alignmentHandler.right(el, toolbarButtons)
-    },
-  },
-  [DOWNLOAD]: {
-    name: DOWNLOAD,
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path class="ql-fill" d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10z"/></svg>`,
-    apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {
-      alignmentHandler.download(el, toolbarButtons)
-    },
-  },
-  [COPY]: {
-    name: COPY,
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path class="ql-fill" d="M28 10v18H10V10zm0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2"/><path class="ql-fill" d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"/></svg>`,
-    apply: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => {
-      alignmentHandler.copy(el, toolbarButtons)
-    },
-  },
-}
-export class ImageToolbarButtons {
-  buttons: Record<string, ToolButtonOption>
-
-  constructor(options: ToolbarButtonOptions) {
-    this.buttons = Object.entries(options.buttons).reduce((acc, [name, button]) => {
-      if (isBoolean(button) && button && defaultButtons[name]) {
-        acc[name] = defaultButtons[name]
-      }
-      else if (isObject(button)) {
-        acc[button.name] = button
-      }
-      return acc
-    }, {})
-  }
-
-  getItems(): ToolButtonOption[] {
-    return Object.keys(this.buttons).map(k => this.buttons[k])
-  }
-
-  clear(el: HTMLElement): void {
-    el.removeAttribute(ALIGN_ATTR)
-    setAlignStyle(el, null, null, null)
-  }
-}

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

@@ -1,6 +0,0 @@
-export * from './action'
-export * from './custom-resize-action'
-export * from './delete-action'
-export * from './image-toolbar-buttons'
-export * from './toolbar'
-export * from './toolbar-action'

package/src/modules/custom-image/actions/toolbar-action.ts

@@ -1,32 +0,0 @@
-import type { BlotFormatter } from '../blot-formatter'
-import { Action } from './action'
-import { ImageToolbarButtons } from './image-toolbar-buttons'
-import { ImageToolbar } from './toolbar'
-
-export class ImageToolbarAction extends Action {
-  toolbar: ImageToolbar
-  buttons: ImageToolbarButtons
-
-  constructor(formatter: BlotFormatter) {
-    super(formatter)
-    this.buttons = new ImageToolbarButtons({
-      buttons: formatter.options.toolbar.buttons,
-    })
-    this.toolbar = new ImageToolbar()
-  }
-
-  onCreate() {
-    const toolbar = this.toolbar.create(this.formatter, this.buttons)
-    this.formatter.overlay.appendChild(toolbar)
-  }
-
-  onDestroy() {
-    const toolbar = this.toolbar.getElement()
-    if (!toolbar) {
-      return
-    }
-
-    this.formatter.overlay.removeChild(toolbar)
-    this.toolbar.destroy()
-  }
-}

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

@@ -1,145 +0,0 @@
-import type { BlotFormatter } from '../blot-formatter'
-import type { ToolButtonOption } from '../options'
-import type { ImageToolbarButtons } from './image-toolbar-buttons'
-
-export class ImageToolbar {
-  toolbar?: HTMLElement
-  buttons: HTMLElement[]
-
-  constructor() {
-    this.toolbar = null
-    this.buttons = []
-  }
-
-  create(formatter: BlotFormatter, toolButton: ImageToolbarButtons): HTMLElement {
-    const toolbar = document.createElement('div')
-    toolbar.classList.add(formatter.options.toolbar.mainClassName)
-    this.addToolbarStyle(formatter, toolbar)
-    this.addButtons(formatter, toolbar, toolButton)
-
-    this.toolbar = toolbar
-    return this.toolbar
-  }
-
-  destroy() {
-    this.toolbar = null
-    this.buttons = []
-  }
-
-  getElement() {
-    return this.toolbar
-  }
-
-  addToolbarStyle(formatter: BlotFormatter, toolbar: HTMLElement) {
-    if (formatter.options.toolbar.mainStyle) {
-      Object.assign(toolbar.style, formatter.options.toolbar.mainStyle)
-    }
-  }
-
-  addButtonStyle(button: HTMLElement, index: number, formatter: BlotFormatter) {
-    if (formatter.options.toolbar.buttonStyle) {
-      Object.assign(button.style, formatter.options.toolbar.buttonStyle)
-      if (index > 0) {
-        button.style.borderLeftWidth = '0'
-      }
-    }
-
-    if (formatter.options.toolbar.svgStyle) {
-      Object.assign((button.children[0] as HTMLElement).style, formatter.options.toolbar.svgStyle)
-    }
-  }
-
-  addButtons(formatter: BlotFormatter, toolbar: HTMLElement, toolButton: ImageToolbarButtons) {
-    toolButton.getItems().forEach((tool, i) => {
-      const button = document.createElement('span')
-      button.classList.add(formatter.options.toolbar.buttonClassName)
-      button.innerHTML = tool.icon
-      button.addEventListener('click', () => {
-        this.onButtonClick(button, formatter, tool, toolButton)
-      })
-      this.preselectButton(button, tool, formatter, toolButton)
-      this.addButtonStyle(button, i, formatter)
-      this.buttons.push(button)
-      toolbar.appendChild(button)
-    })
-  }
-
-  preselectButton(
-    button: HTMLElement,
-    toolButtonOption: ToolButtonOption,
-    formatter: BlotFormatter,
-    toolButton: ImageToolbarButtons,
-  ) {
-    if (!formatter.currentSpec) {
-      return
-    }
-
-    const target = formatter.currentSpec.getTargetElement()
-    if (!target) {
-      return
-    }
-
-    if (toolButtonOption.isActive && toolButtonOption.isActive(target)) {
-      this.selectButton(formatter, button)
-    }
-  }
-
-  onButtonClick(
-    button: HTMLElement,
-    formatter: BlotFormatter,
-    toolButtonOption: ToolButtonOption,
-    toolButton: ImageToolbarButtons,
-  ) {
-    if (!formatter.currentSpec) {
-      return
-    }
-
-    const target = formatter.currentSpec.getTargetElement()
-    if (!target || target.tagName.toLowerCase() !== 'img') {
-      return
-    }
-
-    this.clickButton(button, target as HTMLImageElement, formatter, toolButtonOption, toolButton)
-  }
-
-  clickButton(
-    button: HTMLElement,
-    target: HTMLImageElement,
-    formatter: BlotFormatter,
-    toolButtonOption: ToolButtonOption,
-    toolButton: ImageToolbarButtons,
-  ) {
-    if (!toolButtonOption.isActive) {
-      toolButtonOption.apply.call(this, target, toolButton)
-    }
-    else {
-      this.buttons.forEach((b) => {
-        this.deselectButton(formatter, b)
-      })
-
-      if (toolButtonOption.isActive(target)) {
-        toolButton.clear(target)
-      }
-      else {
-        this.selectButton(formatter, button)
-        toolButtonOption.apply.call(this, target, toolButton)
-      }
-    }
-
-    formatter.update()
-  }
-
-  selectButton(formatter: BlotFormatter, button: HTMLElement) {
-    button.classList.add('is-selected')
-    if (formatter.options.toolbar.addButtonSelectStyle) {
-      button.style.setProperty('filter', 'invert(20%)')
-    }
-  }
-
-  deselectButton(formatter: BlotFormatter, button: HTMLElement) {
-    button.classList.remove('is-selected')
-    if (formatter.options.toolbar.addButtonSelectStyle) {
-      button.style.removeProperty('filter')
-    }
-  }
-}