From 9bdc61b50d0b3a41cc4231686f8bbbbffdc9e13b Mon Sep 17 00:00:00 2001
From: Gourav <gouravgunaga555@gmail.com>
Date: Mon, 13 Oct 2025 22:07:01 +0530
Subject: [PATCH 1/2] feat(rich-input): Highlight the selected options of rich
 inputs

---
 libs/ui/src/components/rich-input.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/libs/ui/src/components/rich-input.tsx b/libs/ui/src/components/rich-input.tsx
index df72d1c8..d5418012 100644
--- a/libs/ui/src/components/rich-input.tsx
+++ b/libs/ui/src/components/rich-input.tsx
@@ -151,6 +151,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("bold")}
           disabled={!editor.can().chain().toggleBold().run()}
+          className={editor.isActive("bold") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleBold().run()}
         >
           <TextBIcon />
@@ -163,6 +164,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("italic")}
           disabled={!editor.can().chain().focus().toggleItalic().run()}
+          className={editor.isActive("italic") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleItalic().run()}
         >
           <TextItalicIcon />
@@ -175,6 +177,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("strike")}
           disabled={!editor.can().chain().focus().toggleStrike().run()}
+          className={editor.isActive("strike") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleStrike().run()}
         >
           <TextStrikethroughIcon />
@@ -187,6 +190,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("underline")}
           disabled={!editor.can().chain().focus().toggleUnderline().run()}
+          className={editor.isActive("underline") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
         >
           <TextAUnderlineIcon />
@@ -199,6 +203,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("highlight")}
           disabled={!editor.can().chain().focus().toggleHighlight().run()}
+          className={editor.isActive("highlight") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleHighlight().run()}
         >
           <HighlighterCircleIcon />
@@ -217,6 +222,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("code")}
           disabled={!editor.can().chain().focus().toggleCode().run()}
+          className={editor.isActive("code") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleCode().run()}
         >
           <CodeIconImport />
@@ -229,6 +235,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("codeBlock")}
           disabled={!editor.can().chain().focus().toggleCodeBlock().run()}
+          className={editor.isActive("codeBlock") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleCodeBlock().run()}
         >
           <CodeBlockIconImport />
@@ -241,6 +248,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("heading", { level: 1 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive("heading", { level: 1 }) ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         >
           <TextHOneIcon />
@@ -253,6 +261,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("heading", { level: 2 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 2 }).run()}
+          className={editor.isActive("heading", { level: 2 }) ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         >
           <TextHTwoIcon />
@@ -265,6 +274,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("heading", { level: 3 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 3 }).run()}
+          className={editor.isActive("heading", { level: 3 }) ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
         >
           <TextHThreeIcon />
@@ -276,6 +286,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           size="sm"
           type="button"
           pressed={editor.isActive("paragraph")}
+          className={editor.isActive("paragraph") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().setParagraph().run()}
         >
           <ParagraphIconImport />
@@ -288,6 +299,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive({ textAlign: "left" })}
           disabled={!editor.can().chain().focus().setTextAlign("left").run()}
+          className={editor.isActive({ textAlign: "left" }) ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
         >
           <TextAlignLeftIcon />
@@ -300,6 +312,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive({ textAlign: "center" })}
           disabled={!editor.can().chain().focus().setTextAlign("center").run()}
+          className={editor.isActive({ textAlign: "center" }) ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
         >
           <TextAlignCenterIcon />
@@ -312,6 +325,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive({ textAlign: "right" })}
           disabled={!editor.can().chain().focus().setTextAlign("right").run()}
+          className={editor.isActive({ textAlign: "right" }) ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
         >
           <TextAlignRightIcon />
@@ -324,6 +338,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive({ textAlign: "justify" })}
           disabled={!editor.can().chain().focus().setTextAlign("justify").run()}
+          className={editor.isActive({ textAlign: "justify" }) ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().setTextAlign("justify").run()}
         >
           <TextAlignJustifyIcon />
@@ -336,6 +351,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("bulletList")}
           disabled={!editor.can().chain().focus().toggleBulletList().run()}
+          className={editor.isActive("bulletList") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
         >
           <ListBulletsIcon />
@@ -348,6 +364,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("orderedList")}
           disabled={!editor.can().chain().focus().toggleOrderedList().run()}
+          className={editor.isActive("orderedList") ? "bg-secondary" : undefined}
           onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
         >
           <ListNumbersIcon />

From 21fd079f943472396124df1352d23693f0b792ac Mon Sep 17 00:00:00 2001
From: Gourav <gouravgunaga555@gmail.com>
Date: Mon, 13 Oct 2025 22:52:25 +0530
Subject: [PATCH 2/2] feat(rich-input): updating datastate on pressing rich
 input options

- when selecting the rich input option earlier only aria-pressed="true" was changing and not datastate now updated the code to manually update the data-state
---
 libs/ui/src/components/rich-input.tsx | 34 +++++++++++++--------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/libs/ui/src/components/rich-input.tsx b/libs/ui/src/components/rich-input.tsx
