Fix: render empty paragraph as br elements

[simotae14]

What does it do?

It catches all the empty paragraphs and renders them as br elements

Why is it needed?

With the previous implementation every time we had a new line was rendered as an empty paragraph

How to test it?

In a frontend app, use the renderer (link it via yarn), and pass a content like this for example [ { type: 'paragraph', children: [{ type: 'text', text: 'First paragraph' }], }, // empty paragraph { type: 'paragraph', children: [{ type: 'text', text: '' }], }, { type: 'paragraph', children: [{ type: 'text', text: 'Second paragraph' }], }, ]

Related issue(s)/PR(s)

This PR solve this issue https://github.com/strapi/blocks-react-renderer/issues/12

[sefrijn]

I'm trying to use blocks-react-renderer in React Native. I can create React Native versions of everything through specifying custom blocks and how to render them, but not this line-break (<br />), which is an html tag React Native doesn't understand. I would propose to make it customisable like blocks paragraph, heading, code, image, etc.

For now I used patch-package to disable returning a
tag, and in my React Native code I'm using the following implementation:

<BlocksRenderer
 content={content}
 blocks={{
        paragraph: ({ children }) => {
          if (Array.isArray(children) && children[0].props.text === "")
            return <Text> </Text>; // or any other custom element to use for a line break
          return (
            <Text>{children}</Text>
          );
        }
        // Other blocks here
}} />