copy to clipboard in wasm app

[shnewto]

👋 Hello! I really love this crate, it's provided such an easy path to some of the things I'm working on in a small bevy app I've been working on lately! At the moment I've been working on adding some text to the system clipboard when a button is clicked and when I run the app with cargo run it does just that! But in the wasm version, nothing's making it to the clipboard when the button's clicked 🤔

It seems like I'm able to reproduce in the bevy_egui_web_showcase app too.

bevy_equi_showcase.mp4

Thanks for taking a look if you're able!

[shnewto]

If it's helpful, I'm on macOS Monterey 12.4, and I've tested in Chrome, Safari, and Firefox and see the same behavior in each.

[vladbat00]

Hi! Yeah, it's a known issue. It was a limitation on the winit's end, but just about two weeks ago they merged a PR that's supposed to fix it: rust-windowing/winit#2365
So thanks for creating the issue, I wouldn't check their progress otherwise :)

I imagine that the new winit version including those changes isn't released yet, and we'll also have to wait some time until it gets into Bevy itself.

[frewsxcv]

This should get picked up in bevy if bevyengine/bevy#5953 merges

[frewsxcv]

...or bevyengine/bevy#5347 or bevyengine/bevy#6086

[vladbat00]

I believe it's something that we can't do yet. While winit does expose the API to disable the prevent_default behaviour, there's no way to do that via Bevy yet. I guess it's something that should be exposed via bevy_winit::window::WindowDescriptor.

[johanhelsing]

Will be in Bevy 0.10: bevyengine/bevy#7304

[johanhelsing]

I also have a branch with the fix for bevy 0.9.1 if anyone wants to try it out with without depending on main https://github.com/johanhelsing/bevy/tree/optional_prevent_default

[johanhelsing]

Heads up that it will cause issues with Enter being treated as E key, though: rust-windowing/winit#2673

[Vrixyz]

Is it correct there's no (known) blockers to this issue now ?

I guess we have to implement clipboard management through web-sys, as :

• arboard will probably not support wasm: Browser Support? 1Password/arboard#99
• I didn't see any issue in bevy discussing handling clipboard
• (I think it's not winit's goal to offer clipboard management)

eframe, which does not suffer from winit's copypaste problem in egui repository, uses web-sys unstable apis : https://github.com/emilk/egui/blob/9c9a54ce36a39885a21688991e459743127934cf/crates/eframe/src/web/events.rs#L171

We could also consider a bridge to js, similar to https://github.com/gamma-delta/quad-wasmnastics/blob/main/src/clipboard.rs ; but that sounds a bit tedious to set up (multiple languages involved)

[jakkos-net]

eframe, which does not suffer from winit's copypaste problem in egui repository, uses web-sys unstable apis : https://github.com/emilk/egui/blob/9c9a54ce36a39885a21688991e459743127934cf/crates/eframe/src/web/events.rs#L171

Is there a reason this wouldn't work here?

[Vrixyz]

I think it could work, but I have to admit the exact data flow is not clear in my mind:

Copy

✅ I think eframe implementation for paste (setting clipboard data) can be integrated within bevy_egui, a minimalist proof of concept can be seen there: From my PR: #178 ;

Paste

🔴 My first naïve implementation was through clipboard.read(), but it requires permission (because we could abuse this and read clipboard whenever we'd want, definitely the wrong API to use)

🚧 eframe implementation for reading clipboard seems a bit more difficult to setup, and uses an event from JS:

• Paste in rust code, retrieved from eframe's appRunner: AppRunner: eframe specific event listener call
• web-sys event listener call

From wasm-bindgen examples, it seems I need the canvas object to setup my callback:

• canvas retrieval to then setup the event listener

Looks like we can retrieve canvas either by using a selector expose by bevy ; I'd be more comfortable by retrieving directly from winit though.

[miketwenty1]

@Vrixyz is there any simple bevy example/code that uses clipboard that's a bit universal? I'm struggling to get clipboard working on iOS devices.

[Vrixyz]

@miketwenty1 I didn't look into it, but it looks like it can/(will?) be supported by arboard (what bevy_egui uses for non-wasm) 1Password/arboard#103

[ConnorBP]

Bevy 0.12 is out now and this still isn't fixed. What is going on? What is blocking it now?

[spectria-limina]

I think the problem was misdiagnosed.

The winit preventDefault behaviour was preventing standard shortcuts like Ctrl+C, Ctrl+V from being handled by the browser to allow clipboard events to occur.

But that is entirely different from programmatic control over the clipboard, which requires using the wasm-bindgen API. The current implementation of clipboard for bevy_egui on wasm, however, is entirely local and not hooked up to these APIs. It's not immediately clear that there's a dependency issue, although it may require some rearchitecture to handle the asynchronous nature of the clipboard API in wasm.

[vladbat00]

Clipboard is now supported in WASM, thanks everyone