Color text in WYSIWIG editor

[cursive sandal]

hello everyone, please tell me, I need to add a color palette to the wysiwig payload cms editor to color plain text in different colors, tell me, please, how best to do this? through which tool? integrate slate js?

[faint otter]

I'm on my phone rn, but there is an open topic about this very thing

I'll link it when I'm back or @hot dagger maybe

[hot dagger]

Yep: check out this thread https://discord.com/channels/967097582721572934/1085263676791062528

they added a custom leaf to the richtext editor there which adds support for colors!

2nd option would be using my lexical richtext editor plugin, which has colors integrated by default.
Such a perfect timing to shill for it!

[cursive sandal]

wow great please give me a link to your plugin I'll try your solution

[hot dagger]

Sure! https://github.com/AlessioGr/payload-plugin-lexical (don't install via npm/yarn, you gotta copy the files manually as described in the readme)

keep in mind this is a completely new richtext editor. Completely separate from the default slate one. Meaning you can't transfer over your existing content.

if you want to stay with slate, you can check out how they added color as a custom leaf, that should be pretty simple too

[rich bramble]

@hot dagger Do I still need to copy it over or can i install it using yarn? as the readme has changed. Been getting this error Cannot update a component (Form) while rendering a different component (LexicalRichTextFieldComponent2). To locate the bad setState() call inside LexicalRichTextFieldComponent2

[hot dagger]

nope, you can now install it with yarn! Finally fixed the yarn installs recently ^^

Not sure what causes this error but it's known to me. It doesn't seem to have any negative effects though or break anything, so I'd just ignore it.
Also, I think in production this error actually disappears

[rich bramble]

Oh Okay, I'll try it in production

This might be a stupid question but how did you setup a LexicalRichText Block

[hot dagger]

you mean the payload blocks field?

Definitely check out the demo folder! I added a lexical field to a collection one time with extra customization and one time without

[rich bramble]

Cool thanks so much. Really love the work you're doing

Oh and congratulations on being mentioned as a potential Slate replacement

[rich bramble]

Still getting the same error in prod

[proud fractal]

@rich bramble What error are you getting?

You should be able to install it via yarn/npm now, in addition, it requires the latest version of Payload

[rich bramble]

@proud fractal Im getting this error TypeError: (0 , v.formatListDrawerSlug) is not a function at t.default (main.da1d14a4d95c8ef58142.js:81:107808) at oV (main.da1d14a4d95c8ef58142.js:440:63477) at l (main.da1d14a4d95c8ef58142.js:440:120107) at lu (main.da1d14a4d95c8ef58142.js:440:111552) at ls (main.da1d14a4d95c8ef58142.js:440:111480) at la (main.da1d14a4d95c8ef58142.js:440:111343) at s4 (main.da1d14a4d95c8ef58142.js:440:107713) at s3 (main.da1d14a4d95c8ef58142.js:440:106680) at x (main.da1d14a4d95c8ef58142.js:470:1373) at MessagePort.O (main.da1d14a4d95c8ef58142.js:470:1903)

[proud fractal]

And to confirm it's not working right?

(There should be one lingering error that is non-breaking)

But that list drawer issue sounds like a version issue

Can you check your package.json and tell us the version of Payload you're on

[rich bramble]

You're right

I just updated payload. Seems to be working. Thanks so much @proud fractal @hot dagger

[proud fractal]

Woot! Glad to hear it's working. @hot dagger did some great work getting this implemented

[rich bramble]

He really has

How would I go about getting this serialized and implemented on the frontend @proud fractal. My project is very similar to payloadcms/website

[proud fractal]

So have you worked with displaying the JSON data prior?

The rich text field will expose a bunch of data

That you can parse and display

[rich bramble]

So I've worked with JSON. And I've made quite a few blocks. But I haven't worked with a rich text field

[proud fractal]

Ah okay, the RTF will provide "leaves" or basically the content broken down into objects

If you copy the JSON from the RTF here, i can walk you through it

[hot dagger]

thank you!! ❤️

[hot dagger]

there's also a tutorial in the payload docs on how to serialize it, as far as I know. While that's for the Slate richtext editor, lexical works similarly! (there's 2 examples on how to serialize lexical online as well)

[hot dagger]

@rich bramble @proud fractal just fixed that "Cannot update a component (Form) while rendering a different component (LexicalRichTextFieldComponent2)." error FINALLY in v0.5.0 ^^
Also should come with better performance as the lexical field now does less unnecessary re-renders

[proud fractal]

Nice work my friend!