From a3ec8d709db0a6492ce6070cf3fc611a64ecaff6 Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Sat, 9 Dec 2023 17:56:36 +0000
Subject: [PATCH 1/2] add support for tab and shift-tab in QR editor

---
 .../scripts/extensions/quick-reply/index.js   | 53 ++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/public/scripts/extensions/quick-reply/index.js b/public/scripts/extensions/quick-reply/index.js
index 36260bd83..7962cd41d 100644
--- a/public/scripts/extensions/quick-reply/index.js
+++ b/public/scripts/extensions/quick-reply/index.js
@@ -639,7 +639,7 @@ function generateQuickReplyElements() {
             <span class="drag-handle ui-sortable-handle">☰</span>
             <input class="text_pole wide30p" id="quickReply${i}Label" placeholder="(Button label)">
             <span class="menu_button menu_button_icon" id="quickReply${i}CtxButton" title="Additional options: context menu, auto-execution">⋮</span>
-            <span class="menu_button menu_button_icon editor_maximize fa-solid fa-maximize" data-for="quickReply${i}Mes" id="quickReply${i}ExpandButton" title="Expand the editor"></span>
+            <span class="menu_button menu_button_icon editor_maximize_with_tab fa-solid fa-maximize" data-for="quickReply${i}Mes" id="quickReply${i}ExpandButton" title="Expand the editor"></span>
             <textarea id="quickReply${i}Mes" placeholder="(Custom message or /command)" class="text_pole widthUnset flex1" rows="2"></textarea>
         </div>
         `;
@@ -889,6 +889,57 @@ jQuery(async () => {
         saveSettingsDebounced();
     });
 
+    // taken and adjusted from chats.js (.editor_maximize)
+    $(document).on('click', '.editor_maximize_with_tab', function () {
+        const broId = $(this).attr('data-for');
+        const bro = $(`#${broId}`);
+
+        if (!bro.length) {
+            console.error('Could not find editor with id', broId);
+            return;
+        }
+
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('height100p', 'wide100p', 'flex-container');
+        wrapper.classList.add('flexFlowColumn', 'justifyCenter', 'alignitemscenter');
+        const textarea = document.createElement('textarea');
+        textarea.value = String(bro.val());
+        textarea.classList.add('height100p', 'wide100p');
+        textarea.addEventListener('keydown', (evt) => {
+            if (evt.key == 'Tab' && !evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
+                evt.preventDefault();
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                if (end - start > 0 && textarea.value.substring(start, end).includes('\n')) {
+                    const lineStart = textarea.value.lastIndexOf('\n', start);
+                    const count = textarea.value.substring(lineStart, end).split('\n').length - 1;
+                    textarea.value = `${textarea.value.substring(0, lineStart)}${textarea.value.substring(lineStart, end).replace(/\n/g, '\n\t')}${textarea.value.substring(end)}`;
+                    textarea.selectionStart = start + 1;
+                    textarea.selectionEnd = end + count;
+                } else {
+                    textarea.value = `${textarea.value.substring(0, start)}\t${textarea.value.substring(end)}`;
+                    textarea.selectionStart = start + 1;
+                    textarea.selectionEnd = end + 1;
+                }
+            } else if (evt.key == 'Tab' && evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
+                evt.preventDefault();
+                const start = textarea.selectionStart;
+                const end = textarea.selectionEnd;
+                const lineStart = textarea.value.lastIndexOf('\n', start);
+                const count = textarea.value.substring(lineStart, end).split('\n\t').length - 1;
+                textarea.value = `${textarea.value.substring(0, lineStart)}${textarea.value.substring(lineStart, end).replace(/\n\t/g, '\n')}${textarea.value.substring(end)}`;
+                textarea.selectionStart = start - 1;
+                textarea.selectionEnd = end - count;
+            }
+        });
+        textarea.addEventListener('inpupt', () => {
+            bro.val(textarea.value).trigger('input');
+        });
+        wrapper.appendChild(textarea);
+
+        callPopup(wrapper, 'text', '', { wide: true, large: true });
+    });
+
     await loadSettings('init');
     addQuickReplyBar();
 

From af89cfa870654817b4fc40a0dbe2cd9ff341eeff Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 10 Dec 2023 16:48:25 +0200
Subject: [PATCH 2/2] Code clean-up

---
 public/scripts/chats.js                       | 35 +++++++++++-
 .../scripts/extensions/quick-reply/index.js   | 53 +------------------
 2 files changed, 34 insertions(+), 54 deletions(-)

