Use CSS resizing for send textarea

d27d750cb2888c6c8a7980f00cb08e4c55901041

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

Parents: 94de9411b69b02221e6bdec46d4b6af1a1b0b6d4

public/scripts/RossAscends-mods.js+37 -7 Viewed

         saveSettingsDebounced();
     });
 +    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) {
 +                if (entry.target !== chatBlock) {
 +                    continue;
 +                }
++
 +                const threshold = 1;
 +                const newHeight = chatBlock.offsetHeight;
 +                const deltaHeight = newHeight - lastHeight;
 +                const isScrollAtBottom = Math.abs(chatBlock.scrollHeight - chatBlock.scrollTop - newHeight) <= threshold;
++
 +                if (!isScrollAtBottom && Math.abs(deltaHeight) > threshold) {
 +                    chatBlock.scrollTop -= deltaHeight;
 +                }
 +                lastHeight = newHeight;
 +            }
 +        });
++
 +        chatBlockResizeObserver.observe(chatBlock);
 +    }
++
     sendTextArea.addEventListener('input', () => {
 -        const hasContent = sendTextArea.value !== '';
 +        if (!cssAutofit) {
                     const fitsCurrentSizehasContent = sendTextArea.scrollHeightvalue <!== sendTextArea.offsetHeight'';
                     const isScrollbarShownfitsCurrentSize = sendTextArea.clientWidthscrollHeight <= sendTextArea.offsetWidthoffsetHeight;
                     const isHalfScreenHeightisScrollbarShown = sendTextArea.offsetHeightclientWidth >=< windowsendTextArea.innerHeight / 2offsetWidth;
 -        const needsDebounce = hasContent && (fitsCurrentSize || (isScrollbarShown && isHalfScreenHeight));
 +            const isHalfScreenHeight = sendTextArea.offsetHeight >= window.innerHeight / 2;
 -        if (needsDebounce) autoFitSendTextAreaDebounced();
 +            const needsDebounce = hasContent && (fitsCurrentSize || (isScrollbarShown && isHalfScreenHeight));
 -        else autoFitSendTextArea();
 +            if (needsDebounce) autoFitSendTextAreaDebounced();
 +            else autoFitSendTextArea();
 +        }
         saveUserInputDebounced();
     });