New lines implementation in Rich Text

[jason.hammons (Jason H)]

I'm looking for some guidance on how to implement replacing \n with <br /> in Rich Text. I've found a few mentions of it in the documentation but I'm not clear on which implementation is recommended.

Here are some observations in my research / trying to implement this in Slice Machine 2.2...

What isn't working

• If my <PrismicRichText /> component implements span: ({ text }) => (text ? text : ''), as mentioned in the docs Rich Text - Documentation - Prismic, \n is not replaced with <br />.
• If my <PrismicRichText /> component implements span: ({ text }) => text.replace('\n', '<br/>') as mentioned in @prismicio/richtext Technical Reference - Documentation - Prismic \n is replaced with <br />, but "<br/>`" text is rendered on screen.

What is working

• If my <PrismicRichText /> component does not implement a span: at all, \n is replaced with <br /> and line breaks are rendered as expected on screen.
• If my <PrismicRichText /> component implements the span (using the for in loop) as seen on @prismicio/react Technical Reference - Documentation - Prismic, \n is replaced with <br /> (side note: though key is undefined) and line breaks render as expected on screen.

What is the recommended way to implement replacing \n with <br /> in rich text?

Thank you!

My packages:

• "slice-machine-ui": "^2.2.0",
• "@slicemachine/adapter-next": "^0.3.41",
• "@prismicio/client": "^7.3.1",
• "@prismicio/next": "^1.5.0",
• "@prismicio/react": "^2.7.3",

[Pau]

You can try to replace \n with <br /> in Rich Text using a custom span within your PrismicRichText component. Check out the Rich text documentation for React.