mdobes/rich-editor-fullscreen
Adds a fullscreen toggle to the rich editor in Filament, letting you write and edit long-form content on a distraction-free, expanded canvas without leaving the form. Simple to install and configure for a smoother authoring experience.
Install the package with Composer and register the plugin on any panel that uses RichEditor:
composer require mdobes/rich-editor-fullscreen
// app/Providers/Filament/AdminPanelProvider.php
use Mdobes\RichEditorFullscreen\RichEditorFullscreenPlugin;
public function panel(Panel $panel): Panel
{
return $panel
->plugin(RichEditorFullscreenPlugin::make());
// or: ->plugins([RichEditorFullscreenPlugin::make()])
}
There is no config file to publish and no migration to run — the plugin contributes a JS/CSS asset and a toolbar affordance. After registering the plugin, clear caches once so Filament picks up the new asset URL:
php artisan filament:assets
php artisan optimize:clear
First use case: open any resource form that already uses a RichEditor on a large field (blog posts, policy documents, product descriptions). You should now see a fullscreen toggle in the editor toolbar. Click it and the editor expands over the viewport; press Escape to exit. If nothing appears, verify you are on Filament v4 (see Gotchas) and that the field is a RichEditor, not a plain Textarea.
Where to look first in the source: the plugin class (registration), the resources/dist JS (the TipTap extension and toolbar button), and the Blade view that wraps the editor if one is shipped. Those three files tell you everything about how the button is injected and what CSS class names it depends on.
Scope the enhancement to specific editors. Because the plugin registers globally, the usual pattern is to leave it enabled and rely on the toolbar configuration to decide where fullscreen is meaningful. If you want it only on a "content" field, keep the fullscreen button in a dedicated toolbar set and omit it from small inline editors:
RichEditor::make('body')
->toolbarButtons([
'fullscreen', // if exposed as a toolbar button id
'bold', 'italic', 'link', 'attachFiles',
]),
If the package doesn't expose a toolbar id, control it at the field level by only using RichEditor where fullscreen matters and falling back to Textarea for short fields.
Pair with file attachments and rich content. Fullscreen is most valuable on editors that host attachments, tables, or large embeds. A common day-to-day pattern is a polymorphic "body" editor used across posts, docs, and comments, with ->fileAttachmentsDisk('s3') and the fullscreen plugin both active. Verify uploads still work while fullscreen is toggled — the overlay changes stacking context, and misconfigured modal z-index is the most frequent breakage.
Compose with Filament's modal actions. When a RichEditor lives inside a modal or slide-over, fullscreen should expand within the modal rather than the page. Test both ->modalWidth('7xl') and a plain page form. If the fullscreen target binds to document.body, you get an editor that covers your modal; if it binds to the field container, you get a scoped expansion. Which behavior you get depends on the bundled JS; check the extension's DOM target early and, if needed, wrap the field in a Section or Grid you control.
Reuse across panels. Register the plugin in each PanelProvider you want it in (admin, user portal, etc.). Do not register it twice in the same panel — duplicate asset registration produces two toolbar buttons and confusing toggle behavior.
Testing pattern. In Pest/Livewire form tests, assert the field renders; you generally cannot assert the fullscreen toggle's visual state since it's client-side. Instead, add a browser test (Dusk or Filament's own testing helpers) if you need end-to-end coverage of the toolbar button. For unit tests, treat the editor as a normal RichEditor and assert on submitted content.
composer require or upgrade, run php artisan filament:assets and clear bootstrap/cache. A stale public/css/filament directory hides the toolbar button entirely.composer.json until you've smoke-tested the editor, or fork it — the source surface is small (plugin class + JS + CSS) and easy to vendor into app/ if maintenance stalls.RichEditor ships a specific TipTap build. If your app loads another ProseMirror/TipTap editor elsewhere, the two can fight over global window extensions. The fullscreen extension should be isolated; if you see the button on unrelated editors, it's registering into a shared extension registry — wrap those editors in an iframe or a separate TipTap instance.Escape to close modals. Inside a modal, the first Escape should exit fullscreen and the second should close the modal. If the modal closes while the editor is fullscreen, you can be left with a scroll-locked page — a known class of bug in overlay implementations. Add a defensive x-on:keydown.escape handler or reset the editor state on modal-closed.body, losing the panel's theme scope. If the toolbar turns white-on-white in dark mode, add a class to the fullscreen root that re-applies dark or Filament's theme tokens. Check resources/dist/*.css for the selector it targets (:root, .dark, or an explicit class).RichEditor each register their own fullscreen; opening fullscreen on one nested row can visually cover sibling repeaters. Prefer flat forms for fullscreen-heavy content, or constrain fullscreen to the page-level editor.customCss() on the panel targeting the button's class, or vendoring the JS extension. Don't expect a RichEditorFullscreenPlugin::configure() API — it isn't there in a package this size.filament:assets run? (3) Is the JS bundle in the page source (<script src=".../fullscreen">)? (4) Does the button exist in DOM but hidden by CSS? (5) Does it work outside modals? That sequence resolves ~90% of reports for a plugin this thin.How can I help you explore Laravel packages today?