Add Clipboard component for handling global on_paste event

[masenf]

Supersede #3078 to fix #3055

Creates a new rx.clipboard component with on_paste handler that will be called when pasting data into the page. If it has children components, then only those components will register the paste handler, otherwise, it gets registered at the top-level document (you can also pass targets prop as a list of ids).

The handler will be called with the data arg as list of tuples of (mime_type, data). If the data is text, it will be a regular string. If the data is associated with a different type, then it will be returned as a base64 encoded data uri. There may be multiple entries in the data list for example if the data is available in several formats (text/plain and text/html) or if several files have been pasted from the filesystem.

Sample code

import reflex as rx


class State(rx.State):
    image_uri: str = ""
    targets: list[str] = ["t4", "t3"]

    def on_paste_generic(self, data, source):
        for type, content in data:
            if type.startswith("image/"):
                self.image_uri = content
            yield rx.toast.info(f"Pasted {type} in {source}", description=content[:64])

    def on_paste(self, data):
        yield from self.on_paste_generic(data, "document")

    def on_paste_input(self, data):
        yield from self.on_paste_generic(data, "input")

    def on_paste_textarea(self, data):
        yield from self.on_paste_generic(data, "textarea")

    def handle_checked_change(self, target, checked):
        if checked:
            self.targets.append(target)
        else:
            try:
                self.targets.remove(target)
            except ValueError:
                pass


def togglable_input(id: str):
    return rx.hstack(
        rx.input(id=id),
        rx.checkbox(
            checked=State.targets.contains(id),
            on_change=State.handle_checked_change(id)
        ),
    )


def index() -> rx.Component:
    return rx.vstack(
        rx.clipboard(on_paste=State.on_paste),
        rx.clipboard(on_paste=State.on_paste_input.stop_propagation, targets=State.targets),
        rx.cond(State.image_uri, rx.image(src=State.image_uri), rx.text("No image")),
        rx.clipboard(rx.text_area(), on_paste=State.on_paste_textarea.prevent_default),
        rx.clipboard(rx.text_area(), on_paste=State.on_paste_textarea.stop_propagation),
        togglable_input("t1"),
        togglable_input("t2"),
        togglable_input("t3"),
        rx.text("Selected inputs: ", State.targets.to_string()),
    )


app = rx.App()
app.add_page(index)

[dentroai]

When using the new paste handler, how do I need to write the event handler so that if a file is pasted we only handle the file but do not paste in the file path as text into the input field / text area, but when we paste in pure text we display the text in the input field / text area?

When I use prevent_default the file path isn't displayed when I paste a file, but then I also can't paste in normal text.
If I don't use prevent_default, the file path is always pasted in along

[masenf]

@dentro-innovation so there's not currently a way to accomplish this, but the logic in the paste handler could be update to achieve what sounds like a pretty common workflow. Can you file a follow up bug for this?

In the meantime, you might be able to get fancy with a controlled input, i haven't checked if the on_paste gets called before on_change though.

[dentroai]

Not sure if I'm doing something wrong, but it seems to me as if I'm only able to paste in a single file.
When I select multiple files on my laptop, copy them and then paste them into the reflex app, only the first file is pasted.

When inspecting my event handler in debug mode, it seems like data is always an array of length 1, even though I pasted e.g. 3 files

async def on_paste(self, data):
        for type, content in data:

Is this something you are aware of?
Expected behavior would be that I can paste in as many files as I want.

[dentroai]

Also, could it be that it isn't possible to paste very big files?
I got a screenshot that's 2.8 MB.
I can upload it using the "normal" file upload functionality, but when I try to upload this big image, the on_paste handler isn't even triggered.

I do not use max_size of the file_upload component.

Here the screenshot for reference, inside a zip archive to make sure it doesn't get compressed when uploaded to github:

big_image.zip