Embed and edit nested portable text blocks inline within parent editor

I understand what you're trying to do – you want nested portable text blocks (like your Section object) to render as editable content inline within the parent portable text editor, rather than showing a preview or requiring a modal/dialog to edit.

Unfortunately, this is not recommended and generally not supported in Sanity Studio. As mentioned in this community thread, putting a portable text editor inside of a portable text editor drastically increases your attribute count and creates significant technical challenges.

Why This Architecture Doesn't Exist

Nested portable text editors create several problems:

• Attribute count explosion: Each nested block adds to your document's complexity, potentially hitting limits
• Focus management: Managing cursor position and selection across nested editors is extremely complex
• Data structure integrity: Keeping _key values and block structure consistent becomes fragile
• User confusion: It's unclear which editor level you're working in
• Serialization complexity: Rendering nested portable text on the frontend becomes more difficult

The Sanity team has intentionally not built this feature because the UX and technical tradeoffs generally aren't worth it.

What You Can Do Instead

1. Use marks or annotations (though as you noted, these don't work across blocks)

2. Use a separator/divider approach (the recommended solution from the community):

Create a custom block object that acts as a section divider, then process the blocks on the frontend to wrap content between dividers into sections. This is exactly what the original poster settled on in that thread:

{
  title: "Section Rule",
  type: "object",
  name: "sectionRule",
  icon: BlockElementIcon,
  fields: [
    {
      title: "Visible",
      type: "boolean",
      name: "visible",
      initialValue: false,
    },
  ],
}

Then on the frontend, you can slice the block array between these markers and wrap them in section elements. The thread includes complete code examples for processing these ranges.

3. Flatten your structure – instead of nesting, use a single portable text array with custom styling

4. Use separate fields – if sections represent distinct content areas, they might be better as separate top-level fields

5. Custom input component (not recommended) – You could build a completely custom input component that renders nested portable text editors, but this is complex, fragile, and you'd be fighting against the framework. You'd need to manage state, focus, and synchronization yourself.

The preview + modal editing pattern (default behavior for block objects) is the officially recommended approach for block objects containing portable text. The separator/preprocessing approach is a clever workaround that keeps the editing experience simple while achieving your desired frontend structure.