Added proper way to customize editor styles

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.

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...',

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
 

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>

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>

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>
 

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>

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';
+    }
 }

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'))

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'))

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();
+    }
+}

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';
 }

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();
+    }
 }

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');

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();
+    }
 }