editor.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Text-Based Editor Demo</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.16.0/ace.min.js"
		integrity="sha512-4T3GMbqlA/8FAPZRSo/JbV6RNL4s/XkV86vNHzuHPHPeqKJWbV3Sp5KicgK3NwB+bd4KOm1Q6c7O3RNV2o6RPg=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.18.0/ext-language_tools.min.js'
		integrity='sha512-Yfq8006FlU9jvJkQga/htWTCwByd5es+PgocTYX2ztHGyZ9VinDxo7FC+KG7WTbVPnSHz1xcdh+bfzMJ7iq84g=='
		crossorigin='anonymous'></script>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css"
		integrity="sha512-wpPYUAdjBVSE4KJnH1VR1HeZfpl1ub8YT/NKx4PuQ5NmX2tKuGu6U/JRp5y+Y8XG2tV+wKQpNHVUX03MfMFn9Q=="
		crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style type="text/css" media="screen">
		.editor-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			width: 100vw;
		}

		#editor {
			width: 80vw;
			height: 80vh;
		}

		#parse {
			margin-top: 1rem;
			padding: 0.5rem 1rem;
			font-size: 1.5rem;
			border-radius: 0.5rem;
			border: none;
			background-color: #f1f1f1;
			color: #333;
			cursor: pointer;
		}

		#parse:hover {
			background-color: #333;
			color: #f1f1f1;
		}

		#output {
			margin-top: 1rem;
			padding: 0.5rem 1rem;
			font-size: 1.5rem;
			border-radius: 0.5rem;
			border: none;
			background-color: #f1f1f1;
			color: #333;
			cursor: pointer;
		}

		#errors {
			margin-top: 1rem;
			padding: 0.5rem 1rem;
			font-size: 1.5rem;
			border-radius: 0.5rem;
			border: none;
			background-color: #f1f1f1;
			color: #333;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<div class="editor-container">
		<div id="editor"></div>
		<button id="parse">Submit</button>
	</div>
	<div id="output"></div>
	<div id="errors"></div>
	<!-- https://ace.c9.io/#nav=embedding -->
	<script type="module">
		import { CharStream, CommonTokenStream } from 'antlr4';
		import BlockLangLexer from './src/ANTLR4/generated/BlockLangLexer';
		import BlockLangParser from './src/ANTLR4/generated/BlockLangParser';
		import BlockVisitor from './src/scripts/utils/BlockVisitor';


		const editor = ace.edit("editor");
		const parse = document.getElementById("parse");

		ace.define("ace/mode/blocklang_highlight_rules", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text_highlight_rules"], function (require, exports, module) {
			var oop = require("../lib/oop");
			var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;

			var BlockLangHighlightRules = function () {

				var loopStatement = "loop\\s*";
				var actionStatement = "\\b(grab|close|release|open)\\b";
				var moveStatement = "\\b(up|down|left|right)\\b";

				this.$rules = {
					"start": [
						{
							token: "keyword",
							regex: loopStatement,
							next: "loop"
						},
						{
							token: "entity.name.function",
							regex: actionStatement
						},
						{
							token: "support.function",
							regex: moveStatement
						},
						{
							token: "keyword",
							regex: "endloop\\s*"
						}
					],
					"loop": [
						{
							token: "constant.numeric",
							regex: "\\d+",
							next:"start"
						}
					]
				};
			};

			oop.inherits(BlockLangHighlightRules, TextHighlightRules);

			exports.BlockLangHighlightRules = BlockLangHighlightRules;
		});

		ace.define("ace/mode/blocklang", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text", "ace/mode/blocklang_highlight_rules"], function(require, exports, module) {
			var oop = require("../lib/oop");
			var TextMode = require("./text").Mode;
			var BlockLangHighlightRules = require("./blocklang_highlight_rules").BlockLangHighlightRules;

			var Mode = function() {
				this.HighlightRules = BlockLangHighlightRules;
				this.$behaviour = this.$defaultBehaviour;
			};
			oop.inherits(Mode, TextMode);

			(function() {
				this.lineCommentStart = "//";

				this.getNextLineIndent = function(state, line, tab) {
					var indent = this.$getIndent(line);
					var match = line.match(/^\s*(?:loop|endloop)/);
					console.log(match)
					if (match && match[0] === "endloop") {
						indent = indent.substring(tab.length);
					}
					if (match && match[0] === "loop") {
						indent += tab;
					}
					return indent;
				};

				this.$id = "ace/mode/blocklang";
			}).call(Mode.prototype);

			exports.Mode = Mode;
		});
		ace.config.setModuleUrl("ace/mode/blocklang_highlight_rules", "/path/to/blocklang_highlight_rules.js");
		ace.config.setModuleUrl("ace/mode/blocklang", "/path/to/blocklang.js");
		editor.session.setMode("ace/mode/blocklang");
		editor.setOptions({
			enableBasicAutocompletion: [{
				getCompletions: (editor, session, pos, prefix, callback) => {
					callback(null, [
						{ value: 'up', meta: 'move crane up' },
						{ value: 'down', meta: 'move crane down' },
						{ value: 'left', meta: 'move crane left' },
						{ value: 'right', meta: 'move crane right' },
						{ value: 'release', meta: 'release crate' },
						{ value: 'grab', meta: 'grab crate' },
						{ value: 'open', meta: 'release crate' },
						{ value: 'close', meta: 'grab crate' },
						{ value: 'loop ', meta: 'loop N' },
						{ value: 'endloop', meta: 'loop N' }
					]);
				},
			}],

			enableSnippets: true,
			enableLiveAutocompletion: true
		});
		editor.setTheme("ace/theme/monokai");
		console.log(editor);
		editor.setShowInvisibles(true);
		editor.resize();
		editor.setShowPrintMargin(false);
		editor.setFontSize(18);

		// format parse a string parse tree based on the paranthesis
		function formatParseTree(tree) {
			const indentChar = '&nbsp;&nbsp;&nbsp;&nbsp;'; // 2 spaces
			let currentIndent = 0;
			let result = '';
			let isNewLine = true;

			for (let i = 0; i < tree.length; i++) {
				const char = tree[i];
				if (char === '(') {
					currentIndent++;
					isNewLine = false;
					result += '<br>' + indentChar.repeat(currentIndent - 1);
				} else if (char === ')') {
					currentIndent--;
					if (isNewLine) {
						result += '<br>';
						result += indentChar.repeat(currentIndent);
					}

					isNewLine = true;
				}
				result += char;
			}

			return result.trim();
		}
		// https://github.com/antlr/antlr4/blob/master/doc/typescript-target.md
		async function submitCode() {
			const input = editor.getValue();
			const chars = new CharStream(input);
			const lexer = new BlockLangLexer(chars);
			const tokens = new CommonTokenStream(lexer);
			const parser = new BlockLangParser(tokens);
			const error = document.getElementById("errors");
			error.innerHTML = "";
			lexer.removeErrorListeners();
			lexer.addErrorListener({
				syntaxError: (recognizer, offendingSymbol, line, column, msg, e) => {
					const error = document.getElementById("errors");
					error.innerHTML += `Error: ${msg} at line ${line} and column ${column}. <br>`;
				}
			});
			parser.buildParseTrees = true;
			parser.removeErrorListeners();
			parser.addErrorListener({
				syntaxError: (recognizer, offendingSymbol, line, column, msg, e) => {
					const error = document.getElementById("errors");
					error.innerHTML += `Error: ${msg} at line ${line} and column ${column}. <br>`;
				}
			});
			const tree = parser.program();
			// const visitor = new BlockVisitor(document.getElementById("output"));
			// console.log(visitor.visit(tree));
			document.getElementById("output").innerHTML = formatParseTree(tree.toStringTree(null, parser));
			scene.execute(input);
		}
		document.getElementById("parse").addEventListener("click", submitCode);
	</script>
	<noscript>Please enable JavaScript to run this app.</noscript>
</body>

</html>