Skip to content

feat: show active state on color toolbar button#93

Merged
j4rviscmd merged 2 commits intomainfrom
feat/color-button-active
Mar 28, 2026
Merged

feat: show active state on color toolbar button#93
j4rviscmd merged 2 commits intomainfrom
feat/color-button-active

Conversation

@j4rviscmd
Copy link
Copy Markdown
Owner

Summary

  • Replace BlockNote's default ColorStyleButton with a custom CustomColorStyleButton that visually indicates when a text or background color is active
  • When a color is applied, the toolbar button shows the same accent background as other active commands (bold, italic, etc.)
  • Exclude the highlighter style (backgroundColor: "highlight") from the color button's active detection so the two features don't interfere
  • Match the Toggle button padding for consistent toolbar sizing

Test plan

  • Select text and apply a text color → color button shows active accent background
  • Select text and apply a background color → color button shows active accent background
  • Apply highlighter (fluorescent yellow) → color button does NOT show active state
  • Remove all colors → color button returns to inactive state
  • Color picker dropdown still works correctly (text and background color selection)
  • Button width matches other toolbar buttons

🤖 Generated with Claude Code

j4rviscmd and others added 2 commits March 28, 2026 09:54
Replace BlockNote's default ColorStyleButton with a custom
implementation that visually indicates when a text or background
color is applied, matching the active style of other formatting
buttons (bold, italic, etc.).

- Add CustomColorStyleButton with CSS class-based active state
- Exclude highlighter style from color active detection
- Match Toggle button padding for consistent toolbar sizing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@j4rviscmd j4rviscmd added the enhancement New feature or request label Mar 28, 2026
@j4rviscmd j4rviscmd merged commit 3e90e0f into main Mar 28, 2026
2 checks passed
@j4rviscmd j4rviscmd deleted the feat/color-button-active branch March 28, 2026 01:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant