Single empty line breaks are ignored

I’m rendering some markdown line so:

import auth from '@react-native-firebase/auth';
import database from '@react-native-firebase/database';
 
async function onCreateAccount() {
  // Get the users ID
  const uid = auth().currentUser.uid;
  // ..

The rendering works fine, however there is no line break happening between the imports/function:

It looks like the line token plain child is an empty string, rather than a string with a single space. I’m able to get around this by doing:

<code>
              {tokens.map((line, i) => {

                // Ensure blank lines/spaces drop onto a new line
                if (line.length === 1 && line[0].content === '') {
                  line[0].content = ' ';
                }

                return (
                  <div {...getLineProps({ line, key: i })}>
                    {line.map((token, key) => {

Not sure if it’s a bug or something my end? There doesn’t seem to be an issue when it’s already within a line.

[rwieruch]

I had a similar issue and the solution by @Ehesp fixed it for me. I think this is not in this library yet. See when I use the following markdown:

import abc from 'abc';

import zoo from 'zoo';

I get rendered what I wished for:

import abc from 'abc';

import zoo from 'zoo';

But when I copy and paste the code to my editor/IDE, I get:

import abc from 'abc';
import zoo from 'zoo';

without the line break. I can see it also on my blog that there is nothing “selected” as line in between:

However, when I use the solution by @Ehesp with:

// Ensure blank lines/spaces drop onto a new line
if (line.length === 1 && line[0].content === '') {
  line[0].content = ' ';
}

it preserves the empty line when copy and pasting the code and it also shows it as something “empty” selected on my blog:

I guess more people have this problem without noticing. Just wanted to mention it here again and thank @Ehesp 👍

[domharrington]

Following the instructions here I was getting an empty line at the end of all of my code blocks:

To fix this, I modified this part of the example code:

{tokens.map((line, i) => (
  <div key={i} {...getLineProps({line, key: i})}>
    {line.map((token, key) => (
      <span key={key} {...getTokenProps({token, key})} />
    ))}
  </div>
))}

And I added a .filter() to remove empty lines:

{tokens.map((line, i) => (
  <div key={i} {...getLineProps({ line, key: i })}>
    {line
      .filter((l, k) => {
        return l.empty !== true;
      })
      .map((token, key) => (
        <span key={key} {...getTokenProps({ token, key })} />
      ))}
  </div>
))}

And this seemed to do the trick:

Hope this helps someone.