๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

"Error with color-list plugin in Next.js app: unknown mark type 'color'"

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.
Jan 17, 2022, 12:46 PM
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>
    </>

  )
}
Jan 18, 2022, 11:10 AM

Sanityโ€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?