feature: support Hightlight component

[TaiJuWu]

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.

• New feature (non-breaking change which adds functionality)

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.

a. Give a descriptive title to your PR.

support Highlight component.
b. Describe your changes.
support Highlight component and you have to notice styles and style is different prop. Highlight uses styles.

c. Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes (if such).

close #1048

[Alek99]

This code doesn't seem to be working for me can you provide an example?

[TaiJuWu]

This code doesn't seem to be working for me can you provide an example?

It's working fo me.
Is this example working for you?

import pynecone as pc

class State(pc.State):
    """The app state."""

    text: str = "With the Highlight component, you can spotlight, emphasize and accentuate words."
    query=['spotlight', 'emphasize', 'Accentuate']
    styles={ 'px': '2', 'py': '1', 'rounded': 'full', 'bg': 'teal.100' }
    
    
def index():
    """The main view."""
    return pc.heading(
        pc.highlight(State.text, query=State.query, styles=State.styles)
    )
    
app = pc.App(state=State)
app.add_page(index)
app.compile()

[Lendemor]

I think the Highlight component should provide a default styles in case the user didn't provide it.

[TaiJuWu]

I think the Highlight component should provide a default styles in case the user didn't provide it.

In chakra highlight does not have default value.
But I absolutely agree with you so I give a default value.

[Alek99]

For this component should we take the stye props and pass them into the style dict similar to how it's done in code block. This would allow code like

class State(pc.State):
    """The app state."""

    text: str = "With the Highlight component, you can spotlight, emphasize and accentuate words."
    query=['spotlight', 'emphasize', 'Accentuate']
    styles={ 'px': '2', 'py': '1', 'rounded': 'full', 'bg': 'teal.100' }
    
    def add_query(self, query: str):
        """Add a query to the list of queries."""
        self.query.append(query)
    
def index():
    """The main view."""
    
    return pc.vstack(
        pc.input(on_blur=State.add_query),
        pc.heading(
            pc.highlight(
                State.text, 
                query=State.query, 
                bg = "green",
                color = "red",
                px = "2",
                py = "1",
                rounded = "full",

            )
        ),
    )

https://github.com/pynecone-io/pynecone/blob/e9ca1fd03b7d1c3caade682bd9f1f2dca10f268a/pynecone/components/datadisplay/code.py#L52-L75

[TaiJuWu]

For this component should we take the stye props and pass them into the style dict similar to how it's done in code block. This would allow code like

class State(pc.State):
    """The app state."""

    text: str = "With the Highlight component, you can spotlight, emphasize and accentuate words."
    query=['spotlight', 'emphasize', 'Accentuate']
    styles={ 'px': '2', 'py': '1', 'rounded': 'full', 'bg': 'teal.100' }
    
    def add_query(self, query: str):
        """Add a query to the list of queries."""
        self.query.append(query)
    
def index():
    """The main view."""
    
    return pc.vstack(
        pc.input(on_blur=State.add_query),
        pc.heading(
            pc.highlight(
                State.text, 
                query=State.query, 
                bg = "green",
                color = "red",
                px = "2",
                py = "1",
                rounded = "full",

            )
        ),
    )

It's working right now.

[picklelo]

nice!