CODEWITHSUNDEEP
javascriptreactjsecmascript-6draftjs
Dimitrios Desyllas
Dimitrios Desyllas

Reputation: 10038

Draftjs: TypeError: TypeError: this.getImmutable(...) is undefined

I am trying to apply custom Decorators over a simple Draftjs Editor:

import React from 'react'; 
import {Editor, EditorState, RichUtils} from 'draft-js';
import EditorToolbar from './EditorToolbar.js';
import BoldProcessor from './processors/BoldProcessor.js';
import OppaiDecorator from './oppaiDecorator/OppaiDecorator.js';
import './AdvancedEditor.css';

class AdvancedEditor extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      toolbarItems: [ [ new BoldProcessor(this.eventEmitter) ] ],
      decorators: [
        new OppaiDecorator(),
      ]
    };  
  }

  onChange(editorState){
    let state=editorState;

    this.state.decorators.forEach((decorator) => {
     const tmpstate=decorator.apply(state);
     if(tmpstate){
      state=tmpstate;
     }
    });

    this.setState({editorState:state});
  } 

  handleKeyCommand(command, editorState) {
    const newState = RichUtils.handleKeyCommand(editorState, command);

    if (newState) {
      this.onChange(newState);
      return 'handled';
    }

    return 'not-handled';
  }

  render() {
    return (
      <div className="editorFull">
        <EditorToolbar items={this.state.toolbarItems} editorState={this.state.editorState}/>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange.bind(this)}
          handleKeyCommand={this.handleKeyCommand}
        />
      </div>
    );
  }
}

export default AdvancedEditor;

And I apply the Decorator like that:

import {EditorState, CompositeDecorator} from 'draft-js';
import OppaiItem from './OppaiDecorator.js';

class OppaiDecorator {
    constructor(){
        this.decorator=new CompositeDecorator([
            {
                strategy:this.oppaiMatch,
                component: OppaiItem
            }
        ]);
    }

    oppaiMatch(contentBlock, callback, contentState){
        this.__findWithRegex(/\s+oppai\s+/,contentBlock,callback);
    }

    __findWithRegex(regex, contentBlock, callback) {
        const text = contentBlock.getText();
        let matchArr=regex.exec(text)
        let start;
        if (matchArr !== null) {
          start = matchArr.index;
          callback(start, start + matchArr[0].length);
        }
    }

    apply(state) {
        if(state){
            return EditorState.apply(state,{decorator:this.decorator});
        }
    }
}

export default OppaiDecorator;

The problem is that when I hit backspace or delete key on my create-react-app app I get the following error:

Error display

And it does nor remove any text but I get the following error:

TypeError: this.getImmutable(...) is undefined

Do you have any idea why?

Upvotes: 2

Views: 5700

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 85012

onChange doesn't produce an editorState, but rather a rawDraftContentState. Try changing to onEditorStateChange:

    <Editor
      editorState={this.state.editorState}
      onEditorStateChange={this.onChange.bind(this)}
      handleKeyCommand={this.handleKeyCommand}
    />

Source: https://github.com/jpuri/react-draft-wysiwyg/issues/255

Upvotes: 4

Related Questions