code-editor: initial autocomplete

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

@@ -9,22 +9,27 @@ const ACE_SRC_BASE = "public/vendor/npm/ace-builds/src-noconflict/";
 // Trick for loading additional modules
 // Trick for loading additional modules
 function fixModuleUrl(moduleType, name) {
 function fixModuleUrl(moduleType, name) {
   let aceModeName = `ace/${moduleType}/${name}`;
   let aceModeName = `ace/${moduleType}/${name}`;
-  ace.config.setModuleUrl(aceModeName, ACE_SRC_BASE + `${moduleType}-${name}.js`);
+  let componentName = `${moduleType}-${name}.js`;
+  if (moduleType === 'snippets') {
+    componentName = `${moduleType}/${name}.js`;
+  }
+  ace.config.setModuleUrl(aceModeName, ACE_SRC_BASE + componentName);
 }
 }
 
 
 fixModuleUrl("theme", "solarized_dark");
 fixModuleUrl("theme", "solarized_dark");
+fixModuleUrl("ext", "language_tools");
 
 
-let editorTemplate = `
-  <div class="gf-code-editor"></div>
-`;
+let editorTemplate = `<div></div>`;
 
 
 function link(scope, elem, attrs) {
 function link(scope, elem, attrs) {
   let aceElem = elem.get(0);
   let aceElem = elem.get(0);
   let codeEditor = ace.edit(aceElem);
   let codeEditor = ace.edit(aceElem);
   let editorSession = codeEditor.getSession();
   let editorSession = codeEditor.getSession();
+
   codeEditor.setTheme("ace/theme/solarized_dark");
   codeEditor.setTheme("ace/theme/solarized_dark");
   codeEditor.setHighlightActiveLine(false);
   codeEditor.setHighlightActiveLine(false);
   codeEditor.setShowPrintMargin(false);
   codeEditor.setShowPrintMargin(false);
+  // disable depreacation warning
   codeEditor.$blockScrolling = Infinity;
   codeEditor.$blockScrolling = Infinity;
   setLangMode();
   setLangMode();
 
 
@@ -36,7 +41,7 @@ function link(scope, elem, attrs) {
   textarea.addClass('gf-form-input width-25');
   textarea.addClass('gf-form-input width-25');
   textarea.attr("rows", "4");
   textarea.attr("rows", "4");
 
 
-  editorSession.on('change', e => {
+  editorSession.on('change', (e) => {
     scope.$apply(() => {
     scope.$apply(() => {
       let newValue = codeEditor.getValue();
       let newValue = codeEditor.getValue();
       scope.content = newValue;
       scope.content = newValue;
@@ -47,7 +52,15 @@ function link(scope, elem, attrs) {
     let lang = attrs.mode || 'text';
     let lang = attrs.mode || 'text';
     let aceModeName = `ace/mode/${lang}`;
     let aceModeName = `ace/mode/${lang}`;
     fixModuleUrl("mode", lang);
     fixModuleUrl("mode", lang);
+    fixModuleUrl("snippets", lang);
     editorSession.setMode(aceModeName);
     editorSession.setMode(aceModeName);
+    ace.config.loadModule("ace/ext/language_tools", (language_tools) => {
+      codeEditor.setOptions({
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        enableSnippets: true
+      });
+    });
   }
   }
 }
 }