Discussion :

[linwan]

Bonjour.

J'ai créé une syntaxe pour générer des listes en HTML plus rapidement qu'en HTML.

La voici (les chiffres en fin de lignes sont juste là pour abréger l'écriture HTML dans le second code, ils ne servent à rien autrement) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
1- Item 1 - liste A ordonnée (1)
-- Sous-item 1 - liste B non-ordonnée (2)
-- Sous-item 2 - liste B non-ordonnée (3)
1--- Sous-sous-item 1 - liste C ordonnée (4)
--- Sous-sous-item 2 - liste C ordonnée (5)
- Item 2 - liste A ordonnée (6)
- Item 3 - liste A ordonnée (7)

Ce qui est censé donner ceci en HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ol>
    <li>1
        <ul>
            <li>2</li>
            <li>3
                <ol>
                    <li>4</li>
                    <li>5</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>6</li>
    <li>7</li>
</ol>

Petite explication :

• quand il y a un 1, on a une liste ordonnée (mais attention, on ne le met que pour le premier élément de cette liste puisqu'une liste ne peut être ordonnée et non-ordonnée à la fois);
• le nombre de tirets indique le niveau d'imbrication de la liste.

J'ai cependant un problème lorsque j'ai une liste de niveau 3 et que le prochain élément appartient à la liste de niveau 1.
J'ai réalisé ce JSFiddle pour y voir plus clair : https://jsfiddle.net/fa2qn54q/
On y voit que l'élément nommé "2" se place deux fois, dont une fois au mauvais endroit.

Quelqu'un peut-il m'aider ?
Merci.

[Beginner.]

Bonjour,

Je n'ai pas encore regardé votre code mais ce que vous voulez faire me fait penser à Emmet (https://emmet.io/), vous connaissez ?

[linwan]

Bonjour.
Je connais un peu. Ce que je veux faire est un peu comme ce que propose le Markdown, Textile ou SkrivML.

[mathieu]

je ne connais pas toute les subtilités de Babel donc voilà un hybride avec du JavaScript préhistorique qui fonctionne et je vous laisse faire l'optimisation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
const
  decoupage = (lines) => {
    let i = 0, l, id, parent,
    decoupage = {
      0 : {
        "type" : "ol",
        "enfants" : [],
      },
    },
    parentParNiveau = {
      1 : 0,
    },
    niveauPrecedent = 0
 
 
    while (i < lines.length) {
      l = lines[i]
      id = i+1
 
      const
      type = l[0] === '-' ? 'ul' : 'ol',
      level = l.split(' ')[0].length - (type === 'ul' ? 0 : 1),
      name = l.substring(level + 1).trim()
 
      if (level !== niveauPrecedent) {
        parent = parentParNiveau[level]
      }
 
      decoupage[parent]["enfants"].push(id)
 
      parentParNiveau[level + 1] = id;
 
      decoupage[id] = {
        "type" : type,
        "texte" : name,
        "enfants" : [],
      }
 
      niveauPrecedent = level
      i++
    }
 
 
    return decoupage
  } 
 
 
let lines = [
  '- A',
  '-- A.1',
  '1--- A.1.a',
  '---- A.1.a.1',
  '---- A.1.a.2',
  '--- A.1.b',
  '- B',
]
 
const res = decoupage(lines) //Objet qui contient le résultat, non formaté en HTML
 
 
// Le code suivant convertit l'objet "res" en HTML (ce code fonctionne bien)
const
  getHTML = id => {
 
    const e = res[id]
    let html = ""
 
    if (e["texte"]) {
      html += e["texte"]
    }
 
    if (e["enfants"]) {
      html += "<" + e["type"] + ">"
 
      for (let idEnfant of e["enfants"]) {
        html += "<li>"
        html += getHTML(idEnfant)
        html += "</li>"
      }
 
      html += "</" + e["type"] + ">"
 
    }
 
    return html
  },
  html = getHTML(0)
 
document.body.innerHTML = html

[linwan]

Merci Mathieu.

JSFiddle semble ne pas comprendre le javascript en version ES6, mais ça reste du javascript.
Merci beaucoup pour cette solution. J'ai juste un petit problème :

Comme le 1 dans votre exemple est sur la ligne A.1.a, cela veut dire que A.1.a est ordonné (avec A.1.b). Or, avec ce code, il se trouve que c'est la liste de niveau 4 qui est ordonnée alors qu'elle ne devrait pas.

Pouvez-vous y voir ?

[mathieu]

Comme le 1 dans votre exemple est sur la ligne A.1.a, cela veut dire que A.1.a est ordonné (avec A.1.b). Or, avec ce code, il se trouve que c'est la liste de niveau 4 qui est ordonnée alors qu'elle ne devrait pas.

c'est un peu bizarre comme fonctionnement puisque ça voudrait dire que s'il y a un "1" c'est le type de l'élément parent qui ordonné
donc vous devriez avoir une de ces 2 configurations :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
pour une liste ordonnée
  '1--- A.1.a',
  '1--- A.1.b',
ou alors pour une liste non ordonnée
  '--- A.1.a',
  '--- A.1.b',

mais avec un "1" sur une seule de ces lignes ce n'est pas logique puisqu'une ligne dit que le parent est ordonné et l'autre dit le contraire.

[Beginner.]

Ce qui est censé donner ceci en HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ol>
    <li>1
        <ul>
            <li>2</li>
            <li>3
                <ol>
                    <li>4</li>
                    <li>5</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>6</li>
    <li>7</li>
</ol>

J'ai regardé certains éditeurs et il ne mettent pas de ul ou ol dans un li, les enfants d'un ol/ul sont des li ou/et des ul/ol...

Pour le rendu de votre exemple j'ai cela :



Mais dans les éditeurs cela correspond à ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol>
      <li>1</li>
      <ul>
        <li>2</li>
        <li>3</li>
        <ol>
          <li>4</li>
          <li>5</li>
        </ol>
      </ul>
      <li>6</li>
      <li>7</li>
</ol>

Je pense que c'est comme ça car ça facilite la gestion (notamment de la tabulation pour "descendre" ou "monter" )...

[linwan]

Beginner : La bonne façon de faire en HTML est de mettre les listes imbriquées dans les "li". Cela permet également aussi, avec un peu de CSS, de numéroter les "ol" de cette façon : 1.1.1, 1.1.2, ...

https://developer.mozilla.org/en-US/...amentals#Lists

Je ne parviens toujours pas à résoudre mon problème. Je vois bien qu'il faut faire quelque chose pour vérifier dans quel niveau on se trouve, mais je n'y arrive pas.

[Beginner.]

Ah bon c'est étrange, ce n'est pas ce que font les éditeurs...
Du coup j'ai fait un code (en partant en partie du votre) qui correspond à ce que font les éditeurs :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
L = l => { //l = line
    const
        type = l[0] === '-' ? 'ul' : 'ol',
        level = l.split(' ')[0].length - (type === 'ul' ? 0 : 1),
        content = l.substring(level + 1).trim()
    return {
        type,
        level,
        content
    };
};
 
 
 
function getList(lines) {
    let res = [],
        tabOlOrUl = [],
        currentLevel,
        precedentLevel,
        currentOlorUl;
 
    addOlorUl(res, lines[0]);
    currentOlorUl = tabOlOrUl[0] = res[0];
 
    for (let i = 1, l = lines.length; i < l; i++) {
 
        currentLevel = lines[i].level;
        precedentLevel = lines[i - 1].level;
 
        if (currentLevel === precedentLevel) { // si true on ajoute un li au parent courant      
 
            currentOlorUl = tabOlOrUl[currentLevel - 1];
            currentOlorUl.children.push({
                type: "li",
                content: lines[i].content,
                children: []
            });
 
        } else if (currentLevel > precedentLevel) { // si true on ajoute un ol/ul à l'enfant du parent courant
 
            currentOlorUl = tabOlOrUl[precedentLevel - 1].children;
            addOlorUl(currentOlorUl, lines[i]);
            tabOlOrUl.push(currentOlorUl[currentOlorUl.length - 1]);
 
        } else { // sinon on remonte au ol/ul correspondant au currentLevel...
 
            currentOlorUl = tabOlOrUl[currentLevel - 1];
            currentOlorUl.children.push({
                type: "li",
                content: lines[i].content,
                children: []
            });
        }
    }
    return res;
}
 
function addOlorUl(parent, elem) { // Ajoute un ol ou un ul...
    parent.push({
        type: elem.type,
        level: elem.level,
        children: [{
            type: "li",
            content: elem.content,
            children: []
        }]
    });
}
 
let lines = [
    '1- 1',
    '-- 1.1',
    '--- 1.1.1',
    '- 2'
].map(l => L(l));
console.log(lines);
console.log(getList(lines));
 
lines = [
    '1- 1',
    '-- 1.1',
    '--- 1.1.1',
    '--- 1.1.2',
    '--- 1.1.3',
    '- 2',
    '- 3'
 
].map(l => L(l));
console.log(lines);
console.log(getList(lines));

Il y a deux tests et ça fonctionne bien apparemment...

[linwan]

Merci pour ce code, mais j''étais déjà parvenu à placer des u/ol sous des li.
Je ne sais pas de quels éditeurs tu parles, mais Stackedit.io ou SkrivML insèrent bien des u/ol dans des li.
J'ai cherché dans le code de Stackedit, mais pas moyen de mettre la main sur le code qui génère les listes

[Beginner.]

Par exemple openOffice et bluegriffon... Mais je viens de voir CKEditor et effectivement il ne fait pas pareil...