Summary: | Implement async clipboard API | ||
---|---|---|---|
Product: | WebKit | Reporter: | Thomas Steiner <tomac> |
Component: | New Bugs | Assignee: | Nobody <webkit-unassigned> |
Status: | RESOLVED DUPLICATE | ||
Severity: | Normal | CC: | beidson, costan, david.malcom.graham, huangdarwin, me, rniwa, stephen, wenson_hsieh |
Priority: | P2 | ||
Version: | Safari Technology Preview | ||
Hardware: | Unspecified | ||
OS: | Unspecified |
Description
Thomas Steiner
2019-09-23 23:50:07 PDT
Are you respecting about the async clipboard API? or raw clipboard API? Or simply cut, copy, & paste? It's unclear which aspects of this new API is needed for what purpose. In the simplest shape, this is about programmatically copying and pasting text with the Async Clipboard API: ```js async function copyPageURL() { try { await navigator.clipboard.writeText(location.href); console.log('Page URL copied to clipboard'); } catch (err) { console.error('Failed to copy: ', err); } } async function getClipboardText() { try { const text = await navigator.clipboard.readText(); console.log('Clipboard contents: ', text); } catch (err) { console.error('Failed to read clipboard contents: ', err); } } ``` In the advanced form, this is about copying and pasting binary data, like PNG images: ```js try { const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png'; const data = await fetch(imgURL); const blob = await data.blob(); await navigator.clipboard.write([ new ClipboardItem(Object.defineProperty({}, blob.type, { value: blob, enumerable: true })) ]); console.log('Image copied.'); } catch(e) { console.error(e, e.message); } async function getClipboardContents() { try { const clipboardItems = await navigator.clipboard.read(); for (const clipboardItem of clipboardItems) { try { for (const type of clipboardItem.types) { const blob = await clipboardItem.getType(type); console.log(URL.createObjectURL(blob)); } } catch (e) { console.error(e, e.message); } } } catch (e) { console.error(e, e.message); } } ``` On Chrome, we re-encode images for security reasons and currently only support PNG images, but eventually want to broaden this to more image formats, and ultimately anything (but it's still in the farther away future). How about renaming the bug to "Implement the Async Clipboard API"? For the purpose of this bug, I recommend that we focus on the async imperative API for reading/writing text and images from/to the clipboard. This is an all-around better API than execCommand("copy" / "paste"). As far as I know, Chrome hasn't implemented change events yet, so we don't know if there are any subtleties hiding there. Raw Clipboard Access should be an entirely separate discussion :) +1. navigator.clipboard.{read,write,readText,writeText}() has more consensus and is specified / implemented in Blink and Gecko, so it may be good for that to be the focus of this bug. (Raw Clipboard is not yet specified, and I believe simple cut/copy/paste is mostly already supported in a similar manner across rendering engines.) We use `writeText` in the [github/clipboard-copy-element][1] custom element if it's available and fall back to a more complex `execCommand("copy")` flow if not. Supporting at least `writeText` would allow us to eventually remove the execCommand code. [1]: https://github.com/github/clipboard-copy-element/blob/e505506cefbf082e4491396b71809f95239562d7/src/clipboard.js#L14-L18 Pretty sure this is done and enabled as of https://bugs.webkit.org/show_bug.cgi?id=205322 *** This bug has been marked as a duplicate of bug 205322 *** This is great news! Thank you very much!! Great news indeed. Thanks from my side as well! FWIW, async clipboard API is now supported in the latest betas of iOS 13.4 and macOS Catalina 10.15.4. Please try them out. I can confirm that this works! 🎉 Thanks, team WebKit! Tried with https://googlechrome.github.io/samples/async-clipboard/ on an iOS device on iOS 13.4 beta 2 (build 17E5233g) and on Safari Tech Preview 100 on 10.15.3. |