Spoilerizing parts of two paragraphs doesn't work right

Contribute Feature
,
3

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.