Lbry-desktop: Markdown render

[btzr-io]

:information_source: Update:

• Some issues aren't related to the markdown component but it's mostly css
• Tables aren't shown correctly on publish and need a custom style. https://github.com/lbryio/lbry-app/issues/1179#issuecomment-382734956

The Issue

Markdown render is missing appropriate css styles, for blockquotes, links, code...
Also some features like headings are disabled but still available in the editor.

Steps to reproduce

1. Go to a claim page.
2. See description.

Expected behaviour

Display markdown correctly.

Actual behaviour

Description appears like plain text.

Notes

There are some issues with the markdown component, see: https://github.com/lbryio/lbry-app/pull/1023#issuecomment-367543526

[tzarebczan]

@btzr-io do you know if this is the same issue as headings not showing up correctly (i.e. # Heading 1)?

See lbry://filecontrols#d2d8e154e4db21c25dc9a9b0e75a3533a59b98f1

"stream": { "metadata": { "author": "", "description": "<h1> test heading html</h1>\n\n# heading 1 md\n## heading 2 md\n## heading 3 md\n\n", "language": "en", "license": "None", "licenseUrl": "", "nsfw": false, "preview": "", "thumbnail": "", "title": "test markdown / html", "version": "_0_1_0"

[btzr-io]

Also some features like headings are disabled

[tzarebczan]

Thanks, totally missed that!

[m160]

Tables are shown correctly in the preview of the edit page:

When publishing however, it shows up like this:

[btzr-io]

@tzarebczan Tables, headings and almost anything that is converted into
an html tag / element is intentionally blocked from preview-render.

Probably to prevent: Markdown's XSS Vulnerability

It's possible to enable specific tags (elements),
but I'm not sure what we really want to include :confused:

[kauffj]

@btzr-io @tzarebczan I'd say allow h3 and smaller and tables. Solution to XSS is orthogonal to this, as long as any elements are included that type of attack is possible.

[tzarebczan]

@btzr-io have you checked out https://github.com/mdx-js/mdx ? @seanyesmunt recently brought it up.

[btzr-io]

@tzarebczan @seanyesmunt This looks more easy to integrate: https://github.com/mapbox/remark-react

[tzarebczan]

Fixed in https://github.com/lbryio/lbry-app/pull/1441