fix(core): keep comments when dragging table rows and columns

[adarshsm]

Summary

Fixes #2904. When you drag a table row or column to a new position, any comments on the text in that table are lost.

Rationale

TableHandlesView.dropHandler moved the row or column by rebuilding the table's rows with moveRow/moveColumn, then writing them back with editor.updateBlock. That round trip goes through block JSON, which only keeps styles. Marks that aren't styles, such as the comment mark, get dropped. As @nperez0111 said in the issue, the move should happen in ProseMirror without going through BlockNote JSON.

Changes

• dropHandler now moves the cells in place using prosemirror-tables' moveTableRow / moveTableColumn, which are already available through the ^1.8.5 dependency. Adding and removing rows and columns already works this way, via addRowBefore, deleteColumn, and so on.
  • prosemirror-tables finds the table from the selection, so the command runs against a state whose selection is inside the hovered table. This is the same approach addRowOrColumn / setCellSelection use.
  • The handles use relative indices, so they are converted to the absolute indices prosemirror-tables expects with the existing getAbsoluteTableCells, just as moveRow/moveColumn did.
• Column widths no longer need separate handling. Widths are stored as each cell's colwidth attribute, so they move with the cells. This also removes an in-place splice on this.state.block.content.columnWidths.
• The canRowBeDraggedInto / canColumnBeDraggedInto checks and the final setTextCursorPosition are unchanged.
• moveRow/moveColumn in tables.ts stay as they are. They are still exported and tested.

Impact

Dropping a row or column should give the same table as before, except that marks now survive the move. To check this, I compared the new drop result against the old moveRow/moveColumn + updateBlock output on these tables, and the resulting tables were identical in every case:

• a colspan in row 0, moving the last column left
• a colspan in a lower row, moving columns both left and right across it
• a rowspan in column 0, moving a row up past it
• a rowspan in the last column, moving a row down past it
• a header row, moving row 0 down (header cells stay in position, as before)

Testing

• New packages/core/src/extensions/TableHandles/TableHandles.test.ts (jsdom). It builds a 2×2 table with a comment on one cell, sets up the handles state the way hovering does, and calls dropHandler, once for a row and once for a column. Before this change both tests fail because the moved cell has lost its comment (expected [['c','d'],['a','b']] to deeply equal [['c','d'],['a@thread','b']]). With the change both pass. The column test also checks that columnWidths follow the moved column.
• vp test run in packages/core: all existing tests pass.
• vp lint / vp fmt are clean on the changed files.
• I haven't tried this manually in a browser.

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature (not applicable)

🤖 Generated with Claude Code

[vercel]

@adarshsm is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@3132

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@3132

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@3132

@blocknote/diagram-block

npm i https://pkg.pr.new/@blocknote/diagram-block@3132

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@3132

@blocknote/math-block

npm i https://pkg.pr.new/@blocknote/math-block@3132

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@3132

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@3132

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@3132

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@3132

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@3132

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@3132

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@3132

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@3132

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@3132

@blocknote/xl-typst-exporter

npm i https://pkg.pr.new/@blocknote/xl-typst-exporter@3132

commit: 7ba4bb6

[nperez0111]

This is great to have @adarshsm, I have been meaning to implement this for a long time but thought it would be complicated. Can we add more extensive testing of this though, specifically I would want tests for advanced table test cases like split and merged cells: https://www.blocknotejs.org/docs/features/blocks/tables#split-cells since those are the most tricky to have working. I'm sure that prosemirror-tables handles them properly, but I want to make sure that our tests properly ensure that