Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Allow keyboard shortcut to copy code in preview blocks #15559

Merged
merged 7 commits into from Jul 16, 2021

Conversation

@melindali255
Copy link
Contributor

@melindali255 melindali255 commented Jul 12, 2021

What I did

The keyboard shortcut for copying can be used to copy the source code of preview blocks. The source code does not need to be visible/expanded for the shortcut to work. After successfully copying, the action bar briefly displays a 'Copied' confirmation message.

@nx-cloud
Copy link

@nx-cloud nx-cloud bot commented Jul 12, 2021

Nx Cloud Report

CI ran the following commands for commit 2cb3910. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status Command
#000000 nx run-many --target=prepare --all --parallel --max-parallel=15

Sent with 💌 from NxCloud.

@shilman shilman requested review from MichaelArestad and darleendenno Jul 13, 2021
@shilman shilman changed the title Feature: Allow keyboard shortcut to copy code in preview blocks UI: Allow keyboard shortcut to copy code in preview blocks Jul 13, 2021
Copy link
Contributor

@darleendenno darleendenno left a comment

Hey @melindali255 👋 Thank you for taking the time to improve Storybook!!

I love this! ❤️ It's very clean, and works as expected (this is me pressing CTRL + C a lot)
copy

Is there a use-case where people may want to copy partial code?

In the current version, if I highlight a partial code block, I can copy that text. In your solution, I am only able to copy the full block. I'm eager to hear your thoughts!

If this doesn't seem like a big deal from a ux perspective, then I think this code is good-to-go.

@melindali255
Copy link
Contributor Author

@melindali255 melindali255 commented Jul 14, 2021

Hi @darleendenno! Thank you for your feedback!

I could see a use case where someone may want to only copy a certain section of the code block. Let me add some changes to allow that to happen.

@melindali255 melindali255 requested a review from darleendenno Jul 15, 2021
Copy link
Contributor

@darleendenno darleendenno left a comment

❤️❤️❤️❤️ I LOVE THIS! ❤️❤️❤️❤️

Thank you for this improvement. Regression passes for me locally, and now users can copy full code blocks without highlighting. Great work!!

@darleendenno
Copy link
Contributor

@darleendenno darleendenno commented Jul 15, 2021

@shilman uncertain why chromatic is displaying a different baseline for the sidebar -- will let you sort that out. This is good to go on my end 👍

Copy link
Member

@shilman shilman left a comment

Works great!!! 🏅 Thanks @melindali255!!

@shilman shilman merged commit c09ce85 into storybookjs:next Jul 16, 2021
5 of 7 checks passed
5 of 7 checks passed
@github-actions
Danger JS
Details
@circleci-checks
test Workflow: test
Details
ci/circleci: build CircleCI is running your tests
Details
DeepScan 0 new and 0 fixed issues
Details
@nx-cloud
NxCloud Your NxCloud report is now available
Details
ci/circleci: frontpage Your tests passed on CircleCI!
Details
@circleci-checks
deploy Workflow: deploy
Details
@jonniebigodes
Copy link
Contributor

@jonniebigodes jonniebigodes commented Jul 16, 2021

@melindali255 I've kept an eye on this pull request and one final thing we'd like from you if you don't mind. Could you jump in our Discord Server and message me (same username), as there's one item to address. Sounds good?

Stay safe

@shilman shilman added this to the 6.4 PRs milestone Jul 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants