[Bug]: contentEditable prop breaks table functionality

[jomifepe]

Affected Packages

extension-table, extension-table-row, extension-table-cell, extension-table-header

Version(s)

2.11.5

Bug Description

Hello!

I'm building a table with other elements around it, which I'm creating in addNodeView of the Table node. My goal is to have more UI elements around it but prevent the table from being removed or these extra elements from being editable. Currently, it's possible to append text to them, which is not the behavior I want, only the table cells should be editable. Here is roughly the current structure:

Add columnAdd row

That said, I'm trying to use the contentEditable prop, as it seems like the best way to prevent content editing without resorting to hacks. My approach consists of setting contentEditable="false" in the elements above the table and contentEditable="true" in the table element, or even in the table cells, the only place content editing matters. I tried multiple combinations of this prop, but it always seems to break table editing features:

• Arrow selection no longer works the same and jumps around a bit unpredictably
• Cell selection doesn't deselect when focusing on another cell
• ... And other weird issues

I'm struggling to understand why this happens, so I'm hoping to get some help here.

Thanks in advance!

Browser Used

Chrome

Code Example URL

https://codesandbox.io/p/sandbox/hd88q2

Expected Behavior

The other elements around table should not be editable, but the table functionality should remain the same.

Additional Context (Optional)

prosemirror-tables duplicate issue: ProseMirror/prosemirror-tables#278

Dependency Updates

• Yes, I've updated all my dependencies.