Add copy button for code snippet

[menghif]

Issue This PR Addresses

Fixes #2923

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Steps to test the PR

• pnpm i
• cp config/env.staging .env
• pnpm dev

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[humphd]

In our meeting today we discussed copying how GitHub does this, so that you only see the "copy" button when you mouse over the area, and it is removed when you leave that area. We should see what they do with touch events for mobile.

Also, I wonder if we should steal their icon too vs. using the "copy" text?

[DukeManh]

Instead of listening to the mouse move, you can use mouseenter/mouseleave event handler. I suggest that you do the followings:

1. const snippets = post.querySelectorAll('pre code')
2. snippet.onmouseenter = () => { const button = createButton(); button.onclick = () => copySnippet(snippet.text); snippet.appendChild(button); }
3. snippet.onmouseleave = removeButton

[TueeNguyen]

@menghif, I was playing around with this PR, trying to make mouseenter & mouseleave to work. I opened a PR in your fork

[AmasiaNalbandian]

Hello! Please rebase, as the following commit 6046273 has reorganized our file structure!

[menghif]

This now shows/hides the button as expected

[TueeNguyen]

It's so cool to see you took some inspiration from me 😄

[menghif]

It's so cool to see you took some inspiration from me 😄

I put you as a co-author 😊

[humphd]

I like this, but I don't think the code is ready.

[DukeManh]

@menghif I know a bit about Posts so I want to collaborate with you on this here menghif#7

I added fade in and out button transition, a copy icon like GitHub/Mozilla does it. And I moved the listener to a higher level component so it doesn't get called for each post.

[humphd]

Nice.

One thing I notice during testing is that we now have two copy buttons, and they use different colours (new one is dark, old one is light):

Can we file a follow-up to make them the same?

[AmasiaNalbandian]

This got rid of my previous feedback - I'm also loving the instant feedback that the click has registered and has copied the code block! Nice work team!

[menghif]

This looks amazing! Thank you @DukeManh for making it great

Outdated

[humphd]

Looks good, but I'd like to see an issue filed to deal with the difference between how the two copy buttons work. We should re-use the same component or at least have the styles be the same.

[DukeManh]

Filed #3356 follow-up.