Skip to content

fix: Table cell colors (BLO-1198)#2770

Open
matthewlipski wants to merge 4 commits into
mainfrom
cell-colors-fix
Open

fix: Table cell colors (BLO-1198)#2770
matthewlipski wants to merge 4 commits into
mainfrom
cell-colors-fix

Conversation

@matthewlipski
Copy link
Copy Markdown
Collaborator

@matthewlipski matthewlipski commented May 22, 2026 •
edited by coderabbitai Bot
Loading

Summary

PR #2684 caused a regression for highlight colors in a few places. PR #2762 fixed those regressions for the color picker icons, but table cells remained broken.

After review, the reason for the regression in #2684 was caused by the removal of the following CSS selector for applying colors:

[data-text-color="..."]

This was a mistake - this selector should have been kept, and the .bn-block:has(> .bn-block-content[data-text-color="..."]) added to it, rather than replacing it.

This PR re-adds the removed selector, which covers both table cell & color picker icon colors.

Closes #2760

Rationale

This is a regression.

Changes

See above.

Impact

N/A

Testing

Added e2e test.

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

  • Refactor

    • Updated color styling implementation to use improved selectors for applying text and background colors throughout the editor interface.

  • Tests

    • Added regression test to validate advanced table cell color rendering functionality.

Review Change Stack

@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026 •
edited
Loading

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

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

Request Review

@matthewlipski matthewlipski requested a review from nperez0111 May 22, 2026 18:32
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 22, 2026 •
edited
Loading

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: b1d7d8b3-6ef1-47f4-9d35-c7d109aba93c

📥 Commits

Reviewing files that changed from the base of the PR and between 118d8dc and 8ab1ee8.

⛔ Files ignored due to path filters (3)
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-chromium-linux.png is excluded by !**/*.png
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-firefox-linux.png is excluded by !**/*.png
  • tests/src/end-to-end/tables/tables.test.ts-snapshots/tableCellColors-webkit-linux.png is excluded by !**/*.png
📒 Files selected for processing (4)
  • packages/core/src/editor/Block.css
  • packages/react/src/editor/styles.css
  • tests/src/end-to-end/tables/tables.test.ts
  • tests/src/utils/const.ts
📝 Walkthrough

Walkthrough

This PR fixes table cell text and background color rendering by refactoring CSS selectors to target data-text-color and data-background-color attributes directly, and validates the fix with a new visual regression test.

Changes

Table Cell Colors Fix

Layer / File(s) Summary
CSS color attribute selectors
packages/core/src/editor/Block.css, packages/react/src/editor/styles.css		 Text and background color rules now target [data-text-color] and [data-background-color] attributes directly on elements and wrapping .bn-block selectors, replacing prior [data-style-type][data-value] patterns and removing intermediate .bn-color-icon selectors.
Table cell color visual regression test
tests/src/utils/const.ts, tests/src/end-to-end/tables/tables.test.ts		 Test infrastructure refactored to move page navigation from a shared beforeEach hook into individual tests; ADVANCED_TABLES_URL constant added; new regression test validates table cell color rendering via screenshot comparison to tableCellColors.png.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • TypeCellOS/BlockNote#2762: Modifies the same packages/react/src/editor/styles.css color selectors to style .bn-color-icon elements with correct colors, directly complementing this PR's selector targeting changes.
  • TypeCellOS/BlockNote#2663: Fixes table node view to reapply data-text-color and data-background-color attributes for updated props, enabling this PR's direct attribute selectors to take effect.
  • TypeCellOS/BlockNote#2684: Modifies the same block and highlight color CSS selector logic in packages/core/src/editor/Block.css and related styling, directly connected to this PR's selector rewrites.

Suggested reviewers

  • nperez0111
  • YousefED

Poem

🐰 CSS selectors dance with data attributes so fine,
Table cells now glow in colors they assign—
From data-text-color to data-background hue,
The screenshot test confirms the colors shine through! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The PR title 'fix: Table cell colors (BLO-1198)' directly addresses the main issue being fixed—table cell color application regression.
Description check ✅ Passed The description covers all major sections including summary, rationale, changes, and testing. Issue #2760 is properly closed and the root cause is explained.
Linked Issues check ✅ Passed The PR successfully re-adds the [data-text-color] and [data-background-color] CSS selectors that fix the regression for table cell colors reported in #2760, with added e2e test coverage.
Out of Scope Changes check ✅ Passed All changes directly address the regression: CSS selector restoration in Block.css and styles.css, plus e2e test for table cell colors. No unrelated changes 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 cell-colors-fix

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/core/src/editor/Block.css

Parsing error: Declaration or statement expected.

packages/react/src/editor/styles.css

Parsing error: Expression expected.

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.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 22, 2026 •
edited
Loading

Open in StackBlitz

@blocknote/ariakit

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

@blocknote/code-block

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

@blocknote/core

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

@blocknote/mantine

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

@blocknote/react

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

@blocknote/server-util

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

@blocknote/shadcn

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

@blocknote/xl-ai

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

@blocknote/xl-docx-exporter

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

@blocknote/xl-email-exporter

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

@blocknote/xl-multi-column

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

@blocknote/xl-odt-exporter

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

@blocknote/xl-pdf-exporter

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

commit: 8ab1ee8

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.

Table cell text color & background color not applied via Table Handle Menu

1 participant

@matthewlipski