Regression 0.50.0 : Color Menu render preview

[jbpenrath]

What’s broken?

Since version 0.50.0, the render preview in the color menu is broken (see the screenshot)

What did you expect to happen?

Like previous versions, the color menu should show render color preview properly.

Steps to reproduce

1. Go to https://www.blocknotejs.org/demo
2. Select text to show the toolbar
3. Open the text color menu
4. See that color preview is broken.

BlockNote version

v0.50.0

Environment

React 19.2.4 / Chromium 148.0.7778.97 / Mac OS 26.4.1

Additional context

Claude take :

Root cause — CSS selector was narrowed in 0.50.0
In @blocknote/react/src/editor/styles.css, the rule that colorized the icon was changed.

0.46.2 → 0.49.0 (working):
[data-style-type="textColor"][data-value="red"],
[data-text-color="red"] { /* ← matches .bn-color-icon */
color: var(--bn-colors-highlights-red-text);
}

0.50.0 (broken):
[data-style-type="textColor"][data-value="red"],
.bn-block:has(> .bn-block-content[data-text-color="red"]) { /* ← scoped to editor blocks only */
color: var(--bn-colors-highlights-red-text);
}

The standalone [data-text-color="red"] selector was replaced by a .bn-block:has(> .bn-block-content[...]) selector —
clearly to prevent the rule from leaking onto non-block content inside the editor (a reasonable intent).

Contribution

• I'd be interested in contributing a fix for this issue

Sponsor

• I'm a sponsor and would appreciate if you could look into this sooner than later 💖