h2oai / wave

Realtime Web Apps and Dashboards for Python and R
https://wave.h2o.ai
Apache License 2.0
3.9k stars 323 forks source link

Markdown Code Component with Copy to Clipboard #2255

Closed nipunchamikara closed 4 months ago

nipunchamikara commented 4 months ago

Is your feature request related to a problem? Please describe

We have a card that displays some code lines using a ui.markup component by wrapping the code in <code> tags along with a button to download the code as a file.

Describe the solution you'd like

A way to copy the code in the ui.markup to clipboard by either clicking a button, or markdown cards as a component instead of a separate card.

Describe alternatives you've considered

Markdown cards do have a copy to clipboard functionality, it is a card which means it cannot be added as a component. To add a card would mean having to remake the layouts. Also looked into copying to clipboard using inline JS, but it looked too complicated.

mturoci commented 4 months ago

Hey @nipunchamikara I think this should be doable via ui.text IIRC. It should support markdown out of the box together with copy to clipboard button. Please give it a try and let me know.

nipunchamikara commented 4 months ago

Hello @mturoci, yep you are right, it works with ui.text. I'm not sure if the docs didn't made it clear or if I missed something. Anyways, thanks a lot! Closing this issue.

mturoci commented 4 months ago

Docs should be there - https://wave.h2o.ai/docs/widgets/form/text/#with-markdown, but feel free to make a PR if you think there is a room for improvement.