Comment component

You can add a comments section to your Filament Infolist using the CommentsEntry component:

use Tilto\Commentable\Filament\Infolists\Components\CommentsEntry;

CommentsEntry::make('comments')

#Button position

You can set the position of the form buttons using the buttonPosition method:

CommentsEntry::make('comments')
    ->buttonPosition('right') // Options: 'left', 'right'

#Toolbar buttons

You can customize the toolbar buttons using the toolbarButtons method, which uses Filament's built-in toolbar button options:

CommentsEntry::make('comments')
    ->toolbarButtons([
        ['bold', 'italic', 'strike'],
        ['attachFiles'],
    ])

The default toolbar buttons are bold, italic, strike, and attachFiles.

To hide the toolbar completely, simply pass an empty array:

CommentsEntry::make('comments')
    ->toolbarButtons([])

#Markdown Editor

Prefer writing comments in Markdown? Enable the Markdown editor with the markdownEditor method:

CommentsEntry::make('comments')
    ->markdownEditor()

By default, comments use Filament's built-in rich text editor. Switching to the Markdown editor allows users to write and preview comments using Markdown syntax.

#Mentions

From Filament 4.5+, mentions are supported. You now define mention providers directly on your commentable model by implementing a getCommentMentionProviders() method. Enable mentions for the comment entry using ->mentions():

// In your Commentable model (e.g., Post):
use Filament\Forms\Components\RichEditor\MentionProvider;

public function getCommentMentionProviders(): array|null
{
    return [
        MentionProvider::make('@')
            ->getSearchResultsUsing(fn(string $search): array => User::query()
                ->where('name', 'like', "%{$search}%")
                ->orderBy('name')
                ->limit(10)
                ->pluck('name', 'id')
                ->all())
            ->getLabelsUsing(fn(array $ids): array => User::query()
                ->whereIn('id', $ids)
                ->pluck('name', 'id')
                ->all()),
        MentionProvider::make('#')
            ->items([
                1 => 'How to Bake Bread',
                2 => 'Laravel Tips & Tricks',
                3 => 'The Future of PHP',
                4 => '10 Best Coding Practices',
                5 => 'Debugging 101',
                6 => 'Deploying with Docker',
            ]),
    ];
}

// In your CommentsEntry component:
CommentsEntry::make('comments')
    ->mentions()

For rendering the mentions in the rich content, you can put this in your commentable model (for example):

public function getRenderMentionProviders(): array|null
{
    return [
        MentionProvider::make('@')
            ->getLabelsUsing(fn(array $ids): array => User::query()
                ->whereIn('id', $ids)
                ->pluck('name', 'id')
                ->all())
            ->url(fn(string $id, string $label): string => route('filament.portal.resources.users.view', $id))
    ];
}

While not required, adding the following CSS to your theme or app.css file ensures that mentions have a consistent appearance across your application:

span[data-type="mention"],
a[data-type="mention"] {
    @apply bg-primary-50 text-primary-600 dark:bg-primary-400/10 dark:text-primary-400 my-0 inline-block rounded px-1 font-medium whitespace-nowrap no-underline;
    text-decoration: none !important;
}

#File Attachments

You can customize the file attachment behavior by chaining the following methods:

CommentsEntry::make('comments')
    ->fileAttachmentsDisk('public') // Set the storage disk for attachments
    ->fileAttachmentsVisibility('public') // Set the storage visibility for attachments
    ->fileAttachmentsDirectory('comments') // Set the directory for attachments
    ->fileAttachmentsAcceptedFileTypes(['pdf', 'jpg', 'png']) // Set accepted file types
    ->fileAttachmentsMaxSize(5120) // Set max file size in kilobytes

#Polling

You can enable polling to automatically refresh the comments list at a specified interval:

CommentsEntry::make('comments')
    ->pollInterval('5s') // Refresh every 5 seconds

Or by using the default interval:

CommentsEntry::make('comments')
    ->enablePolling() // Refresh using the default interval

#Reactions

You can enable and customize reactions for your comments. By default, reactions are enabled and use a set of allowed emojis.

You can configure allowed reactions and the reaction model in config/commentable.php:

'reaction' => [
    'model' => Tilto\Commentable\Models\CommentReaction::class,
    'allowed' => ['👍', '❤️', '😂', '😮', '😢', '🤔'],
    'show_reactors_tooltip' => true,
],

To enable or disable reactions in your CommentsEntry component:

CommentsEntry::make('comments')
    ->reactions() // Enable reactions (default)
    ->disableReactions() // Disable reactions

To customize which reactions are allowed:

CommentsEntry::make('comments')
    ->allowedReactions(['👍', '👎', '🔥'])

If you do not set allowedReactions, the default set from your config will be used.

Reactions are displayed below each comment, and users can add or remove their reaction. Each user can react once per reaction type per comment.

#Reactor tooltips

Hovering a reaction shows a tooltip naming who reacted, e.g. "You reacted with 👍", "Moshe reacted with 👍" or "You and Moshe reacted with 👍". The phrasing is localized in all available languages, and the current user is always listed first as "you".

The tooltip is enabled by default. To disable it and show only the emoji, set the following in your published config/commentable.php file:

'reaction' => [
    // ...
    'show_reactors_tooltip' => false, // default: true
],

#Replies

You can enable replies to comments using the nestable method:

CommentsEntry::make('comments')
    ->nestable() // Enable replies

You can control whether the author of a comment may reply to their own comment using the package config. In the published config/commentable.php file set:

'reply' => [
    'allow_self_reply' => true, // default: false
],

#Submit shortcut

By default, comments can be submitted with Ctrl + Enter (Windows/Linux) or Cmd + Enter (macOS). This applies to creating, editing, and replying to comments.

You can customize this behavior in your published config/commentable.php file:

'editor' => [
    'submit_shortcut' => 'mod+enter', // default
],

Supported values:

• 'mod+enter' — submit with Ctrl + Enter / Cmd + Enter (default)
• 'enter' — submit with Enter; use Shift + Enter to insert a new line
• false — disable the keyboard shortcut entirely