rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-21 06:30:51 +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) {
#PygOverrides,
#ContextFormatting,
#UI-Theme-Block,
#UI-Customization,

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

@ -360,6 +360,10 @@
margin-right: 2px;
}
.flexAuto {
flex: auto;
}
.flex0 {
flex: 0;
}
@ -490,7 +494,8 @@
}
input:disabled,
textarea:disabled {
textarea:disabled,
.disabled {
cursor: not-allowed;
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
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;
}

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

@ -7,7 +7,7 @@ import {
power_user,
context_presets,
} from './power-user.js';
import { regexFromString, resetScrollHeight } from './utils.js';
import { regexFromString } from './utils.js';
/**
* @type {any[]} Instruct mode presets.
@ -78,28 +78,29 @@ function migrateInstructModeSettings(settings) {
* Loads instruct mode settings from the given data object.
* @param {object} data Settings data object.
*/
export function loadInstructMode(data) {
export async function loadInstructMode(data) {
if (data.instruct !== undefined) {
instruct_presets = data.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 => {
const $element = $(`#${control.id}`);
if (control.isCheckbox) {
$element.prop('checked', power_user.instruct[control.property]);
} else {
$element.val(power_user.instruct[control.property]);
$element[0].innerText = (power_user.instruct[control.property]);
}
$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();
if (!control.isCheckbox) {
await resetScrollHeight($element);
}
});
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) => {
const name = preset.name;
const option = document.createElement('option');
@ -604,11 +608,29 @@ jQuery(() => {
$('#instruct_system_same_as_user').on('input', function () {
const state = !!$(this).prop('checked');
$('#instruct_system_sequence').prop('disabled', state);
$('#instruct_system_suffix').prop('disabled', state);
if (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 () {
//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) {
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 () {
const name = String($(this).find(':selected').val());
const preset = instruct_presets.find(x => x.name === name);
@ -641,7 +667,8 @@ jQuery(() => {
if (control.isCheckbox) {
$element.prop('checked', power_user.instruct[control.property]).trigger('input');
} 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_blacklist').val(power_user.auto_swipe_blacklist.join(', '));
$('#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);
$('#fuzzy_search_checkbox').prop('checked', power_user.fuzzy_search);
$('#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);
$('#movingUImode').prop('checked', power_user.movingUI);
$('#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);
$('#auto_continue_enabled').prop('checked', power_user.auto_continue.enabled);
$('#auto_continue_allow_chat_completions').prop('checked', power_user.auto_continue.allow_chat_completions);
@ -1613,7 +1613,7 @@ async function loadPowerUserSettings(settings, data) {
switchReducedMotion();
switchCompactInputArea();
reloadMarkdownProcessor(power_user.render_formulas);
loadInstructMode(data);
await loadInstructMode(data);
await loadContextSettings();
loadMaxContextUnlocked();
switchWaifuMode();
@ -1761,13 +1761,14 @@ async function loadContextSettings() {
if (control.isCheckbox) {
$element.prop('checked', power_user.context[control.property]);
} 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
// TODO: Maybe check the power_user object for the setting instead of a flag?
$element.on('input', async function () {
const value = control.isCheckbox ? !!$(this).prop('checked') : $(this).val();
$element.on('input keyup', async function () {
const value = control.isCheckbox ? !!$(this).prop('checked') : $(this)[0].innerText;
if (control.isGlobalSetting) {
power_user[control.property] = value;
} else {
@ -1775,9 +1776,6 @@ async function loadContextSettings() {
}
saveSettingsDebounced();
if (!control.isCheckbox) {
await resetScrollHeight($element);
}
});
});
@ -1791,7 +1789,7 @@ async function loadContextSettings() {
});
$('#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);
if (!preset) {
@ -1816,9 +1814,8 @@ async function loadContextSettings() {
.prop('checked', control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property])
.trigger('input');
} else {
$element
.val(control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property])
.trigger('input');
$element[0].innerText = (control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property])
$element.trigger('input');
}
}
});
@ -3120,7 +3117,7 @@ $(document).ready(() => {
});
$('#start_reply_with').on('input', function () {
power_user.user_prompt_bias = String($(this).val());
power_user.user_prompt_bias = String($(this)[0].innerText);
saveSettingsDebounced();
});
@ -3652,7 +3649,7 @@ $(document).ready(() => {
});
$('#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();
});

47
public/style.css
View File

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