在Draft.js中编程插入字符时如何实现输入视图的自动右滚动？

基于Draft.js结合styled-components实现的计算器内联输入框存在交互差异：

• 通过键盘手动输入内容时，输入框会自动跟随光标右滚动，行为符合预期
• 点击界面功能按钮（如加号按键），通过编程方式向编辑器插入字符时，编辑器视图不会触发自动右滚动，光标超出可视区域后内容无法自动跟随展示

问题根源 #

Draft.js内置的自动滚动逻辑，仅会在原生输入事件触发selection位置变更时执行；通过代码直接修改EditorState完成文本插入时，不会自动触发对应的滚动监听逻辑，因此不会出现和键盘输入一致的自动滚动效果。

实现方案 #

在完成编程式插入、更新EditorState后，手动控制编辑器容器的滚动位置，让视图对齐到内容最右侧即可匹配预期效果：

1. 给Draft.js编辑器组件绑定ref，拿到编辑器实际渲染的DOM节点
2. 等待DOM完成最新内容的重绘后，将DOM节点的scrollLeft设置为内容的实际总宽度（即DOM节点的scrollWidth属性值），即可让视图自动滚动到最右侧，保证新插入的字符、光标始终处于可视范围

代码示例 #

// 编辑器组件绑定ref
const editorRef = useRef(null)

const handleInsertPlus = () => {
  // 原有插入逻辑：基于当前EditorState，在光标位置插入"+"字符，生成新的state
  const newEditorState = insertTextAtCurrentCursor(editorState, '+')
  setEditorState(newEditorState)

  // 等待浏览器完成DOM重绘后执行滚动逻辑
  requestAnimationFrame(() => {
    const editorDom = editorRef.current?.editor
    if (!editorDom) return
    // 直接将滚动条对齐到内容最右侧
    editorDom.scrollLeft = editorDom.scrollWidth
  })
}

注意：不要跳过requestAnimationFrame直接执行滚动逻辑。由于React的state更新是异步批量处理的，过早读取scrollWidth会拿到插入新字符之前的旧内容宽度，导致滚动位置不准确。

内容的提问来源于stack exchange，提问作者Byron Broughten