parent
d9495f6afb
commit
33fedc9f35
@ -0,0 +1,65 @@
|
|||||||
|
function load(textarea, div) {
|
||||||
|
let lines = textarea.value.split('\n');
|
||||||
|
for (let i = 0; i < lines.length; i++) {
|
||||||
|
let line = lines[i];
|
||||||
|
let elem = formatLine(line);
|
||||||
|
elem.id = 'mdnotes_' + i;
|
||||||
|
div.append(elem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatLine(line) {
|
||||||
|
let normLine = line.trimStart();
|
||||||
|
let styleClass = null;
|
||||||
|
let token = null;
|
||||||
|
if (normLine.match(/####\s/i)) {
|
||||||
|
token = /^(####\s)/i;
|
||||||
|
styleClass = 'h4';
|
||||||
|
} else if (normLine.match(/###\s/i)) {
|
||||||
|
token = /^(###\s)/i;
|
||||||
|
styleClass = 'h3';
|
||||||
|
} else if (normLine.match(/##\s/i)) {
|
||||||
|
token = /^(##\s)/i;
|
||||||
|
styleClass = 'h2';
|
||||||
|
} else if (normLine.match(/#\s/i)) {
|
||||||
|
token = /^(#\s)/i;
|
||||||
|
styleClass = 'h1';
|
||||||
|
} else if (normLine.match(/>>>\s/i)) {
|
||||||
|
token = /^(>>>\s)/i;
|
||||||
|
styleClass = 'bq3';
|
||||||
|
} else if (normLine.match(/>>\s/i)) {
|
||||||
|
token = /^(>>\s)/i;
|
||||||
|
styleClass = 'bq2';
|
||||||
|
} else if (normLine.match(/>\s/i)) {
|
||||||
|
token = /^(>\s)/i;
|
||||||
|
styleClass = 'bq1';
|
||||||
|
} else if (normLine.match(/^[*-]\s/i)) {
|
||||||
|
styleClass = 'ul';
|
||||||
|
} else {
|
||||||
|
styleClass = 'body';
|
||||||
|
}
|
||||||
|
let elem = document.createElement('div');
|
||||||
|
elem.classList.add('mdnotes_line');
|
||||||
|
elem.classList.add(styleClass);
|
||||||
|
normLine = addBold(normLine);
|
||||||
|
normLine = addMono(normLine);
|
||||||
|
if (token != null) {
|
||||||
|
elem.classList.add('hastoken');
|
||||||
|
normLine = normLine.replace(token, '<span class="token">$1</span>');
|
||||||
|
}
|
||||||
|
elem.innerHTML = normLine;
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMono(line) {
|
||||||
|
line = line.replace(/`(.*?)`/ig, '<span class="mono"><span class="token">`</span>$1<span class="token">`</span></span>');
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addBold(line) {
|
||||||
|
line = line.replace(/\*\*([^\s].*?)\*\*/ig, '<span class="bold"><span class="token">**</span>$1<span class="token">**</span></span>');
|
||||||
|
line = line.replace(/__([^\s].*?)__/ig, '<span class="bold"><span class="token">__</span>$1<span class="token">__</span></span>');
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { load, formatLine };
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { getStartPositionInLine, setStartPositionInLine } from './position.js';
|
||||||
|
import { formatLine, load } from './md.js';
|
||||||
|
|
||||||
|
function onedit(e) {
|
||||||
|
let ret = getStartPositionInLine();
|
||||||
|
let line = ret[0];
|
||||||
|
let position = ret[1];
|
||||||
|
|
||||||
|
if (line.innerText == '\n') {
|
||||||
|
line.className = 'mdnotes_line';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let newline = formatLine(line.innerText);
|
||||||
|
line.parentNode.replaceChild(newline, line);
|
||||||
|
setStartPositionInLine(newline, position);
|
||||||
|
}
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
let mdnotesdiv = document.getElementById('mdnotes');
|
||||||
|
mdnotesdiv.addEventListener('input', onedit);
|
||||||
|
|
||||||
|
load(document.getElementById('ta'), mdnotesdiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { onedit };
|
||||||
|
|
||||||
|
init();
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
function getStartPositionInLine() {
|
||||||
|
let selection = window.getSelection();
|
||||||
|
if (selection.rangeCount == 0) {
|
||||||
|
return [null, 0];
|
||||||
|
}
|
||||||
|
let range = selection.getRangeAt(0).cloneRange();
|
||||||
|
let obj = range.startContainer;
|
||||||
|
|
||||||
|
let position = range.startOffset;
|
||||||
|
|
||||||
|
if (obj.nodeName == 'DIV' && obj.classList.contains('mdnotes_line')) {
|
||||||
|
return [obj, position];
|
||||||
|
}
|
||||||
|
|
||||||
|
let line = null;
|
||||||
|
|
||||||
|
while (obj != null) {
|
||||||
|
if (obj.previousSibling != null) {
|
||||||
|
obj = obj.previousSibling;
|
||||||
|
if (obj.innerText != null) {
|
||||||
|
position += obj.innerText.length;
|
||||||
|
} else if (obj.length != null) {
|
||||||
|
position += obj.length;
|
||||||
|
}
|
||||||
|
} else if (obj.parentNode != null && obj.parentNode.classList != null && !obj.parentNode.classList.contains('mdnotes_line')) {
|
||||||
|
obj = obj.parentNode;
|
||||||
|
} else if (obj.parentNode != null && obj.parentNode.classList != null && obj.parentNode.classList.contains('mdnotes_line')) {
|
||||||
|
line = obj.parentNode;
|
||||||
|
obj = null;
|
||||||
|
} else {
|
||||||
|
obj = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [line, position];
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStartPositionInLine(line, position) {
|
||||||
|
setStartPositionInDiv(line, position)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStartPositionInDiv(obj, position) {
|
||||||
|
let temppos = position;
|
||||||
|
if (temppos > obj.innerText.length) {
|
||||||
|
return temppos - obj.innerText.length;
|
||||||
|
}
|
||||||
|
let children = obj.childNodes;
|
||||||
|
for (let i = 0; i < children.length; i++) {
|
||||||
|
let child = children[i];
|
||||||
|
if (child.nodeType == 3) {
|
||||||
|
temppos = setStartPositionInText(child, temppos);
|
||||||
|
} else {
|
||||||
|
temppos = setStartPositionInDiv(child, temppos);
|
||||||
|
}
|
||||||
|
if (temppos == 0) {
|
||||||
|
return temppos;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return temppos;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStartPositionInText(obj, position) {
|
||||||
|
if (position > obj.length) {
|
||||||
|
return position - obj.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
let selection = window.getSelection();
|
||||||
|
selection.removeAllRanges();
|
||||||
|
let range = document.createRange();
|
||||||
|
range.setStart(obj, position);
|
||||||
|
selection.addRange(range);
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getStartPositionInLine, setStartPositionInLine };
|
||||||
Loading…
Reference in new issue