🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

Is there an option for super- and subscript in portable text field? Custom decorators can be added as an alternative.

8 replies
Last updated: Feb 24, 2021
Hy everyone, I wanted to ask if there is already an option in the portable text field for super- and subscript. If not, what would be a good alternative? does anyone have any tips?
Feb 24, 2021, 9:24 AM
Hi User, not out of the box but you could add them as custom decorators instead: https://www.sanity.io/docs/customization#decorators-e6401a8fe843
And then render them as follows: 
https://github.com/sanity-io/block-content-to-react#rendering-custom-marks
Or more specifically:

const sup = props => {
  return (
    <sup>
      {props.children}
    </sup>
  )
}

<BlockContent
  blocks={input}
  serializers={{marks: {sup}}}
/>
Feb 24, 2021, 9:29 AM
thanks for the fast reply, ill have a look and come back to you if i have more questions if thats okey?
Feb 24, 2021, 9:31 AM
That's perfectly ok!
Feb 24, 2021, 9:33 AM
I also had the schema lying around:
{
        name: "richText",
        type: "array",
        of: [
          {
            type: "block",
            marks: {
              decorators: [
                {
                  title: "Sub",
                  value: "sub",
                  blockEditor: {
                    icon: () => <sub>sub</sub>,
                    render: ({ children }) => <sub>{children}</sub>,
                  },
                },
                {
                  title: "Sup",
                  value: "sup",
                  blockEditor: {
                    icon: () => <sup>sup</sup>,
                    render: ({ children }) => <sup>{children}</sup>,
                  },
                },
              ],
            },
          },
        ],
      },

Feb 24, 2021, 10:11 AM
thankyou very much!
Feb 24, 2021, 10:52 AM
followup question: can i somehow hide or remove already existing decorators and/or annotations?
Feb 24, 2021, 12:45 PM
They will disappear when you add custom decorators/annotations 🙂
Feb 24, 2021, 12:46 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
Examples of customized dashboards/admin pages and the queryable feature of Portable Text.May 1, 2020
Tips for localizing the rich text editor in Sanity.io using a custom localeBlock type.May 14, 2020
Hello all! I’m trying to render a code block in a Portable Text Block, followed the instructions to add the serializer and...Feb 3, 2021
is there a good solution to center or right align text in the richtext editor?Dec 3, 2020
How to import PortableText in Vue.jsApr 8, 2020
Seeking help to generate a table of contents for a blog post using portable text and block-content-to-react.Jul 1, 2020
Is there an out-of-the-box equivalent of ACF flexible content field in Sanity?Jul 5, 2020
Changing a string field to a text field in Sanity.ioApr 23, 2020
Issue with serializer not applying styles to list itemsApr 14, 2020
Issue with creating a custom annotation in Portable Text in JavaScript.May 7, 2020

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle