sanity.io - Adding color the text editor for the "block" type

Question

I have an object of type block to get a WYSIWYG editor. It looks like this:

{
  title: "Block",
  type: "block",

  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: {
    decorators: [
      { title: "Strong", value: "strong" },
      { title: "Emphasis", value: "em" }
    ],
    annotations: [
      {
        title: "URL",
        name: "link",
        type: "object",
        fields: [
          {
            title: "URL",
            name: "href",
            type: "url"
          }
        ]
      }
    ]
  }
}

But I see no option to be able to choose the color of the text. Is there a way to enable this? Maybe a plugin?

Answer 1

There is indeed a plugin for this. In your terminal, cd to you Sanity Content Studio folder, then run:

sanity install @sanity/color-input

This will append @sanity/color-input to the plugins array in your sanity.json file and locally install the @sanity/color-input npm package.

Then, go ahead and add the color type to the annotations array in the block content where you want to enable text color. E.g.:

export default {
  name: 'blockContent',
  type: 'array',
  title: 'Block Content with Color',
  of: [
    {
      type: 'block',
      marks: {
        annotations: [
          {name: 'color', title: 'Color', type: 'color'}
        ]
      }
    }
  ]
}

Also, keep in mind that you'll now get text annotated with color specifics. How (and if) your front-end(s) choose to render the structured text is up to you.