editor-svg 1.0.0

package/src/editor/core/event/handlers/mousemove.ts

@@ -0,0 +1,133 @@
+import { ImageDisplay } from '../../../dataset/enum/Common'
+import { ControlComponent } from '../../../dataset/enum/Control'
+import { ElementType } from '../../../dataset/enum/Element'
+import { CanvasEvent } from '../CanvasEvent'
+
+export function mousemove(evt: MouseEvent, host: CanvasEvent) {
+  const draw = host.getDraw()
+  // 是否是拖拽文字
+  if (host.isAllowDrag) {
+    // 是否允许拖拽到选区
+    const x = evt.offsetX
+    const y = evt.offsetY
+    const { startIndex, endIndex } = host.cacheRange!
+    const positionList = host.cachePositionList!
+    for (let p = startIndex + 1; p <= endIndex; p++) {
+      const {
+        coordinate: { leftTop, rightBottom }
+      } = positionList[p]
+      if (
+        x >= leftTop[0] &&
+        x <= rightBottom[0] &&
+        y >= leftTop[1] &&
+        y <= rightBottom[1]
+      ) {
+        return
+      }
+    }
+    const cacheStartIndex = host.cacheRange?.startIndex
+    if (cacheStartIndex) {
+      // 浮动元素拖拽调整位置
+      const dragElement = host.cacheElementList![cacheStartIndex]
+      if (
+        dragElement?.type === ElementType.IMAGE &&
+        (dragElement.imgDisplay === ImageDisplay.SURROUND ||
+          dragElement.imgDisplay === ImageDisplay.FLOAT_TOP ||
+          dragElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM)
+      ) {
+        draw.getPreviewer().clearResizer()
+        draw.getImageParticle().dragFloatImage(evt.movementX, evt.movementY)
+      }
+    }
+    host.dragover(evt)
+    host.isAllowDrop = true
+    return
+  }
+  if (!host.isAllowSelection || !host.mouseDownStartPosition) return
+  const target = evt.target as HTMLDivElement
+  const pageIndex = target.dataset.index
+  // 设置pageNo
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex))
+  }
+  // 结束位置
+  const position = draw.getPosition()
+  const positionResult = position.getPositionByXY({
+    x: evt.offsetX,
+    y: evt.offsetY
+  })
+  if (!~positionResult.index) return
+  const {
+    index,
+    isTable,
+    tdValueIndex,
+    tdIndex,
+    trIndex,
+    tableId,
+    trId,
+    tdId
+  } = positionResult
+  const {
+    index: startIndex,
+    isTable: startIsTable,
+    tdIndex: startTdIndex,
+    trIndex: startTrIndex,
+    tableId: startTableId
+  } = host.mouseDownStartPosition
+  const endIndex = isTable ? tdValueIndex! : index
+  // 判断是否是表格跨行/列
+  const rangeManager = draw.getRange()
+  if (
+    isTable &&
+    startIsTable &&
+    (tdIndex !== startTdIndex || trIndex !== startTrIndex)
+  ) {
+    rangeManager.setRange(
+      endIndex,
+      endIndex,
+      tableId,
+      startTdIndex,
+      tdIndex,
+      startTrIndex,
+      trIndex
+    )
+    position.setPositionContext({
+      isTable,
+      index,
+      trIndex,
+      tdIndex,
+      tdId,
+      trId,
+      tableId
+    })
+  } else {
+    let end = ~endIndex ? endIndex : 0
+    // 开始或结束位置存在表格，但是非相同表格则忽略选区设置
+    if ((startIsTable || isTable) && startTableId !== tableId) return
+    // 开始位置
+    let start = startIndex
+    if (start > end) {
+      // prettier-ignore
+      [start, end] = [end, start]
+    }
+    if (start === end) return
+    // 背景文本禁止选区
+    const elementList = draw.getElementList()
+    const startElement = elementList[start + 1]
+    const endElement = elementList[end]
+    if (
+      startElement?.controlComponent === ControlComponent.PLACEHOLDER &&
+      endElement?.controlComponent === ControlComponent.PLACEHOLDER &&
+      startElement.controlId === endElement.controlId
+    ) {
+      return
+    }
+    rangeManager.setRange(start, end)
+  }
+  // 绘制
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isCompute: false
+  })
+}

package/src/editor/core/event/handlers/mouseup.ts

