Merge pull request #2786 from SillyTavern/textarea-revert-nyxFix initial reversion commit

758c90be0036a5fd3398f2fe448e8cff8fc6035f

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

Signed
Parents: b5b01a1a5c3c0c7e4b339488636302fdbba71f9c 185079595d9c43f2c5144d87453fecde4862cd08
9 files changed, +79 -70Ignore whitespace
public/css/st-tailwind.css+5 -2
@@ -494,12 +494,15 @@
494494}
495495
496496input:disabled,
497497textarea:disabled, {
498-#AdvancedFormatting .disabled {
499498 cursor: not-allowed;
500499 filter: brightness(0.5);
501500}
502501
502+#AdvancedFormatting .disabled {
503+ filter: brightness(0.5);
504+}
505+
503506.debug-red {
504507 border: 1px solid red !important;
505508}
public/index.html+21 -21
@@ -3089,14 +3089,14 @@
30893089 <small data-i18n="Story String">Story String</small>
30903090 <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="context_story_string" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
30913091 </label>
30923092 <div contenteditable="true"textarea id="context_story_string" class="text_pole textarea_compact autoSetHeight"></divtextarea>
30933093 <div class="flex-container">
30943094 <div class="flex1">
30953095 <label for="context_example_separator">
30963096 <small data-i18n="Example Separator">Example Separator</small>
30973097 </label>
30983098 <div>
30993099 <div contenteditable="true"textarea id="context_example_separator" class="text_pole textarea_compact autoSetHeight"></divtextarea>
31003100 </div>
31013101 </div>
31023102 <div class="flex1">
@@ -3104,7 +3104,7 @@
31043104 <small data-i18n="Chat Start">Chat Start</small>
31053105 </label>
31063106 <div>
31073107 <div contenteditable="true"textarea id="context_chat_start" class="text_pole textarea_compact autoSetHeight"></divtextarea>
31083108 </div>
31093109 </div>
31103110 </div>
@@ -3182,7 +3182,7 @@
31823182 </small>
31833183 </div>
31843184 <div>
31853185 <div contenteditable="true"textarea id="custom_stopping_strings" class="text_pole textarea_compact monospace autoSetHeight"></divtextarea>
31863186 </div>
31873187 <label class="checkbox_label" for="custom_stopping_strings_macro">
31883188 <input id="custom_stopping_strings_macro" type="checkbox" checked>
@@ -3241,7 +3241,7 @@
32413241 <small data-i18n="System Prompt">System Prompt</small>
32423242 <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="instruct_system_prompt" title="Expand the editor" data-i18n="[title]Expand the editor"></i>
32433243 </label>
32443244 <div contenteditable="true"textarea id="instruct_system_prompt" class="text_pole textarea_compact autoSetHeight"></divtextarea>
32453245 </div>
32463246
32473247 <div>
@@ -3323,7 +3323,7 @@
33233323 </span>
33243324 </small>
33253325 <div>
33263326 <div contenteditable="true"textarea id="start_reply_with" class="text_pole textarea_compact autoSetHeight"></divtextarea>
33273327 </div>
33283328 <label class="checkbox_label" for="chat-show-reply-prefix-checkbox">
33293329 <input id="chat-show-reply-prefix-checkbox" type="checkbox" />
@@ -3353,7 +3353,7 @@
33533353 <small data-i18n="System Prompt Prefix">System Prompt Prefix</small>
33543354 </label>
33553355 <div>
33563356 <div contenteditable="true"textarea id="instruct_system_sequence_prefix" class="text_pole textarea_compact autoSetHeight"></divtextarea>
33573357 </div>
33583358 </div>
33593359 <div class="flexAuto" title="Inserted after a System prompt." data-i18n="[title]Inserted after a System prompt.">
@@ -3361,38 +3361,38 @@
33613361 <small data-i18n="System Prompt Suffix">System Prompt Suffix</small>
33623362 </label>
33633363 <div>
33643364 <div contenteditable="true"textarea id="instruct_system_sequence_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></divtextarea>
33653365 </div>
33663366 </div>
33673367 </div>
33683368 <div class="flex-container">
33693369 <div class="flexAuto" title="Inserted before a User message and as a last prompt line when impersonating." data-i18n="[title]Inserted before a User message and as a last prompt line when impersonating.">
33703370 <small data-i18n="User Prefix">User Message Prefix</small>
33713371 <div contenteditable="true"textarea id="instruct_input_sequence" class="text_pole textarea_compact autoSetHeight"></divtextarea>
33723372 </div>
33733373 <div class="flexAuto" title="Inserted after a User message." data-i18n="[title]Inserted after a User message.">
33743374 <small data-i18n="User Suffix">User Message Suffix</small>
33753375 <div contenteditable="true"textarea id="instruct_input_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></divtextarea>
33763376 </div>
33773377 </div>
33783378 <div class="flex-container">
33793379 <div class="flexAuto" title="Inserted before an Assistant message and as a last prompt line when generating an AI reply." data-i18n="[title]Inserted before an Assistant message and as a last prompt line when generating an AI reply.">
33803380 <small data-i18n="Assistant Prefix">Assistant Message Prefix</small>
33813381 <div contenteditable="true"textarea id="instruct_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></divtextarea>
33823382 </div>
33833383 <div class="flexAuto" title="Inserted after an Assistant message." data-i18n="[title]Inserted after an Assistant message.">
33843384 <small data-i18n="Assistant Suffix">Assistant Message Suffix</small>
33853385 <div contenteditable="true"textarea id="instruct_output_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></divtextarea>
33863386 </div>
33873387 </div>
33883388 <div class="flex-container">
33893389 <div class="flexAuto" id="instruct_system_sequence_block" title="Inserted before a System (added by slash commands or extensions) message." data-i18n="[title]Inserted before a System (added by slash commands or extensions) message.">
33903390 <small data-i18n="System Prefix">System Message Prefix</small>
33913391 <div contenteditable="true"textarea id="instruct_system_sequence" class="text_pole textarea_compact autoSetHeight"></divtextarea>
33923392 </div>
33933393 <div class="flexAuto" id="instruct_system_suffix_block" title="Inserted after a System message." data-i18n="[title]Inserted after a System message.">
33943394 <small data-i18n="System Suffix">System Message Suffix</small>
33953395 <div contenteditable="true"textarea id="instruct_system_suffix" class="text_pole wide100p textarea_compact autoSetHeight"></divtextarea>
33963396 </div>
33973397 </div>
33983398 <div class="flexBasis100p" title="If enabled, System Sequences will be the same as User Sequences." data-i18n="[title]If enabled, System Sequences will be the same as User Sequences.">
@@ -3408,37 +3408,37 @@
34083408 <div class="flex-container">
34093409 <div class="flexAuto" title="Inserted before the first Assistant's message." data-i18n="[title]Inserted before the first Assistant's message.">
34103410 <small data-i18n="First Assistant Prefix">First Assistant Prefix</small>
34113411 <div contenteditable="true"textarea id="instruct_first_output_sequence" class="text_pole textarea_compact autoSetHeight"></divtextarea>
34123412 </div>
34133413 <div class="flexAuto" title="Inserted before the last Assistant's message or as a last prompt line when generating an AI reply (except a neutral/system role)." data-i18n="[title]instruct_last_output_sequence">
34143414 <small data-i18n="Last Assistant Prefix">Last Assistant Prefix</small>
34153415 <div contenteditable="true"textarea id="instruct_last_output_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></divtextarea>
34163416 </div>
34173417 </div>
34183418 <div class="flex-container">
34193419 <div class="flexAuto" title="Inserted before the first User's message." data-i18n="[title]Inserted before the first User's message.">
34203420 <small data-i18n="First User Prefix">First User Prefix</small>
34213421 <div contenteditable="true"textarea id="instruct_first_input_sequence" class="text_pole textarea_compact autoSetHeight"></divtextarea>
34223422 </div>
34233423 <div class="flexAuto" title="Inserted before the last User's message." data-i18n="[title]instruct_last_input_sequence">
34243424 <small data-i18n="Last User Prefix">Last User Prefix</small>
34253425 <div contenteditable="true"textarea id="instruct_last_input_sequence" class="text_pole wide100p textarea_compact autoSetHeight"></divtextarea>
34263426 </div>
34273427 </div>
34283428 <div class="flex-container">
34293429 <div class="flexAuto" title="Will be inserted as a last prompt line when using system/neutral generation." data-i18n="[title]Will be inserted as a last prompt line when using system/neutral generation.">
34303430 <small data-i18n="System Instruction Prefix">System Instruction Prefix</small>
34313431 <div contenteditable="true"textarea id="instruct_last_system_sequence" class="text_pole textarea_compact autoSetHeight"></divtextarea>
34323432 </div>
34333433 <div class="flexAuto" title="If a stop sequence is generated, everything past it will be removed from the output (inclusive)." data-i18n="[title]If a stop sequence is generated, everything past it will be removed from the output (inclusive).">
34343434 <small data-i18n="Stop Sequence">Stop Sequence</small>
34353435 <div contenteditable="true"textarea id="instruct_stop_sequence" class="text_pole textarea_compact autoSetHeight"></divtextarea>
34363436 </div>
34373437 </div>
34383438 <div class="flex-container">
34393439 <div class="flexAuto" title="Will be inserted at the start of the chat history if it doesn't start with a User message." data-i18n="[title]Will be inserted at the start of the chat history if it doesn't start with a User message.">
34403440 <small data-i18n="User Filler Message">User Filler Message</small>
34413441 <div contenteditable="true"textarea id="instruct_user_alignment_message" class="text_pole textarea_compact autoSetHeight"></divtextarea>
34423442 </div>
34433443 </div>
34443444 </div>
public/script.js+12 -8
@@ -10616,10 +10616,12 @@ jQuery(async function () {
1061610616 }
1061710617
1061810618 // Set the height of "autoSetHeight" textareas within the drawer to their scroll height
10619- $(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight').each(async function () {
10619+ if (!CSS.supports('field-sizing', 'content')) {
10620- await resetScrollHeight($(this));
10620+ $(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight').each(async function () {
10621- return;
10621+ await resetScrollHeight($(this));
10622- });
10622+ return;
10623+ });
10624+ }
1062310625
1062410626 } else if (drawerWasOpenAlready) { //to close manually
1062510627 icon.toggleClass('closedIcon openIcon');
@@ -10691,10 +10693,12 @@ jQuery(async function () {
1069110693 $(this).closest('.inline-drawer').find('.inline-drawer-content').stop().slideToggle();
1069210694
1069310695 // Set the height of "autoSetHeight" textareas within the inline-drawer to their scroll height
10694- $(this).closest('.inline-drawer').find('.inline-drawer-content textarea.autoSetHeight').each(async function () {
10696+ if (!CSS.supports('field-sizing', 'content')) {
10695- await resetScrollHeight($(this));
10697+ $(this).closest('.inline-drawer').find('.inline-drawer-content textarea.autoSetHeight').each(async function () {
10696- return;
10698+ await resetScrollHeight($(this));
10697- });
10699+ return;
10700+ });
10701+ }
1069810702 });
1069910703
1070010704 $(document).on('click', '.inline-drawer-maximize', function () {
public/scripts/group-chats.js+10 -6
@@ -1491,9 +1491,11 @@ function select_group_chats(groupId, skipAnimation) {
14911491 }
14921492
14931493 // Toggle textbox sizes, as input events have not fired here
1494- $('#rm_group_chats_block .autoSetHeight').each(element => {
1494+ if (!CSS.supports('field-sizing', 'content')) {
1495- resetScrollHeight(element);
1495+ $('#rm_group_chats_block .autoSetHeight').each(element => {
1496- });
1496+ resetScrollHeight(element);
1497+ });
1498+ }
14971499
14981500 eventSource.emit('groupSelected', { detail: { id: openGroupId, group: group } });
14991501}
@@ -1964,9 +1966,11 @@ function doCurMemberListPopout() {
19641966}
19651967
19661968jQuery(() => {
19671969 $if (document)!CSS.onsupports('inputfield-sizing', '#rm_group_chats_block .autoSetHeightcontent', function ()) {
1968- resetScrollHeight($(this));
1970+ $(document).on('input', '#rm_group_chats_block .autoSetHeight', function () {
1969- });
1971+ resetScrollHeight($(this));
1972+ });
1973+ }
19701974
19711975 $(document).on('click', '.group_select', function () {
19721976 const groupId = $(this).attr('chid') || $(this).attr('grid') || $(this).data('id');
public/scripts/instruct-mode.js+11 -11
@@ -7,7 +7,7 @@ import {
77 power_user,
88 context_presets,
99} from './power-user.js';
1010import { regexFromString, resetScrollHeight } from './utils.js';
1111
1212/**
1313 * @type {any[]} Instruct mode presets.
@@ -95,11 +95,14 @@ export async function loadInstructMode(data) {
9595 if (control.isCheckbox) {
9696 $element.prop('checked', power_user.instruct[control.property]);
9797 } else {
9898 $element[0].innerText = val(power_user.instruct[control.property]);
9999 }
100100
101101 $element.on('input', async function () {
102102 power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this)[0].innerTextval();
103+ if (!CSS.supports('field-sizing', 'content')) {
104+ await resetScrollHeight($(this));
105+ }
103106 saveSettingsDebounced();
104107 });
105108
@@ -108,9 +111,6 @@ export async function loadInstructMode(data) {
108111 }
109112 });
110113
111- $('#instruct_system_sequence').css('height', 'auto');
112- $('#instruct_system_suffix').css('height', 'auto');
113-
114114 instruct_presets.forEach((preset) => {
115115 const name = preset.name;
116116 const option = document.createElement('option');
@@ -611,13 +611,13 @@ jQuery(() => {
611611 if (state) {
612612 $('#instruct_system_sequence_block').addClass('disabled');
613613 $('#instruct_system_suffix_block').addClass('disabled');
614614 $('#instruct_system_sequence').prop('contenteditablereadOnly', falsetrue);
615615 $('#instruct_system_suffix').prop('contenteditablereadOnly', falsetrue);
616616 } else {
617617 $('#instruct_system_sequence_block').removeClass('disabled');
618618 $('#instruct_system_suffix_block').removeClass('disabled');
619619 $('#instruct_system_sequence').prop('contenteditablereadOnly', truefalse);
620620 $('#instruct_system_suffix').prop('contenteditablereadOnly', truefalse);
621621 }
622622
623623 });
@@ -663,7 +663,7 @@ jQuery(() => {
663663 if (control.isCheckbox) {
664664 $element.prop('checked', power_user.instruct[control.property]).trigger('input');
665665 } else {
666666 $element[0].innerText = val(power_user.instruct[control.property]);
667667 $element.trigger('input');
668668 }
669669 }
public/scripts/openai.js+5 -3
@@ -5281,9 +5281,11 @@ $(document).ready(async function () {
52815281 saveSettingsDebounced();
52825282 });
52835283
52845284 $if (document)!CSS.onsupports('inputfield-sizing', '#openai_settings .autoSetHeightcontent', function ()) {
5285- resetScrollHeight($(this));
5285+ $(document).on('input', '#openai_settings .autoSetHeight', function () {
5286- });
5286+ resetScrollHeight($(this));
5287+ });
5288+ }
52875289
52885290 if (!isMobile()) {
52895291 $('#model_openrouter_select').select2({
public/scripts/power-user.js+10 -7
@@ -1740,20 +1740,23 @@ async function loadContextSettings() {
17401740 if (control.isCheckbox) {
17411741 $element.prop('checked', power_user.context[control.property]);
17421742 } else {
17431743 $element[0].innerText = val(power_user.context[control.property]);
17441744 }
17451745 console.log(`Setting ${$element.prop('id')} to ${power_user.context[control.property]}`);
17461746
17471747 // If the setting already exists, no need to duplicate it
17481748 // TODO: Maybe check the power_user object for the setting instead of a flag?
17491749 $element.on('input keyup', async function () {
17501750 const value = control.isCheckbox ? !!$(this).prop('checked') : $(this)[0].innerTextval();
17511751 if (control.isGlobalSetting) {
17521752 power_user[control.property] = value;
17531753 } else {
17541754 power_user.context[control.property] = value;
17551755 }
1756-
1756+ console.log(`Setting ${$element.prop('id')} to ${value}`);
1757+ if (!CSS.supports('field-sizing', 'content')) {
1758+ await resetScrollHeight($(this));
1759+ }
17571760 saveSettingsDebounced();
17581761 });
17591762 });
@@ -1793,7 +1796,7 @@ async function loadContextSettings() {
17931796 .prop('checked', control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property])
17941797 .trigger('input');
17951798 } else {
17961799 $element[0].innerText = val(control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property]);
17971800 $element.trigger('input');
17981801 }
17991802 }
@@ -3096,7 +3099,7 @@ $(document).ready(() => {
30963099 });
30973100
30983101 $('#start_reply_with').on('input', function () {
30993102 power_user.user_prompt_bias = String($(this)[0].innerTextval());
31003103 saveSettingsDebounced();
31013104 });
31023105
@@ -3628,7 +3631,7 @@ $(document).ready(() => {
36283631 });
36293632
36303633 $('#custom_stopping_strings').on('input', function () {
36313634 power_user.custom_stopping_strings = String($(this)[0].innerTextval()).trim();
36323635 saveSettingsDebounced();
36333636 });
36343637
public/scripts/utils.js+3 -1
@@ -2028,7 +2028,9 @@ export function toggleDrawer(drawer, expand = true) {
20282028 }
20292029
20302030 // Set the height of "autoSetHeight" textareas within the inline-drawer to their scroll height
2031- content.querySelectorAll('textarea.autoSetHeight').forEach(resetScrollHeight);
2031+ if (!CSS.supports('field-sizing', 'content')) {
2032+ content.querySelectorAll('textarea.autoSetHeight').forEach(resetScrollHeight);
2033+ }
20322034}
20332035
20342036export async function fetchFaFile(name) {
public/style.css+2 -11
@@ -1176,6 +1176,7 @@ textarea {
11761176textarea.autoSetHeight {
11771177 max-height: 50vh;
11781178 max-height: 50dvh;
1179+ field-sizing: content;
11791180}
11801181
11811182input,
@@ -5454,16 +5455,6 @@ body:not(.movingUI) .drawer-content.maximized {
54545455 opacity: 0.7;
54555456}
54565457
5457-#advanced-formatting-button div[contenteditable] {
5458+#AdvancedFormatting .autoSetHeight {
54585459 overflow-wrap: anywhere;
5459- max-height: 50vh;
5460- max-height: 50dvh;
5461- resize: vertical;
5462- overflow: auto;
5463- min-height: 1.8em;
5464- white-space: preserve-breaks;
54655460}
5466-
5467-div[contenteditable] br {
5468- display: revert;
5469-}
5469 \ No newline at end of file