Milkdown编辑器空节点保留问题解析与技术实现方案

问题背景

Milkdown作为一款基于ProseMirror的现代化Markdown编辑器，在处理空行节点时存在一个典型问题：当用户输入多个连续换行符时，编辑器无法在重新加载时保持原始的空行结构。例如用户输入包含三个空行的内容：

第一行


第二行

在编辑后重新加载时，会丢失部分空行变为：

第一行

第二行

技术原理分析

该问题的核心在于ProseMirror的文档模型处理机制。Milkdown底层使用ProseMirror构建文档树时，会默认合并相邻的空段落节点。这种行为源于ProseMirror的设计哲学——保持文档结构的简洁性。

在Markdown语法规范中，连续的空行本应生成多个<p></p>标签，但ProseMirror的schema会将这些空段落节点优化合并。这种优化在大多数场景下是合理的，但对于需要精确保留空白格式的场景（如诗歌、代码排版等）就会产生问题。

解决方案演进

开发团队最初提出了两种技术路线：

1. 空段落转行标记方案
   将空段落节点转换为特殊标记（如<!--linebreak-->），在解析时再转换回空段落。这种方案需要修改解析器和序列化器，可能影响现有内容兼容性。

2. 预处理修正方案
   在内容加载前通过正则表达式预处理，确保空行数量符合预期。这种方案侵入性较小，但需要开发者自行实现预处理逻辑。

最终实现的方案采用了HTML换行标签<br />作为中间态，这既符合CommonMark规范，又能保持跨平台一致性。但实际应用中需要注意：

• 需要启用html插件支持
• 可能需要对输出内容进行后处理
• 在禁用HTML的渲染环境中需要特殊处理

最佳实践建议

对于不同场景的开发者，建议采用以下方案：

1. 需要严格保留空白格式
   启用官方提供的preserve-empty-nodes插件，并配合HTML支持：

import { preserveEmptyNodes } from '@milkdown/plugin-preserve-empty-nodes';

Editor.make()
  .use(preserveEmptyNodes)
  // ...其他配置

2. 需要兼容非HTML环境
   在编辑器初始化前进行预处理：

function preprocess(content) {
  return content.replace(/\n{3,}/g, '\n\n');
}

3. 样式一致性方案
   通过CSS控制段落间距，而非依赖空行：

.prose p {
  margin-bottom: 1em;
}

经验总结

这个案例揭示了编辑器设计中内容模型与呈现效果之间的微妙关系。开发者需要注意：

• 编辑器内部模型与最终渲染可能存在差异
• 用户界面样式会影响内容编辑方式
• 跨平台内容一致性需要特别设计

对于复杂的内容编辑场景，建议在项目初期就明确空白处理策略，并通过端到端测试验证内容往返一致性。Milkdown的这种设计取舍实际上反映了现代编辑器在"所见即所得"与"语义准确性"之间的平衡艺术。