CodeMirror Test

components.ivy-codemirror.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'textarea',

  codeMirror: Ember.inject.service(),

  becameVisible() {
    this._super(...arguments);

    // Force a refresh on `becameVisible`, since CodeMirror won't render itself
    // onto a hidden element.
    this._codeMirror.refresh();
  },

  didInsertElement() {
    this._super(...arguments);

    this._codeMirror = this.get('codeMirror').fromTextArea(this.get('elementId'), this.get('element'));

    // Send a "valueUpdated" action when CodeMirror triggers a "change" event.
    this.setupCodeMirrorEventHandler('change', this, this.sendValueUpdatedAction);
  },

  didRender() {
    this._super(...arguments);

    this.updateCodeMirrorOptions();
    this.updateCodeMirrorValue();
  },

  setupCodeMirrorEventHandler(event, target, method) {
    const callback = Ember.run.bind(target, method);

    this._codeMirror.on(event, callback);

    this.one('willDestroyElement', this, function() {
      this._codeMirror.off(event, callback);
    });
  },

  sendValueUpdatedAction(codeMirror) {
    this.sendAction('valueUpdated', codeMirror.getValue());
  },

  updateCodeMirrorOption(option, value) {
    if (this._codeMirror.getOption(option) !== value) {
      this._codeMirror.setOption(option, value);
    }
  },

  updateCodeMirrorOptions() {
    const options = this.get('options');

    if (options) {
      Object.keys(options).forEach(function(option) {
        this.updateCodeMirrorOption(option, options[option]);
      }, this);
    }
  },

  updateCodeMirrorValue() {
    const value = this.get('value');

    if (value !== this._codeMirror.getValue()) {
      this._codeMirror.setValue(value || '');
    }
  },

  willDestroyElement() {
    this._super(...arguments);

    // Remove the editor and restore the original textarea.
    this._codeMirror.toTextArea();

    this.get('codeMirror').unregisterInstance(this.get('elementId'));

    delete this._codeMirror;
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  readOnly: true,
  textValue: "some text to include"
});

services.code-mirror.js

import CodeMirror from 'codemirror';
import Ember from 'ember';

export default Ember.Service.extend({
  init() {
    this._super(...arguments);
    this._instances = Object.create(null);
  },

  fromTextArea(id, textarea) {
    return this.registerInstance(id, CodeMirror.fromTextArea(textarea));
  },

  instanceFor(id) {
    return this._instances[id];
  },

  registerInstance(id, instance) {
    this._instances[id] = instance;

    return instance;
  },

  signal(emitter, type, ...values) {
    CodeMirror.signal(emitter, type, ...values);
  },

  unregisterInstance(id) {
    delete this._instances[id];
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
Hello?

<br>
{{textValue}}
{{ivy-codemirror value=textValue}}
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "codemirror": "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.0/codemirror.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}