I'm just trying to create a react ponent wrapping the CodeMirror (4.1) editor.

I came across this problem for which there is a workround via forcing a refresh once the ponent has loaded, but I'm not quite sure of the workflow I need to achieve this when react is added into the picture.

The suggestion is that to overe the error I would need to

"Call .refresh() after resizing the wrapping container."

My code is currently as follows in the Editor ponent:

  function ($, React, CodeMirror) {

    return React.createClass({

      render: function () {
        console.log("render-editarea");
        return (
          <textarea id="editarea">
-- Comment here
USE [All Data Items];
SELECT ID FROM [Test Event]
          </textarea>
        )
      },

      ponentDidMount: function () { 
        var onExecute = this.props.onExecute;
        var editorNode = document.getElementById("editarea");
        console.log("ponentDidUpdate-editarea:" + editorNode); 
        var editor = CodeMirror.fromTextArea(editorNode, {        
          lineNumbers: true,
          matchBrackets: true,
          indentUnit: 4,
          mode: "text/x-mssql",
          extraKeys: {"Ctrl-E": function(cm) {    
            console.log(editor.getValue());
            onExecute(editor.getValue());
          }}
        });
      },

and it is loaded via the Render function of the parent ponent

I have tried

• hooking the window resize event (as shown in the React manual) in the editor ponent.
• forcing a refresh in the parent ponent's ponentDidMount function using $("#editarea").refresh();

but neither of these appeared to work

So I'd be grateful if someone could show me the right way to do it.

Many thx

I'm just trying to create a react ponent wrapping the CodeMirror (4.1) editor.

I came across this problem for which there is a workround via forcing a refresh once the ponent has loaded, but I'm not quite sure of the workflow I need to achieve this when react is added into the picture.

The suggestion is that to overe the error I would need to

"Call .refresh() after resizing the wrapping container."

My code is currently as follows in the Editor ponent:

  function ($, React, CodeMirror) {

    return React.createClass({

      render: function () {
        console.log("render-editarea");
        return (
          <textarea id="editarea">
-- Comment here
USE [All Data Items];
SELECT ID FROM [Test Event]
          </textarea>
        )
      },

      ponentDidMount: function () { 
        var onExecute = this.props.onExecute;
        var editorNode = document.getElementById("editarea");
        console.log("ponentDidUpdate-editarea:" + editorNode); 
        var editor = CodeMirror.fromTextArea(editorNode, {        
          lineNumbers: true,
          matchBrackets: true,
          indentUnit: 4,
          mode: "text/x-mssql",
          extraKeys: {"Ctrl-E": function(cm) {    
            console.log(editor.getValue());
            onExecute(editor.getValue());
          }}
        });
      },

and it is loaded via the Render function of the parent ponent

I have tried

• hooking the window resize event (as shown in the React manual) in the editor ponent.
• forcing a refresh in the parent ponent's ponentDidMount function using $("#editarea").refresh();

but neither of these appeared to work

So I'd be grateful if someone could show me the right way to do it.

Many thx

• javascript
• jquery
• codemirror
• reactjs

2 Answers 2

Use the ref attribute to reference rendered nodes rather than IDs or DOM selectors:

function ($, React, CodeMirror) {

  return React.createClass({

    render: function () {
      console.log("render-editarea");
      return (
        <textarea ref="editarea">
-- Comment here
USE [All Data Items];
SELECT ID FROM [Test Event]
        </textarea>
      )
    },

    ponentDidMount: function () { 
      var onExecute = this.props.onExecute;
      var editorNode = this.refs.editarea;
      console.log("ponentDidUpdate-editarea:" + editorNode); 
      var editor = CodeMirror.fromTextArea(editorNode, {        
        lineNumbers: true,
        matchBrackets: true,
        indentUnit: 4,
        mode: "text/x-mssql",
        extraKeys: {"Ctrl-E": function(cm) {    
          console.log(editor.getValue());
          onExecute(editor.getValue());
        }}
      });
    },

So this post helped me. The .refresh() was a function on CodeMirror which I hadn't fully understood. I used the method as suggested in that post in the parents ponentDidLoad event.

ponentDidMount: function () {              
  $('.CodeMirror').each(function(i, el){
    el.CodeMirror.refresh();
  });        
},