web clipboard handling

.cargo/config.toml

@@ -0,0 +1,13 @@
+[alias]
+run-wasm = ["run", "--release", "--package", "run-wasm", "--"]
+
+# Credits to https://github.com/emilk/egui
+
+# clipboard api is still unstable, so web-sys requires the below flag to be passed for copy (ctrl + c) to work
+# https://rustwasm.github.io/docs/wasm-bindgen/web-sys/unstable-apis.html
+# check status at https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
+#[build]
+#target = "wasm32-unknown-unknown"
+
+[target.wasm32-unknown-unknown]
+rustflags = ["--cfg=web_sys_unstable_apis"]

Cargo.toml

@@ -22,7 +22,10 @@ default_fonts = ["egui/default_fonts"]
 serde = ["egui/serde"]
 
 [dependencies]
-bevy = { version = "0.10", default-features = false, features = ["bevy_render", "bevy_asset"] }
+bevy = { version = "0.10", default-features = false, features = [
+    "bevy_render",
+    "bevy_asset",
+] }
 egui = { version = "0.21.0", default-features = false, features = ["bytemuck"] }
 webbrowser = { version = "0.8.2", optional = true }
 
@@ -39,3 +42,23 @@ bevy = { version = "0.10", default-features = false, features = [
     "bevy_pbr",
     "bevy_core_pipeline",
 ] }
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+winit = "0.28"
+web-sys = { version = "*", features = [
+    "Clipboard",
+    "ClipboardEvent",
+    "DataTransfer",
+    'Document',
+    'EventTarget',
+    "Window",
+    "Navigator",
+] }
+js-sys = "*"
+wasm-bindgen = "0.2.84"
+wasm-bindgen-futures = "*"
+console_log = "*"
+log = "0.4"
+
+[workspace]
+members = ["run-wasm"]

examples/ui.rs

@@ -25,7 +25,13 @@ fn main() {
         .insert_resource(ClearColor(Color::rgb(0.0, 0.0, 0.0)))
         .insert_resource(Msaa::Sample4)
         .init_resource::<UiState>()
-        .add_plugins(DefaultPlugins)
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                prevent_default_event_handling: false,
+                ..default()
+            }),
+            ..default()
+        }))
         .add_plugin(EguiPlugin)
         .add_startup_system(configure_visuals_system)
         .add_startup_system(configure_ui_state_system)

run-wasm/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "run-wasm"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+cargo-run-wasm = "0.2.0"

run-wasm/src/main.rs

@@ -0,0 +1,3 @@
+fn main() {
+    cargo_run_wasm::run_wasm_with_css("body { margin: 0px; }");
+}

src/lib.rs

@@ -58,6 +58,10 @@ pub mod systems;
 /// Egui render node.
 pub mod egui_node;
 
