CSS
---

#editor { counter-reset: lines; }
#editor div::before { counter-increment: lines;  content: counter(lines, decimal-leading-zero) ". "; }
#source { display: none; }


Javascript
----------

function sourceKeydown(e) {
	if (e.code.substring(0, 3) == "Key" || e.code == "Space" || e.code == "Delete" || e.code == "Backspace") {
		var editedNode = window.getSelection().focusNode;
		if (editedNode.nodeType == 3 && editedNode.nodeValue.indexOf(":") != -1) { //prevent drawing associations too early
			setTimeout(updateGraph, 200);
		}
	}
	if (e.code == "Enter" || e.code == "ArrowUp" || e.code == "ArrowDown") {
		setTimeout(updateGraph, 200);
	}
	return true;
}

function updateGraph() {
	var source = "";
	for (let line of document.getElementById("editor").children) {
		source += line.innerText.replace("\n", "") + "\n";
	}
	document.getElementById("source").value = source;
	DBConcept.render('source', 'mcd', 'mld', 'sql', 'ss', 'enu', 'sgbd');
}


HTML
----

<div id="editor" contenteditable="true" spellcheck="false" onkeydown="return sourceKeydown(event);"><div><br/></div></div>
