2つの段落の一部をスポイラー化しても、うまくいきません

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」属性を持つすべてのスポイラーが一緒に表示されます。

したがって、エンドユーザーの観点からは、インラインとブロックのスポイラーを自由に組み合わせることができるように 感じられる でしょう。