How to remove wrapping p tags around labels with rich text?

Developing with Prismic
,
1

I have a rich text field and i add some custom labels to wrap those elements inside a span how ever there is an extra p tag around each element how can i remove that to make everything inside a single p tag ?

const RichTextComponents: JSXMapSerializer = {
  paragraph: ({ children }) => <p>{children}</p>,
  label: ({ node, children }) => {
    if (node.data.label === 'line') {
      return <span className='block font-lg'>{children}</span>;
    }
    if (node.data.label === 'word') {
      return <span className='font-xl'>{children}</span>;
    }
  },
  image: ({ node }) => (
    <span>
      <PrismicNextImage field={node} />
    </span>
  ),
};


      "primary": {
        "description": {
          "type": "StructuredText",
          "config": {
            "label": "Description",
            "labels": [
              "line",
              "word"
            ],
            "placeholder": "",
            "allowTargetBlank": true,
            "multi": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl"
          }
        }
      },
3

Hey @nilenarrator,

I think I understand what you're trying to do.

On this line:

  paragraph: ({ children }) => <p>{children}</p>,

You'll need to add a conditional to check if the node has a child which is a label, and conditionally return {children} without the enclosing <p> tags.

Let me know if that helps. Or, if I misunderstood your use case, let me know :slight_smile:

Sam