Remark-Breaks not behaving as intended

[ryandotelliott]

I'm using React-Markdown with the remark-breaks plugin. My goal is to allow content with multiple new lines to be interpreted as such - currently, regardless of the number of line breaks there exists only a single one. This causes unappealing formatting and is not the desired behavior.

<ReactMarkdown
  remarkPlugins={[remarkGfm, remarkBreaks]}
  rehypePlugins={[rehypeRaw]}  
  components={{
    a: ({ node, ...props }) => <a target="_blank" {...props} />,
    code: ({ inline, className, children }) => CodeBlock({ inline, className, children }),
  }}
>
  {post.content}
</ReactMarkdown>

With an input of

Hello,



world!

I expect an output of

<p>Hello</p>,
<br />
<br />
<br />
<p>world!</p>

However, I instead receive an output of

<p>Hello</p>
<p>world!</p>

I've tried with/without rehypeRaw as well as remarkBreaks, and get the same behavior regardless.

Could someone point me in the right direction to get the plugin working properly?

[wooorm]

I don’t know what you mean by multiple new lines not being interpreted as multiple new lines. Please provide that input, the current actual output, and the expected output.

[ryandotelliott]

Sorry about that, I've gone ahead and updated the original post to include all of these items.

[ChristianMurphy]

That's how GitHub flavored markdown (GFM) breaks work.
Try pasting your same input:

Hello,



world!

into GitHub itself:

---

Hello,

world!

---

and notice it produces two paragraphs, without three breaks.
It is behaving as intended

[ryandotelliott]

I see, however, I get the same beavior with GFM removed. I prefer the desired behavior over GFM, but it doesn't seem to matter. I do notice that GitHub has a margin on their elements, which could help replicate the desired behavior.

[wooorm]

a) This isn’t about GH, it’s about markdown. This is fundamentally how markdown works. Or even how JavaScript or HTML work: you can have a ton of blank lines and they don’t do anything. This is unrelated to GFM, remark-gfm, or remark-breaks
b) You are trying very complex things but CSS does this beautifully. You can use CSS to add visual whitespace around things, with margin for example as you mention.

[Royal-lobster]

https://codesandbox.io/s/newline-problem-rh98l5?file=/src/App.js Here is a reproduction for this issue. I believed Remark-Breaks should be able to solve this issue, but not.

[ChristianMurphy]

See https://github.com/orgs/remarkjs/discussions/1095#discussioncomment-4598996