From 790a139fa12904039d049a975a35e5a125b2e5e3 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 12 Oct 2023 14:21:55 +0200 Subject: [PATCH 01/11] 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) { From 67877f74fd815b422c4ee1f68e1a51c8ef164913 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 12 Oct 2023 14:39:24 +0200 Subject: [PATCH 02/11] refactor: unparametrized bold style --- main.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 9e619ae..5abb1c3 100644 --- a/main.js +++ b/main.js @@ -1982,7 +1982,7 @@ function applycolorsonline(line, index, options) if (line.startsWith("#")) { line = line.replace(/(#* )/, "$1"); // to check! - line = "" + line + ""; + line = "" + line + ""; } // bold and italics @@ -1991,7 +1991,7 @@ function applycolorsonline(line, index, options) { temp = line.substring(2); } - temp = temp.replace(/\*\*([^\*]*)\*\*/g, "**$1**"); + temp = temp.replace(/\*\*([^\*]*)\*\*/g, "**$1**"); temp = temp.replace(/\*([^\*]*)\*/g, "*$1*"); if (line.startsWith("* ")) @@ -2108,7 +2108,6 @@ function applycolorsonline(line, index, options) return line; } -var boldstyle = "font-weight: bold;"; function applycolors(currentonly) { if (!settings.colors) From bbb27ee274e493565b3cd6fea1d5db18224a23cc Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 12 Oct 2023 14:39:43 +0200 Subject: [PATCH 03/11] slight refactors --- main.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/main.js b/main.js index 5abb1c3..4be72db 100644 --- a/main.js +++ b/main.js @@ -2137,11 +2137,8 @@ function applycolors(currentonly) 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) { @@ -2150,7 +2147,7 @@ function applycolors(currentonly) } linediv.setAttribute("id", "line" + i); linediv.setAttribute("tag", JSON.stringify(options)); - linediv.innerHTML = line || " "; + linediv.innerHTML = applycolorsonline(lines[i], i, options) || " "; }; // remove remanining @@ -2165,8 +2162,7 @@ function applycolors(currentonly) function editorinput() { - // criteria to improve - // or redraw only after? + // 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(); From 0da00302e011d730a5d24b77a73da9ffc03c0077 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Tue, 17 Oct 2023 14:08:30 +0200 Subject: [PATCH 04/11] added: timestamp and vault in zip name added: current tag in window title --- main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 4be72db..fbccd37 100644 --- a/main.js +++ b/main.js @@ -1102,7 +1102,7 @@ function downloadnotes() zip.generateAsync({type:"blob"}) .then(function(content) { - saveAs(content, "notes.zip"); + saveAs(content, "notes " + timestamp() + " " + currentvault + ".zip"); }); } @@ -2555,7 +2555,7 @@ function mainkeydownhandler() function setwindowtitle() { - document.title = currentnote.title; + document.title = (currenttag ? currenttag + "\\": "") + currentnote.title; } function ontitlechange() From 6a078efc5b890a32eca13180dcb530b37ba4a711 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Tue, 17 Oct 2023 14:09:20 +0200 Subject: [PATCH 05/11] added: current tag by default on new note --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index fbccd37..2e1ce8b 100644 --- a/main.js +++ b/main.js @@ -2803,7 +2803,7 @@ function defaultheaders(title, tags = "") "---", "title: " + title, "date: " + timestamp().substr(0,10), - "tags: " + (tags || ""), + "tags: " + (tags || currenttag || ""), "---", "",""].join("\n"); } From 0dc6adb70e176a29cb98d92e5b1a2dafb1aa46ca Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Tue, 17 Oct 2023 17:11:04 +0200 Subject: [PATCH 06/11] manual report: autocomplete multiple tags --- main.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index 2e1ce8b..e545e49 100644 --- a/main.js +++ b/main.js @@ -2097,11 +2097,13 @@ function applycolorsonline(line, index, options) 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) + ""; - } + var matching = snippets + .filter(s => s.command.startsWith(snippetpart)) + .map(s => s.command.substring(1)); + + line += ""; + line += matching.join().substr(pos - slashpos - 1); + line += ""; } } } From dde40492e294c7a8d62cea9700684238207b6f2c Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 19 Oct 2023 09:15:29 +0200 Subject: [PATCH 07/11] disabled: number highlighting in code block as it breaks html encoding --- main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index 3c5119d..d65ff76 100644 --- a/main.js +++ b/main.js @@ -2041,7 +2041,8 @@ function applycolorsonline(line, index, options) } else if (options.code) { - line = line.replace(/\b(\d+)\b/g, "$1"); + //breaks html escape + //line = line.replace(/\b(\d+)\b/g, "$1"); if (languagekeywords[options.language]) { var keywords = languagekeywords[options.language]; From cbac831768ee53ad73cad73769c2819871a8d8c3 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 19 Oct 2023 12:17:01 +0200 Subject: [PATCH 08/11] ongoing refactor to update colors by line --- main.js | 44 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/main.js b/main.js index d65ff76..cec143d 100644 --- a/main.js +++ b/main.js @@ -1973,17 +1973,46 @@ function rawline(index) return md.value.split("\n")[index]; } -function applycolorsonline(line, index, options) +function applycolorsonline(line, linediv, index, options) { line = escapeHtml(line); + while (linediv.hasChildNodes()) + { + linediv.removeChild(linediv.lastChild); + } + // headings if (line.startsWith("#")) { - line = line.replace(/(#* )/, "$1"); // to check! - line = "" + line + ""; + var level = line.indexOf(" "); + if (level == -1) + { + level = line.length; + } + + var span = document.createElement("span"); + span.setAttribute("style", `font-weight: bold;color:${settings.accentcolor};`); + span.appendChild(document.createTextNode("#".repeat(level))); + linediv.appendChild(span); + + if (level < line.length) + { + var headingtext = line.substring(level); + span = document.createElement("span"); + span.setAttribute("style", "font-weight: bold;"); + span.appendChild(document.createTextNode(headingtext)); + linediv.appendChild(span); + } + return; } + // fallback + //linediv.appendChild(document.createTextNode(line || " ")); + //return; + + /* -----TODO------ */ + // bold and italics var temp = line; if (line.startsWith("* ")) @@ -2107,7 +2136,8 @@ function applycolorsonline(line, index, options) } } } - return line; + + linediv.innerHTML = line || " "; } function applycolors(currentonly) @@ -2130,9 +2160,7 @@ function applycolors(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 || " "; + applycolorsonline(rawline(index), linediv, index, options); } else { @@ -2149,7 +2177,7 @@ function applycolors(currentonly) } linediv.setAttribute("id", "line" + i); linediv.setAttribute("tag", JSON.stringify(options)); - linediv.innerHTML = applycolorsonline(lines[i], i, options) || " "; + applycolorsonline(lines[i], linediv, i, options); }; // remove remanining From 1b0d25a9829af8784145c91c58e34b85c4421541 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 19 Oct 2023 13:50:30 +0200 Subject: [PATCH 09/11] refactor: list markers --- main.js | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/main.js b/main.js index 082e36a..ff006dd 100644 --- a/main.js +++ b/main.js @@ -1997,12 +1997,27 @@ function applycolorsonline(line, linediv, index, options) span.appendChild(document.createTextNode(headingtext)); linediv.appendChild(span); } - return; + } + else if (markerslist.every(marker => + { + if (line.startsWith(marker)) + { + var span = document.createElement("span"); + span.setAttribute("style", `color:${settings.accentcolor};`); + span.appendChild(document.createTextNode(marker.replaceAll("*", settings.bulletrendering))); + linediv.appendChild(span); + linediv.appendChild(document.createTextNode(line.substring(marker.length))); + return false; + } + return true; + })) + { + // fallback + linediv.appendChild(document.createTextNode(line || " ")); } - // fallback - //linediv.appendChild(document.createTextNode(line || " ")); - //return; + + return; /* -----TODO------ */ @@ -2024,14 +2039,7 @@ function applycolorsonline(line, linediv, index, options) line = temp; } - // lists - markerslist.forEach(marker => - { - if (line.startsWith(marker)) - { - line = line.replace(marker, "" + marker.replaceAll("*", settings.bulletrendering) + ""); - } - }); + // md header if (index == 0 && line == "---") From 24046d9f236bedbb839f98e95bf846b5b17e4055 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 19 Oct 2023 14:15:39 +0200 Subject: [PATCH 10/11] Revert "refactor: list markers" This reverts commit 1b0d25a9829af8784145c91c58e34b85c4421541. --- main.js | 32 ++++++++++++-------------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/main.js b/main.js index ff006dd..082e36a 100644 --- a/main.js +++ b/main.js @@ -1997,27 +1997,12 @@ function applycolorsonline(line, linediv, index, options) span.appendChild(document.createTextNode(headingtext)); linediv.appendChild(span); } - } - else if (markerslist.every(marker => - { - if (line.startsWith(marker)) - { - var span = document.createElement("span"); - span.setAttribute("style", `color:${settings.accentcolor};`); - span.appendChild(document.createTextNode(marker.replaceAll("*", settings.bulletrendering))); - linediv.appendChild(span); - linediv.appendChild(document.createTextNode(line.substring(marker.length))); - return false; - } - return true; - })) - { - // fallback - linediv.appendChild(document.createTextNode(line || " ")); + return; } - - return; + // fallback + //linediv.appendChild(document.createTextNode(line || " ")); + //return; /* -----TODO------ */ @@ -2039,7 +2024,14 @@ function applycolorsonline(line, linediv, index, options) line = temp; } - + // lists + markerslist.forEach(marker => + { + if (line.startsWith(marker)) + { + line = line.replace(marker, "" + marker.replaceAll("*", settings.bulletrendering) + ""); + } + }); // md header if (index == 0 && line == "---") From fa2afdeab531c70c0bdcb70240de413976e746a0 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Thu, 19 Oct 2023 14:15:50 +0200 Subject: [PATCH 11/11] Revert "ongoing refactor to update colors by line" This reverts commit cbac831768ee53ad73cad73769c2819871a8d8c3. --- main.js | 44 ++++++++------------------------------------ 1 file changed, 8 insertions(+), 36 deletions(-) diff --git a/main.js b/main.js index 082e36a..df39a3a 100644 --- a/main.js +++ b/main.js @@ -1966,46 +1966,17 @@ function rawline(index) return md.value.split("\n")[index]; } -function applycolorsonline(line, linediv, index, options) +function applycolorsonline(line, index, options) { line = escapeHtml(line); - while (linediv.hasChildNodes()) - { - linediv.removeChild(linediv.lastChild); - } - // headings if (line.startsWith("#")) { - var level = line.indexOf(" "); - if (level == -1) - { - level = line.length; - } - - var span = document.createElement("span"); - span.setAttribute("style", `font-weight: bold;color:${settings.accentcolor};`); - span.appendChild(document.createTextNode("#".repeat(level))); - linediv.appendChild(span); - - if (level < line.length) - { - var headingtext = line.substring(level); - span = document.createElement("span"); - span.setAttribute("style", "font-weight: bold;"); - span.appendChild(document.createTextNode(headingtext)); - linediv.appendChild(span); - } - return; + line = line.replace(/(#* )/, "$1"); // to check! + line = "" + line + ""; } - // fallback - //linediv.appendChild(document.createTextNode(line || " ")); - //return; - - /* -----TODO------ */ - // bold and italics var temp = line; if (line.startsWith("* ")) @@ -2129,8 +2100,7 @@ function applycolorsonline(line, linediv, index, options) } } } - - linediv.innerHTML = line || " "; + return line; } function applycolors(currentonly) @@ -2153,7 +2123,9 @@ function applycolors(currentonly) var index = currentline(); var linediv = document.getElementById("line" + index); options = JSON.parse(linediv.getAttribute("tag")); - applycolorsonline(rawline(index), linediv, index, options); + var line = rawline(index); + line = applycolorsonline(line, index, options); + linediv.innerHTML = line || " "; } else { @@ -2170,7 +2142,7 @@ function applycolors(currentonly) } linediv.setAttribute("id", "line" + i); linediv.setAttribute("tag", JSON.stringify(options)); - applycolorsonline(lines[i], linediv, i, options); + linediv.innerHTML = applycolorsonline(lines[i], i, options) || " "; }; // remove remanining