How to copy html and plain text to clipboard in javascript?

Question

I try to copy a HTML and plain text set to clipboard, so that each editor can choose if he wants to paste text/html or text/plain.

I am using navigator.clipboard.write() (the async clipboard api).

Answer 1

The trick is quite simple, you can pass multiple blobs to one ClipboardItem:

const blob = new Blob([
    '<a href="https://stackoverflow.com/">goto stack</a>'
], { type: "text/html" });
const blobPlain = new Blob(['goto stack'], { type: "text/plain" });

navigator.clipboard.write([
    new ClipboardItem({
        [blob.type]: blob,
        [blobPlain.type]: blobPlain
    },),
])

Be aware this will not work in every browser (right now).