RichText Formatting

Developing with Prismic
1

I have created a blog website with Prismic(headless CMS)/Astro/vanilla JS and one of the data fields that is brought to my website is a RichText field. I have formatted the RichText on Prismic side(with difficulty, editor needs some improvement). My website currently brings in the content just fine, and renders it, however when the content comes in and is rendered into HTML, it looses a lot of its formatting and looks pretty rough. I have looked at the Prismic documentation to figure out a way to format received content using the serializer to put classes on my elements that are brought in, so I can help format on website side. The "vanilla JS" documentation is frustrating as it has areas with deprecated content that is no longer supported or advised ( ie. importing @prismicio/helpers to help with RichText). I have looked through the documentation and can't seem to get the serializer to work as intended, I have tried different variations of serializer just to be able to put css classes on element types to better format. I have tried using many different variations based on documentation (some might be deprecated) to no avail. I have tried using serializer function with parameters (elements, children,node,content) and then added serializer as 2nd parameter to my prismic.asHTML(...,{serializer:customSerializer}) with nothing working. As of the current version of Prismic, what is the recommended way of handling RichText manipulation on client side using vanilla JS? Is serializer still the best method for adding custom classes to HTML elements brought in from RichText field API calls? Thanks for reading

3

Hi @marcusblackdev,

Welcome to the community :slight_smile:

The HTML serializer is still a good way to format your rich text with a lot of flexibility. Are you able to share with me how you have your project set up, and what exactly isn't working with the serializers you've tried? I'll be better able to help if I can see what you're seeing. Feel free to share snippets, or a link to your Github (by private message if you wish).

Otherwise, here's an example of a serializer that worked for me in a vanilla JS project. Its purpose was to change whatever was labelled <pre> in my rich text field into <code> on my website:

  const serializer = (type, element, content, children) => {
    
    if (element.type === 'preformatted') {
      return `<code>${children}</code>`;
    }
    
    return null;
  };

And it is then used like this:

const descriptionHTML = prismic.asHTML(description, { serializer })

Using something similar structurally, can you tell me what you're getting?

4

Thanks for the response! The structure you have for the serializer was the exact structure I tried before, but seeing that it was the correct structure led me to experiment with it more and I found out that how I was implementing classes to the html elements was the problem, when I used inline CSS it worked as intended

1 Like
5

Awesome! I'm glad you figured it out, thanks for coming back to let us know, it might help other users down the line :slight_smile:

1 Like