children of my custom node are ignored... why?

[silenius]

Hello,

I've created a simple custom Node with:

export const FlexContainer = Node.create({
    name: 'flexContainer',
    content: 'block*',
    group: 'block',
    inline: false,
    draggable: true,
    selectable: true,
    
    addOptions() {
        return {
            HTMLAttributes: {}
        }
    },
    
    parseHTML() {
        return [
            {
                tag: 'div',
                getAttrs: element => element.classList.contains('flex') && null
            },
        ]
    },

    renderHTML({ node, HTMLAttributes }) {
        return [
            'div', 
            mergeAttributes(
                HTMLAttributes, {
                    'class': 'flex',
                }
            )
        ]
    },
})

Extensions (Document, Paragraph, Text, flexContainer, ...) have been properly added to my editor instance, however when I'm feeding the editor with:

<div class="flex"><p>testABCD</p><p>testEFGH</p></div>

it renders:

<div contenteditable="false" translate="no" class="tiptap ProseMirror"><div class="flex" contenteditable="false" draggable="true"></div></div>

I don't understand why my two paragraphes aren't displayed although they are blocks and content: 'block*' has been set in my custom node ...?

Thanks!

[nperez0111]

You didn't add a "hole" for your content to be rendered into.

Try this:

export const FlexContainer = Node.create({
    name: 'flexContainer',
    content: 'block*',
    group: 'block',
    inline: false,
    draggable: true,
    selectable: true,
    
    addOptions() {
        return {
            HTMLAttributes: {}
        }
    },
    
    parseHTML() {
        return [
            {
                tag: 'div',
                getAttrs: element => element.classList.contains('flex') && null
            },
        ]
    },

    renderHTML({ node, HTMLAttributes }) {
        return [
            'div', 
            mergeAttributes(
                HTMLAttributes, {
                    'class': 'flex',
                }
            ),
            0 // This is a "hole" that indicates to prosemirror where to mount the content of this element into
        ]
    },
})

[silenius]

@nperez0111: thank you very much, it works with the extra ',0' 👍