@opentiny/fluent-editor 4.0.0-alpha.8 → 4.0.0-beta.0

package/src/themes/snow.ts

@@ -1,309 +0,0 @@
-import type { ThemeOptions } from 'quill/core/theme'
-import type TypeToolbar from 'quill/modules/toolbar'
-import type TypeIconPicker from 'quill/ui/icon-picker'
-import { CHANGE_LANGUAGE_EVENT, inputFile, isNullOrUndefined } from '../config'
-import FluentEditor from '../core/fluent-editor'
-import { CustomImageSpec } from '../modules/custom-image/specs/custom-image-spec'
-import { LinkTooltip } from '../modules/link'
-import { shortKey } from '../modules/shortcut-key'
-import { ColorPicker, Picker } from '../modules/toolbar/better-picker'
-import { FormatPainter } from '../tools/format-painter'
-import { fullscreenHandler } from '../tools/fullscreen'
-import { Screenshot } from '../tools/screenshot'
-
-const OriginSnowTheme = FluentEditor.import('themes/snow') as any
-const IconPicker = FluentEditor.import('ui/icon-picker') as typeof TypeIconPicker
-
-OriginSnowTheme.DEFAULTS = {
-  modules: {
-    'i18n': true,
-    'keyboard': {
-      bindings: {
-        ...shortKey,
-      },
-    },
-    'toolbar': {
-      handlers: {
-        ...(OriginSnowTheme.DEFAULTS as Record<string, any>).modules.toolbar.handlers,
-        'formula': function () {
-          if (!this.quill.isEnabled()) return
-          const mathlive = this.quill.getModule('mathlive')
-          if (!mathlive) {
-            this.quill.theme.tooltip.edit('formula')
-          }
-          else {
-            mathlive.createDialog()
-          }
-        },
-        'undo': function () {
-          this.quill.history.undo()
-        },
-        'redo': function () {
-          this.quill.history.redo()
-        },
-        'file': function () {
-          const accept = this.quill.uploader.options.mimetypes
-          inputFile.call(this, 'file', accept)
-        },
-        'image': function () {
-          const accept = (this.quill as FluentEditor).uploader.options.mimetypes.filter((type) => {
-            if (type === '*') return 'image/*'
-            return type.startsWith('image/')
-          })
-          inputFile.call(this, 'image', accept)
-        },
-        'video': function () {
-          const accept = (this.quill as FluentEditor).uploader.options.mimetypes.filter((type) => {
-            if (type === '*') return 'video/*'
-            return type.startsWith('video/')
-          })
-          inputFile.call(this, 'video', accept)
-        },
-        'ai': function () {},
-        'emoji': function () {},
-        'fullscreen': fullscreenHandler,
-        [FormatPainter.toolName]: FormatPainter,
-        [Screenshot.toolName]: Screenshot,
-        'line-height': function (value) {
-          this.quill.format('line-height', value)
-        },
-        'divider': function () {
-          const range = this.quill.getSelection(true)
-          this.quill.insertText(range.index, '\n', FluentEditor.sources.USER)
-          this.quill.insertEmbed(range.index + 1, 'divider', true, FluentEditor.sources.USER)
-          this.quill.setSelection(range.index + 2, FluentEditor.sources.SILENT)
-        },
-      },
-    },
-    'image': {
-      specs: [CustomImageSpec],
-      overlay: {
-        style: {
-          border: '1px dashed rgb(68, 68, 68)',
-        },
-      },
-    },
-    'shortcut-key': true,
-    'file': true,
-  },
-}
-
-const ALIGNS = [false, 'center', 'right']
-const COLORS = [
-  '',
-  'rgb(255, 255, 255)',
-  'rgb(0, 0, 0)',
-  'rgb(72, 83, 104)',
-  'rgb(41, 114, 244)',
-  'rgb(0, 163, 245)',
-  'rgb(49, 155, 98)',
-  'rgb(222, 60, 54)',
-  'rgb(248, 136, 37)',
-  'rgb(245, 196, 0)',
-  'rgb(153, 56, 215)',
-
-  'rgb(242, 242, 242)',
-  'rgb(127, 127, 127)',
-  'rgb(243, 245, 247)',
-  'rgb(229, 239, 255)',
-  'rgb(229, 246, 255)',
-  'rgb(234, 250, 241)',
-  'rgb(254, 233, 232)',
-  'rgb(254, 243, 235)',
-  'rgb(254, 249, 227)',
-  'rgb(253, 235, 255)',
-
-  'rgb(216, 216, 216)',
-  'rgb(89, 89, 89)',
-  'rgb(197, 202, 211)',
-  'rgb(199, 220, 255)',
-  'rgb(199, 236, 255)',
-  'rgb(195, 234, 213)',
-  'rgb(255, 201, 199)',
-  'rgb(255, 220, 196)',
-  'rgb(255, 238, 173)',
-  'rgb(242, 199, 255)',
-
-  'rgb(191, 191, 191)',
-  'rgb(63, 63, 63)',
-  'rgb(128, 139, 158)',
-  'rgb(153, 190, 255)',
-  'rgb(153, 221, 255)',
-  'rgb(152, 215, 182)',
-  'rgb(255, 156, 153)',
-  'rgb(255, 186, 132)',
-  'rgb(255, 226, 112)',
-  'rgb(213, 142, 255)',
-
-  'rgb(165, 165, 165)',
-  'rgb(38, 38, 38)',
-  'rgb(53, 59, 69)',
-  'rgb(20, 80, 184)',
-  'rgb(18, 116, 165)',
-  'rgb(39, 124, 79)',
-  'rgb(158, 30, 26)',
-  'rgb(184, 96, 20)',
-  'rgb(163, 130, 0)',
-  'rgb(94, 34, 129)',
-
-  'rgb(147, 147, 147)',
-  'rgb(13, 13, 13)',
-  'rgb(36, 39, 46)',
-  'rgb(12, 48, 110)',
-  'rgb(10, 65, 92)',
-  'rgb(24, 78, 50)',
-  'rgb(88, 17, 14)',
-  'rgb(92, 48, 10)',
-  'rgb(102, 82, 0)',
-  'rgb(59, 21, 81)',
-
-  'custom',
-]
-const FONTS = [false, 'serif', 'monospace']
-const HEADERS = ['1', '2', '3', false]
-const SIZES = ['small', false, 'large', 'huge']
-const LINEHEIGHT = [false, '1.2', '1.5', '2']
-
-class SnowTheme extends OriginSnowTheme {
-  constructor(public quill: FluentEditor, options: ThemeOptions) {
-    super(quill, options)
-
-    this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, () => {
-      this.i18nTextToolbar()
-    })
-  }
-
-  i18nTextToolbar() {
-    const toolbar = this.quill.getModule('toolbar') as TypeToolbar
-    ColorPicker.clearText = this.quill.getLangText('clear-color')
-    ColorPicker.customText = this.quill.getLangText('custom-color')
-
-    if (!toolbar || !this.pickers) return
-
-    this.pickers.forEach((picker) => {
-      if (picker instanceof ColorPicker) {
-        // EasyColorPicker have not dts. abd origin quill ColorPicker dts not complete. use any to resovle ts type error
-        const colorPicker = picker as any
-        colorPicker.options.remove()
-        Array.from(colorPicker.select.options).forEach((option: any) => {
-          if (option.hasAttribute('custom')) {
-            option.remove()
-          }
-        })
-        colorPicker.buildOptions()
-        colorPicker.createUsedColor()
-      }
-
-      if (picker.select && picker.select.classList.contains('ql-header')) {
-        const getLabelKey = (v: string | null) => (v ? `header-${v}` : 'header-normal')
-
-        // 更新 label 文本
-        const labelValue = picker.label.getAttribute('data-value')
-        picker.label.setAttribute('data-label', this.quill.getLangText(getLabelKey(labelValue)))
-
-        const select = picker.select as HTMLSelectElement
-        Array.from(select.options).forEach((option) => {
-          const value = option.getAttribute('value')
-          option.textContent = this.quill.getLangText(getLabelKey(value))
-        })
-
-        picker.options.remove()
-        picker.buildOptions()
-      }
-    })
-  }
-
-  buildPickers(selects: NodeListOf<HTMLSelectElement>, icons: Record<string, string | Record<string, string>>) {
-    this.pickers = Array.from(selects).map((select) => {
-      if (select.classList.contains('ql-align')) {
-        if (isNullOrUndefined(select.querySelector('option'))) {
-          fillSelect(select, ALIGNS)
-        }
-        return new IconPicker(select, icons.align as Record<string, string>)
-      }
-
-      if (select.classList.contains('ql-background') || select.classList.contains('ql-color')) {
-        const format = select.classList.contains('ql-background') ? 'background' : 'color'
-        if (isNullOrUndefined(select.querySelector('option'))) {
-          fillColorSelect(select, COLORS, format, format === 'background' ? '#ffffff' : '#000000')
-        }
-        return new ColorPicker(select, icons[format] as string, {
-          expandIcon: '<i class="icon" />',
-          closeAfterChange: false,
-        })
-      }
-
-      if (isNullOrUndefined(select.querySelector('option'))) {
-        if (select.classList.contains('ql-font')) {
-          fillSelect(select, FONTS)
-        }
-        else if (select.classList.contains('ql-header')) {
-          fillSelect(select, HEADERS)
-        }
-        else if (select.classList.contains('ql-size')) {
-          fillSelect(select, SIZES)
-        }
-        else if (select.classList.contains('ql-line-height')) {
-          fillSelect(select, LINEHEIGHT)
-        }
-      }
-      return new Picker(select)
-    })
-
-    const update = () => {
-      this.pickers.forEach((picker) => {
-        if (picker instanceof ColorPicker) return
-        picker.update()
-      })
-    }
-    this.quill.on(FluentEditor.events.EDITOR_CHANGE, update)
-  }
-
-  extendToolbar(toolbar) {
-    const icons = FluentEditor.import('ui/icons') as Record<string, any>
-    toolbar.container.classList.add('ql-snow')
-    this.buildButtons(toolbar.container.querySelectorAll('button'), icons)
-    this.buildPickers(toolbar.container.querySelectorAll('select'), icons)
-    this.tooltip = new LinkTooltip(this.quill, this.options.bounds)
-  }
-}
-
-function fillSelect(select, values, defaultValue = false) {
-  values.forEach((value) => {
-    const option = document.createElement('option')
-    if (value === defaultValue) {
-      option.setAttribute('selected', 'selected')
-    }
-    else {
-      option.setAttribute('value', value)
-    }
-    select.appendChild(option)
-  })
-}
-
-function fillColorSelect(
-  select: HTMLSelectElement,
-  values: Array<string | boolean>,
-  format: string,
-  defaultValue: unknown = false,
-) {
-  const colorGetter = document.createElement('span') as HTMLElement
-  for (const value of values) {
-    const option = document.createElement('option')
-    if (value === defaultValue) {
-      option.setAttribute('selected', 'selected')
-    }
-    else {
-      if (value !== 'custom') {
-        colorGetter.style[format] = String(value)
-        option.setAttribute('value', colorGetter.style[format])
-      }
-      else {
-        option.setAttribute('value', value)
-      }
-    }
-    select.appendChild(option)
-  }
-}
-
-export default SnowTheme

