Are there any good lexical richtext parsers out there?

[outer pivot]

I'm struggling to find a good lexical to jsx parser.. the one I have works, but is missing a few bits.

[marble pewter]

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:

• overview
• creating-your-own-custom-feature
• creating-your-own-html-converter
• drafts
• selecting-a-database

[worthy chasm]

To serialise it into react components?

[outer pivot]

Yeah

[worthy chasm]

I have been using this. I modify it from here - https://github.com/payloadcms/public-demo/blob/master/src/app/_components/RichText/serialize/index.tsx I think @rocky swan may have the done it

[rocky swan]

Yep, that's one way. You can find another way here, which works just like the internal HTML serializers: https://github.com/payloadcms/payload/tree/main/packages/plugin-form-builder/src/utilities/lexical

The benefit there is that the serialization for each node type is in a separate file instead of everything being clumped in the same file.

[worthy chasm]

Super nice. @rocky swan

Definitely a lot cleaner

[rocky swan]

Yep! And that way, it's extensible

Could use different converters for different richtext fields / different platforms for example

[worthy chasm]

Nice. Did you guys fix the bug with blocks and being able to add multiple blocks and use the editor

[rocky swan]

Which bug exactly?

[worthy chasm]

https://github.com/payloadcms/payload/issues/4853

Looks like it's still an issue

https://github.com/payloadcms/payload/issues/4778

[outer pivot]

@rocky swan doesnt look like this one has support for blocks or am I missing something

[frigid cloud]

@outer pivot did you find something to support blocks?

[worthy chasm]

@frigid cloud @outer pivot I'm pretty sure I can write an example of a block converter. Won't have a chance til tomorrow though

[frigid cloud]

Yes please, that would be awesome

[outer pivot]

I already had a snippet to render the html and blocks but was looking for one that had a few more features.

The blocks part I use is below:
RenderBlocks.tsx

"use client";

import { components } from "../_lib/blocks";
import type { Block1Type} from "./Block1";
import type { Block2Type} from "./Block2";

export type Fields = Block1Props | Block2Props;

type Props = {
    fields: Fields;
};

const Block: React.FC<Props> = ({ fields }) => {
    const Block: React.FC<any> = components[fields.blockType!];

    if (Block) {
        return <Block key={fields.id} {...fields} />;
    }

    return null;
};

export default Block;

blocks.ts:

"use client";

import Block1 from "./Block1";
import Block2 from "./Block2";

export const components = {
    "block1": Block1,
    "block2": Block2,
};

inside lexical serializer:

if (_node.type === "block") {
    return <Block fields={_node["fields"]} key={index} />;
}

Hope that makes sense

[worthy chasm]

@outer pivot what type of features

[outer pivot]

@worthy chasm I forgot what all of them were off the top off my head, but one was centering text from lexical