Summernote and Livewire

What seems to be the problem:
hello community from Argentina learning livewire; I have a problem and days without solving when I want to edit a text in summernote it does not show me anything in the editor, please help
Steps to Reproduce:

Are you using the latest version of Livewire:

Do you have any screenshots or code examples:
$(’#editable2’).summernote({
tabsize: 2,
height: 120,
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, $editable2) {
@this.set(‘datosUpdate’, contents, $editable2);
}
}
});

                    <label for="exampleFormControlInput3">Cuerpo de la noticia</label>

                    <textarea  class="form-control editable2  "  id="editable2" name="datosUpdate"  wire:model="datosUpdate"></textarea>

                </div>

Can you explain more or post the full code?

If you want to work with text editor, I suggest Trix Editor, See more in this thread

First of all you have to wrap your summernote edit with the wire:ignore.

In order to have a real time response to the summernote input I have following js script:

document.addEventListener("livewire:load", function(event) {
        window.livewire.hook('message.processed', (message, component) => {
            initSummernotes();
            let obj = $('#your_element_id:not(.summernote-enabled)');
            $(obj).addClass('summernote-enabled');
            obj.on("summernote.change", debounced(500, function (e) {   // callback as jquery custom event
                let comment = $(e.target).summernote('code');
                let div = $(e.target).closest('*[wire\\:id]');
                let componentId = div.attr('wire:id');
                // console.log(componentId);
                let component = window.livewire.find(componentId);
                component.set('body', comment );
            }));
        });
    });

This was it is possible to hide summernote element and show again, it will be automatically initialized again.
p.s.
My input field has name body as you see from the code. And also I am using JQuery…
one missing function:

function debounced(delay, fn) {
        let timerId;
        return function (...args) {
            if (timerId) {
            clearTimeout(timerId);
            }
            timerId = setTimeout(() => {
            fn(...args);
            timerId = null;
            }, delay);
        }
    }