package/src/tools/format-painter.ts

@@ -1,85 +0,0 @@
-import type { Range } from 'quill'
-import type Toolbar from 'quill/modules/toolbar'
-import Quill from 'quill'
-
-export interface FormatData {
-  formatPainter: {
-    rangeFormat: Record<string, any>
-    isFormatterLock: boolean
-    isFormating: boolean
-    prepareLock: boolean
-  }
-}
-export function FormatPainter(this: Toolbar & FormatData) {
-  if (!this.formatPainter) {
-    this.formatPainter = {
-      rangeFormat: {},
-      isFormatterLock: false,
-      isFormating: false,
-      prepareLock: false,
-    }
-  }
-  const [, formatterBtn] = this.controls.find(([name]) => name === FormatPainter.toolName)
-  const formatRange = (range: Range | null) => {
-    if (!range) return
-    const currentFormats = this.quill.getFormat(range)
-    for (const format in currentFormats) {
-      if (this.quill.options['format-painter']?.ignoreFormat?.includes(format)) continue
-      this.quill.format(format, null, Quill.sources.USER)
-    }
-
-    for (const format in this.formatPainter.rangeFormat) {
-      if (this.quill.options['format-painter']?.ignoreFormat?.includes(format)) continue
-      this.quill.format(format, this.formatPainter.rangeFormat[format], Quill.sources.USER)
-    }
-    if (!this.formatPainter.isFormatterLock) {
-      unbindFormatSelect()
-    }
-    else {
-      btnActive()
-    }
-  }
-  // setTime for Toolbar.update
-  const btnActive = () => {
-    setTimeout(() => {
-      formatterBtn.classList.add('ql-active')
-    }, 0)
-  }
-  const btnRemoveActive = () => {
-    setTimeout(() => {
-      formatterBtn.classList.remove('ql-active')
-    }, 0)
-  }
-  const bindFormatSelect = () => {
-    const range = this.quill.getSelection()
-    if (range.length === 0) return
-    this.formatPainter.rangeFormat = this.quill.getFormat(range)
-    this.formatPainter.isFormating = true
-    this.quill.on(Quill.events.SELECTION_CHANGE, formatRange)
-    btnActive()
-  }
-  const unbindFormatSelect = () => {
-    this.quill.off(Quill.events.SELECTION_CHANGE, formatRange)
-    this.formatPainter.rangeFormat = {}
-    btnRemoveActive()
-    this.formatPainter.isFormating = false
-    this.formatPainter.isFormatterLock = false
-  }
-
-  if (this.formatPainter.isFormatterLock || (this.formatPainter.isFormating && !this.formatPainter.prepareLock)) {
-    unbindFormatSelect()
-  }
-  else if (this.formatPainter.isFormating && this.formatPainter.prepareLock) {
-    this.formatPainter.isFormatterLock = true
-    btnActive()
-  }
-  else {
-    // imitate double click
-    this.formatPainter.prepareLock = true
-    setTimeout(() => {
-      this.formatPainter.prepareLock = false
-    }, 200)
-    bindFormatSelect()
-  }
-}
-FormatPainter.toolName = 'format-painter'

