From 603e2f44fec0d12099406ce5566a0a3a6447bb01 Mon Sep 17 00:00:00 2001
From: Sebastian Helzle <sebastian@helzle.it>
Date: Wed, 10 Apr 2024 22:15:24 +0200
Subject: [PATCH 1/2] BUGFIX: Copy nodetype name from nodeinfoview without
 hyphens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also adds a copy button for easier interaction.
This change keep the feature that the nodetype name wraps when it’s longer than the inspector is wide.
---
 .../neos-ui-views/src/NodeInfoView/index.js   | 32 ++++++++++++++++---
 .../src/NodeInfoView/style.module.css         | 19 +++++++++++
 2 files changed, 47 insertions(+), 4 deletions(-)

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, '<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
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;
+}

From d43c294053cbc18c5b2ac12c497b427bc67e3c0f Mon Sep 17 00:00:00 2001
From: Sebastian Helzle <sebastian@helzle.it>
Date: Wed, 10 Apr 2024 22:23:43 +0200
Subject: [PATCH 2/2] TASK: Add i18n label for copy nodetypename to clipboard
 button

---
 Resources/Private/Translations/en/Main.xlf | 3 +++
 1 file changed, 3 insertions(+)

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 @@
             <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>