discourse/app/assets/javascripts/admin/components/ace-editor.js.es6

105 lines
2.6 KiB
JavaScript

import loadScript from 'discourse/lib/load-script';
import { observes } from 'ember-addons/ember-computed-decorators';
const LOAD_ASYNC = !Ember.Test;
export default Ember.Component.extend({
mode: 'css',
classNames: ['ace-wrapper'],
_editor: null,
_skipContentChangeEvent: null,
@observes('editorId')
editorIdChanged() {
if (this.get('autofocus')) {
this.send('focus');
}
},
@observes('content')
contentChanged() {
if (this._editor && !this._skipContentChangeEvent) {
this._editor.getSession().setValue(this.get('content'));
}
},
@observes('mode')
modeChanged() {
if (LOAD_ASYNC && this._editor && !this._skipContentChangeEvent) {
this._editor.getSession().setMode("ace/mode/" + this.get('mode'));
}
},
_destroyEditor: function() {
if (this._editor) {
this._editor.destroy();
this._editor = null;
}
if (this.appEvents) {
// xxx: don't run during qunit tests
this.appEvents.off('ace:resize', this, this.resize);
}
$(window).off('ace:resize');
}.on('willDestroyElement'),
resize() {
if (this._editor) {
this._editor.resize();
}
},
didInsertElement() {
this._super();
loadScript("/javascripts/ace/ace.js", { scriptTag: true }).then(() => {
window.ace.require(['ace/ace'], loadedAce => {
if (!this.element || this.isDestroying || this.isDestroyed) { return; }
const editor = loadedAce.edit(this.$('.ace')[0]);
if (LOAD_ASYNC) {
editor.setTheme("ace/theme/chrome");
}
editor.setShowPrintMargin(false);
editor.setOptions({fontSize: "14px"});
if (LOAD_ASYNC) {
editor.getSession().setMode("ace/mode/" + this.get('mode'));
}
editor.on('change', () => {
this._skipContentChangeEvent = true;
this.set('content', editor.getSession().getValue());
this._skipContentChangeEvent = false;
});
editor.$blockScrolling = Infinity;
editor.renderer.setScrollMargin(10,10);
this.$().data('editor', editor);
this._editor = editor;
$(window).off('ace:resize').on('ace:resize', ()=>{
this.appEvents.trigger('ace:resize');
});
if (this.appEvents) {
// xxx: don't run during qunit tests
this.appEvents.on('ace:resize', ()=>this.resize());
}
if (this.get("autofocus")) {
this.send("focus");
}
});
});
},
actions: {
focus() {
if (this._editor) {
this._editor.focus();
this._editor.navigateFileEnd();
}
}
}
});