feat: Hide trailing block when editor is read-only (BLO-843)

[matthewlipski]

Summary

This PR hides the extra block created if the editor trailingBlock option is set to true or left undefined, when the edidor is read-only.

The block is hidden as opposed to being outright removed to avoid triggering content changes, which is a concern especially in the context of collaboration.

Closes #462

Rationale

The trailing block is pretty useless when read-only - it's whole point is to improve UX when the editor is interactive.

Changes

• Added decoration to TrailingNodeExtension to set .bn-trailing-block CSS class on trailing block.
• Added CSS rule to hide trailing block.

Impact

N/A

Testing

N/A

Screenshots/Video

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 trailing placeholder block visibility in read-only editor mode—it now properly hides when the editor is not editable, providing a cleaner interface for document viewing.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	May 7, 2026 6:24pm
blocknote-website	Ready	Preview	May 7, 2026 6:24pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds trailing block visibility control by implementing a ProseMirror decoration that marks the trailing empty block and then hiding it via CSS when the editor is in read-only mode, resolving the issue of extra empty blocks appearing in read-only editors.

Changes

Trailing Block Visibility Control

Layer / File(s)	Summary
Trailing block decoration logic packages/core/src/extensions/TrailingNode/TrailingNode.ts	Imports Decoration and DecorationSet from prosemirror-view. Implements props.decorations in the plugin that validates the document ends with a blockGroup → blockContainer chain containing an empty inline container, then applies the "bn-trailing-block" class via node decoration.
Read-only mode styling packages/core/src/editor/editor.css	CSS rule hides .bn-trailing-block when the editor is not editable (contenteditable="false").

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• nperez0111

Poem

🐰 A trailing block adorned with class,
Now hides when read-only comes to pass,
No phantom paragraphs in sight,
The document looks perfectly right! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: hiding the trailing block in read-only mode, matching the core objective of the PR.
Description check	✅ Passed	The description covers all major sections with sufficient detail: Summary, Rationale, Changes, Impact, and Testing. Some non-critical sections like Screenshots are empty, which is acceptable.
Linked Issues check	✅ Passed	The PR successfully addresses issue #462 by hiding (not removing) the extra trailing block in read-only mode, preventing unwanted content changes while solving the visibility problem.
Out of Scope Changes check	✅ Passed	All changes are focused and in-scope: CSS rule to hide the trailing block and decoration logic in TrailingNodeExtension to apply the class. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No 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 trailing-block-hidden

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/core/src/extensions/TrailingNode/TrailingNode.ts`:
- Around line 40-47: The decorator is currently inferring trailing blocks by
structure and hides any final empty block (using the bn-trailing-block class) —
instead, change the logic in
packages/core/src/extensions/TrailingNode/TrailingNode.ts (the code around
lastBlockContainer / lastBlockContent and the other similar check at lines
~51-55) to only decorate blocks that were appended by the plugin: add and read a
plugin-scoped marker (plugin state/meta or transaction meta) when the plugin
appends a node, and use that marker to gate applying bn-trailing-block in the
decorate function (or whichever function returns decorations), so only nodes
with the plugin append flag get the class while user-authored empty final
paragraphs remain visible.

🪄 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: 4806afe8-3074-474f-9005-746fdff85789

📥 Commits

Reviewing files that changed from the base of the PR and between 1b53232 and 086beeb.

📒 Files selected for processing (2)

• packages/core/src/editor/editor.css
• packages/core/src/extensions/TrailingNode/TrailingNode.ts

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 086beeb