Equivalent to Blueprint's RunningText

[nmain]

A <RunningText> component would apply typography styles to basic html elements in it, so something like this:

<RunningText>
  <h2>Foo</h2>
</RunningText>

Would behave like this:

<Typography variant="h2">Foo</Typography>

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Within a <RunningText> all of the styles normally applied by <Typography> would be applied to the corresponding plain html elements.

Current Behavior 😯

If you want to render markdown in Material-UI, you have to use something like https://github.com/remarkjs/remark-react and its remarkReactComponents to make transformations like <h2> => <Typography variant="h2">. If you want to render arbitrary rich text from something like ProseMirror, you have to use something like https://github.com/remarkablemark/html-react-parser/ and its replace functionality to do the same. If you want to render rich text from a contenteditable with WYSIWYG, you're out of luck because there's no way to use <Typography> in the editing control of things like ProseMirror.

Examples 🌈

Blueprint.js is React component library unrelated to Material Design. It has a feature like this, documented here as "RUNNING_TEXT": https://blueprintjs.com/docs/#core/components/html

Context 🔦

I listed some specific use cases in Current Behavior, but basically any situation where you want to render basic document content that might be dynamically generated and where using lots of <Typography> elements would be difficult.

Benchmark

• https://elastic.github.io/eui/#/display/text
• https://bulma.io/documentation/elements/content/

[oliviertassinari]

@nmain We don't have such a component. For the markdown problem. You have two options:

1. markdown-to-jsx: You specify to a parser the React component to use for each type of element. You have a demo here: https://github.com/mui/material-ui/blob/2f6a982aa74ffa46680798089ad20ed67ed0c5ae/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js#L1-L35 This demo https://mui.com/material-ui/getting-started/templates/blog/ uses that strategy.
2. markdown-to-html: You use a traditional html generator, then style the output. You have a demo here: https://github.com/mui/material-ui/blob/2f6a982aa74ffa46680798089ad20ed67ed0c5ae/docs/src/modules/components/MarkdownElement.js#L1-L309 The documentation https://mui.com/ uses this strategy

n°1 has the advantage of being fully idiomatic with React. The drawback is that it's x5 slower than n°2.

[nmain]

So what I'm proposing is a component that implements style rules similar to line 105 here:

https://github.com/mui/material-ui/blob/2f6a982aa74ffa46680798089ad20ed67ed0c5ae/docs/src/modules/components/MarkdownElement.js#L105-277

be added to MaterialUI.

[oliviertassinari]

A similar concept component for benchmark: https://elastic.github.io/eui/#/display/text.

[olivercoad]

I'm also looking for something like this. Bulma's content an another similar thing.

Is there any reason not to just copy MarkdownElement pretty much as-is and rename it to RunningText? I guess remove the renderedMarkdown prop, and it might be nice to have add a prop that works like the reverse of variantMapping to map semantic elements to variants.

Would you accept a PR for something like this?