feat: add beforeCopy callback to Copied component #78

- Add beforeCopy prop to JsonViewProps with rich context parameters (copyText, keyName, value, parentValue, expandKey, keys)
- Implement beforeCopy support in Copied component only (not affecting other section components)
- Support three-level priority: component prop > section prop > global prop
- Add CopiedSectionElement type for section-level beforeCopy customization
- Include comprehensive example showing different usage patterns
- Allow users to transform copied text based on context information

Breaking changes: None
New features:
  - JsonView beforeCopy prop for global copy transformation
  - JsonView.Copied beforeCopy prop for component-level customization
  - Rich context parameters for advanced copy transformations

Author: jaywcjlove

core/src/comps/Copied.tsx

@@ -13,15 +13,24 @@ export type CopiedOption<T extends object> = {
 
 export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement>, SectionElementResult<T> {
   expandKey: string;
+  beforeCopy?: (
+    copyText: string,
+    keyName?: string | number,
+    value?: T,
+    parentValue?: T,
+    expandKey?: string,
+    keys?: (number | string)[],
+  ) => string;
 }
 
 export const Copied = <T extends object, K extends TagType>(props: CopiedProps<T>) => {
-  const { keyName, value, parentValue, expandKey, keys, ...other } = props;
-  const { onCopied, enableClipboard } = useStore();
+  const { keyName, value, parentValue, expandKey, keys, beforeCopy, ...other } = props;
+  const { onCopied, enableClipboard, beforeCopy: globalBeforeCopy } = useStore();
   const showTools = useShowToolsStore();
   const isShowTools = showTools[expandKey];
   const [copied, setCopied] = useState(false);
   const { Copied: Comp = {} } = useSectionStore();
+  const sectionBeforeCopy = Comp?.beforeCopy;
 
   if (enableClipboard === false || !isShowTools) return null;
 
@@ -39,6 +48,14 @@ export const Copied = <T extends object, K extends TagType>(props: CopiedProps<T
     } else {
       copyText = JSON.stringify(value, (_, v) => (typeof v === 'bigint' ? bigIntToString(v) : v), 2);
     }
+
+    // Apply beforeCopy transformation if provided
+    // Priority: component prop > section prop > global prop
+    const finalBeforeCopy = beforeCopy || sectionBeforeCopy || globalBeforeCopy;
+    if (finalBeforeCopy && typeof finalBeforeCopy === 'function') {
+      copyText = finalBeforeCopy(copyText, keyName, value, parentValue, expandKey, keys);
+    }
+
     onCopied && onCopied(copyText, value);
     setCopied(true);
 

core/src/index.tsx

@@ -75,6 +75,15 @@ export interface JsonViewProps<T extends object>
   onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
   /** Fires event when you copy */
   onCopied?: (text: string, value?: T) => void;
+  /** Transform the text before copying to clipboard */
+  beforeCopy?: (
+    copyText: string,
+    keyName?: string | number,
+    value?: T,
+    parentValue?: T,
+    expandKey?: string,
+    keys?: (number | string)[],
+  ) => string;
 }
 
 type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
@@ -128,6 +137,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
     objectSortKeys = false,
     onExpand,
     onCopied,
+    beforeCopy,
     ...elmProps
   } = props;
   const defaultStyle: CSS.Properties<string | number> = {
@@ -154,6 +164,7 @@ const JsonView: JsonViewComponent = forwardRef<HTMLDivElement, JsonViewProps<obj
         highlightUpdates,
         onCopied,
         onExpand,
+        beforeCopy,
       }}
       initialTypes={{ displayDataTypes }}
     >

core/src/section/Copied.tsx

@@ -2,7 +2,18 @@ import { type TagType } from '../store/Types';
 import { type SectionElement, useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
 
-export const Copied = <K extends TagType = 'svg'>(props: SectionElement<K>) => {
+export type CopiedSectionElement<T extends TagType = 'svg'> = SectionElement<T> & {
+  beforeCopy?: (
+    copyText: string,
+    keyName?: string | number,
+    value?: object,
+    parentValue?: object,
+    expandKey?: string,
+    keys?: (number | string)[],
+  ) => string;
+};
+
+export const Copied = <K extends TagType = 'svg'>(props: CopiedSectionElement<K>) => {
   const { Copied: Comp = {} } = useSectionStore();
   useSectionRender(Comp, props, 'Copied');
   return null;

core/src/store.tsx

@@ -12,6 +12,7 @@ export interface InitialState<T extends object> {
   value?: object;
   onExpand?: JsonViewProps<object>['onExpand'];
   onCopied?: JsonViewProps<object>['onCopied'];
+  beforeCopy?: JsonViewProps<T>['beforeCopy'];
   objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
   displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
   shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];

example/src/BeforeCopyExample.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+const example = {
+  string: 'Hello World',
+  number: 42,
+  boolean: true,
+  nested: {
+    array: [1, 2, 3],
+    quote: 'This has "quotes" inside',
+  },
+};
+
+export default function BeforeCopyExample() {
+  const handleBeforeCopy = (
+    text: string,
+    keyName?: string | number,
+    value?: any,
+    parentValue?: any,
+    expandKey?: string,
+    keys?: (number | string)[],
+  ) => {
+    console.log('Global beforeCopy context:', { keyName, value, parentValue, expandKey, keys });
+
+    // Example: Add key name as comment when copying objects
+    if (keyName && typeof value === 'object' && value !== null) {
+      return `// Key: ${keyName}\n${text}`;
+    }
+
+    // Remove all quotes from the copied text
+    return text.replace(/"/g, '');
+  };
+
+  const handleCopied = (text: string, value?: any) => {
+    console.log('Copied text:', text);
+    console.log('Original value:', value);
+  };
+
+  return (
+    <div>
+      <h2>beforeCopy Example</h2>
+      <p>This example shows three ways to use beforeCopy with additional context parameters.</p>
+
+      <h3>1. Global beforeCopy (removes quotes and adds comments for objects)</h3>
+      <JsonView value={example} beforeCopy={handleBeforeCopy} onCopied={handleCopied} displayObjectSize={false} />
+
+      <h3>2. Section-level beforeCopy (converts to uppercase)</h3>
+      <JsonView value={example} onCopied={handleCopied} displayObjectSize={false}>
+        <JsonView.Copied
+          beforeCopy={(text, keyName, value) => {
+            console.log('Section-level beforeCopy:', { text, keyName, value });
+            return text.toUpperCase();
+          }}
+        />
+      </JsonView>
+    </div>
+  );
+}

example/src/demo.tsx

@@ -32,7 +32,6 @@ const example = {
 
 const shouldExpandNodeInitially: ShouldExpandNodeInitially<object> = (isExpanded, props) => {
   const { value, level, keyName, parentValue, keys } = props;
-  console.log('~~~~:', keyName, level, parentValue, keys);
   const isArray = Array.isArray(value);
   const isObject = typeof value === 'object' && !isArray;
   if (isArray) {