Milkdown编辑器移动端列表项冻结问题分析与解决方案

问题背景

Milkdown作为一款现代化的编辑器框架，在桌面端表现优异，但在移动设备(特别是Android平台)上处理列表项时会出现界面冻结的问题。这个问题主要影响用户在移动设备上创建和管理列表项的操作体验。

问题现象

当用户在移动设备上使用Milkdown编辑器时：

1. 按下回车键无法正常创建新的列表项，而是产生普通换行
2. 经过多次操作尝试后，整个编辑器界面会完全冻结
3. 任务列表的复选框状态管理异常

技术原因分析

经过深入分析，这个问题主要由以下几个技术因素导致：

1. 移动端事件处理差异：移动设备的键盘事件处理与桌面端存在差异，特别是Android系统对Enter键的处理方式不同，导致splitListItemCommand命令无法正常触发。

2. 自定义元素渲染问题：原实现中使用了Atomico的customElements进行渲染，这在移动端环境下可能导致性能问题和渲染异常。

3. 状态同步机制缺陷：列表项的状态(特别是复选框状态)在分割时未能正确同步到新创建的列表项中。

解决方案

核心修复方案

1. 移除customElements依赖：直接使用html().render()方法替代customElements进行渲染，提高移动端兼容性。

2. 增强splitListItemCommand：修改分割列表项命令，确保复选框状态正确复制到新项：

export const splitListItemCommand = $command(
  'SplitListItem',
  (ctx) => () => {
    return function (state, dispatch) {
      let { $from } = state.selection;
      const closestListItem = closestNode($from, (node) => {
        return node.type.name === listItemSchema.type(ctx).name
      })

      const attrs = closestListItem?.attrs?.checked !== null ? {
        checked: false
      } : undefined

      const splitCommand = splitListItem(
        listItemSchema.type(ctx), 
        attrs
      )

      return splitCommand(state, dispatch)
    }
  }
)

3. 添加移动端特殊处理：针对Android平台的特性，增加额外的状态检查逻辑：

const isAfterCheckbox = resolvedPos.nodeBefore?.attrs.checked === true
  || resolvedPos.nodeBefore?.attrs.checked === false

if ( initialNode.textContent === '' 
  && isAfterCheckbox
  && node.attrs.checked !== false
  && Platform.is.android
) {
  setAttr('checked', false)
  node.attrs.checked = false
}

迁移至Vue的解决方案

在后续版本中，项目团队通过将实现迁移到Vue框架，从根本上解决了这个问题。Vue的响应式系统和虚拟DOM机制提供了更好的跨平台兼容性，特别是在移动设备上的表现更为稳定。

最佳实践建议

1. 对于仍在旧版本的用户，建议应用上述补丁代码临时解决问题
2. 对于新项目，推荐使用已修复该问题的Vue实现版本
3. 在开发跨平台编辑器时，应特别注意移动端的事件处理差异
4. 对于复杂的状态管理，建议增加额外的平台检测和容错处理

总结

Milkdown编辑器在移动端的列表项冻结问题是一个典型的跨平台兼容性问题。通过分析我们可以看到，这类问题的解决往往需要从框架选择、事件处理和状态管理等多个角度综合考虑。最终的Vue迁移方案不仅解决了当前问题，还为未来的跨平台开发奠定了更坚实的基础。