React-draft-wysiwyg: editorState.getImmutable is not a function

[xiaoqian9]

[xiaoqian9]

Does anyone know?

[jpuri]

Hey @xiaoqian9, which version of DraftJS are you using ?

[xiaoqian9]

@jpuri Draft v0.10.0

[grandMasterHash]

I am also experiencing this issue. I've basically followed the guide in the draft.js docs for creating a controlled component. I am also using draft v0.10.0
However I'm using React.createClass for creating my component instead of creating a subclass of React.Component and then using getInitialState to set an empty EditorState. Not sure if that should make a difference.

[dmulvi]

Same issue here. Also following the docs linked in @grandMasterHash's comment above. I logged out editorState in the onChange method and found that it looked like a ContentState object rather than EditorState. It turns out that the object passed as argument to onChange is RawDraftContentState. I mucked around converting that back to a valid ContentState object, but that still did not work.

Turns out the solution was to use onEditorStateChange property when creating the Editor instead of onChange. Here is the code snippet from the docs: (https://jpuri.github.io/react-draft-wysiwyg/#/docs)

onEditorStateChange = (editorState) => {
  this.setState({
    editorState,
  });
}
render() {
  const { editorState } = this.state;
  return (<Editor
    editorState={editorState}
    onEditorStateChange={this.onEditorStateChange}
  />)
}

[grandMasterHash]

Thanks for catching that, @dannymulvihill !
I will give that a shot.

[rizwankhangouri]

I am also getting same error-
TypeError: editorState.getImmutable is not a function
76 | };
77 |
78 | EditorState.set = function set(editorState, put) {

79 | var map = editorState.getImmutable().withMutations(function (state) {
80 | var existingDecorator = state.get('decorator');
81 | var decorator = existingDecorator;
82 | if (put.decorator === null) {

[elmoss]

it does't support react ^16.1.1 ?

[indefinitelee]

what is the highest version of react supported? are hooks supported?

[flashtheman]

Did anyone find out more?

[rryando]

it does't support react ^16.1.1 ?

it does support hooks, i'm using react ^16.13.1 and everything workout well,

if you're using hooks, make sure to set the state like this

  const [editorState, setEditorState] = useState(EditorState.createEmpty())

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

and don't forget to import the EditorState from draft-js

import { Editor } from 'react-draft-wysiwyg';
import { EditorState } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

on the render method

<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={onEditorStateChange}
/>

[kanjalkarMplus]

State

const [editorState, setEditorState] = useState(EditorState.createEmpty())

On change

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

To get current value in string

editorState.getCurrentContent().getPlainText()