Skip to content

feat: Enter moves selection to cell below in tables (BLO-1006) - #2685

Merged
matthewlipski merged 2 commits into
mainfrom
table-enter-handling
Apr 29, 2026
Merged

feat: Enter moves selection to cell below in tables (BLO-1006)#2685
matthewlipski merged 2 commits into
mainfrom
table-enter-handling

Conversation

@matthewlipski

@matthewlipskimatthewlipski commented Apr 28, 2026

Copy link
Copy Markdown
Collaborator

Summary

This PR makes Enter move the selection to the cell below in a table much as Tab moves it to the cell right. Shift+Enter still creates a hard break as before.

Closes#2409

Rationale

This is more similar to how table keyboard navigation typically works in other apps.

Changes

See above.

Impact

N/A

Testing

Added e2e tests.

Screenshots/Video

N/A

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

Additional Notes

N/A

Summary by CodeRabbit

  • New Features

    • Enter now moves focus to the cell below when editing tables.
    • Shift+Enter inserts a new line inside the current table cell without moving focus.
  • Tests

    • Added end-to-end tests covering Enter and Shift+Enter table behavior.
    • Added cross-browser snapshot fixtures validating expected table document states.

@vercel

vercelBot commented Apr 28, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
blocknoteReadyReadyPreviewApr 28, 2026 2:58pm
blocknote-websiteReadyReadyPreviewApr 28, 2026 2:58pm

Request Review

@coderabbitai

coderabbitaiBot commented Apr 28, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 19570450-b878-498f-8f31-968b6b3b0fc3

📥 Commits

Reviewing files that changed from the base of the PR and between 664328a and bfc12e1.

📒 Files selected for processing (1)
  • packages/core/src/blocks/Table/TableExtension.ts

📝 Walkthrough

Walkthrough

Changes modify Enter/Shift+Enter behavior in table cells: Enter now moves the cursor to the cell below (if present) via table navigation utilities; Shift+Enter inserts a hard line break inside the current cell. End-to-end Playwright tests and JSON snapshots for Chromium, Firefox, and WebKit were added.

Changes

Cohort / File(s)Summary
Core Table Logic
packages/core/src/blocks/Table/TableExtension.ts
Replaces prior Enter handling that inserted hardBreak with logic that checks table context, computes current and next cells (selectionCell, nextCell), and moves selection to the start of the cell below (using prosemirror-tables helpers); imports updated to include TextSelection and cell-navigation helpers.
End-to-end Tests
tests/src/end-to-end/tables/tables.test.ts
Adds two Playwright tests: enterMovesToCellBelow (Enter moves focus to cell below) and shiftEnterNewLineInCell (Shift+Enter inserts newline inside cell).
Test Snapshots
tests/src/end-to-end/tables/tables.test.ts-snapshots/...
enterMovesToCellBelow-json-*-linux.json, shiftEnterNewLineInCell-json-*-linux.json
Adds snapshot JSON fixtures for both scenarios across Chromium, Firefox, and WebKit targets that serialize the expected document state (table rows/cells, cell contents, and trailing paragraph container).

Sequence Diagram(s)

sequenceDiagram
participant User
participant Editor
participant TableExtension
participant ProseMirror
User->>Editor: Press Enter (or Shift+Enter)
Editor->>TableExtension: keydown event -> invoke handler
TableExtension->>ProseMirror: check isInTable / selectionCell
alt Shift+Enter
TableExtension->>ProseMirror: insert hardBreak in current cell
ProseMirror-->>TableExtension: updated doc/selection
TableExtension-->>Editor: render/update
else Enter
TableExtension->>ProseMirror: compute nextCell (vertical)
alt nextCell exists
TableExtension->>ProseMirror: set selection to nextCell start (moveCellForward)
ProseMirror-->>TableExtension: updated doc/selection
TableExtension-->>Editor: scrollIntoView / render
else no nextCell
TableExtension-->>Editor: return false (no-op)
end
end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Hopping keys from cell to cell,
Enter skips down — a tidy spell.
Shift keeps lines where they belong,
The table hums a clearer song. ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately summarizes the main change: Enter key now moves selection to cell below in tables, which is the primary objective of this PR.
Description check✅ PassedThe description follows the template with all major sections completed: Summary, Rationale, Changes, Impact, Testing, and Checklist. All required items are marked as done.
Linked Issues check✅ PassedThe PR addresses both requirements from issue #2409: Enter moves focus to cell below [#2409], and Shift+Enter inserts new line in current cell [#2409].
Out of Scope Changes check✅ PassedAll changes are directly related to the issue objectives: TableExtension.ts implements the Enter navigation logic, and test files verify the new behavior for both Enter and Shift+Enter cases.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch table-enter-handling

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/core/src/blocks/Table/TableExtension.ts`:
- Around line 50-63: The handler is consuming Enter even when nextCell($cell,
"vert", 1) is null; change the logic so you only claim the key event when a next
cell exists and you dispatched a transaction: call dispatch with
TextSelection.between($nextCell, moveCellForward($nextCell)).scrollIntoView()
only if $nextCell is truthy, and return true in that branch; otherwise return
false so the key falls back to the default behavior. Ensure you reference
selectionCell, nextCell, moveCellForward, TextSelection and dispatch when
updating the control flow.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 14ad8bff-c819-4262-800b-03acb165893c

📥 Commits

Reviewing files that changed from the base of the PR and between 15b7dea and 664328a.

📒 Files selected for processing (8)
  • packages/core/src/blocks/Table/TableExtension.ts
  • tests/src/end-to-end/tables/tables.test.ts
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/enterMovesToCellBelow-json-chromium-linux.json
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/enterMovesToCellBelow-json-firefox-linux.json
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/enterMovesToCellBelow-json-webkit-linux.json
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/shiftEnterNewLineInCell-json-chromium-linux.json
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/shiftEnterNewLineInCell-json-firefox-linux.json
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/shiftEnterNewLineInCell-json-webkit-linux.json

Comment threadpackages/core/src/blocks/Table/TableExtension.ts
@pkg-pr-new

pkg-pr-newBot commented Apr 28, 2026

Copy link
Copy Markdown

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: bfc12e1

@nperez0111nperez0111 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works as I'd expect it, thanks @matthewlipski

@matthewlipski
matthewlipski merged commit 6dbd6eb into mainApr 29, 2026
23 checks passed
@matthewlipski
matthewlipski deleted the table-enter-handling branch April 29, 2026 12:46
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enter key inserts new line in table cell instead of moving focus to cell below

2 participants

@matthewlipski@nperez0111