package/src/tools/fullscreen.ts

@@ -1,66 +0,0 @@
-import type Toolbar from 'quill/modules/toolbar'
-import type FluentEditor from '../core/fluent-editor'
-import { namespace } from '../config'
-import { ICONS_CONFIG } from '../ui/icons'
-import { lockScroll } from '../utils/scroll-lock'
-
-export interface FluentEditorToolbar extends Toolbar {
-  quill: FluentEditor
-}
-
-let exitEscHandlerBindToolbar: (e: KeyboardEvent) => void
-let resizeHandlerBindToolbar: () => void
-let cleanLock: ReturnType<typeof lockScroll>
-let originScrollTop = 0
-function exitEscHandler(toolbar: FluentEditorToolbar, e: KeyboardEvent) {
-  if (e.code === 'Escape') {
-    exitFullscreen(toolbar)
-  }
-}
-function updateToolbarHeight(toolbar: FluentEditorToolbar) {
-  const toolbarRect = toolbar.container.getBoundingClientRect()
-  toolbar.quill.container.style.setProperty(`--${namespace}-top`, `${toolbarRect.height}px`)
-}
-function intoFullscreen(toolbar: FluentEditorToolbar) {
-  toolbar.quill.isFullscreen = true
-  originScrollTop = document.documentElement.scrollTop
-  toolbar.container.classList.add('fullscreen')
-  toolbar.quill.container.classList.add('fullscreen')
-  cleanLock = lockScroll()
-  resizeHandlerBindToolbar()
-  const [, btn] = toolbar.controls.find(item => item[0] === 'fullscreen')
-  btn.innerHTML = ICONS_CONFIG['fullscreen-exit']
-  window.addEventListener('resize', resizeHandlerBindToolbar)
-  document.addEventListener('keydown', exitEscHandlerBindToolbar)
-  // TODO: clear hard code
-  const toolbarTipModule = toolbar.quill.getModule('toolbar-tip') as any
-  if (toolbarTipModule) {
-    toolbarTipModule.hideAllTips()
-  }
-}
-function exitFullscreen(toolbar: FluentEditorToolbar) {
-  toolbar.quill.isFullscreen = false
-  toolbar.container.classList.remove('fullscreen')
-  toolbar.quill.container.classList.remove('fullscreen')
-  cleanLock()
-  document.documentElement.scrollTop = originScrollTop
-  const [, btn] = toolbar.controls.find(item => item[0] === 'fullscreen')
-  btn.innerHTML = ICONS_CONFIG.fullscreen
-  window.removeEventListener('resize', resizeHandlerBindToolbar)
-  document.removeEventListener('keydown', exitEscHandlerBindToolbar)
-  // TODO: clear hard code
-  const toolbarTipModule = toolbar.quill.getModule('toolbar-tip') as any
-  if (toolbarTipModule) {
-    toolbarTipModule.hideAllTips()
-  }
-}
-export function fullscreenHandler(this: FluentEditorToolbar) {
-  if (this.quill.isFullscreen) {
-    exitFullscreen(this)
-  }
-  else {
-    exitEscHandlerBindToolbar = exitEscHandler.bind(undefined, this)
-    resizeHandlerBindToolbar = updateToolbarHeight.bind(undefined, this)
-    intoFullscreen(this)
-  }
-}

