Merge pull request #3210 from SillyTavern/sendtextarea-fieldsizing Use CSS resizing for send textarea

f794b7621fe21d57ef51c11da56265d03fbb528a

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

Signed

public/script.js+8 -12 Viewed

 let this_del_mes = -1;
-//message editing and chat scroll position persistence
+//message editing
 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');
+    if (!cssAutofit) {
         /**
          * 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 => {

                 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) {
-            this.scrollTop = scroll_holder;
-            is_use_scroll_holder = false;
-        }
-    }, { passive: true });
     $(document).on('click', '.mes', function () {
         //when a 'delete message' parent div is clicked

                 .closest('.mes_block')
                 .find('.mes_text')
                 .append(
-                    '<textarea id=\'curEditTextarea\' class=\'edit_textarea mdHotkeys\' style=\'max-width:auto;\'></textarea>',
+                    '<textarea id=\'curEditTextarea\' class=\'edit_textarea mdHotkeys\'></textarea>',
                 );
             $('#curEditTextarea').val(text);
             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+33 -1 Viewed

         saveSettingsDebounced();
     });
+    const cssAutofit = CSS.supports('field-sizing', 'content');
+    if (cssAutofit) {
+        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', () => {
+        saveUserInputDebounced();
+        if (cssAutofit) {
+            // Unset modifications made with a manual resize
+            sendTextArea.style.height = 'auto';
+            return;
+        }
         const hasContent = sendTextArea.value !== '';
         const fitsCurrentSize = sendTextArea.scrollHeight <= sendTextArea.offsetHeight;
         const isScrollbarShown = sendTextArea.clientWidth < sendTextArea.offsetWidth;

         const needsDebounce = hasContent && (fitsCurrentSize || (isScrollbarShown && isHalfScreenHeight));
         if (needsDebounce) autoFitSendTextAreaDebounced();
         else autoFitSendTextArea();
-        saveUserInputDebounced();
     });
     restoreUserInput();

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 {