Clipboard code not working (in Safari) when used in promise

[jonasdekeukelaere]

The security measures kick in when we are trying to use the Clipboard API in an async context: Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

See https://wolfgangrittner.dev/how-to-use-clipboard-api-in-safari/ and https://wolfgangrittner.dev/how-to-use-clipboard-api-in-firefox/

The last link has a working solution:

if(typeof ClipboardItem && navigator.clipboard.write) {
  // NOTE: Safari locks down the clipboard API to only work when triggered
  //   by a direct user interaction. You can't use it async in a promise.
  //   But! You can wrap the promise in a ClipboardItem, and give that to
  //   the clipboard API.
  //   Found this on https://developer.apple.com/forums/thread/691873
  const text = new ClipboardItem({
	"text/plain": fetch(someUrl)
	  .then(response => response.text())
	  .then(text => new Blob([text], { type: "text/plain" }))
  })
  navigator.clipboard.write([text])
}
else {
  // NOTE: Firefox has support for ClipboardItem and navigator.clipboard.write,
  //   but those are behind `dom.events.asyncClipboard.clipboardItem` preference.
  //   Good news is that other than Safari, Firefox does not care about
  //   Clipboard API being used async in a Promise.
  fetch(someUrl)
	.then(response => response.text())
	.then(text => navigator.clipboard.writeText(text))
}