Draft-js-plugins: Uncaught TypeError: Cannot read property 'setEditorState' of undefined at Object.handleKeyCommand (defaultKeyCommands.js:12)

[rajat1saxena]

I just created this component to trigger this warning. I cannot even use backspace key to delete what I typed into my editor. Any ideas what I did wrong?

import React, { useState } from 'react'
import Editor from 'draft-js-plugins-editor'
import 'draft-js-image-plugin/lib/plugin.css'

import createImagePlugin from 'draft-js-image-plugin'

const imagePlugin = createImagePlugin()

const RichTextEditor = (props) => {
  const [editorState, setEditorState] = useState(props.editorState)

  const onChange = (editorState) => {
    setEditorState(editorState)
  }

  return (
    <Editor
      editorState={editorState}
      onChange={onChange}
      plugins={[imagePlugin]} />
  )
}

export default RichTextEditor

From package.json:

    "draft-js": "^0.10.5",
    "draft-js-image-plugin": "^2.0.7",
    "draft-js-plugins-editor": "^3.0.0",

[rajat1saxena]

I solved it by updating draft-js to version 0.11.0.

[jaddoescad]

im having this issue with the latest version of draft

[tvibhu12]

I'm having the same issue with this version.

react-dom.development.js:328 Uncaught TypeError: Cannot read property 'setEditorState' of undefined at Object.handleKeyCommand (defaultKeyCommands.js:12) at eval (index.js:348) at Array.some (<anonymous>) at Object.eval [as handleKeyCommand] (index.js:347) at editOnKeyDown (editOnKeyDown.js:177) at eval (DraftEditor.react.js:268) at HTMLUnknownElement.callCallback (react-dom.development.js:189) at Object.invokeGuardedCallbackDev (react-dom.development.js:238) at invokeGuardedCallback (react-dom.development.js:291) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306) at executeDispatch (react-dom.development.js:391) at executeDispatchesInOrder (react-dom.development.js:416) at executeDispatchesAndRelease (react-dom.development.js:3301) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3310) at forEachAccumulated (react-dom.development.js:3282) at runEventsInBatch (react-dom.development.js:3327) at runExtractedPluginEventsInBatch (react-dom.development.js:3537) at handleTopLevel (react-dom.development.js:3581) at batchedEventUpdates$1 (react-dom.development.js:21729) at batchedEventUpdates (react-dom.development.js:798) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3591) at attemptToDispatchEvent (react-dom.development.js:4311) at dispatchEvent (react-dom.development.js:4232) at unstable_runWithPriority (scheduler.development.js:659) at runWithPriority$1 (react-dom.development.js:11077) at discreteUpdates$1 (react-dom.development.js:21746) at discreteUpdates (react-dom.development.js:811) at dispatchDiscreteEvent (react-dom.development.js:4211)

[mdwt]

I got the same error - mine was fixed when I changed the ref prop from
ref={editorRef}
to
ref={(editor) => (editorRef.current = editor)}

...
const editorRef = useRef(null);
...
return (
<>
....
     <Editor
          ...
          ref={(editor) => (editorRef.current = editor)}
          plugins={[addLinkPlugin,imagePlugin]}
        />
....
</>
);

   "draft-js": "^0.11.2",
    "draft-js-image-plugin": "^2.0.7",
    "draft-js-plugins-editor": "^3.0.0",