markdown-it / markdown-it

Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed
https://markdown-it.github.io
MIT License
18.26k stars 1.71k forks source link

NFR: React Render #141

Closed aleemb closed 9 years ago

aleemb commented 9 years ago

I have been playing with Markdown It for quite some time following on from the deprecated Remarkable lib. I want to plug this in with React and found that there is a Remarkable-React module on NPM but on closer inspection it turned out to be fairly pointless as it just renders via the default renderer and returns the HTML as a string.

I came across only one good implementation of a Markdown React renderer out there @ https://github.com/rexxars/commonmark-react-renderer/blob/master/src/commonmark-react-renderer.js

Given the momentum of React, I think having a React renderer would be a killer feature. Unlike the wrappers that exist, a proper React renderer would have considerable benefits.

The obvious one is usefulness inside React apps. More importantly, it can leverage the React virtualdom diff'ing to render only changed sub-trees instead of re-rendering everything (for example http://rexxars.github.io/react-markdown/).

This makes live previews very performant when you have embeds in your markdown that should not be re-rendered on every keystroke. Prior to react the only way to accomplish this would have been to use a DOM diff'ing library. If Markdown-it can add this feature, it could fairly easily become the defacto React lib.

EDIT: An example is if you have a YouTube embed in the preview pane then on each keystroke the YouTube iframe will get re-renderer making previews quite very jerky and slow. The demo link above for example doesn't suffer from the same.

Hope adding a React renderer can be considered. Thanks for the wonderful lib!

puzrin commented 9 years ago

Sorry, that's not related to core and should be done in separate project.