Copy & paste Async Clipboard API interop issue

40 views
Skip to first unread message

Thomas Steiner

unread,
May 17, 2021, 5:25:14 PM5/17/21
to compa...@googlegroups.com
Hi all,

Wanted to share a frustrating interop issue with copy & paste in the Async Clipboard API between Safari and Chrome. This is actual code:

```js
copyButton.addEventListener('click', async () => {
  try {
    // Safari treats user activation differently:
    // https://bugs.webkit.org/show_bug.cgi?id=222262.
    navigator.clipboard.write([
      new ClipboardItem({
        'text/plain': new Promise(async (resolve) => {
          const svg = svgOutput.innerHTML;
          resolve(new Blob([svg], { type: 'text/plain' }));
        }),
      }),
    ]);
  } catch {
    // Chromium
    const svg = svgOutput.innerHTML;    
    const blob = new Blob([svg], { type: 'text/plain' });
    navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
  }
});
```

Luckily Chrome is working on adding support for the Safari way (https://crbug.com/1014310), and I have asked Safari for adding support for the Chrome way (https://bugs.webkit.org/show_bug.cgi?id=222262#c5). At the moment, it's really frustrating that `try … catch` is the only way to make this work cross-browser.

Cheers,
Tom

Reply all
Reply to author
Forward
0 new messages