From 31f2a0fd10427c905de5400b1b80bb75d03e7a57 Mon Sep 17 00:00:00 2001
From: Mingwei Samuel <mingwei.samuel@gmail.com>
Date: Fri, 17 Sep 2021 15:04:27 -0700
Subject: [PATCH] fix: break path w/ <wbr>s to avoid copying ZWSPs (#7516)

- Use <wbr> instead of ZERO-WIDTH SPACE (U+200B) to break segments in
  operation-summary-path.jsx
- Remove no-longer-needed onCopyCapture listener which previously
  stripped ZWSPs

Closes #7513
---
 src/core/components/operation-summary-path.jsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/core/components/operation-summary-path.jsx b/src/core/components/operation-summary-path.jsx
index 0bdd521c6c0d..c7ebca83aab6 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,22 @@ export default class OperationSummaryPath extends PureComponent{
       isDeepLinkingEnabled,
     } = operationProps.toJS()
 
+    // Add <wbr> word-break elements between each segment, before the slash.
+    const textWithBreaks = path.split(/(?=\/)/g);
+    for (let i = 1; i < textWithBreaks.length; i += 2) {
+      textWithBreaks.splice(i, 0, <wbr />)
+    }
+
     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={textWithBreaks} />
       </span>
 
     )