Add variables to notices textarea

dashboard/i18n/en.json

@@ -235,6 +235,7 @@
             "usergroup": "Wiki user group:",
             "usergroup_and": "Require all user groups:"
         },
+        "help_notice": "<p>The custom notices support some simple functions and variables.</p>\n<ul>\n<li><code class=\"form-button user-select\">$editcount</code> – The current edit count of the user.</li>\n<li><code class=\"form-button user-select\">$accountage</code> – The current account age of the user in full days.</li>\n<li><code class=\"form-button user-select\">$postcount</code> – The current discussions post count of the user (only Fandom wikis).</li>\n<li><code class=\"form-button user-select\" data-after=\" }}\" data-before=\"{{#expr: \">{{#expr: 1+1}}</code> – Returns the result of an expression.\n<ul>\n<li>Supports only addition <code class=\"form-button user-select\">+</code> and subtraction <code class=\"form-button user-select\">-</code>.</li>\n</ul></li>\n<li><code class=\"form-button user-select\" data-after=\" |  |  }}\" data-before=\"{{#ifexpr: \">{{#ifexpr: 1 &gt; 1 | <i>if true</i> | <i>if false</i> }}</code> – Returns text depending on the result of an expression.\n<ul>\n<li>Supports <code class=\"form-button user-select\">&lt;</code>, <code class=\"form-button user-select\">&gt;</code>, <code class=\"form-button user-select\">=</code>, <code class=\"form-button user-select\">&lt;=</code>, <code class=\"form-button user-select\">&gt;=</code>, <code class=\"form-button user-select\">!=</code>, <code class=\"form-button user-select\">&lt;&gt;</code> as well as <code class=\"form-button user-select\">and</code>, <code class=\"form-button user-select\">or</code>.</li>\n</ul></li>\n</ul>",
         "new": "New verification",
         "notice": "Verification notices"
     }

dashboard/src/index.css

@@ -363,11 +363,15 @@ code {
 	border: 1px solid #202225;
 	border-radius: 3px;
 	white-space: pre-wrap;
+	font-size: 85%;
 }
 .theme-light code {
 	background-color: #f2f3f5;
 	border-color: #e3e5e8;
 }
+li {
+	margin: 3px 0;
+}
 #text {
 	position: relative;
 	padding: 8px;
@@ -381,6 +385,15 @@ code {
 	-ms-user-select: all;
 	user-select: all;
 }
+.form-button:not(.user-select) {
+	cursor: pointer;
+}
+.form-button:not(.user-select):hover {
+	color: #00b0f4;
+}
+.theme-light .form-button:not(.user-select):hover {
+	color: #0067e0;
+}
 .widgets {
 	margin-top: 250px;
 }

dashboard/src/index.js

@@ -226,7 +226,7 @@ if ( wiki ) {
 				if ( !readonly ) wiki.removeAttribute('readonly');
 				wikicheck.removeAttribute('disabled');
 			} );
-		}
+		};
 	}
 	const feeds = document.getElementById('wb-settings-feeds');
 	if ( feeds ) {
@@ -364,16 +364,54 @@ if ( addRole && addRoleButton ) addRoleButton.onclick = function() {
 };
 
 var textAreas = document.getElementsByTagName('textarea');
-for ( var ta = 0; ta < textAreas.length; ta++ ) {
-	textAreas[ta].addEventListener('keydown', allowTabs);
-}
+if ( textAreas.length ) {
+	/** @type {HTMLTextAreaElement} */
+	var textArea = null;
+	var codeButtons = document.getElementsByClassName('form-button');
+	for ( var cb = 0; cb < codeButtons.length; cb++ ) {
+		codeButtons[cb].onclick = addVariable;
+	}
 
-/**
- * @this HTMLTextAreaElement
- * @param {KeyboardEvent} e
- */
-function allowTabs(e) {
-	if ( e.key === 'Tab' ) {
+	for ( var ta = 0; ta < textAreas.length; ta++ ) {
+		textAreas[ta].addEventListener('keydown', allowTabs);
+		textAreas[ta].onclick = function() {
+			if ( !textArea ) {
+				for ( var us = 0; us < codeButtons.length; us++ ) {
+					codeButtons[us].classList.remove('user-select');
+				}
+			}
+			textArea = this;
+		};
+	}
+
+	/**
+	 * @this HTMLElement
+	 * @param {MouseEvent} e
+	 */
+	function addVariable(e) {
+		if ( !textArea || e.shiftKey ) return;
+		var start = textArea.selectionStart;
+		var end = textArea.selectionEnd;
+		var valueBefore = ( this.dataset?.before || this.innerText );
+		var valueAfter = ( this.dataset?.after || '' );
+		if ( valueAfter ) {
+			textArea.value = textArea.value.substring(0, start) + valueBefore + textArea.value.substring(start, end) + valueAfter + textArea.value.substring(end);
+			textArea.selectionStart = start + valueBefore.length;
+			textArea.selectionEnd = end + valueBefore.length;
+		}
+		else {
+			textArea.value = textArea.value.substring(0, start) + valueBefore + textArea.value.substring(end);
+			textArea.selectionStart = textArea.selectionEnd = start + valueBefore.length;
+		}
+		textArea.focus();
+	}
+
+	/**
+	 * @this HTMLTextAreaElement
+	 * @param {KeyboardEvent} e
+	 */
+	function allowTabs(e) {
+		if ( e.key !== 'Tab' ) return;
 		if ( this.value.includes( '`ˋ`' ) ) this.value = this.value.replace( /`ˋ`/g, '```' );
 		var start = this.selectionStart;
 		var end = this.selectionEnd;
@@ -400,6 +438,6 @@ for ( var i = 0; i < collapsible.length; i++ ) {
 		else {
 			content.style.display = 'block';
 		}
-	}
+	};
 }
 */

dashboard/verification.js

@@ -333,6 +333,7 @@ function dashboard_verification(res, $, guild, args, dashboardLang) {
 					$('textarea, option, optgroup').attr('disabled', '');
 					$('input[type="submit"]').remove();
 				}
+				$('<div class="description">').html(dashboardLang.get('verification.help_notice')).appendTo('#text');
 				let body = $.html();
 				res.writeHead(200, {'Content-Length': Buffer.byteLength(body)});
 				res.write( body );