## Getting Started

### Minimal Setup
1. **Install the package**:
   ```bash
   composer require nasirkhan/laravel-jodit

The service provider is auto-discovered.

Ensure asset stacks exist in your layout:

@stack('after-styles')
@stack('after-scripts')

Use the component in a form:

<x-jodit::editor name="content" :value="old('content', $post->content ?? '')" />

First Use Case: Basic Livewire Integration

For a Livewire component, sync the editor with a property:

<x-jodit::editor name="description" wire-model="description" />

The component automatically handles wire:ignore and debounced sync.

Implementation Patterns

Blade Integration

Plain Blade Forms:

<x-jodit::editor
    name="article_body"
    :value="$article->body"
    placeholder="Write your article here..."
    :required="true"
/>

Custom Toolbar:

<x-jodit::editor
    name="editor_content"
    :buttons="['bold', 'italic', '|', 'link', 'image']"
/>

Livewire Integration

Debounced Sync: The wire-model prop automatically debounces changes (default: 300ms). Override with :debounce="500" if needed.

Dynamic Updates:

// Livewire component
public $content = '';

// Automatically updates via JS API

File Browser Customization

Disable File Browser:

<x-jodit::editor name="excerpt" :file-browser="false" />

Custom Connector Route:

<x-jodit::editor
    name="content"
    connector-url="{{ route('admin.jodit.connector') }}"
/>

Configuration Overrides

Publish the config and customize:

php artisan vendor:publish --tag=jodit-config

Modify config/jodit.php to:

Change CDN URLs for offline builds.
Adjust default toolbar buttons.
Set custom storage paths or middleware.

Gotchas and Tips

Common Pitfalls

Missing Asset Stacks: Forgetting @stack('after-styles') or @stack('after-scripts') in your layout will break the editor. Verify these exist in <head> and before </body>.

Livewire Model Binding: Ensure the wire-model prop matches the Livewire property name exactly (case-sensitive). Example:

<!-- Correct -->
<x-jodit::editor name="bio" wire-model="bio" />

<!-- Incorrect (case mismatch) -->
<x-jodit::editor name="Bio" wire-model="bio" />

File Upload Permissions: If using the built-in file browser, ensure the storage/app/public/jodit directory is writable:
```
mkdir -p storage/app/public/jodit && chmod -R 755 storage/app/public/jodit
```
Toolbar Button Names: Use the exact button names from the Buttons Reference. For example, align (dropdown) vs. left, center, etc. (individual buttons).

Debugging Tips

Console Errors: Check the browser console for missing assets or JS errors. Common issues:
- CDN blocked by firewall (test with https://unpkg.com/jodit@4.1.16/es2021/jodit.min.js directly).
- Conflicting jQuery versions (Jodit requires jQuery 3.x).
Livewire Sync Issues: If changes aren’t syncing, verify:
- The wire-model prop is correctly bound.
- No JavaScript errors in the console.
- The debounce delay isn’t too long (reduce :debounce temporarily for testing).

Extension Points

Custom File Browser Backend: Disable the built-in connector ('route' => ['enabled' => false]) and point the editor to a custom endpoint:
```
<x-jodit::editor
    name="content"
    connector-url="{{ route('spatie.dropzone.connector') }}"
/>
```

Predefined Toolbar Profiles: Extend the config to add reusable button sets:

// config/jodit.php
'profiles' => [
    'minimal' => ['bold', 'italic', 'link', 'image'],
    'rich'    => ['bold', 'italic', '|', 'align', '|', 'ul', 'ol', '|', 'link', 'image', 'video'],
],

Use in Blade:

<x-jodit::editor name="content" profile="minimal" />

Middleware for Connector: Restrict access to the connector route by adding middleware to config/jodit.php:
```
'route' => [
    'middleware' => ['web', 'auth', 'verified'],
],
```

Performance Notes

Lazy-Loading: For large applications, consider lazy-loading the editor’s JS/CSS only on pages where it’s needed.
Image Optimization: If using intervention/image-laravel, ensure the resize and crop features are configured in config/jodit.php for optimal uploads.

---

Laravel Jodit Laravel Package