feat: Add CodeMirror editor to control panel

customcommands/assets/customcommands-editcmd.html

@@ -740,6 +740,67 @@ <h2 class="card-title">Custom Command Information</h2>
     });
 </script>
 
+<link rel="stylesheet" href="/static/vendorr/codemirror/lib/codemirror.css">
+<link rel="stylesheet" href="/static/vendorr/codemirror/theme/ayu-mirage.css">
+<script src="/static/vendorr/codemirror/lib/codemirror.js"></script>
+<script src="/static/vendorr/codemirror/addon/display/placeholder.js"></script>
+<script src="/static/vendorr/codemirror/mode/go/go.js"></script>
+<script src="/static/js/yagFuncs.js"></script>
+<style>
+    .CodeMirror {
+        width: 100% !important;
+        max-width: 95% !important;
+        resize: vertical;
+    }
+</style>
+<script type="text/javascript">
+    function setupCodeMirrorInstance(textAreaElement) {
+        const newInstance = CodeMirror.fromTextArea(textAreaElement, {
+            lineNumbers: true,
+            mode: 'text/x-go',
+            theme: 'ayu-mirage',
+            lineWrapping: true,
+            placeholder: 'Command body here',
+            viewportMargin: Infinity,
+            extraKeys: {
+                'Ctrl-Space': 'autocomplete',
+                'Alt-F': 'findPersistent',
+            },
+        });
+        return newInstance;
+    }
+
+    const initialTextAreas = document.querySelectorAll('.cc-editor');
+    initialTextAreas.forEach((initialTextArea) => {
+        const codeMirror = setupCodeMirrorInstance(initialTextArea);
+        codeMirror.on('change', (cm) => {
+            cm.save();
+            onCCChanged(cm.getTextArea());
+        });
+    });
+
+    // we need to reinitialize the codemirror instance for each new textarea, the script below is the old implementation coming from the spongebob.js file
+    $(document).on('click', '.btn-add', function (e) {
+		e.preventDefault();
+
+		var currentEntry = $(this).parent().parent(),
+			newEntry = $(currentEntry.clone()).insertAfter(currentEntry);
+        newEntry.find('.CodeMirror').remove();
+		newEntry.find('input, textarea').val('');
+        const codeMirror = setupCodeMirrorInstance(newEntry.find('textarea')[0]);
+
+
+		newEntry.parent().find('.entry:not(:last-of-type) .btn-add')
+			.removeClass('btn-add').addClass('btn-remove')
+			.removeClass('btn-success').addClass('btn-danger')
+			.html('<i class="fas fa-minus"></i>');
+	}).on('click', '.btn-remove', function (e) {
+		$(this).parents('.entry:first').remove();
+
+		e.preventDefault();
+		return false;
+	});
+</script>
 
 {{template "cp_footer" .}}
 

customcommands/web.go

@@ -282,7 +282,7 @@ func handleGetCommand(w http.ResponseWriter, r *http.Request) (web.TemplateData,
 	templateData["IsGuildPremium"] = premium.ContextPremium(r.Context())
 	templateData["MaxCCLength"] = allowedCCLength
 	templateData["PublicLink"] = getPublicLink(cc)
-
+	
 	return serveGroupSelected(r, templateData, cc.GroupID.Int64, cc.GuildID)
 }
 

frontend/static/js/spongebob.js

@@ -291,25 +291,6 @@ function addListeners() {
 		navigateToAnchor($.attr(this, "href"));
 	})
 
