Handle empty lines in draft-js HTML format

Question

I am using draft-js with react. I save the content from the editor in HTML format and display the content to the user. I use draft-convert for the HTML translations.

Empty lines in the editor are saved as empty <p></p> blocks. Such blocks are not rendered as empty lines in the browser. For example, in react, I use html-react-parser to display the editor content where the empty <p></p> tags don't render as an empty line.

Editor content:

Hello

World

HTML content:

<p>Hello</p><p></p><p>World</p>

How do I make sure that the empty <p></p> tag is rendered as an empty line?

Answer 1

if (block.type === 'PARAGRAPH') {
        if (!block.text) return <br />;
        return <p  />;
      }