add copy component from one app to another

iamfaran · iamfaran · commit 117c03fa9279 · 2026-04-09T19:22:28.000+05:00
diff --git a/client/packages/lowcoder/src/comps/utils/gridCompOperator.ts b/client/packages/lowcoder/src/comps/utils/gridCompOperator.ts
@@ -3,9 +3,11 @@ import { SimpleContainerComp } from "comps/comps/containerBase/simpleContainerCo
 import { GridItemComp } from "comps/comps/gridItemComp";
 import { remoteComp } from "comps/comps/remoteComp/remoteComp";
 import { EditorState } from "comps/editorState";
+import { NameGenerator } from "comps/utils";
 import { trans } from "i18n";
 import {
   calcPasteBaseXY,
+  DEFAULT_POSITION_PARAMS,
   Layout,
   LayoutItem,
   moveToZero,
@@ -29,15 +31,73 @@ import { genRandomKey } from "./idGenerator";
 import { getLatestVersion, getRemoteCompType, parseCompType } from "./remote";
 import { APPLICATION_VIEW_URL } from "@lowcoder-ee/constants/routesURL";
 
-export type CopyCompType = {
+const CLIPBOARD_TYPE = "lowcoder-components";
+const CLIPBOARD_VERSION = 1;
+
+export interface ClipboardGridItem {
+  compType: string;
+  comp: any;
+  name: string;
   layout: LayoutItem;
-  item: Comp;
-};
+  isContainer: boolean;
+}
 
-export class GridCompOperator {
-  private static copyComps: CopyCompType[] = [];
-  private static sourcePositionParams: PositionParams;
+export interface LowcoderClipboardPayload {
+  type: typeof CLIPBOARD_TYPE;
+  version: number;
+  timestamp: number;
+  gridItems: ClipboardGridItem[];
+  hookItems: ClipboardHookItem[];
+  sourcePositionParams: PositionParams;
+}
+
+export interface ClipboardHookItem {
+  compType: string;
+  comp: any;
+  name: string;
+  fullValue: any;
+}
+
+async function writeToClipboard(payload: LowcoderClipboardPayload): Promise<boolean> {
+  try {
+    const json = JSON.stringify(payload);
+    await navigator.clipboard.writeText(json);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function readFromClipboard(): Promise<LowcoderClipboardPayload | null> {
+  try {
+    const text = await navigator.clipboard.readText();
+    if (!text) return null;
+    const parsed = JSON.parse(text);
+    if (parsed?.type !== CLIPBOARD_TYPE || !parsed?.version) return null;
+    return parsed as LowcoderClipboardPayload;
+  } catch {
+    return null;
+  }
+}
+
+function buildEmptyPayload(): LowcoderClipboardPayload {
+  return {
+    type: CLIPBOARD_TYPE,
+    version: CLIPBOARD_VERSION,
+    timestamp: Date.now(),
+    gridItems: [],
+    hookItems: [],
+    sourcePositionParams: DEFAULT_POSITION_PARAMS,
+  };
+}
 
+export function writeHookOnlyToClipboard(hookItems: ClipboardHookItem[]) {
+  const payload = buildEmptyPayload();
+  payload.hookItems = hookItems;
+  writeToClipboard(payload);
+}
+
+export class GridCompOperator {
   static copyComp(editorState: EditorState, compRecords: Record<string, Comp>) {
     const oldUi = editorState.getUIComp().getComp();
     if (!oldUi) {
@@ -65,24 +125,54 @@ export class GridCompOperator {
       layout: layout[key],
     }));
 
-    const toCopyComps = Object.values(compMap).filter((item) => !!item.item && !!item.layout);
-    if (!toCopyComps || _.size(toCopyComps) <= 0) {
+    const validComps = Object.values(compMap).filter((item) => !!item.item && !!item.layout);
+    if (!validComps || _.size(validComps) <= 0) {
       messageInstance.info(trans("gridCompOperator.selectAtLeastOneComponent"));
       return false;
     }
-    this.copyComps = toCopyComps;
-    this.sourcePositionParams = simpleContainer.children.positionParams.getView();
 
-    // log.debug( "copyComp. toCopyComps: ", this.copyComps, " sourcePositionParams: ", this.sourcePositionParams);
+    const sourcePositionParams = simpleContainer.children.positionParams.getView();
+    const nameGenerator = editorState.getNameGenerator();
+
+    const gridItems: ClipboardGridItem[] = validComps.map((comp) => {
+      const itemComp = comp.item as GridItemComp;
+      const compType = itemComp.children.compType.getView();
+      const name = itemComp.children.name.getView();
+      const innerComp = itemComp.children.comp;
+      const isContainerComp = isContainer(innerComp);
+      const compJSON = isContainerComp
+        ? {
+            ...innerComp.toJsonValue(),
+            ...innerComp.getPasteValue(nameGenerator) as Record<string, any>,
+          }
+        : innerComp.toJsonValue();
+      return { compType, comp: compJSON, name, layout: comp.layout, isContainer: isContainerComp };
+    });
+
+    const payload = buildEmptyPayload();
+    payload.sourcePositionParams = sourcePositionParams;
+    payload.gridItems = gridItems;
+    writeToClipboard(payload);
+
     return true;
   }
 
-  // FALK TODO: How can we enable Copy and Paste of components across Browser Tabs / Windows?
-  static pasteComp(editorState: EditorState) {
-    if (!this.copyComps || _.size(this.copyComps) <= 0 || !this.sourcePositionParams) {
-      messageInstance.info(trans("gridCompOperator.selectCompFirst"));
+  static pasteFromPayload(editorState: EditorState, payload: LowcoderClipboardPayload): boolean {
+    if (payload.gridItems.length === 0) {
       return false;
     }
+    return this.doPaste(
+      editorState,
+      payload.gridItems,
+      payload.sourcePositionParams || DEFAULT_POSITION_PARAMS,
+    );
+  }
+
+  private static doPaste(
+    editorState: EditorState,
+    items: ClipboardGridItem[],
+    sourcePositionParams: PositionParams,
+  ): boolean {
     const oldUi = editorState.getUIComp().getComp();
     if (!oldUi) {
       messageInstance.info(trans("gridCompOperator.notSupport"));
@@ -93,18 +183,8 @@ export class GridCompOperator {
       messageInstance.warning(trans("gridCompOperator.noContainerSelected"));
       return false;
     }
+
     const selectedComps = editorState.selectedComps();
-    const isSelectingContainer =
-      _.size(selectedComps) === 1 &&
-      (Object.values(selectedComps)[0] as GridItemComp)?.children?.comp === selectedContainer;
-    if (_.size(this.copyComps) === 1) {
-      const { item } = this.copyComps[0];
-      // Special case: To paste a container, and the container is currently selected, paste it outside the selected container
-      if (isContainer((item as GridItemComp).children.comp) && isSelectingContainer) {
-        selectedContainer =
-          editorState.findContainer(Object.keys(selectedComps)[0]) ?? selectedContainer;
-      }
-    }
 
     const selectedSimpleContainer =
       selectedContainer.realSimpleContainer(Object.keys(selectedComps)[0]) ??
@@ -115,43 +195,39 @@ export class GridCompOperator {
     const multiAddActions: Array<CustomAction<any>> = [];
     const copyLayouts: Layout = {};
     const copyCompNames = new Set<string>();
-    // log.debug("pasteComps. sourceContainer: ", this.sourceContainer, " targetContainer: ", selectedContainer);
-    this.copyComps.forEach((comp) => {
+
+    items.forEach((item) => {
       const key = genRandomKey();
       const { w, h } = switchLayoutWH(
-        comp.layout.w,
-        comp.layout.h,
-        this.sourcePositionParams,
+        item.layout.w,
+        item.layout.h,
+        sourcePositionParams,
         selectedSimpleContainer.children.positionParams.getView()
       );
       copyLayouts[key] = {
-        ...comp.layout,
+        ...item.layout,
         i: key,
-        x: comp.layout.x + baseX,
-        y: comp.layout.y + baseY,
+        x: item.layout.x + baseX,
+        y: item.layout.y + baseY,
         w,
         h,
         isDragging: true,
       };
-      const itemComp = comp.item as GridItemComp;
-      const compType = itemComp.children.compType.getView();
-      const compInfo = parseCompType(compType);
+      const compInfo = parseCompType(item.compType);
       const compName = nameGenerator.genItemName(compInfo.compName);
-      const compJSONValue = isContainer(itemComp.children.comp)
-        ? {
-            ...itemComp.children.comp.toJsonValue(),
-            ...itemComp.children.comp.getPasteValue(nameGenerator) as Record<string, any>,
-          }
-        : itemComp.children.comp.toJsonValue();
+      const compJSONValue = item.isContainer
+        ? remapContainerPasteValue(item.comp, nameGenerator)
+        : item.comp;
       copyCompNames.add(compName);
       multiAddActions.push(
         (oldUi.realSimpleContainer() as SimpleContainerComp).children.items.addAction(key, {
-          compType: compType,
+          compType: item.compType,
           comp: compJSONValue,
           name: compName,
         })
       );
     });
+
     selectedSimpleContainer.dispatch(
       multiChangeAction({
         layout: selectedSimpleContainer.children.layout.changeValueAction({
@@ -281,3 +357,46 @@ export class GridCompOperator {
     messageInstance.success(trans("comp.upgradeSuccess"));
   }
 }
+
+/**
+ * Remap keys and names inside a serialized container JSON.
+ * Mirrors what SimpleContainerComp.getPasteValue() does, but operates on
+ * plain JSON so it works for cross-app clipboard payloads where we don't
+ * have live comp instances.
+ */
+function remapContainerPasteValue(compJson: any, nameGenerator: NameGenerator): any {
+  if (!compJson || typeof compJson !== "object") return compJson;
+
+  const items = compJson.items;
+  const layout = compJson.layout;
+  if (!items || typeof items !== "object") return compJson;
+
+  const keyMap: Record<string, string> = {};
+  Object.keys(items).forEach((oldKey) => {
+    keyMap[oldKey] = genRandomKey();
+  });
+
+  const newItems: Record<string, any> = {};
+  Object.entries(items).forEach(([oldKey, itemValue]: [string, any]) => {
+    const newKey = keyMap[oldKey];
+    const compType = itemValue?.compType;
+    const newName = compType ? nameGenerator.genItemName(compType) : genRandomKey();
+    const innerComp = itemValue?.comp;
+    const remappedComp = innerComp?.items
+      ? remapContainerPasteValue(innerComp, nameGenerator)
+      : innerComp;
+    newItems[newKey] = { ...itemValue, name: newName, comp: remappedComp };
+  });
+
+  let newLayout = layout;
+  if (layout && typeof layout === "object") {
+    const remapped: Record<string, any> = {};
+    Object.entries(layout).forEach(([oldKey, layoutItem]: [string, any]) => {
+      const newKey = keyMap[oldKey] || oldKey;
+      remapped[newKey] = { ...layoutItem, i: newKey };
+    });
+    newLayout = remapped;
+  }
+
+  return { ...compJson, items: newItems, layout: newLayout };
+}
diff --git a/client/packages/lowcoder/src/comps/utils/hookCompOperator.ts b/client/packages/lowcoder/src/comps/utils/hookCompOperator.ts
@@ -1,14 +1,17 @@
 import { HookComp } from "comps/hooks/hookComp";
 import { EditorState } from "comps/editorState";
 import { singletonHookComp } from "comps/hooks/hookCompTypes";
-import { wrapActionExtraInfo, type Comp } from "lowcoder-core";
+import { wrapActionExtraInfo } from "lowcoder-core";
 import { messageInstance } from "lowcoder-design";
 import { trans } from "i18n";
+import {
+  writeHookOnlyToClipboard,
+  type ClipboardHookItem,
+  type LowcoderClipboardPayload,
+} from "./gridCompOperator";
 
 export class HookCompOperator {
-  private static copyHooks: HookComp[] = [];
-
-  static copyComp(editorState: EditorState, compRecords: Record<string, Comp>) {
+  static copyComp(editorState: EditorState): boolean {
     const selectedNames = Array.from(editorState.selectedCompNames);
     if (!selectedNames.length) {
       return false;
@@ -26,52 +29,50 @@ export class HookCompOperator {
       return false;
     }
 
-    this.copyHooks = selectedHookComps;
+    const hookItems: ClipboardHookItem[] = selectedHookComps.map((hookComp) => {
+      const compType = hookComp.children.compType.getView();
+      const name = hookComp.children.name.getView();
+      const childComp: any = hookComp.children.comp;
+      const baseValue = childComp?.toJsonValue ? childComp.toJsonValue() : {};
+      const pasteValue = childComp?.getPasteValue?.(editorState.getNameGenerator()) ?? {};
+      const comp = { ...baseValue, ...pasteValue };
+      const fullValue = hookComp.toJsonValue();
+      return { compType, comp, name, fullValue };
+    });
+
+    writeHookOnlyToClipboard(hookItems);
     messageInstance.success(trans("copySuccess"));
     return true;
   }
 
-  static clearCopy() {
-    this.copyHooks = [];
-  }
-
- 
-  static pasteComp(editorState: EditorState) {
-    if (!this.copyHooks.length) {
-      messageInstance.info(trans("gridCompOperator.selectCompFirst"));
+  static pasteFromPayload(editorState: EditorState, payload: LowcoderClipboardPayload): boolean {
+    if (payload.hookItems.length === 0) {
       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) ?? {};
+    payload.hookItems.forEach((item) => {
+      const newName = nameGenerator.genItemName(item.compType);
 
-      const payload = {
-        ...(hookComp.toJsonValue() as any),
+      const dispatchPayload = {
+        ...(item.fullValue || {}),
         name: newName,
-        comp: {
-          ...baseValue,
-          ...pasteValue,
-        },
+        compType: item.compType,
+        comp: item.comp,
       };
 
       hooksComp.dispatch(
         wrapActionExtraInfo(
-          hooksComp.pushAction(payload),
+          hooksComp.pushAction(dispatchPayload),
           {
             compInfos: [
               {
                 type: "add",
                 compName: newName,
-                compType,
+                compType: item.compType,
               },
             ],
           }
@@ -85,4 +86,3 @@ export class HookCompOperator {
     return true;
   }
 }
-
diff --git a/client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx b/client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx
