When building a modern content-rich application, one of the most essential features is a flexible and robust content editor. Sanity.io, a popular headless CMS, offers developers an advanced content editing experience through its BlockContent schema. This schema enables the creation of rich text, incorporating various features like images, code blocks, custom formatting, and more. In this blog, we'll explore how to set up a BlockContent editor schema in Sanity and leverage all its powerful features.

What is BlockContent?

Sanity's BlockContent is a portable, rich text editor that can be fully customized to fit your content model. It allows you to define the structure of the content, making it possible to include everything from basic text to complex, custom objects.

Setting Up BlockContent in Sanity

To get started, you need to define the BlockContent schema in your Sanity project. Here’s how you can set it up:

export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    {
      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" },
        { title: "Caption", value: "figcaption" },
      ],
      lists: [
        { title: "Bullet", value: "bullet" },
        { title: "Numbered", value: "numbered" },
      ],
      marks: {
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
          { title: "Highlight", value: "highlight" },
          { title: "List", value: "list" },
        ],
        annotations: [
          {
            title: "URL",
            name: "link",
            type: "object",
            fields: [
              {
                title: "URL",
                name: "href",
                type: "url",
              },
            ],
          },
        ],
      },
    },
    {
      type: "image",
      options: { hotspot: true },
    },
    {
      name: "code",
      title: "Code Block",
      type: "code",
      options: {
        highlightedLines: true,
      },
    },
  ],
};

This schema includes a variety of content blocks:

Text Blocks: Supports multiple styles such as headings (H1, H2, H3), normal text, and blockquotes.

Lists: Provides bullet list formatting.

Marks: Offers text decorations such as bold, italic, underline, and code.

Annotations: Allows linking to URLs and other references.

Images: Supports images with hotspot cropping.

Code Blocks: Facilitates syntax-highlighted code blocks with optional filenames.

References: Links to other documents within Sanity, such as authors.

Custom Objects: Enables the inclusion of complex, structured data.

Customizing the Editor Experience

Sanity allows you to further customize the editing experience by adding custom input components or adjusting the way content blocks are presented in the studio. You can define your own components, preview how the content will appear on the front end, and even restrict or expand the types of content that can be included.

I created a Portable text component to smoothly intrigate with BlockContent even you reading this is blog on That Component </3

Checkout the Blog: PortableText Component!