Empty p tags is being generated

I read that rich text would remove the unnecessary empty <p></p> tags generated from the text editor. But for some reason, I’m still getting p tags.

Here’s what my sample code looks like

const options = {
  renderNode: {
    [BLOCKS.HEADING_1]: (node, children) => <h1>{children}</h1>,
    [BLOCKS.HEADING_5]: (node, children) => <h5>{children}</h5>,
    [BLOCKS.EMBEDDED_ASSET]: (node) => {
      const fileUrl = node.data.target.fields.file['en-US'].url

      return (
        <ContentfulFixedAsset
           fileUrl={fileUrl}
        />
      )
    }
  }
}

documentToReactComponents(richText, options)

What am i doing wrong?

[coreysyms]

Honestly the easiest work-around is CSS, and what I use is simple. CSS: p:empty { display: none; } Any paragraph tag that is empty, hide it. You can use this universally like the above. Or more specifically wrap your displayed Contentful richtext entries in a div classed as such.

.richtext > p:empty { display:none; }

This can be problematic for clients who like to add vertical space with p tags but it’s better than having my layout wrecked by either the content editor or the CMS.

This is a bit of a nuisance problem, so I understand why it’s not high on the priorities, hope the above workaround helps!

[Justbigmack]

Wondering how this has not been fixed with the issue being open since 2019