Wasm - TextEdit: No copy/paste possible

[leon-link-l]

The demo on https://slint-ui.com/releases/1.0.0/demos/gallery/ fails to work with the copy/paste/select-all commands on MacOS (Command+C/V/A, Right-Click), for example when using the multi line text input field.

When using Ctrl instead of Command: Ctrl+A works (of course, as the demo only seems to support the 'traditional' keyboard shortcuts), but Ctrl+C/V do not work, as the operating system will not create a copy of the text / paste it.

Copying or pasting text with right click also does not work - the only "copy" option is "copy image" (Brave Browser).

I yet have to figure out if these issues are also present when using an input field in a native MacOS app - I just started with Slint. Is this issue already known? If desired, I can provide further information for native behavior on my Mac.

(Environment: MacOS 13.3.1, tested with latest builds of Safari and Brave(1.50.114))

[leon-link-l]

Small update: After building the 7guis crud example (gallery example fails without Qt), I can confirm that Command+C/V work on MacOS native builds.

[tronical]

You're right, the wasm builds don't support copy & paste currently. This could be implemented using the Clipboard API.

[tronical]

It might even make sense to contribute this upstream to https://github.com/alacritty/copypasta

[Mehrbod2002]

@tronical First, I just wondered , when I add ClipboardEvent JS event listener to the Gallery example , it seems, it adds but won't call . Tried in Rust and Inspect console too :( .

Other thing is just happening is , when we Copy/Paste on Wasm apps , the codes panic on KeyEvent . I tracked it up and realized it goes to gain Current window Event loop which is RunningEventLoop , but as it smees always None on Clipboard , it goes to create new event loop which is NonRunningEvent and it throws error :

winit doesn't support to create multi event loop.

As there is no event loop in thread local storage and scoped_tls.

I can't compare it with other options , because there is only Clipboard element behave with storage.

[tronical]

I wonder if access to the clipboard is not working because your browser does think it's loading the page in a secure context. What browser are you using?

[Mehrbod2002]

I wonder if access to the clipboard is not working because your browser does think it's loading the page in a secure context. What browser are you using?

It is Firefox . You mean , if we add Event in Js with Wasm it should work ?

[tronical]

According to https://caniuse.com/clipboard Firefox doesn’t support paste() :(

[Mehrbod2002]

According to https://caniuse.com/clipboard Firefox doesn’t support paste() :(

Like Copy . But KeyEvent executes on Copy and Paste and it gets selected text correctly. But when it's going to set to Clipboard, it panics , because event loop missed from local storage and the multi event doesn't support in winit

[Mehrbod2002]

@tronical i would like to work on this issue . if is there revelant opinion can you tell , will make me happy .

[ogoffart]

I think we might have a problem to have generic "copy" and "paste" working with the current architecture as this might not map well in the copypasta API. So I don't know if we should add support in copypasta or in slint. PRobably in slint.

For paste, we may need to intercept the specific Clipboard event, as the browser won't allow to access the clipboard if the event didn't originate from the user. So one may add a "paste" event with addEventListener or something like that. (https://developer.mozilla.org/en-US/docs/Web/API/Document/paste_event) wasm_input_helper.rs might be the right file to add that.

[Mehrbod2002]

@ogoffart Nope . it won't work . tried before . as the event add in inspect element but won't work .

[Mehrbod2002]

as I added ClipboardEvent on listener , but there is not any log or execution from these listener . but when i press ctrl+v or ctrl+c , keyevent executes , as i logged before it gain a selected text correctly , but when it wants to gain current event loop and attach to Clipboard , it panics on event_loop.rs . can't create new even loop and can't gain currently even loop target

[ogoffart]

Right, you can't create a new event loop. But you should be able to get the current event loop target That's what this function does: https://github.com/slint-ui/slint/blob/bb67122a50a3cc9c369e83d80613e5e351291128/internal/backends/winit/wasm_input_helper.rs#L170 It access the GLOBAL_PROXY

[Mehrbod2002]

        let win = window_adapter.clone();
        h.add_event_listener("copy", move |e: web_sys::ClipboardEvent| {
            // if let Some(window_adapter) = win.upgrade() {
                log::info!("COPS");
                console::log_2(&"COPY:  ".into(), &JsValue::from_str(format!("{:?}",e).as_str()));
            // }
        });

        let win = window_adapter.clone();
        h.add_event_listener("paste", move |e: web_sys::ClipboardEvent| {
            // if let Some(window_adapter) = win.upgrade() {
                log::info!("Pate");
                console::log_2(&"Paste:  ".into(), &JsValue::from_str(format!("{:?}",e).as_str()));
            // }
        });

I used this part of code . but there is not log . as i can see event added to input in my browser .

[ogoffart]

h.add_event_listener add the event to the <input> but the paste event is n the document. Maybe that's why.

[Mehrbod2002]

h.add_event_listener add the event to the <input> but the paste event is n the document. Maybe that's why.

What about Copy? It should be on document ?

[Mehrbod2002]

@ogoffart I added to document . still not working . when I see htm tag on my browser there are twice copy and paste listener on it . then when I press ctrl+c on texts , console shows me an error which it panics.

 backend.set_clipboard_text(&text[anchor..cursor], clipboard);

It executes and correctly get text but when it want to set in clipboard it creates new event .

[RGAA-Software]

I've compiled the gallery example for wasm, but still can't use Ctrl + C / Ctrl +V to copy / paste text, how to use or config it ?

[tronical]

I think you may need to set RUSTFLAGS to --cfg=web_sys_unstable_apis for that to work. The corresponding APIs in web-sys are not enabled by default yet (and the feature doesn't work in Safari).

[RGAA-Software]

@tronical Thank you very much, I've tested and it is worked now.