EuiCodeEditor: make it take a custom mode

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `getPopoverScreenCoordinates` service function for positioining popover/tooltip content, updated `EuiToolTip` to use it ([#924](https://github.com/elastic/eui/pull/924))
+- Allow `mode` prop in `EuiCodeEditor` to take custom mode object ([#935](https://github.com/elastic/eui/pull/935))
 
 ## [`0.0.54`](https://github.com/elastic/eui/tree/v0.0.54)
 

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

@@ -19,6 +19,10 @@ import ReadOnly from './read_only';
 const readOnlySource = require('!!raw-loader!./read_only');
 const readOnlyrHtml = renderToHtml(ReadOnly);
 
+import CustomMode from './custom_mode';
+const customModeSource = require('!!raw-loader!./custom_mode');
+const customModeHtml = renderToHtml(CustomMode);
+
 export const CodeEditorExample = {
   title: 'Code Editor',
   sections: [{
@@ -54,5 +58,15 @@ export const CodeEditorExample = {
       code: readOnlyrHtml,
     }],
     demo: <ReadOnly />,
+  }, {
+    title: 'Custom mode',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: customModeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: customModeHtml,
+    }],
+    demo: <CustomMode />,
   }],
 };

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

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import 'brace/mode/text';
+
+import {
+  EuiCodeEditor,
+} from '../../../../src/components';
+
+const TextMode = window.ace.acequire('ace/mode/text').Mode;
+class MyCustomAceMode extends TextMode {
+  // Your custom mode definition goes here.
+  // See https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode
+}
+
+export default class extends Component {
+  state = {
+    value: ''
+  };
+
+  render() {
+    return (
+      <EuiCodeEditor
+        mode={new MyCustomAceMode()}
+        theme="github"
+        width="100%"
+        value={this.state.value}
+        setOptions={{ fontSize: '14px' }}
+      />
+    );
+  }
+}

src/components/code_editor/code_editor.js

@@ -72,6 +72,26 @@ export class EuiCodeEditor extends Component {
     });
   }
 
+  isCustomMode() {
+    return typeof this.props.mode === 'object';
+  }
+
+  setCustomMode() {
+    this.aceEditor.editor.getSession().setMode(this.props.mode);
+  }
+
+  componentDidMount() {
+    if (this.isCustomMode()) {
+      this.setCustomMode();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if ((this.props.mode !== prevProps.mode) && this.isCustomMode()) {
+      this.setCustomMode();
+    }
+  }
+
   render() {
     const {
       width,
@@ -136,6 +156,10 @@ export class EuiCodeEditor extends Component {
       </div>
     );
 
+    if (this.isCustomMode()) {
+      delete rest.mode; // Otherwise, the AceEditor component will complain about wanting a string value for the mode prop.
+    }
+
     return (
       <div
         className={classes}
@@ -165,6 +189,14 @@ EuiCodeEditor.propTypes = {
   isReadOnly: PropTypes.bool,
   setOptions: PropTypes.object,
   cursorStart: PropTypes.number,
+
+  /**
+   * Use string for a built-in mode or object for a custom mode
+   */
+  mode: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
 };
 
 EuiCodeEditor.defaultProps = {