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?
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 @Alessio 🍣 maybe
Yep: check out this threadhttps://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!
wow great please give me a link to your plugin I'll try your solution
(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
@Alessio 🍣 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 (
) while rendering a different component (
). To locate the bad setState() call inside
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
Oh Okay, I'll try it in production
This might be a stupid question but how did you setup a LexicalRichText Block
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
Cool thanks so much. Really love the work you're doing
Oh and congratulations on being mentioned as a potential Slate replacement
Still getting the same error in prod
@roac 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
@thisisnotchris 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)
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
I just updated payload. Seems to be working. Thanks so much @thisisnotchris @Alessio 🍣
Woot! Glad to hear it's working. @Alessio 🍣 did some great work getting this implemented
He really has
How would I go about getting this serialized and implemented on the frontend @thisisnotchris. My project is very similar to payloadcms/website
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
So I've worked with JSON. And I've made quite a few blocks. But I haven't worked with a rich text field
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
thank you!! ❤️
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)
@roac @thisisnotchris 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
Nice work my friend!
Great stuff @Alessio 🍣