<RichText> htmlSerializer question

[dave1 (David Brewer)]

Wonder if when using htmlSerializer I can see associated tag (label) information too?

Here in the data obj I can see the tag (label: "rt-list-header"):

But when passed into the htmlSerializer tag seems omitted?
I wonder if this is expected as having that tag information would be useful to me.

[samlittlefair]

Hey @dave1,

This should be possible. I've created an HTML Serializer that should log the info that you're looking for:

const htmlSerializer = (type, element, content, children) => {
  console.log(element?.data?.label)
  return null
}

Let me know if that logs the label for you.

If not, I could take a look at your code and repo to see if something unexpected is happening.

Best,
Sam

[dave1 (David Brewer)]

Hey @samlittlefair

Thanks for your reply.
Yes. Seems there is some interesting nesting happening.
Strong > Label > Span

I originally filtered on the (type === span) from seeing the rich text data obj output pre serialisation in screenshot 1 from the first post.

Got around this with the following:
if (type === 'strong' && children[0]?.props?.className === 'rt-list-header') {

However running this again, seeing the nesting (console output below) was unexpected so wonder if this is what you would expect?
Your example didn't elaborate to which type a label would be attached, but it may be the case that a label is broken into its own type rather than a HTML tag type? I assumed property would just be attached to existing type.

See output from running through the nodes filtering by the 'Liability' title:

Update, after reviewing span array and the types associated with the [start: 0 - end: 9] items guess it makes sense (first post first screenshot). Only wonder is why/how an additional span tag gets created?

[samlittlefair]

Hey @dave1,

It sounds like you figured this out. For a Custom Label, the element.type === "label". So, in your HTML Serializer, you can do something along the lines of:

if(element.type === "label") return `<span class="${element.data.label}">${children.join("")}</span> `

In the source code for the prismic-dom package, which includes a complete HTML Serializer, I can see that the label type renders a span tag, while the span type seems to just clean the HTML, without adding HTML tags:

prismicio/prismic-dom/blob/c0e9b221749351c32d0e0c9a2366815572bb6ee6/src/richtext.js

Let me know if you have any more questions!
Sam

[dave1 (David Brewer)]

Ah yes, makes sense seeing /src/richtext.js code snippet