Color text in WYSIWIG editor

default discord avatar
saveliilast year
38

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?

  • default discord avatar
    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

  • default discord avatar
    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!

  • default discord avatar
    saveliilast year

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

  • default discord avatar
    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

  • default discord avatar
    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
  • default discord avatar
    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

  • default discord avatar
    roaclast year

    Oh Okay, I'll try it in production



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

  • default discord avatar
    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

  • default discord avatar
    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

  • default discord avatar
    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

  • default discord avatar
    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)
  • default discord avatar
    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

  • default discord avatar
    roaclast year

    You're right



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

  • default discord avatar
    thisisnotchrislast year

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

  • default discord avatar
    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

  • default discord avatar
    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

  • default discord avatar
    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

  • default discord avatar
    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

  • default discord avatar
    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

  • default discord avatar
    thisisnotchrislast year

    Nice work my friend!

  • default discord avatar
    roaclast year

    Great stuff @Alessio 🍣

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.