Add promise support to `ClipboardItem` object. This helps the web author to call async clipboard write method without having to provide the Blob data synchronously. Authors can choose to resolve the promise later when the Blob data is available.

Motivation

When async clipboard.write API is called, web developers would want to provide a promise to a Blob type instead of synchronously populating the Blob data while writing it to the clipboard. This helps in performance and gives the web authors the flexibility to call write method(satisfying the requirements of calling clipboard write API) without blocking on populating the Blob data that is part of the ClipboardItem.

Specification

Specification link


Final published standard: Recommendation, Living Standard, Candidate Recommendation, or similar final form

Status in Chromium

Blink>DataTransfer


In development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • In development
  • Shipped/Shipping
  • Positive

Owners

Comments

The ClipboardItem has a record of string that represents a MIME type and ClipboardItemData that represents Promises to Blobs corresponding to the MIME types. The current implementation of Clipboarditem’s constructor in Chromium takes Blobs and not Promises to Blobs which is not how it’s defined in the specification. ClipboardItem is only used in async clipboard API for reading/writing data to the clipboard. This API has been standardized and implemented in Chromium & Safari. This doesn’t affect existing sites that use DataTransfer items for copy/paste scenarios. e.g. Currently in Chromium, developers call the async write using the Blob type as shown below: const html_text = new Blob( ['<html><body><div>hello</div></body></html>'], {type: 'text/html'}); const clipboard_item = new ClipboardItem({ 'text/html': html_text }); navigator.clipboard.write([clipboard_item]); With the proposed implementation, they can pass promises to Blobs as shown below: navigator.clipboard.write([ new ClipboardItem({ "text/html": Promise.resolve(new Blob(['<p style=\'color: red; font-style: oblique;\'>This text was copied using </p>'], {type: 'text/html'})),}),]);

Last updated on 2021-11-30