diff --git a/Resources/Private/Translations/en/Main.xlf b/Resources/Private/Translations/en/Main.xlf index 0db6995fa5..cc4b21565d 100644 --- a/Resources/Private/Translations/en/Main.xlf +++ b/Resources/Private/Translations/en/Main.xlf @@ -374,6 +374,9 @@ For more information about the error please refer to the JavaScript console. + + Copy node type to clipboard + diff --git a/packages/neos-ui-views/src/NodeInfoView/index.js b/packages/neos-ui-views/src/NodeInfoView/index.js index 98a17d5dd6..a63b4b3233 100644 --- a/packages/neos-ui-views/src/NodeInfoView/index.js +++ b/packages/neos-ui-views/src/NodeInfoView/index.js @@ -4,6 +4,7 @@ import {connect} from 'react-redux'; import {$get} from 'plow-js'; import {neos} from '@neos-project/neos-ui-decorators'; import {selectors} from '@neos-project/neos-ui-redux-store'; +import IconButton from '@neos-project/react-ui-components/src/IconButton/'; import style from './style.module.css'; @connect(state => ({ @@ -22,6 +23,19 @@ export default class NodeInfoView extends PureComponent { i18nRegistry: PropTypes.object.isRequired } + nodeTypeNameRef = React.createRef(); + + copyNodeToClipboard = () => { + this.nodeTypeNameRef.current.select(); + const result = document.execCommand('copy'); + + if (result) { + this.props.addFlashMessage('copiedToClipboard', 'Copied nodetype to clipboard', 'success'); + } else { + this.props.addFlashMessage('copiedToClipboardFailed', 'Could not copy to clipboard', 'error'); + } + } + render() { const {focusedNodeContextPath, getNodeByContextPath, i18nRegistry} = this.props; @@ -36,8 +50,8 @@ export default class NodeInfoView extends PureComponent { }; const nodeType = $get('nodeType', node); - // Insert soft hyphens after dots and colon to make the node type more readable - const hyphenatedNodeTypeName = nodeType.replace(/([.:])/g, '$1\u00AD'); + // Insert word breaking tags to make the node type more readable + const wrappingNodeTypeName = nodeType?.replace(/([:.])/g, '$1'); return ( ); diff --git a/packages/neos-ui-views/src/NodeInfoView/style.module.css b/packages/neos-ui-views/src/NodeInfoView/style.module.css index a331e47e88..5a4e449eeb 100644 --- a/packages/neos-ui-views/src/NodeInfoView/style.module.css +++ b/packages/neos-ui-views/src/NodeInfoView/style.module.css @@ -5,6 +5,7 @@ } .nodeInfoView__item { + position: relative; background-color: var(--colors-ContrastDarkest); padding: 8px 12px; margin-bottom: 1px; @@ -33,3 +34,21 @@ hyphenate-character: ''; word-wrap: break-word; } + +.nodeInfoView__nodeTypeTextarea { + opacity: 0; + width: 0; + height: 0; + overflow: hidden; + border: 0; + position: absolute; +} + +.nodeInfoView__copyButton { + position: absolute; + top: 5px; + right: 5px; + width: 30px; + min-width: 30px; + height: 30px; +}