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

refactor: attempt to color only modified line

This commit is contained in:
quenousimporte 2023-10-12 14:21:55 +02:00
parent 37de87fd3a
commit 790a139fa1
2 changed files with 183 additions and 141 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>

128
main.js
View File

@ -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,23 +1974,8 @@ 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
@ -2028,39 +2013,39 @@ 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])
if (languagekeywords[options.language])
{
var keywords = languagekeywords[language];
var keywords = languagekeywords[options.language];
keywords.forEach(keyword =>
{
var r = new RegExp("(" + keyword + ")", "ig");
@ -2077,15 +2062,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
{
@ -2101,9 +2086,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)
@ -2120,17 +2105,76 @@ function applycolors()
}
}
}
return line;
}
resulthtml += (line || "&nbsp;") + "</div>";
var boldstyle = "font-weight: bold;";
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;
var line = null;
for (; i < lines.length; i++)
{
line = applycolorsonline(lines[i], i, options);
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 = line || "&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;
@ -2742,8 +2786,6 @@ function bindfile(note)
setwindowtitle();
seteditorcontent(note.content || "", true);
applycolors();
preview.innerHTML = md2html(md.value);
if (changed)
{