How to convert RichText JSON into HTML?

default discord avatar
isamardzija
2 months ago
6

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!

  • default discord avatar
    Martin R
    2 months ago
  • default discord avatar
    isamardzija
    2 months ago

    Thank you, I'll check it out.

  • default discord avatar
    ElliotYoYo
    2 months ago

    You can also find a conversion json -> vue here :

    https://github.com/payloadcms/payload/discussions/689
  • default discord avatar
    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.