From c84c300f44d43d4aea0bbbbd219b8bf98f92583d Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Sat, 23 Sep 2023 09:02:02 +0200 Subject: [PATCH 01/14] added: md syntax highlight --- index.html | 1 + main.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++------ style.css | 20 ++++++++++++++ 3 files changed, 89 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 59d9963..d485775 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,7 @@
+
diff --git a/main.js b/main.js index d736b6c..32fc338 100644 --- a/main.js +++ b/main.js @@ -14,7 +14,8 @@ var defaultsettings = titleinaccentcolor: false, enablenetwork: false, titlebydefault: false, - linksinnewtab: true + linksinnewtab: true, + colors: true }; //builtin @@ -1246,6 +1247,11 @@ function loadsettings() { toggletitle(); } + + colored.hidden = !settings.colors; + md.style.color = settings.colors ? "transparent" : "inherit"; + md.style.background = settings.colors ? "transparent" : "inherit"; + applycolors(); } function checksaved() @@ -1617,11 +1623,6 @@ function selectlines() md.selectionEnd = range.end; } -function seteditorcontent(content) -{ - md.value = content; -} - function ontopbarclick() { if (title.hidden) @@ -2025,8 +2026,66 @@ function save() } } +function applycolors() +{ + if (!settings.colors) + { + return; + } + + var lines = md.value.split("\n"); + header = false; + code = false; + var result = []; + lines.every( (line, i) => + { + if (line.startsWith("#")) + { + line = line.replace(/(#*)/g, "$1"); + line = "" + line + ""; + } + if (line.startsWith("* ")) + { + line = line.replace(/(\* )/g, "$1"); + } + + if (i == 0 && line == "---") + { + header = true; + } + if (header) + { + if (i > 0 && line == "---") + { + header = false; + } + line = "" + line + ""; + } + + if (line == "```" && !code) + { + code = true; + line = "
" + line; + } + if (line == "```" && code) + { + code = false; + line = line + "
"; + } + + line = line.replace(/(\[\[.*\]\])/g, "$1"); + line = line.replace(/(\*\*.*\*\*)/g, "$1"); + line = line.replace(/(\*.*\*)/g, "$1"); + result.push(line); + + return true; + }); + colored.innerHTML = result.join("
"); +} + function datachanged() { + applycolors(); resize(); saved = false; @@ -2193,7 +2252,7 @@ function restore() { if (confirm('restore "' + currentnote.title + '"?')) { - seteditorcontent(backup); + md.value = backup; datachanged(); } } @@ -2527,7 +2586,7 @@ function bindfile(note) title.value = note.title; setwindowtitle(); - seteditorcontent(note.content || ""); + md.value = note.content || ""; preview.innerHTML = md2html(md.value); if (changed) @@ -2543,6 +2602,7 @@ function bindfile(note) } setpos(note.pos || 0); + applycolors(); } function defaultheaders(title, tags = "") diff --git a/style.css b/style.css index 2720e1c..7e273bc 100644 --- a/style.css +++ b/style.css @@ -55,6 +55,26 @@ body::-webkit-scrollbar-thumb { font-size: inherit; line-height: inherit; background-color: inherit; + + /* coloring */ + position: absolute; + top: 0; + left: 0; + padding: 0; +} + +#notecontent { + position: relative; +} + +#colored { + position: absolute; + white-space: pre; + top: 0; + left: 0; + z-index: -1; + width: 100%; + text-wrap: inherit; } #network { From 5d5456c5ac256a0cecb033e3eba4f1a741c1b911 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Sat, 23 Sep 2023 09:07:24 +0200 Subject: [PATCH 02/14] fixed: word wrap in colored div for firefox --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index 7e273bc..cf49c2d 100644 --- a/style.css +++ b/style.css @@ -75,6 +75,7 @@ body::-webkit-scrollbar-thumb { z-index: -1; width: 100%; text-wrap: inherit; + white-space: pre-wrap; } #network { From 88e1a7c60f04d0fa48cb4234a80fcc8f9221b214 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Sat, 23 Sep 2023 22:51:59 +0200 Subject: [PATCH 03/14] fixed: menu below colors added: md comments in colors --- main.js | 14 ++++++++++++++ style.css | 1 + 2 files changed, 15 insertions(+) diff --git a/main.js b/main.js index 32fc338..e035664 100644 --- a/main.js +++ b/main.js @@ -2026,6 +2026,15 @@ function save() } } +function escapeHtml(unsafe) { + return unsafe + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } + function applycolors() { if (!settings.colors) @@ -2039,6 +2048,7 @@ function applycolors() var result = []; lines.every( (line, i) => { + line = escapeHtml(line); if (line.startsWith("#")) { line = line.replace(/(#*)/g, "$1"); @@ -2076,6 +2086,10 @@ function applycolors() line = line.replace(/(\[\[.*\]\])/g, "$1"); line = line.replace(/(\*\*.*\*\*)/g, "$1"); line = line.replace(/(\*.*\*)/g, "$1"); + + line = line.replace(/<\!/g, "<!"); + line = line.replace(/\-\->/g, "-->"); + result.push(line); return true; diff --git a/style.css b/style.css index cf49c2d..11004e7 100644 --- a/style.css +++ b/style.css @@ -119,6 +119,7 @@ body::-webkit-scrollbar-thumb { opacity: 1; width: 90%; color: black; + z-index: 2; } /* authent */ From dc5053edf3a139d3e24986533e811974106cbd7e Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Sat, 23 Sep 2023 23:09:09 +0200 Subject: [PATCH 04/14] fixed: handle bool and int params --- main.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 241aebd..f91fde9 100644 --- a/main.js +++ b/main.js @@ -946,9 +946,22 @@ function changesetting() .then(setting => { var name = setting.split(":").shift(); - if (settings[name]) + if (typeof settings[name] != "undefined") { - settings[name] = prompt(name, settings[name]); + var value = prompt(name, settings[name]); + if (!isNaN(parseInt(value))) + { + value = parseInt(value) + } + else if (value === "false") + { + value = false; + } + else if (value == "true") + { + value = true; + } + settings[name] = value; savesettings(); loadsettings(); } From 8930b7cbbdfadb5de6fff6c1dbcdeff74e34caf0 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Sun, 24 Sep 2023 15:19:39 +0200 Subject: [PATCH 05/14] fix: change setting with type --- main.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/main.js b/main.js index f91fde9..b298935 100644 --- a/main.js +++ b/main.js @@ -946,20 +946,18 @@ function changesetting() .then(setting => { var name = setting.split(":").shift(); - if (typeof settings[name] != "undefined") + var value = settings[name]; + var type = typeof value; + if (type != "undefined") { - var value = prompt(name, settings[name]); - if (!isNaN(parseInt(value))) + value = prompt(name, value); + if (type == "number") { - value = parseInt(value) + value = parseInt(value); } - else if (value === "false") + else if (type == "boolean") { - value = false; - } - else if (value == "true") - { - value = true; + value = value === "true"; } settings[name] = value; savesettings(); From 8c224d49d3f0ecd5fd51656ad9414b34db24a7e0 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Sun, 24 Sep 2023 21:54:12 +0200 Subject: [PATCH 06/14] fixed: apply colors when selecting theme fixed: hide colors when hidding editor changed: md header in italics --- main.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/main.js b/main.js index b298935..2ed81bd 100644 --- a/main.js +++ b/main.js @@ -605,6 +605,7 @@ function loadtheme(theme) settings[i] = themes[theme][i]; } applystyle(); + applycolors(); resize(); } @@ -725,12 +726,22 @@ function connected(note) return result; } +function toggleeditor(hidden) +{ + md.hidden = hidden; + + if (settings.colors) + { + colored.hidden = hidden; + } +} + function shownotelinks() { if (settings.enablenetwork) { networkpage.hidden = false; - md.hidden = true; + toggleeditor(true); function id(note) { return localdata.indexOf(note); @@ -796,7 +807,7 @@ function shownotelinks() graph.on("click", function(event) { networkpage.hidden = true; - md.hidden = false; + toggleeditor(false); loadnote(nodes.find(n => n.id == event.nodes[0]).label); }); } @@ -2099,7 +2110,7 @@ function applycolors() { header = false; } - line = "" + line + ""; + line = "" + line + ""; } if (line == "```" && !code) @@ -2355,7 +2366,7 @@ function esc(event) else if (networkpage.hidden == false) { networkpage.hidden = true; - md.hidden = false; + toggleeditor(false); } else if (preview.hidden == false) { @@ -2557,7 +2568,7 @@ function insertautocomplete(selectednote) function togglepreview() { preview.innerHTML = md2html(md.value); - md.hidden = !md.hidden; + toggleeditor(!md.hidden); preview.hidden = !preview.hidden; if (preview.hidden) @@ -2610,7 +2621,7 @@ function togglepreviewwithsubs() if (note) { preview.innerHTML = md2html(note.content); - md.hidden = !md.hidden; + toggleeditor(!md.hidden); preview.hidden = !preview.hidden; if (preview.hidden) From 763de412a584a9c877ce12aa325929bea0aeae4f Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Sun, 24 Sep 2023 22:00:20 +0200 Subject: [PATCH 07/14] fix: update colors each time editor content changes --- main.js | 56 ++++++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/main.js b/main.js index 2ed81bd..5b2a62e 100644 --- a/main.js +++ b/main.js @@ -405,6 +405,12 @@ var snippets = [ cursor: -4 }]; +function seteditorcontent(content) +{ + md.value = content; + applycolors(); +} + function encryptstring(str) { console.log("encrypting..."); @@ -509,9 +515,9 @@ function createsubnote(suggestedtitle) content: content } localdata.unshift(newnote); - md.value = md.value.substring(0, range.start) - + "[[" + title + "]]" - + md.value.substring(range.end); + seteditorcontent(md.value.substring(0, range.start) + + "[[" + title + "]]" + + md.value.substring(range.end)); datachanged(); } }); @@ -519,11 +525,11 @@ function createsubnote(suggestedtitle) function comment() { - md.value = md.value.substring(0, md.selectionStart) - + "" - + md.value.substring(md.selectionEnd); + seteditorcontent(md.value.substring(0, md.selectionStart) + + "" + + md.value.substring(md.selectionEnd)); } function includesub() @@ -535,10 +541,9 @@ function includesub() if (confirm("Replace [[" + title + "]] by its content?")) { var subnote = getnote(title); - md.value = - md.value.substring(0, range.start) - + subnote.content - + md.value.substring(range.end); + seteditorcontent(md.value.substring(0, range.start) + + subnote.content + + md.value.substring(range.end)); if (confirm("Delete '" + title + "'?")) { @@ -982,7 +987,7 @@ function decryptnote() decryptstring(md.value) .then(decrypted => { - md.value = decrypted; + seteditorcontent(decrypted); resize(); }); } @@ -1653,7 +1658,7 @@ function sortselection() var selection = content.substring(range.start, range.end); var sorted = selection.split("\n").sort().join("\n"); - md.value = content.substring(0, range.start) + sorted + content.substring(range.end); + seteditorcontent(content.substring(0, range.start) + sorted + content.substring(range.end)); datachanged(); } @@ -1853,10 +1858,10 @@ function insert(text, cursoroffset = 0, nbtodelete = 0) { var pos = md.selectionStart; var content = md.value; - md.value = - content.substring(0, pos - nbtodelete) - + text - + content.substring(pos); + seteditorcontent( + content.substring(0, pos - nbtodelete) + + text + + content.substring(pos)); setpos(pos - nbtodelete + text.length + cursoroffset); datachanged(); } @@ -2307,7 +2312,7 @@ function restore() { if (confirm('restore "' + currentnote.title + '"?')) { - md.value = backup; + seteditorcontent(backup); datachanged(); } } @@ -2317,7 +2322,7 @@ function insertheader() if (preview.hidden && !md.value.startsWith("---\n")) { var headers = defaultheaders(currentnote.title); - md.value = headers + md.value; + seteditorcontent(headers + md.value); setpos(27); } resize(); @@ -2468,7 +2473,7 @@ function backspace(nb) { var pos = getpos(); var c = md.value; - md.value = c.substring(0, pos - nb) + c.substring(pos); + seteditorcontent(c.substring(0, pos - nb) + c.substring(pos)); setpos(pos - nb); datachanged(); } @@ -2513,9 +2518,9 @@ function editorkeydown() { newtext = selection.replaceAll("\n", "\n "); } - md.value = md.value.substring(0, range.start) - + newtext - + md.value.substring(range.end); + seteditorcontent(md.value.substring(0, range.start) + + newtext + + md.value.substring(range.end)); var shift = 0; if (newtext.length < selection.length) @@ -2641,7 +2646,7 @@ function bindfile(note) title.value = note.title; setwindowtitle(); - md.value = note.content || ""; + seteditorcontent(note.content || ""); preview.innerHTML = md2html(md.value); if (changed) @@ -2657,7 +2662,6 @@ function bindfile(note) } setpos(note.pos || 0); - applycolors(); } function defaultheaders(title, tags = "") From 34a7ccfbbdcb3482ddebf5c6924e56dabb2a252e Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Mon, 25 Sep 2023 09:32:37 +0200 Subject: [PATCH 08/14] fix(colors): improve headings added(colors): caret lists --- main.js | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/main.js b/main.js index 5b2a62e..d53c7d8 100644 --- a/main.js +++ b/main.js @@ -2095,16 +2095,26 @@ function applycolors() lines.every( (line, i) => { line = escapeHtml(line); + + // headings if (line.startsWith("#")) { - line = line.replace(/(#*)/g, "$1"); - line = "" + line + ""; + line = line.replace(/(#* )/, "$1"); // to check! + line = "" + line + ""; } + + // lists if (line.startsWith("* ")) { line = line.replace(/(\* )/g, "$1"); } + else if (line.startsWith("- ")) + { + line = line.replace(/(\- )/g, "$1"); + } + // todo: use markerslist + // md header if (i == 0 && line == "---") { header = true; @@ -2118,9 +2128,11 @@ function applycolors() line = "" + line + ""; } - if (line == "```" && !code) + // code blocks + if (line.startsWith("```") && !code) { code = true; + //lg = line.substring(3); line = "
" + line; } if (line == "```" && code) @@ -2128,11 +2140,22 @@ function applycolors() code = false; line = line + "
"; } + /*else if (code) + { + line = line.replace(/(select)/ig, "$1"); + line = line.replace(/(from)/ig, "$1"); + line = line.replace(/(where)/ig, "$1"); + /// todo: keywords by language. whole word only. use a loop. etc. + }*/ + // internal links line = line.replace(/(\[\[.*\]\])/g, "$1"); + + // bold and italics line = line.replace(/(\*\*.*\*\*)/g, "$1"); line = line.replace(/(\*.*\*)/g, "$1"); + // comments line = line.replace(/<\!/g, "<!"); line = line.replace(/\-\->/g, "-->"); From b73d152aeb145e5cc4ea44dfb5c26dfabfa83b4a Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Mon, 25 Sep 2023 12:05:34 +0200 Subject: [PATCH 09/14] fix(colors): bold and italics improve(colors): consider all list markers --- main.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/main.js b/main.js index d53c7d8..3fcef62 100644 --- a/main.js +++ b/main.js @@ -2104,15 +2104,13 @@ function applycolors() } // lists - if (line.startsWith("* ")) + markerslist.forEach(marker => { - line = line.replace(/(\* )/g, "$1"); - } - else if (line.startsWith("- ")) - { - line = line.replace(/(\- )/g, "$1"); - } - // todo: use markerslist + if (line.startsWith(marker)) + { + line = line.replace(marker, "" + marker + ""); + } + }); // md header if (i == 0 && line == "---") @@ -2153,7 +2151,7 @@ function applycolors() // bold and italics line = line.replace(/(\*\*.*\*\*)/g, "$1"); - line = line.replace(/(\*.*\*)/g, "$1"); + line = line.replace(/(^\*\*.*\*)/g, "$1"); // comments line = line.replace(/<\!/g, "<!"); From e890b9bd0f7aed1c4b1a167d3e8c0f8da37f8806 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Mon, 25 Sep 2023 13:22:22 +0200 Subject: [PATCH 10/14] added(colors): basic support for syntax highlight in code blocks --- main.js | 42 +++++++++++++++++++++++++++++------------- 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/main.js b/main.js index 3fcef62..b95f75f 100644 --- a/main.js +++ b/main.js @@ -400,7 +400,7 @@ var snippets = [ insert: "• " }, { - command: "//", + command: "/comment", insert: "", cursor: -4 }]; @@ -2081,6 +2081,11 @@ function escapeHtml(unsafe) { .replace(/'/g, "'"); } +var languagekeywords = { + "sql": ["select", "from", "where", "and", "or"], + "js": ["var", "for", "if", "else"] +} + function applycolors() { if (!settings.colors) @@ -2089,8 +2094,9 @@ function applycolors() } var lines = md.value.split("\n"); - header = false; - code = false; + var header = false; + var code = false; + var language = ""; var result = []; lines.every( (line, i) => { @@ -2130,21 +2136,27 @@ function applycolors() if (line.startsWith("```") && !code) { code = true; - //lg = line.substring(3); - line = "
" + line; + language = line.substring(3); + line = "" + line; } - if (line == "```" && code) + else if (line == "```" && code) { code = false; - line = line + "
"; + language = ""; + line = line + ""; } - /*else if (code) + else if (code) { - line = line.replace(/(select)/ig, "$1"); - line = line.replace(/(from)/ig, "$1"); - line = line.replace(/(where)/ig, "$1"); - /// todo: keywords by language. whole word only. use a loop. etc. - }*/ + 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"); @@ -2156,6 +2168,10 @@ function applycolors() // comments line = line.replace(/<\!/g, "<!"); line = line.replace(/\-\->/g, "-->"); + if (line.startsWith("// ")) + { + line = "" + line + ""; + } result.push(line); From 105ff9fa043bfdac1c23219544c88ce172805ef0 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Mon, 25 Sep 2023 14:25:55 +0200 Subject: [PATCH 11/14] fix(color): break word if needed (to be on par with textarea) --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 11004e7..ece7687 100644 --- a/style.css +++ b/style.css @@ -75,7 +75,7 @@ body::-webkit-scrollbar-thumb { z-index: -1; width: 100%; text-wrap: inherit; - white-space: pre-wrap; + word-wrap:break-word; } #network { From 24cabb6ce32ee2d33d37ca360c1dc653d1bed540 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Wed, 27 Sep 2023 21:15:57 +0200 Subject: [PATCH 12/14] fix: word wrap on firefox --- style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/style.css b/style.css index ece7687..467fe13 100644 --- a/style.css +++ b/style.css @@ -69,12 +69,11 @@ body::-webkit-scrollbar-thumb { #colored { position: absolute; - white-space: pre; + white-space: pre-wrap; top: 0; left: 0; z-index: -1; width: 100%; - text-wrap: inherit; word-wrap:break-word; } From 9dabe899f3ce2cb929519b208d861c34397780d7 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Wed, 27 Sep 2023 22:21:28 +0200 Subject: [PATCH 13/14] fix: bold and italics on same line --- main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.js b/main.js index 5436ac7..5204a01 100644 --- a/main.js +++ b/main.js @@ -2215,8 +2215,8 @@ function applycolors() line = line.replace(/(\[\[.*\]\])/g, "$1"); // bold and italics - line = line.replace(/(\*\*.*\*\*)/g, "$1"); - line = line.replace(/(^\*\*.*\*)/g, "$1"); + line = line.replace(/\*\*([^\*]*)\*\*/g, "**$1**"); + line = line.replace(/\*([^\*]*)\*/g, "*$1*"); // comments line = line.replace(/<\!/g, "<!"); From 765691337bf7542c9be425608cd0ff69d1f04d77 Mon Sep 17 00:00:00 2001 From: quenousimporte Date: Wed, 27 Sep 2023 22:21:38 +0200 Subject: [PATCH 14/14] fix: center search dialog --- style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 467fe13..18fd594 100644 --- a/style.css +++ b/style.css @@ -114,9 +114,10 @@ body::-webkit-scrollbar-thumb { #searchdialog { position: absolute; top: 0; + left: 10%; background-color: lightgray; opacity: 1; - width: 90%; + width: 80%; color: black; z-index: 2; }