Preformatted and other Rich Text in the same field

[daniel.millburn]

The Prismic UI seems to support putting both formatted (bold, line breaks, etc) and preformatted html into a single Rich Text field.

However, rendering both in the UI seems to be an issue. I can render the preformatted html using
const createCopyMarkup = () => {
return { __html: DOMPurify.sanitize(prismicH.asText(data.body)) };
};

And I can get render the formatted rich text using

PrismicRichText field={data.body}

However getting both to render properly from a single field in Prismic doesn't seem to be possible or I'm missing something? We really would like our editors to have only one field to work from and be able to add formatted and preformatted content. Is this possible or do these need to be two separate fields?

[Fares]

Hi Daniel,

Welcome to the Prismic community,

If I understood correctly, you need to handle preformatted and formated HTML differently, and as you know, Prismic writing room (UI) allows to select either preformatted or normal text such as:

And to add a custom behavior/transformation when you output HTML; you would need to use an HTML serializer

Note that we have HTML serializer examples for each technology, so please check our documentation.

Please let me know if you have any other inquires,
Fares

[daniel.millburn]

This partially works, if the preformatted and other rich content are in separate sections. However, in our use case we need to have a way to either commingle preformatted and non preformatted in the same paragraph. Or Prismic's editor needs to support all html tags.
Example of commingling (Our current site): Links to the footnotes as an example
https://www.everlylife.com/blog/universal-life-insurance-vs-whole-life-insurance
Attempting to solve this with Prismic content: Everly Life - Life Insurance Made for Living

[Fares]

Hi @daniel.millburn,

Ok, so to solve this, you can create a custom label

the prismic-dom kit for developing Prismic apps with JavaScript will, by default, render a custom label as a with a class of the label's name.

And then, in your code, you style this span the way you want in CSS using its class.

As shown below

Note: if you really need to have a _{tag, you can have an HTML serializer and then lool for the span by class and modify to a tag.}

Please let us know if you need any further assistance,
Fares