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

@@ -14,7 +14,7 @@ DeepLink.propTypes = {
   enabled: PropTypes.bool,
   isShown: PropTypes.bool,
   path: PropTypes.string,
-  text: PropTypes.string
+  text: PropTypes.node
 }
 
 export default DeepLink

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}
         data-path={path}>
         <DeepLink
             enabled={isDeepLinkingEnabled}
             isShown={isShown}
             path={createDeepLinkPath(`${tag}/${operationId}`)}
-            text={path.replace(/\//g, "\u200b/")} />
+            text={pathParts} />
       </span>
 
     )