Add sanitized markdown support for epoch statement

[sshmm]

Motivation and Context

resolves #1563

Description

1- Add sanitized markdown support for epoch statement. The markdown will be displayed in place of text on Blur
2- used @uiw/react-markdown-preview to support display markdown
3- used skipHtml={false} to skip html rendering

Test and Deployment Plan

1- Go to Contribution page write epoch statement with markdown. click outside the text area to display

Screenshots (if appropriate):

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
coordinape	✅ Ready (Inspect)	Visit Preview	Nov 8, 2022 at 7:45PM (UTC)

[levity]

@ivyquinzel did you get a chance to vet this UX for toggling between markdown and markdown preview?

[levity]

@sshmm i don't understand why you're running sanitize-html first, and then rendering that in a markdown preview. Isn't it already html?

Also, I think it would be better to store markdown in the db, not html. It's more usable in other contexts then.

[sshmm]

@sshmm i don't understand why you're running sanitize-html first, and then rendering that in a markdown preview. Isn't it already html?

To remove scripts and other unwanted malicious entries by the user

[levity]

I understand the purpose of sanitize-html. I was asking about how it interacts with markdown… I think I misunderstood its behavior. So it just takes markdown with html tags, and still returns markdown, but with sanitized html? I think it’s probably also fine to just remove the html tags entirely, using `allowedTags: []`

…

On Sun, Nov 6, 2022 at 7:08 PM sshmm ***@***.***> wrote: @sshmm <https://github.com/sshmm> i don't understand why you're running sanitize-html first, and then rendering that in a markdown preview. Isn't it already html? To remove scripts and other unwanted malicious entries by the user — Reply to this email directly, view it on GitHub <#1631 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABPJA5LTIICV6TCBJVGCALWG6GUFANCNFSM6AAAAAARYDUKJA> . You are receiving this because you commented.Message ID: ***@***.***>

[levity]

Actually, I see that the markdown preview component has a skipHtml option to ignore all html tags. This should be a simpler way of accomplishing the same thing.

Note that the option behaves in a confusing way

[sshmm]

Actually, I see that the markdown preview component has a skipHtml option to ignore all html tags. This should be a simpler way of accomplishing the same thing.

Note that the option behaves in a confusing way

when I tried skipHtml={false} it is working. but it is different from sanitizing. this one keep the html but doesn't render it. unlike sanitizie-html which remove them completly

this is the output of sanitize-html, without ignoring all html

I think I can use skipHtml in the front end and keep sanitize-html in the backend and use allowedTags: [] with it?
it was topocount idea to but in the back end too so that we only storing sanitized text

[levity]

i think it's fine to keep it as long as it gets sanitized when rendered -- it's a signal to everyone else, after all, that someone is attempting to be malicious or got hacked

…

On Sun, Nov 6, 2022 at 9:19 PM sshmm ***@***.***> wrote: Actually, I see that the markdown preview component has a skipHtml option to ignore all html tags. This should be a simpler way of accomplishing the same thing. Note that the option behaves in a confusing way <uiwjs/react-markdown-preview#205> when I tried skipHtml={false} it is working. but it is different from sanitizing. this one keep the html but doesn't render it. unlike sanitizie-html which remove them completly [image: image] <https://user-images.githubusercontent.com/34943689/200172792-a1aaa37c-4a40-4bb4-9cb3-057296aade94.png> I think I can use skipHtml in the front end and keep sanitize-html in the backend and use allowedTags: [] with it? it was topocount idea to but in the back end too so that we only storing sanitized text — Reply to this email directly, view it on GitHub <#1631 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABPJA5ZERTNRPFSC6F5KVDWG6V7DANCNFSM6AAAAAARYDUKJA> . You are receiving this because you commented.Message ID: ***@***.***>

[levity]

my initial feedback is:

• disable dark mode
• the preview needs some border & padding

and i think we should get a UX review from @ivyquinzel and/or @wingfeatherwave

[levity]

i have a feeling it will be better to allow the user to explicitly toggle between editing & previewing (perhaps like in Github) rather than doing it automatically on focus/blur

[sshmm]

i have a feeling it will be better to allow the user to explicitly toggle between editing & previewing (perhaps like in Github) rather than doing it automatically on focus/blur

I agree with you we should get insight from design team on how to proceed in this @ivyquinzel and @wingfeatherwave

[levity]

Looks good. Let's wait for approval of the design before merging.

[levity]

this shouldn't have been merged, because tests are failing

[levity]

fixed in 769849b