model prop stopped working in 3.1.0

[Adam-Stomski]

https://github.com/Adam-Stomski/froala-310-model-doesnt-work

[moek]

I also had the issue that Froala ignored what I set via model-prop.

Yet I found the following working example: https://codesandbox.io/s/react-froala-initialized-bug-y4hqf?from-embed

The main difference to my version was I had set the prop tag="textarea". Removing this prop solved the issue for me.

In your example the tag is also set, removing it should solve the issue too.

Regards.

[Snivik]

Changing model quickly after first render causes ignored model as well. For example if you have instantiated a FroalaEditor with model "" and then immediately rerendered component with actual data, it will stay empty.

[pmpunzalan]

I have the same issue with @Snivik. As a workaround I added a key on the component that was using the editor but it is now causing the editor to flicker.

[Snivik]

I have the same issue with @Snivik. As a workaround I added a key on the component that was using the editor but it is now causing the editor to flicker.

I just use timeout of a 200ms to set the data. Not clean, but works.

[ffjanhoeck]

I have to same issue. Where did you set the timeout @Snivik ?

[Snivik]

I have to same issue. Where did you set the timeout @Snivik ?

During a useEffect on initial appearance of the component, if you use a class-based approach - then on componentDidMount()

[narehart]

I found setting the model value after the html.set event resolved the issue:

state = {
   htmlSet: false,
}

render ()  {
    return (
        <FroalaEditorComponent
            model={this.state.htmlSet ? value : undefined}
            config={{
                events: {
                    'html.set': () => {
                        this.setState({ htmlSet: true })
                    },
                }
            }}
        />
    )
}

[jposert]

I found setting the model value after the html.set event resolved the issue:

state = {
   htmlSet: false,
}

render ()  {
    return (
        <FroalaEditorComponent
            model={this.state.htmlSet ? value : undefined}
            config={{
                events: {
                    'html.set': () => {
                        this.setState({ htmlSet: true })
                    },
                }
            }}
        />
    )
}

I can confirm that the solution works fine.

[jordankittle]

Can you guys try model={value + ''}

or just setting value =+ '' Before you use it in model={value}

For some reason this is making it work for me in Strapi.

I think the key here is to make sure your value is never an object, only ever a string, before using it inside model={value}

What I think is happening then is it is just converting null to the string 'null'. But then if I set value = 'null' it just sets the model as 'null' and never reloads correctly. I hate not knowing why things are happening. This is super frustrating.