Rendering custom elements

[benjick]

Hello.

Sorry, maybe this is out of scope. I'm using this renderer for other Lexical content as well (not through payload) and it works great.

But now I want to add a custom block type to Lexical, it looks like this:

{
    "detail": 0,
    "format": 0,
    "mode": "normal",
    "style": "",
    "text": "The Old Man and the Sea was published in 1952 and the author is Ernest Hemingway.",
    "type": "highlighted-text",
    "version": 1,
    "color": "yellow"
}

Is it possible to render that lexical node with this library? I tried doing it like this:

<PayloadLexicalReactRenderer
  content={JSON.parse(lexical) as PayloadLexicalReactRendererContent}
  elementRenderers={{
    ...defaultElementRenderers,
    "highlighted-text": (
      props: TextNode & {
        color: HighlightedColor;
      },
    ) => {
      return <p className={cn(colorMap[props.color])}>{props.text}</p>;
    },
  }}
/>

But I only get an error: TypeError: i is undefined

I understand if it's out of scope, wanted to check because this is the most reliable Lexical render I've found for React. Thank you for making it

[HriBB]

Same problem here ;)

I simply copy-pasted payloadLexicalReactRenderer.tsx into the project and added missing element renderers.

Also TypeScript complains, if you try to add custom elementRenderers

Would be cool, if we could do this.

[DaveMitten]

There is a PR up for this.

#11

Looks like there is alot of issues with the package itself and needs updating to work with payloadcms lexical editor.