Filament v4.5 : @mentions, actions JavaScript et gestion avancée des images

Filament v4.5 renforce sa position de framework admin incontournable pour Laravel. Cette version apporte des fonctionnalités longtemps attendues : un système de @mentions natif, des actions JavaScript sans requête serveur, et une gestion intelligente des ratios d’images.

Qu’est-ce que Filament ?

Filament est un framework SDUI (Server-Driven UI) pour Laravel. Il permet de construire des interfaces utilisateur complètes — panneaux d’administration, dashboards, applications internes — entièrement en PHP, sans écrire de JavaScript ni de code frontend.

Construit sur Livewire, Alpine.js et Tailwind CSS, Filament compte désormais plus de 10 millions de téléchargements. La version 4.5, publiée le 7 janvier 2026, consolide cette stack avec des améliorations significatives.

Installation et mise à jour

Pour mettre à jour vers Filament v4.5 sur un projet existant :

# Mise à jour des dépendances Filament
composer update filamentphp/filament

Pour un nouveau projet Laravel :

# Installation complète de Filament
composer require filament/filament:"^4.5"

# Installation du panel admin
php artisan filament:install --panels

Mentions dans le Rich Editor

Le Rich Editor intègre maintenant un système de @mentions natif. Les utilisateurs peuvent taper un caractère déclencheur (@, #) pour ouvrir un dropdown de recherche.

<?php

use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\MentionProvider;

// Configuration basique avec des données statiques
RichEditor::make('content')
    ->mentions([
        // Mentions d'utilisateurs avec @
        MentionProvider::make('@')
            ->items([
                1 => 'Marie Dupont',
                2 => 'Pierre Martin',
                3 => 'Sophie Bernard',
            ]),
        // Mentions de tags avec #
        MentionProvider::make('#')
            ->items([
                'bug' => 'Bug',
                'feature' => 'Fonctionnalité',
                'urgent' => 'Urgent',
            ]),
    ]);

Pour des datasets volumineux, la recherche dynamique en base de données est indispensable :

<?php

use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\MentionProvider;
use App\Models\User;

RichEditor::make('content')
    ->mentions([
        MentionProvider::make('@')
            // Recherche dynamique des utilisateurs
            ->getSearchResultsUsing(
                fn (string $search): array => User::query()
                    ->where('name', 'like', "%{$search}%")
                    ->orderBy('name')
                    ->limit(10)
                    ->pluck('name', 'id')
                    ->all()
            )
            // Récupération des labels pour l'affichage
            ->getLabelsUsing(
                fn (array $ids): array => User::query()
                    ->whereIn('id', $ids)
                    ->pluck('name', 'id')
                    ->all()
            )
            // Transformation en lien cliquable au rendu
            ->url(fn (string $id): string => route('users.show', $id)),
    ]);

La mention sélectionnée s’insère comme un token inline non-éditable, préservant l’intégrité de la référence.

Actions JavaScript dans les schemas

Les actions dans les formulaires peuvent maintenant exécuter du JavaScript directement côté client, sans aller-retour serveur. Idéal pour des interactions simples et instantanées.

<?php

use Filament\Actions\Action;
use Filament\Forms\Components\TextInput;

TextInput::make('title')
    ->live(onBlur: true)
    ->afterContent(
        Action::make('generateSlug')
            ->icon('heroicon-o-bolt')
            ->jsAction(<<<'JS'
                // Génération du slug côté client
                $set('slug', $get('title').toLowerCase().replaceAll(' ', '-'))
            JS)
    );

TextInput::make('slug')
    ->disabled();

Le JavaScript a accès aux utilitaires $get() et $set() pour lire et modifier l’état du formulaire. L’interaction est instantanée — aucune latence réseau.

Limitation : jsAction() ne peut pas charger de contenu modal ni effectuer de traitement serveur.

Validation et recadrage automatique des images

Le composant FileUpload gère désormais les contraintes de ratio d’aspect. Vous pouvez valider qu’une image respecte un format précis :

<?php

use Filament\Forms\Components\FileUpload;

// Validation simple du ratio
FileUpload::make('banner')
    ->image()
    ->imageAspectRatio('16:9');

// Accepter plusieurs ratios
FileUpload::make('thumbnail')
    ->image()
    ->imageAspectRatio(['16:9', '4:3', '1:1']);

// Ouverture automatique de l'éditeur de recadrage
FileUpload::make('cover')
    ->image()
    ->imageAspectRatio('16:9')
    ->automaticallyOpenImageEditorForAspectRatio();

Avec automaticallyOpenImageEditorForAspectRatio(), si l’image uploadée ne correspond pas au ratio demandé, un éditeur de recadrage simplifié s’ouvre automatiquement. L’utilisateur peut corriger avant la fin de l’upload.

Redimensionnement des images dans le Rich Editor

Les images insérées dans le Rich Editor peuvent maintenant être redimensionnées par l’utilisateur :

<?php

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->resizableImages()  // Active le redimensionnement
    ->fileAttachmentsDisk('s3')
    ->fileAttachmentsDirectory('articles');

L’utilisateur clique sur l’image et tire les poignées pour ajuster la taille. Le ratio d’aspect est toujours préservé.

Méthode saved() pour exclure des champs

La nouvelle méthode saved() remplace avantageusement dehydrated(false). Elle exclut à la fois les valeurs directes et les relations associées :

<?php

use Filament\Forms\Components\TextInput;

// Champ jamais sauvegardé
TextInput::make('password_confirmation')
    ->password()
    ->saved(false);

// Sauvegarde conditionnelle avec closure
TextInput::make('password')
    ->password()
    ->saved(fn (?string $state): bool => filled($state));

Le champ mot de passe n’est sauvegardé que s’il contient une valeur — pratique pour les formulaires d’édition où le mot de passe est optionnel.

Traits simplifiés pour l’authentification 2FA

Configurer l’authentification multi-facteurs nécessitait auparavant d’implémenter plusieurs méthodes d’interface. Les nouveaux traits fournissent des implémentations par défaut :

<?php

namespace App\Models;

use Filament\Auth\MultiFactor\App\Contracts\HasAppAuthentication;
use Filament\Auth\MultiFactor\App\Concerns\InteractsWithAppAuthentication;
use Filament\Auth\MultiFactor\App\Contracts\HasAppAuthenticationRecovery;
use Filament\Auth\MultiFactor\App\Concerns\InteractsWithAppAuthenticationRecovery;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements 
    HasAppAuthentication, 
    HasAppAuthenticationRecovery
{
    use InteractsWithAppAuthentication;
    use InteractsWithAppAuthenticationRecovery;

    // Les traits gèrent automatiquement :
    // - Casting des colonnes
    // - Attributs masqués
    // - Implémentation des méthodes d'interface
}

Trois traits disponibles :

• InteractsWithAppAuthentication — Support OTP (authenticator app)
• InteractsWithAppAuthenticationRecovery — Codes de récupération
• InteractsWithEmailAuthentication — 2FA par email

Points d’attention

• Compatibilité : v4.5 requiert Laravel 11+ et PHP 8.2+
• jsAction() limité aux opérations client-side — pas d’accès au serveur
• Mentions : utilisez getSearchResultsUsing() pour les grands datasets, évitez les arrays statiques volumineux
• Filament v5.0 est sorti le 16 janvier 2026 avec support Livewire v4 — si vous démarrez un nouveau projet, évaluez la migration

Conclusion

Filament v4.5 améliore concrètement l’expérience développeur et utilisateur. Les mentions enrichissent les contenus collaboratifs, les actions JavaScript accélèrent les interactions simples, et la gestion des ratios d’images évite les erreurs d’upload. Ces ajouts s’intègrent naturellement dans l’écosystème Filament existant.

Ressources

• What’s new in Filament v4.5? — Article officiel
• GitHub Release v4.5.0
• Documentation Rich Editor
• Documentation Multi-Factor Authentication