OSSForks/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/zebrajr/Reactive-Resume.git synced 2025-12-06 00:20:04 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(rich-input): updating datastate on pressing rich input options

Browse Source 
- 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
This commit is contained in:
Gourav 2025-10-13 22:52:25 +05:30
parent 9bdc61b50d
commit 21fd079f94
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
libs/ui/src/components/rich-input.tsx
View File

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