Accessing the editor instance this.editor

[raine]

What's the right way to access the editor instance, for example to use the configuration API?

http://codemirror.net/doc/manual.html#api_configuration

[ForbesLindesay]

It's a good question, this is my first real foray into reusable react components, so I'm not entirely sure. I would guess that any configuration options should be added as properties, rather than providing a method to get the code mirror instance, if possible. There may of course be scenarios that can't be handled that way, but I don't know how to solve that.

[raine]

I guess the component would then have to know which properties to reset with cm.setOption(key, val) when they're changed.

[ForbesLindesay]

It could just do a for/in loop over all the properties?

[jrunning]

I don't know how "Reacty" it is, but I wound up using CodeMirror.defineOption. For example:

var React = require('react'),
    CodeMirror = React.createFactory(require('react-code-mirror')),
    CMGlobal = require('codemirror');

CMGlobal.defineOption('myCallback', null, function(editor, myCallback) {
  myCallback && myCallback(editor);
};

var MyComponent = React.createClass({
  setEditor: function(editor) {
    this.setState({ editor: editor });
  },

  render: function() {
    return CodeMirror({
      // ...
      myCallback: this.setEditor,
    });
});

I'm pretty new to React, so I don't know if this is the best way to do it, but it worked for me.

[ForbesLindesay]

That looks like a pretty good work around (I didn't know CodeMirror had that API). The only downside is that those options are then global across all codemirror instances, but that's probably not disastrous if you keep careful track of all the options you define.

[jrunning]

I just realized there's a much simpler way to do this:

var React = require('react'),
    CodeMirror = require('react-code-mirror');

var MyComponent = React.createClass({
  getEditor: function() {
    return this.refs.CodeMirror.editor;
  },

  render: function() {
    return <CodeMirror ref="CodeMirror" />;
  }
});

I knew about Refs before but didn't connect the dots until just now.