@@ -0,0 +1,341 @@
+import {
+  CONTROL_CONTEXT_ATTR,
+  EDITOR_ELEMENT_STYLE_ATTR
+} from '../../../dataset/constant/Element'
+import { ImageDisplay } from '../../../dataset/enum/Common'
+import { ControlComponent, ControlType } from '../../../dataset/enum/Control'
+import { ElementType } from '../../../dataset/enum/Element'
+import { IElement } from '../../../interface/Element'
+import { deepClone, getUUID, omitObject } from '../../../utils'
+import { formatElementContext, formatElementList } from '../../../utils/element'
+import { CanvasEvent } from '../CanvasEvent'
+
+type IDragElement = IElement & { dragId: string }
+
+function createDragId(element: IElement): string {
+  const dragId = getUUID()
+  Reflect.set(element, 'dragId', dragId)
+  return dragId
+}
+
+function getElementIndexByDragId(dragId: string, elementList: IElement[]) {
+  return (<IDragElement[]>elementList).findIndex(el => el.dragId === dragId)
+}
+
+// 移动悬浮图片位置
+function moveImgPosition(
+  element: IElement,
+  evt: MouseEvent,
+  host: CanvasEvent
+) {
+  const draw = host.getDraw()
+  if (
+    element.imgDisplay === ImageDisplay.SURROUND ||
+    element.imgDisplay === ImageDisplay.FLOAT_TOP ||
+    element.imgDisplay === ImageDisplay.FLOAT_BOTTOM
+  ) {
+    const moveX = evt.offsetX - host.mouseDownStartPosition!.x!
+    const moveY = evt.offsetY - host.mouseDownStartPosition!.y!
+    const imgFloatPosition = element.imgFloatPosition!
+    element.imgFloatPosition = {
+      x: imgFloatPosition.x + moveX,
+      y: imgFloatPosition.y + moveY,
+      pageNo: draw.getPageNo()
+    }
+  }
+  draw.getImageParticle().destroyFloatImage()
+}
+
+export function mouseup(evt: MouseEvent, host: CanvasEvent) {
+  // 判断是否允许拖放
+  if (host.isAllowDrop) {
+    const draw = host.getDraw()
+    if (draw.isReadonly() || draw.isDisabled()) {
+      host.mousedown(evt)
+      return
+    }
+    const position = draw.getPosition()
+    const positionList = position.getPositionList()
+    const positionContext = position.getPositionContext()
+    const rangeManager = draw.getRange()
+    const cacheRange = host.cacheRange!
+    const cacheElementList = host.cacheElementList!
+    const cachePositionList = host.cachePositionList!
+    const cachePositionContext = host.cachePositionContext
+    const range = rangeManager.getRange()
+    // 缓存选区的信息
+    const isCacheRangeCollapsed = cacheRange.startIndex === cacheRange.endIndex
+    // 选区闭合时，起始位置向前移动一位进行扩选
+    const cacheStartIndex = isCacheRangeCollapsed
+      ? cacheRange.startIndex - 1
+      : cacheRange.startIndex
+    const cacheEndIndex = cacheRange.endIndex
+    // 是否需要拖拽-位置发生改变
+    if (
+      range.startIndex >= cacheStartIndex &&
+      range.endIndex <= cacheEndIndex &&
+      host.cachePositionContext?.tdId === positionContext.tdId
+    ) {
+      // 清除渲染副作用
+      draw.clearSideEffect()
+      // 浮动元素拖拽需要提交历史
+      let isSubmitHistory = false
+      let isCompute = false
+      if (isCacheRangeCollapsed) {
+        // 图片移动
+        const dragElement = cacheElementList[cacheEndIndex]
+        if (
+          dragElement.type === ElementType.IMAGE ||
+          dragElement.type === ElementType.LATEX
+        ) {
+          moveImgPosition(dragElement, evt, host)
+          if (
+            dragElement.imgDisplay === ImageDisplay.SURROUND ||
+            dragElement.imgDisplay === ImageDisplay.FLOAT_TOP ||
+            dragElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM
+          ) {
+            draw.getPreviewer().drawResizer(dragElement)
+            isSubmitHistory = true
+          } else {
+            const cachePosition = cachePositionList[cacheEndIndex]
+            draw.getPreviewer().drawResizer(dragElement, cachePosition)
+          }
+          // 四周环绕型元素需计算
+          isCompute = dragElement.imgDisplay === ImageDisplay.SURROUND
+        }
+      }
+      rangeManager.replaceRange({
+        ...cacheRange
+      })
+      draw.render({
+        isCompute,
+        isSubmitHistory,
+        isSetCursor: false
+      })
+      return
+    }
+    // 是否是不可拖拽的控件结构元素
+    const dragElementList = cacheElementList.slice(
+      cacheStartIndex + 1,
+      cacheEndIndex + 1
+    )
+    const isContainControl = dragElementList.find(element => element.controlId)
+    if (isContainControl) {
+      // 仅允许 (最前/后元素不是控件 || 在控件前后 || 文本控件且是值) 拖拽
+      const cacheStartElement = cacheElementList[cacheStartIndex + 1]
+      const cacheEndElement = cacheElementList[cacheEndIndex]
+      const isAllowDragControl =
+        ((!cacheStartElement.controlId ||
+          cacheStartElement.controlComponent === ControlComponent.PREFIX) &&
+          (!cacheEndElement.controlId ||
+            cacheEndElement.controlComponent === ControlComponent.POSTFIX)) ||
+        (cacheStartElement.controlId === cacheEndElement.controlId &&
+          cacheStartElement.controlComponent === ControlComponent.PREFIX &&
+          cacheEndElement.controlComponent === ControlComponent.POSTFIX) ||
+        (cacheStartElement.control?.type === ControlType.TEXT &&
+          cacheStartElement.controlComponent === ControlComponent.VALUE &&
+          cacheEndElement.control?.type === ControlType.TEXT &&
+          cacheEndElement.controlComponent === ControlComponent.VALUE)
+      if (!isAllowDragControl) {
+        draw.render({
+          curIndex: range.startIndex,
+          isCompute: false,
+          isSubmitHistory: false
+        })
+        return
+      }
+    }
+    // 格式化元素
+    const control = draw.getControl()
+    const elementList = draw.getElementList()
+    // 是否排除控件属性（1.不包含控件 2.新位置在控件内 3.选区不包含完整控件）
+    const isOmitControlAttr =
+      !isContainControl ||
+      !!elementList[range.startIndex].controlId ||
+      !control.getIsElementListContainFullControl(dragElementList)
+    const editorOptions = draw.getOptions()
+    // 元素属性复制（1.文本提取样式及相关上下文 2.非文本排除相关上下文）
+    const replaceElementList = dragElementList.map(el => {
+      if (!el.type || el.type === ElementType.TEXT) {
+        const newElement: IElement = {
+          value: el.value
+        }
+        const copyAttr = EDITOR_ELEMENT_STYLE_ATTR
+        if (!isOmitControlAttr) {
+          copyAttr.push(...CONTROL_CONTEXT_ATTR)
+        }
+        copyAttr.forEach(attr => {
+          const value = el[attr] as never
+          if (value !== undefined) {
+            newElement[attr] = value
+          }
+        })
+        return newElement
+      } else {
+        let newElement = deepClone(el)
+        if (isOmitControlAttr) {
+          newElement = omitObject(newElement, CONTROL_CONTEXT_ATTR)
+        }
+        formatElementList([newElement], {
+          isHandleFirstElement: false,
+          editorOptions
+        })
+        return newElement
+      }
+    })
+    formatElementContext(elementList, replaceElementList, range.startIndex, {
+      editorOptions: draw.getOptions()
+    })
+    // 缓存拖拽选区开始元素、位置、开始结束id
+    const cacheStartElement = cacheElementList[cacheStartIndex]
+    const cacheStartPosition = cachePositionList[cacheStartIndex]
+    const cacheRangeStartId = createDragId(cacheElementList[cacheStartIndex])
+    const cacheRangeEndId = createDragId(cacheElementList[cacheEndIndex])
+    // 设置拖拽值
+    const replaceLength = replaceElementList.length
+    let rangeStart = range.startIndex
+    let rangeEnd = rangeStart + replaceLength
+    const activeControl = control.getActiveControl()
+    if (
+      activeControl &&
+      cacheElementList[rangeStart].controlComponent !== ControlComponent.POSTFIX
+    ) {
+      rangeEnd = activeControl.setValue(replaceElementList)
+      rangeStart = rangeEnd - replaceLength
+    } else {
+      draw.spliceElementList(elementList, rangeStart + 1, 0, replaceElementList)
+    }
+    if (!~rangeEnd) {
+      draw.render({
+        isSetCursor: false
+      })
+      return
+    }
+    // 缓存当前开始结束id
+    const rangeStartId = createDragId(elementList[rangeStart])
+    const rangeEndId = createDragId(elementList[rangeEnd])
+    // 删除原有拖拽元素
+    const cacheRangeStartIndex = getElementIndexByDragId(
+      cacheRangeStartId,
+      cacheElementList
+    )
+    const cacheRangeEndIndex = getElementIndexByDragId(
+      cacheRangeEndId,
+      cacheElementList
+    )
+    const cacheEndElement = cacheElementList[cacheRangeEndIndex]
+    if (
+      cacheEndElement.controlId &&
+      cacheEndElement.controlComponent !== ControlComponent.POSTFIX
+    ) {
+      rangeManager.replaceRange({
+        ...cacheRange,
+        startIndex: cacheRangeStartIndex,
+        endIndex: cacheRangeEndIndex
+      })
+      control.getActiveControl()?.cut()
+    } else {
+      // td不可删除判断
+      let isTdElementDeletable = true
+      if (cachePositionContext?.isTable) {
+        const { tableId, trIndex, tdIndex } = cachePositionContext
+        const originElementList = draw.getOriginalElementList()
+        isTdElementDeletable = !originElementList.some(
+          el =>
+            el.id === tableId &&
+            el?.trList?.[trIndex!]?.tdList?.[tdIndex!]?.deletable === false
+        )
+      }
+      if (isTdElementDeletable) {
+        draw.spliceElementList(
+          cacheElementList,
+          cacheRangeStartIndex + 1,
+          cacheRangeEndIndex - cacheRangeStartIndex
+        )
+      }
+    }
+    // 重设上下文
+    const startElement = elementList[range.startIndex]
+    const startPosition = positionList[range.startIndex]
+    let positionContextIndex = positionContext.index
+    if (positionContextIndex) {
+      if (startElement.tableId && !cacheStartElement.tableId) {
+        // 表格外移动到表格内&&表格之前
+        if (cacheStartPosition.index < positionContextIndex) {
+          positionContextIndex -= replaceLength
+        }
+      } else if (!startElement.tableId && cacheStartElement.tableId) {
+        // 表格内移到表格外&&表格之前
+        if (startPosition.index < positionContextIndex) {
+          positionContextIndex += replaceLength
+        }
+      }
+      position.setPositionContext({
+        ...positionContext,
+        index: positionContextIndex
+      })
+    }
+    // 重设选区
+    const rangeStartIndex = getElementIndexByDragId(rangeStartId, elementList)
+    const rangeEndIndex = getElementIndexByDragId(rangeEndId, elementList)
+    rangeManager.setRange(
+      isCacheRangeCollapsed ? rangeEndIndex : rangeStartIndex,
+      rangeEndIndex,
+      range.tableId,
+      range.startTdIndex,
+      range.endTdIndex,
+      range.startTrIndex,
+      range.endTrIndex
+    )
+    // 清除渲染副作用
+    draw.clearSideEffect()
+    // 移动图片
+    let imgElement: IElement | null = null
+    if (isCacheRangeCollapsed) {
+      const elementList = draw.getElementList()
+      const dragElement = elementList[rangeEndIndex]
+      if (
+        dragElement.type === ElementType.IMAGE ||
+        dragElement.type === ElementType.LATEX
+      ) {
+        moveImgPosition(dragElement, evt, host)
+        imgElement = dragElement
+      }
+    }
+    // 重新渲染
+    draw.render({
+      isSetCursor: false
+    })
+    // 控件值变更回调
+    if (activeControl) {
+      control.emitControlContentChange()
+    } else if (cacheStartElement.controlId) {
+      control.emitControlContentChange({
+        context: {
+          range: cacheRange,
+          elementList: cacheElementList
+        },
+        controlElement: cacheStartElement
+      })
+    }
+    // 拖拽后渲染图片工具
+    if (imgElement) {
+      if (
+        imgElement.imgDisplay === ImageDisplay.SURROUND ||
+        imgElement.imgDisplay === ImageDisplay.FLOAT_TOP ||
+        imgElement.imgDisplay === ImageDisplay.FLOAT_BOTTOM
+      ) {
+        draw.getPreviewer().drawResizer(imgElement)
+      } else {
+        const dragPositionList = position.getPositionList()
+        const dragPosition = dragPositionList[rangeEndIndex]
+        draw.getPreviewer().drawResizer(imgElement, dragPosition)
+      }
+    }
+  } else if (host.isAllowDrag) {
+    // 如果是允许拖拽不允许拖放（点击选区时光标闭合）则光标重置
+    if (host.cacheRange?.startIndex !== host.cacheRange?.endIndex) {
+      host.mousedown(evt)
+    }
+  }
+}

