Sanity Desk Tool Crash: Cannot Resolve DOM Point from Slate Point when Adding Highlight Decorator to Richtext Block Field

Question

I am encountering an issue with the Sanity Desk Tool where it crashes when I attempt to add a custom Highlight decorator component to a Richtext block field. I have referred to the Sanity documentation for customizing the Portable Text editor, and my implementation seems similar. However, I am facing the following error:

Error:

Desk tool crash Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":5}

Code:

Here is my Richtext block field configuration in richtext.ts:

import { HighlightIcon, HighlightDecorator } from "../components/RichTextEditor"

export default {
  name: 'content',
  title: 'Content',
  type: 'array',
  of: [
    {
      type: 'block',
      marks: {
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
          { title: 'Code', value: 'code' },
          {
            title: 'Highlight',
            value: 'highlight',
            icon: HighlightIcon,
            component: HighlightDecorator
          }
        ]
      }
    }
  ]
}

And the RichTextEditor.tsx component:

import React from 'react'

export const HighlightIcon = () => (
  <span style={{ fontWeight: 'bold' }}>H</span>
)

export const HighlightDecorator = props => (
  <span style={{ backgroundColor: 'yellow' }}>{props.children}</span>
)

Environment:

• Operating System: Windows 10
• Sanity Version: 3.23.4
• API Version: v2021-10-12
• TypeScript: 5.1.6

Expected Output:

I expect to be able to use the custom Highlight decorator in my Richtext block field without encountering a Desk Tool crash. The Highlight decorator should function as intended, highlighting the specified text within the editor.

Additional Information:

I have followed the documentation mentioned here and ensured that my implementation aligns with the provided examples. Any insights into resolving this issue would be greatly appreciated.