在 CodeMirror 5 中实现「保存即格式化」且保持光标位置的正确方式
在 CodeMirror 5 的使用过程中，一个很常见但又容易被忽略的问题是： 在保存时自动格式化代码，会导致光标位置和滚动位置被重置 。其根本原因在于，格式化流程通常会调用 setValue() 重新设置编辑器内容，而 setValue() 的设计行为就是 重建整个文档状态 。
问题本质
setValue() 并不是一次 文本替换 ，而是一次完整的文档重置操作。 这意味着以下状态都会被清空并重新初始化：
- 光标位置
- 滚动位置
- selection 状态
因此，只要在保存阶段执行了格式化并调用 setValue() ，编辑器就会表现为 跳回顶部 。
状态保持的核心思路
从编辑器内部视角来看，问题并不复杂：
在内容被重置之前保存用户的编辑状态，在内容更新之后恢复这些状态。
在实际工程中，最关键、也是最稳定的状态只有两类：
- 光标位置（Cursor）
- 滚动位置（Scroll）
只要这两者被正确恢复，用户的编辑体验在视觉和操作层面都是连续的。
最终采用的实现方式
在格式化执行前，记录当前编辑状态； 在 setValue() 完成后，按原值恢复。
function formatAndKeepPosition(cm, formattedCode) {
const cursor = cm.getCursor()
const scrollInfo = cm.getScrollInfo()
cm.setValue(formattedCode)
cm.setCursor(cursor)
cm.scrollTo(scrollInfo.left, scrollInfo.top)
}这个实现的特点是：
- 不依赖格式化工具的具体实现
- 不关心代码是否发生行数变化
- 与 CodeMirror 5 的内部机制完全一致
- 对性能和复杂度几乎没有额外影响
为什么选择这种方式
从工程角度看，这种方案的价值在于 确定性 。
- 光标位置通过
{ line, ch }精确恢复 - 滚动位置通过像素值恢复，避免视觉跳动
- 不触碰 undo / redo 栈，不引入额外副作用
- 代码量小，可维护性高
相比尝试保留完整文档状态或模拟文本差异更新，这种方式更加符合 CodeMirror 5 的设计模型，也更容易在真实项目中长期使用。
结语
在编辑器类组件中， 状态感知 比 功能实现 更重要 。 自动格式化本身并不复杂，真正影响用户体验的，是是否尊重并恢复用户当前的编辑上下文。在 CodeMirror 5 中，通过在 setValue() 前后显式管理光标与滚动状态，可以在不改变既有架构的前提下，获得稳定、自然的保存即格式化体验。
