Skip to content

[Typst Universe UX/UI] Improve copying code fragments #1028

Open
@rwmpelstilzchen

Description

@rwmpelstilzchen

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 (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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions