Merge pull request #2768 from SillyTavern/expand-contenteditable

7cba747c528b89dea7fcd562b97b24d85eee0b2e

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

Signed

public/index.html+4 -2 Viewed

                                 <select id="context_presets" data-preset-manager-for="context" class="flex1 text_pole"></select>
                             </div>
                             <div>
                                 <label for="context_story_string" class="flex-container">
                                     <small data-i18n="Story String">Story String</small>
 +                                    <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>
                                 </label>
                                 <div contenteditable="true" id="context_story_string" class="text_pole textarea_compact"></div>
                                 <div class="flex-container">

                                 <input type="text" id="instruct_activation_regex" class="text_pole textarea_compact" placeholder="e.g. /llama(-)?[3|3.1]/i"></input>
                             </div>
                             <div>
 -                                <label>
 +                                <label for="instruct_system_prompt" class="flex-container">
                                     <small data-i18n="System Prompt">System Prompt</small>
 +                                    <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>
                                 </label>
                                 <div contenteditable="true" id="instruct_system_prompt" class="text_pole textarea_compact"></div>
                             </div>

public/scripts/chats.js+8 -2 Viewed

     $(document).on('click', '.editor_maximize', function () {
         const broId = $(this).attr('data-for');
         const bro = $(`#${broId}`);
 +        const contentEditable = bro.is('[contenteditable]');
         const withTab = $(this).attr('data-tab');
         if (!bro.length) {

         wrapper.classList.add('height100p', 'wide100p', 'flex-container');
         wrapper.classList.add('flexFlowColumn', 'justifyCenter', 'alignitemscenter');
         const textarea = document.createElement('textarea');
         textarea.value = String(contentEditable ? bro[0].innerText : bro.val());
         textarea.classList.add('height100p', 'wide100p', 'maximized_textarea');
         bro.hasClass('monospace') && textarea.classList.add('monospace');
         textarea.addEventListener('input', function () {
 -            bro.val(textarea.value).trigger('input');
 +            if (contentEditable) {
 +                bro[0].innerText = textarea.value;
 +                bro.trigger('input');
 +            } else {
 +                bro.val(textarea.value).trigger('input');
 +            }
         });
         wrapper.appendChild(textarea);