CodeMirror.jsx

    0

    0

    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,
    };
    
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.