feat: copy

example/index.tsx

@@ -56,6 +56,7 @@ const App = () => {
                 { value: 'shanghai', label: 'Shanghai' },
               ],
             }}
+            copy
           />
         </div>
         <div

package.json

@@ -39,11 +39,11 @@
   "size-limit": [
     {
       "path": "dist/react-json-editor-ui.cjs.production.min.js",
-      "limit": "10 KB"
+      "limit": "100 KB"
     },
     {
       "path": "dist/react-json-editor-ui.esm.js",
-      "limit": "10 KB"
+      "limit": "100 KB"
     }
   ],
   "devDependencies": {

src/components/JsonView.tsx

@@ -12,6 +12,7 @@ import { ConfigContext } from '../store'
 import ArrayView from './ArrayView'
 import ToolsView from './Tools'
 import CollapsePart from './Collapse'
+import cloneDeep from 'lodash.clonedeep'
 
 export type JsonViewProps = {
   setEditObject: any
@@ -23,10 +24,11 @@ export type JsonViewProps = {
       label?: string
     }>
   >
+  copy?: boolean
 }
 
 function JsonView(props: JsonViewProps) {
-  const { editObject, setEditObject, optionsMap } = props
+  const { editObject, setEditObject, optionsMap, copy } = props
   const [allowMap, setAllowMap] = useState<Record<string, boolean>>({})
 
   const syncData = (data: Record<string, any>) => {
@@ -42,6 +44,20 @@ function JsonView(props: JsonViewProps) {
     syncData(editObject)
   }
 
+  const onClickCopy = (key: string, value: string, sourceData: any) => {
+    if (Array.isArray(sourceData)) {
+      sourceData.splice(+key + 1, 0, typeof value === 'object' ? cloneDeep(value) : value);
+    } else {
+      const keys = Object.keys(sourceData);
+      const filterEqual = keys.filter(i => i.includes(key + '-'));
+      const sp = filterEqual.at(-1)?.split('-');
+      const lastNumber = sp && sp.at(-1);
+      const index = +lastNumber! + 1 || 1;
+      Reflect.set(sourceData, `${key}-${index}`, cloneDeep(Reflect.get(sourceData, key)));
+    }
+    syncData(editObject)
+  }
+
   const onChangeType = (type: DataType, fieldValue: any) => {
     const newEditObject = getQuoteAddress(fieldValue, typeMap[type], editObject)
     syncData(newEditObject)
@@ -237,9 +253,11 @@ function JsonView(props: JsonViewProps) {
         editObject,
         setEditObject,
         optionsMap,
+        copy,
 
         onChangeType,
         onClickDelete,
+        onClickCopy,
         onChangeAllow,
         allowMap,
       }}

src/components/Tools.tsx

@@ -1,4 +1,4 @@
-import { MinusSquareOutlined } from '@ant-design/icons'
+import { MinusSquareOutlined, CopyOutlined } from '@ant-design/icons'
 import { Select } from 'antd'
 import React from 'react'
 import { ConfigContext } from '../store'
@@ -11,7 +11,7 @@ function ToolsView(props: {
 }) {
   return (
     <ConfigContext.Consumer>
-      {({ onChangeType, onClickDelete }) => (
+      {({ onChangeType, onClickDelete, onClickCopy, copy }) => (
         <span className="tools">
           <span>
             <Select
@@ -33,6 +33,14 @@ function ToolsView(props: {
               onClick={() => onClickDelete(props.fieldKey, props.sourceData)}
             />
           </span>
+          {copy && (
+            <span className="iconCopy">
+              <CopyOutlined
+                style={props.fieldKey.includes('-') ? {visibility: 'hidden'} : {color: '#3078f6'}}
+                onClick={() => onClickCopy(props.fieldKey, props.fieldValue, props.sourceData)}
+              />
+            </span>
+          )}
         </span>
       )}
     </ConfigContext.Consumer>

src/index.tsx

@@ -14,6 +14,7 @@ export type JsonEditorProps = {
       label?: string
     }>
   >
+  copy?: boolean
   onChange: (data: any) => void
 }
 
@@ -30,6 +31,7 @@ function JsonEditor(props: JsonEditorProps) {
           editObject,
           setEditObject,
           optionsMap: props.optionsMap,
+          copy: props.copy,
         }}
       />
     </div>

src/styles/index.less

@@ -25,6 +25,10 @@
     .iconSubtraction {
       margin-left: 10px;
     }
+
+    .iconCopy {
+      margin-left: 10px;
+    }
   }
 
   .addItem {