Set EditorState without the application state in Draft js

Question

I want to update the Draft js Editor with some initial content. I know we can change EditorState using component state.

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

Whenever I tried to change something in the Editor it's re rendering. This is causing some performance issue. Is there anyway I can set or change the Editor's state without changing the state. Something similar to this

EditorState.set(editorState); //here editorState is new editor state;

Any idea how to achieve?

There is no way to avoid re-rendering... whenever state changes it renders data again, that's the core of reactjs... can you brief what are the performance issues? — Lokesh Sanapalli, Oct 04 '18 at 12:25
@SarathKumar as Lokesh Sanapalli mentioned that's how react works. I think because of setState are you facing any infinite call issue and that is what you mean performance issue? — Hemadri Dasari, Oct 04 '18 at 12:31
@Think-Twice. I can totally understand concept of React. But here the Editor component contains some other form elements also. while editing in the editor resets the form elements and also little bit delay in typing. I know I can give state value to form elements. But I'm loosing focus each time change event fires. — Sarath Kumar, Oct 04 '18 at 12:34
It has a delay because you are passing event handler function and it’s stare value as props to editor component and that’s why you see delay. — Hemadri Dasari, Oct 04 '18 at 13:13

score 1 · Answer 1 · answered Oct 05 '18 at 08:41

After the two days of struggle, I found one useful wysiwyg editor built on top of Draft.js with cool features. It has all the features given by Draft.js. We can load existing content using Editor's refs.

import {EditorState, convertFromRaw} from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';


class myEditor extends Component {

   componentDidMount(){
       //I have stored rawContent in  database
       let rawContent={"blocks":[{"key":"3ge2q","text":"Hello World!;","type":"header-three","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}};
       //Convert Raw to contentState
       let content=convertFromRaw(rawContent);
       let editorState=EditorState.createWithContent(content);
       this.refs.editor.editor.update(editorState); //Update the editor with updated content.
   }

    render(){
      <Editor
         ref="editor"
         wrapperClassName="demo-wrapper"
         editorClassName="template-editor"
         spellCheck={true}
         placeholder="Type something"
         onEditorStateChange={this.onEditorStateChange.bind(this)}
     />
  }
}

Set EditorState without the application state in Draft js

1 Answers1