Why is it so cumbersome to insert paragraphs in the Markdown component?

Ignition
1

It can't honestly be that difficult to reproduce the Markdown behavior that Reddit, GitHub and a bunch of other sites and applications use, can it? Two blank lines between blocks of text should start a new paragraph.

I know I can use escapeHtml or expression bindings but then honestly what's the point of using this component in the first place?

For my usecase, I have a generic "help" popup that's just a blob of text and which should show the user some information about some action, ideally nicely formatted in paragraphs. The contents of said help popup may or may not be editable by admins or power users and may or may not be stored in the database, so I'd rather keep escapeHtml enabled.

As it is, I seem to be fighting with this component a lot, even though I want to use it for what seems like its intended purpose.

2

try adding:
"whiteSpace": "pre"

to the style of the markdown component then format it in the text editor of source:
image

Edit this is also a nice resource if you want to use it:

2 Likes
3

Thank you. At least this put me on the right track. I figured out that it's actually just broken CSS. I want to say that it's caused by one of our own CSS overrides, but I doubt it. Adding this CSS rule restores the whitespace between paragraphs:

[data-component="ia.display.markdown"] p {
    &:not(:last-child)  {
        margin-bottom: 1em
    }
}
4

Does LESS (css extension) work nativly in perspective or did you have to install it? because this is not basic css syntax, and might confuse other forum readers who know less about css ^^

5

To be honest I just grabbed this from a StackOverflow question and changed the selector. So yes, it should work natively.

6

have you tested it? I guess maybe some react update makes it a standard now, but it seems odd

7
2 Likes
8

oh thats pretty new :smiley: Not supported everywhere yet though, but nice!