fix: copy/paste logic + add message

Author: iamfaran

client/packages/lowcoder/src/comps/utils/gridCompOperator.ts

@@ -91,14 +91,14 @@ function buildEmptyPayload(): LowcoderClipboardPayload {
   };
 }
 
-export function writeHookOnlyToClipboard(hookItems: ClipboardHookItem[]) {
+export async function writeHookOnlyToClipboard(hookItems: ClipboardHookItem[]): Promise<boolean> {
   const payload = buildEmptyPayload();
   payload.hookItems = hookItems;
-  writeToClipboard(payload);
+  return writeToClipboard(payload);
 }
 
 export class GridCompOperator {
-  static copyComp(editorState: EditorState, compRecords: Record<string, Comp>) {
+  static async copyComp(editorState: EditorState, compRecords: Record<string, Comp>): Promise<boolean> {
     const oldUi = editorState.getUIComp().getComp();
     if (!oldUi) {
       messageInstance.info(trans("gridCompOperator.notSupport"));
@@ -152,9 +152,13 @@ export class GridCompOperator {
     const payload = buildEmptyPayload();
     payload.sourcePositionParams = sourcePositionParams;
     payload.gridItems = gridItems;
-    writeToClipboard(payload);
-
-    return true;
+    const written = await writeToClipboard(payload);
+    if (written) {
+      messageInstance.success(trans("gridCompOperator.copyCompsSuccess", { compNum: gridItems.length }));
+    } else {
+      messageInstance.error(trans("gridCompOperator.clipboardWriteError"));
+    }
+    return written;
   }
 
   static pasteFromPayload(editorState: EditorState, payload: LowcoderClipboardPayload): boolean {
@@ -240,6 +244,7 @@ export class GridCompOperator {
       })
     );
     editorState.setSelectedCompNames(copyCompNames);
+    messageInstance.success(trans("gridCompOperator.pasteCompsSuccess", { compNum: copyCompNames.size }));
     return true;
   }
 
@@ -274,10 +279,11 @@ export class GridCompOperator {
     window.open(APPLICATION_VIEW_URL(applicationId, "edit"))
   }
 
-  static cutComp(editorState: EditorState, compRecords: Record<string, Comp>) {
-    this.copyComp(editorState, compRecords) &&
-      this.doDelete(editorState, compRecords) &&
-        messageInstance.info(trans("gridCompOperator.cutCompsSuccess", { pasteKey, undoKey }));
+  static async cutComp(editorState: EditorState, compRecords: Record<string, Comp>) {
+    const copied = await this.copyComp(editorState, compRecords);
+    if (copied && this.doDelete(editorState, compRecords)) {
+      messageInstance.info(trans("gridCompOperator.cutCompsSuccess", { pasteKey, undoKey }));
+    }
   }
 
   private static doDelete(editorState: EditorState, compRecords: Record<string, Comp>): boolean {

client/packages/lowcoder/src/comps/utils/hookCompOperator.ts

@@ -11,7 +11,7 @@ import {
 } from "./gridCompOperator";
 
 export class HookCompOperator {
-  static copyComp(editorState: EditorState): boolean {
+  static async copyComp(editorState: EditorState): Promise<boolean> {
     const selectedNames = Array.from(editorState.selectedCompNames);
     if (!selectedNames.length) {
       return false;
@@ -40,9 +40,13 @@ export class HookCompOperator {
       return { compType, comp, name, fullValue };
     });
 
-    writeHookOnlyToClipboard(hookItems);
-    messageInstance.success(trans("copySuccess"));
-    return true;
+    const written = await writeHookOnlyToClipboard(hookItems);
+    if (written) {
+      messageInstance.success(trans("gridCompOperator.copyCompsSuccess", { compNum: hookItems.length }));
+    } else {
+      messageInstance.error(trans("gridCompOperator.clipboardWriteError"));
+    }
+    return written;
   }
 
   static pasteFromPayload(editorState: EditorState, payload: LowcoderClipboardPayload): boolean {
@@ -82,7 +86,7 @@ export class HookCompOperator {
     });
 
     editorState.setSelectedCompNames(newNames, "leftPanel");
-    messageInstance.success(trans("copySuccess"));
+    messageInstance.success(trans("gridCompOperator.pasteCompsSuccess", { compNum: newNames.size }));
     return true;
   }
 }

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -91,8 +91,12 @@ export const en = {
   "gridCompOperator": {
     "notSupport": "Not Supported",
     "selectAtLeastOneComponent": "Please select at least one component",
-    "selectCompFirst": "Select components before copying",
+    "selectCompFirst": "Please copy a component first",
     "noContainerSelected": "[Bug] No container selected",
+    "copyCompsSuccess": "Copied {compNum} {compNum, plural, one {component} other {components}} to clipboard",
+    "pasteCompsSuccess": "Pasted {compNum} {compNum, plural, one {component} other {components}}",
+    "clipboardReadError": "Unable to read clipboard. Please allow clipboard access and try again",
+    "clipboardWriteError": "Unable to write to clipboard. Please allow clipboard access and try again",
     "deleteCompsSuccess": "Deleted successfully. Press {undoKey} to undo.",
     "deleteCompsTitle": "Delete Components",
     "deleteCompsBody": "Are you sure you want to delete {compNum} selected components?",

client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useContext, useRef, useEffect } from "react";
 import { EditorContext, EditorState } from "comps/editorState";
 import { GridCompOperator, readFromClipboard } from "comps/utils/gridCompOperator";
 import { HookCompOperator } from "comps/utils/hookCompOperator";
+import { messageInstance } from "lowcoder-design";
+import { trans } from "i18n";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { EditorHistory } from "util/editoryHistory";
 import { executeQueryAction } from "lowcoder-core";
@@ -18,16 +20,17 @@ import { preview } from "constants/routesURL";
 import { useApplicationId } from "util/hooks";
 import { useUnmount } from "react-use";
 
-function handleCopyComps(editorState: EditorState) {
-  const isHook = HookCompOperator.copyComp(editorState);
+async function handleCopyComps(editorState: EditorState) {
+  const isHook = await HookCompOperator.copyComp(editorState);
   if (!isHook) {
-    GridCompOperator.copyComp(editorState, editorState.selectedComps());
+    await GridCompOperator.copyComp(editorState, editorState.selectedComps());
   }
 }
 
 async function handlePasteComps(editorState: EditorState) {
   const payload = await readFromClipboard();
   if (!payload) {
+    messageInstance.info(trans("gridCompOperator.selectCompFirst"));
     return;
   }