title: Froala Editor crash after 11 times model changed in React
body: <p>I've built a simple editor online without identity, implemented in backend with <em>Node.JS with Socket.IO, MongoDB</em>, and client using <em>React</em> connecting Socket.IO.</p>
  
  <p>To create editor, I've used <a href="https://www.froala.com/wysiwyg-editor" rel="nofollow noreferrer"><strong>Froala Editor</strong></a> with <a href="https://github.com/froala/react-froala-wysiwyg" rel="nofollow noreferrer"><em>react-froala-wysiwyg</em></a> as plugins for React.</p>
  
  <p>I've deployed my app on Heroku at <a href="https://dontpad.herokuapp.com" rel="nofollow noreferrer">https://dontpad.herokuapp.com</a> and it's working fine with multiple user (Socket works fine). </p>
  
  <p>This is my screenshot about how it worked with 7 user online once time, and it work when someone changes data:</p>
  
  <p><a href="https://i.stack.imgur.com/zC6fV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zC6fV.png" alt="enter image description here"></a></p>
  
  <p><br></p>
  
  <h1>Error</h1>
  
  <p>But I detected that after the Froala Editor after changed <strong>11 times</strong>, <strong>the Froala editor crash</strong>, and I don't understand what is happening?</p>
  
  <p>This is the screenshot after model of Froala changed <strong>10 times</strong>, and it's still working:</p>
  
  <p><a href="https://i.stack.imgur.com/CVnJ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CVnJ8.png" alt="enter image description here"></a></p>
  
  <p>And when I changed it at <strong>11th</strong>, it crashing:</p>
  
  <p><a href="https://i.stack.imgur.com/5XMmf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5XMmf.png" alt="enter image description here"></a></p>
  
  <p><strong>The error on console is:</strong> (error only appears after about <strong>5s</strong> since the editor crash - LoL)</p>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <p><br></p>
  
  <h1>Source code</h1>
  
  <p>This is my repo on github <a href="https://github.com/huynhsamha/dontpad" rel="nofollow noreferrer">https://github.com/huynhsamha/dontpad</a></p>
  
  <p>This is my code rendering <code>Froala Editor</code></p>
  
  <pre><code>&lt;FroalaEditor
              tag="textarea"
              model={this.props.model}
              config={configFrolaEditor}
              onModelChange={this._onChangeModel}
            /&gt;
  </code></pre>
  
  <p>I used <code>Redux</code> to map state to props to child component so <code>model={this.props.model}</code>. </p>
  
  <pre><code>const mapStateToProps = state =&gt; ({
    model: state.Model
  });
  </code></pre>
  
  <p>And this is <code>_onChangeModel</code> which emit to socket and call <strong><code>this.props.editModel(model);</code></strong>, which is <code>mapDispatchToProps</code> </p>
  
  <pre><code>  _onChangeModel = (model) =&gt; {
      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 =&gt; ({
    editModel: (model) =&gt; {
      dispatch(actions.editModel(model));
    }
  });
  </code></pre>
  
  <p>This is <a href="https://github.com/huynhsamha/dontpad/blob/master/client/src/components/editor/Editor.jsx" rel="nofollow noreferrer">full version of this file - <strong>Editor.jsx</strong></a></p>
  
  <p>And this is <strong><a href="https://github.com/huynhsamha/dontpad/blob/master/client/src/utils/FroalaWysiwyg.js" rel="nofollow noreferrer">my config of Froala Editor Component</a></strong> Is there something wrong in my configuration?</p>
  
  <pre><code>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 ...
    ]
  };
  </code></pre>
  
  <p>Has anyone encountered this problem like me?</p>