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>
9 Replies
Trix is just a pain in the butt to extend. But mentions get doubly complicated anyway. That’s why I didn’t include them out of the box in Tiptap editor plugin. When you bring in permissions and roles and especially tenancy, it’s insanely difficult to get right.
Thank you so much for your response and clarifying the challenges involved in implementing the signaling system.
I understand that this is complex, but I really need help implementing this feature.
Can you help me directly with a solution, even if it is simple or basic? I am willing to try any suggestions you have, whether it is using Trix or any other Filament compatible editor.
If you have any code examples or resources you can share, I would be very grateful. I am willing to work with you step by step if possible.
I appreciate your time and expertise, and any help you can provide would be invaluable to me.
Actually, I tried to implement the solution suggested in this article:
https://medium.com/@eloufirhatim/implement-mentions-on-the-filament-richeditor-field-1fc77eb0d2de
But unfortunately, it didn't work for me. Could you take a look at this article and let me know if you see any obvious issues or suggestions for improvement? Maybe there is a step I missed or a modification that needs to be made to make it work properly with the current version of Filament.
Medium
Implement mentions on the Filament RichEditor field
The mention system is nowadays used everywhere on websites like Github, Stackoverflow, … and especially on Forum type websites, it allows…
Can’t find it now. Someone shared a working implementation with Tiptap editor plugin. It has a built in way to include the extensions from Tiptap itself. So it’s entirely possible.
GitHub
GitHub - awcodes/filament-tiptap-editor: A Rich Text Editor plugin ...
A Rich Text Editor plugin for Filament Forms. Contribute to awcodes/filament-tiptap-editor development by creating an account on GitHub.
Do you remember where this implementation was shared?
I’m looking, haven’t been able to find it yet.
Thank you so much for your research efforts. I really appreciate your time and help with this.
If you remember any additional details during your research, could you please let me know? Even the smallest information would be helpful.
Well, following the doc I linked you can include the Tiptap mentions extension into the filament Tiptap editor plugin. The only real thing to figure out there would be how to tell it what the list of users should be.