I have some text that I have inputted into a "dangerouslySetInnerHTML" to display appropriate formatting. The formatting includes line breaks, bold tags and hyperlinks.

I want a user to be able to copy from clipboard while preserving the formatting of the template.

I managed to copy from clipboard but the copied text includes the raw html and not the formatting.

Ex.

const myTemplate = <p>Hello <a href="${link}">User</a></p>

//Template 
<Dialog
  isShown={showDialog}
  onCloseComplete={() => setShowDialog(false)}
  topOffset={4}
  footer={
     <Button onClick={() => navigator.clipboard.writeText(
             document?.getElementById('to-copy')?.innerHTML,
            )
          }
          >
          Click here to copy the template
         </Button>


<div id="to-copy" dangerouslySetInnerHTML={{ __html: `${myTemplate}` }}></div>

Desired Output:

Hello User(hyperlink)

I have some text that I have inputted into a "dangerouslySetInnerHTML" to display appropriate formatting. The formatting includes line breaks, bold tags and hyperlinks.

I want a user to be able to copy from clipboard while preserving the formatting of the template.

I managed to copy from clipboard but the copied text includes the raw html and not the formatting.

Ex.

const myTemplate = <p>Hello <a href="${link}">User</a></p>

//Template 
<Dialog
  isShown={showDialog}
  onCloseComplete={() => setShowDialog(false)}
  topOffset={4}
  footer={
     <Button onClick={() => navigator.clipboard.writeText(
             document?.getElementById('to-copy')?.innerHTML,
            )
          }
          >
          Click here to copy the template
         </Button>


<div id="to-copy" dangerouslySetInnerHTML={{ __html: `${myTemplate}` }}></div>

Desired Output:

Hello User(hyperlink)

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Nov 11, 2021 at 20:34 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Nov 11, 2021 at 20:27 james wisleyjames wisley 11911 silver badge99 bronze badges 1

• Hey @JamesWisley - this question is still open. Was the question answered satisfactorily? If there is more we can help with, please add a ment below any answer, or edit your question to clarify what else you want to know. Otherwise, please choose a "best answer" (by clicking the checkmark beside an answer) to close out the question. If no answer provided helpful information, please add your own answer and select that as the best answer (to close the question). That would help us out. Thanks! – cssyphus Commented Nov 15, 2021 at 23:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Unsure if I understand the nuances of your question, but here are some things that might (I hope) help.

function copyToClip(str) {
  function listener(e) {
    e.clipboardData.setData("text/html", str);
    e.clipboardData.setData("text/plain", str);
    e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);
};

<button onclick="copyToClip(document.getElementById('richtext').innerHTML)">
  Copy to Clipboard
  </button>

<div>
<br>
Click the above <kbd>Copy to Clipboard</kbd> button and then paste the clipboard contents into MS Word or LibreOffice Writer.
<br><br>
Beneath this div is an invisible (display:none) div that contains formatted text (bolded, italicized, colored, different font). <i>The contents of that invisible div are copied to your clipboard when you click the Copy To Clipboard button up top.</i>
</div>

<div id=richtext style="display:none">
  The data in this div is not visible. 
  It contains rich text. 
  Rich (i.e. "formatted") data can also be generated by javascript.
  The next word is <b>bolded</b>, and the next one is in <i>italics</i>.
  <span style="font:24px Arial; color:purple;">Some large purple text</span>. 
  
You can use two setData directives to insert TWO copies of this text into the same clipboard, one that is plain and one that is rich. That way your users can paste into either a
  <ul>
    <li>plain text editor</li>
    <li>or into a rich text editor</li>
  </ul>
  
  Here is a <a href="https://rumble.">Link to Rumble</a> - you must Ctrl-Click the link in Word.
</div>

References:

Documentation for the Clipboard API (MDN)

Previously, we used document.execCommand() to write to the clipboard. It is now deprecated (and may require putting the page into designMode), but depending on your requirements it might be useful.

document.execCommand()

Document.designMode

How are copying to your clipboard?

You might have to convert it to a raw string and use utility library such as clipboard-copy (https://www.npmjs./package/clipboard-copy)