Rich Editor Extra

• Currently included:
• Requirements
• Installation
• Usage
  • Text Direction
  • Emoji
  • Fullscreen
  • Sticky Toolbar
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

Extra goodies for the Filament Forms RichEditor (v4). This package ships small, focused extensions that plug straight into your existing editor — no configuration required.

#Currently included:

• Text Direction — ltr / rtl toolbar buttons that set the direction of the current block.
• Emoji — a toolbar button that opens a full emoji picker (search, categories, skin tones, the complete Unicode set) and inserts the chosen emoji as plain text.
• Fullscreen — a toolbar button that expands the editor to fill the viewport (toggle again or press Esc to exit).
• Sticky Toolbar — keeps the toolbar pinned to the top of the viewport while scrolling through a tall editor. Enabled per editor with the ->stickyToolbar() method.
• More to come...

#Requirements

#Installation

You can install the package via composer:

composer require mohamedsabil83/filament-rich-editor-extra

Then run the package installer:

php artisan filament-rich-editor-extra:install

#Usage

Once installed, the extensions are registered automatically on every RichEditor instance — no additional setup is required. Most extensions add toolbar buttons that you opt into a specific editor via ->toolbarButtons():

Sticky Toolbar is not a toolbar button — it is enabled with the ->stickyToolbar() method (see below).

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->label('Content')
    ->stickyToolbar()
    ->toolbarButtons([
        ['bold', 'italic', 'link'],
        ['ltr', 'rtl'],
        ['emoji'],
        ['fullscreen'],
    ]);

[!TIP] Pass a nested array of button names to group them into separate toolbar sections, or a flat array (e.g. ['emoji', 'ltr', 'rtl']) to keep them together.

#Text Direction

Adds LTR and RTL buttons that set the text direction of the current block (paragraph or heading). The direction is stored as a dir attribute and rendered identically on the server, so it round-trips through saving and display.

RichEditor::make('content')
    ->toolbarButtons(['ltr', 'rtl']);

#Emoji

Adds an emoji button that opens a full-featured picker (search, categories, skin-tone selection, and the complete Unicode emoji set). Selecting an emoji inserts it as a plain Unicode character, so the content stays portable — no custom node or extra markup is saved.

RichEditor::make('content')
    ->toolbarButtons(['emoji']);

The picker is stacked to the toolbar button and is fully responsive: on desktop it opens beneath the button (flipping above it when there isn't enough room), and on small/mobile screens it appears as a bottom sheet.

[!NOTE] The emoji data (~1 MB) is fetched once from a public CDN and then cached in the browser's IndexedDB, so the picker needs network access the first time it is opened.

#Fullscreen

Adds a fullscreen button that expands the editor (toolbar and content) to fill the viewport so you can write without distractions. Click the button again, or press Esc, to return to the inline layout. It is a client-side toggle only — nothing extra is saved with the content.

RichEditor::make('content')
    ->toolbarButtons(['fullscreen']);

#Sticky Toolbar

Keeps the toolbar position: sticky so it stays pinned to the top of the viewport while you scroll through an editor that is taller than the screen. For an editor that fits within the viewport it has no visible effect, so the toolbar only follows along when there is something to scroll past. While stuck, the toolbar sits above the editor content and surrounding page chrome but below modals and notifications, so those still cover it.

Enable it per editor with the ->stickyToolbar() method — it is not a toolbar button:

RichEditor::make('content')
    ->stickyToolbar();

Pass a boolean or a closure to enable it conditionally:

RichEditor::make('content')
    ->stickyToolbar(fn (): bool => $this->isLongForm);

#Testing

composer test

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Contributing

Please see CONTRIBUTING for details.

#Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

#Credits

• MohamedSabil83
• All Contributors

#License

The MIT License (MIT). Please see License File for more information.