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

package/src/themes/snow.ts

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

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

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

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