search

payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
23.1k stars 1.44k forks source link

Rendering of richtext in the frontend #7058

Open sriechersrc opened 2 months ago

sriechersrc commented 2 months ago

Documentation Issue

I cannot find any helpful information on how to render richtext the correct way in the frontend. I am running a next js application with payload v3. I am currently using this package to render the content but it isn't as customizable as I'd wish. Is there a more straight forward "payload native" way of doing this?

yobottehg commented 2 months ago

@sriechersrc did you try the HTML converter ? https://payloadcms.com/docs/beta/lexical/converters#lexical-html

sriechersrc commented 2 months ago

@yobottehg yes, but I need to control how the html is rendered i.e. use react components. The html converter only spits out normal html if I understand correctly? In my case I need to "remap" the tags to their corresponding components in my code. For example an <a> tag needs to be rendered as a NextJS <Link />

AndKenneth commented 1 month ago

@sriechersrc The demo website repo contains a "serialize" function which seems to be the right approach if you want full control.

https://github.com/payloadcms/public-demo/blob/master/src/app/_components/RichText/serialize/index.tsx

sriechersrc commented 1 month ago

@AndKenneth thanks! This is exactly the solution I was looking for.