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

У меня есть объект типа 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"
          }
        ]
      }
    ]
  }
}

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


sanity
person Enrique Moreno Tent    schedule 24.11.2018    source источник
comment
Я ничего не знаю о вашем варианте использования, но имейте в виду, что тип block предназначен только для создания структурированного текста и, вероятно, не должен рассматриваться как редактор WYSIWYG. Что вы получите, решает фронтенд. Во всяком случае, это основная философия дизайна. Используйте как хотите :)   -  person thomax    schedule 26.11.2018

Ответы (1)


arrow_upward
1
arrow_downward

Для этого действительно есть плагин. В вашем терминале 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'}
        ]
      }
    }
  ]
}

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

person thomax    schedule 26.11.2018