diff --git a/extension/chrome/manifest.json b/extension/chrome/manifest.json index 7369d6c8..a1b33aba 100644 --- a/extension/chrome/manifest.json +++ b/extension/chrome/manifest.json @@ -61,7 +61,9 @@ "storage", "file:///*", "http://*/*", - "https://*/*" + "https://*/*", + "clipboardWrite", + "clipboardRead" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;", "update_url": "https://clients2.google.com/service/update2/crx", diff --git a/extension/edge/manifest.json b/extension/edge/manifest.json index 00fb14e6..097ea2ca 100644 --- a/extension/edge/manifest.json +++ b/extension/edge/manifest.json @@ -61,7 +61,9 @@ "storage", "file:///*", "http://*/*", - "https://*/*" + "https://*/*", + "clipboardWrite", + "clipboardRead" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;" } diff --git a/extension/firefox/manifest.json b/extension/firefox/manifest.json index c19b76e8..7bf83536 100644 --- a/extension/firefox/manifest.json +++ b/extension/firefox/manifest.json @@ -57,7 +57,9 @@ "storage", "file:///*", "http://*/*", - "https://*/*" + "https://*/*", + "clipboardWrite", + "clipboardRead" ], "content_security_policy": "script-src 'self'; object-src 'self'; img-src 'self' data:;" } diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json index 2808dcff..1db31dcf 100644 --- a/packages/redux-devtools-inspector-monitor/package.json +++ b/packages/redux-devtools-inspector-monitor/package.json @@ -47,6 +47,7 @@ "immutable": "^4.3.5", "javascript-stringify": "^2.1.0", "jsondiffpatch": "^0.6.0", + "lodash.clonedeep": "^4.5.0", "lodash.debounce": "^4.0.8", "react-base16-styling": "^0.9.1", "react-json-tree": "^0.18.0", @@ -66,6 +67,7 @@ "@types/dateformat": "^5.0.2", "@types/hex-rgba": "^1.0.3", "@types/history": "^4.7.11", + "@types/lodash.clonedeep": "^4.5.9", "@types/lodash.debounce": "^4.0.9", "@types/react": "^18.2.58", "@typescript-eslint/eslint-plugin": "^6.21.0", diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx index 3427fb2d..a3837b02 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx @@ -10,6 +10,8 @@ import ActionPreviewHeader from './ActionPreviewHeader'; import DiffTab from './tabs/DiffTab'; import StateTab from './tabs/StateTab'; import ActionTab from './tabs/ActionTab'; +import { getValueByPath } from './utils/getValueByPath'; +import { copyToClipboard } from './utils/copyToClipboard'; export interface TabComponentProps> { labelRenderer: LabelRenderer; @@ -184,7 +186,7 @@ class ActionPreview> extends Component< labelRenderer: LabelRenderer = ([key, ...rest], nodeType, expanded) => { const { onInspectPath, inspectedPath } = this.props; - + const reversedPath = [key, ...rest].reverse(); return ( {key} @@ -202,14 +204,41 @@ class ActionPreview> extends Component< onClick={() => onInspectPath([ ...inspectedPath.slice(0, inspectedPath.length - 1), - ...[key, ...rest].reverse(), + ...reversedPath, ]) } > - {'(pin)'} - - {!expanded && ': '} + {'(pin)'} + ({ + fontSize: '0.7em', + paddingLeft: '5px', + cursor: 'pointer', + '&:hover': { + textDecoration: 'underline', + }, + color: theme.PIN_COLOR, + })} + onClick={event => { + event.stopPropagation(); + let objectForCopying; + if (this.props.tabName === 'Action') { + objectForCopying = getValueByPath(this.props.action, reversedPath); + } else if (this.props.tabName === 'State') { + objectForCopying = getValueByPath(this.props.nextState, reversedPath); + } + if (objectForCopying !== undefined) { + copyToClipboard(objectForCopying); + } else { + console.error('Unable to find the object to copy'); + } + }} + > + {'(copy)'} + + {!expanded && ': '} + ); }; } diff --git a/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts b/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts new file mode 100644 index 00000000..39f4021c --- /dev/null +++ b/packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts @@ -0,0 +1,11 @@ +import cloneDeep from 'lodash.clonedeep'; + +export function copyToClipboard(object: any){ + try { + const deepCopiedObject = cloneDeep(object); + const jsonString = JSON.stringify(deepCopiedObject, null, 2); + void navigator.clipboard.writeText(jsonString); + } catch (err) { + console.error('Error during copy: ', err); + } +} diff --git a/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts b/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts new file mode 100644 index 00000000..f98ce1c2 --- /dev/null +++ b/packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts @@ -0,0 +1,12 @@ +export function getValueByPath(obj: any, path: (string | number)[]){ + let current: any = obj; + for (let i = 0; i < path.length; i++) { + const key = path[i]; + const adjustedKey = typeof key === 'string' && !isNaN(Number(key)) ? parseInt(key, 10) : key; + if (current[adjustedKey] === undefined) { + return undefined; + } + current = current[adjustedKey]; + } + return current; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1b769dd..93903bf9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1614,6 +1614,9 @@ importers: jsondiffpatch: specifier: ^0.6.0 version: 0.6.0 + lodash.clonedeep: + specifier: ^4.5.0 + version: 4.5.0 lodash.debounce: specifier: ^4.0.8 version: 4.0.8 @@ -1669,6 +1672,9 @@ importers: '@types/history': specifier: ^4.7.11 version: 4.7.11 + '@types/lodash.clonedeep': + specifier: ^4.5.9 + version: 4.5.9 '@types/lodash.debounce': specifier: ^4.0.9 version: 4.0.9 @@ -10273,6 +10279,12 @@ packages: '@types/lodash': 4.14.202 dev: true + /@types/lodash.clonedeep@4.5.9: + resolution: {integrity: sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==} + dependencies: + '@types/lodash': 4.14.202 + dev: true + /@types/lodash.curry@4.1.9: resolution: {integrity: sha512-QV967vSflHEza0d0IMTK7fwbl+baPBXZjcESeAHrA5eSE+EHetaggZjPpkzX1NJh4qa8DLOLScwUR+f7FN85Zg==} dependencies: @@ -16841,6 +16853,10 @@ packages: /lodash-es@4.17.21: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + /lodash.clonedeep@4.5.0: + resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==} + dev: false + /lodash.curry@4.1.1: resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==} dev: false