-
-	$(document).on('click', '.btn-add', function (e) {
-		e.preventDefault();
-
-		var currentEntry = $(this).parent().parent(),
-			newEntry = $(currentEntry.clone()).insertAfter(currentEntry);
-
-		newEntry.find('input, textarea').val('');
-		newEntry.parent().find('.entry:not(:last-of-type) .btn-add')
-			.removeClass('btn-add').addClass('btn-remove')
-			.removeClass('btn-success').addClass('btn-danger')
-			.html('<i class="fas fa-minus"></i>');
-	}).on('click', '.btn-remove', function (e) {
-		$(this).parents('.entry:first').remove();
-
-		e.preventDefault();
-		return false;
-	});
-
 	$(document).on('click', '.modal-dismiss', function (e) {
 		e.preventDefault();
 		$.magnificPopup.close();

frontend/static/js/yagFuncs.js

@@ -0,0 +1,174 @@
+// https://github.com/jo3-l/yagfuncdata
+var yagFuncs = {
+  editMessage: true,
+  editMessageNoEscape: true,
+  pinMessage: true,
+  publishMessage: true,
+  publishResponse: true,
+  sendDM: true,
+  sendMessage: true,
+  sendMessageNoEscape: true,
+  sendMessageNoEscapeRetID: true,
+  sendMessageRetID: true,
+  sendTemplate: true,
+  sendTemplateDM: true,
+  unpinMessage: true,
+  mentionEveryone: true,
+  mentionHere: true,
+  mentionRoleID: true,
+  mentionRoleName: true,
+  hasRoleID: true,
+  hasRoleName: true,
+  addRoleID: true,
+  removeRoleID: true,
+  setRoles: true,
+  addRoleName: true,
+  removeRoleName: true,
+  giveRoleID: true,
+  giveRoleName: true,
+  takeRoleID: true,
+  takeRoleName: true,
+  targetHasRoleID: true,
+  targetHasRoleName: true,
+  hasPermissions: true,
+  targetHasPermissions: true,
+  getTargetPermissionsIn: true,
+  addMessageReactions: true,
+  addReactions: true,
+  addResponseReactions: true,
+  deleteAllMessageReactions: true,
+  deleteMessage: true,
+  deleteMessageReaction: true,
+  deleteResponse: true,
+  deleteTrigger: true,
+  getChannel: true,
+  getChannelPins: true,
+  getChannelOrThread: true,
+  getMember: true,
+  getMessage: true,
+  getPinCount: true,
+  getRole: true,
+  getThread: true,
+  createThread: true,
+  deleteThread: true,
+  addThreadMember: true,
+  removeThreadMember: true,
+  createForumPost: true,
+  deleteForumPost: true,
+  currentUserAgeHuman: true,
+  currentUserAgeMinutes: true,
+  currentUserCreated: true,
+  reFind: true,
+  reFindAll: true,
+  reFindAllSubmatches: true,
+  reReplace: true,
+  reSplit: true,
+  sleep: true,
+  editChannelName: true,
+  editChannelTopic: true,
+  editNickname: true,
+  onlineCount: true,
+  onlineCountBots: true,
+  sort: true,
+  str: true,
+  toString: true,
+  toInt: true,
+  toInt64: true,
+  toFloat: true,
+  toDuration: true,
+  toRune: true,
+  toByte: true,
+  hasPrefix: true,
+  hasSuffix: true,
+  joinStr: true,
+  lower: true,
+  slice: true,
+  split: true,
+  title: true,
+  trimSpace: true,
+  upper: true,
+  urlescape: true,
+  urlunescape: true,
+  sanitizeText: true,
+  reQuoteMeta: true,
+  add: true,
+  cbrt: true,
+  div: true,
+  fdiv: true,
+  log: true,
+  mathConst: true,
+  max: true,
+  min: true,
+  mod: true,
+  mult: true,
+  pow: true,
+  round: true,
+  roundCeil: true,
+  roundEven: true,
+  roundFloor: true,
+  sqrt: true,
+  sub: true,
+  bitwiseAnd: true,
+  bitwiseOr: true,
+  bitwiseXor: true,
+  bitwiseNot: true,
+  bitwiseAndNot: true,
+  bitwiseLeftShift: true,
+  bitwiseRightShift: true,
+  humanizeThousands: true,
+  dict: true,
+  sdict: true,
+  structToSdict: true,
+  cembed: true,
+  cslice: true,
+  complexMessage: true,
+  complexMessageEdit: true,
+  kindOf: true,
+  adjective: true,
+  in: true,
+  inFold: true,
+  json: true,
+  jsonToSdict: true,
+  noun: true,
+  randInt: true,
+  roleAbove: true,
+  seq: true,
+  shuffle: true,
+  verb: true,
+  currentTime: true,
+  parseTime: true,
+  formatTime: true,
+  loadLocation: true,
+  newDate: true,
+  snowflakeToTime: true,
+  timestampToTime: true,
+  weekNumber: true,
+  humanizeDurationHours: true,
+  humanizeDurationMinutes: true,
+  humanizeDurationSeconds: true,
+  humanizeTimeSinceDays: true,
+  pastUsernames: true,
+  pastNicknames: true,
+  createTicket: true,
+  exec: true,
+  execAdmin: true,
+  userArg: true,
+  parseArgs: true,
+  carg: true,
+  execCC: true,
+  scheduleUniqueCC: true,
+  cancelScheduledUniqueCC: true,
+  dbSet: true,
+  dbSetExpire: true,
+  dbIncr: true,
+  dbGet: true,
+  dbGetPattern: true,
+  dbGetPatternReverse: true,
+  dbDel: true,
+  dbDelById: true,
+  dbDelMultiple: true,
+  dbTopEntries: true,
+  dbBottomEntries: true,
+  dbCount: true,
+  dbRank: true
+};

frontend/static/vendorr/codemirror/mode/go/go.js

@@ -15,25 +15,19 @@ CodeMirror.defineMode("go", function(config) {
   var indentUnit = config.indentUnit;
 
   var keywords = {
-    "break":true, "case":true, "chan":true, "const":true, "continue":true,
-    "default":true, "defer":true, "else":true, "fallthrough":true, "for":true,
-    "func":true, "go":true, "goto":true, "if":true, "import":true,
-    "interface":true, "map":true, "package":true, "range":true, "return":true,
-    "select":true, "struct":true, "switch":true, "type":true, "var":true,
-    "bool":true, "byte":true, "complex64":true, "complex128":true,
-    "float32":true, "float64":true, "int8":true, "int16":true, "int32":true,
-    "int64":true, "string":true, "uint8":true, "uint16":true, "uint32":true,
-    "uint64":true, "int":true, "uint":true, "uintptr":true, "error": true,
-    "rune":true
+    "block":true, "break":true, "catch":true, "continue":true, "define":true, "else":true, "end":true,
+    "if":true,"range":true, "return":true, "template":true, "try":true, "while":true, "with":true
   };
 
   var atoms = {
-    "true":true, "false":true, "iota":true, "nil":true, "append":true,
-    "cap":true, "close":true, "complex":true, "copy":true, "delete":true, "imag":true,
-    "len":true, "make":true, "new":true, "panic":true, "print":true,
-    "println":true, "real":true, "recover":true
+    "true":true, "false":true, "nil":true,
+    "print":true, "printf":true, "println":true,
+    "and":true, "call":true, "html":true, "index":true, "js":true,
+    "len":true, "not":true, "or":true,"urlquery":true, "eq":true, "ne":true,
+    "lt":true, "le":true, "gt":true, "ge":true
   };
 
+
   var isOperatorChar = /[+\-*&^%:=<>!|\/]/;
 
   var curPunc;
@@ -79,6 +73,7 @@ CodeMirror.defineMode("go", function(config) {
       return "keyword";
     }
     if (atoms.propertyIsEnumerable(cur)) return "atom";
+    if (yagFuncs.propertyIsEnumerable(cur)) return "variable-2";
     return "variable";
   }
 

frontend/static/vendorr/codemirror/theme/ayu-mirage.css

@@ -0,0 +1,45 @@
+/* Based on https://github.com/dempfi/ayu */
+
+.cm-s-ayu-mirage.CodeMirror { background: #1f2430; color: #cbccc6; }
+.cm-s-ayu-mirage div.CodeMirror-selected { background: #34455a; }
+.cm-s-ayu-mirage .CodeMirror-line::selection, .cm-s-ayu-mirage .CodeMirror-line > span::selection, .cm-s-ayu-mirage .CodeMirror-line > span > span::selection { background: #34455a; }
+.cm-s-ayu-mirage .CodeMirror-line::-moz-selection, .cm-s-ayu-mirage .CodeMirror-line > span::-moz-selection, .cm-s-ayu-mirage .CodeMirror-line > span > span::-moz-selection { background: rgba(25, 30, 42, 99); }
+.cm-s-ayu-mirage .CodeMirror-gutters { background: #1f2430; border-right: 0px; }
+.cm-s-ayu-mirage .CodeMirror-guttermarker { color: white; }
+.cm-s-ayu-mirage .CodeMirror-guttermarker-subtle { color:  rgba(112, 122, 140, 66); }
+.cm-s-ayu-mirage .CodeMirror-linenumber { color: rgba(61, 66, 77, 99); }
+.cm-s-ayu-mirage .CodeMirror-cursor { border-left: 1px solid #ffcc66;  }
+.cm-s-ayu-mirage.cm-fat-cursor .CodeMirror-cursor {background-color: #a2a8a175 !important;}
+.cm-s-ayu-mirage .cm-animate-fat-cursor { background-color: #a2a8a175 !important; }
+
+.cm-s-ayu-mirage span.cm-comment { color: #5c6773; font-style:italic; }
+.cm-s-ayu-mirage span.cm-atom { color: #ae81ff; }
+.cm-s-ayu-mirage span.cm-number { color: #ffcc66; }
+
+.cm-s-ayu-mirage span.cm-comment.cm-attribute { color: #ffd580; }
+.cm-s-ayu-mirage span.cm-comment.cm-def { color: #d4bfff; }
+.cm-s-ayu-mirage span.cm-comment.cm-tag { color: #5ccfe6; }
+.cm-s-ayu-mirage span.cm-comment.cm-type { color: #5998a6; }
+
+.cm-s-ayu-mirage span.cm-property { color: #f29e74; }
+.cm-s-ayu-mirage span.cm-attribute { color: #ffd580; }  
+.cm-s-ayu-mirage span.cm-keyword { color: #ffa759; } 
+.cm-s-ayu-mirage span.cm-builtin { color: #ffcc66; }
+.cm-s-ayu-mirage span.cm-string { color: #bae67e; }
+
+.cm-s-ayu-mirage span.cm-variable { color: #cbccc6; }
+.cm-s-ayu-mirage span.cm-variable-2 { color: #f28779; }
+.cm-s-ayu-mirage span.cm-variable-3 { color: #5ccfe6; }
+.cm-s-ayu-mirage span.cm-type { color: #ffa759; }
+.cm-s-ayu-mirage span.cm-def { color: #ffd580; }
+.cm-s-ayu-mirage span.cm-bracket { color: rgba(92, 207, 230, 80); }
+.cm-s-ayu-mirage span.cm-tag { color: #5ccfe6; }
+.cm-s-ayu-mirage span.cm-header { color: #bae67e; }
+.cm-s-ayu-mirage span.cm-link { color: #5ccfe6; }
+.cm-s-ayu-mirage span.cm-error { color: #ff3333; } 
+
+.cm-s-ayu-mirage .CodeMirror-activeline-background { background: #191e2a; }
+.cm-s-ayu-mirage .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}