Merge pull request #10 from Ilyapashayan20/fix/multiple-bugs

fix: show reply instantly after adding without page refresh
2026-04-01 01:30:42 +04:00
parent a5bf29d6c2 bb88583f09
commit f9f9950cde
10 changed files with 144 additions and 30 deletions
--- a/resources/css/comments.css
+++ b/resources/css/comments.css
@@ -0,0 +1,18 @@
+.comment-mention {
+    background-color: rgb(var(--primary-50));
+    color: rgb(var(--primary-600));
+    margin-top: 0;
+    margin-bottom: 0;
+    display: inline-block;
+    border-radius: 0.25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.dark .comment-mention {
+    background-color: rgb(var(--primary-400) / 0.1);
+    color: rgb(var(--primary-400));
+}
--- a/resources/views/livewire/comment-item.blade.php
+++ b/resources/views/livewire/comment-item.blade.php
@@ -104,7 +104,11 @@

        {{-- Reply form --}}
        @if ($isReplying)
-            <div class="mt-3">
+            <div class="mt-3"
+                x-data="{ uploadError: null }"
+                x-on:livewire-upload-error.window="uploadError = '{{ __('File upload failed. The file may be too large or an unsupported type.') }}'"
+                x-on:livewire-upload-start.window="uploadError = null"
+            >
                {{ $this->replyForm }}

                @if (!empty($replyAttachments))
@@ -120,6 +124,7 @@
                    @error('replyAttachments.*')
                        <p class="mt-1 text-sm text-danger-600 dark:text-danger-400">{{ $message }}</p>
                    @enderror
+                    <p x-show="uploadError" x-text="uploadError" class="mt-1 text-sm text-danger-600 dark:text-danger-400"></p>
                @endif

                <div class="mt-2 flex items-center justify-between">
--- a/resources/views/livewire/comments.blade.php
+++ b/resources/views/livewire/comments.blade.php
@@ -2,11 +2,14 @@
    @if (!\Relaticle\Comments\CommentsConfig::isBroadcastingEnabled())
        wire:poll.{{ \Relaticle\Comments\CommentsConfig::getPollingInterval() }}
    @endif
+    x-data="{ uploadError: null }"
+    x-on:livewire-upload-error.window="uploadError = '{{ __('File upload failed. The file may be too large or an unsupported type.') }}'"
+    x-on:livewire-upload-start.window="uploadError = null"
 >
    {{-- Sort toggle --}}
    <div class="flex items-center justify-between">
        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Comments ({{ $this->totalCount }})
+            Comments ({{ $this->allCommentsCount }})
        </h3>
        @auth
            <div class="flex items-center gap-3">
@@ -76,6 +79,7 @@
                    @error('attachments.*')
                        <p class="mt-1 text-sm text-danger-600 dark:text-danger-400">{{ $message }}</p>
                    @enderror
+                    <p x-show="uploadError" x-text="uploadError" class="mt-1 text-sm text-danger-600 dark:text-danger-400"></p>
                @endif

                <div class="mt-2 flex items-center justify-between">
--- a/src/CommentsServiceProvider.php
+++ b/src/CommentsServiceProvider.php
@@ -2,6 +2,8 @@

 namespace Relaticle\Comments;

+use Filament\Support\Assets\Css;
+use Filament\Support\Facades\FilamentAsset;
 use Illuminate\Database\Eloquent\Relations\Relation;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Facades\Gate;
@@ -16,6 +18,8 @@ use Relaticle\Comments\Livewire\Comments;
 use Relaticle\Comments\Livewire\Reactions;
 use Spatie\LaravelPackageTools\Package;
 use Spatie\LaravelPackageTools\PackageServiceProvider;
+use Symfony\Component\HtmlSanitizer\HtmlSanitizer;
+use Symfony\Component\HtmlSanitizer\HtmlSanitizerConfig;

 class CommentsServiceProvider extends PackageServiceProvider
 {
@@ -49,6 +53,27 @@ class CommentsServiceProvider extends PackageServiceProvider
            MentionResolver::class,
            fn () => new (CommentsConfig::getMentionResolver())
        );
+
+        $this->app->scoped(
+            'comments.html_sanitizer',
+            fn (): HtmlSanitizer => new HtmlSanitizer(
+                (new HtmlSanitizerConfig)
+                    ->allowSafeElements()
+                    ->allowRelativeLinks()
+                    ->allowRelativeMedias()
+                    ->allowAttribute('class', allowedElements: '*')
+                    ->allowAttribute('data-color', allowedElements: '*')
+                    ->allowAttribute('data-from-breakpoint', allowedElements: '*')
+                    ->allowAttribute('data-type', allowedElements: '*')
+                    ->allowAttribute('data-id', allowedElements: 'span')
+                    ->allowAttribute('data-label', allowedElements: 'span')
+                    ->allowAttribute('data-char', allowedElements: 'span')
+                    ->allowAttribute('style', allowedElements: '*')
+                    ->allowAttribute('width', allowedElements: 'img')
+                    ->allowAttribute('height', allowedElements: 'img')
+                    ->withMaxInputLength(500000)
+            ),
+        );
    }

    public function packageBooted(): void
