I've been trying to work out how to use serialize from the default Payload configuration for the Slate rich text editor, but I can't get node.type, so all my elements default to a <p>.
Here's our serialize.tsx:
import React, { Fragment } from 'react';
import escapeHTML from 'escape-html';
import { Text } from 'slate';
const serialize = (children): React.ReactElement[] =>
children.map((node, i) => {
if (Text.isText(node)) {
let text = escapeHTML(node.text);
// @ts-expect-error must add better types for node
if (node.bold) {
text = <strong key={i}>{text}</strong>;
}
return <Fragment key={i}>{text}</Fragment>;
}
if (!node) {
return null;
}
switch (node.type) {
case 'h1':
return <h1 key={i}>{serialize(node.children)}</h1>;
case 'h6':
return <h6 key={i}>{serialize(node.children)}</h6>;
case 'ul':
return <ul key={i}>{serialize(node.children)}</ul>;
case 'li':
return <li key={i}>{serialize(node.children)}</li>;
default:
return <p key={i}>{serialize(node.children)}</p>;
}
});
export default serialize;
The database seems to be storing the Content fine, but it's ignoring the 'type' from the parent objects when serializing and just rendering everything inside the children.
Any idea on what am I missing? Thank you!
Can't get node.type using Slate serialize
Sorry, my bad. We're using ZOD and the content retreived was being filtered, and no properties like 'type' were showing. We have it working now.
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.