rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implement autofit for edit textarea

Browse Source
This commit is contained in:
Cohee
2024-12-21 16:47:25 +02:00
parent f649e4698b
commit 2fbe689605
3 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
public/script.js
View File

@@ -849,11 +849,9 @@ export let is_send_press = false; //Send generation
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;
@@ -9727,25 +9725,7 @@ jQuery(async function () {
chooseBogusFolder($(this), tagId);
});
/**
* 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 cssAutofit = CSS.supports('field-sizing', 'content');
const chatElementScroll = document.getElementById('chat');
const chatScrollHandler = function () {
if (power_user.waifuMode) {
@@ -9767,12 +9747,26 @@ jQuery(async function () {
};
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;
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) {
e.style.height = '0px';
const newHeight = e.scrollHeight + 4;
e.style.height = `${newHeight}px`;
}
}, { passive: 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);
}
});
}
$(document).on('click', '.mes', function () {
//when a 'delete message' parent div is clicked
@@ -10517,8 +10511,10 @@ jQuery(async function () {
let edit_textarea = $(this)
.closest('.mes_block')
.find('.edit_textarea');
edit_textarea.height(0);
edit_textarea.height(edit_textarea[0].scrollHeight);
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,

5
public/scripts/RossAscends-mods.js
View File

@@ -890,9 +890,6 @@ export function initRossMods() {
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) {
@@ -919,6 +916,8 @@ export function initRossMods() {
saveUserInputDebounced();
if (cssAutofit) {
// Unset modifications made with a manual resize
sendTextArea.style.height = 'auto';
return;
}

2
public/style.css
View File

@@ -1264,6 +1264,7 @@ button {
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);
@@ -4111,6 +4112,7 @@ input[type="range"]::-webkit-slider-thumb {
line-height: calc(var(--mainFontSize) + .25rem);
max-height: 75vh;
max-height: 75dvh;
field-sizing: content;
}
#anchor_order {