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

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

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

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

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

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

@@ -0,0 +1,145 @@
+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')
+    }
+  }
+}