Help overwriting list node (jsx converter)

[kindred rain]

I was able to create a custom upload node and use it in converter function like this:

const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
  ...defaultConverters,
  upload: ({ node }) => <CustomUploadNode node={node} />,
})

I was following this guide:
https://github.com/payloadcms/payload/blob/main/docs/rich-text/converting-jsx.mdx

However, the guide doesn't show list node. Can somebody please advice?

[dry sun]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Lexical Converters - Lexical => JSX
• Custom Features - Server Feature - Feature load order
• Lexical Converters - Lexical => HTML - Creating your own HTML Converter
• Lexical Migration - Migrating from Slate - Converting custom Slate nodes
• Lexical Converters - Lexical => HTML

Community-Help:

• Lexicals RichText Converter not rendering Headings

[kindred rain]

Here is what I'm doing with CustomListNode.tsx so far that doesn't work.

import type { SerializedListNode } from '@payloadcms/richtext-lexical';

const CustomListNode: React.FC<{ node: SerializedListNode; children: React.ReactNode }> = ({ node, children }) => {
  
  if (node.listType === 'bullet') {
    return (
      <ul className="list-disc ml-8 my-4 text-gray-800 dark:text-gray-200 leading-relaxed">
        {children}
      </ul>
    );
  }

  if (node.listType === 'number') {
    return (
      <ol className="list-decimal ml-8 my-4 text-gray-800 dark:text-gray-200 leading-relaxed">
        {children}
      </ol>
    );
  }

  return (
    <ul className="list-none ml-8 my-4 text-gray-800 dark:text-gray-200 leading-relaxed">
      {children}
    </ul>
  );
};

export default CustomListNode;

And try to use it in the Rich Text Renderer like this:

import React from 'react'
import { RichText } from '@payloadcms/richtext-lexical/react'
import type { DefaultNodeTypes, SerializedListNode } from '@payloadcms/richtext-lexical'
import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';
import type { JSXConvertersFunction } from '@payloadcms/richtext-lexical/react'
import CustomUploadNode from './CustomUploadNode';
import CustomListNode from './CustomListNode';

type NodeTypes = DefaultNodeTypes | SerializedListNode;

const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
  ...defaultConverters,
  upload: ({ node }) => <CustomUploadNode node={node} />,
  list: ({ node, children }) => <CustomListNode node={node}>{children}</CustomListNode>,
})

interface RichTextRendererProps {
  content: SerializedEditorState | null | undefined
}

const RichTextRenderer: React.FC<RichTextRendererProps> = ({ content }) => {
  if (!content) return null
  return <RichText data={content} converters={jsxConverters} />
}

export default RichTextRenderer

Here is the error

[kindred rain]

I found the solution.
It turns out I can't just pass the children in there like that. I ended up using nodeToJSX and it works

    // use nodesToJSX to render children
    list: ({ node, nodesToJSX }) => {
        // pass the rendered children to CustomListNode
        const children = nodesToJSX({ nodes: node.children });
        return <CustomListNode node={node}>{children}</CustomListNode>;
    },