Search code examples
node.jsreactjsreduxsocket.iofroala

Froala Editor crash after 11 times model changed in React

I've built a simple editor online without identity, implemented in backend with Node.JS with Socket.IO, MongoDB, and client using React connecting Socket.IO.

To create editor, I've used Froala Editor with react-froala-wysiwyg as plugins for React.

I've deployed my app on Heroku at https://dontpad.herokuapp.com and it's working fine with multiple user (Socket works fine).

This is my screenshot about how it worked with 7 user online once time, and it work when someone changes data:

enter image description here


Error

But I detected that after the Froala Editor after changed 11 times, the Froala editor crash, and I don't understand what is happening?

This is the screenshot after model of Froala changed 10 times, and it's still working:

enter image description here

And when I changed it at 11th, it crashing:

enter image description here

The error on console is: (error only appears after about 5s since the editor crash - LoL)

froala_editor.pkgd.min.js:7 Uncaught TypeError: Cannot read property 'VOID_ELEMENTS' of null at Object.f [as isEmpty] (froala_editor.pkgd.min.js:7) at Object.E [as get] (froala_editor.pkgd.min.js:9) at froala_editor.pkgd.min.js:19


Source code

This is my repo on github https://github.com/huynhsamha/dontpad

This is my code rendering Froala Editor

<FroalaEditor
            tag="textarea"
            model={this.props.model}
            config={configFrolaEditor}
            onModelChange={this._onChangeModel}
          />

I used Redux to map state to props to child component so model={this.props.model}. 

const mapStateToProps = state => ({
  model: state.Model
});

And this is _onChangeModel which emit to socket and call this.props.editModel(model);, which is mapDispatchToProps 

  _onChangeModel = (model) => {
    this.timeShowTextSaving = Date.now();
    this.props.editModel(model);
    this.setState({ stateModel: msg.SAVING });
    socket.emit(conf.socket.client.modelChanged, {
      model, room: this.room
    });
  }


// This is mapDispatchToProps
const mapDispatchToProps = dispatch => ({
  editModel: (model) => {
    dispatch(actions.editModel(model));
  }
});

This is full version of this file - Editor.jsx

And this is my config of Froala Editor Component Is there something wrong in my configuration?

export const config = {
  placeholderText: 'Edit Your Content Here!',
  spellcheck: false,
  scaytAutoload: false,
  charCounterCount: false,
  theme: 'custom',
  indentMargin: 10,
  heightMin: window.screen.availHeight,
  fontFamily: {
    // fonts ...
  },
  toolbarButtons: [
    'bold', 'italic', // buttons ...
  ]
};

Has anyone encountered this problem like me?

Solution

  • I've found the answer for my question.

    I've tried with simple version using Froala Editor with React and Redux on https://stackblitz.com/edit/react-froala-editor?file=style.css and I've found why it's crashing after 11 times.

    Because Froala is using with license, but I've using CSS to remove the banner of Froala so when the 11th change, editor will crash.

    I've tried with hidden version (hide license banner) and with no hidden, and the hidden version is crash after 11 times.

    I also found a trick how to handle this problem, I don't hide banner, but I set it is invisible by font-size: 0 and padding: 0

    div.fr-wrapper>div>a {
        /* display: none !important; */
        /* position: fixed; */
        /* z-index: -99999 !important; */
    font-size: 0px !important;
    padding: 0px !important;
    height: 0px !important;
}