Markdown Component Proposal

[chadfawcett]

Description

I am porting The Hub over to React and using Primer React. The majority of the content is stored as markdown and being rendered as html. I want to style this rendered content using the styles from markdown-body. My initial implementation was to selectively import the sass needed from primer-css in order to use the markdown-body class. This would help keep the bundle size down and reduce the amount of duplicate styling being included from both primer-react and primer-css. Unfortunately the primer-css files rely on some more generic files such as their base.scss as it builds on top of this. I don't want to have to manually import several different sass files, as the maintenance of this would not be easy.

Discussing with @colebemis we decided a component may be necessary to accomplish this with Primer React.

My initial thought would be to have a Markdown component that would style some html (passed as prop) the same way the markdown-body class does. Thinking about it now though, it seems a little odd to have a Markdown component and pass it html... Maybe it's just a naming oddity, as this is the same as markdown-body.

I don't think the actual conversion of Markdown to HTML (or even JSX) should be the responsibility of this component. This would be a visual component only.

Design

• [ ] Design is finalized. Link to mockups/prototypes:
• [ ] Design is being finalized by feature team. Link to any in progress mockups:
• [x] Assistance requested in finalizing design

Component API

Optional: If you have an idea of the intended component structure, please describe here. This can include what props will be available, if there will be any nested components or subcomponents, how this component might interact with other components, any behavior Hooks that will need to be built, etc.

Currently I dangerouslySetInnerHTML on a div element with the converted markdown. This would be fine, but as a bonus feature, this component could more gracefully (less dangerously) take in the rendered markdown.

Usage

Describe how the component should be used, and/or link to usage guidelines.

<Markdown dangerouslySetInnerHTML={{__html: '<h1>Title</h1><ul><li>one</li><li>two</li></ul>'}} />

{/* or */}

<Markdown content="<h1>Title</h1><ul><li>one</li><li>two</li></ul>" />

Implementation

Please describe how you would like this component to be built. Design systems is happy to help with the implementation of new components (as time/roadmap allows) but also recognizes that sometimes feature teams prefer to implement components themselves.

• [ ] Feature team would like to implement this component
• [x] Feature team would like the Design Systems team to implement this component
• [ ] This component is already built, feature team requests assistance moving it to Primer React Components from outside application
• [ ] Other: (please describe below)

Timeline

Please describe any deadlines or context around prioritization that would be helpful for us to use when building our roadmap.

I'm aiming to have The Hub ported over to React by end of H1. This isn't really a blocker, as not wanting to include both primer-css and primer-react is a bit of a pre-optimization. I can work around it, but something like this would be helpful.

What to expect next

A Design Systems engineer will read through your component proposal and get in touch! We'll gather any additional information needed and set up a Zoom call only if necessary. Once we have all relevant information, we'll add the component to our Primer React Components Roadmap. If you opt to build the component yourself, we are happy to help with pairing, brainstorming, etc. Generally, component work requested from internal feature teams receives higher priority over general (non-requested) improvements to the library.

[filipedeschamps]

Hi @chadfawcett I'm starting a project that's going to heavily depend on markdown and right now I'm in the exact position as when you created this issue. Actually, I didn't think of a workaround yet, and since it's been a while, do you mind sharing if you had any success resolving this?

Best regards 🤝

[chadfawcett]

@filipedeschamps sorry for the delayed response! I was on PTO.

I ended up just adding primer css as a dependency in addition to primer react. Definitely not as performant, but figured I would cross that bridge once it came to optimizing things.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[simurai]

🔗 Cross-link to https://github.com/github/mobile/issues/3342 where GitHub Mobile is also considering using Primer CSS for Markdown styling.