CSS の事実として、スポイラーはインラインとブロックの両方にはなれないという考えをユーザーに知らせる必要はないと思います。
背景:HTML はこれをどのように処理しますか?
太字を考えてみましょう。Discourse の bbcode では次のように記述できます。
A [b]B
C[/b] D
または HTML では次のように記述できます。
<!DOCTYPE html>
<html>
<body>
<p>A <strong>B</p>
<p>C</strong> D</p>
</body>
</html>
期待どおりにレンダリングされます。
A B
C D
しかし、DOM の表現は次のようになります。
<p>A <strong>B</strong></p>
<strong> </strong>
<p><strong>C</strong> D</p>
HTML 仕様では、複数ブロックのハイパーリンクについても同様のことが起こるように規定されています。HTML で次のように記述した場合:
<!DOCTYPE html>
<html>
<body>
<p>A <a href="https://example.com.">B</p>
<p>C</a> D</p>
</body>
</html>
HTML 仕様では、_3 つ_のハイパーリンクを持つ DOM 表現になるように規定されています。
<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>
私の提案:リンクされたスポイラー
同様の方法で、複数段落のインライン スポイラーをレンダリングすることを想像できます。
<p>A <spoiler>B</spoiler></p>
<p><spoiler>C</spoiler> D</p>
しかし、スポイラーは太字とは異なります。スポイラーは_インタラクティブ_だからです。スポイラーの B 部分をクリックすると、スポイラーの B と C の両方が表示されるはずです。それは「1 つのスポイラー」のように見え、感じるはずです。
これを処理する方法は、DOM 表現でリンクされたスポイラーをサポートすることだと思います。おそらく <spoiler> には name のような属性があり、スポイラーをクリックすると、同じ名前を持つすべてのスポイラーが表示されるようになります。(これは属性、プロパティ、または 3 つのスポイラーをリンクするための他のシステムで行うべきですか?わかりません、好きなようにしてください。)
たとえば、次のような Markdown があるとします。
A B
C
D E
[spoiler]F[/spoiler]
そして、B、C、D を選択してぼかします。
すると、Markdown は次のようになります。
A [spoiler]B
C
D[/spoiler] E
[spoiler]F[/spoiler]
生成される DOM は次のようになります。
<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>
JS では、3 つのスポイラーのいずれか 1 つをクリックすると、同じ「name」属性を持つすべてのスポイラーが一緒に表示されます。
したがって、エンドユーザーの観点からは、インラインとブロックのスポイラーを自由に組み合わせることができるように 感じられる でしょう。