Multiple consecutive blank lines are collapsed into a single blank line

[MrSolimanKing]

When rendering markdown with EnrichedMarkdownText, consecutive empty lines in the source text are collapsed and rendered as a single blank line/paragraph break, no matter how many blank lines were actually in the source.

const markdown = `Paragraph one.


Paragraph two (there were 2 blank lines above, but only 1 renders).`;

<EnrichedMarkdownText markdown={markdown} flavor="github" />

Expected

Some way to preserve the actual number of blank lines from the source, either via a prop (e.g. preserveBlankLines) or a documented parsing option.

Current workaround

The only way I have found to preserve blank line count is to pre process the markdown string myself before passing it to markdown, converting every blank line after the first in a run into its own paragraph containing a non-breaking space (\u00A0), so the parser treats it as non-empty content instead of discarding it:

function preserveWhitespace(text: string): string {
  const lines = text.split('\n');
  let inFence = false;
  const output: string[] = [];
  let i = 0;
  while (i < lines.length) {
    const line = lines[i];
    if (/^\s*(```|~~~)/.test(line)) {
      inFence = !inFence;
      output.push(line);
      i++;
      continue;
    }
    if (inFence) {
      output.push(line);
      i++;
      continue;
    }
    if (line.trim() === '') {
      let blankCount = 0;
      let j = i;
      while (j < lines.length && lines[j].trim() === '') {
        blankCount++;
        j++;
      }
      output.push('');
      for (let k = 1; k < blankCount; k++) {
        output.push('\u00A0');
        output.push('');
      }
      i = j;
      continue;
    }
    let result = line.replace(/ {2,}/g, (run) => '\u00A0'.repeat(run.length - 1) + ' ');
    result += '  ';
    output.push(result);
    i++;
  }
  return output.join('\n');
}

This works, but it feels like something the library should handle natively (similar to how some markdown renderers expose a breaks-style option), rather than requiring every consumer to reimplement blank-line preservation by hand.

const finalMarkdown = useMemo(
  () => preserveWhitespace(processedContent),
  [processedContent]
);

Usage:

<EnrichedMarkdownText 
  markdown={finalMarkdown} 
/>

[eszlamczyk]

Hi @MrSolimanKing thanks for the feature request! I believe that making multiple-line markdown breaks is actually invalid markdown just like this online editor says:

But we will discuss this with a team and if there is some easy way to not break markdown rules and add a way to make multiple breaks work we will try implementing that (my first idea would be to expose in api function like the one provided from you, but again, we need to rethink this)

[ForgQi]

+1!

We adopted this library for our chat app primarily for the Telegram-like animated Spoiler effect.

However, in a normal chat UI, everyday users just press Enter (\n) for a new line. They don't know about Markdown rules like trailing double spaces. Since PR #585, single newlines collapse into spaces, which breaks the standard chat experience and forces us to write custom pre-processing hacks.

It would be great if <EnrichedMarkdownText> could expose a prop like breaks={true} to preserve raw \n as hard breaks. This would make it much easier to use in chat applications.

[eszlamczyk]

It would be great if could expose a prop like breaks={true} to preserve raw \n as hard breaks. This would make it much easier to use in chat applications.

Yup, that's probably the way we will attempt to do it, but note that the default behaviour will most likely be markdown-like

[MrSolimanKing]

Small data point: a plain empty line (\n) didn't preserve consecutive blank lines for me, they still collapsed. Replacing the blank line with \u00A0 instead is what actually worked.

[eszlamczyk]

Hi again, just to get the thread up to speed: we created pull request in the parser to handle this cleanly. If we manage to get it merged we will work on the solution then mity/md4c#385