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

[andyford]

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

[petdud]

+1, facing the same issue here: https://react.fluentui.dev/?path=/docs/theme-color--page
The storybook contains an indication that the item is copied, so I assume the problem might be somewhere there?

[pocka]

It seems this behavior is intentional... see #15559.

I feel that "feature" is both unintuitive and surprising. In my opinion, it's should be an opt-in feature or be assigned to a safe and unused shortcut key.

[jphawk]

Agree with @pocka. 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 😬 It would be great to make this optional, as it just doesn't suit some use cases

[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.

[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.

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.27 containing PR #19788 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[James-Wilkinson-git]

Can we get a fix for this in non storybook 7? for those who can't upgrade?