Спойлеризация частей двух абзацев работает некорректно

Внести вклад Функция
,
3

Я считаю, что идея о том, что спойлер не может быть одновременно строчным и блочным, является фактом CSS, о котором пользователю не нужно знать.

Предыстория: как с этим работает HTML?

Рассмотрим выделение жирным шрифтом. Сегодня в bbcode Discourse можно написать так:

A [b]B

C[/b] D

Или так в HTML:

<!DOCTYPE html>
<html>
<body>
<p>A <strong>B</strong></p>

<p>C</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</a></p>

<p>C</p>
</body>
</html>

Спецификация HTML требует, чтобы представление в 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; это должно выглядеть и ощущаться как «один спойлер».

Я думаю, что решение заключается в поддержке связанных спойлеров в представлении DOM. Возможно, у тега <spoiler> будет атрибут, например name, и при клике на спойлер будут раскрываться все спойлеры с тем же именем. (Должно ли это реализовываться через атрибуты, свойства или какую-либо другую систему связывания трёх спойлеров? Не знаю, делайте как хотите.)

Итак, предположим, у вас есть 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 при клике на любой из трёх спойлеров все спойлеры с тем же атрибутом «name» раскроются одновременно.

Таким образом, с точки зрения конечного пользователя это будет ощущаться так, будто можно комбинировать строчные и блочные спойлеры.