Navigator Copy as Rich Text

Warning

This post is more than a year old. Information may be outdated.

tsx

<Button  onClick={() => {    const plainText = "YOUR TEXT";    const htmlText = `<pre>${plainText}</pre>`;    const blobHtml = new Blob([htmlText], { type: "text/html" });    const blobText = new Blob([plainText], { type: "text/plain" });    const data = [      new ClipboardItem({        "text/plain": blobText,        "text/html": blobHtml,      }),    ];    navigator.clipboard.write(data);  }}>  Copy</Button>

<Button  onClick={() => {    const plainText = "YOUR TEXT";    const htmlText = `<pre>${plainText}</pre>`;    const blobHtml = new Blob([htmlText], { type: "text/html" });    const blobText = new Blob([plainText], { type: "text/plain" });    const data = [      new ClipboardItem({        "text/plain": blobText,        "text/html": blobHtml,      }),    ];    navigator.clipboard.write(data);  }}>  Copy</Button>