How to avoid multiple line breaks into lists with white-space: pre-line?

[dryabinin94]

I have an issue with multiple line breaking symbols in lists. For example I have a text with multiple line breaks like this:

 const shortText = '1. First item.\n\n2. Second Item';

Also I have class in css to support line breaks into text (because I need to break the lines into text inside each list item):

.test {
   white-space: pre-line
}

This is the code which I have:

export default function App() {
  const shortText = '1. First item.\n\n2. Second Item';

  return <ReactMarkdown className="test">{shortText}</ReactMarkdown>;
}

As a result I got:

I expect: (+ line break between them)

The question is - How to support multiple line breaks into lists and don't break down the marker margins?

Code example: https://stackblitz-starters-z3af3x.stackblitz.io

[wooorm]

That’s exactly what white-space: pre-line does. Don’t use white-space: pre-line if you don’t want white-space: pre-line

[dryabinin94]

As for https://github.com/remarkjs/remark-breaks. it didn't help. I have the same issue.

[dryabinin94]

All I want is ReactMarkdown should properly handle such cases which I explained. For me it is like a bug.

[dryabinin94]

The particular question is: Why do you add \n before list item if it is not in input text. Input - const short = '1. Ut enim ad minim veniam \n\n2. Test item'

[dryabinin94]

Also I checked the same situation with another Markdown library - https://www.npmjs.com/package/markdown-to-jsx
And it works good.

[wooorm]

It is no clear for me what do you mean. Do you want me to use markdown syntax in my answers or you tell me about my issue?

I mean: use markdown to actually put paragraphs and lists into list items instead. We follow markdown. We work the same as here on GitHub. Or as https://spec.commonmark.org/dingus/.

it didn't help. I have the same issue.

What did you try? Please provide more info.

Why do you add \n before list item if it is not in input text.

Because CommonMark requires it.