Augment Edit Box Input Enfasterment (#2450) * edit box performance "fix" Note: jQuery makes an adjustment to height or scrollHeight that pure JavaScript doesn't;+2 was the minimum I needed to not get a vertical scrollbar, so I went with +4 * Refactor * Use debounce instead of throttle --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

e1e0ef8730b7c81641706783dd46673ad999aae1

Succubyss <87207237+Succubyss@users.noreply.github.com>

Signed

public/script.js+17 -5 Viewed

         chooseBogusFolder($(this), tagId);
     });
 -    $(document).on('input', '.edit_textarea', function () {
 +    /**
 -        scroll_holder = $('#chat').scrollTop();
 +     * Sets the scroll height of the edit textarea to fit the content.
 -        $(this).height(0).height(this.scrollHeight);
 +     * @param {HTMLTextAreaElement} e Textarea element to auto-fit
 +     */
 +    function autoFitEditTextArea(e) {
 +        scroll_holder = chatElement[0].scrollTop;
 +        e.style.height = '0';
 +        e.style.height = `${e.scrollHeight + 4}px`;
         is_use_scroll_holder = true;
 +    }
 +    const autoFitEditTextAreaDebounced = debounce(autoFitEditTextArea, debounce_timeout.short);
 +    document.addEventListener('input', e => {
 +        if (e.target instanceof HTMLTextAreaElement && e.target.classList.contains('edit_textarea')) {
 +            const immediately = e.target.scrollHeight > e.target.offsetHeight || e.target.value === '';
 +            immediately ? autoFitEditTextArea(e.target) : autoFitEditTextAreaDebounced(e.target);
 +        }
     });
     $document.getElementById('#chat').onaddEventListener('scroll', function () {
         if (is_use_scroll_holder) {
 -            $('#chat').scrollTop(scroll_holder);
 +            this.scrollTop = scroll_holder;
             is_use_scroll_holder = false;
+        }
     });

public/scripts/constants.js+2 -0 Viewed

 export const debounce_timeout = {
     /** [100 ms] For ultra-fast responses, typically for keypresses or executions that might happen multiple times in a loop or recursion. */
     quick: 100,
 +    /** [200 ms] Slightly slower than quick, but still very responsive. */
 +    short: 200,
     /** [300 ms] Default time for general use, good balance between responsiveness and performance. */
     standard: 300,
     /** [1.000 ms] For situations where the function triggers more intensive tasks. */