ZERO WIDTH SPACE (U+200B) in path copied if selection is not exact

[MingweiSamuel]

Q&A (please complete the following information)

• OS: Win 10
• Browser: Firefox
• Version: 92.0
• Method of installation: dist/
• Swagger-UI version: v3.24.2
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0]

Describe the bug you're encountering

If you drag to select the path, but select a little bit too far, the zero-width space removal doesn't happen, and you copy a bunch of zero-width spaces into your code to cause invisible bugs.

To reproduce...

Steps to reproduce the behavior:

1. Start selecting the path text from right to left.
2. Drag slightly further than the start of the text.
3. Copy

Screenshots

Will copy zero width spaces (on left and in middle of path).

If you very carefully stop at the start of the text things will be OK:

(OK)

Cause

Caused by #5184

The PR above injects zero width spaces into the path, but includes an onCopyCapture function which is triggered when the user copies, which removes all zero width spaces from the copied text. However that event is only triggered if the selection is only on the path <span>. In reality, users will often drag a little further to make sure all the characters are selected, but this (for some reason) means the onCopyCapture is not triggered and ZERO WIDTH SPACEs are copied.

Fix

<wbr> should be used instead, which requires no onCopyCapture faffing: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

[MingweiSamuel]

Another side-effect of #5184 is that if you select text like this:

What actually gets copied is /data-store/v1/install-dir, whether you want that or not.

[char0n]

@MingweiSamuel nice catch.

Are you willing to entertain a PR with the fix?

[MingweiSamuel]

Sure

[char0n]

Great! Looking forward