How to create a Copy to Clipboard Button

[mariinkys]

Hi, I've been writing a little application using Leptos and right now I need to create a button that copies a variable to the clipboard. Reading the book I believe I would have to use web-sys but I've not been able to figure out how to do it. Here's my actual component:

#[component]
pub fn ImportGeneratedFlashcards(import_string: String) -> impl IntoView {
    view! {
        <PageTitleComponent text="Import your flashcards!"/>

        <div class="text-center m-auto p-2 max-w-7xl">
            <button
                class="btn btn-accent w-full"
                on:click=move |_| {
                    //Copy import_string to clipboard
                }
            >
                "Copy to Clipboard"
            </button>
        </div>

        <p class="mt-3">"DEBUG: "</p>
        <p>{import_string}</p>
    }
}

I guess I'm trying to execute something like navigator.clipboard.writeText(copyText); (JS).
Any help would be very appreciated!

[gbj]

Let me walk you through how I would figure this out, personally.

navigator.clipboard.writeText(copyText);

Whenever I am trying to use a JS interface from Rust, I start with the fact that every browser API/item is available -- usually, globals or getters are available as function calls.

1. Open web-sys docs on docs.rs
2. Search navigator: there's a Navigator struct, and a navigator method on Window, so we know that window().navigator() will return us the same thing as JS window.navigator, which is also available as navigator in JS
3. Search clipboard: there's a Clipboard struct and a Navigator::clipboard method, so I know that window().navigator().clipboard() will return us (clicks on link) an Option<Clipboard>
   b. At this point, we give thanks for Rust's very explicit type system. Our JS example above will throw an exception if the user's browser doesn't support navigator.clipboard, which you're unlikely to encounter during testing on your modern browser.
   c. So, decide what you want to do if there's no clipboard access: fail silently? show an error? Only show the button if we know there is a clipboard?
   d. Note two very crucial pieces of the docs here:

This API requires the following crate features to be activated: Clipboard, Navigator

This API is unstable and requires --cfg=web_sys_unstable_apis to be activated, as described in the wasm-bindgen guide

.write_text() is a method on Clipboard. It returns a Promise. If you need the result of that JS Promise in Rust-land, you can use wasm-bindgen-futures::JsFuture together with spawn_local to do that.

So, all in all, something like

if let Some(clipboard) = window().navigator().clipboard() {
  clipboard.write_text("foo bar baz");
} else {
  // handle the lack of clipboard!
}

making sure that you've enabled the Clipboard and Navigator features on your web-sys dependency, and are compiling with --cfg=web_sys_unstable_apis.

[mariinkys]

Oh wait, the code works it's just the IDE giving me the error... My bad.

Didn't think rust-analyzer would mark this as an error when there seems to be none.

[mariinkys]

Any way to remove the error or improve compile times would help too, but I will take a look at it tomorrow for myself too.

Thank you!

[gbj]

That cfg flag doesn't get passed to rust-analyzer when you're just adding it in the command line, so you need to add it in your rust-analyzer settings. (I'm not sure exactly how to do that and it may depend on your editor)

I'm not sure what you mean by the compiling time issue -- is it recompiling lots of dependencies on changes or something?

[mariinkys]

I was able to solve the issue being displayed adding this to my workspace settings in vs-code:

"rust-analyzer.cargo.extraEnv": {
        "RUSTFLAGS": "--cfg=web_sys_unstable_apis"
    }

The 'compilation time issue' seems to be that when running the project with RUSTFLAGS=--cfg=web_sys_unstable_apis cargo leptos watch editing anything (a tailwind class, the text inside a <p>...) causes every dependency to be recompiled which takes about two minutes to my poor machine, however I guess this also was a error on my end since executing the project with the same command adding the --hot-reload flag seems to solve the issue. I didn't know there was a difference between using/not using the flag since the project would 'hot reload' itself without the flag anyways.

Thanks again for your patience and help.

[pheki]

Also, even though it's not needed anymore for the clipboard, another option to enable unstable APIs is to add this to .cargo/config.toml:

[build]
rustflags = ["--cfg=web_sys_unstable_apis"]

[mbfm]

As of web-sys v0.3.70, the clipboard API is now stable: https://docs.rs/web-sys/0.3.70/web_sys/struct.Navigator.html#method.clipboard