Update quick edit textareas when prompt manager re-renders

public/index.html

@@ -1350,22 +1350,9 @@
                                             <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                         </div>
                                         <div class="inline-drawer-content">
-                                            <div class="range-block m-t-1">
+                                            <div id="quick-edit-container">
-                                                <div class="justifyLeft" data-i18n="Main">Main</div>
+                                                <div class="range-block">
-                                                <div class="wide100p">
+                                                    <span data-i18n="Select a character to show quick edit options.">Select a character to show quick edit options.</span>
-                                                    <textarea id="main_prompt_quick_edit_textarea" class="text_pole textarea_compact" name="main_prompt" rows="6" placeholder=""></textarea>
-                                                </div>
-                                            </div>
-                                            <div class="range-block m-t-1">
-                                                <div class="justifyLeft" data-i18n="NSFW">NSFW</div>
-                                                <div class="wide100p">
-                                                    <textarea id="nsfw_prompt_quick_edit_textarea" class="text_pole textarea_compact" name="nsfw_prompt" rows="6" placeholder=""></textarea>
-                                                </div>
-                                            </div>
-                                            <div class="range-block m-t-1">
-                                                <div class="justifyLeft" data-i18n="Jailbreak">Jailbreak</div>
-                                                <div class="wide100p">
-                                                    <textarea id="jailbreak_prompt_quick_edit_textarea" class="text_pole textarea_compact" name="jailbreak_prompt" rows="6" placeholder=""></textarea>
                                                 </div>
                                             </div>
                                             <div class="range-block" data-source="claude">

public/scripts/PromptManager.js

@@ -1,8 +1,23 @@
-import {callPopup, event_types, eventSource, is_send_press, main_api, saveSettingsDebounced, substituteParams} from "../script.js";
+import {callPopup, event_types, eventSource, is_send_press, main_api, substituteParams} from "../script.js";
 import {TokenHandler} from "./openai.js";
 import {power_user} from "./power-user.js";
 import { debounce, waitUntilCondition } from "./utils.js";
 
+function debouncePromise(func, delay) {
+    let timeoutId;
+
+    return (...args) => {
+        clearTimeout(timeoutId);
+
+        return new Promise((resolve) => {
+            timeoutId = setTimeout(() => {
+                const result = func(...args);
+                resolve(result);
+            }, delay);
+        });
+    };
+}
+
 /**
  * Register migrations for the prompt manager when settings are loaded or an Open AI preset is loaded.
  */
@@ -158,11 +173,6 @@ function PromptManagerModule() {
             nsfw: '',
             jailbreak: '',
             enhanceDefinitions: ''
-        },
-        quickEdit: {
-            main: '',
-            nsfw: '',
-            jailbreak: ''
         }
     };
 
@@ -307,41 +317,6 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
         this.saveServiceSettings().then(() => this.render());
     };
 
-    // Factory function for creating quick edit elements
-    const createQuickEdit = function() {
-        return {
-            element: null,
-            prompt: null,
-
-            from(element, prompt) {
-                this.element = element;
-                element.value = prompt.content ?? '';
-                element.addEventListener('input', () => {
-                    prompt.content = element.value;
-                    saveSettingsDebounced()
-                });
-
-                return this;
-            },
-
-            update(value) {
-                this.element.value = value;
-            }
-        }
-    }
-
-    const mainPrompt = this.getPromptById('main');
-    const mainPromptTextarea = document.getElementById(this.configuration.quickEdit.main);
-    const mainQuickEdit = createQuickEdit().from(mainPromptTextarea, mainPrompt);
-
-    const nsfwPrompt = this.getPromptById('nsfw');
-    const nsfwPromptTextarea = document.getElementById(this.configuration.quickEdit.nsfw);
-    const nsfwQuickEdit = createQuickEdit().from(nsfwPromptTextarea, nsfwPrompt);
-
-    const jailbreakPrompt = this.getPromptById('jailbreak');
-    const jailbreakPromptTextarea = document.getElementById(this.configuration.quickEdit.jailbreak);
-    const jailbreakQuickEdit = createQuickEdit().from(jailbreakPromptTextarea, jailbreakPrompt);
-
     // Save prompt edit form to settings and close form.
     this.handleSavePrompt = (event) => {
         const promptId = event.target.dataset.pmPrompt;
@@ -355,9 +330,9 @@ PromptManagerModule.prototype.init = function (moduleConfiguration, serviceSetti
             this.updatePromptWithPromptEditForm(prompt);
         }
 
-        if ('main' === promptId) mainQuickEdit.update(prompt.content);
+        if ('main' === promptId) this.updateQuickEdit('main', prompt);
-        if ('nsfw' === promptId) nsfwQuickEdit.update(prompt.content);
+        if ('nsfw' === promptId) this.updateQuickEdit('nsfw', prompt);
-        if ('jailbreak' === promptId) jailbreakQuickEdit.update(prompt.content);
+        if ('jailbreak' === promptId) this.updateQuickEdit('jailbreak', prompt);
 
         this.log('Saved prompt: ' + promptId);
 
@@ -952,6 +927,42 @@ PromptManagerModule.prototype.preparePrompt = function (prompt, original = null)
     return preparedPrompt;
 }
 
