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 ce16058..5204a01 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 @@ -403,11 +404,17 @@ var snippets = [ insert: "• " }, { - command: "//", + command: "/comment", insert: "", cursor: -4 }]; +function seteditorcontent(content) +{ + md.value = content; + applycolors(); +} + function encryptstring(str) { console.log("encrypting..."); @@ -512,9 +519,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(); } }); @@ -522,11 +529,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() @@ -538,10 +545,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 + "'?")) { @@ -608,6 +614,7 @@ function loadtheme(theme) settings[i] = themes[theme][i]; } applystyle(); + applycolors(); resize(); } @@ -728,12 +735,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); @@ -799,7 +816,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); }); } @@ -1026,7 +1043,7 @@ function decryptnote() decryptstring(md.value) .then(decrypted => { - md.value = decrypted; + seteditorcontent(decrypted); resize(); }); } @@ -1332,6 +1349,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() @@ -1692,7 +1714,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(); } @@ -1703,11 +1725,6 @@ function selectlines() md.selectionEnd = range.end; } -function seteditorcontent(content) -{ - md.value = content; -} - function ontopbarclick() { if (title.hidden) @@ -1901,10 +1918,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(); } @@ -2108,8 +2125,117 @@ function save() } } +function escapeHtml(unsafe) { + return unsafe + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } + +var languagekeywords = { + "sql": ["select", "from", "where", "and", "or"], + "js": ["var", "for", "if", "else"] +} + +function applycolors() +{ + if (!settings.colors) + { + return; + } + + var lines = md.value.split("\n"); + var header = false; + var code = false; + var language = ""; + var result = []; + lines.every( (line, i) => + { + line = escapeHtml(line); + + // headings + if (line.startsWith("#")) + { + line = line.replace(/(#* )/, "$1"); // to check! + line = "" + line + ""; + } + + // lists + markerslist.forEach(marker => + { + if (line.startsWith(marker)) + { + line = line.replace(marker, "" + marker + ""); + } + }); + + // md header + if (i == 0 && line == "---") + { + header = true; + } + if (header) + { + if (i > 0 && line == "---") + { + header = false; + } + line = "" + line + ""; + } + + // 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) + { + 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"); + + // bold and italics + line = line.replace(/\*\*([^\*]*)\*\*/g, "**$1**"); + line = line.replace(/\*([^\*]*)\*/g, "*$1*"); + + // comments + line = line.replace(/<\!/g, "<!"); + line = line.replace(/\-\->/g, "-->"); + if (line.startsWith("// ")) + { + line = "" + line + ""; + } + + result.push(line); + + return true; + }); + colored.innerHTML = result.join("
"); +} + function datachanged() { + applycolors(); resize(); saved = false; @@ -2286,7 +2412,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(); @@ -2335,7 +2461,7 @@ function esc(event) else if (networkpage.hidden == false) { networkpage.hidden = true; - md.hidden = false; + toggleeditor(false); } else if (preview.hidden == false) { @@ -2465,7 +2591,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(); } @@ -2510,9 +2636,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) @@ -2565,7 +2691,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) @@ -2618,7 +2744,7 @@ function togglepreviewwithsubs() if (note) { preview.innerHTML = md2html(note.content); - md.hidden = !md.hidden; + toggleeditor(!md.hidden); preview.hidden = !preview.hidden; if (preview.hidden) diff --git a/style.css b/style.css index 2720e1c..18fd594 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-wrap; + top: 0; + left: 0; + z-index: -1; + width: 100%; + word-wrap:break-word; } #network { @@ -94,10 +114,12 @@ 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; } /* authent */