Add CodeMirror Editor for Web Demo (#228)
Also remove timestamps from output
This commit is contained in:
Pelanyo Kamara
GitHub
parent
f2e6a8f4a5
commit
019eeeb853
|
|
@ -1,31 +1,99 @@
|
|||
<form>
|
||||
<div>
|
||||
<label>Script:</label>
|
||||
<label class="header-center"><b>Input</b></label>
|
||||
<br>
|
||||
<textarea rows="10" cols="70" id="script">print("Hello World!")</textarea>
|
||||
<br><br>
|
||||
<button onclick="clearInput(); return false;">
|
||||
Clear Input
|
||||
</button>
|
||||
<button onclick="executeScript(); return false;">
|
||||
Run
|
||||
</button>
|
||||
<textarea rows="10" cols="70" id="script"></textarea>
|
||||
<div class="button-group">
|
||||
<button class="demo-button negative" style="margin: 8px 8px" onclick="clearInput(); return false;">
|
||||
Clear Input
|
||||
</button>
|
||||
<button class="demo-button positive" onclick="executeScript(); return false;">
|
||||
Run
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div>
|
||||
<label>Output:</label>
|
||||
<!-- centered header saying Output -->
|
||||
<label class="header-center"><b>Output</b></label>
|
||||
<br>
|
||||
<textarea readonly rows="10" cols="70" id="output"></textarea>
|
||||
<br><br>
|
||||
<button onclick="clearOutput(); return false;">
|
||||
Clear Output
|
||||
</button>
|
||||
<div class="button-group">
|
||||
<button class="demo-button negative" onclick="clearOutput(); return false;">
|
||||
Clear Output
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Styles for editor -->
|
||||
<style>
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
color: white;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 30%;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.demo-button-rightmost {
|
||||
margin: inherit 2px;
|
||||
}
|
||||
|
||||
.positive {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.negative {
|
||||
background-color: #f44336;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Luau WASM (async fetch) -->
|
||||
<script async src="https://github.com/Roblox/luau/releases/latest/download/Luau.Web.js"></script>
|
||||
<!-- CodeMirror -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
|
||||
<!-- Luau Parser for CodeMirror -->
|
||||
<script src="assets/js/luau_mode.js"></script>
|
||||
<!-- CodeMirror Luau Editor (MUST BE LOADED AFTER CODEMIRROR!) -->
|
||||
<script>
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("script"), {
|
||||
theme: "default",
|
||||
mode: "luau",
|
||||
matchBrackets: true,
|
||||
lineNumbers: true,
|
||||
smartIndent: true,
|
||||
indentWithTabs: true,
|
||||
indentUnit: 4,
|
||||
});
|
||||
editor.setValue("print(\"Hello World!\")\n");
|
||||
editor.addKeyMap({
|
||||
"Ctrl-Enter": function(cm) {
|
||||
executeScript();
|
||||
},
|
||||
"Shift-Tab": function (cm) {
|
||||
// dedent functionality
|
||||
cm.execCommand("indentLess");
|
||||
}
|
||||
});
|
||||
|
||||
// Misc Functions
|
||||
function output(text) {
|
||||
document.getElementById("output").value += "[" + new Date().toLocaleTimeString() + "] " + text.replace('stdin:', '') + "\n";
|
||||
output_box = document.getElementById("output");
|
||||
output_box.value += text.replace('stdin:', '') + "\n";
|
||||
// scroll to bottom
|
||||
output_box.scrollTop = output_box.scrollHeight;
|
||||
}
|
||||
|
||||
var Module = {
|
||||
|
|
@ -33,7 +101,7 @@
|
|||
};
|
||||
|
||||
function clearInput() {
|
||||
document.getElementById("script").value = "";
|
||||
editor.setValue("");
|
||||
}
|
||||
|
||||
function clearOutput() {
|
||||
|
|
@ -41,10 +109,9 @@
|
|||
}
|
||||
|
||||
function executeScript() {
|
||||
var err = Module.ccall('executeScript', 'string', ['string'], [document.getElementById("script").value]);
|
||||
var err = Module.ccall('executeScript', 'string', ['string'], [editor.getValue()]);
|
||||
if (err) {
|
||||
output('Error:' + err.replace('stdin:', ''));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script async src="https://github.com/Roblox/luau/releases/latest/download/Luau.Web.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: https://codemirror.net/LICENSE
|
||||
|
||||
// Luau mode. Based on Lua mode from CodeMirror and Franciszek Wawrzak (https://codemirror.net/mode/lua/lua.js)
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
CodeMirror.defineMode("luau", function(_, parserConfig) {
|
||||
var indentUnit = 4;
|
||||
|
||||
function prefixRE(words) {
|
||||
return new RegExp("^(?:" + words.join("|") + ")", "i");
|
||||
}
|
||||
function wordRE(words) {
|
||||
return new RegExp("^(?:" + words.join("|") + ")$", "i");
|
||||
}
|
||||
var specials = wordRE(parserConfig.specials || ["type"]);
|
||||
|
||||
// long list of standard functions from lua manual
|
||||
var builtins = wordRE([
|
||||
"_G","_VERSION","assert","error","getfenv","getmetatable","ipairs","load", "loadstring","next","pairs","pcall",
|
||||
"print","rawequal","rawget","rawset","require","select","setfenv","setmetatable","tonumber","tostring","type",
|
||||
"unpack","xpcall",
|
||||
|
||||
"coroutine.create","coroutine.resume","coroutine.running","coroutine.status","coroutine.wrap","coroutine.yield",
|
||||
|
||||
"debug.debug","debug.getfenv","debug.gethook","debug.getinfo","debug.getlocal","debug.getmetatable",
|
||||
"debug.getregistry","debug.getupvalue","debug.setfenv","debug.sethook","debug.setlocal","debug.setmetatable",
|
||||
"debug.setupvalue","debug.traceback",
|
||||
|
||||
"math.abs","math.acos","math.asin","math.atan","math.atan2","math.ceil","math.cos","math.cosh","math.deg",
|
||||
"math.exp","math.floor","math.fmod","math.frexp","math.huge","math.ldexp","math.log","math.log10","math.max",
|
||||
"math.min","math.modf","math.pi","math.pow","math.rad","math.random","math.randomseed","math.sin","math.sinh",
|
||||
"math.sqrt","math.tan","math.tanh",
|
||||
|
||||
"os.clock","os.date","os.difftime","os.execute","os.exit","os.getenv","os.remove","os.rename","os.setlocale",
|
||||
"os.time","os.tmpname",
|
||||
|
||||
"string.byte","string.char","string.dump","string.find","string.format","string.gmatch","string.gsub",
|
||||
"string.len","string.lower","string.match","string.rep","string.reverse","string.sub","string.upper",
|
||||
|
||||
"table.concat","table.insert","table.maxn","table.remove","table.sort"
|
||||
]);
|
||||
var keywords = wordRE(["and","break","elseif","false","nil","not","or","return",
|
||||
"true","function", "end", "if", "then", "else", "do",
|
||||
"while", "repeat", "until", "for", "in", "local", "continue" ]);
|
||||
|
||||
var indentTokens = wordRE(["function", "if","repeat","do", "\\(", "{"]);
|
||||
var dedentTokens = wordRE(["end", "until", "\\)", "}"]);
|
||||
var dedentPartial = prefixRE(["end", "until", "\\)", "}", "else", "elseif"]);
|
||||
|
||||
function readBracket(stream) {
|
||||
var level = 0;
|
||||
while (stream.eat("=")) ++level;
|
||||
stream.eat("[");
|
||||
return level;
|
||||
}
|
||||
|
||||
function normal(stream, state) {
|
||||
var ch = stream.next();
|
||||
if (ch == "-" && stream.eat("-")) {
|
||||
if (stream.eat("[") && stream.eat("["))
|
||||
return (state.cur = bracketed(readBracket(stream), "comment"))(stream, state);
|
||||
stream.skipToEnd();
|
||||
return "comment";
|
||||
}
|
||||
if (ch == "\"" || ch == "'")
|
||||
return (state.cur = string(ch))(stream, state);
|
||||
if (ch == "[" && /[\[=]/.test(stream.peek()))
|
||||
return (state.cur = bracketed(readBracket(stream), "string"))(stream, state);
|
||||
if (/\d/.test(ch)) {
|
||||
stream.eatWhile(/[\w.%]/);
|
||||
return "number";
|
||||
}
|
||||
if (/[\w_]/.test(ch)) {
|
||||
stream.eatWhile(/[\w\\\-_.]/);
|
||||
return "variable";
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function bracketed(level, style) {
|
||||
return function(stream, state) {
|
||||
var curlev = null, ch;
|
||||
while ((ch = stream.next()) != null) {
|
||||
if (curlev == null) {
|
||||
if (ch == "]") curlev = 0;
|
||||
} else if (ch == "=") {
|
||||
++curlev;
|
||||
} else if (ch == "]" && curlev == level) {
|
||||
state.cur = normal;
|
||||
break;
|
||||
} else {
|
||||
curlev = null;
|
||||
}
|
||||
}
|
||||
return style;
|
||||
};
|
||||
}
|
||||
|
||||
function string(quote) {
|
||||
return function(stream, state) {
|
||||
var escaped = false, ch;
|
||||
while ((ch = stream.next()) != null) {
|
||||
if (ch == quote && !escaped) {
|
||||
break;
|
||||
}
|
||||
escaped = !escaped && ch == "\\";
|
||||
}
|
||||
|
||||
if (!escaped) {
|
||||
state.cur = normal;
|
||||
}
|
||||
return "string";
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
startState: function(basecol) {
|
||||
return {basecol: basecol || 0, indentDepth: 0, cur: normal};
|
||||
},
|
||||
|
||||
token: function(stream, state) {
|
||||
if (stream.eatSpace()) {
|
||||
return null;
|
||||
}
|
||||
var style = state.cur(stream, state);
|
||||
var word = stream.current();
|
||||
if (style == "variable") {
|
||||
if (keywords.test(word)) {
|
||||
style = "keyword";
|
||||
} else if (builtins.test(word)) {
|
||||
style = "builtin";
|
||||
} else if (specials.test(word)) {
|
||||
style = "variable-2";
|
||||
}
|
||||
}
|
||||
if ((style != "comment") && (style != "string")) {
|
||||
if (indentTokens.test(word)) {
|
||||
++state.indentDepth;
|
||||
} else if (dedentTokens.test(word)) {
|
||||
--state.indentDepth;
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
||||
indent: function(state, textAfter) {
|
||||
var closing = dedentPartial.test(textAfter);
|
||||
return state.basecol + indentUnit * (state.indentDepth - (closing ? 1 : 0));
|
||||
},
|
||||
|
||||
electricInput: /^\s*(?:end|until|else|\)|\})$/,
|
||||
lineComment: "--",
|
||||
blockCommentStart: "--[[",
|
||||
blockCommentEnd: "]]"
|
||||
}});
|
||||
CodeMirror.defineMIME("text/x-luau", "luau");
|
||||
});
|
||||
Loading…
Reference in New Issue