Estoy usando React y tengo una plantilla de correo electrónico que quiero proporcionar a los usuarios. Creé un componente de correo electrónico formateado e intenté usar peligrosamente SetInnerHTML para mostrar el correo electrónico formateado en un cuadro de diálogo.

Quiero saber si hay alguna manera de agregar el botón Copiar al portapapeles para copiar el correo electrónico con todo el formato, incluidas las negritas y los hipervínculos.

Preferiría usar el componente FormattedEmail, pero estaría de acuerdo con el uso peligroso de SetInnerHTML.

Opción 1

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

opcion 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>

El componente FormattedEmail es una combinación de diferentes etiquetas html tipográficas