Merge branch 'feat/colors'

This commit is contained in:
quenousimporte 2023-09-28 08:45:51 +02:00
commit 728d58535d
3 changed files with 185 additions and 36 deletions

View File

@ -49,6 +49,7 @@
<div id="notecontent"> <div id="notecontent">
<textarea id="md" spellcheck="false" oninput="datachanged()" onkeydown="editorkeydown()" onclick="clickeditor()"></textarea> <textarea id="md" spellcheck="false" oninput="datachanged()" onkeydown="editorkeydown()" onclick="clickeditor()"></textarea>
<div hidden id="colored"></div>
<div hidden id="preview"></div> <div hidden id="preview"></div>
</div> </div>
</div> </div>

180
main.js
View File

@ -14,7 +14,8 @@ var defaultsettings =
titleinaccentcolor: false, titleinaccentcolor: false,
enablenetwork: false, enablenetwork: false,
titlebydefault: false, titlebydefault: false,
linksinnewtab: true linksinnewtab: true,
colors: true
}; };
//builtin //builtin
@ -403,11 +404,17 @@ var snippets = [
insert: "• " insert: "• "
}, },
{ {
command: "//", command: "/comment",
insert: "<!--\n\n-->", insert: "<!--\n\n-->",
cursor: -4 cursor: -4
}]; }];
function seteditorcontent(content)
{
md.value = content;
applycolors();
}
function encryptstring(str) function encryptstring(str)
{ {
console.log("encrypting..."); console.log("encrypting...");
@ -512,9 +519,9 @@ function createsubnote(suggestedtitle)
content: content content: content
} }
localdata.unshift(newnote); localdata.unshift(newnote);
md.value = md.value.substring(0, range.start) seteditorcontent(md.value.substring(0, range.start)
+ "[[" + title + "]]" + "[[" + title + "]]"
+ md.value.substring(range.end); + md.value.substring(range.end));
datachanged(); datachanged();
} }
}); });
@ -522,11 +529,11 @@ function createsubnote(suggestedtitle)
function comment() function comment()
{ {
md.value = md.value.substring(0, md.selectionStart) seteditorcontent(md.value.substring(0, md.selectionStart)
+ "<!-- " + "<!-- "
+ md.value.substring(md.selectionStart, md.selectionEnd) + md.value.substring(md.selectionStart, md.selectionEnd)
+ " -->" + " -->"
+ md.value.substring(md.selectionEnd); + md.value.substring(md.selectionEnd));
} }
function includesub() function includesub()
@ -538,10 +545,9 @@ function includesub()
if (confirm("Replace [[" + title + "]] by its content?")) if (confirm("Replace [[" + title + "]] by its content?"))
{ {
var subnote = getnote(title); var subnote = getnote(title);
md.value = seteditorcontent(md.value.substring(0, range.start)
md.value.substring(0, range.start)
+ subnote.content + subnote.content
+ md.value.substring(range.end); + md.value.substring(range.end));
if (confirm("Delete '" + title + "'?")) if (confirm("Delete '" + title + "'?"))
{ {
@ -608,6 +614,7 @@ function loadtheme(theme)
settings[i] = themes[theme][i]; settings[i] = themes[theme][i];
} }
applystyle(); applystyle();
applycolors();
resize(); resize();
} }
@ -728,12 +735,22 @@ function connected(note)
return result; return result;
} }
function toggleeditor(hidden)
{
md.hidden = hidden;
if (settings.colors)
{
colored.hidden = hidden;
}
}
function shownotelinks() function shownotelinks()
{ {
if (settings.enablenetwork) if (settings.enablenetwork)
{ {
networkpage.hidden = false; networkpage.hidden = false;
md.hidden = true; toggleeditor(true);
function id(note) function id(note)
{ {
return localdata.indexOf(note); return localdata.indexOf(note);
@ -799,7 +816,7 @@ function shownotelinks()
graph.on("click", function(event) graph.on("click", function(event)
{ {
networkpage.hidden = true; networkpage.hidden = true;
md.hidden = false; toggleeditor(false);
loadnote(nodes.find(n => n.id == event.nodes[0]).label); loadnote(nodes.find(n => n.id == event.nodes[0]).label);
}); });
} }
@ -1026,7 +1043,7 @@ function decryptnote()
decryptstring(md.value) decryptstring(md.value)
.then(decrypted => .then(decrypted =>
{ {
md.value = decrypted; seteditorcontent(decrypted);
resize(); resize();
}); });
} }
@ -1332,6 +1349,11 @@ function loadsettings()
{ {
toggletitle(); toggletitle();
} }
colored.hidden = !settings.colors;
md.style.color = settings.colors ? "transparent" : "inherit";
md.style.background = settings.colors ? "transparent" : "inherit";
applycolors();
} }
function checksaved() function checksaved()
@ -1692,7 +1714,7 @@ function sortselection()
var selection = content.substring(range.start, range.end); var selection = content.substring(range.start, range.end);
var sorted = selection.split("\n").sort().join("\n"); 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(); datachanged();
} }
@ -1703,11 +1725,6 @@ function selectlines()
md.selectionEnd = range.end; md.selectionEnd = range.end;
} }
function seteditorcontent(content)
{
md.value = content;
}
function ontopbarclick() function ontopbarclick()
{ {
if (title.hidden) if (title.hidden)
@ -1901,10 +1918,10 @@ function insert(text, cursoroffset = 0, nbtodelete = 0)
{ {
var pos = md.selectionStart; var pos = md.selectionStart;
var content = md.value; var content = md.value;
md.value = seteditorcontent(
content.substring(0, pos - nbtodelete) content.substring(0, pos - nbtodelete)
+ text + text
+ content.substring(pos); + content.substring(pos));
setpos(pos - nbtodelete + text.length + cursoroffset); setpos(pos - nbtodelete + text.length + cursoroffset);
datachanged(); datachanged();
} }
@ -2108,8 +2125,117 @@ function save()
} }
} }
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
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(/(#* )/, "<span style='color:" + settings.accentcolor + "'>$1</span>"); // to check!
line = "<b>" + line + "</b>";
}
// lists
markerslist.forEach(marker =>
{
if (line.startsWith(marker))
{
line = line.replace(marker, "<span style='color:" + settings.accentcolor + "'>" + marker + "</span>");
}
});
// md header
if (i == 0 && line == "---")
{
header = true;
}
if (header)
{
if (i > 0 && line == "---")
{
header = false;
}
line = "<em><span style='color:lightgrey'>" + line + "</span></em>";
}
// code blocks
if (line.startsWith("```") && !code)
{
code = true;
language = line.substring(3);
line = "<span style='font-family:monospace;color:rgb(70,70,70);'>" + line;
}
else if (line == "```" && code)
{
code = false;
language = "";
line = line + "</span>";
}
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"), "<b>$1</b>");
})
}
}
// internal links
line = line.replace(/(\[\[.*\]\])/g, "<u><span style='cursor:pointer'>$1</span></u>");
// bold and italics
line = line.replace(/\*\*([^\*]*)\*\*/g, "<b>&#42;&#42;$1&#42;&#42;</b>");
line = line.replace(/\*([^\*]*)\*/g, "<em>&#42;$1&#42;</em>");
// comments
line = line.replace(/&lt;\!/g, "<span style='color:lightgrey'>&lt;!");
line = line.replace(/\-\-&gt;/g, "--></span>");
if (line.startsWith("// "))
{
line = "<span style='color:lightgrey'>" + line + "</span>";
}
result.push(line);
return true;
});
colored.innerHTML = result.join("<br>");
}
function datachanged() function datachanged()
{ {
applycolors();
resize(); resize();
saved = false; saved = false;
@ -2286,7 +2412,7 @@ function insertheader()
if (preview.hidden && !md.value.startsWith("---\n")) if (preview.hidden && !md.value.startsWith("---\n"))
{ {
var headers = defaultheaders(currentnote.title); var headers = defaultheaders(currentnote.title);
md.value = headers + md.value; seteditorcontent(headers + md.value);
setpos(27); setpos(27);
} }
resize(); resize();
@ -2335,7 +2461,7 @@ function esc(event)
else if (networkpage.hidden == false) else if (networkpage.hidden == false)
{ {
networkpage.hidden = true; networkpage.hidden = true;
md.hidden = false; toggleeditor(false);
} }
else if (preview.hidden == false) else if (preview.hidden == false)
{ {
@ -2465,7 +2591,7 @@ function backspace(nb)
{ {
var pos = getpos(); var pos = getpos();
var c = md.value; 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); setpos(pos - nb);
datachanged(); datachanged();
} }
@ -2510,9 +2636,9 @@ function editorkeydown()
{ {
newtext = selection.replaceAll("\n", "\n "); newtext = selection.replaceAll("\n", "\n ");
} }
md.value = md.value.substring(0, range.start) seteditorcontent(md.value.substring(0, range.start)
+ newtext + newtext
+ md.value.substring(range.end); + md.value.substring(range.end));
var shift = 0; var shift = 0;
if (newtext.length < selection.length) if (newtext.length < selection.length)
@ -2565,7 +2691,7 @@ function insertautocomplete(selectednote)
function togglepreview() function togglepreview()
{ {
preview.innerHTML = md2html(md.value); preview.innerHTML = md2html(md.value);
md.hidden = !md.hidden; toggleeditor(!md.hidden);
preview.hidden = !preview.hidden; preview.hidden = !preview.hidden;
if (preview.hidden) if (preview.hidden)
@ -2618,7 +2744,7 @@ function togglepreviewwithsubs()
if (note) if (note)
{ {
preview.innerHTML = md2html(note.content); preview.innerHTML = md2html(note.content);
md.hidden = !md.hidden; toggleeditor(!md.hidden);
preview.hidden = !preview.hidden; preview.hidden = !preview.hidden;
if (preview.hidden) if (preview.hidden)

View File

@ -55,6 +55,26 @@ body::-webkit-scrollbar-thumb {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
background-color: 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 { #network {
@ -94,10 +114,12 @@ body::-webkit-scrollbar-thumb {
#searchdialog { #searchdialog {
position: absolute; position: absolute;
top: 0; top: 0;
left: 10%;
background-color: lightgray; background-color: lightgray;
opacity: 1; opacity: 1;
width: 90%; width: 80%;
color: black; color: black;
z-index: 2;
} }
/* authent */ /* authent */