React-markdown: Allow multiple new lines in markdown

[sinnbeck]

Is there a way to allow multiple newlines in markdown?
I am running data from draftjs to markdown, which then later can be converted to html when needed. But if people add multiple new lines, these are always removed.

[Dozalex]

Hi @rexxars , could you answer on this question, please?
Why '\n\n\n\n' doesn't replaced by <br /><br /><br /><br />?
Maybe some property 'allowMultipleBreak'?

[bithavoc]

Yeah, even the demo page is broken and doesn't let use more than one empty line https://rexxars.github.io/react-markdown/

[mcknight89]

Have any of you worked around this yet? I have the same issue and need a quick solution?

[azirbel]

Not sure this will work for converting draftjs to markdown, but the setting that works for me is passing options to ReactMarkdown. Enabling the commonmark option allows you to add backslashes to create extra line breaks.

<ReactMarkdown parserOptions={{ commonmark: true }} source={source} />

With source set to:

Paragraph 1
\
\
Paragraph 2

[JulesPatry]

To get multiple line breaks after another, I found that adding a &nbsp after the \n solved this. This is the magic line value.replace(/\n/gi, '\n  ')

const value = `hello
\n
\n
world
`

const source =  value.replace(/\n/gi, '\n  ');
...
<ReactMarkdown
      source={source}
      className="reactMarkDown"
    />

Cheers.

[davidcalhoun]

@azirbel Didn't work for me unfortunately.

@JulesPatry That works, it's ugly though. Seems that I've been doing nbsp hacks for over ten years now...

Would much prefer some option to preserve new lines, like the preserveNewlines option in this Draft.js markdown plugin: https://github.com/Rosey/markdown-draft-js

[carlitosz]

@azirbel worked for me! Thanks!

[shinyuy]

To get spaces between paragraphs, I tried many things but this is what worked for me, give a className to react markdown component like so , className paragraph and in your stylesheet, pick the paragraph className and style it p tags like so .paragraph p { margin-bottom: 20px; } and this gets you spaces between your paragraphs. Just so it is clear, my react markdown component with the class name is stripped out of my answer.

[wooorm]

This is a feature of markdown. Multiple EOLs turn into multiple paragraphs.