this.id is overriden with undefined when props change and don't contain an id

[saschal-j5int]

Hello,

I think I found a bug in the react-tinymce component. We have an application where the richttext editor becomes readonly/editable depending on other parts of the form. Due to this changes the props can change. We don't set a specific id for the react-tinymce. The component takes care to set its own id.

in /lib/components/TinyMCE.js line 52

componentWillMount() {
    this.id = this.id || this.props.id || uuid();
  },

But when props changes it sets its this.id to what ever is in the nextProps.id. If you haven't set an id in the props this is set to undefined and the component loses its id which causes other errors later in our code.

in /lib/components/TinyMCE.js line 61

componentWillReceiveProps(nextProps) {
    if (!isEqual(this.props.config, nextProps.config) || !isEqual(this.props.id, nextProps.id)) {
      this.id = nextProps.id;
      this._init(clone(nextProps.config), nextProps.content);
      return;
    }

We wrote a wrapper around the component for now which uses the library's uuid() function to set a unique id and always hand it over to the tinyemce component.

import TinyMCE from 'react-tinymce'
import React, {Component} from 'react';
import tinymceUUID from 'react-tinymce/lib/helpers/uuid';

class _TinyMCE extends Component {
  constructor(props) {
    super(props)
    this.id = tinymceUUID()
  }

  render() {
      return (<TinyMCE ref={(editor)=>{this.editor=editor}} {...this.props} id={this.id}/>)
  }

Hope that helps.