Je pense que l’idée qu’un spoiler ne puisse pas être à la fois en ligne et en bloc est un fait du CSS dont l’utilisateur n’a pas besoin d’être informé.
Contexte : Comment le HTML gère-t-il cela ?
Considérez le gras. Vous pouvez écrire ceci en bbcode Discourse aujourd’hui :
A [b]B
C[/b] D
Ou vous pouvez écrire ceci en HTML :
<!DOCTYPE html>
<html>
<body>
<p>A <strong>B</p>
<p>C</strong> D</p>
</body>
</html>
Cela s’affiche exactement comme vous vous y attendez :
A B
C D
Mais la représentation du DOM ressemble à ceci :
<p>A <strong>B</strong></p>
<p>
<strong> </strong>
<p><strong>C</strong> D</p>
La spécification HTML exige que quelque chose de similaire se produise pour les hyperliens multi-blocs. Si vous écrivez ceci en HTML :
<!DOCTYPE html>
<html>
<body>
<p>A <a href="https://example.com.">B</p>
<p>C</a> D</p>
</body>
</html>
La spécification HTML exige que la représentation du DOM ressemble à ceci, avec trois hyperliens :
<body>
<p>A <a href="https://example.com.">B</a>
</p><a href="https://example.com."> </a>
<p><a href="https://example.com.">C</a> D</p>
</body>
Ma proposition : Spoilers liés
Vous pourriez imaginer rendre les spoilers en ligne multi-paragraphes de manière similaire :
<p>A <spoiler>B</spoiler></p>
<p><spoiler>C</spoiler> D</p>
Mais les spoilers sont différents du gras, car les spoilers sont interactifs. Lorsque vous cliquez sur la partie B du spoiler, elle est censée révéler les parties B et C du spoiler ; elle est censée ressembler et donner l’impression d’être “un seul spoiler”.
Je pense que la façon de gérer cela est de prendre en charge les spoilers liés dans la représentation du DOM. Peut-être que <spoiler> aurait un attribut comme name, et lorsque vous cliquez sur un spoiler, il révélerait tous les spoilers portant le même nom. (Faut-il le faire avec des attributs, des propriétés ou un autre système pour lier les trois spoilers ? Je ne sais pas, faites-le comme vous voulez.)
Alors, supposez que vous ayez du Markdown comme ceci :
A B
C
D E
[spoiler]F[/spoiler]
Et que vous sélectionnez B, C et D et que vous les floutez.
Le Markdown ressemblerait alors à ceci :
A [spoiler]B
C
D[/spoiler] E
[spoiler]F[/spoiler]
Et le DOM généré ressemblerait à ceci :
<p>A <inline-spoiler name="x">B</inline-spoiler></p>
<block-spoiler name="x"><p>C</p></block-spoiler>
<p><inline-spoiler name="x">D</inline-spoiler> E</p>
<block-spoiler name="y"><p>F</p></block-spoiler>
En JS, lorsque vous cliquez sur l’un des trois spoilers, tous les spoilers portant le même attribut “name” se révèlent ensemble.
Ainsi, du point de vue de l’utilisateur final, cela donnerait l’impression que vous pourriez mélanger et assortir des spoilers en ligne et en bloc.