package/src/editor/core/event/handlers/paste.ts

@@ -0,0 +1,231 @@
+import { ZERO } from '../../../dataset/constant/Common'
+import { VIRTUAL_ELEMENT_TYPE } from '../../../dataset/constant/Element'
+import { ElementType } from '../../../dataset/enum/Element'
+import { IElement } from '../../../interface/Element'
+import { IPasteOption } from '../../../interface/Event'
+import {
+  getClipboardData,
+  getIsClipboardContainFile,
+  removeClipboardData
+} from '../../../utils/clipboard'
+import {
+  formatElementContext,
+  getElementListByHTML
+} from '../../../utils/element'
+import { CanvasEvent } from '../CanvasEvent'
+import { IOverrideResult } from '../../override/Override'
+import { normalizeLineBreak } from '../../../utils'
+
+export function pasteElement(host: CanvasEvent, elementList: IElement[]) {
+  const draw = host.getDraw()
+  if (
+    draw.isReadonly() ||
+    draw.isDisabled() ||
+    draw.getControl().getIsDisabledPasteControl()
+  ) {
+    return
+  }
+  const rangeManager = draw.getRange()
+  const { startIndex } = rangeManager.getRange()
+  const originalElementList = draw.getElementList()
+  // 全选粘贴无需格式化上下文
+  if (~startIndex && !rangeManager.getIsSelectAll()) {
+    // 如果是复制到虚拟元素里，则粘贴列表的虚拟元素需扁平化处理，避免产生新的虚拟元素
+    const anchorElement = originalElementList[startIndex]
+    if (anchorElement?.titleId || anchorElement?.listId) {
+      let start = 0
+      while (start < elementList.length) {
+        const pasteElement = elementList[start]
+        if (anchorElement.titleId && /^\n/.test(pasteElement.value)) {
+          break
+        }
+        if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement.type!)) {
+          elementList.splice(start, 1)
+          if (pasteElement.valueList) {
+            for (let v = 0; v < pasteElement.valueList.length; v++) {
+              const element = pasteElement.valueList[v]
+              if (element.value === ZERO || element.value === '\n') {
+                continue
+              }
+              elementList.splice(start, 0, element)
+              start++
+            }
+          }
+          start--
+        }
+        start++
+      }
+    }
+    formatElementContext(originalElementList, elementList, startIndex, {
+      isBreakWhenWrap: true,
+      editorOptions: draw.getOptions()
+    })
+  }
+  draw.insertElementList(elementList)
+}
+
+export function pasteHTML(host: CanvasEvent, htmlText: string) {
+  const draw = host.getDraw()
+  if (draw.isReadonly() || draw.isDisabled()) return
+  const elementList = getElementListByHTML(htmlText, {
+    innerWidth: draw.getOriginalInnerWidth()
+  })
+  pasteElement(host, elementList)
+}
+
+export function pasteImage(host: CanvasEvent, file: File | Blob) {
+  const draw = host.getDraw()
+  if (draw.isReadonly() || draw.isDisabled()) return
+  // 自定义粘贴图片事件
+  const { pasteImage: overridePasteImage } = draw.getOverride()
+  if (overridePasteImage) {
+    const overrideResult = overridePasteImage(file)
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
+  }
+  const rangeManager = draw.getRange()
+  const { startIndex } = rangeManager.getRange()
+  const elementList = draw.getElementList()
+  // 创建文件读取器
+  const fileReader = new FileReader()
+  fileReader.readAsDataURL(file)
+  fileReader.onload = () => {
+    // 计算宽高
+    const image = new Image()
+    const value = fileReader.result as string
+    image.src = value
+    image.onload = () => {
+      const imageElement: IElement = {
+        value,
+        type: ElementType.IMAGE,
+        width: image.width,
+        height: image.height
+      }
+      if (~startIndex) {
+        formatElementContext(elementList, [imageElement], startIndex, {
+          editorOptions: draw.getOptions()
+        })
+      }
+      draw.insertElementList([imageElement])
+    }
+  }
+}
+
+export function pasteByEvent(host: CanvasEvent, evt: ClipboardEvent) {
+  const draw = host.getDraw()
+  if (draw.isReadonly() || draw.isDisabled()) return
+  const clipboardData = evt.clipboardData
+  if (!clipboardData) return
+  // 自定义粘贴事件
+  const { paste } = draw.getOverride()
+  if (paste) {
+    const overrideResult = paste(evt)
+    // 默认阻止默认事件
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
+  }
+  // 优先读取编辑器内部粘贴板数据（粘贴板不包含文件时）
+  if (!getIsClipboardContainFile(clipboardData)) {
+    const clipboardText = clipboardData.getData('text')
+    const editorClipboardData = getClipboardData()
+    // 不同系统间默认换行符不同 windows:\r\n mac:\n
+    if (
+      editorClipboardData &&
+      normalizeLineBreak(clipboardText) ===
+        normalizeLineBreak(editorClipboardData.text)
+    ) {
+      pasteElement(host, editorClipboardData.elementList)
+      return
+    }
+  }
+  removeClipboardData()
+  // 从粘贴板提取数据
+  let isHTML = false
+  for (let i = 0; i < clipboardData.items.length; i++) {
+    const item = clipboardData.items[i]
+    if (item.type === 'text/html') {
+      isHTML = true
+      break
+    }
+  }
+  for (let i = 0; i < clipboardData.items.length; i++) {
+    const item = clipboardData.items[i]
+    if (item.kind === 'string') {
+      if (item.type === 'text/plain' && !isHTML) {
+        item.getAsString(plainText => {
+          host.input(plainText)
+        })
+        break
+      }
+      if (item.type === 'text/html' && isHTML) {
+        item.getAsString(htmlText => {
+          pasteHTML(host, htmlText)
+        })
+        break
+      }
+    } else if (item.kind === 'file') {
+      if (item.type.includes('image')) {
+        const file = item.getAsFile()
+        if (file) {
+          pasteImage(host, file)
+        }
+      }
+    }
+  }
+}
+
+export async function pasteByApi(host: CanvasEvent, options?: IPasteOption) {
+  const draw = host.getDraw()
+  if (draw.isReadonly() || draw.isDisabled()) return
+  // 自定义粘贴事件
+  const { paste } = draw.getOverride()
+  if (paste) {
+    const overrideResult = paste()
+    // 默认阻止默认事件
+    if ((<IOverrideResult>overrideResult)?.preventDefault !== false) return
+  }
+  // 优先读取编辑器内部粘贴板数据
+  const clipboardText = await navigator.clipboard.readText()
+  const editorClipboardData = getClipboardData()
+  if (
+    editorClipboardData &&
+    normalizeLineBreak(clipboardText) ===
+      normalizeLineBreak(editorClipboardData.text)
+  ) {
+    pasteElement(host, editorClipboardData.elementList)
+    return
+  }
+  removeClipboardData()
+  // 从内存粘贴板获取数据
+  if (options?.isPlainText) {
+    if (clipboardText) {
+      host.input(clipboardText)
+    }
+  } else {
+    const clipboardData = await navigator.clipboard.read()
+    let isHTML = false
+    for (const item of clipboardData) {
+      if (item.types.includes('text/html')) {
+        isHTML = true
+        break
+      }
+    }
+    for (const item of clipboardData) {
+      if (item.types.includes('text/plain') && !isHTML) {
+        const textBlob = await item.getType('text/plain')
+        const text = await textBlob.text()
+        if (text) {
+          host.input(text)
+        }
+      } else if (item.types.includes('text/html') && isHTML) {
+        const htmlTextBlob = await item.getType('text/html')
+        const htmlText = await htmlTextBlob.text()
+        if (htmlText) {
+          pasteHTML(host, htmlText)
+        }
+      } else if (item.types.some(type => type.startsWith('image/'))) {
+        const type = item.types.find(type => type.startsWith('image/'))!
+        const imageBlob = await item.getType(type)
+        pasteImage(host, imageBlob)
+      }
+    }
+  }
+}