<p> tag inside bullet lists in Structured Text fields

Hi,

is it normal that Structured Text fields formats bullet points with <p> tag. The output is like this:

<li><p>hardware auto-detection,</p></li>

How do I get rid of the P tag inside bullets?

Yes, it is normal… the “dast” specification is willingly simple and always wraps text content of list items inside paragraphs.

If you want to get rid of them (ie. if the list item only has one paragraph), you can do that on your frontend with custom render rules:

<StructuredText
  data={content}
  customNodeRules={[
    renderNodeRule(isParagraph, ({ children, key, ancestors }) => {
      if (
        ancestors[0].type === 'listItem' &&
        ancestors[0].children.length === 1
      ) {
        return <React.Fragment key={key}>{children}</React.Fragment>;
      }

      return <p key={key}>{children}</p>;
    }),
  ]}
/>
1 Like

Thank you @s.verna for the custom render rules and example code. I knew I can do that.

I was referring to traditional WYSIWYG HTML editors do not include <p> tag if list items are containing just one liner which is kind of 90% of use cases. They do generate <p> tags when you decide to have multiple paragraphs.

Anyway, thank you.