sanity.io - добавление цвета текстового редактора для типа "блок"

Question

У меня есть объект типа block чтобы получить WYSIWYG редактор. Это выглядит так:

{
  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"
          }
        ]
      }
    ]
  }
}

Но я не вижу возможности выбрать цвет текста. Есть ли способ включить это? Может быть плагин?

Answer 1

Существует действительно плагин для этого. В вашем терминале cd вам папка Sanity Content Studio, затем запустите:

sanity install @sanity/color-input

Это добавит @sanity/color-input к plugins массив в файле sanity.json и локально установите @sanity/color-input Пакет Npm.

Затем идти вперед и добавить color введите в annotations массив в содержимом блока, где вы хотите включить цвет текста. Например:

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

Кроме того, имейте в виду, что теперь вы получите текст, помеченный особенностями цвета. Как (и если) ваш пользовательский интерфейс выбирает визуализацию структурированного текста, зависит от вас.