diff --git a/.jshintrc b/.jshintrc
index bc41ce0af..f479939c9 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -4,7 +4,6 @@
"$",
"RSVP",
"Discourse",
- "$LAB",
"Em",
"PreloadStore",
"Handlebars",
diff --git a/app/assets/javascripts/admin/components/ace-editor.js.es6 b/app/assets/javascripts/admin/components/ace-editor.js.es6
new file mode 100644
index 000000000..b974c8aa6
--- /dev/null
+++ b/app/assets/javascripts/admin/components/ace-editor.js.es6
@@ -0,0 +1,51 @@
+/*global ace:true */
+
+import loadScript from 'discourse/lib/load-script';
+
+export default Ember.Component.extend({
+ mode: 'css',
+ classNames: ['ace-wrapper'],
+ _editor: null,
+ _skipContentChangeEvent: null,
+
+ contentChanged: function() {
+ if (this._editor && !this._skipContentChangeEvent) {
+ this._editor.getSession().setValue(this.get('content'));
+ }
+ }.observes('content'),
+
+ render(buffer) {
+ buffer.push("
");
+ if (this.get('content')) {
+ buffer.push(Handlebars.Utils.escapeExpression(this.get('content')));
+ }
+ buffer.push("
");
+ },
+
+ _destroyEditor: function() {
+ if (this._editor) {
+ this._editor.destroy();
+ this._editor = null;
+ }
+ }.on('willDestroyElement'),
+
+ _initEditor: function() {
+ const self = this;
+
+ loadScript("/javascripts/ace/ace.js").then(function() {
+ const editor = ace.edit(self.$('.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;
+ });
+
+ self.$().data('editor', editor);
+ self._editor = editor;
+ });
+
+ }.on('didInsertElement')
+});
diff --git a/app/assets/javascripts/admin/templates/customize_css_html.hbs b/app/assets/javascripts/admin/templates/customize_css_html.hbs
index acff1b73e..e5e08632a 100644
--- a/app/assets/javascripts/admin/templates/customize_css_html.hbs
+++ b/app/assets/javascripts/admin/templates/customize_css_html.hbs
@@ -44,16 +44,16 @@
- {{#if view.stylesheetActive}}{{aceEditor content=selectedItem.stylesheet mode="scss"}}{{/if}}
- {{#if view.headerActive}}{{aceEditor content=selectedItem.header mode="html"}}{{/if}}
- {{#if view.topActive}}{{aceEditor content=selectedItem.top mode="html"}}{{/if}}
- {{#if view.footerActive}}{{aceEditor content=selectedItem.footer mode="html"}}{{/if}}
- {{#if view.headTagActive}}{{aceEditor content=selectedItem.head_tag mode="html"}}{{/if}}
- {{#if view.bodyTagActive}}{{aceEditor content=selectedItem.body_tag mode="html"}}{{/if}}
- {{#if view.mobileStylesheetActive}}{{aceEditor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
- {{#if view.mobileHeaderActive}}{{aceEditor content=selectedItem.mobile_header mode="html"}}{{/if}}
- {{#if view.mobileTopActive}}{{aceEditor content=selectedItem.mobile_top mode="html"}}{{/if}}
- {{#if view.mobileFooterActive}}{{aceEditor content=selectedItem.mobile_footer mode="html"}}{{/if}}
+ {{#if view.stylesheetActive}}{{ace-editor content=selectedItem.stylesheet mode="scss"}}{{/if}}
+ {{#if view.headerActive}}{{ace-editor content=selectedItem.header mode="html"}}{{/if}}
+ {{#if view.topActive}}{{ace-editor content=selectedItem.top mode="html"}}{{/if}}
+ {{#if view.footerActive}}{{ace-editor content=selectedItem.footer mode="html"}}{{/if}}
+ {{#if view.headTagActive}}{{ace-editor content=selectedItem.head_tag mode="html"}}{{/if}}
+ {{#if view.bodyTagActive}}{{ace-editor content=selectedItem.body_tag mode="html"}}{{/if}}
+ {{#if view.mobileStylesheetActive}}{{ace-editor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
+ {{#if view.mobileHeaderActive}}{{ace-editor content=selectedItem.mobile_header mode="html"}}{{/if}}
+ {{#if view.mobileTopActive}}{{ace-editor content=selectedItem.mobile_top mode="html"}}{{/if}}
+ {{#if view.mobileFooterActive}}{{ace-editor content=selectedItem.mobile_footer mode="html"}}{{/if}}