refactor: replace custom textarea with Filament RichEditor and built-in mentions

Replace the custom Alpine.js textarea + mention system with Filament v5's
built-in RichEditor component and MentionProvider. This fixes Alpine scope
errors (showMentions/mentionResults not defined) that occurred during
Livewire DOM morphing inside Filament slide-over modals.

- Add InteractsWithForms + HasForms to Comments and CommentItem components
- Define commentForm(), editForm(), replyForm() with RichEditor + mentions
- Add CommentsConfig::makeMentionProvider() shared helper
- Update MentionParser to extract mention IDs from RichEditor HTML format
- Update Comment::renderBodyWithMentions() to use RichContentRenderer
- Remove all custom Alpine.js mention code from blade templates
- Backward compatible with existing plain text comments
This commit is contained in:
manukminasyan
2026-03-27 18:43:07 +04:00
parent f119095ae5
commit e173d9b4dd
7 changed files with 154 additions and 258 deletions

View File

@@ -2,6 +2,8 @@
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;
@@ -145,6 +147,19 @@ class Comment extends Model
public function renderBodyWithMentions(): string
{
$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) {
@@ -157,4 +172,9 @@ class Comment extends Model
return $body;
}
protected function hasRichEditorMentions(string $body): bool
{
return str_contains($body, 'data-type="mention"') || str_contains($body, '<p>') || str_contains($body, '<br');
}
}