Merge pull request #1964 from LenAnderson/qr-editor-wordwrap

Add word-wrap toggle to QR editor

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);

public/style.css

@@ -139,6 +139,7 @@ body {
 
 ::-webkit-scrollbar {
     width: 10px;
+    height: 10px;
     scrollbar-gutter: stable;
 }
 
@@ -146,7 +147,7 @@ body {
     overflow-y: auto !important;
 }
 
-::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb:vertical {
     background-color: var(--grey7070a);
     box-shadow: inset 0 0 0 1px var(--black50a);
     border-radius: 10px;
@@ -155,6 +156,15 @@ body {
     border-top: 20px solid transparent;
     min-height: 40px;
 }
+::-webkit-scrollbar-thumb:horizontal {
+    background-color: var(--grey7070a);
+    box-shadow: inset 0 0 0 1px var(--black50a);
+    border-radius: 10px;
+    background-clip: content-box;
+    border: 2px solid transparent;
+    border-left: 20px solid transparent;
+    min-width: 40px;
+}
 
 table.responsiveTable {
     width: 100%;