Support for other Rich text / wysiwyg editors?

default discord avatar
henrikmaa
last month
37

Hi! Are there any examples of using other rich text/wysiwyg editors with payloadcms or is the slate based one tightly coupled with payloadcms?



Thanks! πŸ˜„

  • default discord avatar
    thisisnotchris
    last month

    @Alessio 🍣 made

    https://github.com/AlessioGr/payload-plugin-lexical


    But I'm not sure it's a great option because...



    It's not setup like a module



    It's very large



    Impressive though

  • default discord avatar
    Alessio 🍣
    last month

    there's been a LOT of progress regarding that though! Many parts of the plugin are completely modularized and customizable πŸ˜„

  • default discord avatar
    thisisnotchris
    last month

    @Alessio 🍣 I did try it out the other day, 2 days ago? I couldn't get it setup correctly tbh

  • default discord avatar
    Alessio 🍣
    last month

    oh hm, what problem did you have exactly? Maybe I can make the set-up easier

  • default discord avatar
    thisisnotchris
    last month

    I think a pattern like



    npm i payload-lexical-editor etc



    in the payload dir



    and then an import



    and it should work



    to be prod ready

  • default discord avatar
    Alessio 🍣
    last month

    oh yeah you can't use that. Npm install is completely broken - you gotta just move it manually into your payload src and it'd work completely fine

  • default discord avatar
    thisisnotchris
    last month

    but that poses the potential of bad deps



    or dated



    etc



    what is broken with install



    ?



    maybe i can help fix it

  • default discord avatar
    Alessio 🍣
    last month

    a bunch of CJS/esm errors, and I think some issues with scss. Additionally I think there's been some issues with modals when you install it.


    Would be really great if you could look into that, I'm really not sure how to fix that

  • default discord avatar
    henrikmaa
    last month

    Thanks! I'll read about that one πŸ˜„



    @Alessio 🍣 Do you know if lexical has support for layout/columns? for example a button which create 2 columns that are 50% each and lets you put content in each column?



    Screenshot is example from keystone editor which is what im looking for



    Skjermbilde_2023-03-29_kl._14.23.48.png
  • default discord avatar
    Alessio 🍣
    last month

    hm that, it can't do yet. It can do left/center/right aligns. And you could technically use tables for that kind of layout. But nothing specifically for that yet



    it for sure

    would

    be possible with lexical itself with a custom node!

  • default discord avatar
    thisisnotchris
    last month

    @Alessio 🍣 Is lexical the top competitor to slate?



    I'm down to help fix the module

  • default discord avatar
    henrikmaa
    last month

    Ok thanks! Yeah i guess it could be done in the slate.js based one aswell with a little custom code

  • default discord avatar
    thisisnotchris
    last month

    but want to confirm theres not a better option

  • default discord avatar
    Alessio 🍣
    last month

    Yep, in my opinion it's the best & latest when it comes to pure richtext. DX is a lot better

  • default discord avatar
    thisisnotchris
    last month

    OK cool good to know

  • default discord avatar
    Alessio 🍣
    last month

    next would come tiptap/prosemirror but I'd definitely prefer slate or lexical over that, as it's more dated

  • default discord avatar
    thisisnotchris
    last month

    Want to start a thread for resolving those npm issues? If you can get me to the part with the issue, I can dive into it a bit



    Or we can just keep it going here

  • default discord avatar
    Alessio 🍣
    last month

    Sure, would definitely really appreciate it! Been just getting headaches with getting npm to work myself to the point where I'm having more hopes with just waiting for my plugin to be integrated into the payload core eventually πŸ˜…



    oh ill make a new one

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

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