CodeMirror 6 Merge：代码块批准/拒绝时触发函数的实现方法

要实现监听批准/拒绝代码块的交互并触发自定义逻辑，核心是利用unifiedMergeView配置项里的acceptChunk和rejectChunk钩子，同时结合getChunks判断是否关闭合并视图。

关键实现步骤 #

• 替换默认的批准/拒绝处理逻辑：在unifiedMergeView配置中传入自定义的acceptChunk和rejectChunk方法，执行默认操作的同时加入你的自定义函数
• 检查剩余差异块数量：每次处理完块操作后，调用getChunks获取剩余块数，若为0则关闭合并视图

修改后的React代码示例 #

import { getChunks } from "@codemirror/merge";
// 假设你用useState控制合并视图的显示状态
const [showMergeView, setShowMergeView] = useState(true);
const viewRef = useRef(null);

useEffect(() => {
  if (!editorRef.current || !showMergeView) return;

  // 自定义批准代码块的处理函数
  const acceptChunk = (view, chunk) => {
    // 执行默认的批准逻辑
    chunk.accept(view.state);
    // 触发自定义操作
    handleChunkUpdate();
  };

  // 自定义拒绝代码块的处理函数
  const rejectChunk = (view, chunk) => {
    // 执行默认的拒绝逻辑
    chunk.reject(view.state);
    // 触发自定义操作
    handleChunkUpdate();
  };

  const editorState = EditorState.create({
    doc: modifiedCode,
    extensions: [
      ...extensions,
      unifiedMergeView({
        original: originalCode,
        acceptChunk,
        rejectChunk
      })
    ],
  });

  const view = new EditorView({
    state: editorState,
    parent: editorRef.current,
  });
  viewRef.current = view;

  return () => {
    view.destroy();
  };
}, [showMergeView, modifiedCode, originalCode]);

// 检查差异块数量并处理视图关闭逻辑
const handleChunkUpdate = () => {
  if (!viewRef.current) return;
  const remainingChunks = getChunks(viewRef.current.state);
  if (remainingChunks.length === 0) {
    setShowMergeView(false);
    // 这里可以添加视图关闭后的其他自定义逻辑
  }
};

说明 #

• acceptChunk和rejectChunk接收当前视图实例和差异块对象，先调用默认的accept/reject方法保证原有合并功能正常，再执行自定义逻辑
• getChunks从当前编辑器状态中提取剩余的差异块，当数量为0时切换showMergeView状态即可关闭合并视图
• 用useRef保存EditorView实例，确保在自定义函数中能访问到最新的编辑器状态

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