Trying to create context menu for Table


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?


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.


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.addEventListener("contextmenu", (e) => {
            // handle right click event here;