How can we turn off the heading options in the rich text editor?

[Optiq01]

I have my own custom font sizes which I want to integrate into the rich text editor. I see from the tutorial how I can easily add that functionality as a leaf, however I don't know know if there's a way to toggle off the heading selectors as they won't be needed. Is there a way to modify this or do I need to just leave them there and ignore them?

[jmikrut]

Hey @Optiq01 — great question! This is certainly doable.

You can explicitly define which types of Slate elements and leaves you'd like to allow on a field by field basis.

Here is a config that only allows the h3, h4, ul, link, and upload elements, as well as the bold and italic leaves:

const field =   {
  name: 'richTextExample',
  type: 'richText',
  admin: {
    elements: [
      'h3',
      'h4',
      'ul',
      'link',
      'upload',
    ],
    leaves: [
      'bold',
      'italic',
    ],
  },
},

This is also where you'd pass in your own custom elements or leaves. Think of these arrays as the "whitelist" of which elements / leaves are allowed.

Here is a screenshot of one of our admin panels that features a paired down list of supported elements and leaves, as well as a custom Leaf at the end (the last one, it sets the text to being 50% opaque for UI reasons):

Lastly, here is the documentation related to this stuff.

Did this answer your question?