Added proper way to customize editor styles (#73)

luisdalmolin · web-flow · commit bf4d735de9bb · 2025-10-27T06:51:28.000-03:00
* Added proper way to customize editor styles

* Updated readme

* Fixed code style

* Using default classes to avoid issues
diff --git a/README.md b/README.md
@@ -245,7 +245,7 @@ use Kirschbaum\Commentions\Filament\Actions\CommentsAction;
     CommentsAction::make()
         ->mentionables(User::all())
         ->perPage(10)
-        
+
 ])
 ```
 Without Pagination:
@@ -257,7 +257,7 @@ use Kirschbaum\Commentions\Filament\Actions\CommentsAction;
     CommentsAction::make()
         ->mentionables(User::all())
         ->disablePagination();
-        
+
 ])
 ```
 Advanced Usage:
@@ -386,6 +386,40 @@ class User extends Authenticatable implements Commenter, HasName, HasAvatar
 }
 ```
 
+### Customizing TipTap Editor Styles
+
+You can customize the TipTap editor CSS classes used using the `Config` class.
+
+```php
+use Kirschbaum\Commentions\Config;
+
+Config::resolveTipTapCssClassesUsing(function () {
+    return 'prose max-w-none focus:outline-none p-4';
+});
+```
+
+And you can also override the classes on a per-component basis using the `tipTapCssClasses()` method:
+
+```php
+use Kirschbaum\Commentions\Filament\Infolists\Components\CommentsEntry;
+
+CommentsEntry::make('comments')
+    ->mentionables(fn (Model $record) => User::all())
+    ->tipTapCssClasses('prose max-w-none focus:outline-none p-4')
+```
+
+Or with actions:
+
+```php
+use Kirschbaum\Commentions\Filament\Actions\CommentsAction;
+
+CommentsAction::make()
+    ->mentionables(User::all())
+    ->tipTapCssClasses('prose max-w-none focus:outline-none p-4')
+```
+
+**Important**: Make sure to whitelist the classes in your Tailwind config if you override them.
+
 ### Translations
 
 You can publish the package translation files and override any strings used by the UI.
diff --git a/resources/dist/commentions.js b/resources/dist/commentions.js
diff --git a/resources/js/commentions.js b/resources/js/commentions.js
@@ -5,9 +5,11 @@ import Placeholder from '@tiptap/extension-placeholder'
 import suggestion from './suggestion'
 
 document.addEventListener('alpine:init', () => {
-    Alpine.data('editor', (content, mentions, component, placeholder) => {
+    Alpine.data('editor', (content, mentions, component, placeholder, editorCssClasses) => {
         let editor
 
+        const defaultEditorCssClasses = `comm:prose comm:dark:prose-invert comm:prose-sm comm:sm:prose-base comm:lg:prose-lg comm:xl:prose-2xl comm:focus:outline-none comm:p-4 comm:min-w-full comm:w-full comm:rounded-lg comm:border comm:border-gray-300 comm:dark:border-gray-700`;
+
         return {
             updatedAt: Date.now(),
 
@@ -30,7 +32,7 @@ document.addEventListener('alpine:init', () => {
                     ],
                     editorProps: {
                         attributes: {
-                            class: `comm:prose comm:dark:prose-invert comm:prose-sm comm:sm:prose-base comm:lg:prose-lg comm:xl:prose-2xl comm:focus:outline-none comm:p-4 comm:min-w-full comm:w-full comm:rounded-lg comm:border comm:border-gray-300 comm:dark:border-gray-700`,
+                            class: editorCssClasses || defaultEditorCssClasses,
                         },
                     },
                     placeholder: 'Type something...',
diff --git a/resources/views/comment-list.blade.php b/resources/views/comment-list.blade.php
@@ -19,6 +19,7 @@ class="comm:w-8 comm:h-8 comm:text-gray-400 comm:dark:text-gray-500"
             :key="$comment->getContentHash()"
             :comment="$comment"
             :mentionables="$mentionables"
+            :tip-tap-css-classes="$tipTapCssClasses"
         />
     @endforeach
 
diff --git a/resources/views/comment.blade.php b/resources/views/comment.blade.php
@@ -92,7 +92,7 @@ class="comm:text-xs comm:text-gray-300 comm:ml-1"
         @if ($editing)
             <div class="comm:mt-2">
                 <div class="tip-tap-container comm:mb-2" wire:ignore>
-                    <div x-data="editor(@js($commentBody), @js($mentionables), 'comment')">
+                    <div x-data="editor(@js($commentBody), @js($mentionables), 'comment', null, @js($this->getTipTapCssClasses()))">
                         <div x-ref="element"></div>
                     </div>
                 </div>
diff --git a/resources/views/comments-modal.blade.php b/resources/views/comments-modal.blade.php
@@ -10,5 +10,6 @@
         :per-page-increment="$perPageIncrement ?? null"
         :sidebar-enabled="$sidebarEnabled ?? true"
         :show-subscribers="$showSubscribers ?? true"
+        :tip-tap-css-classes="$tipTapCssClasses ?? null"
     />
 </div>
diff --git a/resources/views/comments.blade.php b/resources/views/comments.blade.php
@@ -8,7 +8,7 @@
                 {{-- tiptap editor --}}
                 <div class="comm:relative tip-tap-container comm:mb-2" x-on:click="wasFocused = true" wire:ignore>
                     <div
-                        x-data="editor(@js($commentBody), @js($this->mentions), 'comments', @js($this->getPlaceholder()))"
+                        x-data="editor(@js($commentBody), @js($this->mentions), 'comments', @js($this->getPlaceholder()), @js($this->getTipTapCssClasses()))"
                     >
                         <div x-ref="element"></div>
                     </div>
@@ -40,6 +40,7 @@
             :per-page="$perPage ?? 5"
             :load-more-label="$loadMoreLabel ?? __('commentions::comments.show_more')"
             :per-page-increment="$perPageIncrement ?? null"
+            :tip-tap-css-classes="$tipTapCssClasses"
         />
     </div>
 
diff --git a/resources/views/filament/infolists/components/comments-entry.blade.php b/resources/views/filament/infolists/components/comments-entry.blade.php
@@ -8,5 +8,6 @@
         :load-more-label="$getLoadMoreLabel()"
         :per-page-increment="$getPerPageIncrement()"
         :sidebar-enabled="$isSidebarEnabled()"
+        :tip-tap-css-classes="$getTipTapCssClasses()"
     />
 </x-dynamic-component>
diff --git a/src/Config.php b/src/Config.php
@@ -14,6 +14,8 @@ class Config
 
     protected static ?Closure $resolveCommentUrl = null;
 
+    protected static ?Closure $resolveTipTapCssClasses = null;
+
     public static function resolveAuthenticatedUserUsing(Closure $callback): void
     {
         static::$resolveAuthenticatedUser = $callback;
@@ -78,4 +80,18 @@ public static function getAllowedReactions(): array
     {
         return config('commentions.reactions.allowed', ['👍']);
     }
+
+    public static function resolveTipTapCssClassesUsing(Closure $callback): void
+    {
+        static::$resolveTipTapCssClasses = $callback;
+    }
+
+    public static function getTipTapCssClasses(): ?string
+    {
+        if (static::$resolveTipTapCssClasses instanceof Closure) {
+            return call_user_func(static::$resolveTipTapCssClasses);
+        }
+
+        return 'comm:prose comm:dark:prose-invert comm:prose-sm comm:sm:prose-base comm:lg:prose-lg comm:xl:prose-2xl comm:focus:outline-none comm:p-4 comm:min-w-full comm:w-full comm:rounded-lg comm:border comm:border-gray-300 comm:dark:border-gray-700';
+    }
 }
diff --git a/src/Filament/Actions/CommentsAction.php b/src/Filament/Actions/CommentsAction.php
@@ -8,13 +8,15 @@
 use Kirschbaum\Commentions\Filament\Concerns\HasPagination;
 use Kirschbaum\Commentions\Filament\Concerns\HasPolling;
 use Kirschbaum\Commentions\Filament\Concerns\HasSidebar;
+use Kirschbaum\Commentions\Filament\Concerns\HasTipTapCssClasses;
 
 class CommentsAction extends Action
 {
     use HasMentionables;
     use HasPagination;
     use HasPolling;
     use HasSidebar;
+    use HasTipTapCssClasses;
 
     protected function setUp(): void
     {
@@ -32,6 +34,7 @@ protected function setUp(): void
                 'perPageIncrement' => $this->getPerPageIncrement() ?: $this->getPerPage(),
                 'sidebarEnabled' => $this->isSidebarEnabled(),
                 'showSubscribers' => $this->showSubscribers(),
+                'tipTapCssClasses' => $this->getTipTapCssClasses(),
             ]))
             ->modalWidth($this->isSidebarEnabled() ? '4xl' : 'xl')
             ->label(__('commentions::comments.label'))
diff --git a/src/Filament/Actions/CommentsTableAction.php b/src/Filament/Actions/CommentsTableAction.php
@@ -7,12 +7,14 @@
 use Kirschbaum\Commentions\Filament\Concerns\HasMentionables;
 use Kirschbaum\Commentions\Filament\Concerns\HasPolling;
 use Kirschbaum\Commentions\Filament\Concerns\HasSidebar;
+use Kirschbaum\Commentions\Filament\Concerns\HasTipTapCssClasses;
 
 class CommentsTableAction extends Action
 {
     use HasMentionables;
     use HasPolling;
     use HasSidebar;
+    use HasTipTapCssClasses;
 
     protected function setUp(): void
     {
@@ -26,6 +28,7 @@ protected function setUp(): void
                 'pollingInterval' => $this->getPollingInterval(),
                 'sidebarEnabled' => $this->isSidebarEnabled(),
                 'showSubscribers' => $this->showSubscribers(),
+                'tipTapCssClasses' => $this->getTipTapCssClasses(),
             ]))
             ->modalWidth($this->isSidebarEnabled() ? '4xl' : 'xl')
             ->label(__('commentions::comments.label'))
diff --git a/src/Filament/Concerns/HasTipTapCssClasses.php b/src/Filament/Concerns/HasTipTapCssClasses.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Kirschbaum\Commentions\Filament\Concerns;
+
+use Closure;
+use Kirschbaum\Commentions\Config;
+
+trait HasTipTapCssClasses
+{
+    protected string|Closure|null $tipTapCssClasses = null;
+
+    public function tipTapCssClasses(string|Closure|null $classes): static
+    {
+        $this->tipTapCssClasses = $classes;
+
+        return $this;
+    }
+
+    public function getTipTapCssClasses(): ?string
+    {
+        return $this->evaluate($this->tipTapCssClasses) ?? Config::getTipTapCssClasses();
+    }
+}
diff --git a/src/Filament/Infolists/Components/CommentsEntry.php b/src/Filament/Infolists/Components/CommentsEntry.php
@@ -7,13 +7,15 @@
 use Kirschbaum\Commentions\Filament\Concerns\HasPagination;
 use Kirschbaum\Commentions\Filament\Concerns\HasPolling;
 use Kirschbaum\Commentions\Filament\Concerns\HasSidebar;
+use Kirschbaum\Commentions\Filament\Concerns\HasTipTapCssClasses;
 
 class CommentsEntry extends Entry
 {
     use HasMentionables;
     use HasPagination;
     use HasPolling;
     use HasSidebar;
+    use HasTipTapCssClasses;
 
     protected string $view = 'commentions::filament.infolists.components.comments-entry';
 }
diff --git a/src/Livewire/Comment.php b/src/Livewire/Comment.php
@@ -22,6 +22,8 @@ class Comment extends Component
 
     public bool $editing = false;
 
+    public ?string $tipTapCssClasses = null;
+
     protected $rules = [
         'commentBody' => 'required|string',
     ];
@@ -115,4 +117,9 @@ public function toggleReaction(string $reaction): void
 
         $this->dispatch('comment:reaction:saved');
     }
+
+    public function getTipTapCssClasses(): ?string
+    {
+        return $this->tipTapCssClasses ?? Config::getTipTapCssClasses();
+    }
 }
diff --git a/src/Livewire/CommentList.php b/src/Livewire/CommentList.php
@@ -19,6 +19,8 @@ class CommentList extends Component
 
     public Model $record;
 
+    public ?string $tipTapCssClasses = null;
+
     public function render()
     {
         return view('commentions::comment-list');
diff --git a/src/Livewire/Comments.php b/src/Livewire/Comments.php
@@ -24,6 +24,8 @@ class Comments extends Component
 
     public string $commentBody = '';
 
+    public ?string $tipTapCssClasses = null;
+
     protected $rules = [
         'commentBody' => 'required|string',
     ];
@@ -67,4 +69,9 @@ public function getPlaceholder(): string
     {
         return __('commentions::comments.placeholder');
     }
+
+    public function getTipTapCssClasses(): ?string
+    {
+        return $this->tipTapCssClasses ?? Config::getTipTapCssClasses();
+    }
 }
