From 21d3a7dc3edd68ecf6dc96aba53efff1f534421c Mon Sep 17 00:00:00 2001
From: LenAnderson <Anderson.Len@outlook.com>
Date: Sun, 7 Apr 2024 17:00:36 -0400
Subject: [PATCH] add tab size setting to QR editor

---
 .../extensions/quick-reply/html/qrEditor.html       |  8 ++++++--
 .../extensions/quick-reply/src/QuickReply.js        | 11 +++++++++++
 public/scripts/extensions/quick-reply/style.css     | 13 +++++++++++++
 public/scripts/extensions/quick-reply/style.less    | 13 +++++++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/public/scripts/extensions/quick-reply/html/qrEditor.html b/public/scripts/extensions/quick-reply/html/qrEditor.html
index 08cecbc2..736b87f6 100644
--- a/public/scripts/extensions/quick-reply/html/qrEditor.html
+++ b/public/scripts/extensions/quick-reply/html/qrEditor.html
@@ -16,12 +16,16 @@
 			<label for="qr--modal-message">
 				Message / Command:
 			</label>
-			<small>
+			<div class="qr--modal-editorSettings">
 				<label class="checkbox_label">
 					<input type="checkbox" id="qr--modal-wrap">
 					<span>Word wrap</span>
 				</label>
-			</small>
+				<label class="checkbox_label">
+					<span>Tab size:</span>
+					<input type="number" min="1" max="9" id="qr--modal-tabSize" class="text_pole">
+				</label>
+			</div>
 			<textarea class="monospace" id="qr--modal-message"></textarea>
 		</div>
 	</div>
diff --git a/public/scripts/extensions/quick-reply/src/QuickReply.js b/public/scripts/extensions/quick-reply/src/QuickReply.js
index 8ad5001a..609290d0 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReply.js
+++ b/public/scripts/extensions/quick-reply/src/QuickReply.js
@@ -221,9 +221,20 @@ export class QuickReply {
                     message.style.whiteSpace = 'pre';
                 }
             };
+            /**@type {HTMLInputElement}*/
+            const tabSize = dom.querySelector('#qr--modal-tabSize');
+            tabSize.value = JSON.parse(localStorage.getItem('qr--tabSize') ?? '4');
+            const updateTabSize = () => {
+                message.style.tabSize = tabSize.value;
+            };
+            tabSize.addEventListener('change', () => {
+                localStorage.setItem('qr--tabSize', JSON.stringify(Number(tabSize.value)));
+                updateTabSize();
+            });
             /**@type {HTMLTextAreaElement}*/
             const message = dom.querySelector('#qr--modal-message');
             updateWrap();
+            updateTabSize();
             message.value = this.message;
             message.addEventListener('input', () => {
                 this.updateMessage(message.value);
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index 74bf8134..653b858d 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -269,6 +269,19 @@
   display: flex;
   flex-direction: column;
 }
+#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  color: var(--grey70);
+  font-size: smaller;
+}
+#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label {
+  white-space: nowrap;
+}
+#dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input {
+  font-size: inherit;
+}
 #dialogue_popup:has(#qr--modalEditor) #dialogue_popup_text > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-message {
   flex: 1 1 auto;
 }
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index e6271a2c..413512e5 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/public/scripts/extensions/quick-reply/style.less
@@ -293,6 +293,19 @@
 					flex: 1 1 auto;
 					display: flex;
 					flex-direction: column;
+					> .qr--modal-editorSettings {
+						display: flex;
+						flex-direction: row;
+						gap: 1em;
+						color: var(--grey70);
+						font-size: smaller;
+						> .checkbox_label {
+							white-space: nowrap;
+							> input {
+								font-size: inherit;
+							}
+						}
+					}
 					> #qr--modal-message {
 						flex: 1 1 auto;
 					}