Get help on Discord

How to add color serializer for color-list plugin in Next.js with Sanity?

1 replies
Last updated: Jan 18, 2022
Help with color-list plugin please - unknown mark type "color", please specify a serializer for it in the 
serializers.marks
prop
I have installed the color-list plugin and can see it in my Studio.
However when I run the Next.js app I get this error:

unknown mark type "color", please specify a serializer for it in the 
serializers.marks
prop

here is my contentBlock.js schema
/**
* This is the schema definition for the rich text fields used for
* for this blog studio. When you import it in schemas.js it can be
* reused in other parts of the studio with:
* {
* name: 'someName',
* title: 'Some title',
* type: 'blockContent'
* }
*/
export default {
title: 'Block Content',
name: 'blockContent',
type: 'array',
of: [
{
title: 'Block',
type: 'block',
// Styles let you set what your user can mark up blocks with. These
// correspond with HTML tags, but you can set any title or value
// you want and decide how you want to deal with it where you want to
// use your content.
styles: [
{title: 'Normal', value: 'normal'},
{title: 'H1', value: 'h1'},
{title: 'H2', value: 'h2'},
{title: 'H3', value: 'h3'},
{title: 'H4', value: 'h4'},
{title: 'Quote', value: 'blockquote'},
],
lists: [{title: 'Bullet', value: 'bullet'}],
// Marks let you mark up inline text in the block editor.
marks: {
// Decorators usually describe a single property – e.g. a typographic
// preference or highlighting by editors.
decorators: [
{title: 'Strong', value: 'strong'},
{title: 'Emphasis', value: 'em'},
],
// Annotations can be any object structure – e.g. a link or a footnote.
annotations: [
{
title: 'URL',
name: 'link',
type: 'object',
fields: [
{
title: 'URL',
name: 'href',
type: 'url',
},
],
},
{name: 'color', title: 'Color', type: 'color'},
],
},
},
// You can add additional types here. Note that you can't use
// primitive types such as 'string' and 'number' in the same array
// as a block type.
{
type: 'image',
options: {hotspot: true},
},
],
}


I am a bit stuck. I googled and it is referencing "@sanity/block-content-to-react" but I have not touched this before and am a bit lost sorry.
AI Update

The error you're seeing happens because you've added a color annotation to your Portable Text schema, but your Next.js frontend doesn't know how to render it. When you use the color-list plugin in your Studio, it stores color data in the Portable Text JSON, but you need to tell your frontend how to display that colored text.

Solution: Add a Custom Mark Serializer

You need to add a custom serializer for the color mark in your Next.js app where you're rendering the Portable Text content.

If you're using @portabletext/react (the modern approach):

import { PortableText } from '@portabletext/react'

const components = {
  marks: {
    color: ({ children, value }) => {
      return <span style={{ color: value?.hex }}>{children}</span>
    }
  }
}

// Then use it in your component:
<PortableText value={yourContent} components={components} />

If you're using the older @sanity/block-content-to-react:

import BlockContent from '@sanity/block-content-to-react'

const serializers = {
  marks: {
    color: ({ mark, children }) => {
      return <span style={{ color: mark.hex }}>{children}</span>
    }
  }
}

// Then use it:
<BlockContent 
  blocks={yourContent} 
  serializers={serializers}
  projectId="your-project-id"
  dataset="your-dataset"
/>

Understanding the Code

The color annotation in your schema stores color data (typically with a hex property). The serializer receives this data and wraps the text in a <span> with the appropriate color styling. The children prop contains the actual text that was marked with the color.

Additional Considerations

If you're using the color-list plugin specifically, check what properties it stores. Some color plugins might store the color as value.color or mark.color instead of hex. You can console.log the value or mark object to see the exact structure.

For more complex styling or if you need to support different color formats (RGB, HSL, etc.), you might need to adjust the serializer accordingly.

The Portable Text serializers guide provides more details on creating custom mark serializers for various use cases like this.

Show original thread
1 reply
Thanks for getting back to me.Got there in the end:

import BlockContent from '@sanity/block-content-to-react'

const color = (props) => {
  return <span style={{ color: props.mark.hex }}>{props.children}</span>
}

export default function SanityBlockContent({ blocks }) {

  return (

    <>
      <BlockContent blocks={blocks} serializers={{marks: {color}}} />
      <pre>{JSON.stringify(blocks, null, 2)}</pre>
    </>

  )
}

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?