correction alignement des tableaux

pages/index.md

@@ -37,10 +37,18 @@ La numérotation n'est pas automatique.
 3.1. élément 3.1.
 3.1.1. élément 3.1.1.
 ### Tableaux
-Pour l'instant la syntaxe n'est pas complètement implémentée, il n'est pas possible d'aligner le texte.
+|:Nom:|:Prénom:|:Âge:|
-|Nom|Prénom|Âge|
+|:Sanchez|:Sofia|8 ans:|
-|Sanchez|Sofia|8 ans|
 |Sanchez|Paul|6 ans|
 |Sanchez|Elena|10 ans|
 |Sanchez|Sunga|44 ans|
 |Sanchez|Nicolas|44 ans|
+### **Gras**, *italic* etc.
+|Syntaxe|Résultat|
+|`**gras**`|**gras**|
+|`*italic*`|*italic*|
+|`__gras__`|__gras__|
+|`_italic_`|_italic_|
+|`***gras_italic***`|***gras_italic***|
+|`___gras_italic___`|___gras_italic___|
+|````texte formaté````|`texte formaté`|

static/mdnotes.css

@@ -26,6 +26,7 @@ div#mdnotes {
   padding-left: 3rem;
   padding-right: 3rem;
   padding-bottom: 1rem;
+  margin-bottom: 3rem;
   background-color: #ffffff;
   min-height: 90%;
 }

static/modules/md.js

