New lines implementation in Rich Text

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

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",

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.