Render Dropdown entries using Markdown

[Bengt]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.

I have an application where the canonical way to write the species name follows this pattern:

**<common_name>** &middot; ***<scientific_name>***

While I can input the · as a Unicode (·) character, setting the common name in bold and the scientific name in bold italics does not work.

Describe the solution you'd like

I would like to be able to render markdown to the entries of a Gradio's Dropdown element.

Additional context

There is a similar situation in Gradio's Dataframe element, where the users can set the datatype to "Markdown" to have the values of a column be rendered to HTML vial Markdown. Maybe a similar flag could be introduced to the Dropdown element, like so:

The solution that I have in mind looks like this from a user's perspective:

Dropdown(
    [...]
    value='**White stork** · ***Ciconia ciconia***',
    choices=[
        '**European Blackbird** · ***Turdus merula***',
    ],
    datatype='markdown',   # Datatype of values in the choices and value fields. Possible values are "markdown" and "text". Defaults to "text".
    [...]
)

[abidlabs]

This is out of scope of the gr.Dropdown component I believe but it may make sense as a custom component -- we're currently working on making that possible. I'll label the issue accordingly.

[pngwn]

It is also virtually impossible to do this with the select element that we use for the drop-down. Would require a rewrite.

Custom component makes sense, but it would be a pretty huge effort to do properly.

[missionfloyd]

The dropdown doesn't use select anymore. Now it's a ul, which can contain HTML.

• Bold
• Italic
• 

<ul>
  <li><b>Bold</b></li>
  <li><i>Italic</i></li>
  <li><img src="https://avatars.githubusercontent.com/u/12937446?s=80&u=aa4cf3d486fbe6875f2ac727ae5863764aab59ae&v=4"></li>
</ul>

[pngwn]

Ah, my mistake. There are plans to change that implementation, at least to some degree. @dawoodkhan82 @hannahblair

[abidlabs]

Hey! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.

[abidlabs]

I'll go ahead and close this issue since we are not planning to include this in the core Gradio library. But happy to help if you are interested in making this a custom Gradio component (feel free to ask questions in this issue).