@@ -1,23 +1,12 @@
 function load(textarea, div) {
     div.innerHTML = '';
     let lines = textarea.value.split('\n');
-    let firsttableline = null;
     for (let i = 0; i < lines.length; i++) {
         let line = lines[i];
         let elem = formatLine(line);
         div.append(elem);
-        if (elem.classList.contains('tablerow')) {
-            if (firsttableline == null) {
-                firsttableline = elem;
-            }
-        } else if (firsttableline != null) {
-            formatTable(firsttableline);
-            firsttableline = null;
-        }
-    }
-    if (firsttableline != null) {
-        formatTable(firsttableline);
     }
+    redrawTables(div, 0);
 }
 
 function save(textarea, div) {
@@ -177,13 +166,14 @@ function formatLine(line) {
 }
 
 function addTableLine(line) {
-    if (line.match(/^\s*\|(\s*.*?\|)*/)) {
+    if (line.match(/^\s*\|:{0,1}(\s*.*?:{0,1}\|:{0,1})*/)) {
         let cpt = 0;
-        let re = /\|/g;
+        let re = /:{0,1}\|:{0,1}/g;
         let match;
         let matches = [];
+        let lengthes = []
         while ((match = re.exec(line)) != null) {
-            matches[cpt] = match.index;
+            matches[cpt] = match;
             if (cpt > 1000) {
                 continue;
             }
@@ -191,25 +181,76 @@ function addTableLine(line) {
         }
         matches = matches.reverse();
         for(let i=0; i<matches.length; i++) {
-            let index = matches[i];
+            let match = matches[i];
             if (i == matches.length - 1) {
                 // premier |
-                line = line.substring(0, index) + '<span class="token">|</span><span class="lefttablespacer"></span>' + line.substring(index+1, line.length);
+                let leftdp = ' data-dp="false"';
-                continue;
+                if (match[0].length == 2) {
-            }
+                    leftdp = ' data-dp="true"';
-            if (i == 0 && index == line.length - 1) {
+                }
+                let line1 = line.substring(0, match.index);
+                let line2 = '<span class="token">' + match[0] + '</span><span class="lefttablespacer"' + leftdp + '></span>'
+                let line3 = line.substring(match.index + match[0].length, line.length);
+                line = line1 + line2 + line3;
+            } else if (i == 0 && match.index == line.length - 1) {
                 // dernier |
-                line = line.substring(0, index) + '<span class="righttablespacer"></span><span class="token">|</span>' + line.substring(index+1, line.length);
+                let rightdp = ' data-dp="false"';
-                continue;
+                if (match[0].charAt(0) == ':') {
+                    rightdp = ' data-dp="true"';
+                }
+                let line1 = line.substring(0, match.index);
+                let line2 = '<span class="righttablespacer"' + rightdp + '></span><span class="token">' + match[0] + '</span>'
+                let line3 = line.substring(match.index + match[0].length, line.length);
+                line = line1 + line2 + line3;
+            } else {
+                let rightdp = ' data-dp="false"';
+                let leftdp = ' data-dp="false"';
+                if (match[0].length == 3) {
+                    rightdp = ' data-dp="true"';
+                    leftdp = ' data-dp="true"';
+                } else if (match[0].length == 2) {
+                    if (match[0].charAt(0) == ':') {
+                        rightdp = ' data-dp="true"';
+                    } else {
+                        leftdp = ' data-dp="true"';
+                    }
+                }
+                let line1 = line.substring(0, match.index);
+                let line2 = '<span class="righttablespacer"' + rightdp + '></span><span class="token">' + match[0] + '</span><span class="lefttablespacer"' + leftdp + '></span>';
+                let line3 = line.substring(match.index + match[0].length, line.length);
+                line = line1 + line2 + line3;
             }
-            line = line.substring(0, index) + '<span class="righttablespacer"></span><span class="token">|</span><span class="lefttablespacer"></span>' + line.substring(index+1, line.length);
         }
         line = '<span class="tablerow">' + line + '</span>';
     }
     return line;
 }
 
-function formatTable(line) {
+function redrawTables(mdnotes, dpwidth = 0) {
+    if (mdnotes.childNodes.length == 0) {
+        return;
+    }
+    let child = mdnotes.childNodes[0];
+    let firsttableline = null;
+    while(child != null) {
+        if (firsttableline == null) {
+            if (child.classList.contains('tablerow')) {
+                firsttableline = child;
+            }
+        } else {
+            if (! child.classList.contains('tablerow')) {
+                formatTable(firsttableline, dpwidth);
+                firsttableline = null;
+            }
+        }
+        child = child.nextSibling;
+    }
+    if (firsttableline != null) {
+        formatTable(firsttableline, dpwidth);
+    }
+}
+
+function formatTable(line, dpwidth = 0) {
     if (! line.classList.contains('tablerow')) {
         return;
     }
@@ -228,12 +269,12 @@ function formatTable(line) {
     }
     firstline.classList.add('firsttablerow');
     lastline.classList.add('lasttablerow');
-    resizeTableCols(firstline, lastline)
+    resizeTableCols(firstline, lastline, dpwidth)
 }
 
-
+function resizeTableCols(firstline, lastline, dpwidth) {
-function resizeTableCols(firstline, lastline) {
     let colsmaxwidth = [];
+    let colsjustif = [];
     let currentline = firstline;
     while (currentline !== null && currentline.classList.contains('tablerow')) {
         let tablerow = currentline.getElementsByClassName('tablerow')[0];
@@ -243,10 +284,20 @@ function resizeTableCols(firstline, lastline) {
         let currentleft;
         for(let i=0; i<childNodes.length; i++) {
             let child = childNodes[i];
-            if (currentleft == null && child.classList != null && child.classList.contains('lefttablespacer')) {
+            if (child.classList != null && child.classList.contains('lefttablespacer')) {
                 currentleft = child;
-            } else {
+            } else if (child.classList != null && child.classList.contains('righttablespacer')) {
-                if (child.classList != null && child.classList.contains('righttablespacer')) {
+                let leftdp = currentleft.getAttribute('data-dp');
+                let rightdp = child.getAttribute('data-dp');
+                if (colsjustif[col] == null) {
+                    if (leftdp == 'true' && rightdp == 'true') {
+                        colsjustif[col] = 'c';
+                    } else if (leftdp == 'true' && rightdp == 'false') {
+                        colsjustif[col] = 'l';
+                    } else if (leftdp == 'false' && rightdp == 'true') {
+                        colsjustif[col] = 'r';
+                    }
+                }
                 if (colsmaxwidth[col] == null || colsmaxwidth[col] < currentwidth) {
                     colsmaxwidth[col] = currentwidth;
                 }
@@ -255,15 +306,20 @@ function resizeTableCols(firstline, lastline) {
                 currentleft = null;
                 currentwidth = 0;
                 col += 1;
-                } else {
+            } else if (currentleft != null) {
                 let width = child.getBoundingClientRect().width;
                 currentwidth += width;
             }
         }
-        }
         currentline = currentline.nextSibling;
     }
 
+    for (let i=0; i<colsmaxwidth.length; i++) {
+        if (colsjustif[i] == null) {
+            colsjustif[i] = 'l';
+        }
+    }
+
     currentline = firstline;
     while (currentline !== null && currentline.classList.contains('tablerow')) {
         let tablerow = currentline.getElementsByClassName('tablerow')[0];
@@ -272,19 +328,43 @@ function resizeTableCols(firstline, lastline) {
         let currentleft;
         for(let i=0; i<childNodes.length; i++) {
             let child = childNodes[i];
-            if (currentleft == null && child.classList != null && child.classList.contains('lefttablespacer')) {
+            if (child.classList != null && child.classList.contains('lefttablespacer')) {
                 currentleft = child;
+            } else if (child.classList != null && child.classList.contains('righttablespacer')) {
+                let lplus = dpwidth;
+                let rplus = dpwidth;
+                let justif = 'l';
+                let leftdp = currentleft.getAttribute('data-dp');
+                let rightdp = child.getAttribute('data-dp');
+                if (leftdp == 'true' && rightdp == 'true') {
+                    justif = 'c';
+                    lplus = 0;
+                    rplus = 0;
+                } else if (leftdp == 'true' && rightdp == 'false') {
+                    justif = 'l';
+                    lplus = 0;
+                } else if (leftdp == 'false' && rightdp == 'true') {
+                    justif = 'r';
+                    rplus = 0;
                 } else {
-                if (child.classList != null && child.classList.contains('righttablespacer')) {
+                    justif = colsjustif[col];
-                    let leftwidth = 10;
+                }
-                    let rightwidth = Math.ceil(colsmaxwidth[col] - child.dataWidth) + 10;
+                colsjustif[col] = justif;
+                let leftwidth = 10 + lplus;
+                let rightwidth = Math.round(colsmaxwidth[col] - child.dataWidth + 10 + rplus);
+                if (justif == 'c') {
+                    leftwidth = Math.round((colsmaxwidth[col] - child.dataWidth) / 2 + 10 + lplus);
+                    rightwidth = Math.round((colsmaxwidth[col] - child.dataWidth) / 2 + 10 + rplus);
+                } else if(justif == 'r') {
+                    leftwidth = Math.round(colsmaxwidth[col] - child.dataWidth + 10 + lplus);
+                    rightwidth = 10 + rplus;
+                }
                 currentleft.style.width = '' + leftwidth + 'px';
                 child.style.width = '' + rightwidth + 'px';
                 currentleft = null;
                 col += 1;
             }
         }
-        }
         currentline = currentline.nextSibling;
     }
 }
@@ -342,4 +422,4 @@ function addItalic(line) {
     return line;
 }
 
-export { load, save, formatLine, formatTable };
+export { load, save, formatLine, formatTable, redrawTables };

static/modules/mdnotes.js

@@ -1,5 +1,5 @@
 import { getStartPositionInLine, setStartPositionInLine } from './position.js';
-import { formatLine, load, save, formatTable } from './md.js';
+import { formatLine, load, save, formatTable, redrawTables } from './md.js';
 
 function timeoutSave() {
     if (window.tos !== null) {
@@ -45,7 +45,7 @@ function onedit(e) {
 
     let newline = formatLine(line.innerText);
     line.parentNode.replaceChild(newline, line);
-    formatTable(newline);
+    formatTable(newline, 5.5);
     setStartPositionInLine(newline, position);
 }
 
@@ -115,6 +115,8 @@ function init(pagename = null) {
     mdnotesdiv.addEventListener('keydown', onkeydown);
     mdnotesdiv.addEventListener('paste', onpaste);
     mdnotesdiv.addEventListener('copy', oncopy);
+    mdnotesdiv.addEventListener('blur', () => {redrawTables(mdnotesdiv);});
+    mdnotesdiv.addEventListener('focus', () => {redrawTables(mdnotesdiv, 5.5);});
     let saveButton = document.getElementById('saveButton');
     saveButton.addEventListener('click', onsave);
     loadButton.addEventListener('click', onload);