Acho que a ideia de que um spoiler não pode ser inline e de bloco ao mesmo tempo é um fato do CSS do qual o usuário não precisa ser informado.
Contexto: Como o HTML lida com isso?
Considere o negrito. Você pode escrever isso em bbcode do Discourse hoje:
A [b]B
C[/b] D
Ou você pode escrever isso em HTML:
<!DOCTYPE html>
<html>
<body>
<p>A <strong>B</p>
<p>C</strong> D</p>
</body>
</html>
Ele é renderizado exatamente como você esperaria:
A B
C D
Mas a representação do DOM se parece com isto:
<p>A <strong>B</strong></p>
<strong> </strong>
<p><strong>C</strong> D</p>
A especificação HTML exige que algo semelhante aconteça para hiperlinks de vários blocos. Se você escrever isso em HTML:
<!DOCTYPE html>
<html>
<body>
<p>A <a href="https://example.com.">B</p>
<p>C</a> D</p>
</body>
</html>
A especificação HTML exige que a representação do DOM se pareça com isto, com três hiperlinks:
<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>
Minha proposta: Spoilers vinculados
Você poderia imaginar renderizar spoilers inline de vários parágrafos de forma semelhante:
<p>A <spoiler>B</spoiler></p>
<p><spoiler>C</spoiler> D</p>
Mas os spoilers são diferentes do negrito, porque os spoilers são interativos. Quando você clica na parte B do spoiler, ele deve revelar as partes B e C do spoiler; ele deve parecer e se sentir como “um spoiler”.
Acho que a maneira de lidar com isso é suportar spoilers vinculados na representação do DOM. Talvez <spoiler> tivesse um atributo como name, e quando você clicasse em um spoiler, ele revelaria todos os spoilers com o mesmo nome. (Isso deve ser feito com atributos, propriedades ou algum outro sistema para vincular os três spoilers? Não sei, faça do jeito que quiser.)
Então, suponha que você tenha Markdown como este:
A B
C
D E
[spoiler]F[/spoiler]
E você seleciona B, C e D e os desfoca.
O Markdown ficaria assim:
A [spoiler]B
C
D[/spoiler] E
[spoiler]F[/spoiler]
E o DOM gerado ficaria assim:
<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>
Em JS, quando você clica em um dos três spoilers, todos os spoilers com o mesmo atributo “name” se revelariam juntos.
Assim, da perspectiva do usuário final, pareceria que você poderia misturar e combinar spoilers inline e de bloco.