<RichText> htmlSerializer question

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"):
Screenshot 2021-04-15 at 11.01.48

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.
Screenshot 2021-04-15 at 11.02.34

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) => {
  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.


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:
Screenshot 2021-04-15 at 17.04.02

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?

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:

Let me know if you have any more questions!

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

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.