This issue suggests two UX/UI improvements for copying code fragments.
How to add/use one-liners
Under the section ‘How to add’ (for packages) and ‘How to use’ (for templates) there are one-liners (import directive and typst init command, respectively) with a copy button to the right. Hovering over the textless button doesn’t do anything, and clicking the button provides no clear visual feedback.
I suggest adding a tooltip saying ‘Copy to clipboard’ when hovering and one saying ‘Copied!’ after clicking. This mimics the behaviour on GitHub (where in addition the icon changes to a checkmark for a short while) and Forgejo.
Copying code blocks
On GitHub and Forgejo Markdown code blocks (marked by three backticks) have a similar button with the same icon and a similar behaviour. I suggest adopting this as well. The icon can always appear at the top-right corner of the block (as in GitHub) or appear only when hovering over the block (as in Forgejo). I think the former behaviour is better, because it’s more discoverable and more friendly to people who browse the web mainly using a keyboard (either using vanilla functionality or an extension like Tridactyl).
Description
This issue suggests two UX/UI improvements for copying code fragments.
How to add/use one-liners
Under the section ‘How to add’ (for packages) and ‘How to use’ (for templates) there are one-liners (
importdirective andtypst initcommand, respectively) with a copy button to the right. Hovering over the textless button doesn’t do anything, and clicking the button provides no clear visual feedback.I suggest adding a tooltip saying ‘Copy to clipboard’ when hovering and one saying ‘Copied!’ after clicking. This mimics the behaviour on GitHub (where in addition the icon changes to a checkmark for a short while) and Forgejo.
Copying code blocks
On GitHub and Forgejo Markdown code blocks (marked by three backticks) have a similar button with the same icon and a similar behaviour. I suggest adopting this as well. The icon can always appear at the top-right corner of the block (as in GitHub) or appear only when hovering over the block (as in Forgejo). I think the former behaviour is better, because it’s more discoverable and more friendly to people who browse the web mainly using a keyboard (either using vanilla functionality or an extension like Tridactyl).