Merge pull request #3763 from neos/bugfix/copy-nodetypename-without-h…

…yphens
neos · Apr 11, 2024 · 4e2ed9c · 4e2ed9c
2 parents 994f4e1 + d43c294
commit 4e2ed9c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 4 deletions.
diff --git a/Resources/Private/Translations/en/Main.xlf b/Resources/Private/Translations/en/Main.xlf
@@ -374,6 +374,9 @@
             <trans-unit id="errorBoundary.footer" xml:space="preserve">
                 <source>For more information about the error please refer to the JavaScript console.</source>
             </trans-unit>
+            <trans-unit id="copyNodeTypeNameToClipboard" xml:space="preserve">
+                <source>Copy node type to clipboard</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>
diff --git 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, '<wbr/>$1');
 
         return (
             <ul className={style.nodeInfoView}>
@@ -62,8 +76,18 @@ export default class NodeInfoView extends PureComponent {
                     <NodeInfoViewContent>{properties.name}</NodeInfoViewContent>
                 </li>
                 <li className={style.nodeInfoView__item} title={nodeType}>
-                    <div className={style.nodeInfoView__title}>{i18nRegistry.translate('type', 'Type', {}, 'Neos.Neos')}</div>
-                    <NodeInfoViewContent>{hyphenatedNodeTypeName}</NodeInfoViewContent>
+                    <div
+                        className={style.nodeInfoView__title}>{i18nRegistry.translate('type', 'Type', {}, 'Neos.Neos')}</div>
+                    <textarea ref={this.nodeTypeNameRef} className={style.nodeInfoView__nodeTypeTextarea}>{nodeType}</textarea>
+                    <NodeInfoViewContent>
+                        <span dangerouslySetInnerHTML={{__html: wrappingNodeTypeName}}></span>
+                    </NodeInfoViewContent>
+                    <IconButton
+                        className={style.nodeInfoView__copyButton}
+                        icon="copy"
+                        title={i18nRegistry.translate('copyNodeTypeNameToClipboard', 'Copy node type to clipboard', {}, 'Neos.Neos.Ui')}
+                        onClick={this.copyNodeToClipboard}
+                    />
                 </li>
             </ul>
         );

diff --git 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;
+}