package/src/tools/screenshot.ts

@@ -1,231 +0,0 @@
-import type html2canvas from 'html2canvas'
-import type { Options as Html2CanvasOptions } from 'html2canvas'
-import type Toolbar from 'quill/modules/toolbar'
-import Quill from 'quill'
-import { imgToBase64 } from '../utils/image'
-import { lockScroll } from '../utils/scroll-lock'
-
-const Delta = Quill.import('delta')
-
-export type ScreenShotOptions = Partial<Html2CanvasOptions> & {
-  Html2Canvas: typeof html2canvas
-  beforeCreateCanvas: () => void | Promise<void>
-  beforeCreateImage: (canvas: HTMLCanvasElement) => HTMLCanvasElement | string | Promise<HTMLCanvasElement | string>
-}
-interface ScreenShotOptionsInQuill {
-  quill: {
-    options: {
-      screenshot: Partial<ScreenShotOptions>
-    }
-  }
-}
-
-function resolveOptions(options: Partial<ScreenShotOptions>) {
-  return Object.assign({
-    // @ts-ignore
-    Html2Canvas: window.Html2Canvas,
-    useCORS: true,
-    scale: 1,
-    foreignObjectRendering: true,
-    beforeCreateImage: undefined,
-    beforeCreateCanvas: undefined,
-  }, options)
-}
-
-function init() {
-  const maskExits = document.querySelectorAll('.ql-screenshot-mask')
-  if (maskExits) {
-    maskExits.forEach(item => item && item.remove())
-  }
-  // 创建截图图层
-  const wrapper = document.createElement('div')
-  wrapper.classList.add('ql-screenshot-wrapper')
-  const mask = document.createElement('div')
-  mask.className = 'ql-screenshot-mask'
-  const cutter = document.createElement('div')
-  cutter.className = 'ql-screenshot-cutter'
-  const coordinate = document.createElement('p')
-  coordinate.className = 'ql-screenshot-coordinate'
-  cutter.appendChild(coordinate)
-  wrapper.appendChild(mask)
-  wrapper.appendChild(cutter)
-  document.body.appendChild(wrapper)
-  return { wrapper, mask, cutter, coordinate }
-}
-
-function findParentFixed(dom: HTMLElement) {
-  if (dom.tagName === 'BODY') return false
-  if (['fixed', 'sticky'].includes(dom.parentElement.style.position)) return true
-  return findParentFixed(dom.parentElement)
-}
-async function renderImage(
-  Html2Canvas: typeof html2canvas,
-  html2canvasOptions: Partial<Html2CanvasOptions>,
-  rect: DOMRect,
-  options?: Omit<ScreenShotOptions, 'Html2Canvas' | keyof Html2CanvasOptions>,
-) {
-  if (options && options.beforeCreateCanvas) {
-    await options.beforeCreateCanvas()
-  }
-  const canvas: CanvasImageSource = await Html2Canvas(document.body, {
-    ...html2canvasOptions,
-    onclone: async (doc: Document, el: HTMLElement) => {
-      // find all fixed or sticky dom
-      const fixedDom = Array.from(doc.querySelectorAll('*[style*="position: fixed"]')) as HTMLElement[]
-      const stickyDom = Array.from(doc.querySelectorAll('*[style*="position: sticky"]')) as HTMLElement[]
-      const fixedDomList = new Set([...fixedDom, ...stickyDom])
-      for (const dom of fixedDomList) {
-        // if parent dom already has fixed or sticky style
-        // means that transform will be settle. skip
-        if (findParentFixed(dom)) continue
-        // use transform move to correct position
-        let x = 0
-        let y = 0
-        if (dom.style.top !== 'auto') {
-          y = window.scrollY
-        }
-        if (dom.style.left !== 'auto') {
-          x = window.scrollX
-        }
-        if (x !== 0 || y !== 0) {
-          dom.style.transform = `translate(${x}px, ${y}px)`
-        }
-      }
-
-      const imgs = doc.querySelectorAll('img')
-      const promises = Array.from(imgs).map(async (img) => {
-        img.src = await imgToBase64(img.src)
-      })
-      await Promise.all(promises)
-      html2canvasOptions.onclone && await html2canvasOptions.onclone(doc, el)
-    },
-  })
-  // 当前canvas为body全局截图，从当前截图中截取想要的部分重新绘制转成base64插入富文本
-  let cropCanvas: HTMLCanvasElement | string = document.createElement('canvas')
-  cropCanvas.width = rect.width
-  cropCanvas.height = rect.height
-  const cropCanvasCtx = cropCanvas.getContext('2d')
-  cropCanvasCtx.drawImage(
-    canvas,
-    rect.x + window.scrollX,
-    rect.y + window.scrollY,
-    rect.width,
-    rect.height,
-    0,
-    0,
-    rect.width,
-    rect.height,
-  )
-  if (options && options.beforeCreateImage) {
-    cropCanvas = await options.beforeCreateImage(cropCanvas)
-  }
-  return typeof cropCanvas === 'string' ? cropCanvas : cropCanvas.toDataURL()
-}
-
-export function Screenshot(this: Toolbar & ScreenShotOptionsInQuill) {
-  this.quill.options.screenshot = resolveOptions(this.quill.options.screenshot)
-  const options = this.quill.options.screenshot
-  // @ts-ignore
-  const { Html2Canvas, beforeCreateImage, beforeCreateCanvas, ...html2CanvasOptions } = options
-  if (!Html2Canvas) {
-    throw new Error('ScreenShot module requires html2canvas. Please include the library on the page before FluentEditor.')
-  }
-  const range = this.quill.getSelection()
-  const { wrapper, mask, cutter, coordinate } = init()
-  const status: {
-    leftClickLockFlag: boolean
-    start?: {
-      x: number
-      y: number
-    }
-  } = {
-    leftClickLockFlag: false,
-    start: undefined,
-  }
-  const cleanLock = lockScroll()
-
-  const removeContextmenu = (event: Event) => {
-    event.preventDefault()
-    wrapper.remove()
-    cleanLock()
-    document.removeEventListener('contextmenu', removeContextmenu)
-  }
-  const afterShotCtrl = async (event: MouseEvent) => {
-    document.removeEventListener('mousedown', toggleRect)
-    const cutterRect = cutter.getBoundingClientRect()
-    const target = event.target as HTMLElement
-    wrapper.remove()
-    cleanLock()
-    if (target && target.className === 'ql-screenshot-confirm') {
-      const image = await renderImage(Html2Canvas, html2CanvasOptions, cutterRect, { beforeCreateCanvas, beforeCreateImage })
-
-      const delta = new Delta()
-        .retain(range.index)
-        .delete(range.length)
-        .insert({ image })
-      this.quill.updateContents(delta, Quill.sources.USER)
-      this.quill.setSelection(range.index + 1, Quill.sources.SILENT)
-    }
-    status.start = undefined
-  }
-  const drawRect = (event: MouseEvent) => {
-    // 通过鼠标移动描绘截图图层
-    const startX = status.start.x
-    const startY = status.start.y
-    const endX = event.clientX
-    const endY = event.clientY
-    const width = Math.abs(endX - startX)
-    const height = Math.abs(endY - startY)
-    const top = startY < endY ? startY : endY
-    const left = startX < endX ? startX : endX
-    const bottom = window.innerHeight - height - top
-    const right = window.innerWidth - width - left
-
-    const maskPath = `
-      linear-gradient(to top, #fff, #fff) top / 100% ${top}px,
-      linear-gradient(to bottom, #fff, #fff) bottom /100% ${bottom}px,
-      linear-gradient(to left, #fff, #fff) left / ${left}px 100%,
-      linear-gradient(to right, #fff, #fff) right / ${right}px 100%
-    `
-    Object.assign(cutter.style, {
-      width: `${width}px`,
-      height: `${height}px`,
-      left: `${left}px`,
-      top: `${top}px`,
-    })
-    Object.assign(mask.style, {
-      'mask': maskPath,
-      '-webkit-mask-repeat': 'no-repeat',
-    })
-    coordinate.textContent = `${width}, ${height}`
-  }
-  const toggleRect = (event: MouseEvent) => {
-    // 右键取消截图操作
-    if (event.button === 2) {
-      document.removeEventListener('mousemove', drawRect)
-      document.removeEventListener('mousedown', toggleRect)
-      document.addEventListener('contextmenu', removeContextmenu)
-      return
-    }
-    if (!status.leftClickLockFlag) {
-      if (status.start) {
-        // 如果有起点，则当前触发坐标为终点，移除监听事件并添加确认和取消按钮
-        document.removeEventListener('mousemove', drawRect)
-        const doneBtn = document.createElement('div')
-        doneBtn.innerHTML = `<div class="ql-screenshot-confirm"></div><div class="ql-screenshot-cancel"></div>`
-        doneBtn.className = 'ql-screenshot-done'
-        doneBtn.addEventListener('click', afterShotCtrl)
-        coordinate.remove()
-        cutter.appendChild(doneBtn)
-        status.leftClickLockFlag = true
-      }
-      else {
-        // 无起点则设置起点坐标，监听鼠标移动
-        status.start = { x: event.clientX, y: event.clientY }
-        document.addEventListener('mousemove', drawRect)
-      }
-    }
-  }
-  document.addEventListener('mousedown', toggleRect)
-}
-Screenshot.toolName = 'screenshot'