2015-03-10 00:49:11 +08:00
|
|
|
import loadScript from 'discourse/lib/load-script';
|
2016-11-29 00:29:56 +08:00
|
|
|
import { observes } from 'ember-addons/ember-computed-decorators';
|
2015-03-10 00:49:11 +08:00
|
|
|
|
2016-11-29 00:29:56 +08:00
|
|
|
export default Ember.Component.extend({
|
2015-03-10 00:49:11 +08:00
|
|
|
mode: 'css',
|
|
|
|
classNames: ['ace-wrapper'],
|
|
|
|
_editor: null,
|
|
|
|
_skipContentChangeEvent: null,
|
|
|
|
|
2016-11-29 00:29:56 +08:00
|
|
|
@observes('content')
|
|
|
|
contentChanged() {
|
2015-03-10 00:49:11 +08:00
|
|
|
if (this._editor && !this._skipContentChangeEvent) {
|
|
|
|
this._editor.getSession().setValue(this.get('content'));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_destroyEditor: function() {
|
|
|
|
if (this._editor) {
|
|
|
|
this._editor.destroy();
|
|
|
|
this._editor = null;
|
|
|
|
}
|
2015-07-16 01:15:05 +08:00
|
|
|
if (this.appEvents) {
|
|
|
|
// xxx: don't run during qunit tests
|
|
|
|
this.appEvents.off('ace:resize', this, this.resize);
|
|
|
|
}
|
2015-03-10 00:49:11 +08:00
|
|
|
}.on('willDestroyElement'),
|
|
|
|
|
2015-07-10 04:25:33 +08:00
|
|
|
resize() {
|
|
|
|
if (this._editor) {
|
|
|
|
this._editor.resize();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-11-29 00:29:56 +08:00
|
|
|
didInsertElement() {
|
|
|
|
this._super();
|
2015-03-10 00:49:11 +08:00
|
|
|
|
2016-11-29 00:29:56 +08:00
|
|
|
loadScript("/javascripts/ace/ace.js", { scriptTag: true }).then(() => {
|
|
|
|
window.ace.require(['ace/ace'], loadedAce => {
|
2016-12-20 00:19:10 +08:00
|
|
|
if (!this.element || this.isDestroying || this.isDestroyed) { return; }
|
2016-11-29 00:29:56 +08:00
|
|
|
const editor = loadedAce.edit(this.$('.ace')[0]);
|
2015-05-14 04:24:49 +08:00
|
|
|
|
|
|
|
editor.setTheme("ace/theme/chrome");
|
|
|
|
editor.setShowPrintMargin(false);
|
2016-11-29 00:29:56 +08:00
|
|
|
editor.getSession().setMode("ace/mode/" + this.get('mode'));
|
|
|
|
editor.on('change', () => {
|
|
|
|
this._skipContentChangeEvent = true;
|
|
|
|
this.set('content', editor.getSession().getValue());
|
|
|
|
this._skipContentChangeEvent = false;
|
2015-05-14 04:24:49 +08:00
|
|
|
});
|
2015-07-10 04:25:33 +08:00
|
|
|
editor.$blockScrolling = Infinity;
|
2015-05-14 04:24:49 +08:00
|
|
|
|
2016-11-29 00:29:56 +08:00
|
|
|
this.$().data('editor', editor);
|
|
|
|
this._editor = editor;
|
|
|
|
if (this.appEvents) {
|
2015-07-16 01:15:05 +08:00
|
|
|
// xxx: don't run during qunit tests
|
2016-11-29 00:29:56 +08:00
|
|
|
this.appEvents.on('ace:resize', self, self.resize);
|
2015-07-16 01:15:05 +08:00
|
|
|
}
|
2015-03-10 00:49:11 +08:00
|
|
|
});
|
|
|
|
});
|
2016-11-29 00:29:56 +08:00
|
|
|
}
|
|
|
|
});
|