fix: text color was not applying to table block by matthewlipski · Pull Request #2663 · TypeCellOS/BlockNote · GitHub
Skip to content

fix: text color was not applying to table block#2663

Merged
nperez0111 merged 1 commit intomainfrom
table-colors-fix
Apr 22, 2026
Merged

fix: text color was not applying to table block#2663
nperez0111 merged 1 commit intomainfrom
table-colors-fix

Conversation

@matthewlipski
Copy link
Copy Markdown
Collaborator

@matthewlipski matthewlipski commented Apr 20, 2026 •
edited by coderabbitai Bot
Loading

Summary

This PR fixes an issue where changing the text color prop for a table block had no effect. This was due to a difference in how TableViews work vs typical node views (explained in more detail in the code).

Closes #2636

Rationale

This is a bug.

Changes

Added update method to TableView implementation for the table block's node view. It calls the standard TableView update implementation and re-applies HTML attributes from props.

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

Summary by CodeRabbit

  • Bug Fixes

    • Enhanced table block property synchronization to ensure DOM attributes are properly updated when table properties change, improving overall table functionality and reliability.

  • Tests

    • Added end-to-end regression test to verify text color functionality works correctly for table blocks when selected through the block formatting options.

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 20, 2026 •
edited
Loading

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 20, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

Added an update() method to the table block's node view to sync table properties to DOM data-* attributes, ensuring visual changes persist when the table updates. Includes a new end-to-end test verifying table block text color functionality works correctly.

Changes

Cohort / File(s) Summary
Table Block Update Handler
packages/core/src/blocks/Table/block.ts		 Implemented update() override in BlockNoteTableView to sync table node properties to DOM attributes via camelToDataKebab conversion, enabling proper attribute synchronization during node updates.
Table Color Test
tests/src/end-to-end/colors/colors.test.ts		 Added Playwright regression test verifying table block text color functionality using slash-command workflow and snapshot assertion.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested reviewers

  • nperez0111

Poem

🐰 A table's hues were lost in sight,
But now with synced attributes bright,
DOM and props dance in delight,
Colors flourish, colors fight—
BlockNote's tables shine just right! 🎨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title "Fix: Text color not applying to table block" accurately describes the main change - fixing a bug where text color was not being applied to table blocks.
Description check ✅ Passed The PR description covers all essential template sections with sufficient detail: summary of the bug fix, rationale (bug fix), changes made (added update method), impact (N/A for bug fix), testing (e2e test added), and checklist completion.
Linked Issues check ✅ Passed The PR successfully addresses issue #2636 by implementing the update method to properly apply color attributes to table blocks, making colors visually effective when selected.
Out of Scope Changes check ✅ Passed All changes are scoped to fixing the table color bug: the update method in TableView handles prop-to-DOM attribute syncing, and the e2e test validates the fix without unrelated modifications.
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 table-colors-fix

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.

@linear linear Bot mentioned this pull request Apr 20, 2026
Closed
2 tasks
coderabbitai[bot]
coderabbitai Bot reviewed Apr 20, 2026
View reviewed changes
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents 
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@tests/src/end-to-end/colors/colors.test.ts`:
- Around line 118-135: The test "Should be able to set block text color on a
table" is missing a short settle delay after clicking the color swatch, causing
flakiness; update the test (the block using focusOnEditor, executeSlashCommand,
TABLE_SELECTOR, DRAG_HANDLE_SELECTOR, DRAG_HANDLE_MENU_SELECTOR, and
TEXT_COLOR_SELECTOR) to await a small pause (e.g., 500ms) after the
page.mouse.click(...) that selects the color before calling page.screenshot(),
so the drag-handle / Colors submenu animation has time to finish.
🪄 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: 837bc722-93d7-493d-9ebd-5a20800e35a4

📥 Commits

Reviewing files that changed from the base of the PR and between 050ec30 and b7f9993.

⛔ Files ignored due to path filters (3)
  • tests/src/end-to-end/colors/colors.test.ts-snapshots/blockTextColorTable-chromium-linux.png is excluded by !**/*.png
  • tests/src/end-to-end/colors/colors.test.ts-snapshots/blockTextColorTable-firefox-linux.png is excluded by !**/*.png
  • tests/src/end-to-end/colors/colors.test.ts-snapshots/blockTextColorTable-webkit-linux.png is excluded by !**/*.png
📒 Files selected for processing (2)
  • packages/core/src/blocks/Table/block.ts
  • tests/src/end-to-end/colors/colors.test.ts

Comment thread tests/src/end-to-end/colors/colors.test.ts
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 20, 2026 •
edited
Loading

@nperez0111 nperez0111 changed the title Fix: Text color not applying to table block fix: text color was not applying to table block Apr 22, 2026
@nperez0111 nperez0111 merged commit 666ee1e into main Apr 22, 2026
23 checks passed
@nperez0111 nperez0111 deleted the table-colors-fix branch April 22, 2026 13:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@nperez0111 nperez0111 nperez0111 approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Table colors don't work

2 participants

@matthewlipski @nperez0111