Clipboard on Safari/iOS help request

[miketwenty1]

Summary

Following up with a discussion here to get more visibility.
May be related to: emilk/egui#3480 ?

I'm trying to get clipboard working with Safari browsers / iOS. Any help would be greatly appreciated.

let _task = spawn_local(async move {
    let window = web_sys::window().expect("window");
    let nav = window.navigator().clipboard();
    match nav {
        Some(a) => {
            let p = a.write_text("this text copies to clipboard on android and desktop but not Safari/iOS");
            let result = wasm_bindgen_futures::JsFuture::from(p).await;
            match result {
                Ok(_) => info!("copy worked"),
                Err(e) => info!("copy fail {:?}", e),
            }
        }
        None => {
            warn!("failed to clippy the clipboard clip clip");
        }
    };
});

The error is JsValue(NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

The same error happens on both safari/macbook and safari/iOS.

[daxpedda]

Reading the documentation on MDN or Caniuse, it seems that calling Clipboard.writeText requires some level of transient activation (it specifically says pointerdown or pointerup, but I assume any transient activation should do?).

[daxpedda]

It's a bit involved:

#[wasm_bindgen]
extern "C" {
    type ClipboardItem;

    #[wasm_bindgen(constructor)]
    fn new(data: &Object) -> ClipboardItem;
}

let clipboard = web_sys::window().unwrap().navigator().clipboard().unwrap();
let item_data = Object::new();
let item_value = Blob::new_with_blob_sequence_and_options(
    &Array::of1(&"clipboard test".into()),
    BlobPropertyBag::new().type_("text/plain"),
)
.unwrap();
Reflect::set(&item_data, &"text/plain".into(), &item_value).unwrap();
let item = ClipboardItem::new(&item_data);
let promise = clipboard.write(&Array::of1(&item));

That worked in Chrome.

The spec actually doesn't require a Blob, a string should have worked as well, but that's a limitation in Chrome apparently. If this doesn't work for you on Safari, it's probably best if you play around with it in JS first before trying to translate it into Rust web-sys.

FWIW Whis is the equivalent in JS:

const item_value = new Blob(['clipboard test'], { type: 'text/plain' })
const item_data = { 'text/plain': item_value }
const item = new ClipboardItem(item_data)
const promise = navigator.clipboard.write([item])

[miketwenty1]

This now works on safari desktop! Essentially if the first method fails, I'll try a second clipboard method, so it doesn't mess up any prior functionality.

But this still doesn't work on iOS. I may have missed it before but I looked at the javascript console debugger for iOS.

The thing we setup before shows up every time I press the screen while the game is loaded.

window.addEventListener('pointerdown', async () => {
	console.info('`pointerdown` event')
	await navigator.clipboard.writeText('clipboard test')
})

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.

Are there ideas of working around this last hurdle?

[daxpedda]

Could you try using the Clipboard.write() in pointerdown instead?
Are we also on a secure context on iOS as well?

[miketwenty1]

I've tried write() and it ends up with the original error: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

I've given up on iOS with a traditional in bevy approach.
I'm now attempting to just use wasm bindgen within bevy to manipulate the dom:

<p id="textToCopy">default text</p>
<button id="copyButton" onclick="copyToClipboard()">Copy text</button>

I ideally want to trigger an event and set text of the <p> like a document.getElementById("textToCopy").innerText = "Some String from bevy"; to a given string and then do a document.getElementById("copyButton").style.display = "block";
and then after another event do a document.getElementById("copyButton").style.display = "hidden";

Still trying to crunch through the wasm bindgen code for it. Open to receiving more #[wasm_bindgen] magic.

[daxpedda]

This should be pretty straight-forward with HtmlElement::style() and CssStyleDeclaration::set_property(), no custom bindings necessary.

Let me know if you still have any issues.
Honestly would have been nice to figure out all the iOS stuff as well.