quenousimporte
/
notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'refactor/byline'

This commit is contained in:
quenousimporte 2023-10-19 14:16:50 +02:00
parent 6d8fb2eed7 fa2afdeab5
commit e8cc0f6c3e
2 changed files with 182 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

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

131
main.js
View File

@ -314,6 +314,7 @@ var snippets = [
function seteditorcontent(content, silent)
{
md.value = content;
applycolors();
if (!silent)
{
datachanged();
@ -1231,7 +1232,6 @@ function applystyle()
{
title.style.color = settings.accentcolor;
}
applycolors();
}
function loadsettings()
@ -1966,30 +1966,15 @@ function rawline(index)
return md.value.split("\n")[index];
}
function applycolors()
function applycolorsonline(line, index, options)
{
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) =>
{
resulthtml += "<div id='line" + i + "'>";
line = escapeHtml(line);
// headings
if (line.startsWith("#"))
{
line = line.replace(/(#* )/, "<span style='color:" + settings.accentcolor + "'>$1</span>"); // to check!
line = "<span style='" + boldstyle + "'>" + line + "</span>";
line = "<span style='font-weight: bold;'>" + line + "</span>";
}
// bold and italics
@ -1998,7 +1983,7 @@ function applycolors()
{
temp = line.substring(2);
}
temp = temp.replace(/\*\*([^\*]*)\*\*/g, "<span style='" + boldstyle + "'>&#42;&#42;$1&#42;&#42;</span>");
temp = temp.replace(/\*\*([^\*]*)\*\*/g, "<span style='font-weight: bold;'>&#42;&#42;$1&#42;&#42;</span>");
temp = temp.replace(/\*([^\*]*)\*/g, "<em>&#42;$1&#42;</em>");
if (line.startsWith("* "))
@ -2020,39 +2005,40 @@ function applycolors()
});
// md header
if (i == 0 && line == "---")
if (index == 0 && line == "---")
{
header = true;
options.header = true;
}
if (header)
if (options.header)
{
if (i > 0 && line == "---")
if (index > 0 && line == "---")
{
header = false;
options.header = false;
}
line = line || "&nbsp;";
line = "<span style='color:lightgrey'>" + line + "</span>";
}
// code blocks
if (line.startsWith("```") && !code)
if (line.startsWith("```") && !options.code)
{
code = true;
language = line.substring(3);
options.code = true;
options.language = line.substring(3);
line = "<span style='font-family:monospace;color:rgb(70,70,70);'>" + line;
}
else if (line == "```" && code)
else if (line == "```" && options.code)
{
code = false;
language = "";
options.code = false;
options.language = "";
line = line + "</span>";
}
else if (code)
else if (options.code)
{
line = line.replace(/\b(\d+)\b/g, "<span style='color:" + settings.accentcolor + "'>$1</span>");
if (languagekeywords[language])
//breaks html escape
//line = line.replace(/\b(\d+)\b/g, "<span style='color:" + settings.accentcolor + "'>$1</span>");
if (languagekeywords[options.language])
{
var keywords = languagekeywords[language];
var keywords = languagekeywords[options.language];
keywords.forEach(keyword =>
{
var r = new RegExp("(" + keyword + ")", "ig");
@ -2069,15 +2055,15 @@ function applycolors()
if (line.includes("&lt;!--") && !line.includes("--&gt;"))
{
comment = true;
options.comment = true;
}
else if (comment)
else if (options.comment)
{
line = line || "&nbsp;";
line = "<span style='color:lightgrey'>" + line
if (line.includes("--&gt;"))
{
comment = false;
options.comment = false;
}
else
{
@ -2093,9 +2079,9 @@ function applycolors()
}
// autocomplete snippets
if (i == currentline())
if (index == currentline())
{
var raw = rawline(i);
var raw = rawline(index);
var pos = currentcol();
var slashpos = raw.substring(0, pos).lastIndexOf("/");
if (slashpos > -1)
@ -2104,7 +2090,6 @@ function applycolors()
if (slashpos > spacepos)
{
var snippetpart = raw.substring(slashpos);
var matching = snippets
.filter(s => s.command.startsWith(snippetpart))
.map(s => s.command.substring(1));
@ -2115,17 +2100,71 @@ function applycolors()
}
}
}
return line;
}
resulthtml += (line || "&nbsp;") + "</div>";
function applycolors(currentonly)
{
if (!settings.colors)
{
return;
}
return true;
});
colored.innerHTML = resulthtml;
var options =
{
header: false,
code: false,
comment: false,
language: ""
};
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 || "&nbsp;";
}
else
{
console.log("redrawing all colored div");
var lines = md.value.split("\n");
var i = 0;
for (; i < lines.length; i++)
{
var linediv = document.getElementById("line" + i);
if (!linediv)
{
linediv = document.createElement("div");
colored.appendChild(linediv);
}
linediv.setAttribute("id", "line" + i);
linediv.setAttribute("tag", JSON.stringify(options));
linediv.innerHTML = applycolorsonline(lines[i], i, options) || "&nbsp;";
};
// remove remanining
linediv = document.getElementById("line" + (i++));
while (linediv)
{
colored.removeChild(linediv);
linediv = document.getElementById("line" + (i++));
}
}
}
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;
@ -2738,8 +2777,6 @@ function bindfile(note)
setwindowtitle();
seteditorcontent(note.content || "", true);
applycolors();
preview.innerHTML = md2html(md.value);
if (changed)
{