Can't get node.type using Slate serialize

default discord avatar
Payload-Bot
last month
2

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!



Original message from @chus_asensio - Moved from https://discord.com/channels/967097582721572934/1138194595537236009/1138210029669982228 (in #1138194595537236009)
  • discord user avatar
    alessiogr
    Payload Team
    last month

    Can't get node.type using Slate serialize

  • default discord avatar
    chus_asensio
    last month

    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.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.