I think the idea that a spoiler can’t be both inline and block is a fact of CSS that the user shouldn’t need to be made aware of.
Background: How does HTML handle it?
Consider bolding. You can write this in Discourse bbcode today:
A [b]B
C[/b] D
Or you can write this in HTML:
<!DOCTYPE html>
<html>
<body>
<p>A <strong>B</p>
<p>C</strong> D</p>
</body>
</html>
It renders exactly the way you’d expect it to render:
A B
C D
But the DOM representation looks like this:
<p>A <strong>B</strong></p>
<strong> </strong>
<p><strong>C</strong> D</p>
The HTML spec calls for something similar to happen for multi-block hyperlinks. If you write this in HTML:
<!DOCTYPE html>
<html>
<body>
<p>A <a href="https://example.com.">B</p>
<p>C</a> D</p>
</body>
</html>
The HTML spec calls for the DOM representation to look like this, with three hyperlinks:
<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>
My proposal: Linked spoilers
You could imagine rendering multi-paragraph inline spoilers in a similar way:
<p>A <spoiler>B</spoiler></p>
<p><spoiler>C</spoiler> D</p>
But spoilers are different from bold, because spoilers are interactive. When you click on the B part of the spoiler, it’s supposed to reveal both the B and the C part of the spoiler; it’s supposed to look and feel like “one spoiler.”
I think the way to handle this is to support linked spoilers in the DOM representation. Perhaps <spoiler> would have an attribute like name, and when you click on a spoiler, it would reveal all spoilers with the same name. (Should this be done with attributes, properties, or some other system for linking the three spoilers? I dunno, do it any way you like.)
So, suppose you’ve got Markdown like this:
A B
C
D E
[spoiler]F[/spoiler]
And you select B, C, and D and blur them.
The Markdown would then look like this:
A [spoiler]B
C
D[/spoiler] E
[spoiler]F[/spoiler]
And the generated DOM would look like this:
<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, when you click on any one of the three spoilers, all spoilers with the same “name” attribute would reveal themselves together.
Thus, from the end-user’s perspective it would feel like you could mix’n’match inline and block spoilers.
