{"id":3305,"date":"2020-03-20T21:24:13","date_gmt":"2020-03-20T19:24:13","guid":{"rendered":"https:\/\/blog.tomayac.com\/2020\/03\/20\/multi-mime-type-copying-with-the-async-clipboard-api\/"},"modified":"2020-03-20T21:24:13","modified_gmt":"2020-03-20T19:24:13","slug":"multi-mime-type-copying-with-the-async-clipboard-api","status":"publish","type":"post","link":"https:\/\/tomayac.com\/wordpress\/2020\/03\/20\/multi-mime-type-copying-with-the-async-clipboard-api\/","title":{"rendered":"Multi-MIME Type Copying with the Async Clipboard API"},"content":{"rendered":"\n\t\t\t

Copying an Image \u2693<\/a><\/h2>\n

The Asynchronous Clipboard API<\/a>\nprovides direct access to read and write clipboard data.\nApart from text<\/em>, since Chrome\u00a076, you can also copy and paste image<\/em> data with the API.\nFor more details on this, check out my\narticle on web.dev<\/a>.\nHere's the gist of how copying an image blob works:<\/p>\n

const<\/span> copy<\/span> =<\/span> async<\/span> (<\/span>blob<\/span>)<\/span> =><\/span> {<\/span>
  try<\/span> {<\/span>
    await<\/span> navigator.<\/span>clipboard.<\/span>write<\/span>(<\/span>[<\/span>
      new<\/span> ClipboardItem<\/span>(<\/span>{<\/span>
        [<\/span>blob.<\/span>type]<\/span>:<\/span> blob,<\/span>
      }<\/span>)<\/span>,<\/span>
    ]<\/span>)<\/span>;<\/span>
  }<\/span> catch<\/span> (<\/span>err)<\/span> {<\/span>
    console.<\/span>error<\/span>(<\/span>err.<\/span>name,<\/span> err.<\/span>message)<\/span>;<\/span>
  }<\/span>
}<\/span>;<\/span><\/code><\/pre>\n
Note that you need to pass an array of ClipboardItem<\/code>s to the navigator.clipboard.write()<\/code> method,\nwhich implies that you can place more than one item on the clipboard\n(but this is not yet implemented in Chrome as of March\u00a02020).<\/p>\n
Pasting an Image \u2693<\/a><\/h2>\n
The generic code for pasting an image, that is, for reading from the clipboard,\nis a little more involved.\nAlso be advised that reading from the clipboard triggers a\npermission prompt<\/a>\nbefore the read operation can succeed.\nHere's the trimmed down\nexample from my article<\/a>:<\/p>\n
const<\/span> paste<\/span> =<\/span> async<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
  try<\/span> {<\/span>
    const<\/span> clipboardItems =<\/span> await<\/span> navigator.<\/span>clipboard.<\/span>read<\/span>(<\/span>)<\/span>;<\/span>
    for<\/span> (<\/span>const<\/span> clipboardItem of<\/span> clipboardItems)<\/span> {<\/span>
      for<\/span> (<\/span>const<\/span> type of<\/span> clipboardItem.<\/span>types)<\/span> {<\/span>
        return<\/span> await<\/span> clipboardItem.<\/span>getType<\/span>(<\/span>type)<\/span>;<\/span>
      }<\/span>
    }<\/span>
  }<\/span> catch<\/span> (<\/span>err)<\/span> {<\/span>
    console.<\/span>error<\/span>(<\/span>err.<\/span>name,<\/span> err.<\/span>message)<\/span>;<\/span>
  }<\/span>
}<\/span><\/code><\/pre>\n
See how I first iterate over all clipboardItems<\/code>\n(reminder, there can be just one in the current implementation),\nbut then also iterate over all clipboardItem.types<\/code> of each individual clipboardItem<\/code>,\nonly to then just stop at the first type<\/code> and return whatever blob I encounter there.\nSo far I haven't really payed much attention to what this enables,\nbut yesterday, I had a sudden epiphany \ud83e\udd2f.<\/p>\n
Content Negotiation \u2693<\/a><\/h2>\n
Before I get into the details of multi-MIME type copying,\nlet me quickly derail to\nserver-driven content negotiation<\/a>, quoting straight from MDN:<\/p>\n
\n
In server-driven content negotiation, or proactive content negotiation, the browser\n(or any other kind of user-agent) sends several HTTP headers along with the URL.\nThese headers describe the preferred choice of the user.\nThe server uses them as hints and an internal algorithm chooses the best content\nto serve to the client.<\/p>\n<\/blockquote>\n
\"Server-driven<\/p>\n
Multi-MIME Type Copying \u2693<\/a><\/h2>\n
A similar content negotiation mechanism takes place with copying.\nYou have probably encountered this effect before\nwhen you have copied rich text, like formatted HTML, into a plain text field:\nthe rich text is automatically converted to plain text.\n(\ud83d\udca1 Pro tip: to force pasting into a rich text context without<\/em> formatting,\nuse Ctrl<\/kbd> + Shift<\/kbd> + v<\/kbd> on Windows,\nor Cmd<\/kbd> + Shift<\/kbd> + v<\/kbd> on macOS.)<\/p>\n
So back to content negotiation with image copying.\nIf you copy an SVG image, then open macOS\nPreview<\/a>,\nand finally click "File"\u00a0>\u00a0"New from Clipboard",\nyou would probably expect an image<\/em> to be pasted.\nHowever, if you copy an SVG image and paste it into\nVisual Studio Code<\/a>\nor into SVGOMG<\/a>'s "Paste markup" field,\nyou would probably expect the source code<\/em> to be pasted.<\/p>\n
With multi-MIME type copying, you can achieve exactly that \ud83c\udf89.\nBelow is the code of a future-proof copy<\/code> function and some helper methods\nwith the following functionality:<\/p>\n
I have to admit, I only used to think of the clipboard as a one-item stack,\nso any new item replaces the existing one.\nHowever, for example, Microsoft Office\u00a0365's clipboard on Windows\u00a010 supports\nup to 24\u00a0clipboard items<\/a>.<\/p>\n