How to copy from rich text field in Retool to other programs (without getting HTML code for paste)

Hello Retool community,

I'm currently trying to build a sort of template mail builder that creates standardized messages for contacts in my databse and adds some personal data of this contact (e.g. name, phone number, email, etc.)

To do this I have created a rich text field that will be populated with different messages based on the button the user clicks on.

Then I have used the utils.copyToClipboard() function to copy the value of the richt text field to the clipboard. Now here my problems start, because this copied value is HTML formatted and when I paste it to Word or any webmail/mail program it will display like this and not as rich text:

I can't wrap my head around this and would be happy to receive your solutions for this problem of mine. Ultimatly I just want to copy the content of the richt text field from Retool directly to other applictions.

Thanks for your help!

Best, Timo

2 Likes

Hi,

Maybe I have a general tip for you - If you use ctrl + shift + v instead of ctrl + v for copying, the text will be copied unformatted!

Would that help you?

Hi,
yes, I have been aware of this, but I want to copy the text with the formatting. But I want it to be pasted with formatting right away. Like when you copy a formatted text from one Word file to another.

It doesn't look like there's a native way to do this in Retool right now, but we'll switch this thread to be a feature request!

3 Likes

Thank you @retool_team! Would be great to get this functionality. I see a lot of differnt applications when it comes to creating personalized texts based on exisitng data about customers.

We are also interested in being able to copy rich text to the clipboard.

Perhaps some functionality like this could be added to utils.copyToClipboard() if a variable as_html was passed in?
It could do something like the following fiddle: Copy to clipboard pure JavaScript - JSFiddle - Code Playground
(Try pressing the 'Copy the stuff' button then pasting it into an email. You will have rich text instead of raw html).

I have tried the following things to get this to work somehow in the meantime- but none of them have been successful.

function listener(event) {
  event.clipboardData.setData("text/html", value);
  event.clipboardData.setData("text/plain", value);
  event.preventDefault();
  
  utils.showNotification({ title: "Copied to Clipboard" });
}

const value = "<p>Test <b>rich text</b> copy</p><ol><li>one</li><li>two<ul><li>sub 1</li><li>sub 2</li></ul></li></ol><p>Testing</p>";

document.addEventListener("copy", listener);
document.execCommand("copy");
document.removeEventListener("copy", listener);
const content = "<p>Test <b>rich text</b> copy</p><ol><li>one</li><li>two<ul><li>sub 1</li><li>sub 2</li></ul></li></ol><p>Testing</p>";
const blob = new Blob([content], {type: 'text/html'});
const clipboardItem = new window.ClipboardItem({ 'text/html': blob });

utils.copyToClipboard(clipboardItem);

utils.showNotification({ title: "Copied to Clipboard" });
const value = "<p>Test <b>rich text</b> copy</p><ol><li>one</li><li>two<ul><li>sub 1</li><li>sub 2</li></ul></li></ol><p>Testing</p>";
const mySmartTextarea = document.createElement('textarea');
mySmartTextarea.innerHTML = value;
// const parentElement = document.body.appendChild(mySmartTextarea);
// mySmartTextarea.select();
// document.execCommand('copy');
// parentElement.removeChild(mySmartTextarea);
utils.copyToClipboard(mySmartTextarea)
utils.showNotification({ title: "Copied to Clipboard" });

@retool_team is there any update on the feature request ? Or any tip on copying text/html using a 3rd party library ?
Retool does not expose navigator.clipboard.write so the standard method cannot be used.

Very frustrating as we are coming from appSmith which can copy in HTML.
We currently use that to:

  1. construct our "own" HTML from a table (with hyperlinks, colors,..), then
  2. copy to clipboard with text/html mime-type, then
  3. user pastes into Gsheet or Excel. Both parse nicely the data and all formatting.

With retool, this cannot be done. Not sure why this was blocked. I was trying to use a HTML component - it does render the HTML correctly but no way to copy the rendered HTML using standard JS.

Hey @yiga2!

Doing some exploring here but unfortunately, I haven't been able to find a workaround that allows you to dynamically copy other datatypes besides text. We did bump the feature request though so the dev team will take another look at it!

1 Like

@Kabirdas can you check back with the dev team for their feedback on this feature ? Or exposing navigator.clipboard.write ?

Hi! At the moment it isn't a priority for the dev team as they're focusing on a few larger projects to be released later this year. It's not off the table, so if it gets picked up individually or as part of a larger project and included I'll still report back here. For now, though, there's no timeframe for it :confused:

Hello @Kabirdas ! Any news regarding this feature? Or any workarounds?

We want to add a button (Copy to clipboard) that basically copies a message while maintaining the formatting and pasting it in a word document.

Thanks!

Hi @nickfind, still no updates on this feature. The only workaround I found is to use the built-in Retool AI resource to remove the HTML. Some of the format seems to stay, like line breaks, but not the rest of the formatting.