rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-22 06:57:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2711 from SillyTavern/contentEditablew-AF-Panel

Browse Source 
Content editable Advanced Formatting panel
This commit is contained in:
Cohee 2024-09-01 22:52:13 +03:00 committed by GitHub
commit 9483052b10
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 1571 additions and 1631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/mobile-styles.css
View File

@ -344,7 +344,6 @@
@media screen and (min-width: 1001px) { @media screen and (min-width: 1001px) {
#PygOverrides,
#ContextFormatting, #ContextFormatting,
#UI-Theme-Block, #UI-Theme-Block,
#UI-Customization, #UI-Customization,

7
public/css/st-tailwind.css
View File

@ -360,6 +360,10 @@
margin-right: 2px; margin-right: 2px;
} }
.flexAuto {
flex: auto;
}
.flex0 { .flex0 {
flex: 0; flex: 0;
} }
@ -490,7 +494,8 @@
} }
input:disabled, input:disabled,
textarea:disabled { textarea:disabled,
.disabled {
cursor: not-allowed; cursor: not-allowed;
filter: brightness(0.5); filter: brightness(0.5);
} }

3071
public/index.html
View File

File diff suppressed because it is too large Load Diff

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

@ -296,7 +296,7 @@ export async function favsToHotswap() {
//helpful instruction message if no characters are favorited //helpful instruction message if no characters are favorited
if (favs.length == 0) { if (favs.length == 0) {
container.html(`<small><span><i class="fa-solid fa-star"></i>${DOMPurify.sanitize(container.attr('no_favs'))}</span></small>`); container.html(`<small><span><i class="fa-solid fa-star"></i>&nbsp;${DOMPurify.sanitize(container.attr('no_favs'))}</span></small>`);
return; return;
} }

47
public/scripts/instruct-mode.js
View File

@ -7,7 +7,7 @@ import {
power_user, power_user,
context_presets, context_presets,
} from './power-user.js'; } from './power-user.js';
import { regexFromString, resetScrollHeight } from './utils.js'; import { regexFromString } from './utils.js';
/** /**
* @type {any[]} Instruct mode presets. * @type {any[]} Instruct mode presets.
@ -78,28 +78,29 @@ function migrateInstructModeSettings(settings) {
* Loads instruct mode settings from the given data object. * Loads instruct mode settings from the given data object.
* @param {object} data Settings data object. * @param {object} data Settings data object.
*/ */
export function loadInstructMode(data) { export async function loadInstructMode(data) {
if (data.instruct !== undefined) { if (data.instruct !== undefined) {
instruct_presets = data.instruct; instruct_presets = data.instruct;
} }
migrateInstructModeSettings(power_user.instruct); migrateInstructModeSettings(power_user.instruct);
$('#instruct_enabled').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.enabled);
$('#instructSettingsBlock, #InstructSequencesColumn').toggleClass('disabled', !power_user.instruct.enabled);
$('#instruct_bind_to_context').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.bind_to_context);
controls.forEach(control => { controls.forEach(control => {
const $element = $(`#${control.id}`); const $element = $(`#${control.id}`);
if (control.isCheckbox) { if (control.isCheckbox) {
$element.prop('checked', power_user.instruct[control.property]); $element.prop('checked', power_user.instruct[control.property]);
} else { } else {
$element.val(power_user.instruct[control.property]); $element[0].innerText = (power_user.instruct[control.property]);
} }
$element.on('input', async function () { $element.on('input', async function () {
power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this).val(); power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this)[0].innerText;
saveSettingsDebounced(); saveSettingsDebounced();
if (!control.isCheckbox) {
await resetScrollHeight($element);
}
}); });
if (control.trigger) { if (control.trigger) {
@ -107,6 +108,9 @@ export function loadInstructMode(data) {
} }
}); });
$('#instruct_system_sequence').css('height', 'auto');
$('#instruct_system_suffix').css('height', 'auto');
instruct_presets.forEach((preset) => { instruct_presets.forEach((preset) => {
const name = preset.name; const name = preset.name;
const option = document.createElement('option'); const option = document.createElement('option');
@ -604,11 +608,29 @@ jQuery(() => {
$('#instruct_system_same_as_user').on('input', function () { $('#instruct_system_same_as_user').on('input', function () {
const state = !!$(this).prop('checked'); const state = !!$(this).prop('checked');
$('#instruct_system_sequence').prop('disabled', state); if (state) {
$('#instruct_system_suffix').prop('disabled', state); $('#instruct_system_sequence_block').addClass('disabled');
$('#instruct_system_suffix_block').addClass('disabled');
$('#instruct_system_sequence').css('height', 'auto');
$('#instruct_system_suffix').css('height', 'auto');
$('#instruct_system_sequence').prop('contenteditable', false);
$('#instruct_system_suffix').prop('contenteditable', false);
} else {
$('#instruct_system_sequence_block').removeClass('disabled');
$('#instruct_system_suffix_block').removeClass('disabled');
$('#instruct_system_sequence').css('height', '');
$('#instruct_system_suffix').css('height', '');
$('#instruct_system_sequence').prop('contenteditable', true);
$('#instruct_system_suffix').prop('contenteditable', true);
}
}); });
$('#instruct_enabled').on('change', function () { $('#instruct_enabled').on('change', function () {
//color toggle for the main switch
$('#instruct_enabled').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.enabled);
$('#instructSettingsBlock, #InstructSequencesColumn').toggleClass('disabled', !power_user.instruct.enabled);
if (!power_user.instruct.bind_to_context) { if (!power_user.instruct.bind_to_context) {
return; return;
} }
@ -622,6 +644,10 @@ jQuery(() => {
} }
}); });
$('#instruct_bind_to_context').on('change', function () {
$('#instruct_bind_to_context').parent().find('i').toggleClass('toggleEnabled', !!power_user.instruct.bind_to_context);
});
$('#instruct_presets').on('change', function () { $('#instruct_presets').on('change', function () {
const name = String($(this).find(':selected').val()); const name = String($(this).find(':selected').val());
const preset = instruct_presets.find(x => x.name === name); const preset = instruct_presets.find(x => x.name === name);
@ -641,7 +667,8 @@ jQuery(() => {
if (control.isCheckbox) { if (control.isCheckbox) {
$element.prop('checked', power_user.instruct[control.property]).trigger('input'); $element.prop('checked', power_user.instruct[control.property]).trigger('input');
} else { } else {
$element.val(power_user.instruct[control.property]).trigger('input'); $element[0].innerText = (power_user.instruct[control.property]);
$element.trigger('input');
} }
} }
}); });

27
public/scripts/power-user.js
View File

@ -1481,7 +1481,7 @@ async function loadPowerUserSettings(settings, data) {
$('#auto_swipe_minimum_length').val(power_user.auto_swipe_minimum_length); $('#auto_swipe_minimum_length').val(power_user.auto_swipe_minimum_length);
$('#auto_swipe_blacklist').val(power_user.auto_swipe_blacklist.join(', ')); $('#auto_swipe_blacklist').val(power_user.auto_swipe_blacklist.join(', '));
$('#auto_swipe_blacklist_threshold').val(power_user.auto_swipe_blacklist_threshold); $('#auto_swipe_blacklist_threshold').val(power_user.auto_swipe_blacklist_threshold);
$('#custom_stopping_strings').val(power_user.custom_stopping_strings); $('#custom_stopping_strings').text(power_user.custom_stopping_strings);
$('#custom_stopping_strings_macro').prop('checked', power_user.custom_stopping_strings_macro); $('#custom_stopping_strings_macro').prop('checked', power_user.custom_stopping_strings_macro);
$('#fuzzy_search_checkbox').prop('checked', power_user.fuzzy_search); $('#fuzzy_search_checkbox').prop('checked', power_user.fuzzy_search);
$('#persona_show_notifications').prop('checked', power_user.persona_show_notifications); $('#persona_show_notifications').prop('checked', power_user.persona_show_notifications);
@ -1511,7 +1511,7 @@ async function loadPowerUserSettings(settings, data) {
$('#waifuMode').prop('checked', power_user.waifuMode); $('#waifuMode').prop('checked', power_user.waifuMode);
$('#movingUImode').prop('checked', power_user.movingUI); $('#movingUImode').prop('checked', power_user.movingUI);
$('#noShadowsmode').prop('checked', power_user.noShadows); $('#noShadowsmode').prop('checked', power_user.noShadows);
$('#start_reply_with').val(power_user.user_prompt_bias); $('#start_reply_with').text(power_user.user_prompt_bias);
$('#chat-show-reply-prefix-checkbox').prop('checked', power_user.show_user_prompt_bias); $('#chat-show-reply-prefix-checkbox').prop('checked', power_user.show_user_prompt_bias);
$('#auto_continue_enabled').prop('checked', power_user.auto_continue.enabled); $('#auto_continue_enabled').prop('checked', power_user.auto_continue.enabled);
$('#auto_continue_allow_chat_completions').prop('checked', power_user.auto_continue.allow_chat_completions); $('#auto_continue_allow_chat_completions').prop('checked', power_user.auto_continue.allow_chat_completions);
@ -1613,7 +1613,7 @@ async function loadPowerUserSettings(settings, data) {
switchReducedMotion(); switchReducedMotion();
switchCompactInputArea(); switchCompactInputArea();
reloadMarkdownProcessor(power_user.render_formulas); reloadMarkdownProcessor(power_user.render_formulas);
loadInstructMode(data); await loadInstructMode(data);
await loadContextSettings(); await loadContextSettings();
loadMaxContextUnlocked(); loadMaxContextUnlocked();
switchWaifuMode(); switchWaifuMode();
@ -1761,13 +1761,14 @@ async function loadContextSettings() {
if (control.isCheckbox) { if (control.isCheckbox) {
$element.prop('checked', power_user.context[control.property]); $element.prop('checked', power_user.context[control.property]);
} else { } else {
$element.val(power_user.context[control.property]); $element[0].innerText = power_user.context[control.property];
} }
console.log(`Setting ${$element.prop('id')} to ${power_user.context[control.property]}`);
// If the setting already exists, no need to duplicate it // If the setting already exists, no need to duplicate it
// TODO: Maybe check the power_user object for the setting instead of a flag? // TODO: Maybe check the power_user object for the setting instead of a flag?
$element.on('input', async function () { $element.on('input keyup', async function () {
const value = control.isCheckbox ? !!$(this).prop('checked') : $(this).val(); const value = control.isCheckbox ? !!$(this).prop('checked') : $(this)[0].innerText;
if (control.isGlobalSetting) { if (control.isGlobalSetting) {
power_user[control.property] = value; power_user[control.property] = value;
} else { } else {
@ -1775,9 +1776,6 @@ async function loadContextSettings() {
} }
saveSettingsDebounced(); saveSettingsDebounced();
if (!control.isCheckbox) {
await resetScrollHeight($element);
}
}); });
}); });
@ -1791,7 +1789,7 @@ async function loadContextSettings() {
}); });
$('#context_presets').on('change', function () { $('#context_presets').on('change', function () {
const name = String($(this).find(':selected').val()); const name = String($(this).find(':selected').text());
const preset = context_presets.find(x => x.name === name); const preset = context_presets.find(x => x.name === name);
if (!preset) { if (!preset) {
@ -1816,9 +1814,8 @@ async function loadContextSettings() {
.prop('checked', control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property]) .prop('checked', control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property])
.trigger('input'); .trigger('input');
} else { } else {
$element $element[0].innerText = (control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property])
.val(control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property]) $element.trigger('input');
.trigger('input');
} }
} }
}); });
@ -3120,7 +3117,7 @@ $(document).ready(() => {
}); });
$('#start_reply_with').on('input', function () { $('#start_reply_with').on('input', function () {
power_user.user_prompt_bias = String($(this).val()); power_user.user_prompt_bias = String($(this)[0].innerText);
saveSettingsDebounced(); saveSettingsDebounced();
}); });
@ -3652,7 +3649,7 @@ $(document).ready(() => {
}); });
$('#custom_stopping_strings').on('input', function () { $('#custom_stopping_strings').on('input', function () {
power_user.custom_stopping_strings = String($(this).val()); power_user.custom_stopping_strings = String($(this)[0].innerText).trim();
saveSettingsDebounced(); saveSettingsDebounced();
}); });

