Fixed constant request to the server as the user types into the editor

[muhammedjafer]

No description provided.

[dasundev]

I'll keep this PR open until someone else provides their opinion on it.

[dasundev]

I'm not sure if this is the best way to handle this.

[muhammedjafer]

why??

[dasundev]

Because you are using a timeout.

[ghabriel25]

@dasundev Just use lodash debounce

quill.on('text-change', _.debounce( () => {
    let value = quill.root.innerHTML;
    @this.set('value', value);
}, 1000));

lodash comes along with quill

[muhammedjafer]

i improved the code to use debouncing directly,

`quill.root.innerHTML = $wire.get('value');

function debounce(func, delay) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, arguments), delay);
    };
}

// Debounced function to handle text change
const handleTextChangeDebounced = debounce(() => {
    const value = quill.root.innerHTML;
    @this.set('value', value);
}, 1000);

quill.on('text-change', handleTextChangeDebounced);

quill.on('selection-change', () => {
    if (quill.hasFocus()) {
        handleTextChangeDebounced();
    }
});`

[muhammedjafer]

i found another quill livewire package, they use debouncing also, and they even handle the image upload into their text editor, have a look =>>> https://github.com/joelwmale/livewire-quill/blob/master/resources/views/livewire/livewire-quill.blade.php

[Schrolli91]

Why not use the livewire own debounce?
https://livewire.laravel.com/docs/wire-model#customizing-the-debounce

This will send an request after time (n) no further inputs are made.
<input type="text" wire:model.live.debounce.250ms="title">

[muhammedjafer]

.debounce.250ms

the problem with this package is not the .live of livewire, the quill editor fires an event by names of (text-change) each time the user types into the editor and with that the set method is used so each time the value will be set as the user types into the editor look at the code of the package:

quill.on('text-change', function () {
        let value = quill.root.innerHTML;
        @this.set('value', value);
    });

[Balerka]

// Создаем переменную для хранения таймера
let debounceTimer;

quill.on('text-change', function () {
    // Очищаем предыдущий таймер
    clearTimeout(debounceTimer);

    // Запускаем новый таймер с задержкой
    debounceTimer = setTimeout(function () {
        let value = quill.root.innerHTML;
        @this.set('value', value);
    }, 500); // задержка 500 мс (можно изменить при необходимости)
});