diff --git a/src/core/components/deep-link.jsx b/src/core/components/deep-link.jsx index 44aa08bba7b..33e1ef444c5 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 0bdd521c6c0..37b4a0ac54a 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 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, ) + } + const DeepLink = getComponent( "DeepLink" ) return( - + text={pathParts} /> )