From 81efb1b7a8dbb77a59962ae5d49e5b3acf46062c Mon Sep 17 00:00:00 2001
From: TeerapatChan <teerapatchantaramanee@gmail.com>
Date: Tue, 27 Jan 2026 16:18:35 +0700
Subject: [PATCH 1/3] feat: auto text color richtext

---
 .../src/components/slot-before.tsx            |  2 ++
 .../components/auto-text-color-button.tsx     | 27 +++++++++++++++++++
 .../compound/editor/components/index.ts       |  1 +
 3 files changed, 30 insertions(+)
 create mode 100644 legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx

diff --git a/examples/ui-playground/src/components/slot-before.tsx b/examples/ui-playground/src/components/slot-before.tsx
index 29c3f786..e99b9b27 100644
--- a/examples/ui-playground/src/components/slot-before.tsx
+++ b/examples/ui-playground/src/components/slot-before.tsx
@@ -14,6 +14,7 @@ import {
   ToolbarSeparator,
 } from '@genseki/react'
 import {
+  AutoTextColorButton,
   BackColorExtension,
   CustomLinkExtension,
   EditorBar,
@@ -57,6 +58,7 @@ export const EditorSlotBefore = () => {
       <UploadImageButton />
       <RedoButton />
       <UndoButton />
+      <AutoTextColorButton />
     </EditorBar>
   )
 }
diff --git a/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx b/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx
new file mode 100644
index 00000000..56e123fd
--- /dev/null
+++ b/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { PaintBrushBroadIcon } from '@phosphor-icons/react'
+import { useCurrentEditor } from '@tiptap/react'
+
+import { Button } from '../../../../components/primitives/button'
+
+export const AutoTextColorButton = () => {
+  const { editor } = useCurrentEditor()
+
+  if (!editor) throw new Error('Editor provider is missing')
+
+  return (
+    <Button
+      size="md"
+      variant="ghost"
+      className="toolbar-item spaced"
+      onClick={() => {
+        editor.chain().focus().unsetColor().run()
+      }}
+      disabled={!editor.can().unsetColor()}
+      title="Reset text color"
+    >
+      <PaintBrushBroadIcon className="size-8" />
+    </Button>
+  )
+}
diff --git a/legacies/react/v2/components/compound/editor/components/index.ts b/legacies/react/v2/components/compound/editor/components/index.ts
index 0561b084..ebac27ec 100644
--- a/legacies/react/v2/components/compound/editor/components/index.ts
+++ b/legacies/react/v2/components/compound/editor/components/index.ts
@@ -1,3 +1,4 @@
+export * from './auto-text-color-button'
 export * from './editor-bar'
 export * from './editor-color-picker'
 export * from './link-button'

From b70772c115c96c8255519f92c247575920cb651b Mon Sep 17 00:00:00 2001
From: Benz <105777142+TeerapatChan@users.noreply.github.com>
Date: Tue, 27 Jan 2026 16:27:18 +0700
Subject: [PATCH 2/3] Create metal-parrots-destroy.md

---
 .changeset/metal-parrots-destroy.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/metal-parrots-destroy.md

diff --git a/.changeset/metal-parrots-destroy.md b/.changeset/metal-parrots-destroy.md
new file mode 100644
index 00000000..f9c65c08
--- /dev/null
+++ b/.changeset/metal-parrots-destroy.md
@@ -0,0 +1,6 @@
+---
+"@example/ui-playground": patch
+"@genseki/react": patch
+---
+
+feat: auto text color richtext

From 09cb1bf82a6be23a38df27715f86559ce7657577 Mon Sep 17 00:00:00 2001
From: TeerapatChan <teerapatchantaramanee@gmail.com>
Date: Tue, 27 Jan 2026 21:53:25 +0700
Subject: [PATCH 3/3] fix: change icon

---
 examples/ui-playground/src/components/slot-before.tsx         | 2 +-
 .../compound/editor/components/auto-text-color-button.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/ui-playground/src/components/slot-before.tsx b/examples/ui-playground/src/components/slot-before.tsx
index e99b9b27..a1ea6e04 100644
--- a/examples/ui-playground/src/components/slot-before.tsx
+++ b/examples/ui-playground/src/components/slot-before.tsx
@@ -44,6 +44,7 @@ export const EditorSlotBefore = () => {
       <ToolbarSeparator className="h-auto" />
       <EditorTextColorPicker />
       <EditorBgColorPicker />
+      <AutoTextColorButton />
       <ToolbarSeparator className="h-auto" />
       <ToolbarGroup className="items-center">
         <TextAlignButtonsGroup>
@@ -58,7 +59,6 @@ export const EditorSlotBefore = () => {
       <UploadImageButton />
       <RedoButton />
       <UndoButton />
-      <AutoTextColorButton />
     </EditorBar>
   )
 }
diff --git a/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx b/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx
index 56e123fd..b5572d4f 100644
--- a/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx
+++ b/legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { PaintBrushBroadIcon } from '@phosphor-icons/react'
+import { DropSlashIcon } from '@phosphor-icons/react'
 import { useCurrentEditor } from '@tiptap/react'
 
 import { Button } from '../../../../components/primitives/button'
@@ -21,7 +21,7 @@ export const AutoTextColorButton = () => {
       disabled={!editor.can().unsetColor()}
       title="Reset text color"
     >
-      <PaintBrushBroadIcon className="size-8" />
+      <DropSlashIcon className="size-8" />
     </Button>
   )
 }