SuperEditor实现光标提前滚动优化方案分析

背景介绍

SuperEditor作为一款富文本编辑器组件，在处理长文档编辑时存在一个用户体验问题：当用户输入内容导致光标接近编辑器视口底部时，编辑器不会立即滚动，而是等到光标完全超出视口范围才开始滚动。这种体验与其他主流编辑器(如Notion)相比显得不够流畅。

问题分析

当前SuperEditor的滚动行为存在以下特点：

1. 仅在光标完全超出视口底部时才触发滚动
2. 滚动行为较为生硬，缺乏平滑过渡
3. 对于新空行的处理不够完善，可能导致滚动位置计算不准确

解决方案探索

通过分析项目代码，我们可以采用以下方法实现提前滚动：

核心实现思路

1. 监听编辑器选区变化事件
2. 计算光标在视口中的相对位置
3. 当光标接近视口底部(但未超出)时触发平滑滚动

关键技术点

// 监听选区变化
_composer.selectionChanges.listen((event) {
  if (event.selection != null) {
    // 获取光标位置矩形
    final rect = documentLayout?.getRectForPosition(
      DocumentPosition(
        nodeId: event.selection!.end.nodeId,
        nodePosition: event.selection!.end.nodePosition,
      ),
    );
    
    // 计算视口相关参数
    final viewportBox = _viewportKey.currentContext!.findRenderObject() as RenderBox;
    final viewportOffset = viewportBox.localToGlobal(Offset.zero);
    final caretBottom = rect != null 
        ? rect.bottom - viewportOffset.dy - _scrollController.offset
        : previousCaretBottom + 21;
    
    // 设置滚动触发阈值
    const scrollTriggerHeight = 26;
    if (viewportHeight - caretBottom < scrollTriggerHeight) {
      // 执行平滑滚动
      _scrollController.animateTo(
        _scrollController.offset + lineHeight,
        duration: const Duration(milliseconds: 200),
        curve: Curves.easeOut,
      );
    }
  }
});

特殊场景处理

对于新空行(rect返回null)的情况，解决方案是：

1. 记录上一次有效的光标位置(previousCaretBottom)
2. 当rect为null时，使用上一次位置加上预估行高(21)作为当前光标位置
3. 确保滚动计算的连续性

优化建议

虽然上述方案能够解决问题，但仍有一些改进空间：

1. 动态行高计算：当前使用固定值21作为行高估算，可以考虑动态获取实际行高
2. 滚动阈值可配置：将scrollTriggerHeight作为可配置参数，适应不同场景需求
3. 性能优化：在高频输入场景下，可能需要添加防抖机制
4. 多平台适配：考虑不同平台下滚动行为的细微差异

实现效果

优化后的编辑器将具有以下特点：

1. 当光标接近视口底部时即开始滚动
2. 滚动过程平滑自然(使用200ms的动画时长和easeOut曲线)
3. 在各种输入场景下(包括新空行)都能保持一致的体验

这种改进显著提升了编辑长文档时的用户体验，使编辑过程更加流畅自然，与其他主流编辑器的行为保持一致。