JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/RubaXa/Sortable/master/Sortable.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>code51</title>
	<link rel="stylesheet" href="w3.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

	<div class="w3-container">
		<h1>code51</h1>

		<textarea class="w3-input" id="commandInput" type="text" placeholder="Digite o cĂłdigo aqui"></textarea>

		<ul id="blockOutput"></ul>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.12.0/js-yaml.min.js"></script>
	<script src="https://unpkg.com/[email protected]/xregexp-all.js"></script>

</body>
</html>

CSS

body {
	background-color: #323232;
	color: white;
}

#commandInput {
	height: 300px;
	resize: none;
	background-color: lightgrey;
	font-family: monospace;
}

#blockOutput, ul {
	color: white;
	list-style-type: none;
}

/* CODE BLOCK STYLES */

.commandBlock {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	padding: 8px 16px !important;
	margin-top: 16px !important;
	border-radius: 4px;
	float: left !important;
	border: 1px solid #0073BB;
	background-color: #1B9DEC;
	background-image: linear-gradient(to bottom, #1DA7EE, #178EE9);
}

.code {display: none}

.editable {
	white-space: nowrap;
	border: 1px solid #DA7C0C;
	background-image: linear-gradient(to bottom, #FAA51A, #F47A20);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	padding: 4px 8px !important;
	border-radius: 4px;
}

.drag {
	float: left !important;
	margin-right: 16px !important;
}

.close {
	float: right !important;
	margin-left: 16px !important;
}

JavaScript

$(document).ready(function() {
	$.get("data.yaml", function(data) {
		convertYamlToJson = jsyaml.load(data);
		masterRegex = [];
		$.each(convertYamlToJson, function(i0) {
			masterRegex.push(this.cmd_regex);
		});
		masterRegex = masterRegex.join("|");
	});
});

$("#commandInput").on("input", function() {
	console.clear();
	$("#blockOutput").html("");
	lines = $("#commandInput").val();

	$.each(convertYamlToJson, function(i) {
		$.each(lines.match(new RegExp(this.cmd_regex, "g")), function(i1) {
			// this = match found anywhere in code
			actualMatch = this;
			console.log("##############################");
			console.log("actualMatch (", i1, ")", actualMatch);

			commandInsideIf = XRegExp.match(
				XRegExp.matchRecursive(lines, "\\{", "\\}", "g"),
				new RegExp(convertYamlToJson[i].cmd_regex), "all"
			);

			console.log("commandInsideIf", commandInsideIf);

			// Outside commands can't match any of the commandInsideIf elements
			$.each(commandInsideIf, function(i0) {
				if (String(this) == actualMatch) {
					console.log("actualMatch", actualMatch, "==", this, "commandInsideIf (", i0, ")");
				}
			});

			if (commandInsideIf.includes(String(actualMatch)) == true) {
				console.log("actualMatch", actualMatch, " is inside if");
			} else if (commandInsideIf.includes(String(actualMatch)) == false) {
				console.log("actualMatch is outside if");

				blockToAppend = $(convertYamlToJson[i].cmd_codeblock);
				cmdRegexEditable = new RegExp(convertYamlToJson[i].cmd_regex_editable);
				getAllEditableFields = cmdRegexEditable.exec(actualMatch);

				$.each($(blockToAppend).find(".block .editable"), function(i2) {
					$(this).text(getAllEditableFields[i2 = i2 + 1]);
				});

				$.each(convertYamlToJson, function(i3) {
					// For each match inside if
					$.each(XRegExp.match(XRegExp.matchRecursive(actualMatch, "\\{", "\\}", "g"), new RegExp(this.cmd_regex), "all"), function(i4) {
						// this = matches inside if
						console.log("Matches inside if",...