Text inside of DocPage stories can be selected but can not be copied.

Describe the bug Text inside of DocPage stories can be selected but can not be copied.

To Reproduce Can be seen here:

• https://storybookjs.netlify.app/official-storybook/?path=/docs/basics-documentformatting--with-markdown
• https://storybookjs.netlify.app/vue-kitchen-sink/?path=/docs/app--default
• https://storybookjs.netlify.app/angular-cli/?path=/docs/welcome-to-angular--to-angular

I asked on Discord if this was a known issue and @kylegach discovered the issue exists on the above 3 instances.

I first noticed this in a private storybook instance running on @storybook/react v6.5.4 but it appears the the above 3 instances as well.

Additional context Tested on Mac in Chrome, Firefox, and Safari. Text cannot be copied through conventional means (cmd+c or right click and select “Copy” from context menu) but I noticed it’s still possible to use navigator.clipboard.writeText()

EDIT (2022-08-09) Just to clarify. Rendered text/code inside of code preview blocks appears to be manually selectable and copy-able (in addition to the Copy button still functioning fine. This bug report is about the text content within the rendered stories themselves. This also appears to only affect the Docs tab and not the Canvas tab.

Here’s a video: https://user-images.githubusercontent.com/49811/183597174-c04353ba-54a0-4ea2-b617-1c45e7533484.mp4

[andyford]

It seems this behavior is intentional… see #15559.

I’m not 100% sure… You can still manually select and copy rendered text inside of the code blocks. But you can’t copy text in the rendered stories. Maybe it is somehow related… but maybe not? 🤷

EDIT: After making a video (which I’ve added to the original post) and watching it back, I noticed that when I copy text from the rendered story (around 0:13 to 0:17), the UI temporarily says Copied in the bottom right corner. So this is could indicate that this bug is somehow tied to the source code copying functionality as @pocka suggested.

[andyford]

I’m taking care of a design system done in storybook and I’m getting plenty of complaints from developers who can’t copy e.g. color codes or spacing values from DocPages

That’s exactly how I discovered this issue! In this case we implemented our own copy-to-clipboard functionality, but we shouldn’t have to do this.