Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

lexical editor panel doesn't show

default discord avatar
vupham2909last year
28

Hi team, I just updated to the newest release yesterday. Today I just integrated with the lexicalEditor, but it didn't show the panel



I just found that it works perfectly outside the type

blocks

? What's going on here?



Like that

  • default discord avatar
    vansofflast year

    If you're not modifying default features in any way, there's no need to return them, just use old regular lexicalEditor()


    Passing and modifying default features would be beneficial only if you needed to restrict node type that you can use or added a new custom feature

  • default discord avatar
    vupham2909last year

    Yes I do it



    But still doesn't work



    I tried many ways, came to the docs but no idea until now



    If I use the richText field inside the blocks field, it doesn't show the panel

  • default discord avatar
    vansofflast year

    can you provide collection config including your accordion?

  • default discord avatar
    vupham2909last year

    build config



    accordion config

  • default discord avatar
    vansofflast year

    I mean in text 🙂

  • default discord avatar
    vupham2909last year

    oh sorry



    export default buildConfig({
        admin: {
            user: Users.slug,
        },
    
        // Define and configure your collections in this array
        collections: [Media, Pages, Users],
    
        typescript: {
            outputFile: path.resolve(dirname, "payload-types.ts"),
        },
    
        // If you'd like to use Rich Text, pass your editor here
        editor: lexicalEditor(),
    
        // Your Payload secret - should be a complex and secure string, unguessable
        secret: ENV.PAYLOAD_SECRET,
    
        // Whichever database adapter you're using should go here
        // Mongoose is shown as an example, but you can also use Postgres
        db: mongooseAdapter({
            url: ENV.PAYLOAD_DATABASE_URI,
        }),
    
        // If you want to resize images, crop, set focal point, etc.
        // make sure to install it and pass it to the config.
        // This is optional - if you don't need to do these things,
        // you don't need it!
        sharp,
    
        // Configuring email for the CMS
        // email: emailConfiguration,
    
        plugins: [
            // storage-adapter-placeholder
        ],
    });


    export const Accordion: Block = {
        slug: "accordion",
        fields: [
            {
                name: "heading",
                type: "text",
            },
            {
                name: "content",
                type: "richText",
                required: true,
            },
        ],
    };
  • default discord avatar
    vansofflast year

    oh, stop, you forogt to add editor to accodrion richText field, mate



    just add:


    editor: lexicalEditor()

  • default discord avatar
    vupham2909last year

    still not work 😦



    i added it yet



    I think maybe that's a minor bug for the latest released

  • default discord avatar
    vansofflast year

    was it working before?

  • default discord avatar
    vupham2909last year

    still not working



    it showed the rich text field, but didn't show the panel when we typed "/"

  • default discord avatar
    vansofflast year

    I mean before updating your release was it workign?

  • default discord avatar
    vupham2909last year

    oh I just added the lexical after installed the newest release

  • default discord avatar
    vansofflast year

    and what is the version of release?

  • default discord avatar
    vansofflast year

    It's probably a bug, I haven't used payload 3.0 yet.


    My version is 2.19.3

  • default discord avatar
    vupham2909last year

    oh you're still using the payload 2.0



    is it a huge difference when integrate with Next.js?

  • default discord avatar
    vansofflast year

    I use custom server and it works fine:


    https://github.com/payloadcms/payload/blob/beta/examples/custom-server/src/server.ts

    The only issue that I couldn't find a workaround for was using local pyalod api with postgres and using unstable_cache for caching my pages at build time.

  • default discord avatar
    vupham2909last year

    thank you Ivan



    Maybe waiting for the new released from the team

  • default discord avatar
    finitevoidlast year

    I'm no member of payload team. But, generally, it's not good discord etiquette to tag core members. If you find a bug or issue, follow the guidelines on their github.



    Typically, create a minimal reproduction of your bug and don't give them a long discord thread to parse through.



    ^

  • default discord avatar
    vupham2909last year

    Thanks for that



    Removed it 🤗

  • default discord avatar
    finitevoidlast year
    :prayge:
  • default discord avatar
    eddyhdzglast year

    I have the same problem. It's been 2 hours and I still can't solve it.

  • default discord avatar
    vupham2909last year
  • default discord avatar
    eddyhdzglast year

    Still not working

  • default discord avatar
    vupham2909last year

    Fixed in my project



    Did you get the latest code?

  • default discord avatar
    eddyhdzglast year

    v: 3.0.0-beta.65



    and still



    are you using multiple locales?

  • default discord avatar
    vupham2909last year

    No



    So if it didn’t fix your problem, i think you should create an issue on GitHub

  • discord user avatar
    alessiogr
    last year

    ^ and make sure to include a minimal reproduction on the latest version. Might be a different issue very specific to your setup, so I'll need that to check it out

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.