CodeEditor Class — react Architecture

Source Code

fixtures/dom/src/components/fixtures/hydration/Code.js lines 5–57

export class CodeEditor extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  componentDidMount() {
    this.textarea = findDOMNode(this);

    // Important: CodeMirror incorrectly lays out the editor
    // if it executes before CSS has loaded
    // https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
    Promise.all([
      import('codemirror'),
      import('codemirror/mode/jsx/jsx'),
      import('codemirror/lib/codemirror.css'),
      import('./codemirror-paraiso-dark.css'),
    ]).then(([CodeMirror]) => this.install(CodeMirror));
  }

  install(CodeMirror) {
    if (!this.textarea) {
      return;
    }

    const {onChange} = this.props;

    this.editor = CodeMirror.fromTextArea(this.textarea, {
      mode: 'jsx',
      theme: 'paraiso-dark',
      lineNumbers: true,
    });

    this.editor.on('change', function (doc) {
      onChange(doc.getValue());
    });
  }

  componentWillUnmount() {
    if (this.editor) {
      this.editor.toTextArea();
    }
  }

  render() {
    return (
      <textarea
        defaultValue={this.props.code}
        autoComplete="off"
        hidden={true}
      />
    );
  }
}