How to add serializer for mark

[anna-Kop]

Hello!
I need to add a serializer for a custom mark, so it is not its own type. How would I do that?
I have managed to add a serializer for a custom image type, but this I reckon is different?

Here is the object in Sanity where I will use the mark called Brand:

import React from 'react'
import BsTypeUnderline from 'react-icons/lib/md/format-underlined'
import IoMdPizza from 'react-icons/lib/io/pizza'

const LinkRender = ({ children }) => <u>{children}</u>;

const BrandColorRender = ({ children }) => <span style={{ color: '#fc6522' }}>{children}</span>;

export default {
    title: 'Portable Text',
    name: 'portableText',
    type: 'array',
    of: [
      {
        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' },
        ],
        // Marks let you mark up inline text in the block editor.
        marks: {
          // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting by editors.
          decorators: [
            { title: 'Strong', value: 'strong' },
            { title: 'Emphasis', value: 'em' },
            { title: 'Code', value: 'code' },
            {
              title: 'Underline',
              value: 'u',
              blockEditor: {
                render: LinkRender,
                icon: BsTypeUnderline
              }
            },
            {
              title: 'Brand',
              value: 'brandcolor',
              blockEditor: {
                render: BrandColorRender,
                icon: IoMdPizza
              }
            }
          ],
          annotations: [
          { type: 'link' }, 
          { type: 'internalLink' },
        ],
        },
      },
      { 
        type: 'generalImage', 
        options: { hotspot: true } }
    ],
  };

[anna-Kop]

Hello again, here is some more information.

The body that this creates is like so:

"body": [
        {
          "_type": "block",
          "_key": "be21e557a49e",
          "style": "normal",
          "markDefs": [],
          "children": [
            {
              "_type": "span",
              "_key": "be21e557a49e0",
              "text": "This is orange text",
              "marks": [
                "brandcolor"
              ]
            },
            {
              "_type": "span",
              "_key": "be21e557a49e1",
              "text": " this is just normal text.",
              "marks": []
            }
          ]
        },

So I tried to make a custom serializer for the span tag, but it didn't work. Should it work? (since it is not actually a custom type) Like this:

builder.AddSerializer("generalImage", generalImageSerializerFn); //this serializer works
builder.AddSerializer("span", spanSerializerFn);

    public static async Task<string> SerializeGeneralImage(JToken input, SanityOptions sanity)
    {
        var imgUrl = await GetImageUrl((JObject)input, sanity);
        var alt = input["alt"]?.ToString();

        var image = $"<img class=\"img-fluid\" src=\"{ imgUrl }\" alt=\" {alt} \" />";

        return image;
    }

    public static async Task<string> SerializeSpan(JToken input, SanityOptions sanity)
    {
        var spanText = "hello";

        return $"<span>{spanText}</span>";
    }

Anyway I found out that the brandcolor marked strings turned up with <brandcolor> tags in the block html, so I replaced those with <span class="brand-color">This is orange text</span>, but it would have been/be nice to get it working with a serializer that is added to the SanityClient. So if you can give any tips on how to get that working, I would highly appreciate it.

[sbrerup]

Also looking for an answer for this one. It seems like I would have to reimplement the entire default serializer.

[ehuelsda]

Looks like this might be what you are looking for? https://blog.novacare.no/sanity-serializing-annotations/