Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Issue with adding super and sub script options to the editor in Sanity.io

4 replies
Last updated: Jan 31, 2023
Hey, I am following https://www.sanity.io/docs/customizing-the-portable-text-editor#e6401a8fe843 to try and add super and sub script options to the editor, but nothing is displaying correctly.
import {GrSubscript, GrSuperscript} from 'react-icons/gr'
const SuperscriptDecorator = props => (
  <span style={{backgroundColor: 'yellow'}}>{props.children}</span>
)
const SubscriptDecorator = props => (
  <span style={{backgroundColor: 'yellow'}}>{props.children}</span>
)
...
...
marks: {
          decorators: [
            {title: 'Strong', value: 'strong'},
            {title: 'Emphasis', value: 'em'},
            {title: 'Underline', value: 'underline'},
            {title: 'Superscript', value: 'sup', icon: GrSuperscript, component: SuperscriptDecorator},
            {title: 'Subscript', value: 'sub', icon: GrSubscript}
          ],
}
When I have just the icons, sanity runs but the icons aren't being imported (see screenshot). When I also add in the component to display the superscript, I get an error in the studio (screenshot). Anyone have any ideas what I'm doing wrong? This is sanity v2.35.0
Jan 31, 2023, 10:52 AM
I worked around the same problem with
icon: () => 'Super'
Jan 31, 2023, 11:20 AM
Just tested with latest sanity versions and I got it working fine with these:

const SuperIcon = () => <div>x<sup>2</sup></div>
const SuperDecorator = props => <sup>{props.children}</sup>
const SubIcon = () => <div>x<sub>2</sub></div>
const SubDecorator = props => <sub>{props.children}</sub>
...

decorators: [
...
   { title: "Sub", value: 'sub', icon: SubIcon, component: SubDecorator },
   { title: "Super", value: 'super', icon: SuperIcon, component: SuperDecorator },
]
Jan 31, 2023, 11:34 AM
Oh your using old sanity. See this document for old object format for decorator:

https://www.sanity.io/help/schema-deprecated-blockeditor-key

decorators: [
  {
    title: 'Highlight',
    value: 'highlight',
    blockEditor: {
      icon: MarkerIcon,
      render: highlightRender,
    },
  },
],
Jan 31, 2023, 11:39 AM
Thats it, adding blockEditor worked! Thank you
Jan 31, 2023, 2:01 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?