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?

[matthewlipski]

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

Color is the same for both because it's a translucent overlay, so it looks different on light and dark mode because the light/dark background is still visible behind it.

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

Tried that but wasn't a fan. For selected inline content to look good with a border you'd need to add padding, else the border can overlap content inside. The added padding then looks weird when the inline content isn't selected, as there is additional empty space before and after. I briefly considered adding the padding only when selected but having text around the inline content get repositioned because of it felt janky.