+/// Clipboard management for web
+#[cfg(all(feature = "manage_clipboard", target_arch = "wasm32"))]
+pub mod web_clipboard;
+
 pub use egui;
 
 use crate::{
@@ -147,7 +151,7 @@ pub struct EguiClipboard {
     #[cfg(not(target_arch = "wasm32"))]
     clipboard: ThreadLocal<Option<RefCell<Clipboard>>>,
     #[cfg(target_arch = "wasm32")]
-    clipboard: String,
+    clipboard: web_clipboard::WebClipboardPaste,
 }
 
 #[cfg(feature = "manage_clipboard")]
@@ -159,12 +163,20 @@ impl EguiClipboard {
 
     /// Gets clipboard contents. Returns [`None`] if clipboard provider is unavailable or returns an error.
     #[must_use]
+    #[cfg(not(target_arch = "wasm32"))]
     pub fn get_contents(&self) -> Option<String> {
         self.get_contents_impl()
     }
 
+    /// Gets clipboard contents. Returns [`None`] if clipboard provider is unavailable or returns an error.
+    #[must_use]
+    #[cfg(target_arch = "wasm32")]
+    pub fn get_contents(&mut self) -> Option<String> {
+        self.get_contents_impl()
+    }
+
     #[cfg(not(target_arch = "wasm32"))]
-    fn set_contents_impl(&self, contents: &str) {
+    fn set_contents_impl(&mut self, contents: &str) {
         if let Some(mut clipboard) = self.get() {
             if let Err(err) = clipboard.set_text(contents.to_owned()) {
                 log::error!("Failed to set clipboard contents: {:?}", err);
@@ -173,8 +185,8 @@ impl EguiClipboard {
     }
 
     #[cfg(target_arch = "wasm32")]
-    fn set_contents_impl(&mut self, contents: &str) {
-        self.clipboard = contents.to_owned();
+    fn set_contents_impl(&self, contents: &str) {
+        web_clipboard::clipboard_copy(contents.to_owned());
     }
 
     #[cfg(not(target_arch = "wasm32"))]
@@ -190,8 +202,8 @@ impl EguiClipboard {
 
     #[cfg(target_arch = "wasm32")]
     #[allow(clippy::unnecessary_wraps)]
-    fn get_contents_impl(&self) -> Option<String> {
-        Some(self.clipboard.clone())
+    fn get_contents_impl(&mut self) -> Option<String> {
+        self.clipboard.try_read_clipboard_event()
     }
 
     #[cfg(not(target_arch = "wasm32"))]
@@ -533,6 +545,8 @@ impl Plugin for EguiPlugin {
         world.init_resource::<EguiUserTextures>();
         world.init_resource::<EguiMousePosition>();
 
+        #[cfg(all(feature = "manage_clipboard", target_arch = "wasm32"))]
+        app.add_startup_system(web_clipboard::startup);
         app.add_startup_systems(
             (
                 setup_new_windows_system,

src/systems.rs

@@ -53,7 +53,9 @@ impl<'w, 's> InputEvents<'w, 's> {
 #[allow(missing_docs)]
 #[derive(SystemParam)]
 pub struct InputResources<'w, 's> {
-    #[cfg(feature = "manage_clipboard")]
+    #[cfg(all(feature = "manage_clipboard", target_arch = "wasm32"))]
+    pub egui_clipboard: ResMut<'w, crate::EguiClipboard>,
+    #[cfg(all(feature = "manage_clipboard", not(target_arch = "wasm32")))]
     pub egui_clipboard: Res<'w, crate::EguiClipboard>,
     pub keyboard_input: Res<'w, Input<KeyCode>>,
     #[system_param(ignore)]
@@ -72,7 +74,7 @@ pub struct ContextSystemParams<'w, 's> {
 /// Processes Bevy input and feeds it to Egui.
 pub fn process_input_system(
     mut input_events: InputEvents,
-    input_resources: InputResources,
+    mut input_resources: InputResources,
     mut context_params: ContextSystemParams,
     egui_settings: Res<EguiSettings>,
     mut egui_mouse_position: ResMut<EguiMousePosition>,
@@ -250,20 +252,29 @@ pub fn process_input_system(
                 // We also check that it's an `ButtonState::Pressed` event, as we don't want to
                 // copy, cut or paste on the key release.
                 #[cfg(feature = "manage_clipboard")]
-                if command && pressed {
-                    match key {
-                        egui::Key::C => {
-                            focused_input.events.push(egui::Event::Copy);
-                        }
-                        egui::Key::X => {
-                            focused_input.events.push(egui::Event::Cut);
-                        }
-                        egui::Key::V => {
-                            if let Some(contents) = input_resources.egui_clipboard.get_contents() {
-                                focused_input.events.push(egui::Event::Text(contents))
+                {
+                    if command && pressed {
+                        match key {
+                            egui::Key::C => {
+                                focused_input.events.push(egui::Event::Copy);
+                            }
+                            egui::Key::X => {
+                                focused_input.events.push(egui::Event::Cut);
                             }
+                            egui::Key::V => {
+                                #[cfg(not(target_arch = "wasm32"))]
+                                if let Some(contents) =
+                                    input_resources.egui_clipboard.get_contents()
+                                {
+                                    focused_input.events.push(egui::Event::Text(contents))
+                                }
+                            }
+                            _ => {}
                         }
-                        _ => {}
+                    }
+                    #[cfg(target_arch = "wasm32")]
+                    if let Some(contents) = input_resources.egui_clipboard.get_contents() {
+                        focused_input.events.push(egui::Event::Text(contents));
                     }
                 }
             }

src/web_clipboard.rs

@@ -0,0 +1,106 @@
+use std::sync::{
+    mpsc::{self, Receiver, Sender},
+    Arc, Mutex,
+};
+
+use bevy::prelude::*;
+use wasm_bindgen_futures::spawn_local;
+
+use crate::EguiClipboard;
+
+/// startup system for bevy to initialize clipboard.
+pub fn startup(mut clipboard_channel: ResMut<EguiClipboard>) {
+    setup_clipboard_paste(&mut clipboard_channel.clipboard)
+}
+
+fn setup_clipboard_paste(clipboard_channel: &mut WebClipboardPaste) {
+    let (tx, rx): (Sender<String>, Receiver<String>) = mpsc::channel();
+
+    use wasm_bindgen::closure::Closure;
+    use wasm_bindgen::prelude::*;
+
+    let closure = Closure::<dyn FnMut(_)>::new(move |event: web_sys::ClipboardEvent| {
+        // TODO: maybe we should check if current canvas is selected ? not sure it's possible,
+        // but reacting to event at the document level will lead to problems if multiple games are on the same page.
+        match event
+            .clipboard_data()
+            .expect("could not get clipboard data.")
+            .get_data("text/plain")
+        {
+            Ok(data) => {
+                tx.send(data);
+            }
+            _ => {
+                info!("Not implemented.");
+            }
+        }
+        info!("{:?}", event.clipboard_data())
+    });
+
+    // TODO: a lot of unwraps ; it's using documents because paste event set on a canvas do not trigger (also tested on firefox in vanilla javascript)
+    web_sys::window()
+        .unwrap()
+        .document()
+        .unwrap()
+        .add_event_listener_with_callback("paste", closure.as_ref().unchecked_ref())
+        .expect("Could not edd paste event listener.");
+    closure.forget();
+    *clipboard_channel = WebClipboardPaste {
+        rx: Some(Arc::new(Mutex::new(rx))),
+    };
+
+    info!("setup_clipboard_paste OK");
+}
+
+/// To get data from web paste events
+#[derive(Default)]
+pub struct WebClipboardPaste {
+    rx: Option<Arc<Mutex<Receiver<String>>>>,
+}
+
+impl WebClipboardPaste {
+    /// Only returns Some if user explicitly triggered a paste event.
+    /// We are not querying the clipboard data without user input here (it would require permissions).
+    pub fn try_read_clipboard_event(&mut self) -> Option<String> {
+        match &mut self.rx {
+            Some(rx) => {
+                let Ok(unlock) = rx.try_lock() else {
+                    info!("fail lock");
+                    return None;
+                };
+                if let Ok(clipboard_string) = unlock.try_recv() {
+                    info!("received: {}", clipboard_string);
+                    return Some(clipboard_string);
+                }
+                None
+            }
+            None => {
+                info!("no arc");
+                None
+            }
+        }
+    }
+}
+
+/// Puts argument string to the web clipboard
+pub fn clipboard_copy(text: String) {
+    spawn_local(async move {
+        let window = web_sys::window().expect("window"); // { obj: val };
+
+        let nav = window.navigator();
+
+        let clipboard = nav.clipboard();
+        match clipboard {
+            Some(a) => {
+                let p = a.write_text(&text);
+                let _result = wasm_bindgen_futures::JsFuture::from(p)
+                    .await
+                    .expect("clipboard populated");
+                info!("copy to clipboard worked");
+            }
+            None => {
+                warn!("failed to write clipboard data");
+            }
+        };
+    });
+}