Penso che l’idea che uno spoiler non possa essere sia inline che block sia un fatto del CSS di cui l’utente non dovrebbe essere a conoscenza.
Background: Come gestisce l’HTML?
Considera il grassetto. Oggi puoi scriverlo in bbcode di Discourse:
A [b]B
C[/b] D
Oppure puoi scriverlo in HTML:
<!DOCTYPE html>
<html>
<body>
<p>A <strong>B</p>
<p>C</strong> D</p>
</body>
</html>
Viene visualizzato esattamente come ti aspetteresti:
A B
C D
Ma la rappresentazione del DOM appare così:
<p>A <strong>B</strong></p>
<p><strong>C</strong> D</p>
La specifica HTML richiede che accada qualcosa di simile per i collegamenti ipertestuali multi-block. Se scrivi questo in HTML:
<!DOCTYPE html>
<html>
<body>
<p>A <a href="https://example.com.">B</p>
<p>C</a> D</p>
</body>
</html>
La specifica HTML richiede che la rappresentazione del DOM appaia così, con tre collegamenti ipertestuali:
<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>
La mia proposta: Spoiler collegati
Potresti immaginare di visualizzare spoiler inline multi-paragrafo in modo simile:
<p>A <spoiler>B</spoiler></p>
<p><spoiler>C</spoiler> D</p>
Ma gli spoiler sono diversi dal grassetto, perché gli spoiler sono interattivi. Quando fai clic sulla parte B dello spoiler, dovrebbe rivelare sia la parte B che la parte C dello spoiler; dovrebbe apparire e sentirsi come “un unico spoiler”.
Penso che il modo per gestire questo sia supportare spoiler collegati nella rappresentazione del DOM. Forse <spoiler> avrebbe un attributo come name, e quando fai clic su uno spoiler, rivelerebbe tutti gli spoiler con lo stesso nome. (Dovrebbe essere fatto con attributi, proprietà o qualche altro sistema per collegare i tre spoiler? Non lo so, fallo come preferisci.)
Quindi, supponiamo che tu abbia un Markdown come questo:
A B
C
D E
[spoiler]F[/spoiler]
E selezioni B, C e D e li sfocassi.
Il Markdown apparirebbe quindi così:
A [spoiler]B
C
D[/spoiler] E
[spoiler]F[/spoiler]
E il DOM generato apparirebbe così:
<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>
In JS, quando fai clic su uno qualsiasi dei tre spoiler, tutti gli spoiler con lo stesso attributo “name” si rivelerebbero insieme.
Pertanto, dal punto di vista dell’utente finale, sembrerebbe che si potessero mescolare e abbinare spoiler inline e block.