+/**
+ * Factory function for creating a QuickEdit object associated with a prompt element.
+ *
+ * The QuickEdit object provides methods to synchronize an input element's value with a prompt's content
+ * and handle input events to update the prompt content.
+ *
+ */
+PromptManagerModule.prototype.createQuickEdit = function(identifier, title) {
+    const prompt = this.getPromptById(identifier);
+    const textareaIdentifier = `${identifier}_prompt_quick_edit_textarea`;
+    const html = `<div class="range-block m-t-1">
+                    <div class="justifyLeft" data-i18n="${title}">${title}</div>
+                    <div class="wide100p">
+                        <textarea id="${textareaIdentifier}" class="text_pole textarea_compact" rows="6" placeholder="">${prompt.content}</textarea>
+                    </div>
+                </div>`;
+
+    const quickEditContainer = document.getElementById('quick-edit-container');
+    quickEditContainer.insertAdjacentHTML('afterbegin', html);
+
+    const debouncedSaveServiceSettings = debouncePromise(() => this.saveServiceSettings(), 300);
+
+    const textarea = document.getElementById(textareaIdentifier);
+    textarea.addEventListener('blur', () => {
+        prompt.content = textarea.value;
+        this.updatePromptByIdentifier(identifier, prompt);
+        debouncedSaveServiceSettings().then(() => this.render());
+    });
+
+}
+
+PromptManagerModule.prototype.updateQuickEdit = function(identifier, prompt) {
+    const textarea = document.getElementById(`${identifier}_prompt_quick_edit_textarea`);
+    textarea.value = prompt.content;
+}
+
 /**
  * Checks if a given name is accepted by OpenAi API
  * @link https://platform.openai.com/docs/api-reference/chat/create
@@ -1241,6 +1252,13 @@ PromptManagerModule.prototype.renderPromptManager = function () {
         footerDiv.querySelector('#prompt-manager-export').addEventListener('click', showExportSelection);
         rangeBlockDiv.querySelector('.export-promptmanager-prompts-full').addEventListener('click', this.handleFullExport);
         rangeBlockDiv.querySelector('.export-promptmanager-prompts-character').addEventListener('click', this.handleCharacterExport);
+
+        const quickEditContainer = document.getElementById('quick-edit-container');
+        quickEditContainer.innerHTML = '';
+
+        this.createQuickEdit('jailbreak', 'Jailbreak');
+        this.createQuickEdit('nsfw', 'NSFW');
+        this.createQuickEdit('main', 'Main');
     }
 };
 

public/scripts/openai.js

@@ -347,11 +347,6 @@ function setupChatCompletionPromptManager(openAiSettings) {
             nsfw: default_nsfw_prompt,
             jailbreak: default_jailbreak_prompt,
             enhanceDefinitions: default_enhance_definitions_prompt
-        },
-        quickEdit: {
-            main: 'main_prompt_quick_edit_textarea',
-            nsfw: 'nsfw_prompt_quick_edit_textarea',
-            jailbreak: 'jailbreak_prompt_quick_edit_textarea'
         }
     };