Filament Tinyeditor Laravel Package

Technical Evaluation

Architecture Fit

• Pros:

  • Seamlessly integrates with Filament’s form system, leveraging its native field architecture (extends Filament\Forms\Components\Field).
  • TinyMCE 7.x integration provides a modern, feature-rich WYSIWYG editor with profiles (default, simple, full, minimal, custom) for granular control.
  • Supports RTL/LTR directionality, critical for multilingual applications.
  • File attachment handling (images, media) via Laravel’s storage system (e.g., public disk), aligning with Filament’s media management patterns.
  • Livewire 3 optimized, ensuring compatibility with Filament’s reactive frontend.
  • Configurable via publishable assets, allowing customization of TinyMCE plugins, toolbars, and upload behavior.

• Cons:

  • Tight coupling with Filament versions (v5.x for Filament 5.x, v4.x for Filament 4.x). Mismatched versions may require forks or manual patches.
  • No built-in support for TinyMCE’s premium features (e.g., advanced tables, spellcheck) unless manually configured via external plugins.
  • Asset publishing required for full customization, adding minor deployment complexity.

Integration Feasibility

• Low-risk for greenfield projects using Filament 5.x/Laravel 12.x/PHP 8.2+.
• Moderate risk for legacy systems:
  • Filament 4.x support exists but may lag behind Filament 5.x features.
  • PHP 8.1+ required for older versions (v3.x), but v5.x mandates PHP 8.2+.
• TinyMCE license: MIT-licensed, but TinyMCE’s commercial license may apply if using premium plugins (not enforced by this package).

Technical Risk

Key Questions

1. Filament Version Strategy:

   • Is the team locked into Filament 4.x or migrating to 5.x? If 4.x, confirm compatibility with ^4.0.
   • Will custom TinyMCE plugins (e.g., paste_from_word) require additional licensing?

2. Media Handling:

   • How are uploaded files (images/media) managed? Does the app need custom storage logic (e.g., S3, custom paths)?
   • Are there existing Filament media libraries (e.g., spatie/laravel-medialibrary) that could conflict?

3. Performance:

   • Will the editor be used in high-frequency forms (e.g., CMS entries)? TinyMCE’s default config may need optimization (e.g., lazy-loading plugins).
   • Are there bandwidth concerns for asset loading (TinyMCE JS/CSS)?

4. Customization Needs:

   • Does the team need beyond the default profiles (e.g., custom toolbars, plugins like table or spellchecker)?
   • Is TinyMCE’s API needed for programmatic control (e.g., tinymce.activeEditor)?

5. Fallback Strategy:

   • Should a plain-text fallback be implemented for users without JS?
   • How will validation errors (e.g., required fields) be handled in the editor?

Integration Approach

Stack Fit

• Primary Use Case: Replaces Filament’s default textareas in forms (e.g., blog posts, CMS pages, user bios) with a rich-text editor.
• Best For:
  • Teams already using Filament + Laravel (no frontend framework required).
  • Projects needing WYSIWYG without heavy frontend overhead (vs. CKEditor or Quill).
• Not Ideal For:
  • Headless CMS where content is stored as HTML but edited externally.
  • Projects requiring TinyMCE’s advanced features (e.g., collaborative editing) without premium licenses.

Migration Path

1. Assessment Phase:

   • Audit existing Filament forms using TextInput, RichEditor, or MarkdownEditor.
   • Identify fields where TinyMCE would add value (e.g., complex formatting needs).

2. Pilot Implementation:

   • Start with one form (e.g., a blog post resource) using the default profile:

     TinyEditor::make('content')
         ->profile('default')
         ->required();
     

   • Test file uploads, RTL support, and validation.

3. Gradual Rollout:

   • Replace TextInput/RichEditor fields incrementally.
   • Publish config/assets for custom profiles (e.g., simple for comments).

4. Optimization:

   • Fine-tune TinyMCE config (e.g., disable unused plugins for performance).
   • Implement custom storage logic if needed (e.g., S3 uploads via fileAttachmentsDirectory).

Compatibility

Sequencing

1. Prerequisites:

   • Ensure Filament and Laravel versions match the package’s compatibility table.
   • Verify storage permissions for file uploads (e.g., storage/app/public).

2. Installation:

   composer require amidesfahani/filament-tinyeditor:^5.0
   php artisan vendor:publish --provider="AmidEsfahani\FilamentTinyEditor\TinyeditorServiceProvider" --tag="config"
   php artisan vendor:publish --provider="AmidEsfahani\FilamentTinyEditor\TinyeditorServiceProvider" --tag="public"
   

3. Configuration:

   • Customize config/filament-tinyeditor.php for profiles, RTL, or upload paths.
   • Example: Add a custom profile for a minimal toolbar:

     'custom' => [
         'plugins' => 'link lists',
         'toolbar' => 'bold italic | bullist numlist | link',
     ],
     

4. Usage:

   • Replace TextInput with TinyEditor in Filament resources:

     use AmidEsfahani\FilamentTinyEditor\TinyEditor;
     
     TinyEditor::make('description')
         ->profile('custom')
         ->columnSpan('full');
     

5. Testing:

   • Validate form submission, file uploads, and edge cases (e.g., empty content, special characters).
   • Test RTL if applicable.

6. Deployment:

   • Clear cached views (php artisan view:clear) if issues arise.
   • Monitor asset loading (TinyMCE JS/CSS) in production.

Operational Impact

Maintenance

• Pros:
  • MIT-licensed: No legal restrictions.
  • Active development: Regular updates for Filament 5.x (last release: 2026-05-22).
  • Community-driven: Open to contributions (GitHub issues/PRs).
• Cons:
  • No official support: Issues require community or self-resolution.
  • TinyMCE updates: May require package updates if TinyMCE releases breaking changes.

Support

• Troubleshooting:
  • Common Issues:
    • Asset loading failures: Verify public tag in vendor:publish.
    • File upload errors: Check storage permissions and fileAttachmentsDisk.
    • RTL misalignment: Ensure direction config is set to rtl.
  • Debugging: Use browser dev tools to inspect TinyMCE console errors.
• Resources:
  • Filament Docs: [Filament Forms](https://filamentphp