Lexical编辑器：如何在onChange时读取状态差异而非完整状态？

你完全可以直接获取编辑器变更对应的具体action，不用每次全量扫描状态。Lexical提供了registerUpdateListener方法，能拿到包含本次变更所有操作的actions数组，直接从中提取你需要的信息即可。

实现示例 #

import { LexicalEditor, EditorUpdate } from 'lexical';

// 编辑器初始化后注册更新监听
editor.registerUpdateListener((update: EditorUpdate) => {
  const { actions } = update;
  
  // 遍历本次变更的所有操作action
  actions.forEach(action => {
    // 检测插入特定字符的场景
    if (action.type === 'insert-text') {
      const { text, selection } = action;
      if (text === 'X') {
        console.log(`在位置 ${selection.anchor.offset} 插入了字符 X`);
      }
    }

    // 其他操作类型的处理示例
    if (action.type === 'delete') {
      const { range } = action;
      console.log(`从位置 ${range.start} 到 ${range.end} 执行了删除操作`);
    }
  });
});

关键说明 #

• 相比OnChangePlugin仅提供新旧状态，registerUpdateListener的actions字段直接记录了触发变更的原始操作，比如插入文本、删除、格式修改等，能大幅降低状态处理的开销。
• 不同类型的action结构不同，你可以根据action.type来区分处理：
  • insert-text：文本插入操作，包含插入的text和位置selection
  • delete：删除操作，包含删除范围range
  • format-text：文本格式修改操作，包含格式类型format和范围selection
• 如果需要对比新旧状态的完整diff，也可以通过update对象中的previousEditorState和editorState，结合Lexical的状态读取API进行片段对比，但优先使用actions是最高效的方式。

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