Don't exit EuiCodeEditor when the ESCAPE key is being used to dismis…

…s the autocompletion menu. (#363)

* Add autocompletion to EuiCodeEditor example.
* Don't exit EuiCodeEditor when the ESCAPE key is being used to dismiss the autocompletion menu.

src-docs/src/views/code_editor/code_editor.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 
-import 'brace/mode/less';
 import 'brace/theme/github';
+import 'brace/mode/javascript';
+import 'brace/snippets/javascript';
+import 'brace/ext/language_tools';
 
 import {
   EuiCodeEditor,
@@ -19,12 +21,17 @@ export default class extends Component {
   render() {
     return (
       <EuiCodeEditor
-        mode="less"
+        mode="javascript"
         theme="github"
         width="100%"
         value={this.state.value}
         onChange={this.onChange}
-        setOptions={{ fontSize: '14px' }}
+        setOptions={{
+          fontSize: '14px',
+          enableBasicAutocompletion: true,
+          enableSnippets: true,
+          enableLiveAutocompletion: true,
+        }}
         onBlur={() => { console.log('blur'); }}
       />
     );

src/components/code_editor/code_editor.js

@@ -24,10 +24,14 @@ export class EuiCodeEditor extends Component {
 
   onKeydownAce = (ev) => {
     if (ev.keyCode === keyCodes.ESCAPE) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      this.stopEditing();
-      this.editorHint.focus();
+      // If the autocompletion context menu is open then we want to let ESCAPE close it but
+      // **not** exit out of editing mode.
+      if (!this.aceEditor.editor.completer) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.stopEditing();
+        this.editorHint.focus();
+      }
     }
   }