我认为“Spoiler”不能同时是内联和块级元素的想法是 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 规范要求 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>
我的建议:链接的 Spoiler
您可以想象以类似的方式渲染多段内联 Spoiler:
<p>A <spoiler>B</spoiler></p>
<p><spoiler>C</spoiler> D</p>
但 Spoiler 与加粗不同,因为 Spoiler 是 交互式 的。当您单击 Spoiler 的 B 部分时,它应该会显示 Spoiler 的 B 和 C 部分;它应该看起来和感觉像“一个 Spoiler”。
我认为处理此问题的方法是在 DOM 表示中支持链接的 Spoiler。也许 <spoiler> 会有一个像 name 这样的属性,当您单击一个 Spoiler 时,它会显示所有具有相同名称的 Spoiler。(这应该通过属性、属性还是其他链接这三个 Spoiler 的系统来完成?我不知道,随便您怎么做。)
所以,假设您有这样的 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 中,当您单击这三个 Spoiler 中的任何一个时,所有具有相同“name”属性的 Spoiler 都会一起显示出来。
因此,从最终用户的角度来看,它会 感觉 像是可以混合搭配内联和块级 Spoiler。