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)

[dentro-innovation]

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.