FIX: ace editor was buggy in the latest Ember release

This commit is contained in:
Robin Ward
2016-11-28 11:29:56 -05:00
parent 6edd3c347c
commit d9cf9e2fb1
3 changed files with 21 additions and 33 deletions

View File

@ -1,26 +1,17 @@
/* global ace:true */
import loadScript from 'discourse/lib/load-script'; import loadScript from 'discourse/lib/load-script';
import { escapeExpression } from 'discourse/lib/utilities'; import { observes } from 'ember-addons/ember-computed-decorators';
import { bufferedRender } from 'discourse-common/lib/buffered-render';
export default Ember.Component.extend(bufferedRender({ export default Ember.Component.extend({
mode: 'css', mode: 'css',
classNames: ['ace-wrapper'], classNames: ['ace-wrapper'],
_editor: null, _editor: null,
_skipContentChangeEvent: null, _skipContentChangeEvent: null,
contentChanged: function() { @observes('content')
contentChanged() {
if (this._editor && !this._skipContentChangeEvent) { if (this._editor && !this._skipContentChangeEvent) {
this._editor.getSession().setValue(this.get('content')); this._editor.getSession().setValue(this.get('content'));
} }
}.observes('content'),
buildBuffer(buffer) {
buffer.push("<div class='ace'>");
if (this.get('content')) {
buffer.push(escapeExpression(this.get('content')));
}
buffer.push("</div>");
}, },
_destroyEditor: function() { _destroyEditor: function() {
@ -40,31 +31,30 @@ export default Ember.Component.extend(bufferedRender({
} }
}, },
_initEditor: function() { didInsertElement() {
const self = this; this._super();
loadScript("/javascripts/ace/ace.js", { scriptTag: true }).then(function() { loadScript("/javascripts/ace/ace.js", { scriptTag: true }).then(() => {
ace.require(['ace/ace'], function(loadedAce) { window.ace.require(['ace/ace'], loadedAce => {
const editor = loadedAce.edit(self.$('.ace')[0]); const editor = loadedAce.edit(this.$('.ace')[0]);
editor.setTheme("ace/theme/chrome"); editor.setTheme("ace/theme/chrome");
editor.setShowPrintMargin(false); editor.setShowPrintMargin(false);
editor.getSession().setMode("ace/mode/" + self.get('mode')); editor.getSession().setMode("ace/mode/" + this.get('mode'));
editor.on('change', function() { editor.on('change', () => {
self._skipContentChangeEvent = true; this._skipContentChangeEvent = true;
self.set('content', editor.getSession().getValue()); this.set('content', editor.getSession().getValue());
self._skipContentChangeEvent = false; this._skipContentChangeEvent = false;
}); });
editor.$blockScrolling = Infinity; editor.$blockScrolling = Infinity;
self.$().data('editor', editor); this.$().data('editor', editor);
self._editor = editor; this._editor = editor;
if (self.appEvents) { if (this.appEvents) {
// xxx: don't run during qunit tests // xxx: don't run during qunit tests
self.appEvents.on('ace:resize', self, self.resize); this.appEvents.on('ace:resize', self, self.resize);
} }
}); });
}); });
}
}.on('didInsertElement') });
}));

View File

@ -0,0 +1 @@
<div class='ace'>{{content}}</div>

View File

@ -2,10 +2,7 @@
// In the long term we'll want to remove this. // In the long term we'll want to remove this.
const Mixin = { const Mixin = {
__bufferTimeout: null,
_customRender() { _customRender() {
Ember.run.cancel(this.__bufferTimeout);
if (!this.element || this.isDestroying || this.isDestroyed) { return; } if (!this.element || this.isDestroying || this.isDestroyed) { return; }
const buffer = []; const buffer = [];