fix: update selected inline content styling

[matthewlipski]

Summary

This PR removes the border from selected inline content and changes the background to a more visible color. Selected block styling remains the same.

Rationale

The current selected inline content styling looks off.

Changes

• Added CSS rule.

Impact

N/A

Testing

N/A

Screenshots/Video

Before:

After:

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

Summary by CodeRabbit

• Style
  • Improved visual highlighting for selected inline elements with a darker translucent background.
  • Removed the inset border from inline selections while preserving existing styling for other selected elements.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	Aug 18, 2026 2:41pm
blocknote-website	Ready	Preview	Aug 18, 2026 2:41pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6c5d2544-d84c-4f34-8eb5-5c923b0750a3

📥 Commits

Reviewing files that changed from the base of the PR and between 1e26f1c and a5bdc22.

📒 Files selected for processing (1)

• packages/core/src/editor/Block.css

Included review availability: Your plan includes up to 10 reviews per rolling hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The editor adds a dedicated selection overlay for inline nodes. The overlay uses a darker translucent background and removes the inset border. Other selected nodes keep the existing styling.

Changes

Inline selection styling

Layer / File(s)	Summary
Inline selection overlay packages/core/src/editor/Block.css	Adds a specialized overlay for selected inline nodes with a darker translucent background and no box shadow.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Merge Risk: ⚪ Minimal · up to a5bdc

This change only updates the visual styling of selected inline content while leaving selected block styling unchanged; no actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: nperez0111, yousefed

Poem

A rabbit hops through highlighted space,
Inline nodes now have a clearer place.
Darker shade, border gone,
Selection shines on.
“Neat!” says the rabbit with grace.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers the required sections and clearly explains the styling change, rationale, impact, screenshots, and checklist status.
Title check	✅ Passed	The title clearly and concisely identifies the update to selected inline content styling.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch selected-node-inline-styling

---

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@2983

@blocknote/code-block

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

@blocknote/core

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

@blocknote/diagram-block

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

@blocknote/mantine

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

@blocknote/math-block

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: a5bdc22

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://TypeCellOS.github.io/BlockNote/pr-preview/pr-2983/
Built to branch gh-pages at 2026-08-18 14:49 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[YousefED]

Nice. Tested on both dark and light mode? seems like those should be different colors, right?

[nperez0111]

I wonder if it would've been better as an outline rather than a border?