Parse and serialize SlateJS json with Zod and React

[mvdve]

For others who want to validate and serialize the SlateJS json data into a react app, see the code snippets below, maybe its helpful.

Parse and create types with Zod

const RichTextChildSchema = z.object({
    text: z.string().optional(),
    italic: z.boolean().optional(),
    underline: z.boolean().optional(),
    strikethrough: z.boolean().optional(),
    bold: z.boolean().optional(),
    code: z.string().optional(),
    type: z.string().optional(),
    linkType: z.string().optional(),
    url: z.string().optional(),
    newTab: z.boolean().optional(),
    doc: z.optional(z.object({
        relationTo: z.string(),
        value: z.any(),
    })),
})

type RichTextChildData = z.infer<typeof RichTextChildSchema> & {
    children?: RichTextChildData[];
}

const RichTextSchema: z.ZodType<RichTextChildData[]> = z.array(
    RichTextChildSchema.extend({
        children: z.lazy(() => RichTextSchema.optional()),
    }),
);
type RichTextData = z.infer<typeof RichTextSchema>;

Rich text field component

function RichTextField(props: {data: RichTextData}) {
    return (
        <div className="field field__richtext">
            {serialize(props.data)}
        </div>
    );
}

function serialize(children: RichTextData) {
    return children.map((node, i) => {
        if (typeof node === "object" && node.text) {
            let text: string | JSX.Element = node.text;

            if (node.bold) {
                text = <strong key={i}>{text}</strong>;
            }
            if (node.code) {
                text = <code key={i}>{text}</code>;
            }
            if (node.italic) {
                text = <em key={i}>{text}</em>;
            }
            if (node.underline) {
                text = <u key={i}>{text}</u>;
            }
            if (node.strikethrough) {
                text = <s key={i}>{text}</s>;
            }

            return (
                <Fragment key={i}>{text}</Fragment>
            );
        }

        if (!node.children) {
            return null;
        }

        switch (node.type) {
            case "h1":
                return <h1 key={i}>{serialize(node.children)}</h1>;
            case "h2":
                return <h2 key={i}>{serialize(node.children)}</h2>;
            case "h3":
                return <h3 key={i}>{serialize(node.children)}</h3>;
            case "h4":
                return <h4 key={i}>{serialize(node.children)}</h4>;
            case "h5":
                return <h5 key={i}>{serialize(node.children)}</h5>;
            case "h6":
                return <h6 key={i}>{serialize(node.children)}</h6>;
            case "quote":
                return <blockquote key={i}>{serialize(node.children)}</blockquote>;
            case "ul":
                return <ul key={i}>{serialize(node.children)}</ul>;
            case "ol":
                return <ol key={i}>{serialize(node.children)}</ol>;
            case "li":
                return <li key={i}>{serialize(node.children)}</li>;
            case "link":
                return richTextLink(node, i);
            default:
                return <p key={i}>{serialize(node.children)}</p>;
        }
    });
}

function richTextLink(node: RichTextChildData, index: number) {
    if (node.linkType === "custom" && node.children) {
        return <a key={index} target="_blank" href={escapeHTML(node.url)} rel="noopener noreferrer">{serialize(node.children)}</a>;
    }

    if (node.children && node.doc && node.doc.value.slug) {
        const url = `/${node.doc.relationTo}/${node.doc.value.slug}`;

        return <Link key={index} href={url}>{serialize(node.children)}</Link>
    }

    return null;
}