ajout des liens

pull/1/head
Nicolas Sanchez 3 years ago
parent 33fedc9f35
commit 33a8555e82

@ -7,6 +7,15 @@ body {
margin: 0; margin: 0;
} }
textarea#ta {
display: none;
width: 100%;
height: 10rem;
padding-left: 3rem;
padding-right: 3rem;
background-color: #aaddff;
}
div#mdnotes { div#mdnotes {
padding-top: 1rem; padding-top: 1rem;
padding-left: 3rem; padding-left: 3rem;
@ -45,7 +54,6 @@ div#mdnotes div.h4 {
} }
div#mdnotes div.bq1 { div#mdnotes div.bq1 {
font-style: italic;
padding-top: 0.3rem; padding-top: 0.3rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
padding-left: .9rem; padding-left: .9rem;
@ -54,7 +62,6 @@ div#mdnotes div.bq1 {
} }
div#mdnotes div.bq2 { div#mdnotes div.bq2 {
font-style: italic;
padding-top: 0.3rem; padding-top: 0.3rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
padding-left: .6rem; padding-left: .6rem;
@ -63,7 +70,6 @@ div#mdnotes div.bq2 {
} }
div#mdnotes div.bq3 { div#mdnotes div.bq3 {
font-style: italic;
padding-top: 0.3rem; padding-top: 0.3rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
padding-left: .3rem; padding-left: .3rem;
@ -71,7 +77,6 @@ div#mdnotes div.bq3 {
border-left: .9rem solid #6688bb; border-left: .9rem solid #6688bb;
} }
div#mdnotes div.ul { div#mdnotes div.ul {
padding-left: 1rem; padding-left: 1rem;
} }

@ -1,4 +1,5 @@
function load(textarea, div) { function load(textarea, div) {
div.innerHTML = '';
let lines = textarea.value.split('\n'); let lines = textarea.value.split('\n');
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
let line = lines[i]; let line = lines[i];
@ -8,6 +9,15 @@ function load(textarea, div) {
} }
} }
function save(textarea, div) {
let lines = div.children;
let text = '';
for (let i=0; i<lines.length; i++) {
text += lines[i].innerText + '\n';
}
textarea.value = text;
}
function formatLine(line) { function formatLine(line) {
let normLine = line.trimStart(); let normLine = line.trimStart();
let styleClass = null; let styleClass = null;
@ -41,6 +51,7 @@ function formatLine(line) {
let elem = document.createElement('div'); let elem = document.createElement('div');
elem.classList.add('mdnotes_line'); elem.classList.add('mdnotes_line');
elem.classList.add(styleClass); elem.classList.add(styleClass);
normLine = addLink(normLine);
normLine = addBold(normLine); normLine = addBold(normLine);
normLine = addMono(normLine); normLine = addMono(normLine);
if (token != null) { if (token != null) {
@ -56,10 +67,15 @@ function addMono(line) {
return line; return line;
} }
function addLink(line) {
line = line.replace(/(\[(.*?)\]\((.*?)\))/ig, '<span class="token">[</span><a class="link" href="$3">$2</a><span class="token">]($3)</span>');
return line;
}
function addBold(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>');
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; return line;
} }
export { load, formatLine }; export { load, save, formatLine };

@ -1,5 +1,22 @@
import { getStartPositionInLine, setStartPositionInLine } from './position.js'; import { getStartPositionInLine, setStartPositionInLine } from './position.js';
import { formatLine, load } from './md.js'; import { formatLine, load, save } from './md.js';
function ontextarea(e) {
let ta = document.getElementById('ta');
if (ta.style.display == 'none') {
ta.style.display = 'inline';
} else {
ta.style.display = 'none';
}
}
function onsave(e) {
save(document.getElementById('ta'), document.getElementById('mdnotes'));
}
function onload(e) {
load(document.getElementById('ta'), document.getElementById('mdnotes'));
}
function onedit(e) { function onedit(e) {
let ret = getStartPositionInLine(); let ret = getStartPositionInLine();
@ -19,10 +36,12 @@ function onedit(e) {
function init() { function init() {
let mdnotesdiv = document.getElementById('mdnotes'); let mdnotesdiv = document.getElementById('mdnotes');
mdnotesdiv.addEventListener('input', onedit); mdnotesdiv.addEventListener('input', onedit);
let saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', onsave);
loadButton.addEventListener('click', onload);
taButton.addEventListener('click', ontextarea);
load(document.getElementById('ta'), mdnotesdiv); onload();
} }
export { onedit };
init(); init();

@ -11,6 +11,7 @@
<link rel="stylesheet" href="static/mdnotes.css"> <link rel="stylesheet" href="static/mdnotes.css">
</head> </head>
<body> <body>
<div><button id="saveButton">Save</button><button id="loadButton">Load</button><button id="taButton">Textarea</button></div>
<textarea id="ta" class="mdnotes" style="display: none;"> <textarea id="ta" class="mdnotes" style="display: none;">
# Titre 1 # Titre 1
Un petit texte Un petit texte

Loading…
Cancel
Save