Skip to content

Commit

Permalink
fix: break path w/ <wbr>s to avoid copying ZWSPs (swagger-api#7516)
Browse files Browse the repository at this point in the history
- 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
- Update's deep-link.jsx's `text` prop type to accept `PropType.node`
  to allow the above.

Closes swagger-api#7513
  • Loading branch information
MingweiSamuel committed Sep 22, 2021
1 parent 765056d commit b1ecfe1
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 10 deletions.
2 changes: 1 addition & 1 deletion src/core/components/deep-link.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ DeepLink.propTypes = {
enabled: PropTypes.bool,
isShown: PropTypes.bool,
path: PropTypes.string,
text: PropTypes.string
text: PropTypes.node
}

export default DeepLink
17 changes: 8 additions & 9 deletions src/core/components/operation-summary-path.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 pathParts = path.split(/(?=\/)/g)
for (let i = 1; i < pathParts.length; i += 2) {
pathParts.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={pathParts} />
</span>

)
Expand Down

0 comments on commit b1ecfe1

Please sign in to comment.