How to convert RichText JSON into HTML?

isamardzija

2 months ago

Hi!

Right now I'm having a roadblock with one of my projects. My client needs a website with an "About Us" page that they can update periodically. My first idea was to create a Markdown post in a Payload collection, which I would then fetch and build using a static site builder.

As I don't think that Payload supports Markdown out of the box, I instead chose to use RichText. But now I'm stuck on the part where the Payload API is sending the RichText using JSON, and things got a little messy with the nesting and empty spaces.

I saw the blurb about serialization, but I wasn't able to set it up on my own.

So I'm looking for advice on how to best deal with this... should I keep going this or choose another way?

Thanks in advance!

Martin R
2 months ago
Maybe this can inspire you 🙂

https://github.com/payloadcms/website/tree/main/src/components/RichText
isamardzija
2 months ago
Thank you, I'll check it out.
ElliotYoYo
2 months ago
You can also find a conversion json -> vue here :
https://github.com/payloadcms/payload/discussions/689

thisisnotchris

2 months ago

Not sure how helpful this is but at work we use Angular (sadge), but this is what I do for a modal that has richText content

            <div *ngFor="let content of modalContent;">
                <div
                     *ngIf="content.type === 'h1' || content.type === 'h2' || content.type === 'h3' || content.type === 'h4'">
                    <div class="text-xl font-semibold"
                         *ngFor="let leaf of content.children;">
                        {{leaf.text}}
                    </div>
                </div>
                <div class="py-2"
                     *ngIf="!content.type">
                    <span *ngFor="let leaf of content.children;"
                          [ngClass]="{'font-bold': leaf.bold, 'italic': leaf.italic, 'underline': leaf.underline}">
                        {{leaf.text}}
                    </span>
                </div>
            </div>

Could be better, but gets the job done for what we needed

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.