@@ -64,5 +89,9 @@ class CommentsServiceProvider extends PackageServiceProvider
        Livewire::component('comments', Comments::class);
        Livewire::component('comment-item', CommentItem::class);
        Livewire::component('reactions', Reactions::class);
+
+        FilamentAsset::register([
+            Css::make('comments', __DIR__.'/../resources/css/comments.css'),
+        ], 'relaticle/comments');
    }
 }
--- a/src/Livewire/CommentItem.php
+++ b/src/Livewire/CommentItem.php
@@ -2,6 +2,8 @@

 namespace Relaticle\Comments\Livewire;

+use Filament\Actions\Concerns\InteractsWithActions;
+use Filament\Actions\Contracts\HasActions;
 use Filament\Forms\Components\RichEditor;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
@@ -17,9 +19,10 @@ use Relaticle\Comments\Events\CommentUpdated;
 use Relaticle\Comments\Mentions\MentionParser;
 use Relaticle\Comments\Models\Comment;

-class CommentItem extends Component implements HasForms
+class CommentItem extends Component implements HasForms, HasActions
 {
    use InteractsWithForms;
+    use InteractsWithActions;
    use WithFileUploads;

    public Comment $comment;
@@ -180,6 +183,8 @@ class CommentItem extends Component implements HasForms

        app(MentionParser::class)->syncMentions($reply);

+        $this->comment->load(['replies.commenter', 'replies.mentions', 'replies.attachments', 'replies.reactions.commenter', 'replies.replies.commenter', 'replies.replies.mentions', 'replies.replies.attachments', 'replies.replies.reactions.commenter']);
+
        $this->dispatch('commentUpdated');

        $this->isReplying = false;
--- a/src/Livewire/Comments.php
+++ b/src/Livewire/Comments.php
@@ -2,6 +2,8 @@

 namespace Relaticle\Comments\Livewire;

+use Filament\Actions\Concerns\InteractsWithActions;
+use Filament\Actions\Contracts\HasActions;
 use Filament\Forms\Components\RichEditor;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
@@ -19,9 +21,10 @@ use Relaticle\Comments\Mentions\MentionParser;
 use Relaticle\Comments\Models\Comment;
 use Relaticle\Comments\Models\Subscription;

-class Comments extends Component implements HasForms
+class Comments extends Component implements HasForms, HasActions
 {
    use InteractsWithForms;
+    use InteractsWithActions;
    use WithFileUploads;

    public Model $model;
@@ -68,7 +71,7 @@ class Comments extends Component implements HasForms
    {
        return $this->model
            ->topLevelComments()
-            ->with(['commenter', 'mentions', 'attachments', 'reactions.commenter', 'replies.commenter', 'replies.mentions', 'replies.attachments', 'replies.reactions.commenter'])
+            ->with(['commenter', 'mentions', 'attachments', 'reactions.commenter', 'replies.commenter', 'replies.mentions', 'replies.attachments', 'replies.reactions.commenter', 'replies.replies.commenter', 'replies.replies.mentions', 'replies.replies.attachments', 'replies.replies.reactions.commenter'])
            ->orderBy('created_at', $this->sortDirection)
            ->take($this->loadedCount)
            ->get();
@@ -80,6 +83,12 @@ class Comments extends Component implements HasForms
        return $this->model->topLevelComments()->count();
    }

+    #[Computed]
+    public function allCommentsCount(): int
+    {
+        return $this->model->commentCount();
+    }
+
    #[Computed]
    public function hasMore(): bool
    {
@@ -203,7 +212,7 @@ class Comments extends Component implements HasForms

    public function refreshComments(): void
    {
-        unset($this->comments, $this->totalCount, $this->hasMore);
+        unset($this->comments, $this->totalCount, $this->hasMore, $this->allCommentsCount);
    }

    public function render(): View
--- a/src/Models/Comment.php
+++ b/src/Models/Comment.php
@@ -2,8 +2,6 @@

 namespace Relaticle\Comments\Models;

-use Filament\Forms\Components\RichEditor\MentionProvider;
-use Filament\Forms\Components\RichEditor\RichContentRenderer;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
@@ -11,7 +9,6 @@ use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\MorphTo;
 use Illuminate\Database\Eloquent\Relations\MorphToMany;
 use Illuminate\Database\Eloquent\SoftDeletes;
-use Illuminate\Support\Str;
 use Relaticle\Comments\CommentsConfig;
 use Relaticle\Comments\Database\Factories\CommentFactory;

@@ -25,7 +22,11 @@ class Comment extends Model
        parent::boot();

        static::saving(function (self $comment): void {
-            $comment->body = Str::sanitizeHtml($comment->body);
+            $comment->body = app('comments.html_sanitizer')->sanitize($comment->body);
+        });
+
+        static::deleting(function (self $comment): void {
+            $comment->replies()->each(fn ($reply) => $reply->delete());
        });

        static::forceDeleting(function (self $comment): void {
@@ -145,33 +146,23 @@ class Comment extends Model
    {
        $body = $this->body;

-        if ($this->hasRichEditorMentions($body)) {
-            return RichContentRenderer::make($body)
-                ->mentions([
-                    MentionProvider::make('@')
-                        ->getLabelsUsing(fn (array $ids): array => CommentsConfig::getCommenterModel()::query()
-                            ->whereIn('id', $ids)
-                            ->pluck('name', 'id')
-                            ->all()),
-                ])
-                ->toHtml();
-        }
-
        $mentionNames = $this->mentions->pluck('name')->filter()->unique();

        foreach ($mentionNames as $name) {
            $escapedName = e($name);
-            $styledSpan = '<span class="comment-mention inline rounded bg-primary-50 px-1 font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-300">@'.$escapedName.'</span>';
+            $styledSpan = '<span class="comment-mention">@'.$escapedName.'</span>';

-            $body = str_replace("&#64;{$name}", $styledSpan, $body);
-            $body = str_replace("@{$name}", $styledSpan, $body);
+            $pattern = '/<(?:span|a)[^>]*data-type="mention"[^>]*>@?' . preg_quote($escapedName, '/') . '<\/(?:span|a)>/';
+
+            if (preg_match($pattern, $body)) {
+                $body = preg_replace($pattern, $styledSpan, $body);
+            } else {
+                // Fallback for plain-text mentions
+                $body = str_replace("&#64;{$name}", $styledSpan, $body);
+                $body = str_replace("@{$name}", $styledSpan, $body);
+            }
        }

        return $body;
    }
-
-    protected function hasRichEditorMentions(string $body): bool
-    {
-        return str_contains($body, 'data-type="mention"') || str_contains($body, '<p>') || str_contains($body, '<br');
-    }
 }
--- a/tests/Feature/ContentSanitizationTest.php
+++ b/tests/Feature/ContentSanitizationTest.php
@@ -155,6 +155,26 @@ it('strips onclick handler from elements', function () {
    expect($comment->body)->toContain('click me');
 });

+it('preserves mention data attributes in comment body', function () {
+    $user = User::factory()->create();
+    $post = Post::factory()->create();
+
+    $body = '<span data-type="mention" data-id="1" data-label="max" data-char="@">@max</span>';
+
+    $comment = Comment::factory()->create([
+        'commentable_id' => $post->id,
+        'commentable_type' => $post->getMorphClass(),
+        'commenter_id' => $user->getKey(),
+        'commenter_type' => $user->getMorphClass(),
+        'body' => $body,
+    ]);
+
+    expect($comment->body)->toContain('data-type="mention"');
+    expect($comment->body)->toContain('data-id="1"');
+    expect($comment->body)->toContain('data-label="max"');
+    expect($comment->body)->toContain('data-char="@"');
+});
+
 it('sanitizes content submitted through livewire component', function () {
    $user = User::factory()->create();
    $post = Post::factory()->create();
--- a/tests/Feature/MentionDisplayTest.php
+++ b/tests/Feature/MentionDisplayTest.php
@@ -51,6 +51,28 @@ it('renders multiple mentions with styled spans', function () {
    expect($rendered)->toContain('comment-mention');
 });

+it('renders rich-editor mention span as styled mention', function () {
+    $user = User::factory()->create();
+    $alice = User::factory()->create(['name' => 'Alice']);
+    $post = Post::factory()->create();
+
+    $comment = Comment::factory()->create([
+        'commentable_id' => $post->id,
+        'commentable_type' => $post->getMorphClass(),
+        'commenter_id' => $user->getKey(),
+        'commenter_type' => $user->getMorphClass(),
+        'body' => '<p><span data-type="mention" data-id="'.$alice->id.'" data-label="Alice" data-char="@">@Alice</span> said hi</p>',
+    ]);
+
+    $comment->mentions()->attach($alice->id, ['commenter_type' => $alice->getMorphClass()]);
+
+    $rendered = $comment->renderBodyWithMentions();
+
+    expect($rendered)->toContain('comment-mention');
+    expect($rendered)->toContain('@Alice</span>');
+    expect($rendered)->not->toContain('data-type="mention"');
+});
+
 it('does not style non-mentioned @text', function () {
    $user = User::factory()->create();
    $post = Post::factory()->create();
--- a/tests/Feature/MentionParserTest.php
+++ b/tests/Feature/MentionParserTest.php
@@ -10,6 +10,17 @@ use Relaticle\Comments\Models\Comment;
 use Relaticle\Comments\Tests\Models\Post;
 use Relaticle\Comments\Tests\Models\User;

+it('parses rich-editor mention spans using data-id', function () {
+    $john = User::factory()->create(['name' => 'john']);
+
+    $parser = app(MentionParser::class);
+    $body = '<p>Hello <span data-type="mention" data-id="'.$john->id.'" data-label="john" data-char="@">@john</span></p>';
+    $result = $parser->parse($body);
+
+    expect($result)->toHaveCount(1);
+    expect($result->first())->toBe($john->id);
+});
+
 it('parses @username from plain text body', function () {
    User::factory()->create(['name' => 'john']);
    User::factory()->create(['name' => 'jane']);