portabletext/react-portabletext

Marks Not Rendering

johnstonbl01 opened this issue · 1 comments

Hi there! Unsure if I'm just doing something wrong, or if it's an actual bug (it's likely the former).

I'm attempting to customize link components coming back from Sanity, and none of the marks are rendering inside the view. Here's a reproduction in CodeSandbox. I modified the text, but left everything else the same as it's coming from Sanity. Am I maybe missing something in the query from Sanity (I'm using the pretty standard blog example schema)?

Here's the body schema for the Sanity schema:

    defineField({
      name: 'body',
      title: 'Body',
      type: 'blockContent'
    })

and the blockContent schema:

    defineArrayMember({
      title: 'Block',
      type: 'block',
      styles: [
        { title: 'Normal', value: 'normal' },
        { title: 'H1', value: 'h1' },
        { title: 'H2', value: 'h2' },
        { title: 'H3', value: 'h3' },
        { title: 'H4', value: 'h4' },
        { title: 'Quote', value: 'blockquote' }
      ],
      lists: [{ title: 'Bullet', value: 'bullet' }],
      marks: {
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' }
        ],
        annotations: [
          {
            title: 'URL',
            name: 'link',
            type: 'object',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url'
              }
            ]
          }
        ]
      }
    }),

Sanity API Version: 2024-03-10

I should note that in the project where I'm using this, I also have a custom h2 element, and it renders fine. That makes me think I'm missing something obvious with links, or something in the data has changed since the library was last published?

Here's what the HTML output looks like:

Screenshot 2024-03-14 at 12 34 18 PM

And how I'm defining it in Sanity Studio:

Screenshot 2024-03-14 at 12 37 06 PM

Thanks for any help / guidance!

Ended up finding the issue.

This was happening because the child span data wasn't including the marks array after I was parsing it using zod. Because that was missing, it had no way to link the text back to the text in the body. Hopefully this helps someone if they run into something similar! Sanity Vision in Studio was super helpful for tracking this down.