Draft.js日文输入模式下粘贴图片后回车出现栈帧折叠报错如何解决

问题根因 #

该报错属于Draft.js与IME（输入法编辑器，日文、中文等非拉丁类输入法均属于此类）的已知兼容问题：当编辑器内存在标记为IMMUTABLE（不可变）类型的atomic图片块时，日文输入法候选词确认阶段按下回车键，Draft.js内部更新逻辑会误尝试修改不可变块的关联entity，导致entity key异常失效，调用getEntity时直接抛出错误。

修复方案 #

1. 增加Media组件边界容错 #

现有Media组件未做entity存在性校验，当entity key被异常清空时会直接触发报错，先添加空值判断：

const Media = (props:any) => {
  // 先校验entity是否存在，避免空值报错
  const entityKey = props.block.getEntityAt(0);
  if (!entityKey || !props.contentState.hasEntity(entityKey)) {
    return null;
  }
  const entity = props.contentState.getEntity(entityKey);
  const { src } = entity.getData();
  const type = entity.getType();
  let media;
  if (type === "image") {
    media = <Image src={src} alt="" />;
  }
  return media;
};

2. 拦截IME输入阶段的回车键事件 #

新增状态记录IME输入状态，在输入法候选词确认阶段拦截默认回车行为，避免触发不可变块修改逻辑：

function App() {
  // 原有代码不变，新增以下状态
  const [isInComposition, setIsInComposition] = useState(false);

  // 原有代码不变，修改Editor组件配置
  return (
    <div className="App">
      <div>
        <Editor 
          editorState={editorState} 
          onChange={setEditorState} 
          blockRendererFn={myBlockRenderer}
          // 新增以下三个配置项
          handleReturn={(e) => {
            if (isInComposition) {
              e.preventDefault();
              return "handled";
            }
            return "not-handled";
          }}
          onCompositionStart={() => setIsInComposition(true)}
          onCompositionEnd={() => setIsInComposition(false)}
        />
      </div>
    </div>
  );
}

可选优化方案 #

如果业务允许调整图片entity的可变性，可以将entity配置里的mutability: "IMMUTABLE"改为mutability: "MUTABLE"，即可绕过Draft.js的不可变块校验逻辑，也能解决该报错，修改后需自行控制图片块的编辑权限，避免内容被意外修改。

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