Reacty defecty =)

FancyLineStringEditor.js

var React = require('react');

var GeoJsonEditor = require('./GeoJsonEditor');
var LineStringEditor2 = require('./LineStringEditor2');

var FancyLineStringEditor = React.createClass({
  propTypes: {
    value: React.PropTypes.object,
    onChange: React.PropTypes.func.isRequired
  },

  getInitialState: function() {
    return {
      value: this.props.value || null,
    };
  },

  componentWillReceiveProps: function (newProps) {
    console.log('FancyLineStringEditor.componentWillReceiveProps');

    // this.setState({
    //   value: newProps.value
    // });
  },

  updateLineStringEditor: function (newValue) {
    this.lineStringEditor.setState({
      value: newValue
    });
  },

  updateGeoJsonEditor: function (newValue) {
    this.geoJsonEditor.setState({
      value: newValue
    });
  },

  render: function() {
    this.lineStringEditor = (<LineStringEditor2 value={this.state.value} onChange={this.updateGeoJsonEditor} />);
    this.geoJsonEditor = (<GeoJsonEditor value={this.state.value} onChange={this.updateLineStringEditor} />);

    return (
      <div>
        <div style={{height: '500px'}}>
          {this.lineStringEditor}
        </div>
        <div style={{height: '500px'}}>
          {this.geoJsonEditor}
        </div>
      </div>
    );
  }
});

module.exports = FancyLineStringEditor;

GeoJsonEditor.js

var React = require('react');

var CodeMirror = require('codemirror');
require('codemirror/mode/javascript/javascript');

var GeoJsonEditor = React.createClass({
  propTypes: {
    value: React.PropTypes.object,
    onChange: React.PropTypes.func.isRequired
  },

  getInitialState: function() {
    return {
      value: this.props.value || null,
    };
  },

  componentDidMount: function() {
    console.log('GeoJsonEditor.componentDidMount');

    // setup codemirror
    this.editor = CodeMirror.fromTextArea(this.refs.input.getDOMNode(), {
      lineNumbers: true,
      styleActiveLine: true,
      matchBrackets: true,
      mode: {name: "javascript", json: true}
    });

    // max the size
    this.editor.setSize('100%', '100%');

    // add change handler
    this.editor.on('change', this.onEditorValueChanged);

    // now the rest of the methods can know
    this.componentIsMounted = true;
  },

  onEditorValueChanged: function() {
    console.log('GeoJsonEditor.onEditorValueChanged');

    // update state
    this.setState({
      value: JSON.parse(this.editor.getValue())
    });
  },

  componentWillUnmount: function() {
    console.log('GeoJsonEditor.componentWillUnmount');

    this.editor.off('change');
    this.editor.getWrapperElement().remove();
    this.editor = null;
  },

  // componentWillReceiveProps: function (newProps) {
  //   console.log('GeoJsonEditor.componentWillReceiveProps');

  //   this.setState({
  //     value: newProps.value
  //   });
  // },

  componentDidUpdate: function() {
    console.log('GeoJsonEditor.componentDidUpdate');

    if (this.componentIsMounted) this.props.onChange(this.state.value);
  },

  render: function() {
    console.log('GeoJsonEditor.render');

    return (
      <textarea ref="input" defaultValue={JSON.stringify(this.state.value, undefined, 2)}></textarea>
    );
  }
});

module.exports = GeoJsonEditor;

LineStringEditor.js

var React = require('react');

var L = require('leaflet');
require('leaflet-draw/dist/leaflet.draw-src');

