mileswu/filament-quill-editor

A Filament v5 compatible rich text editor field powered by Quill.js

Maintainers

Package info

github.com/MilesWuCode/filament-quill-editor

Homepage

Language:JavaScript

pkg:composer/mileswu/filament-quill-editor

Transparency log

Fund package maintenance!

Miles Wu

Statistics

Installs: 3

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

v1.0.0 2026-08-11 08:57 UTC

This package is auto-updated.

Last update: 2026-08-12 02:39:34 UTC


README

Latest Version on Packagist Total Downloads

A Filament v5 form field that wraps Quill.js as a rich text editor, with image upload support built on Filament's own HasFileAttachments mechanism (the same one RichEditor uses).

It exists because rawilk/filament-quill still calls a Filament v3 method that was removed in v5 (issue), and because amidesfahani/filament-tinyeditor uses TinyMCE rather than Quill.

Images are uploaded and saved to permanent storage immediately (not deferred to form submission like Filament's RichEditor), so an uploaded-then-abandoned edit can leave an orphaned file. Cleaning those up is not implemented in this version.

Installation

You can install the package via composer:

composer require mileswu/filament-quill-editor

Publish the compiled JS/CSS assets so Filament can serve them:

php artisan filament:assets

Usage

use MilesWu\FilamentQuillEditor\QuillEditor;

QuillEditor::make('content')
    ->fileAttachmentsDisk('s3')
    ->fileAttachmentsDirectory(fn ($record) => "illustrations/{$record->id}")
    ->fileAttachmentsVisibility('public')
    ->maxHeight(500)
    ->toolbarButtons([
        ['bold', 'italic', 'underline', 'strike'],
        ['h1', 'h2', 'h3'],
        ['blockquote', 'codeBlock'],
        ['orderedList', 'bulletList'],
        ['link', 'image'],
        ['clean'],
    ]);

File attachments

fileAttachmentsDisk(), fileAttachmentsDirectory(), and fileAttachmentsVisibility() come from Filament's own Filament\Forms\Components\Concerns\HasFileAttachments trait — the same API RichEditor and TinyEditor use. All three accept a Closure for dynamic values (e.g. injecting $record).

Toolbar buttons

toolbarButtons() takes an array of button groups — each inner array is one group, rendered with a divider between groups. Passing a flat array (forgetting the extra nesting) is treated as a single group with a console warning rather than crashing the editor.

Available buttons: bold, italic, underline, strike, blockquote, codeBlock, h1, h2, h3, h4, orderedList, bulletList, link, image, clean.

Height

maxHeight(int $pixels) caps the editable content area's height and makes it scroll internally, while the toolbar stays fixed above it.

Testing

composer test

The test suite covers the field's configuration API (toolbarButtons(), maxHeight(), file attachment settings). It does not yet cover the upload flow end-to-end — mounting the field inside a real Livewire form currently hits an unrelated upstream bug in this environment's livewire/livewire / pestphp/pest-plugin-livewire versions (reproducible with a bare Livewire component, unrelated to this package).

Changelog

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

Security Vulnerabilities

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

Credits

License

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