diff --git a/public/scripts/chats.js b/public/scripts/chats.js
index 2fbe3760a..cd8a8677e 100644
--- a/public/scripts/chats.js
+++ b/public/scripts/chats.js
@@ -380,6 +380,7 @@ jQuery(function () {
     $(document).on('click', '.editor_maximize', function () {
         const broId = $(this).attr('data-for');
         const bro = $(`#${broId}`);
+        const withTab = $(this).attr('data-tab');
 
         if (!bro.length) {
             console.error('Could not find editor with id', broId);
@@ -392,11 +393,41 @@ jQuery(function () {
         const textarea = document.createElement('textarea');
         textarea.value = String(bro.val());
         textarea.classList.add('height100p', 'wide100p');
-        textarea.oninput = function () {
+        textarea.addEventListener('input', function () {
             bro.val(textarea.value).trigger('input');
-        };
+        });
         wrapper.appendChild(textarea);
 
+        if (withTab) {
+            textarea.addEventListener('keydown', (evt) => {
+                if (evt.key == 'Tab' && !evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
+                    evt.preventDefault();
+                    const start = textarea.selectionStart;
+                    const end = textarea.selectionEnd;
+                    if (end - start > 0 && textarea.value.substring(start, end).includes('\n')) {
+                        const lineStart = textarea.value.lastIndexOf('\n', start);
+                        const count = textarea.value.substring(lineStart, end).split('\n').length - 1;
+                        textarea.value = `${textarea.value.substring(0, lineStart)}${textarea.value.substring(lineStart, end).replace(/\n/g, '\n\t')}${textarea.value.substring(end)}`;
+                        textarea.selectionStart = start + 1;
+                        textarea.selectionEnd = end + count;
+                    } else {
+                        textarea.value = `${textarea.value.substring(0, start)}\t${textarea.value.substring(end)}`;
+                        textarea.selectionStart = start + 1;
+                        textarea.selectionEnd = end + 1;
+                    }
+                } else if (evt.key == 'Tab' && evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
+                    evt.preventDefault();
+                    const start = textarea.selectionStart;
+                    const end = textarea.selectionEnd;
+                    const lineStart = textarea.value.lastIndexOf('\n', start);
+                    const count = textarea.value.substring(lineStart, end).split('\n\t').length - 1;
+                    textarea.value = `${textarea.value.substring(0, lineStart)}${textarea.value.substring(lineStart, end).replace(/\n\t/g, '\n')}${textarea.value.substring(end)}`;
+                    textarea.selectionStart = start - 1;
+                    textarea.selectionEnd = end - count;
+                }
+            });
+        }
+
         callPopup(wrapper, 'text', '', { wide: true, large: true });
     });
 
diff --git a/public/scripts/extensions/quick-reply/index.js b/public/scripts/extensions/quick-reply/index.js
index 7962cd41d..6ce80d51a 100644
--- a/public/scripts/extensions/quick-reply/index.js
+++ b/public/scripts/extensions/quick-reply/index.js
@@ -639,7 +639,7 @@ function generateQuickReplyElements() {
             <span class="drag-handle ui-sortable-handle">☰</span>
             <input class="text_pole wide30p" id="quickReply${i}Label" placeholder="(Button label)">
             <span class="menu_button menu_button_icon" id="quickReply${i}CtxButton" title="Additional options: context menu, auto-execution">⋮</span>
-            <span class="menu_button menu_button_icon editor_maximize_with_tab fa-solid fa-maximize" data-for="quickReply${i}Mes" id="quickReply${i}ExpandButton" title="Expand the editor"></span>
+            <span class="menu_button menu_button_icon editor_maximize fa-solid fa-maximize" data-tab="true" data-for="quickReply${i}Mes" id="quickReply${i}ExpandButton" title="Expand the editor"></span>
             <textarea id="quickReply${i}Mes" placeholder="(Custom message or /command)" class="text_pole widthUnset flex1" rows="2"></textarea>
         </div>
         `;
@@ -889,57 +889,6 @@ jQuery(async () => {
         saveSettingsDebounced();
     });
 
-    // taken and adjusted from chats.js (.editor_maximize)
-    $(document).on('click', '.editor_maximize_with_tab', function () {
-        const broId = $(this).attr('data-for');
-        const bro = $(`#${broId}`);
-
-        if (!bro.length) {
-            console.error('Could not find editor with id', broId);
-            return;
-        }
-
-        const wrapper = document.createElement('div');
-        wrapper.classList.add('height100p', 'wide100p', 'flex-container');
-        wrapper.classList.add('flexFlowColumn', 'justifyCenter', 'alignitemscenter');
-        const textarea = document.createElement('textarea');
-        textarea.value = String(bro.val());
-        textarea.classList.add('height100p', 'wide100p');
-        textarea.addEventListener('keydown', (evt) => {
-            if (evt.key == 'Tab' && !evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
-                evt.preventDefault();
-                const start = textarea.selectionStart;
-                const end = textarea.selectionEnd;
-                if (end - start > 0 && textarea.value.substring(start, end).includes('\n')) {
-                    const lineStart = textarea.value.lastIndexOf('\n', start);
-                    const count = textarea.value.substring(lineStart, end).split('\n').length - 1;
-                    textarea.value = `${textarea.value.substring(0, lineStart)}${textarea.value.substring(lineStart, end).replace(/\n/g, '\n\t')}${textarea.value.substring(end)}`;
-                    textarea.selectionStart = start + 1;
-                    textarea.selectionEnd = end + count;
-                } else {
-                    textarea.value = `${textarea.value.substring(0, start)}\t${textarea.value.substring(end)}`;
-                    textarea.selectionStart = start + 1;
-                    textarea.selectionEnd = end + 1;
-                }
-            } else if (evt.key == 'Tab' && evt.shiftKey && !evt.ctrlKey && !evt.altKey) {
-                evt.preventDefault();
-                const start = textarea.selectionStart;
-                const end = textarea.selectionEnd;
-                const lineStart = textarea.value.lastIndexOf('\n', start);
-                const count = textarea.value.substring(lineStart, end).split('\n\t').length - 1;
-                textarea.value = `${textarea.value.substring(0, lineStart)}${textarea.value.substring(lineStart, end).replace(/\n\t/g, '\n')}${textarea.value.substring(end)}`;
-                textarea.selectionStart = start - 1;
-                textarea.selectionEnd = end - count;
-            }
-        });
-        textarea.addEventListener('inpupt', () => {
-            bro.val(textarea.value).trigger('input');
-        });
-        wrapper.appendChild(textarea);
-
-        callPopup(wrapper, 'text', '', { wide: true, large: true });
-    });
-
     await loadSettings('init');
     addQuickReplyBar();