Docmost项目中Toggle块内有序列表数字显示问题的分析与修复

问题描述

在Docmost项目中，用户报告了一个关于有序列表在Toggle块中显示异常的问题。当有序列表位于Toggle块内部时，列表编号无法正确显示两位数及以上的数字（即只能显示1-9，而10及以上的数字会被截断）。这个问题在普通块中的有序列表则表现正常。

技术分析

经过开发团队检查，发现问题的根源在于CSS样式设置。具体来说，Toggle块容器的CSS中设置了overflow-x: hidden属性，这导致了列表编号在达到两位数时被隐藏。虽然编号实际上存在于DOM结构中，但由于溢出隐藏的设置，用户无法看到完整的数字。

解决方案

开发团队提出了两种可能的修复方案：

1. 直接移除overflow-x属性：这是最直接的解决方案，通过移除detailsContainer样式中的overflow-x: hidden声明，可以立即解决问题。测试表明这种方法简单有效且未发现明显副作用。

2. 使用::marker伪元素样式：理论上更精确的解决方案是通过li::marker { overflow-x: visible; }来专门控制列表标记的显示。不过在实际测试中，这种方法未能达到预期效果，可能是由于浏览器对::marker伪元素的支持限制。

最终，开发团队采用了第一种方案，即在0.2.10版本中移除了overflow-x: hidden属性，成功修复了这个问题。

技术背景

这个问题涉及到几个前端开发的重要概念：

1. CSS溢出控制：overflow-x属性用于控制元素在水平方向上的内容溢出行为。hidden值会裁剪超出部分而不显示滚动条。

2. 有序列表渲染：浏览器会自动为<ol>元素生成序号，这些序号实际上是通过CSS的::marker伪元素实现的。

3. Toggle块实现：Toggle块通常使用<details>和<summary>HTML元素实现，需要特殊的样式处理来确保内容的正确显示。

经验总结

这个问题的修复过程展示了几个重要的开发原则：

1. 样式隔离：在实现复杂组件时，应该注意样式的作用范围，避免全局样式影响特定组件的表现。

2. 渐进增强：当理想方案（::marker方案）不可行时，可以采用更简单但有效的替代方案。

3. 回归测试：样式修改后需要进行全面测试，确保不会引入新的布局问题。

这个问题虽然看似简单，但涉及到了CSS渲染的核心机制，对于富文本编辑器这类复杂应用的前端开发具有典型意义。