First pass on the autocomplete.

package.json

@@ -275,7 +275,6 @@
     "raw-loader": "^3.1.0",
     "re2": "^1.15.4",
     "react": "^16.12.0",
-    "react-ace": "^9.2.1",
     "react-color": "^2.13.8",
     "react-datetime": "^2.14.0",
     "react-dom": "^16.12.0",

x-pack/plugins/osquery/public/editor/index.tsx

@@ -5,16 +5,17 @@
  */
 
 import React, { useCallback } from 'react';
-import AceEditor from 'react-ace';
+import { EuiCodeEditor } from '@elastic/eui';
+import 'brace/mode/sql';
+import 'brace/theme/tomorrow';
+import 'brace/ext/language_tools';
 
-import 'ace-builds/src-min-noconflict/ext-searchbox';
-import 'ace-builds/src-min-noconflict/ext-language_tools';
-import 'ace-builds/src-noconflict/mode-sql';
-import 'ace-builds/src-noconflict/theme-tomorrow';
+import './osquery_mode';
 
 const EDITOR_SET_OPTIONS = {
-  enableBasicAutocompletion: true,
   // useWorker: false,
+  enableBasicAutocompletion: true,
+  enableLiveAutocompletion: true,
 };
 
 interface OsqueryEditorProps {
@@ -32,9 +33,9 @@ const OsqueryEditorComponent: React.FC<OsqueryEditorProps> = ({ defaultValue, on
   );
 
   return (
-    <AceEditor
+    <EuiCodeEditor
       value={defaultValue}
-      mode="sql"
+      mode="osquery"
       theme="tomorrow"
       onChange={handleChange}
       name="osquery_editor"

x-pack/plugins/osquery/public/editor/osquery_mode.ts

@@ -0,0 +1,135 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { osqueryTableNames } from './osquery_tables';
+
+ace.define(
+  'ace/mode/osquery_highlight_rules',
+  ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/sql_highlight_rules'],
+  function (acequire, exports, module) {
+    'use strict';
+
+    const oop = acequire('../lib/oop');
+    const SqlHighlightRules = acequire('./sql_highlight_rules').SqlHighlightRules;
+
+    const OsqueryHighlightRules = function () {
+      const keywords =
+        'select|insert|update|delete|from|where|and|or|group|by|order|limit|offset|having|as|case|' +
+        'when|else|end|type|left|right|join|on|outer|desc|asc|union|create|table|primary|key|if|' +
+        'foreign|not|references|default|null|inner|cross|natural|database|drop|grant';
+
+      const builtinConstants = 'true|false';
+
+      const builtinFunctions =
+        'avg|count|first|last|max|min|sum|ucase|lcase|mid|len|round|rank|now|format|' +
+        'coalesce|ifnull|isnull|nvl';
+
+      const dataTypes =
+        'int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp|' +
+        'money|real|number|integer';
+
+      const osqueryTables = osqueryTableNames.join('|');
+
+      const keywordMapper = this.createKeywordMapper(
+        {
+          'osquery-token': osqueryTables,
+          'support.function': builtinFunctions,
+          keyword: keywords,
+          'constant.language': builtinConstants,
+          'storage.type': dataTypes,
+        },
+        'identifier',
+        true
+      );
+
+      this.$rules = {
+        start: [
+          {
+            token: 'comment',
+            regex: '--.*$',
+          },
+          {
+            token: 'comment',
+            start: '/\\*',
+            end: '\\*/',
+          },
+          {
+            token: 'string', // " string
+            regex: '".*?"',
+          },
+          {
+            token: 'string', // ' string
+            regex: "'.*?'",
+          },
+          {
+            token: 'constant.numeric', // float
+            regex: '[+-]?\\d+(?:(?:\\.\\d*)?(?:[eE][+-]?\\d+)?)?\\b',
+          },
+          {
+            token: keywordMapper,
+            regex: '[a-zA-Z_$][a-zA-Z0-9_$]*\\b',
+          },
+          {
+            token: 'keyword.operator',
+            regex: '\\+|\\-|\\/|\\/\\/|%|<@>|@>|<@|&|\\^|~|<|>|<=|=>|==|!=|<>|=',
+          },
+          {
+            token: 'paren.lparen',
+            regex: '[\\(]',
+          },
+          {
+            token: 'paren.rparen',
+            regex: '[\\)]',
+          },
+          {
+            token: 'text',
+            regex: '\\s+',
+          },
+        ],
+      };
+
+      this.normalizeRules();
+    };
+
+    oop.inherits(OsqueryHighlightRules, SqlHighlightRules);
+
+    exports.OsqueryHighlightRules = OsqueryHighlightRules;
+  }
+);
+
+ace.define(
+  'ace/mode/osquery',
+  [
+    'require',
+    'exports',
+    'module',
+    'ace/lib/oop',
+    'ace/mode/sql',
+    'ace/mode/osquery_highlight_rules',
+    'ace/range',
+  ],
+  function (acequire, exports, module) {
+    'use strict';
+
+    const oop = acequire('../lib/oop');
+    const TextMode = acequire('./sql').Mode;
+    const OsqueryHighlightRules = acequire('./osquery_highlight_rules').OsqueryHighlightRules;
+    const Range = acequire('../range').Range;
+
+    const Mode = function () {
+      this.HighlightRules = OsqueryHighlightRules;
+    };
+    oop.inherits(Mode, TextMode);
+
+    (function () {
+      this.lineCommentStart = '--';
+
+      this.$id = 'ace/mode/osquery';
+    }.call(Mode.prototype));
+
+    exports.Mode = Mode;
+  }
+);