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 <[email protected]>
swagger-api · Sep 30, 2021 · f88334a · f88334a
1 parent 9952849
commit f88334a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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>
 
     )