[Feat]: #1755 add ability to copy the Hook components

Author: iamfaran

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

@@ -0,0 +1,102 @@
+import { HookComp } from "comps/hooks/hookComp";
+import { EditorState } from "comps/editorState";
+import { wrapActionExtraInfo, type Comp } from "lowcoder-core";
+import { messageInstance } from "lowcoder-design";
+import { trans } from "i18n";
+
+type CopyableHookType = "modal" | "drawer";
+
+type CopyableHookComp = HookComp & {
+  children: HookComp["children"] & {
+    compType: { getView: () => CopyableHookType };
+  };
+};
+
+const copyableHookTypes = new Set<CopyableHookType>(["modal", "drawer"]);
+
+export class HookCompOperator {
+  private static copyHooks: CopyableHookComp[] = [];
+
+  /**
+   * Copy modals/drawers by name from selectedCompNames.
+   */
+  static copyComp(editorState: EditorState, compRecords: Record<string, Comp>) {
+    const selectedNames = Array.from(editorState.selectedCompNames);
+    if (!selectedNames.length) {
+      return false;
+    }
+
+    const hookMap = editorState.getHooksComp().getAllCompItems();
+    const selectedHookComps = Object.values(hookMap)
+      .filter((comp: any) => {
+        const name = comp.children.name.getView();
+        const compType = comp.children.compType.getView();
+        return selectedNames.includes(name) && copyableHookTypes.has(compType);
+      }) as CopyableHookComp[];
+
+    if (!selectedHookComps.length) {
+      return false;
+    }
+
+    this.copyHooks = selectedHookComps;
+    messageInstance.success(trans("notification.copySuccess"));
+    return true;
+  }
+
+  static clearCopy() {
+    this.copyHooks = [];
+  }
+
+  /**
+   * Paste previously copied modals/drawers and re-generate nested component names.
+   */
+  static pasteComp(editorState: EditorState) {
+    if (!this.copyHooks.length) {
+      messageInstance.info(trans("gridCompOperator.selectCompFirst"));
+      return false;
+    }
+
+    const hooksComp = editorState.getHooksComp();
+    const nameGenerator = editorState.getNameGenerator();
+    const newNames = new Set<string>();
+
+    this.copyHooks.forEach((hookComp) => {
+      const compType = hookComp.children.compType.getView();
+      const newName = nameGenerator.genItemName(compType);
+      const childComp: any = hookComp.children.comp;
+      const baseValue = childComp?.toJsonValue ? childComp.toJsonValue() : {};
+      const pasteValue =
+        childComp?.getPasteValue?.(nameGenerator) ?? {};
+
+      const payload = {
+        ...(hookComp.toJsonValue() as any),
+        name: newName,
+        comp: {
+          ...baseValue,
+          ...pasteValue,
+        },
+      };
+
+      hooksComp.dispatch(
+        wrapActionExtraInfo(
+          hooksComp.pushAction(payload),
+          {
+            compInfos: [
+              {
+                type: "add",
+                compName: newName,
+                compType,
+              },
+            ],
+          }
+        )
+      );
+      newNames.add(newName);
+    });
+
+    editorState.setSelectedCompNames(newNames, "leftPanel");
+    messageInstance.success(trans("notification.copySuccess"));
+    return true;
+  }
+}
+

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useRef, useEffect } from "react";
 import { EditorContext, EditorState } from "comps/editorState";
 import { GridCompOperator } from "comps/utils/gridCompOperator";
+import { HookCompOperator } from "comps/utils/hookCompOperator";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { EditorHistory } from "util/editoryHistory";
 import { executeQueryAction } from "lowcoder-core";
@@ -75,6 +76,31 @@ function handleGlobalKeyDown(
       break;
     }
     default:
+      // Capture component copy/paste/cut/deselect globally
+      if (modKeyPressed(e)) {
+        const key = e.key?.toLowerCase();
+        if (key === "c") {
+          if (!HookCompOperator.copyComp(editorState, editorState.selectedComps())) {
+            HookCompOperator.clearCopy();
+            GridCompOperator.copyComp(editorState, editorState.selectedComps());
+          }
+          break;
+        }
+        if (key === "v") {
+          if (!HookCompOperator.pasteComp(editorState)) {
+            GridCompOperator.pasteComp(editorState);
+          }
+          break;
+        }
+        if (key === "x") {
+          GridCompOperator.cutComp(editorState, editorState.selectedComps());
+          break;
+        }
+      }
+      if (e.key === "Escape") {
+        editorState.setSelectedCompNames(new Set());
+        break;
+      }
       return;
   }
   // avoid conflicts with the browser
@@ -194,9 +220,16 @@ function handleEditorKeyDown(e: React.KeyboardEvent, editorState: EditorState) {
       e.stopPropagation();
       return;
     case "copyComps":
+      if (HookCompOperator.copyComp(editorState, editorState.selectedComps())) {
+        return;
+      }
+      HookCompOperator.clearCopy();
       GridCompOperator.copyComp(editorState, editorState.selectedComps());
       return;
     case "pasteComps":
+      if (HookCompOperator.pasteComp(editorState)) {
+        return;
+      }
       GridCompOperator.pasteComp(editorState);
       return;
     case "cutComps":