47
public/style.css
View File

@ -1602,6 +1602,7 @@ body[data-stscript-style] .hljs.language-stscript {
.hljs-pipe { .hljs-pipe {
color: var(--ac-style-color-punctuation); color: var(--ac-style-color-punctuation);
} }
.hljs-pipebreak { .hljs-pipebreak {
color: var(--ac-style-color-type); color: var(--ac-style-color-type);
} }
@ -1695,6 +1696,7 @@ body[data-stscript-style] .hljs.language-stscript {
background-color: var(--ac-color-selectedBackground); background-color: var(--ac-color-selectedBackground);
color: var(--ac-color-selectedText); color: var(--ac-color-selectedText);
} }
&.selected.not-selectable>* { &.selected.not-selectable>* {
background-color: var(--ac-color-notSelectableBackground); background-color: var(--ac-color-notSelectableBackground);
color: var(--ac-color-notSelectableText); color: var(--ac-color-notSelectableText);
@ -1776,11 +1778,13 @@ body[data-stscript-style] .hljs.language-stscript {
padding: 0.25em 0.25em 0.5em 0.25em; padding: 0.25em 0.25em 0.5em 0.25em;
border-bottom: 1px solid var(--ac-color-border); border-bottom: 1px solid var(--ac-color-border);
> .head { >.head {
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
} }
> .head > .name, > .name {
>.head>.name,
>.name {
flex: 1 1 auto; flex: 1 1 auto;
font-weight: bold; font-weight: bold;
color: var(--ac-color-text); color: var(--ac-color-text);
@ -1790,20 +1794,25 @@ body[data-stscript-style] .hljs.language-stscript {
text-decoration: 1px dotted underline; text-decoration: 1px dotted underline;
} }
} }
> .head > .source {
>.head>.source {
padding: 0 0.5em; padding: 0 0.5em;
cursor: help; cursor: help;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
&.isThirdParty.isExtension { &.isThirdParty.isExtension {
color: #F89406; color: #F89406;
} }
&.isCore { &.isCore {
color: transparent; color: transparent;
&.isExtension { &.isExtension {
color: #51A351; color: #51A351;
} }
&:after { &:after {
content: ''; content: '';
order: -1; order: -1;
@ -2605,7 +2614,8 @@ select option:not(:checked) {
color: var(--golden) !important; color: var(--golden) !important;
} }
.world_set { .world_set,
.toggleEnabled {
color: var(--active) !important; color: var(--active) !important;
} }
@ -5398,6 +5408,7 @@ body:not(.movingUI) .drawer-content.maximized {
.popup:has(.faPicker) { .popup:has(.faPicker) {
/* Fix height for fa picker popup, otherwise search is making it resize weirdly */ /* Fix height for fa picker popup, otherwise search is making it resize weirdly */
height: 70%; height: 70%;
.popup-content { .popup-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -5407,7 +5418,8 @@ body:not(.movingUI) .drawer-content.maximized {
.faPicker-container { .faPicker-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;; overflow: hidden;
;
} }
.faQuery-container { .faQuery-container {
@ -5417,22 +5429,23 @@ body:not(.movingUI) .drawer-content.maximized {
.faPicker { .faPicker {
flex: 1 1 auto; flex: 1 1 auto;
overflow: auto; overflow: auto;
gap: 1em; gap: 1em;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(3.5em, 1fr)); grid-template-columns: repeat(auto-fill, minmax(3.5em, 1fr));
.menu_button { .menu_button {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
font-size: 2em; font-size: 2em;
height: 1lh; height: 1lh;
line-height: 1.2; line-height: 1.2;
padding: 0.25em; padding: 0.25em;
width: unset; width: unset;
box-sizing: content-box; box-sizing: content-box;
&.hidden { &.hidden {
display: none; display: none;
} }
} }
} }
.faPicker:not(:has(:not(.hidden)))::after { .faPicker:not(:has(:not(.hidden)))::after {
@ -5440,3 +5453,7 @@ body:not(.movingUI) .drawer-content.maximized {
color: var(--SmartThemeBodyColor); color: var(--SmartThemeBodyColor);
opacity: 0.7; opacity: 0.7;
} }
#advanced-formatting-button div[contenteditable] {
overflow-wrap: anywhere;
}