[USERSNAP] Parse markdown in Posts, Applications, Profiles

[dmtrjsg]

Scope

Add markdown interpretation in all fields initially created with CK Editor (Description/ Forum posts etc)

• Interpret internal identifiers
• external links
• headings in text fields
• Line breaks

⚠️ We do not use markdown in Field form Entries (like titles etc..)

---

This should cover all text fields, but specifically:

• Proposal/ bounty discussion
• Forum post
• Widgets with text shown in them
• Application
• proposals descriptions
• proposal rationales
• wg roles applications
• election candidates
• bounty descriptions Bounty descriptions do not work correctly #3218
• work submitted
• Oracle rationale for judgement

Out of scope:

• Widgets with text shown in them

Context

---

Taken at: https://dao.joystream.org/#/working-groups/openings/operationsWorkingGroupAlpha-1
Fields:

• Houston, we have a problem.: Parse markdown in Posts, Applications, Profiles
• Give us some details: There are several places where user can input text but markdown links and headings are usually not interpreted.
• This is a downgrade from previous Pioneer.

Download original image

Browser: Chrome 99 (Linux)
Screen size: 1920x1080
Browser size: 2390x1216
Labels: enhancement
Open #159 in Usersnap

Powered by Usersnap.

[bit2world]

@talentdev0807

[singulart]

The component used at Joystream as WYSIWYG editor (CK Editor) has an open issue ckeditor/ckeditor5#2321 that is exactly about being able to paste md content to a text area and then seeing that text as html. I am not sure if Joystream Builders are in the position to fix any downstream components issues, such as the above. For now I am closing this issue as Won't Fix

[thesan]

@singulart @talentdev0807 I tried to clarify the description a bit, but this issue is not about parsing markdown in CK editor. It's about using <MarkdownPreview /> component to parse the markdown on the app, e.g here:

Download original image

We mentioned CK Editor because it's hard to know which fields are markdown vs plain text (they're all Strings in the QN schema), thus the fields that are initially created with CK Editor are those that should be parse in other places with <MarkdownPreview />

[bit2world]

When it comes to talk about , it is just for converting markdown to React JSX to display it on web page
so if the input of is wrong I mean it is not a Markdown format, we will get wrong result
The input of comes from CK Editor

[traumschule]

The input for existing posts should come from the QN / chain. My suggestion: If Markdown parser succeeds display that otherwise render with CK.

[thesan]

@talentdev0807 if I understand correctly you mean that the text (in the screenshot for example) gets rendered through <MarkdownPreview /> but ReactMarkdown fails to render it ? If it's the case could you post an example of the text which doesn't get parsed correctly please ? Maybe the text gets wrongly escaped somewhere.

In any case I don't think rendering CKE is a viable solution, it would be confusing and if the text is escaped somewhere else CKE wouldn't render it well either...

[oleksanderkorn]

Text which comes to MarkdownPreview is escaped with backslash. When i put normal markdown inside the MardkdownPreview component it works as exepected:

When I strip slashes using regexp it seems to be working as expected:

@thesan wdyt?

[polikosi]

⚠️ Proposal discussion:
strikethrough, block quote and bulleted list don't work correctly

Bounty discussion:

⚠️ Forum post:
strikethrough, block quote and bulleted list don't work correctly

Widgets with text shown in them:

🚫 Application:

⚠️ Proposals descriptions:
strikethrough, block quote and bulleted list don't work correctly

⚠️Proposal rationales:
strikethrough, block quote and bulleted list don't work correctly

🚫 WG roles applications:

⚠️Election candidates:
strikethrough, block quote and bulleted list don't work correctly

⚠️Bounty descriptions:
strikethrough, block quote and bulleted list don't work correctly

🚫Work submitted:

Oracle rationale for judgement:

[dmtrjsg]

⚠️ pls address all areas outside of Bounties module, since it is being deprecated very soon in the light of new version upgrade later.

[polikosi]

Proposal discussion:

Forum post:

⚠️Widgets with text shown in them:
Can you explain what you mean?
because I do not fully understand what it is and how to do it right

🚫Application:

proposals descriptions:

proposal rationales:

🚫wg roles applications:

election candidates:

[dmtrjsg]

@polikosi it certainly did make total sense at the time of writing it up and grooming, but cannot connect the dots now. Pls skip this point and I will mark this as a strike-through and out of scope. Thank you for asking!