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..17181b68 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx @@ -10,6 +10,7 @@ import ActionPreviewHeader from './ActionPreviewHeader'; import DiffTab from './tabs/DiffTab'; import StateTab from './tabs/StateTab'; import ActionTab from './tabs/ActionTab'; +import cloneDeep from 'lodash.clonedeep'; export interface TabComponentProps> { labelRenderer: LabelRenderer; @@ -80,6 +81,15 @@ class ActionPreview> extends Component< static defaultProps = { tabName: DEFAULT_STATE.tabName, }; + copyToClipboard = () => { + try { + const deepCopiedObject = cloneDeep(this.props.nextState); + const jsonString = JSON.stringify(deepCopiedObject, null, 2); + void navigator.clipboard.writeText(jsonString); + } catch (err) { + console.error('Failed to copy: ', err); + } + }; render(): JSX.Element { const { @@ -206,10 +216,27 @@ class ActionPreview> extends Component< ]) } > - {'(pin)'} - - {!expanded && ': '} + {'(pin)'} + ({ + fontSize: '0.7em', + paddingLeft: '5px', + cursor: 'pointer', + '&:hover': { + textDecoration: 'underline', + }, + color: theme.PIN_COLOR, + })} + onClick={event => { + event.stopPropagation(); + this.copyToClipboard(); + }} + > + {'(copy)'} + + {!expanded && ': '} + ); }; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1b769dd..a459a268 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