Custom mark rendered as random id instead of mark name

[sanity-io]

Custom mark rendered as random id instead of mark name

[gitsebs]

Facing the same issue

"react": "^17.0.2",
"react-dom": "^17.0.2",
"@sanity/block-content-to-react": "^3.0.0",

[ryansheehan]

Facing the same issue

"react": "^17.0.2", "react-dom": "^17.0.2", "@sanity/block-content-to-react": "^3.0.0",

Exact same setup and issue.

[ryansheehan]

Okay I figured out what I was doing wrong. Hopefully this helps you @ScholtenSeb and @vonba .

Because the links are annotations, they are actually marks not types. When defining my serializer object I had to make the change from

const serializers: Serializers = {
  types: {
    internalLink: InternalLink,
    externalLink: ExternalLink,    
  }
}

to

const serializers: Serializers = {
  marks: {
    internalLink: InternalLink,
    externalLink: ExternalLink,    
  }
}

I wrote my own typing for the Serializer object as

interface Serializers {
  types?: Record<string, (props: any) => JSX.Element | null>;
  marks?: Record<string, (props: any) => JSX.Element | null>;
  list?: React.Component;
  listItem?: React.Component;
  hardBreak?: React.Component;
  container?: React.Component;
}

[vonba]

Hi Ryan! Have a look at the code in my post, I'm also defining my serializer for marks, not types. Can you spot any errors there? The error message indeed also says "unknown mark..." So it doesn't seem like that's the issue unless I'm missing something.

…

On Sun, 3 Oct 2021, 13:14 Ryan Sheehan, ***@***.***> wrote: Okay I figured out what I was doing wrong. Hopefully this helps you @ScholtenSeb <https://github.com/ScholtenSeb> and @vonba <https://github.com/vonba> . Because the links are annotations, they are actually marks not types. When defining my serializer object I had to make the change from const serializers: Serializers = { types: { internalLink: InternalLink, externalLink: ExternalLink, }} to const serializers: Serializers = { marks: { internalLink: InternalLink, externalLink: ExternalLink, }} I wrote my own typing for the Serializer object as interface Serializers { types?: Record<string, (props: any) => JSX.Element | null>; marks?: Record<string, (props: any) => JSX.Element | null>; list?: React.Component; listItem?: React.Component; hardBreak?: React.Component; container?: React.Component;} — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#51 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHKPMHDCCE6O76N5BWY3WMLUFCMRTANCNFSM5CMBIMSQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[ryansheehan]

@vonba Sorry, I overlooked your original post. Upon a closer look, I don't spot anything different aside from naming differences to what I have.

This is what I have wired. Maybe help spot any difference?

{
    type: 'array',
    name: 'body',
    title: 'Body',
    of: [
      {
        type: 'block',
        marks: {
          annotations: [
            {
              name: 'externalLink',
              type: 'object',
              title: 'External Link',              
              blockEditor: {
                icon: FaExternalLinkAlt,                  
              },
              fields: [
                {
                  name: 'url',
                  type: 'url'
                }
              ]
            },

const ExternalLink: FC<{mark: any}> = ({mark, children}) => {
  const { url} = mark;  
  return (
    <a href={url} className="link external-link">{children}</a>
  )
}

const serializers: Serializers = {
  marks: {
    externalLink: ExternalLink,    
  }
}

export const BlockContent: FC<BlockContentProps> = ({blocks, className}) => {
  return <SanityBlockContent blocks={blocks} 
    className={classnames('sanity-block-content', className)}
    serializers={serializers} 
    ignoreUnknownTypes={false}
    renderContainerOnSingleChild={true}
  />
};

[vonba]

They really look identical to me except that you are setting the icon in the editor, and that I'm adding the "new tab" option.

The thing that's crazy about it is that when the block data reaches the front end the custom elements are just named as random IDs. So must have something to do with how the stored data is interpreted.

[vonba]

It actually seems like this is how the contents comes out through the raw GraphQL query.
The block below should be a link, but it's missing the url property and the mark should be "link" instead of "b4ff1a687243".

{
                      "_key": "01617238a47b",
                      "_type": "span",
                      "marks": [
                        "b4ff1a687243"
                      ],
                      "text": "Magdalena Wosinka"

},

However, the content above is still read back correctly to the editor, so the information isn't lost.

[vonba]

I found the issue.

A while back I found a bug where in some cases the markDefs field was missing from blocks.
My solution was to add an empty markDefs field on all blocks.
By doing that I am overwriting any custom marks. I didn't notice it at the time because I wasn't using any custom annotations.

Not sure if the bug I mention is still an issue in newer versions of Sanity.