Added event handler for paste

[wassafshahzad]

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

• [] Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

Changes To Core Features:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your core changes, as applicable?
• Have you successfully ran tests with your changes locally?

After these steps, you're ready to open a pull request.

Description

Added event handler of on paste event

Linked Issue

Closes #3055

[Lendemor]

I'm confused at the definition of the event signature, shouldn't we expect to receive the pasted content in the function ?

Also can you provide a small example where this new trigger work ?

[wassafshahzad]

I'm confused at the definition of the event signature, shouldn't we expect to receive the pasted content in the function ?

Also can you provide a small example where this new trigger work ?

Sure Will do today

[wassafshahzad]

Example on how to use the on paste event

"""Welcome to Reflex! This file outlines the steps to create a basic app."""

from enum import Enum

from rxconfig import config

import reflex as rx

docs_url = "https://reflex.dev/docs/getting-started/introduction/"
filename = f"{config.app_name}/{config.app_name}.py"


class ButtonOption(Enum):

    PROFILE = "Profile"

    ACCOUNT = "Account"

    APPEARANCE = "Appearance"

    NOTIFICATIONS = "Notifications"

    DISPLAY = "Display"


class State(rx.State):

    clicked: ButtonOption = ButtonOption.ACCOUNT

    def set_clicked(self, option: str):

        self.clicked = option

    def get_clicked(self):

        return self.clicked

    def catch_pasted_data(self, data:any):
       print(data)

def index() -> rx.Component:
    return rx.center(
        rx.theme_panel(),
        rx.vstack(
            rx.heading("Welcome to Reflex!", size="9"),
            rx.input(on_paste= lambda c: State.catch_even(c)),
            rx.button(
                "Check out our docs!",
                on_click=lambda: rx.redirect(docs_url),
                size="4",
            ),
            rx.logo(),
            align="center",
            spacing="7",
            font_size="2em",
        ),
        height="100vh",
    )


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

[masenf]

So i was reading back through the original ticket and i think 2 requested items are missing in this implementation:

• the handler isn't "global", as in, the element in question has to be focused in order to receive the paste event
• the handler cannot receive images, which was one of the example use cases

I don't know if i have any recommendations from the top of my head for how to best handle these issues though. For global event handling, i think we would need to register an event handler on document, similar to the global hot key monitor example in the docs https://reflex.dev/docs/api-reference/browser-javascript/#using-react-hooks

As for handling other data types, i think this would need to be specified somewhere for the event handler to pick it up in the mapping var.

Maybe instead of adding on_paste as a common event trigger, it might make sense to have an Clipboard component that uses a hook to register the paste event handler on document and then it would have an on_paste trigger that could get data of the type specified as a component prop?

[wassafshahzad]

So i was reading back through the original ticket and i think 2 requested items are missing in this implementation:

• the handler isn't "global", as in, the element in question has to be focused in order to receive the paste event
• the handler cannot receive images, which was one of the example use cases

I don't know if i have any recommendations from the top of my head for how to best handle these issues though. For global event handling, i think we would need to register an event handler on document, similar to the global hot key monitor example in the docs https://reflex.dev/docs/api-reference/browser-javascript/#using-react-hooks

As for handling other data types, i think this would need to be specified somewhere for the event handler to pick it up in the mapping var.

Maybe instead of adding on_paste as a common event trigger, it might make sense to have an Clipboard component that uses a hook to register the paste event handler on document and then it would have an on_paste trigger that could get data of the type specified as a component prop?

OK I will try to implement that, are there any references which might be helpful ?

[dentro-innovation]

this feature would be highly appreciated!

[wassafshahzad]

Will wrap it up next week.