feat: auto text color richtext

.changeset/metal-parrots-destroy.md

@@ -0,0 +1,6 @@
+---
+"@example/ui-playground": patch
+"@genseki/react": patch
+---
+
+feat: auto text color richtext

examples/ui-playground/src/components/slot-before.tsx

@@ -14,6 +14,7 @@ import {
   ToolbarSeparator,
 } from '@genseki/react'
 import {
+  AutoTextColorButton,
   BackColorExtension,
   CustomLinkExtension,
   EditorBar,
@@ -43,6 +44,7 @@ export const EditorSlotBefore = () => {
       <ToolbarSeparator className="h-auto" />
       <EditorTextColorPicker />
       <EditorBgColorPicker />
+      <AutoTextColorButton />
       <ToolbarSeparator className="h-auto" />
       <ToolbarGroup className="items-center">
         <TextAlignButtonsGroup>

legacies/react/v2/components/compound/editor/components/auto-text-color-button.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { DropSlashIcon } 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"
+    >
+      <DropSlashIcon className="size-8" />
+    </Button>
+  )
+}

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'