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