Playground should support plain markdown

[axe312ger]

The playground component should support plain markdown as well.

Context

The Playground is getting more and more an amazing place to try out how a component behaves.

In real world, these components are often mixed with basic markdown elements like paragraphs, headings, lists, ...

This is especially relevant if you have components that wrap or layout content. Their childs are often plain MD.

Example

The following component divides the content into two columns, displaying two pieces of information next to each other, as long the viewport allows that.

<Playground>
  <Grid>
  <div>

![architecture](https://source.unsplash.com/800x600/weekly?architecture)

# Architecture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et harum quidem rerum facilis est et expedita distinctio. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Iam contemni non poteris. Apparet statim, quae sint officia, quae actiones.

  </div>
  <div>

![technology](https://source.unsplash.com/800x600/weekly?technology)

# Technology

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et harum quidem rerum facilis est et expedita distinctio. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Fortasse id optimum, sed ubi illud: Plus semper voluptatis?

  </div>
  </Grid>
</Playground>

Current output

Expected output

Suggested solution

I think the issue is here that the markdown is parsed before the input reaches the playground component.

Maybe we need to touch the markdown parser, otherwise we might just pass the whole input for the playground as comment to avoid transpilation?

Any ideas? I am not that much into the codebase of docz, yet.

[deammer]

In my opinion, the Playground component's sole duty should be to render React components as they are, without any extra parsing.

If you want your own components to parse markdown, I believe it's your responsibility to implement that, either from scratch or using a library like react-markdown.

[axe312ger]

If you want your own components to parse markdown

I don't want to do that, MDX is doing this already and its working great for the generation of the websites HTML/React

Using MDX just to display a <YouTube /> video is great, but in real world projects, components might be stacked into each other and mixed with regular content. Like I mentioned in my first post.

I want to give the users a way to try out their projects MDX components like in real world with content context, rendering the component alone is not enough.

Docz is using MDX, and I want to use it to document projects build with MDX. So shouldn't docz (or the playground) support rendering components in a MDX context?

[axe312ger]

What I am looking for is something like this:

https://mdxjs.com/playground

We could switch the playgrounds renderer to https://mdxjs.com/advanced/runtime which would allow all the old features + plain markdown

[axe312ger]

Whats @rakannimer opinion on this? He labelled this as v2 issue

[jesperorb]

It is a nice idea as it seems to touch another issue as well https://github.com/doczjs/docz/issues/1088 that we should be able to interleave jsx and markdown which I myself have felt a need for. So it should definitly be looked into. :+1:

But at the same time I have yet to feel the need to use markdown in the Playground because I feel the same as @deammer. The playground should render react-components. If I have a component that renders markdown, that's the components responsibility. But as you said, the use cases for mdx are expanding, obviously there is a need.

[axe312ger]

Ill do more research but I am pretty sure the markdown is stripped, my component just gets a string with all md formatting remove.

And why should my component handle rendering MDX when there is no need for this when rendering the component via MDX outside of docs?

It should not be necessary to change/bloat production ready code to make the documentation work.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.