refactor: attempt to color only modified line

index.html

@@ -43,7 +43,7 @@
 			</div>
 
 			<div id="notecontent">
-			    <textarea id="md" spellcheck="false" oninput="datachanged()" onkeydown="editorkeydown()" onclick="clickeditor()"></textarea>
+			    <textarea id="md" spellcheck="false" oninput="editorinput()" onkeydown="editorkeydown()" onclick="clickeditor()"></textarea>
 			    <div hidden id="colored"></div>
 			    <div hidden id="preview"></div>
 			</div>

main.js

@@ -315,6 +315,7 @@ var snippets = [
 function seteditorcontent(content, silent)
 {
 	md.value = content;
+	applycolors();
 	if (!silent)
 	{
 		datachanged();
@@ -1234,7 +1235,6 @@ function applystyle()
 	{
 		title.style.color = settings.accentcolor;
 	}
-	applycolors();
 }
 
 function loadsettings()
@@ -1974,23 +1974,8 @@ function rawline(index)
 	return md.value.split("\n")[index];
 }
 
-function applycolors()
+function applycolorsonline(line, index, options)
 {
-	if (!settings.colors)
-	{
-		return;
-	}
-
-	var boldstyle = "font-weight: bold;";
-	var lines = md.value.split("\n");
-	var header = false;
-	var code = false;
-	var comment = false;
-	var language = "";
-	var resulthtml = "";
-	lines.every( (line, i) =>
-	{
-		resulthtml += "<div id='line" + i + "'>";
 	line = escapeHtml(line);
 
 	// headings
@@ -2028,39 +2013,39 @@ function applycolors()
 	});
 
 	// md header
-		if (i == 0 && line == "---")
+	if (index == 0 && line == "---")
 	{
-			header = true;
+		options.header = true;
 	}
-		if (header)
+	if (options.header)
 	{
-			if (i > 0 && line == "---")
+		if (index > 0 && line == "---")
 		{
-				header = false;
+			options.header = false;
 		}
 		line = line || "&nbsp;";
 		line = "<span style='color:lightgrey'>" + line + "</span>";
 	}
 
 	// code blocks
-		if (line.startsWith("```") && !code)
+	if (line.startsWith("```") && !options.code)
 	{
-			code = true;
+		options.code = true;
-			language = line.substring(3);
+		options.language = line.substring(3);
 		line = "<span style='font-family:monospace;color:rgb(70,70,70);'>" + line;
 	}
-		else if (line == "```" && code)
+	else if (line == "```" && options.code)
 	{
-			code = false;
+		options.code = false;
-			language = "";
+		options.language = "";
 		line = line + "</span>";
 	}
-		else if (code)
+	else if (options.code)
 	{
 		line = line.replace(/\b(\d+)\b/g, "<span style='color:" + settings.accentcolor + "'>$1</span>");
-			if (languagekeywords[language])
+		if (languagekeywords[options.language])
 		{
-				var keywords = languagekeywords[language];
+			var keywords = languagekeywords[options.language];
 			keywords.forEach(keyword =>
 			{
 				var r = new RegExp("(" + keyword + ")", "ig");
@@ -2077,15 +2062,15 @@ function applycolors()
 
 	if (line.includes("&lt;!--") && !line.includes("--&gt;"))
 	{
-			comment = true;
+		options.comment = true;
 	}
-		else if (comment)
+	else if (options.comment)
 	{
 		line = line || "&nbsp;";
 		line = "<span style='color:lightgrey'>" + line
 		if (line.includes("--&gt;"))
 		{
-				comment = false;
+			options.comment = false;
 		}
 		else
 		{
@@ -2101,9 +2086,9 @@ function applycolors()
 	}
 
 	// autocomplete snippets
-		if (i == currentline())
+	if (index == currentline())
 	{
-			var raw = rawline(i);
+		var raw = rawline(index);
 		var pos = currentcol();
 		var slashpos = raw.substring(0, pos).lastIndexOf("/");
 		if (slashpos > -1)
@@ -2120,17 +2105,76 @@ function applycolors()
 			}
 		}
 	}
+	return line;
+}
 
-		resulthtml += (line || "&nbsp;") + "</div>";
+var boldstyle = "font-weight: bold;";
+function applycolors(currentonly)
+{
+	if (!settings.colors)
+	{
+		return;
+	}
 
-		return true;
+	var options =
-	});
+	{
-	colored.innerHTML = resulthtml;
+		header: false,
+		code: false,
+		comment: false,
+		language: ""
+	};
+
+	if (currentonly)
+	{
+		var index = currentline();
+		var linediv = document.getElementById("line" + index);
+		options = JSON.parse(linediv.getAttribute("tag"));
+		var line = rawline(index);
+		line = applycolorsonline(line, index, options);
+		linediv.innerHTML = line || "&nbsp;";
+	}
+	else
+	{
+		console.log("redrawing all colored div");
+		var lines = md.value.split("\n");
+		var i = 0;
+		var line = null;
+		for (; i < lines.length; i++)
+		{
+			line = applycolorsonline(lines[i], i, options);
+
+			var linediv = document.getElementById("line" + i);
+			if (!linediv)
+			{
+				linediv = document.createElement("div");
+				colored.appendChild(linediv);
+			}
+			linediv.setAttribute("id", "line" + i);
+			linediv.setAttribute("tag", JSON.stringify(options));
+			linediv.innerHTML = line || "&nbsp;";
+		};
+
+		// remove remanining
+		linediv = document.getElementById("line" + (i++));
+		while (linediv)
+		{
+			colored.removeChild(linediv);
+			linediv = document.getElementById("line" + (i++));
+		}
+	}
+}
+
+function editorinput()
+{
+	// criteria to improve
+	// or redraw only after?
+	var multiline = md.value.substring(md.selectionStart, md.selectionEnd).includes("\n");
+	applycolors(!multiline && event.data && (event.inputType == "insertText" || event.inputType == "deleteContentBackward" || event.inputType == "deleteContentForward"));
+	datachanged();
 }
 
 function datachanged()
 {
-	applycolors();
 	resize();
 
 	saved = false;
@@ -2742,8 +2786,6 @@ function bindfile(note)
 	setwindowtitle();
 
 	seteditorcontent(note.content || "", true);
-	applycolors();
-	preview.innerHTML = md2html(md.value);
 
 	if (changed)
 	{