code-editor: initial directive for rich code editor (ace)

package.json

@@ -63,6 +63,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "ace-builds": "^1.2.8",
     "eventemitter3": "^2.0.2",
     "gaze": "^1.1.2",
     "grunt-jscs": "3.0.1",

public/app/core/components/code_editor/code_editor.ts

+///<reference path="../../../headers/common.d.ts" />
+
+// import angular from 'angular';
+import coreModule from 'app/core/core_module';
+import ace from 'ace';
+
+// Trick for loading additional modules
+ace.config.setModuleUrl("ace/theme/solarized_dark", "public/vendor/npm/ace-builds/src-noconflict/theme-solarized_dark.js");
+
+let editorTemplate = `
+  <div class="gf-code-editor"></div>
+`;
+
+function link(scope, elem, attrs) {
+  let aceElem = elem.get(0);
+  let codeEditor = ace.edit(aceElem);
+  let editorSession = codeEditor.getSession();
+  codeEditor.setTheme("ace/theme/solarized_dark");
+  codeEditor.setHighlightActiveLine(false);
+  codeEditor.setShowPrintMargin(false);
+
+  codeEditor.setValue(scope.content);
+  codeEditor.clearSelection();
+
+  elem.addClass("gf-code-editor");
+  let textarea = elem.find("textarea");
+  textarea.addClass('gf-form-input width-25');
+  textarea.attr("rows", "4");
+
+  editorSession.on('change', e => {
+    scope.$apply(() => {
+      let newValue = codeEditor.getValue();
+      scope.content = newValue;
+    });
+  });
+
+}
+
+export function codeEditorDirective() {
+  return {
+    restrict: 'E',
+    template: editorTemplate,
+    scope: {
+      content: "="
+    },
+    link: link
+  };
+}
+
+coreModule.directive('codeEditor', codeEditorDirective);

public/app/core/core.ts

@@ -19,6 +19,7 @@ import "./directives/diff-view";
 import './jquery_extended';
 import './partials';
 import './components/jsontree/jsontree';
+import './components/code_editor/code_editor';
 
 import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';

public/app/headers/common.d.ts

@@ -72,3 +72,8 @@ declare module 'd3' {
   var d3: any;
   export default d3;
 }
+
+declare module 'ace' {
+  var ace: any;
+  export default ace;
+}

public/app/system.conf.js

@@ -33,6 +33,7 @@ System.config({
     "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
     "d3": "vendor/d3/d3.js",
     "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
+    "ace": "vendor/npm/ace-builds/src-noconflict/ace"
   },
 
   packages: {
@@ -73,5 +74,9 @@ System.config({
       format: 'global',
       exports: 'Mousetrap'
     },
+    'vendor/npm/ace-builds/src-noconflict/ace.js': {
+      format: 'global',
+      exports: 'ace'
+    }
   }
 });

public/sass/_grafana.scss

@@ -77,6 +77,7 @@
 @import "components/row.scss";
 @import "components/json_explorer.scss";
 @import "components/collapse_box.scss";
+@import "components/code_editor.scss";
 
 // PAGES
 @import "pages/login";

public/sass/components/_code_editor.scss

+.gf-code-editor {
+  min-height: 2.60rem;
+  min-width: 20rem;
+  flex-grow: 1;
+  margin-right: 0.25rem;
+  border: 1px solid #333333;
+
+  &.ace_editor {
+    min-height: 6rem;
+    font-family: monospace;
+    font-size: 1rem;
+  }
+}

tasks/options/copy.js

@@ -19,6 +19,7 @@ module.exports = function(config) {
       cwd: './node_modules',
       expand: true,
       src: [
+        'ace-builds/src-noconflict/**/*',
         'eventemitter3/*.js',
         'systemjs/dist/*.js',
         'es6-promise/**/*',