Use codemirror directly without ui-codemirror

rd_ui/app/index.html

@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="/bower_components/angular-ui-select/dist/select.css">
     <link rel="stylesheet" href="/bower_components/pace/themes/pace-theme-minimal.css">
     <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css">
+    <link rel="stylesheet" href="/bower_components/codemirror/addon/hint/show-hint.css">
     <link rel="stylesheet" href="/styles/redash.css">
     <!-- endbuild -->
 </head>
@@ -105,9 +106,10 @@
 <script src="/bower_components/codemirror/lib/codemirror.js"></script>
 <script src="/bower_components/codemirror/addon/edit/matchbrackets.js"></script>
 <script src="/bower_components/codemirror/addon/edit/closebrackets.js"></script>
+<script src="/bower_components/codemirror/addon/hint/show-hint.js"></script>
+<script src="/bower_components/codemirror/addon/hint/anyword-hint.js"></script>
 <script src="/bower_components/codemirror/mode/sql/sql.js"></script>
 <script src="/bower_components/codemirror/mode/javascript/javascript.js"></script>
-<script src="/bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
 <script src="/bower_components/highcharts/highcharts.js"></script>
 <script src="/bower_components/highcharts/modules/exporting.js"></script>
 <script src="/bower_components/gridster/dist/jquery.gridster.js"></script>

rd_ui/app/scripts/app.js

@@ -6,7 +6,6 @@ angular.module('redash', [
     'redash.services',
     'redash.renderers',
     'redash.visualization',
-    'ui.codemirror',
     'highchart',
     'ui.select2',
     'angular-growl',

rd_ui/app/scripts/directives/query_directives.js

@@ -65,26 +65,49 @@
         'query': '=',
         'lock': '='
       },
-      template: '<textarea\
-                  ui-codemirror="editorOptions"\
-                  ng-model="query.query">',
+      template: '<textarea></textarea>',
       link: {
-        pre: function ($scope) {
+        pre: function ($scope, element) {
+          var textarea = element.children()[0];
           $scope.editorOptions = {
             mode: 'text/x-sql',
             lineWrapping: true,
             lineNumbers: true,
             readOnly: false,
             matchBrackets: true,
-            autoCloseBrackets: true
+            autoCloseBrackets: true,
+            extraKeys: {"Ctrl-Space": "autocomplete"}
           };
 
-          $scope.$watch('lock', function (locked) {
-            $scope.editorOptions.readOnly = locked ? 'nocursor' : false;
+          CodeMirror.commands.autocomplete = function(cm) {
+            CodeMirror.showHint(cm, CodeMirror.hint.anyword);
+          };
+
+          var codemirror = CodeMirror.fromTextArea(textarea, $scope.editorOptions);
+
+          codemirror.on('change', function(instance) {
+            var newValue = instance.getValue();
+
+            if (newValue !== $scope.query.query) {
+              $scope.$evalAsync(function() {
+                $scope.query.query = newValue;
+              });
+            }
           });
-        },
+
+          $scope.$watch('query.query', function (newValue, oldValue) {
+            if ($scope.query.query !== codemirror.getValue()) {
+              codemirror.setValue($scope.query.query);
+            }
+          });
+
+          $scope.$watch('lock', function (locked) {
+            var readOnly = locked ? 'nocursor' : false;
+            codemirror.setOption('readOnly', readOnly);
+          });
+        }
       }
-    }
+    };
   }
 
   function queryFormatter($http) {

rd_ui/bower.json

@@ -12,7 +12,7 @@
     "es5-shim": "2.0.8",
     "angular-moment": "0.2.0",
     "moment": "2.1.0",
-    "angular-ui-codemirror": "0.2.3",
+    "codemirror": "4.8.0",
     "highcharts": "3.0.10",
     "underscore": "1.5.1",
     "pivottable": "~1.1.1",