How to implement client-side rich text editing on frontend with PayloadCMS's richtext-lexical?

[Rot4tion]

Environment

• PayloadCMS with richtext-lexical plugin
• Next.js application
• React 19

Description

I'm working on a Next.js application that uses PayloadCMS as a headless CMS. I want to implement a feature that allows users to edit rich text content directly in the client-side application, outside of the PayloadCMS admin panel.

Specifically, I'm looking to use the RichTextField component from @payloadcms/richtext-lexical/client in a client component, but I'm having trouble understanding the correct implementation approach.

Questions

1. Is it possible to use PayloadCMS's richtext-lexical editor components in a client-side application outside of the admin panel?

2. What is the recommended approach for implementing client-side rich text editing with PayloadCMS?

3. What are the minimum required props and configuration needed to make the RichTextField component work in a client context?

4. Are there any examples or documentation showing how to implement this kind of feature?

5. How should the edited content be structured to be compatible with PayloadCMS's data model when saving back to the server?

Context

I've explored the PayloadCMS documentation and the richtext-lexical package, but I haven't found clear guidance on implementing rich text editing outside of the admin panel. I'm particularly interested in understanding:

• The proper initialization of the editor
• How to configure features like bold, italic, headings, etc.
• How to handle the editor state
• How to properly save the edited content back to PayloadCMS

Any guidance, examples, or pointers to relevant documentation would be greatly appreciated. Thank you!

[BM-Buschmann]

Good day,
I am currently struggling with a similar scenario. On the client side, I want my users to be able to utilize the "blocks" feature from the Lexical editor to create posts, without granting them access to the Payload admin panel. However, it currently does not seem possible without completely disassembling the Payload Lexical rich text editor itself and rebuilding the component to be independent of the admin UI fields and contexts.

Maybee someone form the Payload Team can confirm this? @denolfe

[tan-ahmed]

Good day, I am currently struggling with a similar scenario. On the client side, I want my users to be able to utilize the "blocks" feature from the Lexical editor to create posts, without granting them access to the Payload admin panel. However, it currently does not seem possible without completely disassembling the Payload Lexical rich text editor itself and rebuilding the component to be independent of the admin UI fields and contexts.

Maybee someone form the Payload Team can confirm this? @denolfe

you can technically allow them into the admin, see & edit only their own posts/content and nothing else.

[BM-Buschmann]

Thought about doing that, but ended up creating a new version of the lexical editor that allows reusing the instance on the client side without the admin panel. Maybe I'll release it later next week.

[rob-at-cortex]

Any pointers on this @BM-Buschmann ?