Filament Rich Editor Textcolor Laravel Package

Getting Started

Install the package alongside a Filament panel that already uses RichEditor (Filament v3.2+/v4, which ships TipTap 2):

composer require androsamp/filament-rich-editor-textcolor

Then register the plugin with your panel. Depending on the version, this is either the panel plugin API or a RichEditor configuration macro:

// app/Providers/Filament/AdminPanelProvider.php
use AndroSamp\FilamentRichEditorTextColor\FilamentRichEditorTextColorPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(FilamentRichEditorTextColorPlugin::make());
}

Expose the button in the toolbar of the fields where you want authors to set color:

use Filament\Forms\Components\RichEditor;

RichEditor::make('body')
    ->toolbarButtons([
        'bold', 'italic', 'link',
        'textColor', // the name registered by this package
        'undo', 'redo',
    ]);

Where to look first: the package README.md (button name, plugin class namespace, config keys), then vendor/androsamp/filament-rich-editor-textcolor/src/ for the RichEditor extension and the assets registration. Confirm the toolbar button identifier matches what the JS TipTap extension registers — this is the most common first-run failure.

First use case: an editorial/CMS panel where content authors need colored inline text (e.g. product status, highlighted callouts) without switching to a full WYSIWYG. Keep it scoped to one RichEditor initially, verify the HTML output is preserved through save and re-render, then roll out to other fields.

Implementation Patterns

Panel-wide default toolbar. If every rich editor should get the button, don't repeat the toolbar array. Register a shared default once:

// AppServiceProvider::boot()
use Filament\Forms\Components\RichEditor;

RichEditor::configureUsing(function (RichEditor $editor): void {
    $editor->toolbarButtons([
        'bold', 'italic', 'underline', 'link',
        'textColor',
        'undo', 'redo',
    ]);
});

Per-field opt-in. For a mixed panel, keep the global toolbar minimal and add the button only on fields that need it. Extract a constant or enum so the button list is defined once:

final class Toolbars
{
    public const EDITORIAL = ['bold', 'italic', 'link', 'textColor', 'undo', 'redo'];
}

RichEditor::make('body')->toolbarButtons(Toolbars::EDITORIAL);

Combine with sibling RichEditor plugins. Color is usually one of several TipTap additions (highlight, alignment, custom blocks). Keep all plugin registration in one panel provider method so the plugin boot order is explicit and you can add color swatches later without hunting across providers.

Persist and re-hydrate as plain HTML. Color is written as inline style="color: …" (or a utility class if the extension is configured that way). Store the editor's HTML string as-is in a longText column and render it with {!! $model->body !!} after sanitization. If you need structured storage (e.g. a JSON TipTap doc), the extension will already be reflected in the JSON output — don't post-process it.

Sanitization. In Filament v4, RichEditor exposes HTML sanitization. Verify the allowed-attribute list keeps style and color; otherwise the palette is stripped on save and authors report "the color disappears after I hit Save." Configure the sanitizer alongside the field:

RichEditor::make('body')
    ->toolbarButtons(Toolbars::EDITORIAL)
    ->sanitizeHtml(); // ensure inline style/color are allowed

Front-end rendering. Tailwind-based sites need the color output to survive build. Inline style values do; utility classes (e.g. text-red-500) do not. If your theme uses classes, add the generated palette to safelist in tailwind.config.js, or prefer inline styles for user-authored content.

Gotchas and Tips

• Low-maintenance signal. This package has 1 star and 0 dependents. Pin the version in composer.json, review the diff on upgrades, and be prepared to vendor or fork the extension class if Filament's next major breaks the toolbar extension API. Keep your usage confined to a single provider so removal is cheap.
• Button name mismatch. TipTap extension names are camelCase (textColor). Passing textcolor or text-color to toolbarButtons() results in a silently missing button — Filament does not always throw here. Verify against RichEditor::getTipTapExtensions() output.
• Asset publishing. If the package ships compiled JS via vendor:publish tags, run it and commit the published assets, or ensure your deploy step runs php artisan filament:assets after composer install. Stale assets are the usual cause of "button is there but does nothing."
• Cache clearing after install. php artisan optimize:clear (or filament:optimize-clear) refreshes Filament's component/asset manifests. A fresh composer require without this often needs a hard browser reload.
• CSP. Inline style attributes trip a strict style-src. If your panel runs under a Content-Security-Policy, add 'unsafe-inline' for styles or switch the extension to class-based colors and safelist them.
• Paste and copy semantics. Pasting from Word or another editor can inject arbitrary color styles that your palette never produced. If you need palette-only output, sanitize on save to a fixed color allow-list, not just to style="color".
• Dark mode contrast. Colors chosen against a light background can become unreadable in dark mode. Test the rendered HTML in both themes, or constrain the palette to mid-tone colors that work in either.
• Debugging missing extension. If the button renders but no dialog appears, open devtools: a "no view found" or undefined extension error in the console points at an unpublished/duplicate script. Confirm the JS is loaded once — registering the plugin in both the panel provider and a RichEditor::configureUsing should not double-load assets.
• Extension point. Most value here is the registered TipTap extension; if you need more than the default palette (brand colors, a reset button), extend the package's extension rather than re-implementing color from scratch, and keep your customizations in a local App\Filament\RichEditor namespace so the vendor package stays pristine.