Dropping text in front of a table produces a broken table

[mr1name]

When dropping text, prosemirror attempts to calculate the insert position via posAtCoords. In this case, it uses the element's bounding box. So if the cursor gets there, rather than adjusting the position, it assumes that the insertion occurs at the depth level of the table rows and looks for suitable neighbors for the new element and finds tableRow.

A table that is created in this way is invisible and broken. It cannot be deleted via Backspace (throws error), properly selected, etc. To reproduce this, just go to any prosemirror example with tables. For example, tiptap or prosemirror-tables demo. https://prosemirror-tables.netlify.app/

From my understanding the problem is in the core prosemirror logic and is not related directly to tables or any integrations. And it is probably much more general, so tables are just one of the scenarios.

Screen.Recording.2025-01-31.at.11.47.52.mov

[marijnh]

I would say the problem is related to the table code. It defines a table row as having zero or more children (which is needed because due to rowspans, you can have valid tables with empty rows), so when a table row is cut in two by dropped content, the ProseMirror core decides that leaving a table with an empty row in front of the dropped content should be fine. The appropriate solution would probably be to have the table-fixing code in prosemirror-tables/src/fixtables.js, which currently only ensures tables are rectangular, also check for empty tables and delete them.

[mr1name]

@marijnh That's pretty much how we fixed it for ourselves. I just felt like it was a hack and not a proper solution.
hcengineering/platform#7848

If you think this is the most suitable option, I may also integrate this logic into tableFixer via PR.

[marijnh]

I don't maintain prosemirror-tables , but I'd say this is a bug, and a PR that addresses it would probably be welcome there.