Rendering React components for rich text blocks

I'm currently working on a 3.0 branch project where I have a few blocks (

,

,

,

). These are available for use in a

collection I have.

I am displaying these on a blog page using

to get the data and then passing it to a render only react component like

.

My issue is the lexical rich text field. I am convering it to HTML using a bunch of custom HTML converters I wrote for each block and

on the content then rendering the raw HTML in a div.

However, the limitation here is I have to return a

(for the converted HTML) in each of my converters that prevents me from using React components which is what I want to use for various reasons.

My question is what is the best practice for rendering the lexical rich text using React components with support for my custom blocks too?

Played around a little more with it and had a look at examples. I see some examples have a

component which seems to implement serialization by re-implementing everything (from

nodes to

etc). What would be nice I think is if the

component fell back to using the default HTML renderers by default but allowed you to explicitly override certain node types as desired (i.e.

).

Going to see if this is possible.

Thanks for sharing! Seems like this approach will work but I feel its a bad pattern to use for all the 'default' lexical components.

On the pro side it lets you customise each element to your needs.

On the cons side most of these are already implemented via default html converters. Even if you copy the implementation across you lose out on bug fixes / improvements in future updates.

I still feel the ideal solution would be:

- Custom logic / overrides for things you want

- Fallback to defaulthtml converters

That way you'd also need to write serialisers for your custom block / inlineBlocks but don't every other thing .

However I need to get something up and running so I'll follow your example approach for now 🙂

I had good success converting everything from HTML converters to ReactNode!

your code was a big help, thanks 🙂

Most nodes are wroking but some I still need to fix up (like checkbox, relationships).

Here is my current WIP:

I did make some structure, naming and other edits. I tried to remove all styling as much as possible and keep it very generic.

In my opinion, by default Payload should provide both HTML Converters and ReactNodeConverters for all the default lexical node types like

,

,

etc.

Take a look at the pattern I adopted here:

In my opinion if payload had

in addition to

, users could get started quicker with a powerful

function out of the box.

Then of course, if needed you can overwrite specific converters and add your own for custom blocks, just as you would for HTML converters.

This would allow people to get started with lexical / rich text much quicker and is a very common use case. Its more than fair to assume almost everyone would want paragraph node support but other opinionated blocks etc should be left out of the default implementation (like custom code blocks etc).

Having to implement such things yourself is annoying.

Can you discuss with the team and let me know your thoughts and if that is a direction the team is happy to go towards? I'd be happy to make a contribute a PR to add this fuctionality into the

branch but only if it will be accepted.

Let me know 🙂

Oh I see so its on the roadmap

I guess your example is basically going to get turned into a default function that is exposed that can be extended etc (basically same as defaultHTMLConverter pattern)

By the way one question, the internal links in your example is broken right?

Ah gotcha, I ended up implementing it

Not sure if ideal but works for my needs:

What is your project if you don't mind sharing? Is it live?

What kind of website is it?

Hi, thats not really related to this post. Try creating a new post focused on your issue.