Livewire Summernote Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require blari18570/livewire-summernote
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Blari18570\LivewireSummernote\LivewireSummernoteServiceProvider"
   

2. Basic Usage Add the component to a Livewire class:

   use Blari18570\LivewireSummernote\LivewireSummernote;
   
   public $content = '';
   
   public function mount()
   {
       $this->content = '<p>Initial content</p>';
   }
   
   public function render()
   {
       return view('livewire.your-component', [
           'summernote' => LivewireSummernote::make('content')
               ->height(300)
               ->toolbar([
                   ['groupName' => 'style', 'buttons' => ['bold', 'italic']],
               ]),
       ]);
   }
   

3. Blade Integration

   @livewire('your-component')
   

First Use Case

Replace a standard <textarea> with a rich-text editor in a form:

// Livewire component
public $description = '';

public function updatedDescription()
{
    // Auto-save or validate content
}

<div>
    {{ $summernote }}
</div>

Implementation Patterns

Common Workflows

1. Dynamic Toolbar Configuration

   LivewireSummernote::make('content')
       ->toolbar([
           ['groupName' => 'paragraph', 'buttons' => ['paragraph', 'blockquote']],
           ['groupName' => 'insert', 'buttons' => ['link', 'picture']],
       ]);
   

2. Image Upload Handling Use the imageUpload callback to process uploaded files:

   LivewireSummernote::make('content')
       ->imageUpload(function ($file) {
           $path = $file->store('summernote-images');
           return asset("storage/{$path}");
       });
   

3. Validation Integration

   use Illuminate\Validation\Rule;
   
   public function rules()
   {
       return [
           'content' => ['required', Rule::unique('posts')->ignore($this->post->id)],
       ];
   }
   

4. Reusable Components Create a base component for forms:

   // SummernoteFormComponent.php
   public function mount($model, $field)
   {
       $this->field = $field;
       $this->model = $model;
   }
   
   public function render()
   {
       return view('livewire.summernote-form', [
           'summernote' => LivewireSummernote::make($this->field)
               ->height(400)
               ->toolbar($this->getToolbar()),
       ]);
   }
   

5. Live Updates Sync content across components:

   public $sharedContent;
   
   public function updatedContent()
   {
       $this->sharedContent = $this->content;
   }
   

Integration Tips

• Laravel Mix/Webpack: Ensure Summernote CSS/JS are included in your build:

  // resources/js/app.js
  import 'summernote/dist/summernote-lite.min.css';
  import 'summernote/dist/summernote-lite.min.js';
  

• Tailwind CSS: Override styles with utility classes:

  <div class="summernote-container p-4 bg-gray-50 rounded-lg">
      {{ $summernote }}
  </div>
  

• Livewire 3 Migration: Use the wire:model directive for reactivity:

  {{ $summernote->wireModel('content') }}
  

Gotchas and Tips

Pitfalls

1. Double Initialization

   • Issue: Summernote initializes twice if the component re-renders.
   • Fix: Use wire:ignore on the container:

     <div wire:ignore>
         {{ $summernote }}
     </div>
     

2. CSRF Token Conflicts

   • Issue: Image uploads may fail due to missing CSRF token.
   • Fix: Ensure your upload route includes @csrf:

     <form method="POST" enctype="multipart/form-data">
         @csrf
         <!-- form fields -->
     </form>
     

3. Toolbar Button Misalignment

   • Issue: Custom buttons may not align with the default toolbar.
   • Fix: Use the buttonList option for precise control:

     ->toolbar([
         ['groupName' => 'custom', 'buttons' => ['customButton']],
     ])
     ->buttonList([
         'customButton' => {
             'text': 'Custom',
             'callback': function() { /* logic */ }
         }
     ]);
     

Debugging

• Console Errors: Check for Uncaught TypeError in browser console. Often caused by missing dependencies or incorrect initialization.
• Network Tab: Verify image uploads are reaching your endpoint. Use telescope:record to log requests:

  public function imageUpload($file)
  {
      \Illuminate\Support\Facades\Telescope::record(
          new \Illuminate\Support\Facades\Telescope\Entries\IncomingRequest($file->toArray())
      );
      // ... rest of the logic
  }
  

Configuration Quirks

1. Default Height

   • Override globally in config/livewire-summernote.php:

     'default_height' => 500,
     

2. Language Support

   • Load translations dynamically:

     LivewireSummernote::make('content')
         ->lang('es-ES') // Spanish
         ->initCallback("summernote.lang = 'es-ES';");
     

3. Lazy Loading

   • Defer initialization until the component is visible:

     LivewireSummernote::make('content')
         ->initCallback("setTimeout(function() { $('#summernote').summernote(); }, 1000);");
     

Extension Points

1. Custom Plugins Extend Summernote with plugins:

   LivewireSummernote::make('content')
       ->plugins(['summernote-plugin-name'])
       ->initCallback("$('#summernote').summernote('codeview.show');");
   

2. Event Listeners Hook into Summernote events:

   LivewireSummernote::make('content')
       ->initCallback("
           $('#summernote').on('summernote.change', function(we, contents) {
               Livewire.emit('contentChanged', contents);
           });
       ");
   

3. Alpine.js Integration Combine with Alpine for dynamic updates:

   <div x-data="{ isEditing: false }">
       @if($isEditing)
           {{ $summernote->wireModel('content') }}
       @else
           <div x-text="$wire.content"></div>
       @endif
   </div>