I am using React and I have an email template that I want to provide users. I have created a formatted email component and tried using dangerouslySetInnerHTML to show the formatted email in a dialog.

I want to know if there is a way for me to add copy to clipboard button to copy the email with all of the formatting including bolding and hyperlinks.

I would prefer to use the FormattedEmail component but would be okay with using dangerouslySetInnerHTML.

Option 1

<Dialog
   isShown={showDialog}
   onCloseComplete={() => setShowDialog(false)}
   topOffset={4}
   footer={ <Button onClick={CopyToClipboard}> Click here to copy the template </Button>}
>
    <FormattedEmail />
</Dialog>

Option 2

<Dialog
   isShown={showDialog}
   onCloseComplete={() => setShowDialog(false)}
   topOffset={4}
   footer={ <Button onClick={CopyToClipboard}> Click here to copy the template </Button>}
>
 <div id="to-copy" dangerouslySetInnerHTML={{ __html:`${email}`}}></div>
</Dialog>

The FormattedEmail component is a combination of different typography html tags