Color text in WYSIWIG editor

saveliilast year

38

• 

  notchrislast year

  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

• 

  Alessio 🍣last year

  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!

• 

  saveliilast year

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

• 

  Alessio 🍣last year

  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

• 

  roaclast year

  @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 (

  Form

  ) while rendering a different component (

  LexicalRichTextFieldComponent2

  ). To locate the bad setState() call inside

  LexicalRichTextFieldComponent2
• 

  Alessio 🍣last year

  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

• 

  roaclast year

  Oh Okay, I'll try it in production

  
  

  
  

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

• 

  Alessio 🍣last year

  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

• 

  roaclast year

  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

• 

  thisisnotchrislast year

  @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

• 

  roaclast year

  @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)
• 

  thisisnotchrislast year

  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

• 

  roaclast year

  You're right

  
  

  
  

  I just updated payload. Seems to be working. Thanks so much @thisisnotchris @Alessio 🍣

• 

  thisisnotchrislast year

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

• 

  roaclast year

  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

• 

  thisisnotchrislast year

  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

• 

  roaclast year

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

• 

  thisisnotchrislast year

  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

• 

  Alessio 🍣last year

  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

• 

  thisisnotchrislast year

  Nice work my friend!

• 

  roaclast year

  Great stuff @Alessio 🍣