Added a copy to clipboard button to <pre> blocks for easy clipboard interaction

[reactorcoremeltdown]

Summary

I find it really convenient to copy text from <pre> blocks directly to clipboard with a single button.

Details

This pull request adds:

• A vendor script that copies contents of <pre> blocks into clipboard using a button
• A notyf.js toast pill library for some eye-candy

Checks

• In case of new feature, add short overview in docs/<corresponding file>
• Tested changes

[Linbreux]

Hi @reactorcoremeltdown
Really like this, was also thinking on implementing this! Also the popup looks clean :)
I don't know if the button style fits the wiki style

Maybe something like this would fit a bit better (with you nice toast of course) :

Feel free to suggest alternatives

[reactorcoremeltdown]

Thanks a lot for reviewing and for suggestions!

Indeed, the button looks somewhat alien, so I'll give another try to https://clipboardjs.com/

BRB

[reactorcoremeltdown]

BTW, I'll have to be careful about mobile layouts, display on hover does not work well sometimes.

[reactorcoremeltdown]

So I think this looks much prettier.

What's changed:

• Changed button title to emoji to make it smaller
• Added a tooltip to the button
• Placed the button in a top-right corner (requires CSS adjutments for both <pre> and <button> elements)
• Enabled word-wrapping for <pre> tags

I hope that all makes sense! So far it looks and works good on both desktop and mobile layouts, but if you find anything that doesn't fit, please let me know!

[Linbreux]

Thanks for the contribution, it works great! I changed the icon to something a little more modern in 925be59.

[reactorcoremeltdown]

Thanks for the contribution, it works great! I changed the icon to something a little more modern in 925be59.

Thank YOU for your patience, your support, and overall for such an amazing project!