From 3e9927dc6739731c9320cdba0e087c7fbc796414 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 3 Dec 2023 02:01:06 +0200
Subject: [PATCH] Add editor textareas maximize

---
 public/index.html       | 10 ++++++----
 public/scripts/chats.js | 19 +++++++++++++++++++
 public/style.css        |  1 -
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index 04b193037..11bdec577 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3466,8 +3466,9 @@
                             </div>
                         </div>
                         <hr>
-                        <div id="description_div" class="marginBot5">
+                        <div id="description_div" class="marginBot5 flex-container alignitemscenter">
                             <span data-i18n="Character Description">Description</span>
+                            <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="description_textarea" title="Expand the editor"></i>
                             <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
                                 <span class="fa-solid fa-circle-question note-link-span"></span>
                             </a>
@@ -3477,12 +3478,13 @@
                             Tokens: <span data-token-counter="description_textarea" data-token-permanent="true">counting...</span>
                         </div>
                         <div id="first_message_div" class="marginBot5 title_restorable">
-                            <span>
+                            <div class="flex-container alignitemscenter">
                                 <span data-i18n="First message">First message</span>
+                                <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="firstmessage_textarea" title="Expand the editor"></i>
                                 <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#first-message" class="notes-link" target="_blank">
                                     <span class="fa-solid fa-circle-question note-link-span"></span>
                                 </a>
-                            </span>
+                            </div>
                             <div class="menu_button menu_button_icon open_alternate_greetings margin0" title="Click to set additional greeting messages" data-i18n="[title]Click to set additional greeting messages">
                                 <span data-i18n="Alt. Greetings">
                                     Alt. Greetings
@@ -4466,7 +4468,7 @@
                 <strong>Alternate Greeting #<span class="greeting_index"></span></strong>
                 <div class="menu_button fa-solid fa-trash-alt delete_alternate_greeting"></div>
             </div>
-            <textarea name="alternate_greetings" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text" maxlength="50000" value="" autocomplete="off" rows="4"></textarea>
+            <textarea name="alternate_greetings" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text" maxlength="50000" value="" autocomplete="off" rows="12"></textarea>
         </div>
     </div>
     <!-- chat and input bar -->
diff --git a/public/scripts/chats.js b/public/scripts/chats.js
index 12caf02ec..98a8b2942 100644
--- a/public/scripts/chats.js
+++ b/public/scripts/chats.js
@@ -377,6 +377,25 @@ jQuery(function () {
         embedMessageFile(messageId, messageBlock);
     });
 
+    $(document).on('click', '.editor_maximize', function () {
+        const broId = $(this).data('for');
+        const bro = $(`#${broId}`);
+
+        if (!bro.length) {
+            console.error('Could not find editor with id', broId);
+            return;
+        }
+
+        const textarea = document.createElement('textarea');
+        textarea.value = String(bro.val());
+        textarea.classList.add('height100p');
+        textarea.oninput = function () {
+            bro.val(textarea.value).trigger('input');
+        };
+
+        callPopup(textarea, 'text', '', { wide: true, large: true });
+    });
+
     $('#file_form_input').on('change', onFileAttach);
     $('#file_form').on('reset', function () {
         $('#file_form').addClass('displayNone');
diff --git a/public/style.css b/public/style.css
index e1a5efdc4..17a91c52f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1145,7 +1145,6 @@ input[type="file"] {
     display: block;
     cursor: pointer;
     text-align: center;
-    padding-right: 20px;
     margin-top: 0;
     filter: grayscale(1) brightness(75%);
     -webkit-transition: all 0.5s ease-in-out;