From f88334a47df380dd0e36bd66afb6ec5fc3df4b45 Mon Sep 17 00:00:00 2001
From: Mingwei Samuel <mingwei.samuel@gmail.com>
Date: Thu, 30 Sep 2021 05:52:33 -0700
Subject: [PATCH] fix(paths): break long paths with <wbr> (#7516)

- use <wbr> instead of ZERO-WIDTH SPACE (U+200B) to break segments
- remove no-longer-needed onCopyCapture listener which previously  stripped ZWSPs
- update's deep-link.jsx's `text` prop type to accept `PropType.node`  to allow the above.

Closes #7513
Co-authored-by: Vladimir Gorej <vladimir.gorej@gmail.com>
---
 src/core/components/deep-link.jsx             |  2 +-
 .../components/operation-summary-path.jsx     | 20 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/core/components/deep-link.jsx b/src/core/components/deep-link.jsx
index 44aa08bb..33e1ef44 100644
--- a/src/core/components/deep-link.jsx
+++ b/src/core/components/deep-link.jsx
@@ -14,7 +14,7 @@ DeepLink.propTypes = {
   enabled: PropTypes.bool,
   isShown: PropTypes.bool,
   path: PropTypes.string,
-  text: PropTypes.string
+  text: PropTypes.node
 }
 
 export default DeepLink
diff --git a/src/core/components/operation-summary-path.jsx b/src/core/components/operation-summary-path.jsx
index 0bdd521c..37b4a0ac 100644
--- a/src/core/components/operation-summary-path.jsx
+++ b/src/core/components/operation-summary-path.jsx
@@ -12,12 +12,6 @@ export default class OperationSummaryPath extends PureComponent{
     getComponent: PropTypes.func.isRequired,
   }
 
-  onCopyCapture = (e) => {
-    // strips injected zero-width spaces (`\u200b`) from copied content
-    e.clipboardData.setData("text/plain", this.props.operationProps.get("path"))
-    e.preventDefault()
-  }
-
   render(){
     let {
       getComponent,
@@ -34,17 +28,25 @@ export default class OperationSummaryPath extends PureComponent{
       isDeepLinkingEnabled,
     } = operationProps.toJS()
 
+    /**
+     * Add <wbr> word-break elements between each segment, before the slash
+     * to allow browsers an opportunity to break long paths into sensible segments.
+     */
+    const pathParts = path.split(/(?=\/)/g)
+    for (let i = 1; i < pathParts.length; i += 2) {
+      pathParts.splice(i, 0, <wbr key={i} />)
+    }
+
     const DeepLink = getComponent( "DeepLink" )
 
     return(
-      <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } 
-        onCopyCapture={this.onCopyCapture}
+      <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" }
         data-path={path}>
         <DeepLink
             enabled={isDeepLinkingEnabled}
             isShown={isShown}
             path={createDeepLinkPath(`${tag}/${operationId}`)}
-            text={path.replace(/\//g, "\u200b/")} />
+            text={pathParts} />
       </span>
 
     )