copy values (#1321)

* copy values

* remove claude permissions

Signed-off-by: Nicolas Earnshaw <earnshaw.nico@gmail.com>

---------

Signed-off-by: Nicolas Earnshaw <earnshaw.nico@gmail.com>

Author: nearnshaw

packages/inspector/src/components/Container/Container.tsx

@@ -2,10 +2,12 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
 import { FiAlertTriangle as WarningIcon } from 'react-icons/fi';
 import { VscTrash as RemoveIcon } from 'react-icons/vsc';
+import { MdContentCopy as CopyIcon, MdContentPaste as PasteIcon } from 'react-icons/md';
 import cx from 'classnames';
 import { Button } from '../Button';
 import { InfoTooltip } from '../ui/InfoTooltip';
 import MoreOptionsMenu from '../EntityInspector/MoreOptionsMenu';
+import { useComponentClipboard } from '../../hooks/sdk/useComponentClipboard';
 
 /**
  * ContainerContent is a wrapper component that allows returning both main content
@@ -79,27 +81,54 @@ const Container: React.FC<React.PropsWithChildren<Props>> = props => {
 
   const finalRightContent = rightContentFromChildren || props.rightContent;
 
+  const {
+    onCopyValues,
+    onPasteValues,
+    enabled: clipboardEnabled,
+  } = useComponentClipboard(props.entity, props.component);
+
+  const hasMenu = !!props.onRemoveContainer || clipboardEnabled;
+
   const shouldRenderRightContent = useMemo(() => {
-    return finalRightContent || props.onRemoveContainer;
-  }, [finalRightContent, props.onRemoveContainer]);
+    return finalRightContent || hasMenu;
+  }, [finalRightContent, hasMenu]);
 
   const renderRightContent = useCallback(() => {
     return (
       <div className="RightContent">
         {finalRightContent}
-        {props.onRemoveContainer && (
+        {hasMenu && (
           <MoreOptionsMenu>
-            <Button
-              className="RemoveButton"
-              onClick={props.onRemoveContainer}
-            >
-              <RemoveIcon /> Delete Component
-            </Button>
+            {clipboardEnabled ? (
+              <Button onClick={onCopyValues}>
+                <CopyIcon /> Copy values
+              </Button>
+            ) : null}
+            {clipboardEnabled ? (
+              <Button onClick={onPasteValues}>
+                <PasteIcon /> Paste values
+              </Button>
+            ) : null}
+            {props.onRemoveContainer ? (
+              <Button
+                className="RemoveButton"
+                onClick={props.onRemoveContainer}
+              >
+                <RemoveIcon /> Delete Component
+              </Button>
+            ) : null}
           </MoreOptionsMenu>
         )}
       </div>
     );
-  }, [finalRightContent, props.onRemoveContainer]);
+  }, [
+    finalRightContent,
+    hasMenu,
+    clipboardEnabled,
+    onCopyValues,
+    onPasteValues,
+    props.onRemoveContainer,
+  ]);
 
   return (
     <div

packages/inspector/src/components/Container/types.ts

@@ -1,3 +1,6 @@
+import type { Entity } from '@dcl/ecs';
+import type { Component } from '../../lib/sdk/components';
+
 export type Props = {
   label?: string;
   className?: string;
@@ -8,4 +11,6 @@ export type Props = {
   gap?: boolean;
   variant?: 'minimal';
   onRemoveContainer?: () => void;
+  component?: Component<any>;
+  entity?: Entity | Entity[];
 };

packages/inspector/src/components/EntityInspector/ActionInspector/ActionInspector.tsx

@@ -1314,6 +1314,8 @@ export default withSdk<Props>(({ sdk, entity: entityId, initialOpen = true }) =>
           type="help"
         />
       }
+      component={Actions}
+      entity={entityId}
       onRemoveContainer={handleRemove}
     >
       {actions.map((action: Action, idx: number) => {

packages/inspector/src/components/EntityInspector/AnimatorInspector/AnimatorInspector.tsx

@@ -121,6 +121,8 @@ export default withSdk<Props>(({ sdk, entity: entityId, initialOpen = true }) =>
           type="help"
         />
       }
+      component={Animator}
+      entity={entityId}
       onRemoveContainer={handleRemove}
     >
       {states.map(($, idx) => (

packages/inspector/src/components/EntityInspector/AudioSourceInspector/AudioSourceInspector.tsx

@@ -72,6 +72,8 @@ export default withSdk<Props>(({ sdk, entities, initialOpen = true }) => {
           type="help"
         />
       }
+      component={AudioSource}
+      entity={entities}
       onRemoveContainer={handleRemove}
     >
       <Block>

packages/inspector/src/components/EntityInspector/AudioStreamInspector/AudioStreamInspector.tsx

@@ -59,6 +59,8 @@ export default withSdk<Props>(({ sdk, entities, initialOpen = true }) => {
           type="help"
         />
       }
+      component={AudioStream}
+      entity={entities}
       onRemoveContainer={handleRemove}
     >
       <Block label="Url">

packages/inspector/src/components/EntityInspector/AvatarAttachInspector/AvatarAttachInspector.tsx

@@ -86,6 +86,8 @@ export default withSdk<Props>(({ sdk, entities, initialOpen = true }) => {
           type="help"
         />
       }
+      component={AvatarAttach}
+      entity={entities}
       onRemoveContainer={handleRemove}
     >
       <Block>

packages/inspector/src/components/EntityInspector/BillboardInspector/BillboardInspector.tsx

@@ -65,6 +65,8 @@ export default withSdk<Props>(({ sdk, entities, initialOpen = true }) => {
           type="help"
         />
       }
+      component={Billboard}
+      entity={entities}
       onRemoveContainer={handleRemove}
     >
       <Block>

packages/inspector/src/components/EntityInspector/CounterBarInspector/CounterBarInspector.tsx

@@ -42,6 +42,8 @@ export default withSdk<Props>(({ sdk, entity, initialOpen = true }) => {
         />
       }
       initialOpen={initialOpen}
+      component={CounterBar}
+      entity={entity}
       onRemoveContainer={handleRemove}
     >
       <TextField

packages/inspector/src/components/EntityInspector/CounterInspector/CounterInspector.tsx

@@ -51,6 +51,8 @@ export default withSdk<Props>(({ sdk, entity, initialOpen = true }) => {
           type="help"
         />
       }
+      component={Counter}
+      entity={entity}
       onRemoveContainer={handleRemove}
     >
       <TextField