RichUtils.handleKeyCommand in draft-js error: this.props.editorState.isInCompositionMode is not a function error

Question

I'm using Draft-Js and while trying to use the handleKeyCommand of RichUtils the application stop and I'm getting the error : "this.props.editorState.isInCompositionMode is not a function error"

Can somebody help?

Thanks.

const MyEditor = () => {

  const [editorState, setEditorState] = useState(()=>EditorState.createEmpty())
  const editor = useRef(null)

  useEffect(() => {focus()}, [])

  const onChange = (editorState) => setEditorState({ editorState });
  const focus = () => editor.current.focus()

  const handleKeyCommand = (command, editorState) => {
    const newState = RichUtils.handleKeyCommand(editorState, command)
    debugger;
    if (newState) {
      onChange(newState);
      return 'handled';
    }
    return 'not-handled';
  }

  return (
    <div className="editor" onClick={focus}>
      <Editor
        editorState={editorState}
        handleKeyCommand={handleKeyCommand}
        onChange={setEditorState}
        ref={editor}
        placeholder="Tell your story"
        spellCheck
      />
    </div>
  );
}

export default MyEditor

Answer 1

You are confusing classes and hooks

First about method onChange, you code don't true. You have to edit it:

<Editor onChange={(editorState) => setEditorState(editorState)} /> 

Second about method handleKeyCommand()

const handleKeyCommand = (command) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      setEditorState(newState);
      return true;
    }
    return false;
}

Hope help you!