Skip to content

Overview

AuraRichEditor extends Filament\Forms\Components\RichEditor and restyles the editor end-to-end via pure CSS. The TipTap editor core, file attachments, mentions, custom blocks, and floating toolbars all keep working exactly as upstream — only the chrome changes.

Usage

use BlueStarSystem\AuraFilament\Forms\Components\AuraRichEditor;

AuraRichEditor::make('body')
    ->label('Post body')
    ->toolbarButtons([
        ['bold', 'italic', 'strike', 'underline', 'link'],
        ['h1', 'h2', 'h3'],
        ['bulletList', 'orderedList'],
        ['blockquote', 'codeBlock'],
        ['undo', 'redo'],
    ])
    ->helperText('Select text to see the floating bubble toolbar.');

Drop it in wherever you already use RichEditor::make(...).

Visual behavior

Area Aura treatment
Root card Glass surface with backdrop blur, rounded --aura-radius-lg, primary-lit border on focus
Toolbar Sticky at the top of the editor, slim, glass with extra blur, groups separated by soft vertical dividers
Toolbar buttons Rounded, lift 1px on hover with a primary tint, stay lit when the mark is active
Editor content Generous line-height (1.65), Inter heading font, muted muted text color
Blockquote Primary left bar (no italics) — Notion-style
Inline code Primary-tinted pill with mono font
Code block Dark terminal-style surface, rounded corners
Bullet list markers Primary color
Links Primary color with a subtle underline that intensifies on hover
Floating toolbar Glass pill with strong blur and soft shadow — appears over selection

Everything re-tints automatically when the end user changes the primary from the theme configurator, because the component relies on the same --primary-* CSS variables.

Toolbar recipes

The buttons themselves come from Filament's TipTap integration. The Aura component doesn't add or remove any — it just restyles them. Pick whatever groups you want:

// Minimal — writing-focused
->toolbarButtons([
    ['bold', 'italic', 'link'],
    ['h2', 'h3'],
    ['bulletList', 'orderedList'],
])

// Full-power CMS
->toolbarButtons([
    ['bold', 'italic', 'underline', 'strike', 'subscript', 'superscript'],
    ['link', 'highlight'],
    ['h1', 'h2', 'h3'],
    ['bulletList', 'orderedList', 'blockquote'],
    ['codeBlock', 'code'],
    ['attachFiles', 'customBlocks'],
    ['alignStart', 'alignCenter', 'alignEnd', 'alignJustify'],
    ['undo', 'redo'],
])

How the styling is wired

Same pattern as AuraFileUpload: getExtraAttributes() is overridden so the root always carries the class fi-aura-fo-rich-editor. The stylesheet then targets that class plus Filament's own markers (.fi-fo-rich-editor-toolbar, .fi-fo-rich-editor-toolbar-group, .fi-fo-rich-editor-content, .fi-fo-rich-editor-floating-toolbar).

Because the view is 100% Filament's own, every TipTap extension, mention provider, file attachment backend, and custom block keeps working.

Example: release-notes editor

use BlueStarSystem\AuraFilament\Forms\Components\AuraRichEditor;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Section;

Section::make('Release notes')
    ->components([
        TextInput::make('version')
            ->placeholder('v2.4.0')
            ->required(),

        AuraRichEditor::make('body')
            ->label('What\'s new')
            ->toolbarButtons([
                ['bold', 'italic', 'strike', 'link'],
                ['h2', 'h3'],
                ['bulletList', 'orderedList'],
                ['blockquote', 'codeBlock'],
                ['undo', 'redo'],
            ])
            ->fileAttachmentsDisk('public')
            ->fileAttachmentsDirectory('release-notes')
            ->helperText('Paste a link, drop an image, or use the bubble toolbar.'),
    ]);

Try it live on demo.aura-ui.com/admin/components-showcase.