Nesting Custom Labels

Developing with Prismic
1

I'm developping some application using prismic. I use prismic "Rich Text" elements and I defined some "custom-labels" for specific layouts.

In the "Document" part of the Prismic interface, when I fill a Rich Text element, I can apply my custom-labels in the same way I can apply Bold or Italic. Those custom labels are automaticaly transformed by prismic in tags with a class corresponding to my custom-labels.

That's the intendend working. But, if I try to nest one custom-label in another one (as I could nest some italic element in a bold sentence), it doesn't work. Only one custom-label is applied, the nested one is not taken into account.

Here is what I want to get :

["custom-label-1"]blabla["custom-label-2"]other things[/ "custom-label-2"][/ "custom-label-1"]

For the moment, if I try to do that, I only get the widest custom-label applied :

["custom-label-1"]blablaother things[/ "custom-label-1"]

Also, if I try to put 2 custom labels after another, if I let no space between them, the first one takes it all :

["custom-label-1"]blabla[/ "custom-label-1"]["custom-label-2"]other things[/ "custom-label-2"]

becomes

["custom-label-1"]blablaother things[/ "custom-label-1"]

(with a space between the two labels, it works though)

For Bold and Italic it works well... I can have an italic part in a Bold sentence and vice versa, why not whith custom labels ?

This is not a problem that can be solved in the HTMLSerializer because, alreay in the prismic Document interface, my nested custom-labels disapear.

2

I found this information online

Nesting span tags is valid HTML.

A span tag is non-semantic markup intended for grouping inline content, and is a valid wrapper for phrasing content. This includes tags like strong, em, time, and etc, but also additional span tags.

Maybe the only thing missing is to handle the proper class names in the CSS.

4

I think my message was laking some important informations. Here, I use prismic "Rich Text" elements and I defined some "custom-labels".
In the "Document" part of the Prismic interface, when I fill a Rich Text element, I can apply my custom-labels in the same way I can apply Bold or Italic. Those custom labels are automaticaly transformed by prismic in tags with a class corresponding to my custom-labels.

That's the intendend working. But, if I try to nest one custom-label in another one (as I could nest some italic element in a bold sentence), it doesn't work. Only one custom-label is applied, the nested one is not taken into account.

I'll edit the main topic to add this informations.

5

I understand. Thanks for the clarification. This isn't currently possible in the current Rich Text field. I can open a feature request so the product team can review it for future improvements.

1 Like