index d5418012..37134362 100644
--- a/libs/ui/src/components/rich-input.tsx
+++ b/libs/ui/src/components/rich-input.tsx
@@ -151,7 +151,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("bold")}
           disabled={!editor.can().chain().toggleBold().run()}
-          className={editor.isActive("bold") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("bold") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleBold().run()}
         >
           <TextBIcon />
@@ -164,7 +164,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("italic")}
           disabled={!editor.can().chain().focus().toggleItalic().run()}
-          className={editor.isActive("italic") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("italic") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleItalic().run()}
         >
           <TextItalicIcon />
@@ -177,7 +177,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("strike")}
           disabled={!editor.can().chain().focus().toggleStrike().run()}
-          className={editor.isActive("strike") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("strike") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleStrike().run()}
         >
           <TextStrikethroughIcon />
@@ -190,7 +190,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("underline")}
           disabled={!editor.can().chain().focus().toggleUnderline().run()}
-          className={editor.isActive("underline") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("underline") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
         >
           <TextAUnderlineIcon />
@@ -203,7 +203,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("highlight")}
           disabled={!editor.can().chain().focus().toggleHighlight().run()}
-          className={editor.isActive("highlight") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("highlight") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleHighlight().run()}
         >
           <HighlighterCircleIcon />
@@ -222,7 +222,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("code")}
           disabled={!editor.can().chain().focus().toggleCode().run()}
-          className={editor.isActive("code") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("code") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleCode().run()}
         >
           <CodeIconImport />
@@ -235,7 +235,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("codeBlock")}
           disabled={!editor.can().chain().focus().toggleCodeBlock().run()}
-          className={editor.isActive("codeBlock") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("codeBlock") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleCodeBlock().run()}
         >
           <CodeBlockIconImport />
@@ -248,7 +248,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("heading", { level: 1 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 1 }).run()}
-          className={editor.isActive("heading", { level: 1 }) ? "bg-secondary" : undefined}
+          data-state={editor.isActive("heading", { level: 1 }) ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         >
           <TextHOneIcon />
@@ -261,7 +261,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("heading", { level: 2 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 2 }).run()}
-          className={editor.isActive("heading", { level: 2 }) ? "bg-secondary" : undefined}
+          data-state={editor.isActive("heading", { level: 2 }) ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         >
           <TextHTwoIcon />
@@ -274,7 +274,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("heading", { level: 3 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 3 }).run()}
-          className={editor.isActive("heading", { level: 3 }) ? "bg-secondary" : undefined}
+          data-state={editor.isActive("heading", { level: 3 }) ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
         >
           <TextHThreeIcon />
@@ -286,7 +286,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           size="sm"
           type="button"
           pressed={editor.isActive("paragraph")}
-          className={editor.isActive("paragraph") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("paragraph") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().setParagraph().run()}
         >
           <ParagraphIconImport />
@@ -299,7 +299,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive({ textAlign: "left" })}
           disabled={!editor.can().chain().focus().setTextAlign("left").run()}
-          className={editor.isActive({ textAlign: "left" }) ? "bg-secondary" : undefined}
+          data-state={editor.isActive({ textAlign: "left" }) ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
         >
           <TextAlignLeftIcon />
@@ -312,7 +312,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive({ textAlign: "center" })}
           disabled={!editor.can().chain().focus().setTextAlign("center").run()}
-          className={editor.isActive({ textAlign: "center" }) ? "bg-secondary" : undefined}
+          data-state={editor.isActive({ textAlign: "center" }) ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
         >
           <TextAlignCenterIcon />
@@ -325,7 +325,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive({ textAlign: "right" })}
           disabled={!editor.can().chain().focus().setTextAlign("right").run()}
-          className={editor.isActive({ textAlign: "right" }) ? "bg-secondary" : undefined}
+          data-state={editor.isActive({ textAlign: "right" }) ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
         >
           <TextAlignRightIcon />
@@ -338,7 +338,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive({ textAlign: "justify" })}
           disabled={!editor.can().chain().focus().setTextAlign("justify").run()}
-          className={editor.isActive({ textAlign: "justify" }) ? "bg-secondary" : undefined}
+          data-state={editor.isActive({ textAlign: "justify" }) ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().setTextAlign("justify").run()}
         >
           <TextAlignJustifyIcon />
@@ -351,7 +351,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("bulletList")}
           disabled={!editor.can().chain().focus().toggleBulletList().run()}
-          className={editor.isActive("bulletList") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("bulletList") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
         >
           <ListBulletsIcon />
@@ -364,7 +364,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
           type="button"
           pressed={editor.isActive("orderedList")}
           disabled={!editor.can().chain().focus().toggleOrderedList().run()}
-          className={editor.isActive("orderedList") ? "bg-secondary" : undefined}
+          data-state={editor.isActive("orderedList") ? "on" : "off"}
           onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
         >
           <ListNumbersIcon />