Adding a span node in a table cell

1

I am trying to build a menu inside a table cell and able to do that by specifying a span node in the spec and adding it to the cellContent.

  tableGroup: "block",
  cellContent: "spanNode block+",
  cellAttributes: {
     background: {...

And the spanNode looks something like this:

spanNode: {
    atom: true,
    isolating: true,
    parseDOM: [{tag: "span"}],
    toDOM() { return ["span", {class: "dropdown-menu"}] }
  },

Now I am able to generate the span node as expected and able to add a menu to the span node.

spanNode
spanNode2408×331 10.2 KB
The problem is when I select a (or multiple) cell and type in a character, the character is splitting the table into two by creating a new paragraph node instead of deleting and appending to the current cell’s text node.
image
image2163×523 21.1 KB

I tried to set the isolating flag to true on the spanNode, but it didn’t make a difference.

Reading similar posts that talk about using filterTransaction, I am not sure if I really have to go that route. At this point, I want to pause and see if anyone else encountered the same and if so, any suggestions for me? Thanks!

2

Firstly, you probably should not put your dropdown menu in your document. In most circumstances, node views or decorations are a better way to edd controls like that.

What exactly does your selection look like when this happens? Is it a cell selection, or a regular text selection inside the paragraph?

1 Like
3

This happens for cell selection and also when the focus is on the span node. Delete key is working as expected, but any other characters is doing this. Yes, thanks for the suggestion on the decorations. I will look into this. I have never used it before.

4

Thanks for the suggestion on adding decoration. It is the answer to all my questions so far. Contenteditable is also set to false on the span node added from the decoration. Following the columnResizing plugin, I was able to build a plugin to achieve what I wanted. Thanks again.