Ghost/ghost/admin/app/components/gh-cm-editor.js
Matthew Beale 3e881027cc Use private properties for unobserved render state
* Drop set for local private editor property
* Only run preview setup on didInsertElement
* Drop set for local scrollWrapper prop
* Selectize setup on afterRender instead of next
* Use local props for editor save timers
2015-11-21 09:25:21 -05:00

44 lines
1.2 KiB
JavaScript

/* global CodeMirror */
import Ember from 'ember';
export default Ember.Component.extend({
// DOM stuff
classNameBindings: ['isFocused:focused'],
isFocused: false,
value: '', // make sure a value exists
_editor: null, // reference to CodeMirror editor
// options for the editor
lineNumbers: true,
indentUnit: 4,
mode: 'htmlmixed',
theme: 'xq-light',
didInsertElement: function () {
var options = this.getProperties('lineNumbers', 'indentUnit', 'mode', 'theme'),
editor = new CodeMirror(this.get('element'), options);
editor.getDoc().setValue(this.get('value'));
// events
editor.on('focus', Ember.run.bind(this, 'set', 'isFocused', true));
editor.on('blur', Ember.run.bind(this, 'set', 'isFocused', false));
editor.on('change', () => {
Ember.run(this, function () {
this.set('value', editor.getDoc().getValue());
});
});
this._editor = editor;
},
willDestroyElement: function () {
var editor = this._editor.getWrapperElement();
editor.parentNode.removeChild(editor);
this._editor = null;
}
});