Trying to create context menu for Table

1

I’m trying to create a context menu for a table. To that effect, I’ve started with what is essentially the table demo. I then create a node view

TableView {
    construct(node, view, getPos) {
        this.dom = DOMSerializer.fromSchema(view.state.schema).serializeNode(node);
}

However, as soon as I add the assignment of this.dom, I am unable to edit the cells. When I inspect the dom, I see I have contenteditable=“false” set on the table.

My goal is to be able to add

this.dom.addEventListener("contextmenu", ...

Am I missing something?

2

Look into contentDOM. Also, you probably don’t want to serialize the entire node including content, just create the wrappers at that level of the node hierarchy.

1 Like
3

Thanks so much! For anyone else that finds this and wants to do a context menu for tables, this worked for me

TableView {
    construct(node, view, getPos) {
        this.dom  = document.createElement('table');
        this.contentDOM = document.createElement('tbody');
        this.dom.appendChild(this.contentDOM);
        this.dom.addEventListener("contextmenu", (e) => {
            e.preventDefault();
            // handle right click event here;
        });
    }
}
1 Like