Add Copy to Clipboard feature to Markdown and other fields

[Hyperrick]

Problem

It would be really helpful if the existing copy to clipboard feature from code fields could be used in other field types like markdown or text areas.

---

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.

[carolinedlu]

Thanks for sharing this request, @Hyperrick!

[jrieke]

Do you have a specific use case for this, or would you just find it nice in general?

[Hyperrick]

Hello @jrieke, I'm building a ChatGPT API wrapper and need this functionality ;)

[TomTom101]

Any use case is exactly the same as it is for the code fields! Why would I exclusively want to copy code, but not any other text content? Imo a no-brainer to offer this optionally for all fields.

[everydaydigital]

Hi There,
I've recently developed a method for adding a "Copy to Clipboard" button into Streamlit using any text string, without being limited to the st.code block - check it out here: https://github.com/everydaydigital/streamlit-custom-copy-buttons

I don't think this necessarily solves the issue because having this integrated into Streamlit would be ideal, but this absolutely works for my use case.

streamlit_custom_copy_to_clipboard_buttons.mp4

[ascidian-ai]

Do you have a specific use case for this, or would you just find it nice in general?

Absolutely agree with @TomTom101 !
Being able to copy content from a webapp to your local machine from any text or markdown component has great utility across a huge number of use cases.

If you're after one specifically though...
REQ | User wishes to copy results from markdown or text control into a word or ppt document.

Of greater utility would be a single button (not embedded in any other control) that can paste a text or binary object to the clipboard and functioning much like the download button.

For example,
st.clipboard_button(label, data, mime=None, key=None, help=None, on_click=None, args=None, kwargs=None, *, type="secondary", disabled=False, use_container_width=False)

[cjayb]

I would like to add a huge +1 to this Issue and echo the sentiments above and in other related threads.

I have perused the frontend-folder (despite knowing zero JS/TS/React). I can see that the copy-button in the code-block is implemented using ClipboardJS. However, I believe this only supports plain text (as opposed to rich/formatted text)—is this the reason for the functionality to only appear in code-fields?

@carolinedlu you asked in another thread what the use cases for copy to clipboard might be? As others have already mentioned, in the days of LLMs, I imagine a chat/search-interface is a pretty prominent use-case for streamlit out there! And to state the obvious: the text that is produced by these models/apps has a much higher probability of being something the user will want to snap a copy of!

If there are technical reasons that prevent easy implementation on arbitrary text-elements, I can accept that the copy-button only appear in a few. It's essential, however, that rich text can be copied with highlights, links and all.

Please ping me if I can help testing. I'd also be willing to take a stab at a PR, if a dev were to point me in the right direction? Here are some references I think might help the quest:

• https://stackoverflow.com/questions/23934656/how-can-i-copy-rich-text-contents-to-the-clipboard-with-javascript
• https://stackoverflow.com/questions/34191780/javascript-copy-string-to-clipboard-as-text-html/74216984#74216984

For the record: I don't care if it doesn't work in Firefox :)