Highlight - allow using different components for highlighted text other than Mark

[timtucker-dte]

Currently Highlight is based on Mark for highlighted text.

There are examples of using a different component than Text for the wrapper, but no way to use different components for the highlighted text.

Some of the use cases that it could also be useful for:

• Adding links to blocks of text
• Popovers with definitions for technical terms

What I'm thinking of would be something like this:

<Highlight
    highlight={
        [
            {
                text: "mantine",
                props: {
                    href: "https://mantine.dev"
                }
            },
            {
                text: "github",
                props: {
                    href: "https://github.com"
                }
            }
        ]
    }
    highlightComponent="a"
>
    You can learn about Mantine on Github
</Highlight>

And then have that produce output that looks like:

You can learn about Mantine on GitHub

Or allow for defining components on a per item basis:

<Highlight
    highlight={
        [
            {
                text: "mantine",
                component: "a",
                props: {
                    href: "https://mantine.dev"
                }
            },
            {
                text: "github",
                component: "b"
            }
        ]
    }
>
    You can learn about Mantine on Github
</Highlight>

You can learn about Mantine on GitHub