getEditorState is not a function - when editors are unmounted/remounted

Use-case/Problem

I’m navigating in my pages that contain the editor as readonly and then I’ll update the content again and I receive this bug in console.

And this is when I try to apply more styles using inline toolbar.

Environments

react 16.2.0 draft-js-plugins-editor2.0.4 draft-js-static-toolbar-plugin 2.0.1

I’m using redux, redux-saga redesigned.

My editor component receive props from another components. See as below:

import React, { Component } from 'react'
import { actions } from 'mirrorx'

import Editor from 'draft-js-plugins-editor'
import createToolbarPlugin from 'draft-js-static-toolbar-plugin'
import 'draft-js-static-toolbar-plugin/lib/plugin.css'

import {
    EditorState,
    convertFromRaw,
    convertToRaw,
} from 'draft-js'

import styles from '../config/editor-styles'


const staticToolbarPlugin = createToolbarPlugin()
const { Toolbar } = staticToolbarPlugin
let plugins = [staticToolbarPlugin]


const handleChangeContent = (content) => {
    const contentState = content.getCurrentContent()
    const rawContent = convertToRaw(contentState)
    const currentContent = JSON.stringify(rawContent)

    actions.editor.setState(currentContent)
}


class MyEditor extends Component {
    constructor(props) {
        super(props)

        const { content, isReadOnly } = props
        
        if (isReadOnly) {
            plugins = []
        }
        
        const editorState = this._mountEditorState(content)

        this.state = {
            editorState,
        }

        this.onFocus = () => this.refs.editor.focus()

        this.onChange = (editorState) => {
            this.setState({ editorState })
            
            handleChangeContent(editorState)
        }
    }
    componentWillReceiveProps(nextProps) {
        const { content, isReadOnly } = nextProps
        if (content && isReadOnly) {
            const editorState = this._mountEditorState(content)

            this.setState({ editorState })
        }
    }
    _mountEditorState(content) {
        let editorState

        try {
            const rawContent = convertFromRaw(JSON.parse(content))
            editorState = EditorState.createWithContent(rawContent)
        } catch (err) {
            editorState = EditorState.createEmpty()
        }

        return editorState
    }
    render() {
        const { isReadOnly } = this.props
        const { editorState } = this.state

        return (
            <div style={styles.root}>

                { !editorState && <div>Loading content...</div> }

                <div style={styles.editor} onClick={this.onFocus}>
                    <Editor
                        readOnly={isReadOnly}
                        editorState={editorState}
                        onChange={this.onChange}
                        ref='editor'
                        spellCheck={true}
                        plugins={plugins}
                    />
                    { !isReadOnly && <Toolbar /> }
                </div>
            </div>
        )
    }
}


export default MyEditor

References:

https://github.com/facebook/draft-js/issues/473#issuecomment-373791338

[juliankrispel]

yea we need to fix this - thanks for reporting it. If someone could make a story for this case that’d be sweet

[sahilpaudel]

@francisrod01 how did it go, I am facing the same issue.