Creo que la idea de que un spoiler no puede ser a la vez en línea y de bloque es un hecho de CSS del que el usuario no debería tener conocimiento.
Antecedentes: ¿Cómo maneja HTML esto?
Considera la negrita. Hoy puedes escribir esto en bbcode de Discourse:
A [b]B
C[/b] D
O puedes escribir esto en HTML:
<!DOCTYPE html>
<html>
<body>
<p>A <strong>B</p>
<p>C</strong> D</p>
</body>
</html>
Se renderiza exactamente como esperarías:
A B
C D
Pero la representación del DOM se ve así:
<p>A <strong>B</strong></p>
<p><strong> </strong></p>
<p><strong>C</strong> D</p>
La especificación HTML exige que algo similar ocurra con los hipervínculos de varios bloques. Si escribes esto en HTML:
<!DOCTYPE html>
<html>
<body>
<p>A <a href="https://example.com.">B</p>
<p>C</a> D</p>
</body>
</html>
La especificación HTML exige que la representación del DOM se vea así, con tres hipervínculos:
<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>
Mi propuesta: Spoilers enlazados
Podrías imaginar renderizar spoilers de varios párrafos en línea de manera similar:
<p>A <spoiler>B</spoiler></p>
<p><spoiler>C</spoiler> D</p>
Pero los spoilers son diferentes de la negrita, porque los spoilers son interactivos. Cuando haces clic en la parte B del spoiler, se supone que debe revelar tanto la parte B como la parte C del spoiler; se supone que debe verse y sentirse como “un solo spoiler”.
Creo que la forma de manejar esto es admitir spoilers enlazados en la representación del DOM. Quizás <spoiler> tendría un atributo como name, y cuando haces clic en un spoiler, revelaría todos los spoilers con el mismo nombre. (¿Debería hacerse esto con atributos, propiedades o algún otro sistema para enlazar los tres spoilers? No lo sé, hazlo como quieras).
Así que, supón que tienes Markdown como este:
A B
C
D E
[spoiler]F[/spoiler]
Y seleccionas B, C y D y los difuminas.
El Markdown se vería así:
A [spoiler]B
C
D[/spoiler] E
[spoiler]F[/spoiler]
Y el DOM generado se vería así:
<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, cuando haces clic en cualquiera de los tres spoilers, todos los spoilers con el mismo atributo “name” se revelarían juntos.
Por lo tanto, desde la perspectiva del usuario final, parecería que podrías mezclar y combinar spoilers en línea y de bloque.
