README

Filament Advanced Rich Editor

A drop-in replacement for Filament's RichEditor with a toolbar you actually control. Group buttons, collapse them into dropdowns, separate clusters with dividers, pin the whole thing to the top while a long document is scrolled — and get task lists, an image tool with alt text and optional Spatie Media Library storage on top.

Same field, better toolbar — extends Filament\Forms\Components\RichEditor, so every method you already use (->disableToolbarButtons(), ->customBlocks(), ->mergeTags(), ->fileAttachmentsDisk(), …) keeps working
Toolbar tokens — write 'divider', 'headings' or 'lists' anywhere in the toolbar array and they expand into real components
Dropdowns — fold any set of buttons behind one trigger, with icons or icon + label
Sticky toolbar — stays reachable in long documents, with a configurable offset
Heading levels 1 to 6 — not just the stock h2 / h3
Task lists — checkbox lists as a proper TipTap plugin, with the JS loaded on request
Image tool — insert and re-edit images including their alt text and caption
Media browser — the image button opens the pictures already on the server, so one file can be reused across articles instead of uploaded again
Spatie Media Library — opt in per field to store attachments in a media collection
Anchored headings and a table of contents — both from one slug pass, so a link in the list and an id on the page cannot drift apart
Links with rel, referrerpolicy and hreflang — and noopener noreferrer added automatically to anything opening in a new window
Slash menu — type / for a searchable list of the commands this field offers
Video embeds — paste a YouTube or Vimeo link and get a player, timestamp included, through the cookie-free host
Code blocks — a language picker on the block, and syntax colours rendered in PHP
Markdown export — task lists keep their checkboxes
Configurable project-wide — one config file sets the default toolbar for every field

Requirements

PHP 8.2+
Filament v5

Installation

composer require kisame76/filament-advanced-rich-editor

The CSS and the task list scripts auto-register with Filament. After install (and on deploy) run:

php artisan filament:assets

Optionally publish the config:

php artisan vendor:publish --tag="filament-advanced-rich-editor-config"

Raise Livewire's nesting limit

One line, and not optional. Livewire caps the depth of a property path at 10 and answers anything deeper with a 500. The editor entangles a TipTap document, and text inside a list item is already eleven levels deep — so typing in any list, or saving afterwards, throws MaxNestingDepthExceededException.

Publish Livewire's config if you have not already, then raise the limit inside payload:

php artisan livewire:publish --config

'max_nesting_depth' => 32,   // 10 is Livewire's default and is not enough

Change that one line rather than pasting a whole payload block — a published payload replaces the vendor one outright, and its other keys differ between Livewire releases.

Upgrading does not help: every release from 4.1 to 4.4.1 ships the same default. Nor is this package the cause — a stock Filament RichEditor with a plain bullet list does the same. It just ships the task lists, tables and details that make documents deep, so you meet it here first.

Usage

Swap RichEditor for AdvancedRichEditor. Everything you already call on Filament's field keeps working, and the toolbar becomes yours to arrange:

use Kisame76\FilamentAdvancedRichEditor\Forms\Components\AdvancedRichEditor;

AdvancedRichEditor::make('content')
    ->toolbarButtons([
        ['undo', 'redo'],
        'divider',
        ['headings', 'bold', 'italic'],
        'divider',
        ['lists', 'link', 'image', 'embed'],
        'pin',
        ['fullscreen', 'help'],
    ])
    ->stickyToolbar()
    ->columnSpanFull()

Rendering stored content works the same way, with the additions this package makes:

use Kisame76\FilamentAdvancedRichEditor\RichEditor\AdvancedRichContentRenderer;

AdvancedRichContentRenderer::make($article->content)
    ->anchorHeadings()
    ->toHtml();

Read the full documentation for every option: the toolbar tokens and dropdowns, the media browser, the slash menu, video embeds, code blocks, mentions, the table of contents, Markdown export and the config file.

What's next

The editor is finished in the sense that it does what it says. It is not finished in the sense that there is nothing left to build.

AI tools in the editor. Rewrite a paragraph, shorten it, fix the tone, draft alt text for a picture you just dropped in. This is the next big one, and it is deliberately not rushed: it has to work with whichever provider a project already pays for, and it has to be switched off by default. Coming in a later release.
A richer mention menu. Filament's own mention rows are a label and nothing else. Avatars and a second line of context are the obvious next step, and the rendering half of it is already here.
Tests for the media browser's front end. Roughly seven hundred lines of Alpine with no automated coverage. Everything else in the package is tested; this is the gap that bothers me most.

Nothing here is a promise with a date on it. If one of them is what you need, say so and it moves up.

Found a bug? Got an idea?

Both are welcome, and neither needs an apology.

Something broken? Open an issue. A short reproduction beats a long description, but a long description beats staying quiet.
Missing a feature, or the API feels wrong? Open an issue too. A good number of the things in this package exist because the shape somebody suggested was better than the one that was there.
Wrote a fix? Pull requests are read and answered. composer test, composer pint and composer analyse all have to pass, and the suite runs against SQLite, MySQL and PostgreSQL.

Security reports go to the address in SECURITY.md, never to the issue tracker.

Contributing

See CONTRIBUTING.md. Security reports go to the address in SECURITY.md rather than to the issue tracker.

License

MIT.

kisame76 / filament-advanced-rich-editor

Maintainers

Package info

Statistics

Security