FIX: ace editor was buggy in the latest Ember release

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

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

app/assets/javascripts/admin/templates/components/ace-editor.hbs

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

app/assets/javascripts/discourse-common/lib/buffered-render.js.es6

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