Skip to content

Commit

Permalink
feat: Add CodeMirror editor to control panel (#1656)
Browse files Browse the repository at this point in the history
* feat: Add CodeMirror editor to control panel

* refactor: removed unused code, added galen styling suggestion and altered vanilla go codeMirror tokenizer (rangers suggestion)

* Apply suggestions from code review

Co-authored-by: Galen CC <[email protected]>

* refactor: Update script reference to yagFuncs.js in customcommands-editcmd.html and go.js

* fix: modernjs impl triggering alert without need, so impl codemirror in jquery

---------

Co-authored-by: Ashish <[email protected]>
Co-authored-by: Galen CC <[email protected]>
  • Loading branch information
3 people authored May 30, 2024
1 parent 2a58570 commit 22ed700
Show file tree
Hide file tree
Showing 6 changed files with 290 additions and 34 deletions.
61 changes: 61 additions & 0 deletions customcommands/assets/customcommands-editcmd.html
Original file line number Diff line number Diff line change
Expand Up @@ -706,6 +706,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" .}}

Expand Down
2 changes: 1 addition & 1 deletion customcommands/web.go
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down
19 changes: 0 additions & 19 deletions frontend/static/js/spongebob.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
174 changes: 174 additions & 0 deletions frontend/static/js/yagFuncs.js
Original file line number Diff line number Diff line change
@@ -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
};
23 changes: 9 additions & 14 deletions frontend/static/vendorr/codemirror/mode/go/go.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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";
}

Expand Down
45 changes: 45 additions & 0 deletions frontend/static/vendorr/codemirror/theme/ayu-mirage.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 22ed700

Please sign in to comment.