[request] htmlSerializer for Gatsby

Developing with Prismic
1

There used to be a few documentation pages on creating a custom htmlSerializer for gatsby.
There has been a flurry of changes to Prismic documentation (which is great) but now it's really hard to find a good example of best practice.

You used to be able to specify a htmlSerializer in your gatsby config (had to be our JS and not react) and everything just kind of worked.

Now we are pushed towards @prismicio/react which means you seem to need to include a htmlSerializer on every call of PrismicRichText?

<PrismicRichText components={htmlSerializer} />

which works but is very repetitive, the other thing you need to do now is add

<PrismicProvider
    internalLinkComponent={({ href, ...props }) => (
      <Link to={href} {...props} />
    )}
  >

around your PrismicPreviewProvider just to get your internal links to work.

Is it possible to get an updated part of the documentation for gatsby on how to add your own serializer? An example of all 'types' potentially (this is what we used to have but had disappeared.

or even maybe update some of the examples - e.g GitHub - prismicio-community/gatsby-starter-prismic-blog: Blog project with Gatsby & Prismic

3

Hello @thejuniperstudio

With the new @prismicio/react kit also, you can provide an HTML serializer in gatsby-config.js, but it will be limited to only returning HTML. For example, you cannot return a React component in gatsby-config.js.

We recommend providing the HTML serializer to <PrismicRichText> instead. With this, you can return React components or HTML.

If you have a standard set of components, you can also provide it once to <PrismicProvider> at the top of the app (in a Gatsby app, this would be in gatsby-browser.js ). All <PrismicRichText> components will automatically use that HTML Serializer. You can still override that serializer by passing a serializer to an individual <PrismicRichText> component.

Note: the HTML serializer in gatsby-config.js will affect the HTML field for Rich Text fields. It will not affect the text or richText fields.

You can learn more about HTML Serializer in the core-concepts guide.

The gatsby docs and the example blog projects are already updated using the *@prismicio/react kit.

Let me know if you have any other questions.

Thanks,
Priyanka