froala / react-froala-wysiwyg

React component for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
565 stars 131 forks source link

froalaEditor.initialized state management problems #205

Open bryanrasmussen opened 5 years ago

bryanrasmussen commented 5 years ago

Our editor fields can have different states where they are turned off or not.

So I had code like this


PublishedStateConfig = {
        key: 'tE1C3D3A5C6D5oF4I4B3B9A3B5A5B2A3F3bPELb1OMFCIe1LUE1IT==',
        events: {
            'froalaEditor.initialized': function (e, editor) {
                editor.toolbar.hide();
                editor.edit.off();
            }
        }
    };

and a normal config that has

'froalaEditor.initialized': function (e, editor) {
                editor.toolbar.hide();
                editor.edit.on();
            }

and then in my render function something like this

if(this.props.Report.workState === (WorkState.Published || WorkState.AutoGenerated)) {
            return (
                <div className="editor-container"> 1
                    <FroalaEditor config={this.PublishedStateConfig} tag='textarea' model={this.props.content} onModelChange={this.handleModelChange}></FroalaEditor>
                    {livePreviewContent}
                </div>
            );
        }

return (
            <div className="editor-container"> 2
                <FroalaEditor config={this.config} tag='textarea' model={this.props.content} onModelChange={this.handleModelChange}></FroalaEditor>
                {livePreviewContent}
            </div>
        );

unfortunately once I enter into a WorkState.Published my editor will remain editor.off state even if I re-render my component with some other Workstates.

I am wondering if it can be some problem with the state of the initialized event? I can definitely see from my rendering that I am in the right editor container for my particular workstate.

mjb95 commented 4 years ago

I have the same issue too, it only seems to respect the first render's call to initialize().