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.

[eblack-leaf]

from web.dev

I am stuck at iOS copy/paste but am not sure how to formulate the above info to a working example,
but it seems the user-activation could possibly be the reason for not having it read.

[eblack-leaf]

Well it does indeed work in the jsFiddle example on the device, but Rust approach does not work. I can only think the user activation is blocked on webkit for programmatic approaches, whereas the javascript example has a visible button for valid interaction.

[daxpedda]

No it works on a canvas as well: https://jsfiddle.net/d36sngzo
Tried it on both an iPad and an iPhone.
It should work on every element as long as its not directly the Window I assume.
Also tried it in Rust and it works there as well.

If you are still having issues let me know and I'm happy to look at some code.

[eblack-leaf]

I am using it here clipboard.rs lines 124 - 166 and 208 - 216. I would love the feature but I may be not the best web-sys-ian. Thanks for checking it out if you have the time.

[daxpedda]

So I just took your code and without any modification at all it just worked.
If I click the button I get the text "testing-testing-456" into my clipboard.

I assume what doesn't work is the write() function?
I can see that you are going through creating a temporary button and use the HTMLElement.click() function on it, that obviously won't work because you need transient activation.

I see that you are using Winit. If you call the write() function inside the WindowEvent::MouseInput event, then call Clipboard.write() it should work.

I will whip up a small example.

[daxpedda]

I believe the first click always fails because the canvas is not in focus yet, its probably an added protection to transient activation.
This obviously doesn't happen in a real application, because the very first thing you do is not writing to the clipboard!

Tried this on Desktop, Android (Firefox), iPad and iPhone, all works!

Cargo.toml

[package]
name = "test"
version = "0.0.0"
edition = "2021"
publish = false

[dependencies]
softbuffer = "0.4"
wasm-bindgen-futures = "0.4"
web-sys = { version = "0.3", features = [
    "Blob",
    "BlobPropertyBag",
    "console",
    "Clipboard",
    "ClipboardItem",
    "CssStyleDeclaration",
    "HtmlElement",
    "Navigator",
    "Window",
] }
winit = "0.30"

main.rs

use js_sys::{wasm_bindgen, Array, Object, Reflect};
use softbuffer::{NoDisplayHandle, NoWindowHandle, Surface, SurfaceExtWeb};
use wasm_bindgen::{prelude::wasm_bindgen, JsValue};
use wasm_bindgen_futures::JsFuture;
use web_sys::{console, js_sys, Blob, BlobPropertyBag, Clipboard};
use winit::application::ApplicationHandler;
use winit::error::EventLoopError;
use winit::event::{ElementState, MouseButton, StartCause, Touch, TouchPhase, WindowEvent};
use winit::event_loop::{ActiveEventLoop, EventLoop};
use winit::platform::web::{WindowAttributesExtWebSys, WindowExtWebSys};
use winit::window::{Window, WindowId};

fn main() -> Result<(), EventLoopError> {
    EventLoop::new().unwrap().run_app(&mut App::Inactive)
}

enum App {
    Inactive,
    Active {
        _window: Window,
        surface: Surface<NoDisplayHandle, NoWindowHandle>,
    },
}

impl ApplicationHandler for App {
    fn new_events(&mut self, event_loop: &ActiveEventLoop, cause: StartCause) {
        if let StartCause::Init = cause {
            let window = event_loop
                .create_window(Window::default_attributes().with_append(true))
                .unwrap();

            let canvas = window.canvas().unwrap();
            let style = canvas.style();
            style.set_property("width", "100%").unwrap();
            style.set_property("height", "100%").unwrap();

            let surface = Surface::from_canvas(canvas).unwrap();

            *self = Self::Active {
                _window: window,
                surface,
            };
        }
    }

    fn resumed(&mut self, _: &ActiveEventLoop) {}

    fn window_event(&mut self, _: &ActiveEventLoop, _: WindowId, event: WindowEvent) {
        let App::Active { surface, .. } = self else {
            unreachable!()
        };

        match event {
            WindowEvent::MouseInput {
                state: ElementState::Released,
                button: MouseButton::Left,
                ..
            }
            | WindowEvent::Touch(Touch {
                phase: TouchPhase::Ended,
                ..
            }) => {
                thread_local! {
                    static CLIPBOARD: Clipboard = web_sys::window().unwrap().navigator().clipboard().unwrap();
                    static DATA: Array = {
                        let blob = Blob::new_with_blob_sequence_and_options(
                            &Array::of1(&"test clipboard".into()),
                            BlobPropertyBag::new().type_("text/plain"),
                        )
                        .unwrap();
                        let record = Object::new();
                        Reflect::set(&record, &"text/plain".into(), &blob).unwrap();
                        let item = ClipboardItemExt::new(&record);

                        Array::of1(&item)
                    };
                }

                let promise = CLIPBOARD.with(|clipboard| DATA.with(|data| clipboard.write(data)));

                wasm_bindgen_futures::spawn_local(async move {
                    if let Err(error) = JsFuture::from(promise).await {
                        console::error_2(&"writing to clipboard failed: ".into(), &error);
                    }
                });
            }
            WindowEvent::Resized(size) => surface
                .resize(
                    size.width.try_into().unwrap(),
                    size.height.try_into().unwrap(),
                )
                .unwrap(),
            WindowEvent::RedrawRequested => {
                let mut buffer = surface.buffer_mut().unwrap();
                buffer.fill(0x00ff0000);
                buffer.present().unwrap();
            }
            _ => (),
        }
    }
}

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

    #[wasm_bindgen(constructor, js_class = ClipboardItem)]
    fn new(data: &JsValue) -> ClipboardItemExt;
}