LBRYCommunity/lbry-desktop

Fork 0

Markdown render #1179

New issue

Closed

opened 2018-03-26 03:20:24 +02:00 by btzr-io · 9 comments

btzr-io commented

2018-03-26 03:20:24 +02:00

(Migrated from github.com)

ℹ️ 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

Go to a claim page.
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

> ## :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 commented

2018-04-17 16:29:36 +02:00

(Migrated from github.com)

@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 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 commented

2018-04-17 19:37:53 +02:00

(Migrated from github.com)

Also some features like headings are disabled

> Also some features like headings are disabled

👍 1

tzarebczan commented

2018-04-17 19:41:29 +02:00

(Migrated from github.com)

Thanks, totally missed that!

ghost commented

2018-04-19 15:27:52 +02:00

(Migrated from github.com)

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

When publishing however, it shows up like this:

Tables are shown correctly in the preview of the edit page: ![capture1](https://user-images.githubusercontent.com/34570404/38994114-c49ec6ea-43e5-11e8-8762-4224eaa8a1e3.PNG) When publishing however, it shows up like this: ![capture2](https://user-images.githubusercontent.com/34570404/38994120-c8ac9e06-43e5-11e8-859a-e43f23a33c90.PNG)

👍 1

btzr-io commented

2018-04-19 22:07:05 +02:00

(Migrated from github.com)

@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 😕

@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](https://github.com/showdownjs/showdown/wiki/Markdown%27s-XSS-Vulnerability-(and-how-to-mitigate-it)) It's possible to enable specific tags (elements), but I'm not sure what we really want to include :confused:

kauffj commented

2018-04-19 22:47:02 +02:00

(Migrated from github.com)

@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.

👍 1

tzarebczan commented

2018-05-04 17:42:01 +02:00

(Migrated from github.com)

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

👍 1

btzr-io commented

2018-05-05 00:44:05 +02:00

(Migrated from github.com)

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

👍 1

tzarebczan commented