自定义Draft.js按键绑定后，提及插件的上下箭头失效

当自定义按键绑定后提及插件的上下箭头功能失效，大概率是你的自定义逻辑拦截了本该由插件处理的箭头事件，即便返回了getDefaultKeyBinding(event)，也可能因为优先级或上下文判断问题没生效。以下是具体修复步骤：

1. 优先判断提及弹窗的激活状态 #

在自定义keyBindingFn中，先检查提及插件是否处于激活状态（弹窗已打开），如果是，直接让默认绑定处理箭头事件，跳过你的自定义逻辑：

const customKeyBindingFn = (event, editorState) => {
  // 通过插件实例获取当前提及状态
  const mentionState = mentionPlugin.getMentionState(editorState);
  if (mentionState.isOpen) {
    return getDefaultKeyBinding(event);
  }

  // 你的自定义按键逻辑
  if (event.key === 'Enter' && yourCustomCondition) {
    return 'custom-enter-handler';
  }

  // 其他情况返回默认绑定
  return getDefaultKeyBinding(event);
};

2. 避免在handleKeyCommand中误拦截箭头事件 #

确保在处理自定义命令时，只对明确需要处理的命令返回'handled'，其余命令返回'not-handled'，让插件能继续处理箭头导航：

const handleKeyCommand = (command, editorState, { setEditorState }) => {
  if (command === 'custom-enter-handler') {
    // 执行你的自定义逻辑
    setEditorState(updateEditorState(editorState));
    return 'handled';
  }

  // 非自定义命令交给默认流程（包括插件的箭头处理）
  return 'not-handled';
};

3. 直接放行箭头键的默认处理 #

如果上述方法仍无效，可以在keyBindingFn中单独判断箭头键，直接返回默认绑定，完全不经过自定义逻辑：

const customKeyBindingFn = (event, editorState) => {
  // 上下箭头直接交给默认绑定处理
  if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
    return getDefaultKeyBinding(event);
  }

  // 你的其他自定义按键逻辑
  if (event.key === 'Escape') {
    return 'custom-escape-action';
  }

  return getDefaultKeyBinding(event);
};

4. 检查插件配置是否禁用了箭头导航 #

部分提及插件支持自定义导航按键，检查插件初始化时是否覆盖了默认的上下箭头配置，比如：

// 错误示例：覆盖了默认导航按键
const mentionPlugin = createMentionPlugin({
  navigationKeys: { up: 'PageUp', down: 'PageDown' }
});

如果有这类配置，要么移除，要么确保箭头键被包含在导航按键中。

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