CodeMirror.jsx

ReactDOMInput.propTypes = { onChange: PropTypes.func.isRequired, value: PropTypes.string.isRequired,

};

CodeMirrorEditor.defaultProps = { value: '',

onChange: function(event) { this.onChange(event); },

};

In the code, we are exporting a class named CodeMirrorEditor . This class extends React.Component . Within the constructor, we initialise a few properties. We also bind a function to the handleChange property, which will be invoked when the user changes the contents of the editor. Finally, we create a ref to our React.Component instance, and initialise the properties.

Within the componentDidMount method, we check to see if the user is using a mobile device. If they are, we create a React.DOMInput instance, set the value of the input to 'mobile' , and bind the onChange property to our handleChange function. We also set the defaultProps of the CodeMirrorEditor to { value: 'mobile' } .

Next, we implement the componentDidUpdate method.

Library: react

import React from 'react';
import PropTypes from 'prop-types';



const { CodeMirror } = window;

// Adapted from:
// https://github.com/facebook/react/blob/master/docs/_js/live_editor.js#L16

// also used as an example:
// https://github.com/facebook/react/blob/master/src/browser/ui/dom/components/ReactDOMInput.js

const mobile =
  typeof navigator === 'undefined' ||
  navigator.userAgent.match(/android/i) ||
  navigator.userAgent.match(/webos/i) ||
  navigator.userAgent.match(/iphone/i) ||
  navigator.userAgent.match(/ipad/i) ||
  navigator.userAgent.match(/ipod/i) ||
  navigator.userAgent.match(/blackberry/i) ||
  navigator.userAgent.match(/windows phone/i);

export class CodeMirrorEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.editorRef = React.createRef();
  }

  componentDidMount() {
    if (!mobile) {
      this.editor = CodeMirror.editor(this.editorRef.current, this.props);
      this.editor.on('change', this.handleChange);
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (!this.editor) return;

    if (this.props.value && this.editor.getValue() !== this.props.value) {
      this.editor.setValue(this.props.value);
    }
  }

  handleChange() {
    if (!this.editor) return;

    const value = this.editor.getValue();

    if (value === this.props.value) return;

    if (this.props.onChange) {
      this.props.onChange({ target: { value } });
    }

    if (this.editor.getValue() !== this.props.value) {
      this.editor.setValue(this.props.value);
    }
  }

  render() {
    return <textarea ref={this.editorRef} value={this.props.value} onChange={this.props.onChange} />;
  }
}

CodeMirrorEditor.propTypes = {
  onChange: PropTypes.func.isRequired,
  value: PropTypes.string.isRequired,
};