Filament Forms Tinyeditor Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via Composer:

   composer require mohamedsabil83/filament-forms-tinyeditor
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="MohamedSabil83\FilamentFormsTinyEditor\FilamentFormsTinyEditorServiceProvider"
   

2. First Use Case Register the editor in a Filament form:

   use MohamedSabil83\FilamentFormsTinyEditor\Forms\Components\TinyEditor;
   
   TinyEditor::make('content')
       ->required()
       ->columnSpanFull(),
   

3. Where to Look First

   • Documentation: Check the README for basic usage.
   • Config: Review config/filament-forms-tinyeditor.php for default TinyMCE settings (e.g., toolbar, plugins).
   • Source: Inspect app/Providers/FilamentFormsTinyEditorServiceProvider.php for service registration.

Implementation Patterns

Common Workflows

1. Basic Integration Replace default Filament textareas with TinyMCE in forms:

   public static function form(Form $form): Form
   {
       return $form
           ->schema([
               TinyEditor::make('description')
                   ->rows(5),
           ]);
   }
   

2. Customizing TinyMCE Override default config via the config() method:

   TinyEditor::make('bio')
       ->config([
           'plugins' => 'advlist autolink lists link image charmap print preview',
           'toolbar' => 'undo redo | bold italic | alignleft aligncenter alignright',
       ]),
   

3. Validation & Sanitization Use Filament’s built-in validation alongside TinyMCE:

   TinyEditor::make('article')
       ->required()
       ->maxLength(5000)
       ->afterStateUpdated(fn (string $state, TinyEditor $component) => $component->sanitize($state)),
   

4. Dynamic Toolbars Conditionally load plugins based on user roles:

   TinyEditor::make('editor')
       ->config(fn (User $user) => [
           'toolbar' => $user->can('publish') ? 'publish' : '',
       ]),
   

5. Reusing Components Create a reusable form component:

   // app/Filament/Forms/Components/TinyEditorWithPresets.php
   class TinyEditorWithPresets extends TinyEditor
   {
       protected string $presets = 'bold,italic,|,alignleft,aligncenter,alignright';
   
       public function configure(): static
       {
           return $this->config(['toolbar' => $this->presets]);
       }
   }
   

Integration Tips

• Asset Management: Ensure TinyMCE assets (JS/CSS) are loaded. The package auto-registers them via Filament’s asset pipeline.
• Localization: Use Filament’s localization system to translate TinyMCE UI:

  TinyEditor::make('content')
      ->lang('es'), // Spanish
  

• Performance: Lazy-load TinyMCE for non-critical forms by delaying initialization:

  TinyEditor::make('notes')
      ->lazy(true),
  

Gotchas and Tips

Pitfalls

1. Deprecation Warning The package is unmaintained (as noted in the README). Consider alternatives like:

   • filament-spatie/laravel-medialibrary (for rich text + media).
   • filament/tiny-mce (official Filament TinyMCE wrapper).

2. Asset Conflicts

   • Issue: TinyMCE JS/CSS may conflict with other packages (e.g., Laravel Fortify).
   • Fix: Explicitly load TinyMCE assets in a service provider:

     public function boot()
     {
         Filament::registerAsset(
             path: 'vendor/mohamedsabil83/filament-forms-tinyeditor/dist/tinymce.min.js',
             integrity: false
         );
     }
     

3. Configuration Overrides

   • Issue: Global config (config/filament-forms-tinyeditor.php) may override per-field settings.
   • Fix: Use ->config() to merge settings:

     TinyEditor::make('content')
         ->config(array_merge(config('filament-forms-tinyeditor.defaults'), [
             'plugins' => 'additional_plugin',
         ])),
     

4. Sanitization Gaps

   • Issue: TinyMCE’s default sanitization may not match Laravel’s policies (e.g., <script> tags).
   • Fix: Add a custom sanitizer:

     use Purifier;
     
     TinyEditor::make('html')
         ->afterStateUpdated(fn (string $state) => Purifier::clean($state)),
     

5. Filament Version Compatibility

   • Issue: The package may not support the latest Filament major version.
   • Fix: Check the releases or fork the repo to update dependencies.

Debugging Tips

• Console Errors: TinyMCE may fail silently. Check browser console for:
  • tinymce is not defined → Asset loading issue.
  • Invalid configuration → Malformed config() array.
• Log Config: Dump TinyMCE config to debug:

  TinyEditor::make('debug')
      ->config(fn () => [
          'setup' => fn (editor) => logger()->debug($editor.getConfig()),
      ]),
  

• Network Tab: Verify TinyMCE assets are loaded (e.g., tinymce.min.js).

Extension Points

1. Custom Plugins Extend TinyMCE with plugins like table or codesample:

   TinyEditor::make('editor')
       ->config([
           'plugins' => 'table codesample',
           'toolbar' => 'codesample | table',
       ]),
   

2. Event Listeners Hook into TinyMCE events (e.g., init, change):

   TinyEditor::make('content')
       ->config([
           'setup' => fn (editor) => $editor.on('change', fn () => logger()->info('Content changed!')),
       ]),
   

3. Themes Switch to a dark theme:

   TinyEditor::make('bio')
       ->config([
           'skin' => 'oxide-dark',
           'content_style' => 'body { background: #222; color: #eee; }',
       ]),
   

4. Cloud Services Integrate with TinyMCE Cloud for plugins/themes:

   TinyEditor::make('article')
       ->config([
           'api_key' => config('services.tinymce.api_key'),
           'cloud_channel' => 'stable',
       ]),