qr editor wrap toggle

public/scripts/extensions/quick-reply/html/qrEditor.html

@@ -13,7 +13,15 @@
 			</label>
 		</div>
 		<div class="qr--modal-messageContainer">
-			<label for="qr--modal-message">Message / Command:</label>
+			<label for="qr--modal-message">
+				Message / Command:
+			</label>
+			<small>
+				<label class="checkbox_label">
+					<input type="checkbox" id="qr--modal-wrap">
+					<span>Word wrap</span>
+				</label>
+			</small>
 			<textarea class="monospace" id="qr--modal-message"></textarea>
 		</div>
 	</div>

public/scripts/extensions/quick-reply/src/QuickReply.js

@@ -207,8 +207,23 @@ export class QuickReply {
             title.addEventListener('input', () => {
                 this.updateTitle(title.value);
             });
+            /**@type {HTMLInputElement}*/
+            const wrap = dom.querySelector('#qr--modal-wrap');
+            wrap.checked = JSON.parse(localStorage.getItem('qr--wrap'));
+            wrap.addEventListener('click', () => {
+                localStorage.setItem('qr--wrap', JSON.stringify(wrap.checked));
+                updateWrap();
+            });
+            const updateWrap = () => {
+                if (wrap.checked) {
+                    message.style.whiteSpace = 'pre-wrap';
+                } else {
+                    message.style.whiteSpace = 'pre';
+                }
+            };
             /**@type {HTMLTextAreaElement}*/
             const message = dom.querySelector('#qr--modal-message');
+            updateWrap();
             message.value = this.message;
             message.addEventListener('input', () => {
                 this.updateMessage(message.value);