Implement autofit for edit textarea

2fbe689605beddaa84cfc3b867c4e324901f365e

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: f649e4698b749c62c6f3c413605fb77d874f2569

public/script.js+23 -27 Viewed

 let this_del_mes = -1;
 //message editing and chat scroll position persistence
 var this_edit_mes_chname = '';
 var this_edit_mes_id;
 -var scroll_holder = 0;
 -var is_use_scroll_holder = false;
 //settings
 export let settings;

         chooseBogusFolder($(this), tagId);
     });
 -    /**
 +    const cssAutofit = CSS.supports('field-sizing', 'content');
 -     * Sets the scroll height of the edit textarea to fit the content.
 -     * @param {HTMLTextAreaElement} e Textarea element to auto-fit
 -     */
 -    function autoFitEditTextArea(e) {
 -        scroll_holder = chatElement[0].scrollTop;
 -        e.style.height = '0px';
 -        const newHeight = e.scrollHeight + 4;
 -        e.style.height = `${newHeight}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 scrollbarShown = e.target.clientWidth < e.target.offsetWidth && e.target.offsetHeight >= window.innerHeight * 0.75;
 -            const immediately = (e.target.scrollHeight > e.target.offsetHeight && !scrollbarShown) || e.target.value === '';
 -            immediately ? autoFitEditTextArea(e.target) : autoFitEditTextAreaDebounced(e.target);
 -        }
 -    });
     const chatElementScroll = document.getElementById('chat');
     const chatScrollHandler = function () {
         if (power_user.waifuMode) {

     };
     chatElementScroll.addEventListener('wheel', chatScrollHandler, { passive: true });
     chatElementScroll.addEventListener('touchmove', chatScrollHandler, { passive: true });
 -    chatElementScroll.addEventListener('scroll', function () {
++
             if (is_use_scroll_holder!cssAutofit) {
 -            this.scrollTop = scroll_holder;
 +        /**
 -            is_use_scroll_holder = false;
 +         * Sets the scroll height of the edit textarea to fit the content.
 +         * @param {HTMLTextAreaElement} e Textarea element to auto-fit
 +         */
 +        function autoFitEditTextArea(e) {
 +            e.style.height = '0px';
 +            const newHeight = e.scrollHeight + 4;
 +            e.style.height = `${newHeight}px`;
 +        }
 +        const autoFitEditTextAreaDebounced = debounce(autoFitEditTextArea, debounce_timeout.short);
 +        document.addEventListener('input', e => {
 +            if (e.target instanceof HTMLTextAreaElement && e.target.classList.contains('edit_textarea')) {
 +                const scrollbarShown = e.target.clientWidth < e.target.offsetWidth && e.target.offsetHeight >= window.innerHeight * 0.75;
 +                const immediately = (e.target.scrollHeight > e.target.offsetHeight && !scrollbarShown) || e.target.value === '';
 +                immediately ? autoFitEditTextArea(e.target) : autoFitEditTextAreaDebounced(e.target);
 +            }
 +        });
+    }
 -    }, { passive: true });
     $(document).on('click', '.mes', function () {
         //when a 'delete message' parent div is clicked

             let edit_textarea = $(this)
                 .closest('.mes_block')
                 .find('.edit_textarea');
 +            if (!cssAutofit) {
                 edit_textarea.height(0);
                 edit_textarea.height(edit_textarea[0].scrollHeight);
 +            }
             edit_textarea.focus();
             edit_textarea[0].setSelectionRange(     //this sets the cursor at the end of the text
                 String(edit_textarea.val()).length,

public/scripts/RossAscends-mods.js+2 -3 Viewed

     const cssAutofit = CSS.supports('field-sizing', 'content');
     if (cssAutofit) {
 -        sendTextArea.style['fieldSizing'] = 'content';
 -        sendTextArea.style['height'] = 'auto';
+-
         let lastHeight = chatBlock.offsetHeight;
         const chatBlockResizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {

         saveUserInputDebounced();
         if (cssAutofit) {
 +            // Unset modifications made with a manual resize
 +            sendTextArea.style.height = 'auto';
             return;
+        }

public/style.css+2 -0 Viewed

     text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
     flex: 1;
     order: 3;
 +    field-sizing: content;
     --progColor: rgb(146, 190, 252);
     --progFlashColor: rgb(215, 136, 114);

     line-height: calc(var(--mainFontSize) + .25rem);
     max-height: 75vh;
     max-height: 75dvh;
 +    field-sizing: content;
+}
 #anchor_order {