New Component request, Markdown Rendering.

[Felttrip]

Hey team, In the Segment App there is an Markdown rendering component that is being used that made some styling assumption around Evergreen. With the Paste migration there are some areas now where markdown rendering doesn't look right. Specifically markdown lists like

- item 1
- item 2
- item 3

Get converted into html like

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Evergreen relied on using browser styles for the unordered list but with Paste the browser styles get stripped away and it looks not great.
Example below

It would be nice if there was a paste native component I could provide markdown to that would render the markdown in HTML that was styled following the paste standard.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• UnorderedList list-style css discrepancy compared to Evergreen (updated: 08/02/2023, similarity score: 88%)
• Paste equivalent of Evergreen super menu functionality required (updated: 06/28/2023, similarity score: 84%)
• Display formatted data (xml/json) (updated: 11/22/2022, similarity score: 84%)

[nkrantz]

Hey @Felttrip - thanks for this discussion. Sorry about the delayed reply over the long weekend. We'll have a response soon!

[nkrantz]

Talked to the team and because this is a pretty specific use case, it's not a component we're likely to add to the system, but we'd be happy to work with you to improve the flow. If you'd like to chat about this with the team, feel free to sign up for an Office Hours slot so we can review what's needed to make this work with Paste. Otherwise, you can provide more context in this discussion thread and we'll reply async!

[ceyerkes]

@Felttrip please feel free to add me to the office hours if you want!

[Felttrip]

Thanks for the update, office hours are outside of my working hours so we can keep it async, I'm thinking that updating this app component with some existing paste stuff will work out.

[krisantrobus]

Hi @Felttrip happy to continue this async. I started to try and debug this but I am unable to replicate it. I recreated a storybook using plain html and html wrapped in the evergreen theme provider and they both work fine. This does seem like an unusual bug that should not be happening.

Can you please share with me the package you are using for markdown rendering and share with me the exact string you are using for that first item. I'll need to try and replicate this.

Another thing you can test is, just as you've inspected the item and you see the HTML in the original post can you open it how you did before. Then select the ul element and you should see a list of associated styles. Can yo see if a list-style or list-style-type is set and be sure it isn't set to none.

Our themes do not change HTML elements themselves but inject a series of design tokens that are translated into HTML values. These are only for colors and pixel sizings. We do not manipulate global elements and definitely do no set global list styles, only apply them to our Paste components.

[Felttrip]

Heres the component in app
https://github.com/segmentio/app/blob/921700976175d22b0f4ff1ccf486fea5069bcb64/packages/app/client/components/Markdown.tsx#L41

I think it's less that Paste 100% is causing this issue and more that were still in the awkward half way migration between the two systems.

Don't worry about reproducing this exact scenario, this discussion was more for me to see if you all were interested in creating a markdown rendering paste component before I made one specifically for Segments App.

[krisantrobus]

Unfortunately I cannot access that repo and cannot replicate at this stage. I'm happy to pick up any debugging our side if you are having issue with the Paste Evergreen theme and allow read access to that repo.

As mentioned in previous comments a Markdown component is out of scope for one of our native components but can continue to work async to resolve this issue if you continue to face issues as your implementation continues.