Getting Started

Minimal Setup

Install the package for your Filament version:

composer require amidesfahani/filament-tinyeditor:^5.0  # For Filament 5.x

Publish assets and config (optional but recommended for customization):

php artisan vendor:publish --provider="AmidEsfahani\FilamentTinyEditor\TinyeditorServiceProvider" --tag="config"
php artisan vendor:publish --provider="AmidEsfahani\FilamentTinyEditor\TinyeditorServiceProvider" --tag="public"

Use in a Filament form (e.g., Create or Edit resource):

use AmidEsfahani\FilamentTinyEditor\TinyEditor;

TinyEditor::make('content')
    ->profile('default') // or 'simple', 'full', 'minimal', 'none'
    ->required();

First Use Case

Replace a standard Textarea or RichEditor field in a Filament form with a TinyMCE-powered editor for richer content editing (e.g., for blog posts, CMS pages, or rich-text fields). Example:

public static function form(Form $form): Form
{
    return $form
        ->schema([
            TinyEditor::make('body')
                ->profile('full')
                ->columnSpan('full'),
        ]);
}

Implementation Patterns

Common Workflows

Basic Editor Setup Use predefined profiles (default, simple, full, minimal) for quick integration:
```
TinyEditor::make('description')
    ->profile('simple')
    ->columnSpan('full');
```

Customizing Toolbars Override the default toolbar or plugins via the profile() method or by publishing the config:

TinyEditor::make('content')
    ->profile('custom')
    ->extraPlugins('export') // Add TinyMCE plugins
    ->toolbar('bold italic | bullist numlist | link');

File Attachments Configure image/media uploads directly in the field:

TinyEditor::make('article_content')
    ->fileAttachmentsDisk('s3')
    ->fileAttachmentsDirectory('articles')
    ->fileAttachmentsVisibility('private');

RTL Support Enable right-to-left language support:

TinyEditor::make('arabic_content')
    ->direction('rtl')
    ->profile('default');

Dynamic Profiles Use conditional logic to switch profiles based on context (e.g., user role):
```
TinyEditor::make('content')
    ->profile(auth()->user()->is_admin ? 'full' : 'simple');
```

Integration with Filament Tables Display TinyMCE content in tables using Table::column() with a custom view:

Table::column('content')->view('filament-tinyeditor::partials.preview', [
    'content' => $record->content,
]);

Advanced Patterns

Custom TinyMCE Config Extend TinyMCE’s default settings via the config file or dynamically:

TinyEditor::make('advanced_content')
    ->customConfig([
        'content_style' => 'body { font-family: Arial; }',
        'menubar' => 'edit view insert format tools',
    ]);

Modal Integration Ensure the editor works seamlessly in Filament modals by setting:

TinyEditor::make('modal_content')
    ->resize('both') // Adjusts modal height dynamically
    ->columnSpan('full');

Livewire Component Reuse Reuse the editor in custom Livewire components by extending the field:

use AmidEsfahani\FilamentTinyEditor\TinyEditor;

class CustomEditor extends TinyEditor
{
    protected string $view = 'custom.tiny-editor';
}

Multi-Language Support Combine with Laravel’s localization and TinyMCE’s language config:

TinyEditor::make('translated_content')
    ->customConfig(['language' => app()->getLocale()]);

Gotchas and Tips

Pitfalls

Asset Loading Issues
- Symptom: Editor fails to load or shows blank.
- Fix: Ensure assets are published:
```
php artisan vendor:publish --provider="AmidEsfahani\FilamentTinyEditor\TinyeditorServiceProvider" --tag="public"
```
- Debug: Check browser console for 404 errors on TinyMCE JS/CSS files.
File Upload Permissions
- Symptom: Images/media fail to upload.
- Fix: Verify the disk (fileAttachmentsDisk) and directory (fileAttachmentsDirectory) are writable. Example:
```
TinyEditor::make('content')
    ->fileAttachmentsDisk('public')
    ->fileAttachmentsDirectory('uploads')
    ->fileAttachmentsVisibility('public');
```
Profile Mismatch
- Symptom: Editor toolbar/plugins missing or broken.
- Fix: Use valid profile names (default, simple, full, minimal, none). For custom profiles, ensure they’re defined in config/filament-tinyeditor.php.
Modal Conflicts
- Symptom: Editor overlaps or closes unexpectedly in modals.
- Fix: Use resize('both') and ensure no conflicting JS events (e.g., filament:modal-close).
Content Loss on Save
- Symptom: Rich content disappears after form submission.
- Fix: Ensure the field is properly bound to a model attribute and the model uses fillable or casts:
```
protected $casts = [
    'content' => 'string', // or 'array' if storing HTML
];
```

Debugging Tips

Inspect TinyMCE Config: Use browser dev tools to check the rendered TinyMCE config under window.tinymceEditors.
Log Custom Configs: Add debug logs to verify custom configs are applied:
```
TinyEditor::make('content')
    ->customConfig(['debug' => true]);
```
Check Filament Logs: Enable Filament’s debug mode:
```
Filament::debug(true);
```

Extension Points

Custom Profiles Add new profiles in config/filament-tinyeditor.php:

'profiles' => [
    'custom' => [
        'plugins' => 'link image table',
        'toolbar' => 'bold italic | link image | table',
    ],
];

Override Views Publish and modify the editor’s Blade view:
```
php artisan vendor:publish --provider="AmidEsfahani\FilamentTinyEditor\TinyeditorServiceProvider" --tag="views"
```
Then extend resources/views/vendor/filament-tinyeditor/tiny-editor.blade.php.

Event Listeners Listen for TinyMCE events (e.g., init, change) via custom JS:

TinyEditor::make('content')
    ->extraJs('
        document.addEventListener("tinymce.init", (e) => {
            console.log("Editor initialized:", e.target.id);
        });
    ');

License Key Add a TinyMCE license key (if required) via config:
```
'license_key' => env('TINYMCE_LICENSE_KEY'),
```

Performance Tips

Lazy Load Plugins: Use the simple or minimal profile for non-rich content to reduce load time.
Disable Unused Features: Exclude plugins/tools not needed (e.g., media for text-only editors).
Cache Configs: Publish the config file to avoid runtime overrides.

Filament Tinyeditor Laravel Package