스포일러가 인라인과 블록을 동시에 가질 수 없다는 생각은 사용자가 알 필요 없는 CSS의 사실에 불과하다고 생각합니다.
배경: HTML은 이를 어떻게 처리하는가?
굵게(Bolding)를 생각해 보겠습니다. 현재 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 사양은 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과 같은 속성이 있을 수 있고, 스포일러를 클릭하면 동일한 이름을 가진 모든 스포일러가 드러나게 될 것입니다. (이것은 속성, 프로퍼티, 또는 세 개의 스포일러를 연결하기 위한 기타 시스템으로 해야 할까요? 저는 모르겠습니다. 원하는 방식으로 하시면 됩니다.)
즉, 다음과 같은 마크다운이 있다고 가정해 보겠습니다:
A B
C
D E
[spoiler]F[/spoiler]
그리고 B, C, D를 선택하여 흐리게 처리(블러)했다고 합시다.
그러면 마크다운은 다음과 같이 보일 것입니다:
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” 속성을 가진 모든 스포일러가 함께 드러나게 됩니다.
따라서 최종 사용자의 관점에서는 인라인 스포일러와 블록 스포일러를 자유롭게 조합할 수 있는 _느낌_을 줄 수 있습니다.