Quill Editor Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require caiquebispo/quill-editor
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="CaiqueBispo\QuillEditor\QuillEditorServiceProvider"
   

2. First Use Case: Add the component to a Livewire blade view:

   @livewire('post-editor')
   

   In your Livewire component:

   use CaiqueBispo\QuillEditor\Livewire\QuillEditor;
   
   public function mount() {
       $this->content = '<p>Default content</p>';
   }
   
   public function render() {
       return view('livewire.post-editor', [
           'config' => [
               'modules' => [
                   'toolbar' => [
                       ['bold', 'italic', 'underline'],
                       [{'header': [1, 2, 3]}],
                       ['link']
                   ]
               ]
           ]
       ]);
   }
   

3. Where to Look First:

   • README for basic usage and config options.
   • config/quill-editor.php for default settings (e.g., default toolbar, theme).
   • resources/views/vendor/quill-editor.blade.php for customization hooks.

Implementation Patterns

Core Workflows

1. Basic Rich Text Editing:

   <x-quill-editor
       wire:model="post.content"
       :config="['modules' => ['toolbar' => [...]]]"
   />
   

   • Bind directly to a Livewire property (wire:model) for seamless reactivity.

2. Dynamic Configuration:

   public function getConfig() {
       return [
           'theme' => 'snow',
           'modules' => [
               'toolbar' => $this->isAdmin ? $this->fullToolbar : $this->simplifiedToolbar,
               'history' => true,
           ],
           'placeholder' => 'Type here...',
       ];
   }
   

   • Pass dynamic configs (e.g., user roles, feature flags) via Livewire properties.

3. Image Uploads:

   public function uploadImage($file) {
       $path = $file->store('uploads');
       return asset("storage/{$path}");
   }
   

   • Use Quill’s imageUpload module with a Livewire handler for custom uploads.

4. Responsive Design:

   <x-quill-editor
       :config="[
           'height' => request()->wantsJson ? 'auto' : '300px',
           'responsive' => true,
       ]"
   />
   

   • Leverage responsive config and media queries for mobile-friendly editing.

Integration Tips

• Form Validation: Use Laravel’s validation rules on the bound property (e.g., required|string).

  protected $rules = ['content' => 'required|string'];
  

• Sanitization: Sanitize HTML before saving (e.g., with Purifier or Str::of($content)->markdown()).

• Custom Modules: Extend Quill’s functionality by registering custom modules in the config:

  'modules' => [
      'customModule' => new class {
          public function __invoke($quill) {
              quill.register('modules/customModule', CustomModuleClass);
          }
      },
  ]
  

• Livewire Events: Trigger actions on Quill events (e.g., on-change, on-text-change):

  <x-quill-editor
      wire:model="content"
      @change="dispatch('content-updated')"
  />
  

Gotchas and Tips

Pitfalls

1. Duplicate Toolbars:

   • Issue: Toolbars may duplicate if Livewire re-renders the component without proper cleanup.
   • Fix: The package includes idempotent initialization, but ensure wire:key is unique:

     <x-quill-editor wire:key="'editor-'.$id" />
     

2. CSS Conflicts:

   • Issue: Quill’s default styles may clash with your app’s CSS.
   • Fix: Override styles in your global CSS or use the theme config:

     'theme' => 'bubble', // or 'snow'
     

3. Mobile Input:

   • Issue: Mobile keyboards may obscure the toolbar.
   • Fix: Use responsive config and adjust height dynamically:

     'height' => request()->isMobile() ? '200px' : '400px',
     

4. Large Content:

   • Issue: Performance lag with very long content.
   • Fix: Implement pagination or lazy-loading for the Quill instance.

Debugging

• Console Errors: Check browser console for Quill/QuillEditor errors. Common causes:

  • Missing wire:ignore.self (handled by the package, but verify in custom views).
  • Invalid config (e.g., typos in module names).

• Livewire Logs: Enable Livewire logging to debug property updates:

  Livewire::configureLogging();
  

Extension Points

1. Custom Toolbar Buttons: Extend the toolbar with custom buttons by registering Quill modules:

   'modules' => [
       'customButton' => new class {
           public function __invoke($quill) {
               quill.register('modules/customButton', CustomButtonModule);
           }
       },
   ],
   

2. Hooks: Use Livewire hooks to modify behavior:

   protected $listeners = ['content-updated' => 'handleUpdate'];
   
   public function handleUpdate() {
       // Custom logic after content changes
   }
   

3. Asset Management: Override default assets (e.g., Quill CSS/JS) by publishing the package’s assets:

   php artisan vendor:publish --tag=quill-editor-assets
   

4. Localization: Customize Quill’s UI text (e.g., toolbar labels) via the locale config:

   'locale' => 'es', // Spanish