Setting Summernote for Laravel Livewire

Summernote for Laravel Livewire

// HTML
<div class="col-md-12">
    <div class="form-group" wire:ignore>
        <label for="desciption">Deskripsi</label>
        <textarea type="text" input="description" id="summernote" class="form-control summernote">{{ $description }}</textarea>
    </div>
</div>


// JAVASCRIPT
$('.summernote').summernote({
      tabsize: 2,
      height: 200,
      toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
      ],
      callbacks: {
          onChange: function(contents, $editable) {
          @this.set('description', contents);
      }
  }
  });

Hi,I use your code but,summernote not working,

can we delay like use wire:model.lazy? when I input in description component always bound data so many request

can we delay like use wire:model.lazy? when I input in description component always bound data so many request

Same problem.

The problem comes from onChange so each time I write anything it sends new request :(
anybody solved this issue?

// Source: https://davidwalsh.name/javascript-debounce-function
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

<script>
    var deb = debounce(function(contents) {
        @this.set('ticketContent', contents);
    }, 250);

    Livewire.on('ticketRichText', function() {
        $('.ticketRichText').summernote({
            tabsize: 2,
            height: 250,
            toolbar: [
                ['font', ['bold', 'underline', 'clear']],
                ['para', ['ul', 'ol']],
            ],
            callbacks: {
                onChange: function(contents, $editable) {
                    deb(contents);
                }
            }
        });
    });
</script>

@dejury
Thank you for your code. I tried it, without totally understanding what it is doing.
The problem is I don't see that Livewire.on(...) is ever being called.
Also I have validations on the text areas that do not appear because of the wire:ignore.
I also have 2 text areas on the same page and I'm not sure how to implement 2 text-areas with your code.
Can you maybe help?

You can also use the onBlur callback instead of onChange

From my experience, I use alpine js for performance optimization.