Getting Started

Minimal Steps

Installation:
```
composer require waterloobae/tinymce
```
The package auto-registers via Laravel's service provider discovery.
First Use Case (Blade): Add the TinyMCE editor to a Blade form:
```
@tinymce('description', $post->description ?? null)
```
Replace description with your textarea's name and $post->description with your model's attribute.
Livewire Integration: Use the @tinymce directive in Livewire components:
```
@tinymce('content', $this->content)
```
Ensure your Livewire property is public and bound to the form.

Filament Integration: Add the field to a Filament resource:

use Waterloobae\Tinymce\Filament\Fields\Tinymce;

Tinymce::make('content')
    ->required()
    ->columnSpanFull(),

Implementation Patterns

Blade Integration

Dynamic Initialization: Use the @tinymce directive with dynamic attributes:
```
@tinymce('dynamic_field', $model->dynamic_field, [
    'height' => 400,
    'plugins' => 'image code',
])
```
Pass a third argument as an array for custom TinyMCE options.
Reusable Components: Create a Blade component for consistency:
```
<x-tinymce-editor name="bio" model="{{ $user }}" />
```
Define the component in resources/views/components/tinymce-editor.blade.php:
```
@tinymce($name, $model->{$name} ?? null, $attributes ?? [])
```

Livewire Workflow

Reactive Data Binding: Bind Livewire properties directly to the editor:

public $content = '';

public function mount()
{
    $this->content = Post::find(1)->content;
}

@tinymce('content', $this->content)

Form Submission: Handle submission in Livewire:

public function save()
{
    $this->validate([
        'content' => 'required',
    ]);

    Post::find(1)->update(['content' => $this->content]);
}

Filament Patterns

Custom Field Configuration: Extend the field for project-specific needs:

Tinymce::make('article_content')
    ->toolbar([
        'bold', 'italic', 'bullist', 'numlist',
        'link', 'image', 'code',
    ])
    ->mathjax(true)
    ->darkMode(true),

Infolist Display: Use the TinymceInfolist component to display formatted content:

use Waterloobae\Tinymce\Filament\Widgets\TinymceInfolist;

TinymceInfolist::make('content')
    ->state(fn () => Post::find(1)->content),

LaTeX/MathJax Usage

Enable MathJax: Activate LaTeX support in Blade/Livewire:

@tinymce('latex_content', $content, [
    'plugins' => 'mathjax',
    'mathjax' => true,
])

Or in Filament:

Tinymce::make('latex_content')->mathjax(true)

Inline Equations: Use $...$ or \[...\] syntax in the editor. Example:

The solution to \( ax^2 + bx + c = 0 \) is given by the quadratic formula.

Gotchas and Tips

Pitfalls

License Key Warnings: If using TinyMCE via CDN, ensure the license_key: 'gpl' is included in the config (handled automatically by the package). If issues persist, manually override the config:
```
tinymce.init({
    license_key: 'gpl',
    // other configs
});
```
Base64 Image Uploads: The package handles image uploads via Base64 by default. If you encounter CORS issues or large file problems, consider:
- Disabling Base64 uploads and using a traditional file upload endpoint.
- Increasing PHP's post_max_size and upload_max_filesize if handling large images.
Livewire Property Binding: Ensure Livewire properties are public and properly initialized to avoid hydration errors:
```
public $content = null; // Initialize to null or default value
```
Filament Caching: Clear Filament's view cache after adding the Tinymce field:
```
php artisan filament:cache:clear
```

Debugging

Editor Not Loading: Check browser console for errors. Common causes:
- Missing TinyMCE CDN (package includes it by default, but verify no conflicts).
- JavaScript errors in other scripts blocking TinyMCE initialization.
- Incorrect Blade directive syntax (e.g., missing quotes or arguments).
MathJax Not Rendering: Ensure:
- The mathjax plugin is enabled in the config.
- MathJax CDN is loaded (included by default in the package).
- Equations are wrapped in $...$ or \[...\].
Dark Mode Issues: If dark mode doesn’t switch automatically:
- Verify the dark_mode config is set to true (default).
- Check for CSS conflicts with other dark mode implementations.

Configuration Quirks

Custom Toolbar: The default toolbar may not include all plugins. Explicitly define it:

Tinymce::make('content')
    ->toolbar([
        'bold', 'italic', 'underline', 'strikethrough',
        'bullist', 'numlist', 'blockquote',
        'link', 'image', 'code',
    ]),

Height/Width: Override default dimensions:

@tinymce('content', $content, ['height' => 500, 'width' => '100%'])

Disable Plugins: Exclude unwanted plugins (e.g., image):
```
Tinymce::make('content')->plugins(['code', 'lists'])
```

Extension Points

Custom Plugin Initialization: Extend TinyMCE’s initialization via the tinymce.init config. Publish the views and modify resources/views/vendor/tinymce/scripts.blade.php:

tinymce.init({
    setup: function(editor) {
        // Custom logic, e.g., adding buttons or event listeners
        editor.ui.registry.addButton('customButton', {
            text: 'Custom',
            onAction: function() {
                alert('Custom button clicked!');
            }
        });
    }
});

Filament Widget Customization: Extend the TinymceInfolist widget for project-specific display:

namespace App\Filament\Widgets;

use Waterloobae\Tinymce\Filament\Widgets\TinymceInfolist;

class CustomTinymceInfolist extends TinymceInfolist
{
    protected string $view = 'filament.widgets.custom-tinymce';

    public function render(): string
    {
        return view($this->view, [
            'content' => $this->content,
            'config' => $this->getConfig()->merge(['custom_option' => true]),
        ]);
    }
}

Blade Component Extensions: Create a wrapper component to add pre/post-processing:

<x-tinymce-enhanced name="bio" model="{{ $user }}">
    @props(['extraPlugins' => []])

    @tinymce(
        $name,
        $model->{$name} ?? null,
        array_merge(['plugins' => $extraPlugins], $attributes)
    )
</x-tinymce-enhanced>

Tinymce Laravel Package