diff --git a/index.html b/index.html
index b2d9435..8462253 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
diff --git a/main.js b/main.js
index 196ba15..df39a3a 100644
--- a/main.js
+++ b/main.js
@@ -314,6 +314,7 @@ var snippets = [
function seteditorcontent(content, silent)
{
md.value = content;
+ applycolors();
if (!silent)
{
datachanged();
@@ -1231,7 +1232,6 @@ function applystyle()
{
title.style.color = settings.accentcolor;
}
- applycolors();
}
function loadsettings()
@@ -1966,166 +1966,205 @@ function rawline(index)
return md.value.split("\n")[index];
}
-function applycolors()
+function applycolorsonline(line, index, options)
+{
+ line = escapeHtml(line);
+
+ // headings
+ if (line.startsWith("#"))
+ {
+ line = line.replace(/(#* )/, "$1"); // to check!
+ line = "" + line + "";
+ }
+
+ // bold and italics
+ var temp = line;
+ if (line.startsWith("* "))
+ {
+ temp = line.substring(2);
+ }
+ temp = temp.replace(/\*\*([^\*]*)\*\*/g, "**$1**");
+ temp = temp.replace(/\*([^\*]*)\*/g, "*$1*");
+
+ if (line.startsWith("* "))
+ {
+ line = "* " + temp;
+ }
+ else
+ {
+ line = temp;
+ }
+
+ // lists
+ markerslist.forEach(marker =>
+ {
+ if (line.startsWith(marker))
+ {
+ line = line.replace(marker, "" + marker.replaceAll("*", settings.bulletrendering) + "");
+ }
+ });
+
+ // md header
+ if (index == 0 && line == "---")
+ {
+ options.header = true;
+ }
+ if (options.header)
+ {
+ if (index > 0 && line == "---")
+ {
+ options.header = false;
+ }
+ line = line || " ";
+ line = "" + line + "";
+ }
+
+ // code blocks
+ if (line.startsWith("```") && !options.code)
+ {
+ options.code = true;
+ options.language = line.substring(3);
+ line = "" + line;
+ }
+ else if (line == "```" && options.code)
+ {
+ options.code = false;
+ options.language = "";
+ line = line + "";
+ }
+ else if (options.code)
+ {
+ //breaks html escape
+ //line = line.replace(/\b(\d+)\b/g, "$1");
+ if (languagekeywords[options.language])
+ {
+ var keywords = languagekeywords[options.language];
+ keywords.forEach(keyword =>
+ {
+ var r = new RegExp("(" + keyword + ")", "ig");
+ line = line.replace(new RegExp("\\b(" + keyword + ")\\b", "ig"), "$1");
+ });
+ }
+ }
+
+ // internal links
+ line = line.replace(/(\[\[.*\]\])/g, "$1");
+
+ // comments
+ line = line.replace(/<\!--(.*)/g, "<!--$1");
+
+ if (line.includes("<!--") && !line.includes("-->"))
+ {
+ options.comment = true;
+ }
+ else if (options.comment)
+ {
+ line = line || " ";
+ line = "" + line
+ if (line.includes("-->"))
+ {
+ options.comment = false;
+ }
+ else
+ {
+ line += "";
+ }
+ }
+
+ line = line.replace(/\-\->/g, "-->");
+
+ if (line.startsWith("// "))
+ {
+ line = "" + line + "";
+ }
+
+ // autocomplete snippets
+ if (index == currentline())
+ {
+ var raw = rawline(index);
+ var pos = currentcol();
+ var slashpos = raw.substring(0, pos).lastIndexOf("/");
+ if (slashpos > -1)
+ {
+ var spacepos = raw.substring(0, pos).lastIndexOf(" ");
+ if (slashpos > spacepos)
+ {
+ var snippetpart = raw.substring(slashpos);
+ var matching = snippets
+ .filter(s => s.command.startsWith(snippetpart))
+ .map(s => s.command.substring(1));
+
+ line += "";
+ line += matching.join().substr(pos - slashpos - 1);
+ line += "";
+ }
+ }
+ }
+ return line;
+}
+
+function applycolors(currentonly)
{
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) =>
+ var options =
{
- resulthtml += "";
- line = escapeHtml(line);
+ header: false,
+ code: false,
+ comment: false,
+ language: ""
+ };
- // headings
- if (line.startsWith("#"))
+ 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 || " ";
+ }
+ else
+ {
+ console.log("redrawing all colored div");
+ var lines = md.value.split("\n");
+ var i = 0;
+ for (; i < lines.length; i++)
{
- line = line.replace(/(#* )/, "$1"); // to check!
- line = "" + line + "";
- }
-
- // bold and italics
- var temp = line;
- if (line.startsWith("* "))
- {
- temp = line.substring(2);
- }
- temp = temp.replace(/\*\*([^\*]*)\*\*/g, "**$1**");
- temp = temp.replace(/\*([^\*]*)\*/g, "*$1*");
-
- if (line.startsWith("* "))
- {
- line = "* " + temp;
- }
- else
- {
- line = temp;
- }
-
- // lists
- markerslist.forEach(marker =>
- {
- if (line.startsWith(marker))
+ var linediv = document.getElementById("line" + i);
+ if (!linediv)
{
- line = line.replace(marker, "" + marker.replaceAll("*", settings.bulletrendering) + "");
+ linediv = document.createElement("div");
+ colored.appendChild(linediv);
}
- });
+ linediv.setAttribute("id", "line" + i);
+ linediv.setAttribute("tag", JSON.stringify(options));
+ linediv.innerHTML = applycolorsonline(lines[i], i, options) || " ";
+ };
- // md header
- if (i == 0 && line == "---")
+ // remove remanining
+ linediv = document.getElementById("line" + (i++));
+ while (linediv)
{
- header = true;
- }
- if (header)
- {
- if (i > 0 && line == "---")
- {
- header = false;
- }
- line = line || " ";
- line = "" + line + "";
+ colored.removeChild(linediv);
+ linediv = document.getElementById("line" + (i++));
}
+ }
+}
- // code blocks
- if (line.startsWith("```") && !code)
- {
- code = true;
- language = line.substring(3);
- line = "" + line;
- }
- else if (line == "```" && code)
- {
- code = false;
- language = "";
- line = line + "";
- }
- else if (code)
- {
- line = line.replace(/\b(\d+)\b/g, "$1");
- if (languagekeywords[language])
- {
- var keywords = languagekeywords[language];
- keywords.forEach(keyword =>
- {
- var r = new RegExp("(" + keyword + ")", "ig");
- line = line.replace(new RegExp("\\b(" + keyword + ")\\b", "ig"), "$1");
- });
- }
- }
-
- // internal links
- line = line.replace(/(\[\[.*\]\])/g, "$1");
-
- // comments
- line = line.replace(/<\!--(.*)/g, "<!--$1");
-
- if (line.includes("<!--") && !line.includes("-->"))
- {
- comment = true;
- }
- else if (comment)
- {
- line = line || " ";
- line = "" + line
- if (line.includes("-->"))
- {
- comment = false;
- }
- else
- {
- line += "";
- }
- }
-
- line = line.replace(/\-\->/g, "-->");
-
- if (line.startsWith("// "))
- {
- line = "" + line + "";
- }
-
- // autocomplete snippets
- if (i == currentline())
- {
- var raw = rawline(i);
- var pos = currentcol();
- var slashpos = raw.substring(0, pos).lastIndexOf("/");
- if (slashpos > -1)
- {
- var spacepos = raw.substring(0, pos).lastIndexOf(" ");
- if (slashpos > spacepos)
- {
- var snippetpart = raw.substring(slashpos);
-
- var matching = snippets
- .filter(s => s.command.startsWith(snippetpart))
- .map(s => s.command.substring(1));
-
- line += "";
- line += matching.join().substr(pos - slashpos - 1);
- line += "";
- }
- }
- }
-
- resulthtml += (line || " ") + "
";
-
- return true;
- });
- colored.innerHTML = resulthtml;
+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;
@@ -2738,8 +2777,6 @@ function bindfile(note)
setwindowtitle();
seteditorcontent(note.content || "", true);
- applycolors();
- preview.innerHTML = md2html(md.value);
if (changed)
{