[Feature] Highlight the selected options under Rich inputs.

[GouravNG]

This PR adds the requested feature #2388 .
When user selects any of the rich inputs (Bold, italic etc. ) visual feedback is shown for the selected item.

Screenshot of working feature for reference.

Summary by CodeRabbit

• Style
  • Rich text editor toolbar now shows active/inactive states for formatting controls for clearer visual feedback.
  • Active states cover bold, italic, underline, strikethrough, highlight, inline/code block, headings (H1–H3), paragraph, text alignment (left/center/right/justify), and bullet/numbered lists.
  • Improves editing clarity and consistency; no behavioral or API changes.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds data-state attributes to toolbar controls in rich-input.tsx, setting each control to "on" when editor.isActive(...) and "off" otherwise for many formatting options; only presentation/state indication is changed, no control-flow or public API edits. (≤50 words)

Changes

Cohort / File(s)	Summary
Rich input toolbar data-state attributes libs/ui/src/components/rich-input.tsx	Add data-state="on" / "off" to toolbar buttons based on editor.isActive(...) for: bold, italic, strike, underline, highlight, code, codeBlock, headings (h1–h3), paragraph, text alignment (left/center/right/justify), bulletList, orderedList. Presentation-only change; no logic/API changes.

Sequence Diagram(s)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A rabbit taps keys, gives toolbar a glance,
Tiny data-state lights make formats dance.
No logic disturbed, just a clearer display—
I twitch my nose, approve, and hop away. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly and succinctly summarizes the primary change, which is adding visual highlighting for selected rich input options, directly matching the PR’s implementation of active state indicators on toolbar controls.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4efdabd and 9bdc61b.

📒 Files selected for processing (1)

• libs/ui/src/components/rich-input.tsx (17 hunks)

🔇 Additional comments (4)

libs/ui/src/components/rich-input.tsx (4)

251-251: LGTM!

The heading buttons (H1, H2, H3) correctly apply bg-secondary styling when their respective heading levels are active, properly including the { level: N } parameter in the active state check.

Also applies to: 264-264, 277-277

---

289-289: LGTM!

The paragraph button correctly applies bg-secondary styling when paragraph formatting is active.

---

302-302: LGTM!

The text alignment buttons (Left, Center, Right, Justify) correctly apply bg-secondary styling when their respective alignment states are active, properly using the { textAlign: "..." } object parameter in the active state check.

Also applies to: 315-315, 328-328, 341-341

---

354-354: LGTM!

The list buttons (Bullet List, Numbered List) correctly apply bg-secondary styling when their respective list formats are active.

Also applies to: 367-367

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

libs/ui/src/components/rich-input.tsx (1)

284-294: Add disabled prop to Paragraph toggle
The Paragraph toggle lacks a disabled check. Mirror other toolbar buttons by adding
disabled={!editor.can().chain().focus().setParagraph().run()}
to the <Toggle> in libs/ui/src/components/rich-input.tsx (lines 284–294).

🧹 Nitpick comments (1)

libs/ui/src/components/rich-input.tsx (1)

154-154: The manual data-state attributes are redundant.

Radix UI's Toggle component automatically sets data-state to "on" or "off" based on the pressed prop you're already providing. Manually adding data-state duplicates this built-in behavior without adding value, and could cause confusion if the two ever drift out of sync during maintenance.

Remove the data-state attributes from all Toggle components and rely on the component's built-in behavior:

       <Toggle
         size="sm"
         type="button"
         pressed={editor.isActive("bold")}
         disabled={!editor.can().chain().toggleBold().run()}
-        data-state={editor.isActive("bold") ? "on" : "off"}
         onPressedChange={() => editor.chain().focus().toggleBold().run()}
       >

Apply similar changes to all 17 Toggle components (lines 154, 167, 180, 193, 206, 225, 238, 251, 264, 277, 289, 302, 315, 328, 341, 354, 367).

Also applies to: 167-167, 180-180, 193-193, 206-206, 225-225, 238-238, 251-251, 264-264, 277-277, 289-289, 302-302, 315-315, 328-328, 341-341, 354-354, 367-367

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9bdc61b and 21fd079.

📒 Files selected for processing (1)

• libs/ui/src/components/rich-input.tsx (17 hunks)