Replace Markdown component with HTML renderer

[hawkrives]

I found https://github.com/jsdf/react-native-htmlview/ today; I would like to replace our custom-ish Markdown component with a combination of a normal Markdown-to-HTML converter, which is then piped to react-native-htmlview to be rendered.

[drewvolz]

@hawkrives what do you mean "combination of a normal Markdown-to-HTML converter" -- meaning something that's not currently in the app?

[rye]

I can't speak for @hawkrives, but I imagine the idea is to have something JS-y that converts from Markdown to HTML, and then having something React-Native-y that renders HTML instead of Markdown. Technically, it's an additional step, but the two legs in this new approach seem like far more likely places to find well-maintained packages rather than one full markdown-to-native renderer, if that makes sense.

[hawkrives]

Yep

[drewvolz]

I'd think showdown might give us what we'd want.

[drewvolz]

Experimenting with showdown and react-native-htmlview.

I tweaked modules/markdown/markdown.js to look more like this:

import HTMLView from 'react-native-htmlview'
import showdown from 'showdown'

let {styles = {}, source} = this.props
var converter = new showdown.Converter()
converter.setFlavor('github')
var html = converter.makeHtml(source)

return <HTMLView value={html} stylesheet={styles} />

it doesn't look too bad. This is without any additional custom styles!

📸 Screenshots

~ | ~ --|-- | | |

[hawkrives]

I'd like to request marked (https://marked.js.org/#/README.md#README.md, https://github.com/markedjs/marked) as our Markdown parsing library.

Marked has more contributors and has had more development (and is faster), even though Showdown is a bit older. https://npm-stat.com/charts.html?package=marked&package=showdown&from=2015-09-20&to=2019-09-20

We should be able to do something like this to use marked:

import HTMLView from 'react-native-htmlview'
import marked from 'marked'

let {styles = {}, source} = this.props
let html = marked(source, {gfm: true})

return <HTMLView value={html} stylesheet={styles} />

[drewvolz]

Thanks @hawkrives. I've swapped out showdown for marked and progress has started on the better-markdown branch.