feat: Add copy to clipboard button to markdown code block #2025

[marek-mihok]

The PR fulfills these requirements: (check all the apply)

• It's submitted to the main branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• If changes were made to ui folder, unit tests (make test) still pass.
• New/updated tests are included

---

This PR reuses the button from ui.copyable_text also for markdown code block.

Screen.Recording.2023-08-28.at.10.53.21.mov

Closes #2025

[mturoci]

Thanks @marek-mihok!

• Using portals seems like overkill. Can we do without?
• The button on dark md syntax highlight blends into background and is barely visible. Can this be improved?
• The tests that check if button is rendered are unnecessary, we have visual regression tests for that. Hover ones are ok.

[marek-mihok]

Using portals seems like overkill. Can we do without?

We can, please check the updated solution. I've reused the original approach we used for copyable_text and applied the same principle also for markdown code block.

The button on dark md syntax highlight blends into background and is barely visible. Can this be improved?

Improved by adding the outline.

The tests that check if button is rendered are unnecessary, we have visual regression tests for that. Hover ones are ok.

Good point. Removed ✅

[mturoci]

Thanks @marek-mihok!

I fixed the icon centering + removed some more unnecessary code.