feat: make clipboard operations async for consistency #1276

Convert all clipboard-related operations to async/await pattern to ensure proper handling of asynchronous clipboard API calls. This includes copy, cut, and write operations across the codebase.

Author: u1in

src/editor/core/command/CommandAdapt.ts

@@ -162,14 +162,14 @@ export class CommandAdapt {
     this.draw.setMode(payload)
   }
 
-  public cut() {
+  public async cut() {
     const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
-    this.canvasEvent.cut()
+    await this.canvasEvent.cut()
   }
 
-  public copy(payload?: ICopyOption) {
-    this.canvasEvent.copy(payload)
+  public async copy(payload?: ICopyOption) {
+    await this.canvasEvent.copy(payload)
   }
 
   public paste(payload?: IPasteOption) {

src/editor/core/event/CanvasEvent.ts

@@ -176,12 +176,12 @@ export class CanvasEvent {
     input(data, this)
   }
 
-  public cut() {
-    cut(this)
+  public async cut() {
+    await cut(this)
   }
 
-  public copy(options?: ICopyOption) {
-    copy(this, options)
+  public async copy(options?: ICopyOption) {
+    await copy(this, options)
   }
 
   public compositionstart() {

src/editor/core/event/handlers/copy.ts

@@ -7,7 +7,7 @@ import { getTextFromElementList, zipElementList } from '../../../utils/element'
 import { IOverrideResult } from '../../override/Override'
 import { CanvasEvent } from '../CanvasEvent'
 
-export function copy(host: CanvasEvent, options?: ICopyOption) {
+export async function copy(host: CanvasEvent, options?: ICopyOption) {
   const draw = host.getDraw()
   // 自定义粘贴事件
   const { copy } = draw.getOverride()
@@ -68,5 +68,5 @@ export function copy(host: CanvasEvent, options?: ICopyOption) {
     ]
   }
   if (!copyElementList?.length) return
-  writeElementList(copyElementList, draw.getOptions())
+  await writeElementList(copyElementList, draw.getOptions())
 }

src/editor/core/event/handlers/cut.ts

@@ -1,7 +1,7 @@
 import { writeElementList } from '../../../utils/clipboard'
 import { CanvasEvent } from '../CanvasEvent'
 
-export function cut(host: CanvasEvent) {
+export async function cut(host: CanvasEvent) {
   const draw = host.getDraw()
   const rangeManager = draw.getRange()
   const { startIndex, endIndex } = rangeManager.getRange()
@@ -32,7 +32,7 @@ export function cut(host: CanvasEvent) {
   }
   const options = draw.getOptions()
   // 写入粘贴板
-  writeElementList(elementList.slice(start + 1, end + 1), options)
+  await writeElementList(elementList.slice(start + 1, end + 1), options)
   const control = draw.getControl()
   let curIndex: number
   if (control.getActiveControl() && control.getIsRangeWithinControl()) {

src/editor/utils/clipboard.ts

@@ -28,7 +28,7 @@ export function removeClipboardData() {
   localStorage.removeItem(EDITOR_CLIPBOARD)
 }
 
-export function writeClipboardItem(
+export async function writeClipboardItem(
   text: string,
   html: string,
   elementList: IElement[]
@@ -42,7 +42,7 @@ export function writeClipboardItem(
       [plainText.type]: plainText,
       [htmlText.type]: htmlText
     })
-    window.navigator.clipboard.write([item])
+    await window.navigator.clipboard.write([item])
   } else {
     const fakeElement = document.createElement('div')
     fakeElement.setAttribute('contenteditable', 'true')
@@ -66,7 +66,7 @@ export function writeClipboardItem(
   setClipboardData({ text, elementList })
 }
 
-export function writeElementList(
+export async function writeElementList(
   elementList: IElement[],
   options: DeepRequired<IEditorOption>
 ) {
@@ -78,7 +78,7 @@ export function writeElementList(
   clipboardDom.remove()
   const html = clipboardDom.innerHTML
   if (!text && !html && !elementList.length) return
-  writeClipboardItem(text, html, zipElementList(elementList))
+  await writeClipboardItem(text, html, zipElementList(elementList))
 }
 
 export function getIsClipboardContainFile(clipboardData: DataTransfer) {

src/plugins/copy/index.ts

@@ -11,7 +11,7 @@ export function copyWithCopyrightPlugin(
 ) {
   const copy = editor.command.executeCopy
 
-  editor.command.executeCopy = () => {
+  editor.command.executeCopy = async () => {
     const { copyrightText } = options || {}
     if (copyrightText) {
       const rangeText = editor.command.getRangeText()
@@ -22,9 +22,9 @@ export function copyWithCopyrightPlugin(
       const item = new ClipboardItem({
         [plainText.type]: plainText
       })
-      window.navigator.clipboard.write([item])
+      await window.navigator.clipboard.write([item])
     } else {
-      copy()
+      await copy()
     }
   }
 }