How to add serializer for mark
anna-Kop opened this issue · comments
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 } }
],
};
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.
Also looking for an answer for this one. It seems like I would have to reimplement the entire default serializer.
Looks like this might be what you are looking for? https://blog.novacare.no/sanity-serializing-annotations/