Add copy button to code blocks

[daavoo]

It would be nice to have a button to copy the entire content of code blocks, like the one supported in GitHub markdown:

pip install dvclive

---

[julieg18]

Should be doable since we can turn our code blocks into React components! The hardest part that comes to mind is making sure we parse the different types of code blocks correctly so that the copied code actually looks right 🤔

[shcheklein]

the biggest question I had thinking about this - should be copy outputs as well:

$ dvc plots show
Plots file is ....

# Now run ...
$ dvc plots diff
Some output

what should we copy in this case?

[daavoo]

what should we copy in this case?

We could leave this decision up to the writer, which can decide whether to split code and output into 2 separated blocks?

[shcheklein]

which can decide whether to split code and output into 2 separated blocks

feel too complicated, will looks a bit ugly I guess ... can be done though, yep

[jorgeorpinel]

Would need to be applicable to some CLI blocks specifically indeed. Doesn't sound like an easy implementation. Triple click does the trick too but I'm not sure how many people are aware.

[omesser]

Can we maybe reprioritize this and simplify? Having guides without this seems lacking

No need for fancy logic IMO - we can start with:

• Asking for this explicitly (i.e. not a feature of cli). We can add a component similar to cli, but "asking for this feature"- called cli-guide or cli-with-copy to make this explicit and not break all existing snippets.
• Have it copy all the contents as is, with the exception of shaving terminal-curser token (^$ to support multiple commands) which should be relatively easy I hope.

It will be possible to expand on that in the future with robust logic to differentiate between the command(s) and outputs. But we can do without it today.
Thoughts?