import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'div',
  attributeBindings: ['contenteditable'],
  editable: true,
  isUserTyping: false,
  plaintext: false,
  classNames: ['editable'],
  contenteditable: (function() {
  var editable = this.get('editable');
    return editable ? 'true' : undefined;
  }).property('editable'),
  didInsertElement: function() {
    new MediumEditor(this.$(), (this.get('options') ? JSON.parse(this.get('options')) : {}));
    return this.setContent();
  },
  focusOut: function() {
    return this.set('isUserTyping', false);
  },
  keyDown: function(event) {
    if (!event.metaKey) {
      return this.set('isUserTyping', true);
    }
  },
  input: function() {
    if (this.get('plaintext')) {
      return this.set('value', this.$().text());
    } else {
      return this.set('value', this.$().html());
    }
  },
  render: function(buffer) {
    buffer.push((this.get('value') || null));
  },
  setContent: function() {
    var this_m = this;
    if (this_m.$()) {
      return this_m.$().html(this_m.get('value'));
    }
  }
});

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'div',
  attributeBindings: ['contenteditable'],
  editable: true,
  isUserTyping: false,
  plaintext: false,
  classNames: ['editable'],
  contenteditable: (function() {
  var editable = this.get('editable');
    return editable ? 'true' : undefined;
  }).property('editable'),
  didInsertElement: function() {
    new MediumEditor(this.$(), (this.get('options') ? JSON.parse(this.get('options')) : {}));
    return this.setContent();
  },
  focusOut: function() {
    return this.set('isUserTyping', false);
  },
  keyDown: function(event) {
    if (!event.metaKey) {
      return this.set('isUserTyping', true);
    }
  },
  input: function() {
    if (this.get('plaintext')) {
      return this.set('value', this.$().text());
    } else {
      return this.set('value', this.$().html());
    }
  },
  render: function(buffer) {
    buffer.push((this.get('value') || null));
  },
  valueDidChange: function() {
    if (this.$() && this.get('value') !== this.$().html()) {
      this.setContent();
    }
  }.observes('value'),
  setContent: function() {
    if (this.$()) {
      return this.$().html(this.get('value'));
    }
  }
});

Allow value to be set externally.
Allow value to be set externally.

Currently the medium editor's value is only set on init. That makes
it impossible to reset a form on submit, for example. This commit
adds an observer that ensures the value is updated if the editor's
value differs from the component's value.
