
Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag storeI can see the issue! You're using Sanity v2.35.0, and there are two problems with your code:
React Icons components need to be wrapped in a function that returns the component. Try this:
marks: {
decorators: [
{title: 'Strong', value: 'strong'},
{title: 'Emphasis', value: 'em'},
{title: 'Underline', value: 'underline'},
{
title: 'Superscript',
value: 'sup',
icon: () => <GrSuperscript />, // Wrap in a function
component: SuperscriptDecorator
},
{
title: 'Subscript',
value: 'sub',
icon: () => <GrSubscript />, // Wrap in a function
component: SubscriptDecorator
}
],
}Your decorator components also need to render the actual HTML elements (<sup> and <sub>), not just styling wrappers:
const SuperscriptDecorator = props => (
<sup>{props.children}</sup>
)
const SubscriptDecorator = props => (
<sub>{props.children}</sub>
)The yellow background styling you had was just for testing, but it won't create the actual superscript/subscript effect. The <sup> and <sub> HTML elements are what actually position the text correctly in the editor.
import {GrSubscript, GrSuperscript} from 'react-icons/gr'
const SuperscriptDecorator = props => (
<sup>{props.children}</sup>
)
const SubscriptDecorator = props => (
<sub>{props.children}</sub>
)
// In your schema:
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 />,
component: SubscriptDecorator
}
],
}Note: If you were on Sanity v3, the syntax would use blockEditor.icon and blockEditor.render instead, as shown in this community answer, but that's not what you need for v2.
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.
Content operations
Content backend


The only platform powering content operations
By Industry


Tecovas strengthens their customer connections
Build and Share

Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag store