Node extensions which matches the same content

1

Hello,

I have a Tiptap-based project with two Node extensions which have a parseHTML that could match the same content:

FlexItem extension

export const FlexItem = Node.create({
    name: 'flexItem',
    parseHTML() {
        return [            
            {   
                tag: '*',           
                getAttrs: element => {                  
                    element.parentNode.classList.contains('flex') && null
                }                                 
            },                                                                 
        ]                                                                                                                                                                                           
    }
    // ...
})

Image extension

export const Image = Node.create({
    name: 'image',
    parseHTML() {
        return [
            {
                tag: this.options.allowBase64
                    ? 'img[src]'
                    : 'img[src]:not([src^="data:"])',
            },
        ]
    }
    // ...
})

So with a content like:

<div class="flex">
    <img src="..." />
    <div>
        <!-- another flex child -->
    </div>
</div>

the <img … > will match two nodes. As a node couldn’t have two different NodeType (?) I was wondering what would be the final NodeType for the <img ...> above? How to deal with such situation and what’s the best approach ..?

(I’m building a WYSIWYG-like editor with TailwindCSS support and in my case I’d like to do “things” (change attributes, etc) if the selected node is of X or Y type (eg: if the node is an Image: allow to change the src attribute, if the node is a FlexItem: display buttons to set attributes like flex basis, align-items, etc)

Thanks!

2

You’ll have to design your node’s HTML representation such that they can actually unambiguously be distinguished. You can play with parse rule priority to control which rule applies first, but if there’s no reasonable way to distinguish the nodes, that’s an issue with your representation.

3

Thank you for your quick reply and explanations, I’ll adapt my code so that nodes can be unambiguously distinguished