How to fix "Invalid Portable Text Editor value" for custom superscript decorator in production

I can see what's happening here! The issue isn't with your decorator syntax - your code is actually correct. The problem is that you have existing content in production that contains sup marks, but your production Studio hasn't been updated with the schema that recognizes those marks.

What's Actually Going Wrong

When you developed locally, you:

1. Added the sup decorator to your schema
2. Created or edited content that used the superscript formatting
3. That content was saved with sup marks in the Content Lake

When you deployed to production:

1. Your content (with sup marks) exists in the Content Lake
2. But your production Studio doesn't have the updated schema yet
3. The Studio tries to load content with sup marks but says "I don't recognize this decorator"

Your decorator syntax is fine - using component and icon at the root level is correct. The error message "Block with key 'dae3f4812ac2' contains marks (sup) not supported by the current content model" means the Studio schema doesn't match the content.

How to Fix It

Deploy your Studio to production:

sanity deploy

This will update your production Studio with the new schema that includes the sup decorator. Once deployed:

1. Hard refresh your browser (Ctrl+Shift+R / Cmd+Shift+R) in the production Studio
2. The Superscript button should now appear in the toolbar
3. The error should disappear because the Studio now recognizes sup marks

Why It Worked Locally

Your local development environment had the updated schema from the moment you added it, so there was never a mismatch between the content and the schema definition.

Frontend Rendering

Don't forget that when rendering this Portable Text on your frontend, you'll need to handle the sup decorator in your serializer:

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

<BlockContent
  blocks={yourContent}
  serializers={{marks: {sup}}}
/>

Or if you're using modern @portabletext/react:

import {PortableText} from '@portabletext/react'

const components = {
  marks: {
    sup: ({children}) => <sup>{children}</sup>
  }
}

<PortableText value={yourContent} components={components} />

The key takeaway: your decorator code is correct, you just need to deploy your Studio so production has the updated schema!