Skip to content

fix: Text cursor flicker in trailing block#2839

Open
matthewlipski wants to merge 1 commit into
mainfrom
trailing-block-flicker-fix
Open

fix: Text cursor flicker in trailing block#2839
matthewlipski wants to merge 1 commit into
mainfrom
trailing-block-flicker-fix

Conversation

@matthewlipski
Copy link
Copy Markdown
Collaborator

@matthewlipski matthewlipski commented Jun 5, 2026 •
edited by coderabbitai Bot
Loading

Summary

Currently, pressing the right or down arrow at the end of the last block in the document makes ProseMirror attempt to move the text cursor into the trailing block. Because the trailing block is just a decoration and can't actually contain the text cursor though, the cursor just flickers and returns to its previous position.

This PR adds explicit keyboard handling to prevent this from happening. Adding user-select: none or other CSS styles/HTML attributes to the trailing block isn't enough to fix the issue itself.

Rationale

The flicker looks janky and unpolished, even it it doesn't functionally do anything.

Changes

  • Added handleKeyDown to TrailingNodeExtension.
  • Updated CSS.

Impact

N/A

Testing

I don't think this can even be tested. The selection doesn't actually update during the flicker AFAIK, so cannot test the editor state and visual regression testing is not really feasible either.

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

  • Bug Fixes
    • Fixed caret flicker when navigating with arrow keys at the end of a document.
    • Prevented text selection on the trailing block element for improved user experience.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 5, 2026 •
edited
Loading

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

Project Deployment Actions Updated (UTC)
blocknote Error Error Jun 5, 2026 9:47am
blocknote-website Error Error Jun 5, 2026 9:47am

Request Review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 5, 2026 •
edited
Loading

Review Change Stack

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: 95636ba7-cfb6-404b-93b3-bf92818dbbec

📥 Commits

Reviewing files that changed from the base of the PR and between ec9c151 and 301e7ec.

📒 Files selected for processing (2)
  • packages/core/src/editor/Block.css
  • packages/core/src/extensions/TrailingNode/TrailingNode.ts
📝 Walkthrough

Walkthrough

This PR prevents unwanted selection movement into the trailing block widget by adding keyboard navigation interception and visual selection prevention. A handleKeyDown handler blocks arrow key navigation that would move the cursor into the trailing widget at document end, while CSS styling prevents text selection on the trailing element.

Changes

Trailing Widget Selection Prevention

Layer / File(s) Summary
Trailing block selection styling
packages/core/src/editor/Block.css		 The .bn-trailing-block element disables user text selection via user-select: none; to prevent visual selection on the trailing widget.
Arrow key handler for trailing position
packages/core/src/extensions/TrailingNode/TrailingNode.ts		 The prosemirror-state import is reformatted to multi-line format, and a handleKeyDown ProseMirror prop is added to intercept ArrowRight and ArrowDown keypresses when selection is empty and at document end, preventing default behavior to avoid caret flicker into the trailing widget.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

  • YousefED
  • nperez0111

Poem

A trailing block now stands its ground,
No arrow keys shall move around,
The cursor stays, selection clear,
No caret flicker, crisp and cheer. 🐰✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: fixing a text cursor flicker issue in the trailing block, which matches the core purpose of the PR.
Description check ✅ Passed The description covers most required template sections: Summary, Rationale, Changes, Impact, and Testing are all present with substantive details. The author explained the issue, reasoning, and testing limitations.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ 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 trailing-block-flicker-fix

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.

@matthewlipski matthewlipski requested a review from nperez0111 June 5, 2026 09:09
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jun 5, 2026 •
edited
Loading

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 301e7ec

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 5, 2026 •
edited
Loading

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://TypeCellOS.github.io/BlockNote/pr-preview/pr-2839/

Built to branch gh-pages at 2026-06-05 09:16 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nperez0111 nperez0111 Awaiting requested review from nperez0111

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@matthewlipski