How to insert custom inline elements in Sanity's rich text editor?

Yes! You absolutely can insert inline elements in Sanity's Portable Text Editor, just like those dinos in the ProseMirror example you linked to.

How to Add Inline Objects

While you might be familiar with adding block-level custom content (like images) by including them in the of array alongside type: 'block', inline objects work differently. You add them as an of property inside the block definition itself.

Here's a simple example with an inline author reference:

import { defineType } from 'sanity'

export default defineType({ 
  name: 'blockContent', 
  type: 'array', 
  of: [ 
    { 
      type: 'block', 
      of: [  // This 'of' array defines inline objects!
        {
          name: 'authorReference', 
          type: 'reference', 
          to: [{type: 'author'}]
        } 
      ] 
    } 
  ] 
})

This creates an inline reference that appears in your text flow, not as a separate block. When you click the "Reference to author" button in the toolbar, it opens a modal (similar to how annotations work), and the reference gets embedded right in the text.

How It Appears in Your Data

The key difference from annotations is that inline objects appear directly in the children array alongside your text spans:

"children": [
  {
    "_type": "span",
    "text": "This is how an inline reference to an author, "
  },
  {
    "_type": "authorReference",
    "_ref": "9b8382ae-69f7-4161-a0e2-e8a86b15d616"
  },
  {
    "_type": "span",
    "text": ", would look like."
  }
]

Querying Inline Objects

When querying, you'll need to resolve these inline references in your GROQ queries:

*[_type == 'post']{
  ..., 
  content[]{
    _type == 'block' => {
      ..., 
      children[]{
        ...,
        _type == 'authorReference' => {
          ...,
          "authorName": @->.name
        }
      }
    }
  }
}

Use Cases

This is perfect for things like:

• Dynamic product prices based on user location
• Inline footnote references
• Special offer callouts
• Emoji pickers or icon selectors
• Any content that needs to flow inline with text but requires structured data

Check out the official guide on adding inline blocks to Portable Text and the block type documentation for more details on implementing this pattern!