handleKeyCommand中space默认回退函数失效，返回not-handled未触发默认空格

我之前在做类似的Draft.js缩写替换功能时，也碰到过一模一样的问题！咱们来一步步拆解问题、解决它：

你遇到的核心问题是：当返回'not-handled'时编辑器没触发默认空格，大概率是因为自定义keyBindingFn的实现没有正确传递默认行为的触发条件，或者在命令处理链路中，默认的空格命令被意外中断了。

1. 修正keyBindingFn的返回逻辑 #

你的keyBindingFn不能一碰到空格就返回自定义命令cc-space，得给默认行为留活路！只有当你确定需要触发缩写检查时才返回自定义命令，其他情况直接返回null，让编辑器按默认逻辑处理：

const customKeyBindingFn = (event, { getEditorState }) => {
  if (event.key === ' ') {
    // 这里可以加个判断：比如当前是否处于可编辑状态、有没有选中内容等
    return { command: 'cc-space' };
  }
  // 其他按键全部交给编辑器默认处理
  return null;
};

如果你的keyBindingFn总是拦截空格事件，哪怕handleKeyCommand返回'not-handled'，编辑器也不知道该回到哪一步去执行默认空格插入。

2. 确保handleKeyCommand严格返回'not-handled' #

处理cc-space命令时，没匹配到缩写的情况下，必须精准返回字符串'not-handled'，不能是null、undefined或者其他值。示例代码参考：

const handleKeyCommand = (command, editorState, { setEditorState }) => {
  if (command === 'cc-space') {
    // 你自己的逻辑：获取最后输入的单词
    const lastWord = getLastInputWord(editorState);
    if (predefinedAbbreviations.has(lastWord)) {
      // 执行替换逻辑
      const newState = replaceAbbreviation(editorState, lastWord);
      setEditorState(newState);
      return 'handled'; // 告诉编辑器：我处理完了
    } else {
      // 无匹配，交给默认逻辑
      return 'not-handled';
    }
  }
  // 其他命令全部交给默认处理
  return 'not-handled';
};

这里的'not-handled'是编辑器的“暗号”，意思是“我搞不定，你找默认处理流程去”，返回错了编辑器就会误以为命令已经处理完毕，自然不会插空格。

3. 兜底方案：手动插入空格 #

如果上面两步都试了还是不行，可能是编辑器版本的bug或者特殊场景下默认链路失效，这时候咱们直接手动插入空格，不依赖默认命令：

import { EditorState, Modifier } from 'draft-js';

const handleKeyCommand = (command, editorState, { setEditorState }) => {
  if (command === 'cc-space') {
    const lastWord = getLastInputWord(editorState);
    if (predefinedAbbreviations.has(lastWord)) {
      // 替换逻辑不变
      const newState = replaceAbbreviation(editorState, lastWord);
      setEditorState(newState);
      return 'handled';
    } else {
      // 手动插入空格，完全接管默认行为
      const contentState = Modifier.insertText(
        editorState.getCurrentContent(),
        editorState.getSelection(),
        ' '
      );
      setEditorState(EditorState.push(editorState, contentState, 'insert-characters'));
      return 'handled';
    }
  }
  return 'not-handled';
};

这种方式虽然绕开了默认命令，但胜在稳定，适合一些复杂场景。

• 别在keyBindingFn里瞎拦截：只有当你需要检查缩写时才返回自定义命令，比如用户正在输入单词（没有选中内容、处于普通编辑状态），否则直接放行。
• 返回值要精准：'handled'和'not-handled'是字符串，不是布尔值或者其他类型，别写错。
• 试试升级Draft.js：如果用的是比较老的版本，可能存在默认命令触发的bug，升级到最新稳定版说不定能解决。

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