Explainer Needed: What is a Mark, Decorator and Serializer?

2 replies
Last updated: Apr 2, 2021
Hello, I don't understand the following concepts? Can someone please explain?
1. What is a mark/custom mark?
2. What is a decorator? Where is a decorator used and what is it's purpose?
3. What is the difference between a mark and a decorator?
4. What is a serializer? What is the purpose of a serializer?
5. Do I have to write a serializer everytime I add a new decorator? If yes, then how do I write that serializer?
6. Let's say I have a component called OnePost.js where I render a single blog post. In the blog post body I have a code block and also some highlighted text. As far as I understand, I have to write two serializers? How do I write two serializers?
Apr 2, 2021, 4:18 PM
Of course!
1.
mark/custom mark is how you are definitely a custom decorator (see what a decorator is in #2). This usually is adding an emphasis, or strong to your text. So making it either italic or bold). They can also be made custom. See more on that in #2. 2. A decorator is styling your text. For example: making it
strong. Taking it a step further, you can customize those decorators and style it to look like code or highlighted. Be sure to look at the example code here under Decorators.3. The difference between the two is a mark is any type of decorator or functionality you can give to text. A decorator is defining that style you want to give in the mark. I’m going to walk through the code
here under Properties. If you look, you’ll see “cbe9d12c6af9” under children --> in the 3rd span. If you scroll down, you’ll see
markDefs
. And you’ll see “cbe9d12c6af9" again. Those are linking the span and the markDefs together. And then the markDefs has an
href
with a link. So now that span linking to that markDefs with the link makes that text in the span, clickable, and linking to that particular link. The text that is linked is “annotated” and you’ll see that all within the 3rd span.4. A serializer is where the content is pulled from lots of “blocks” and make into a more readable format. For example. In that code we were just looking over, we have 4 spans with 4 “text” spots. So those 4 blocks of content are smashed together to make it readable for the user. So those four would say this: “I am strong and annotated” with a bold on strong and a link on annotated.
5. The decorator is for the span, the serializer takes all the spans and makes them one. So no, only one serializer for your content. But depending on how you want your content “serialized” is which package you use. For example,
block-content-to-react
is the Serializer for taking your blocks of spans, making them readable, and pushing to a React frontend. You’ll see the helpers here for different ways to serializes your data.6. You’ll only need one serializer for that. If all the content (text, images, highlighted text, and code block) all live in the same rich text editor. The rich text editor is where the blog post content would live, meaning the code blocks and such.
Apr 2, 2021, 7:37 PM
After writing all these answers down, I have decided I’m going to write a blog post on this content. I’m going to take these questions you asked, write it up, and share it with the community. That way, others who have these same questions can find the answers. We really appreciate you asking! I will also make sure to share the blog post with you. I will have specific code blocks and examples in it. That will help even further in understanding.
Apr 2, 2021, 7:39 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.