prosemirrot-tables : Click to show controls

1

I am working on prosemirror-tables, and I want a feature where I click inside the table on any cell or any part of the table, I want to show some buttons for adding new columns and rows and some buttons for showing the menu.

I can write my custom table node_view, but I can’t figure out how to check if the click happened inside the table. I tried getting view.state.selection, but that will always give textSelection instead of TableSelection.

What I am hoping to achieve is possible or not I am not sure. Can someone help me on this?

Screenshot 2024-11-20 at 2.42.35 PM
Screenshot 2024-11-20 at 2.42.35 PM1886×686 12 KB
Screenshot 2024-11-20 at 2.42.42 PM
Screenshot 2024-11-20 at 2.42.42 PM2024×746 5.97 KB

I tried to do this using event listener, the style gets changes but it does not seem to reflect the styles

 this.dom.addEventListener("click", e => {
            if (
                e.target instanceof HTMLElement &&
                (e.target.closest("td") || e.target.closest("th"))
            ) {
                console.log("clicked inside the table");
                this.isButtonVisible = false;
                this.lastColumnButton.style.display = "block";
            } else {
                console.log("clicked outside the table");
                this.isButtonVisible = true;
                this.lastColumnButton.style.display = "none";
            }
        });
1 Like
2

When you say ‘click inside the table’, do you mean ‘select nodes or text in the table’? If so, try resolving the selection using ‘view.state.selection’ with a ProseMirror plugin.

1 Like
3

When i say “click inside the table” I mean when you the table is active or if you are doing/typing something on the table I should show the buttons which will have a dropdown to have table menu options.

Basically I am trying to build notion like table using prosemirror so when you go in and click on the table it should show a button to get more options

If anyone has worked with custom nodeview and prosemirror tables any help would be appreciated

4

You can look at the milkdown/packages/components/src/table-block/index.ts at main · Milkdown/milkdown · GitHub

And see an table example at Playground | Milkdown