Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
1089f35
added mentions to rich editor
Aug 22, 2025
303de5f
Updated documentation
Aug 22, 2025
ed33db0
updated doc
Aug 22, 2025
4029925
Update rich-editor.blade.php
Aug 22, 2025
960b2fa
Update RichEditor.php
Aug 22, 2025
6b7933c
added to gitignore
Sep 5, 2025
d4ed299
updated git ignore
Sep 5, 2025
a1a65d4
updated gitignore
Sep 5, 2025
487327a
updated rich editor to allow multiple chars
Sep 5, 2025
031c02f
added multiple chars to mentions and limit results shown
Sep 5, 2025
5db9558
Merge branch 'add-mentions-to-rich-editor' of github.com:bmspereira-0…
Sep 5, 2025
0b323fc
revert gitignore changes
Sep 5, 2025
ff37d73
added the dist folder :/
Sep 5, 2025
119a6a7
Merge branch '4.x' into add-mentions-to-rich-editor
bmspereira-07 Sep 5, 2025
ef35200
Merge branch '4.x' into add-mentions-to-rich-editor
bmspereira-07 Sep 10, 2025
9b60c12
added possibilite to fetch data async from DB.
Sep 17, 2025
808bc73
Merge branch '4.x' into add-mentions-to-rich-editor
bmspereira-07 Sep 17, 2025
dbd1e9d
updated docs
Sep 17, 2025
f613098
Merge branch 'add-mentions-to-rich-editor' of github.com:bmspereira-0…
Sep 17, 2025
29f1323
implementation with MentionProvider and async fetch. Labels are fetch…
Sep 17, 2025
f0ad500
fix phpstan errors
Sep 17, 2025
9e2788f
fixed extrainputs render
Sep 18, 2025
a509c15
Merge branch '4.x' into add-mentions-to-rich-editor
bmspereira-07 Sep 18, 2025
4ef0806
Merge branch '4.x' into add-mentions-to-rich-editor
bmspereira-07 Sep 22, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 25 additions & 33 deletions packages/forms/dist/components/rich-editor.js

Large diffs are not rendered by default.

51 changes: 50 additions & 1 deletion packages/forms/dist/index.css

Large diffs are not rendered by default.

65 changes: 65 additions & 0 deletions packages/forms/docs/10-rich-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -617,6 +617,71 @@ RichEditor::make('content')
->activePanel('mergeTags')
```

## Using mentions

Mentions let users type a trigger character (like `@`) to search and insert inline references (e.g., users, tasks). Mentions are rendered inline as non-editable tokens (e.g. `@ Jane Doe`).

Configure mentions with providers using `mentions()`. Each provider handles a trigger `char` and either static items or async search:

```php
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\MentionProviders\MentionProvider;

// Static items for multiple triggers
RichEditor::make('content')
->mentions([
MentionProvider::make('@')
->options([
['id' => 1, 'label' => 'Jane Doe'],
['id' => 2, 'label' => 'John Smith'],
]),
MentionProvider::make('#')
->options(['Laravel', 'Filament', 'Livewire']),
])
```

For large datasets, provide async results with `getSearchResultsUsing()`. The callback receives the search term and should return an array of items (strings, or objects with `id` and `label`).

```php
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\MentionProviders\MentionProvider;

RichEditor::make('content')
->mentions([
MentionProvider::make('@')
->getSearchResultsUsing(fn (string $search): array => User::query()
->where('name', 'like', "%{$search}%")
->orderBy('name')
->limit(10)
->pluck('name', 'id')
->all())
->getOptionLabelUsing(fn ($value): ?string => User::find($value)?->name),
])
```


### Adding extra HTML attributes

You may apply extra HTML attributes to the rendered mention element:

```php
MentionProvider::make('@')
->options([
['id' => 1, 'label' => 'Jane Doe'],
])
->extraAttributes([
'type' => 'user',
'class' => 'mention-user text-blue-600',
])
```

### Notes

- You can provide multiple providers, each with a different `char` (default `@`).




## Registering rich content attributes

There are elements of the rich editor configuration that apply to both the editor and the renderer. For example, if you are using [private images](#using-private-images-in-the-editor), [custom blocks](#using-custom-blocks), [merge tags](#using-merge-tags), or [plugins](#extending-the-rich-editor), you need to ensure that the same configuration is used in both places. To do this, Filament provides you with a way to register rich content attributes that can be used in both the editor and the renderer.
Expand Down
6 changes: 6 additions & 0 deletions packages/forms/resources/js/components/rich-editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export default function richEditorFormComponent({
maxFileSize,
maxFileSizeValidationMessage,
mergeTags,
mentions,
getMentionSearchResultsUsing,
getMentionLabelUsing,
noMergeTagSearchResultsMessage,
placeholder,
state,
Expand Down Expand Up @@ -75,6 +78,9 @@ export default function richEditorFormComponent({
maxFileSize,
maxFileSizeValidationMessage,
mergeTags,
mentions,
getMentionSearchResultsUsing,
getMentionLabelUsing,
noMergeTagSearchResultsMessage,
placeholder,
statePath,
Expand Down
Loading