Merge pull request #523 from agencetwogether/3.x

Add PresetColors to ColorPicker
awcodes · Dec 28, 2024 · 0c4540f · 0c4540f
2 parents 372dad4 + b94e31f
commit 0c4540f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -248,6 +248,22 @@ TiptapEditor::make('content')
     ->extraInputAttributes(['style' => 'min-height: 12rem;']),
 ```
 
+## Colors preset
+
+By default, the ColorPicker shows a picker and a field to set hexadecimal color to selected text. Registering specific colors in config file, you can choose one of them directly in ColorPicker
+To do, simply set your custom colors in config file ```preset_colors``` key
+
+
+```php
+'preset_colors' => [
+    'primary' => '#f59e0b',
+    'secondary' => '#14b8a6',
+    'red' => '#ef4444',
+    //..
+]
+```
+
+
 ## Bubble and Floating Menus
 
 By default, the editor uses Bubble and Floating menus to help with creating content inline, so you don't have to use the toolbar. If you'd prefer to not use the menus you can disable them on a per-instance basis or globally in the config file.

diff --git a/config/filament-tiptap-editor.php b/config/filament-tiptap-editor.php
@@ -98,4 +98,19 @@
     'extensions_script' => null,
     'extensions_styles' => null,
     'extensions' => [],
+
+    /*
+    |--------------------------------------------------------------------------
+    | PresetColors
+    |--------------------------------------------------------------------------
+    |
+    | Possibility to define presets colors in ColorPicker.
+    | Only hexadecimal value
+    'preset_colors' => [
+        'primary' => '#f59e0b',
+        //..
+    ]
+    |
+    */
+    'preset_colors' => [],
 ];
diff --git a/resources/views/components/tools/color.blade.php b/resources/views/components/tools/color.blade.php
@@ -39,6 +39,21 @@ class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transiti
             <span class="sr-only">{{ trans('filament-tiptap-editor::editor.color.input_label') }}</span>
         </label>
 
+        @if(filled(config('filament-tiptap-editor.preset_colors')))
+        <div class="mt-2 flex flex-wrap justify-start gap-2">
+            @foreach(config('filament-tiptap-editor.preset_colors') as $name => $value)
+                <span
+                    wire:key="{{ $name }}"
+                    x-tooltip.raw="{{ $name }}"
+                    class="rounded-full w-5 h-5 cursor-pointer"
+                    style="background-color:{{ $value }};"
+                    x-on:click="setState('{{ $value }}');"
+                >
+            </span>
+            @endforeach
+        </div>
+        @endif
+
         <div class="w-full flex gap-2 mt-2">
             <x-filament::button
                 x-on:click="editor().chain().focus().setColor(state).run(); $dispatch('close-panel')"
@@ -58,4 +73,4 @@ class="flex-1"
             </x-filament::button>
         </div>
     </div>
-</x-filament-tiptap-editor::dropdown-button>
+</x-filament-tiptap-editor::dropdown-button>