add copy to clipboard functionality #339
Conversation
|
Hmm, this had some side-effects on Before:
After:
Also I'm only seeing the copy button on some of the blocks on this page. I'm not sure why though, they aren't significantly different other than missing the button 🤔 Probably just a selector bug. |
|
|
||
|
|
There was a problem hiding this comment.
These extra empty lines were kinda intentional to split apart the file in sections. We should probably add comments between these sections instead I figure.
There was a problem hiding this comment.
Thanks, I'm happy to add a note here, do you know what note I should add? It looks like more general selectors are above and more specific ones are below, but I'm guessing.
src/resources/js/docs.js
Outdated
| }); | ||
|
|
||
| // select all bash code elements and dynamically add clipboard button/svg | ||
| $("pre > code.bash").map(function (_, block) { |
There was a problem hiding this comment.
Ah, you only added it to code.bash, I see. I think in some cases it's code.cmd > span.bash as well. Or something like that.
There was a problem hiding this comment.
Good catch! I've reduced the specificity of the selector and added span.bash.
@francislavoie I'm seeing the same thing, I've added some changes to fix that in other locations. I think a better fix for this is for any case where there is a |
|
No rush at all 👍 take your time |
|
Yeah, thanks for working on that! No problem, we're not in a hurry :) |
|
Is this ready to merge? If not, feel free whenever it's ready :) |
This adds the copy to clipboard feature that is available on many documentation websites. It sits inline with the text, so there wont be any cases where it will overlap existing content.
Clicking the copy button takes the contents inside the code block and copies it to your clipboard, you receive a tooltip when clicking it that disappears after a second. I'm open to tweaking the timing on the tooltip if it feels slow.