finalisation implémentation liaisons du Propro (affiche type liaison) + debug export texte

static/scripts/main.js

@@ -188,8 +188,8 @@ async function getColorisation() {
 					for (h=0; h<outText[i][0][0][0].graph.length; h++) {
 						outputDiv.innerHTML = outputDiv.innerHTML + '<br>';
 					}
-                } else if (outText[i][0][0][0].graph.match(/^‿$/)){
-                    outputDiv.innerHTML = outputDiv.innerHTML + '<span class="liaison '+ outText[i][0][0][0].phon +'">'+ outText[i][0][0][0].graph +'</span>';
+                } else if (outText[i][0][0][0].graph.match(/^‿|-͜$/)){
+                    outputDiv.innerHTML = outputDiv.innerHTML + '<span class="phon '+ outText[i][0][0][0].phon +'" title="'+ outText[i][0][3] +'">'+ outText[i][0][0][0].graph +'</span>';
 					noSpace = true;
                 } else if (outText[i][0][0][0].graph.match(/^(,|\.|…|\)|\]|\}|%|>|»|”|-)$/)) {
 					outputDiv.innerHTML = outputDiv.innerHTML + '<span class="phon_neutre">'+ outText[i][0][0][0].graph +'</span>';
@@ -640,11 +640,12 @@ function getPopUp() {
 	var expLong = "text-decoration: underline;";
 
 	// On récupère la liste des <span>
-    const regexSpan = /<span class="tokens.*?>(.*?<\/span>)<\/span>|(<span class="phon_neutre">.*?<\/span>)|(<span> <\/span>)|(<br>)/gm;
+    const regexSpan = /<span class="tokens.*?>(.*?<\/span>)<\/span>|(<span class="phon_neutre">.*?<\/span>)|(<span> <\/span>)|(<br>)|(<span class="phon phon_.*?" .*?>.*?<\/span>)/gm;
 	// group1: word in colors
 	// group2: punctuation
 	// group3: space
 	// group4: <br>
+    // group5: liaison
 
 	let m;
     while ((m = regexSpan.exec(outputContent)) !== null) {
@@ -653,9 +654,25 @@ function getPopUp() {
         if (m.index === regexSpan.lastIndex) {
             regexSpan.lastIndex++;
         }
-        console.log("group1:",m[1],"group2:",m[2],"group3:",m[3],"group4:",m[4]);
-        if (m[4]) {
-            finalOutput += "<br>"
+        // console.log("group1:",m[1],"group2:",m[2],"group3:",m[3],"group4:",m[4],"group5:",m[5]);
+        if (m[5]) {
+            var newOutputSpan = "<span style='";
+            newOutputSpan += expFonte + expSizeBase + expNoBold;
+            
+            var phonographiesRegex = /<span class="phon (.*?)" .*?>(.*?)<\/span>/;
+			var n = phonographiesRegex.exec(m[5])
+            // COULEURS
+            var phonClass = "";
+            n[1] = n[1].split(" "); // phon + phon_*
+            for (i=0; i<n[1].length; i++) {
+                if (n[1][i].match(/phon_.*/)) phonClass = n[1][i];
+            }
+            if (phonClass != "") newOutputSpan += phon2color(phonClass);
+
+            newOutputSpan += "'>"+n[2]+"</span>";
+            finalOutput += newOutputSpan;
+        } else if (m[4]) {
+            finalOutput += "<br>";
         } else if (m[3]) {
 			finalOutput += '<span style="'+expFonte+expCoulBase+expSizeBase+'"> </span>';
 		} else if (m[2]) {
@@ -664,7 +681,7 @@ function getPopUp() {
 		} else if (m[1]) {	
 			// Dans cette situation on a une suite de span de phono-graphèmes comme <span class="phon phon_au_maj stress1">hou</span><span class="phon phon_arobase_rho schwa">r</span>
 			// On va la transformer en liste de spans pour les traiter une par une
-			const phonographiesRegex = /<span class="phon (.*?)">(.*?)<\/span>/gm;
+			var phonographiesRegex = /<span class="phon (.*?)">(.*?)<\/span>/gm;
 			
 			while ((n = phonographiesRegex.exec(m[1])) !== null) {
 				// This is necessary to avoid infinite loops with zero-width matches
@@ -704,7 +721,7 @@ function getPopUp() {
         }
     }
 
-    console.log("finalOutput :",finalOutput);
+    // console.log("finalOutput :",finalOutput);
     
 	function phon2color(p1){
         if (p1 in bicol2colcol) {