Block Content Editor

It’s tempting to just pass up on the challenges presented by handling rich text as structured data. How do you represent it? How do you make it easily editable? How do you render it? People can just learn markdown, right?

This leaves you with a series of problems though:

• How can you write software to transform text that isn’t structured?
• How do you display your rich text in different technologies?
• How do designers control what formatting is allowed, where?

This is why we didn’t use a WYSIWYG rich text editor that stores either HTML or Markdown. They are two perfectly good syntaxes that we love and use ourselves, but they both come with limitations that would put heavy constraints on Sanity as a headless platform. We needed to save and structure content in a much more versatile way.

When building Sanity we made Portable Text a priority as it allows for familiar editorial word processing experiences at the same time as producing data structures that easily can be translated and adapted to different uses. The specification can be found on www.portabletext.org, and we have open-sourced all the frontend tooling for it.

In Sanity you can:

• Embed editable data as drag-and-droppable blocks in inline text. Don’t put maps in your copy, put a long/lat, and a zoom that you can render as a static map on mobile and a slippy map on the desktop.
• Add layers of content to your text, like comments, footnotes, highlighting, translations, and let the consumer choose which layers they want to get out of the API.
• Introduce your own paradigm for rich text and not be constrained by the conventions of HTML-markup or web-rendered text. E.g. you can make an editor for composing responses for voice interfaces.
• Invent uses for rich text that even we haven’t thought of yet.

We think this is a good thing™ and have enjoyed it ourselves to embed code editors in running text and add footnotes to text that actually render as real, actual footnotes on paper PDFs and build A/B testable landing page rigs.

One of the most typical use cases is to have the possibility to add images to rich text. Let’s start with defining the schema field:

export default {
  name: 'content',
  title: 'Content',
  type: 'array',
  of: [
    {
      type: 'block'
    },
    {
      type: 'image',
      fields: [
        {
          type: 'text',
          name: 'alt',
          title: 'Alternative text',
          description: `Some of your visitors cannot see images, 
            be they blind, color-blind, low-sighted; 
            alternative text is of great help for those 
            people that can rely on it to have a good idea of 
            what\'s on your page.`,
          options: {
            isHighlighted: true
          }
        }
      ]
    }
  ]
}

To the user in the Content Studio it will render like this:

This only scratches the surface of what you can do with the editor for Portable Text. In the following chapter, we will take a closer look at how to configure, customize, preview, and transform Portable Text.