Shopify / ui-extensions

MIT License
260 stars 36 forks source link

Feature Request: Component that can render markdown #601

Open jduff opened 1 year ago

jduff commented 1 year ago

Please list the related package(s)

checkout-ui-extensions

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

When displaying a banner or information panel sometimes you want to allow the merchant to customize some aspects of the panel, but it is very difficult to pre-determine everything a merchant will want to show or change. Having the ability to pass markdown formatting from a setting and having a component that could render this would make it much easier.

Describe the changes you are looking for

A UI component that can be given and render markdown (bold, headings, italics, links, lists etc).

ncardeli commented 1 year ago

hey 👋 Rendering HTML is something we won't support. Mapping from Markdown to our component library, on the other hand, seems like something that could be implemented in userland. For React extensions, React Markdown could be used to map markdown to the component library components.

For example:

h1 could be mapped to <Heading level={1}> p could be mapped to <TextBlock>

jduff commented 1 year ago

Ya, using a markdown parser and mapping to the components given is doable. I expect this could be useful for many people though so thought it could make sense to have a core component for this instead of having everyone implement it themselves.

BrandoCommando commented 2 months ago

It appears the Checkout Blocks app, which is now owned by Shopify, has this capability. It would be quite nice to have this simply copied over to the default TextBlock component.