Get help on Discord

Disable normal text or set heading 2 as default in Sanity rich text editor

8 replies
Last updated: Jul 31, 2021
Is there anyway to disable ‘normal text’ in a rich text editor? or just make a heading 2 the default?
AI Update

Yes, you can definitely customize the Portable Text editor to disable "normal text" or make a specific heading the default! Here's how to do it:

Remove Normal Text Style

To disable the "normal" paragraph style from your Portable Text editor, you need to configure the styles array in your block type schema. Simply exclude normal from the styles array:

export default {
  name: 'content',
  type: 'array',
  title: 'Content',
  of: [
    {
      type: 'block',
      styles: [
        { title: 'Heading 2', value: 'h2' },
        { title: 'Heading 3', value: 'h3' },
        { title: 'Quote', value: 'blockquote' }
      ]
    }
  ]
}

In this configuration, users can only choose from H2, H3, and blockquote styles - no normal paragraph option will appear.

Make Heading 2 the Default

While you can't technically set a default style through configuration alone (the editor defaults to normal), you can work around this in a couple of ways:

Option 1: Use Initial Value Templates

You can create an initial value template that pre-populates content with H2 blocks:

export default {
  name: 'content',
  type: 'array',
  title: 'Content',
  of: [
    {
      type: 'block',
      styles: [
        { title: 'Heading 2', value: 'h2' },
        // other styles...
      ]
    }
  ],
  initialValue: [
    {
      _type: 'block',
      style: 'h2',
      children: [{ _type: 'span', text: '' }]
    }
  ]
}

Option 2: Only Include H2 as the Single Style

If H2 is the only style in your array, it becomes the de facto default since it's the only option:

styles: [
  { title: 'Heading 2', value: 'h2' }
]

Important Considerations

Keep in mind that the styles configuration in Sanity's Portable Text editor is similar to what you'd configure in TinyMCE's block_formats or CKEditor's heading options, but it's defined in your schema rather than in the editor configuration itself.

The Portable Text editor configuration documentation provides more details on customizing styles, decorators, and other editor features. You can also check out the customization guide for styling how blocks appear in the editor itself.

Show original thread
8 replies
I think you can remove the styles you dont want from your config.
Thanks
user X
, even if you just set it to Heading 2 it will always render normal text and set that as the default. I guess the only way is to write a custom serializer to set a default if nothing is set, quite annoying
Done this now:
import BlockContent from "@sanity/block-content-to-react";

export default function customSerializer({ props, defaultTag }) {
  const { style = "normal" } = props.node;

  // if user hasn't selected a style, and it should be h1,h2,h3... force it
  if (style === "normal" && defaultTag) {
    return React.createElement(defaultTag, {}, props.children);
  }

  // default styling
  return BlockContent.defaultSerializers.types.block(props);
}
Because this will always render ‘normal’ and set it as the default 😕

export default {
  title: "Content",
  name: "headingThree",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      styles: [{ title: "Heading 3", value: "h3" }],
      lists: [],
      marks: {
        decorators: [],
        annotations: [],
      },
    },
  ],
};
Hey User! If you know that that field is always going to be an h3 could you just use a 
string
or a 
text
type, then handle the styling on your frontend? Or do you need access to Block Content features besides styling here?
Hey User, thanks I needed <br/> tags and I do need a few blocks with a few different types. I came up with a custom serializer to solve:

import React from "react";
import BlockContent from "@sanity/block-content-to-react";

function customSerializer({ props, defaultTag }) {
  const { style = "normal", _type = "paragraph" } = props.node;

  // if user hasn't selected a style, and it should be h1,h2,h3... force it
  if (style === "normal" && defaultTag) {
    return React.createElement(defaultTag, {}, props.children);
  }

  // default styling
  return BlockContent.defaultSerializers.types.block(props);
}

export default function serializers(defaultTag) {
  return {
    list: props => {
      const { type } = props;
      const bullet = type === "bullet";
      if (bullet) {
        return <ul>{props.children}</ul>;
      }
      return <ol>{props.children}</ol>;
    },
    listItem: props => <li>{props.children}</li>,
    types: {
      block: props => customSerializer({ props, defaultTag }),
    }
  };
}
Hey User, I was searching for the same question and came across your post. It might not be relevant to you anymore, but I’ve found you can override the default ‘Normal’ style. This means you can set custom styling but it doesn’t render the dropdown in the block editor (meaning that the user doesn’t need to select a style):
import React from 'react'

const TitleStyle = props => (
  <span style={{fontFamily: 'Garamond', fontSize: '2em'}}>{props.children}</span>
)
export default {
    title: "Content",
    name: "content",
    type: "document",
    fields: [
        {
            title: "Text",
            name: "text",
            type: "array",
            of: [
                {
                    type: "block",
                    styles: [
                        { title: "Normal", value: "normal", blockEditor: {render: TitleStyle} },
                    ],
                    lists: [],
                    marks: {
                        decorators: [],
                        annotations: [],
                    },
                },
            ],
        },
    ],
};
Awesome!! Thanks User

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?