AlessioGr / payload-plugin-lexical

Extends payload CMS with Meta's lexical RichText editor - a much more advanced and customizable richtext editor
MIT License
149 stars 6 forks source link

Using lexicalRichTextField in a Payload field type 'array' causing undefined reading 'type' properties error #44

Open georgeharito opened 1 year ago

georgeharito commented 1 year ago

It seems that Lexical loads up fine if it's at the starting/root level of the fields property in a CollectionConfig, but using lexicalRichTextField() as a sub-element in a field of type array causes the following error to appear on screen:

Cannot read properties of undefined (reading 'type')

In Developer Tools console, the following error appears:

Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at $parseSerializedNodeImpl (Lexical.dev.js:7526:1)
    at parseEditorState (Lexical.dev.js:7577:1)
    at LexicalEditor.parseEditorState (Lexical.dev.js:10791:1)
    at initializeEditor (LexicalComposer.dev.js:106:1)
    at LexicalComposer.dev.js:66:1
    at mountMemo (react-dom.development.js:17225:1)
    at Object.useMemo (react-dom.development.js:17670:1)
    at Object.useMemo (react.development.js:1650:1)
    at LexicalComposer (LexicalComposer.dev.js:46:1)
    at renderWithHooks (react-dom.development.js:16305:1)

For example, using lexicalRichTextField() as such, works OK:

const Posts: CollectionConfig = {
    slug: 'posts',
    fields: [
        {
            name: 'title',
            type: 'text',
            required: true,
        },
        lexicalRichTextField({
            name: 'content', 
            label: 'Content',
        }),
    ]
};

... but doing the following causes the error:

const Posts: CollectionConfig = {
    slug: 'posts',
    fields: [
        {
            name: 'title',
            type: 'text',
            required: true,
        },
        {
            name: 'columns',
            type: 'array', 
            minRows: 1, 
            maxRows: 2, 
            labels: {
                singular: 'Column', 
                plural: 'Columns', 
            },
            fields: [
                lexicalRichTextField({
                    name: 'content', 
                    label: 'Content',
                }),
            ],          
        },
    ]
};

(I've edited this comment to add some code examples).

taismassaro commented 1 year ago

I just installed the plugin for the first time and I'm having the same issue. @AlessioGr is there any workaround for this?