var LineStringEditor = React.createClass({
  propTypes: {
    value: React.PropTypes.object,
    onChange: React.PropTypes.func.isRequired
  },

  getInitialState: function() {
    return {
      value: this.props.value || null,
    };
  },

  componentDidMount: function() {
    console.log('LineStringEditor2.componentDidMount');

    // setup the map
    this.map = L.map(this.refs.map.getDOMNode());

    // add tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    // create a group
    this.group = L.featureGroup().addTo(this.map);

    // now the rest of the methods can know
    this.componentIsMounted = true;
  },

  componentWillUnmount: function() {
    console.log('LineStringEditor2.componentWillUnmount');

    this.group.clearLayers();
    this.map.remove();
    this.map = null;
    this.group = null;
    this.drawControl = null;
    this.editControl = null;
  },

  // componentWillReceiveProps: function (newProps) {
  //   console.log('LineStringEditor2.componentWillReceiveProps');

  //   this.setState({
  //     value: newProps.value
  //   });
  // },

  onDrawEdited: function (e) {
    console.log('LineStringEditor2.onDrawEdited');

    var layers = e.layers;
    var that = this;
    layers.eachLayer(function(layer) {
      // update the state
      var lineString = layer.toGeoJSON().geometry;
      this.setState({
        value: lineString
      });
    }.bind(this));
  },

  enableEditControl: function() {
    console.log('LineStringEditor2.enableEditControl');

    // disable the draw control
    this.disableDrawControl();

    // escape early if the editcontrol is already enabled
    if (this.editControl) {
      return;
    }

    // setup the editcontrol
    var editControlOptions = {
      edit: {
        featureGroup: this.group,
        remove: false
      },
      draw: false
    };
    this.editControl = new L.Control.Draw(editControlOptions);
    this.map.on('draw:edited', this.onDrawEdited);
    this.map.addControl(this.editControl);
  },

  disableEditControl: function() {
    console.log('LineStringEditor2.disableEditControl');

    if (this.editControl) {
      this.map.removeControl(this.editControl);
      this.map.off('draw:edited');
      this.editControl = null;
    }
  },

  onDrawCreated: function (e) {
    console.log('LineStringEditor2.onDrawCreated');

    var layer = e.layer;

    // add the layer to the group
    this.group.addLayer(e.layer)

    // activate the edit control
    this.enableEditControl();

    // update the state
    var lineString = layer.toGeoJSON().geometry;
    this.setState({
      value: lineString
    });
  },

  enableDrawControl: function() {
    console.log('LineStringEditor2.enableDrawControl');

    // disable edit control
    this.disableEditControl();

    // escape early if the drawcontrol is already enabled
    if (this.drawControl) {
      return;
    }

    // setup the drawcontrol
    var drawControlOptions = {
      edit: false,
      draw: {
        polyline: true,
        polygon: false,
        rectangle: false,
        circle: false,
        marker: false
      }
    };
    this.drawControl = new L.Control.Draw(drawControlOptions);
    this.map.on('draw:created', this.onDrawCreated);
    this.map.addControl(this.drawControl);
  },

  disableDrawControl: function() {
    console.log('LineStringEditor2.disableDrawControl');

    if (this.drawControl) {
      this.map.removeControl(this.drawControl);
      this.map.off('draw:edited');
      this.drawControl = null;
    }
  },

  componentDidUpdate: function() {
    // not mounted yet, escape early
    if ( ! this.componentIsMounted) return;

    console.log('LineStringEditor2.componentDidUpdate');

    // remove old stuff
    this.group.clearLayers();

    var value = this.state.value;
    this.props.onChange(value);

    if (value) {
      // geojson -> leaflet
      this.feature = L.geoJson(value);
      var layers = this.feature.getLayers();
      if (layers.length > 0) {
        // got something to work with, enable the edit control
        this.enableEditControl();

        // add the layer to the group
        layers[0].addTo(this.group);

        // fit bounds
        var bounds = this.group.getBounds();
        this.map.fitBounds(bounds);

        // all good, we escape
        return;
      }
    }

    // no value, enable draw control
    this.enableDrawControl();

    // center map based on property and fallback on berlin =)
    var center = this.props.center || [52.52426, 13.40629];
    this.map.setView(center, 13);
  },

  render: function() {
    return (
      <div ref="map" style={{height: '500px'}}></div>
    );
  }
});

module.exports = LineStringEditor;