CodeMirror breaks two-way binding on <textarea>

[HackerTree]

Hi all,

I see on my project that CodeMirror.fromTextArea(...) breaks the binding, so you are not able to get the changed value:

<script id='editor-codemirror-tpl' type='text/x-handlebars'>
  <textarea id='codemirror' value='{{editor.code}}'></textarea>
</script>

If you comment this part the binding works:

CodeMirror.fromTextArea(document.getElementById('codemirror'), {
  autofocus: true,
  lineNumbers: true,
  mode: this.get('editor.mode')
});

Did you have a similar problem?

https://github.com/rognoni/HackerTree/tree/master/Front-end/Ractive/src/js

[Chris Reeves]

I usually set up things like Ace and CodeMirror as decorators so that the communication is more controlled, so you can group all of your control variables as params and debounce the sync between the editor and Ractive.

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[HackerTree]

Reading the docs, I have only to know where is the best point to save the CodeMirror instance:

var tooltipDecorator = function ( node, content ) {
  // setup work goes here...


  return {
    teardown: function () {
      // ...any cleanup work goes here
    }
  };
};

This is the actual Ractive-based code:

app.editor.com.codemirror = {
  Component: null,
  instance: null, // CodeMirror instance


  init: function() {
    console.log('========== Start app.editor.com.codemirror.init');


    this.Component = Ractive.extend({
      //isolated: true,
      template: '#editor-codemirror-tpl',
      oncomplete: function() {
        console.log('mode: '+this.get('editor.mode'));
        app.editor.com.codemirror.instance = CodeMirror.fromTextArea(document.getElementById('codemirror'), {

          autofocus: true,
          lineNumbers: true,
          mode: this.get('editor.mode')
        });
      }

    });
  }
};

To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+...@googlegroups.com.

[HackerTree]

Because seems that CodeMirror breaks only one way (from Ractive to textarea works), if is there a way to re-bind the second way (from texture to Ractive):

> app.editor.instance.findComponent('CodeMirror').codeMirror.save()

> $('#codemirror').val()
"Updated text"

> app.editor.instance.get('editor.code')
"Not updated text"

> app.editor.instance.set('editor.code', 'Works!!')

> $('#codemirror').val()
"Works!!"

[HackerTree]

Sorry the "spam" I see your solution here http://www.ractivejs.org/app.js

editor = CodeMirror.fromTextArea(this.find("textarea"), {
  mode: mode,
  theme: this.get("theme") || "ractive",
  lineWrapping: this.get("wrap")
});
doc = editor.getDoc();


editor.on("change", function () {
  if (updating) {
    return;
  }


  updating = true;
  component.set("value", editor.getValue());
  updating = false;
});


editor.on("keydown", function (editor, event) {
  var name = CodeMirror.keyNames[event.which];


  return;


  if (name) {
    component.fire(name.toLowerCase(), {
      component: component,
      shift: event.shiftKey,
      original: event
    });
  }
});


this.observe("value", function (value) {
  if (updating) {
    return;
  }


  updating = true;
  editor.setValue(value || "");
  updating = false;
});


this.on("teardown", function () {
  editor.toTextArea();
});