Bad Heirarchies

action-bar.hbs

<div class='action-bar'>
  {{input}}
  <ul class='actions'>
    <li>Save<span class='shortcut'>ctrl + s</span></li>
    <li>Insert timestamp<span class='shortcut'>ctrl + d</span></li>
    <li>Close task</li>
    <li>Reject task</li>
    <li>Insert new task</li>
    <li>Hide completed</li>
    <li>Collapse all</li>
    <li>Expand all</li>
  </ul>
</div>

doc.hbs

<!-- Route template -->

<div class='full'>
  {{tashk-editor value=model.body
                 valueUpdated=(action (mut model.body))
                 options=(hash lineNumbers=true theme="solarized")
                 isSaving=isSaving
                 save='save'}}
</div>

tash-editor.hbs

<div class='save-icon'>
  {{fa-icon 'floppy-o'}}
</div>

{{action-bar}}

{{tashk-codemirror value=value
                   valueUpdated=(action (mut value))
                   options=(hash lineNumbers=true theme="solarized")
                   save='save'
}}

tashk-codemirror.js

/* global codemirror */
import Ember from 'ember';
import injectService from 'ember-service/inject';
import { bind, once, later, next } from 'ember-runloop';

export default Ember.Component.extend({
  tagName: 'textarea',
  classNames: ['full'],

  codeMirror: injectService(),

  actions: {
    save: function() {
      this.sendAction('save');
    }
  },

  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'), this);

    // For some reason can't execCommand immediately
    next(this, function() {
      this._codeMirror.execCommand('foldAll');
    });

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

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

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

  scheduleValueUpdatedAction(codeMirror, changeObj) {
    once(this, this.sendValueUpdatedAction, codeMirror.getValue(), codeMirror, changeObj);
  },

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

    this._codeMirror.on(event, callback);

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

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

  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;
  }
});