title: Interrupt Enter Key On ContentEditable Div In ReactJS
body: <p>I want to interrupt the <kbd>Enter</kbd> key and stop it from injecting the html code into the <code>ContentEditable</code> div.  My current code does not work because it does not interrupt the <kbd>Enter</kbd> key.  However, if I type, press <kbd>enter</kbd>, then type again, it deletes the inner html elements.  But still, this is not what I want.  I want the elements to NOT go into the <code>ContentEditable</code> div to begin with when I press <kbd>enter</kbd> rather than having to strip them out.</p>
  <p>I am essentially using this as an <em>&quot;input that scales with its content&quot;</em>.  If there is a better way to do this, please let me know!</p>
  <pre><code>import ReactDOM from 'react-dom'
  
  export default class MyInput extends React.Component {    
    componentWillReceiveProps(nextProps) {
      this.setState({value: nextProps.html});
    }
  
    shouldComponentUpdate(nextProps){
      return nextProps.html !== ReactDOM.findDOMNode(this).innerHTML;
    }
  
    componentDidUpdate() {
      if ( this.htmlEl &amp;&amp; this.props.html !== this.htmlEl.innerHTML ) {
       this.htmlEl.innerHTML = this.props.html;
      }
    }
  
    emitChange(){
      var html = ReactDOM.findDOMNode(this).innerHTML;
  
      // regex to remove tags created after pressing enter
      value = value.replace(/&lt;div&gt;/g, '');
      value = value.replace(/&lt;\/div&gt;/g, '');
      value = value.replace(/&lt;br&gt;/g, '');
  
      if (this.props.onChange &amp;&amp; html !== this.lastHtml) {
        this.props.onChange(html);
      }
      this.lastHtml = html;
      this.forceUpdate();
    }
  
    render() {
      var html = this.state.value;
      return (
        &lt;div
          dangerouslySetInnerHTML={{__html: html}}
          onInput={this.emitChange.bind(this)}
          onBlur={this.emitChange.bind(this)}
          contentEditable
        &gt;&lt;/div&gt;
      )
    }
  };&lt;kbd&gt;
  </code></pre>