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?