How to Effectively Implement Mentions System in Filament RichEditor Field?
I'm trying to implement a mentions system in a Filament RichEditor field, but I'm facing some challenges. My goal is to allow users to mention other users using "@" followed by the username, with these mentions converting into clickable links.
So far, I've tried:
Creating a custom component extending RichEditor.
Using TributeJS to implement the mentions functionality.
Customizing the Blade view file to integrate TributeJS with the Trix editor.
However, I'm still struggling with:
Efficiently loading the list of mentionable users.
Handling real-time updates to the content.
Ensuring the solution is compatible with Livewire and Alpine.js updates.
Does anyone have experience successfully implementing this feature in Filament? Any tips, code examples, or resources would be greatly appreciated.
Here's a snippet of what I've attempted:
class MentionsRichEditor extends RichEditor
{
protected string $view = 'forms.components.mentions-rich-editor';
public function getMentionsData(): array
{
return User::select('id', 'name')
->get()
->map(fn($user) => [
'key' => $user->name,
'value' => $user->name,
'link' => route('user.profile', $user),
])
->toArray();
}
}
And in the Blade view:
<div
wire:ignore
x-data="mentionsRichEditor({
state: $wire.{{ $applyStateBindingModifiers('entangle('' . $getStatePath() . '')') }},
mentionsData: {{ json_encode($getMentionsData()) }}
})"
{{ $attributes->merge($getExtraAttributes())->class(['filament-forms-rich-editor-component']) }}
>
<trix-editor
:id="$getId()"
:input="$getId() . 'Input'"
x-ref="trix"
x-on:trix-change="state = $event.target.value"
></trix-editor>
<!-- ... -->
</div>
So far, I've tried:
Creating a custom component extending RichEditor.
Using TributeJS to implement the mentions functionality.
Customizing the Blade view file to integrate TributeJS with the Trix editor.
However, I'm still struggling with:
Efficiently loading the list of mentionable users.
Handling real-time updates to the content.
Ensuring the solution is compatible with Livewire and Alpine.js updates.
Does anyone have experience successfully implementing this feature in Filament? Any tips, code examples, or resources would be greatly appreciated.
Here's a snippet of what I've attempted:
class MentionsRichEditor extends RichEditor
{
protected string $view = 'forms.components.mentions-rich-editor';
public function getMentionsData(): array
{
return User::select('id', 'name')
->get()
->map(fn($user) => [
'key' => $user->name,
'value' => $user->name,
'link' => route('user.profile', $user),
])
->toArray();
}
}
And in the Blade view:
<div
wire:ignore
x-data="mentionsRichEditor({
state: $wire.{{ $applyStateBindingModifiers('entangle('' . $getStatePath() . '')') }},
mentionsData: {{ json_encode($getMentionsData()) }}
})"
{{ $attributes->merge($getExtraAttributes())->class(['filament-forms-rich-editor-component']) }}
>
<trix-editor
:id="$getId()"
:input="$getId() . 'Input'"
x-ref="trix"
x-on:trix-change="state = $event.target.value"
></trix-editor>
<!-- ... -->
</div>
