From 790a139fa12904039d049a975a35e5a125b2e5e3 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 12 Oct 2023 14:21:55 +0200 Subject: [PATCH] refactor: attempt to color only modified line --- index.html | 2 +- main.js | 322 ++++++++++++++++++++++++++++++----------------------- 2 files changed, 183 insertions(+), 141 deletions(-) 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 d0bb09d..9e619ae 100644 --- a/main.js +++ b/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,163 +1974,207 @@ 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) + { + 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 snippet = snippets.find(s => s.command.startsWith(snippetpart)); + if (snippet) + { + line += "" + snippet.command.substr(pos - slashpos) + ""; + } + } + } + } + return line; +} + +var boldstyle = "font-weight: bold;"; +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; + var line = null; + for (; i < lines.length; i++) { - line = line.replace(/(#* )/, "$1"); // to check! - line = "" + line + ""; - } + line = applycolorsonline(lines[i], i, options); - // 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 = line || " "; + }; - // 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 snippet = snippets.find(s => s.command.startsWith(snippetpart)); - if (snippet) - { - line += "" + snippet.command.substr(pos - slashpos) + ""; - } - } - } - } - - 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; @@ -2742,8 +2786,6 @@ function bindfile(note) setwindowtitle(); seteditorcontent(note.content || "", true); - applycolors(); - preview.innerHTML = md2html(md.value); if (changed) {