Adding AceEditor as Code Editor

package.json

@@ -16,6 +16,8 @@
     "@types/react-addons-update": "0.14.14",
     "@types/react-dom": "0.14.18",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "brace": "^0.10.0",
+    "react-ace": "^4.2.1",
     "handlebars": "^4.0.6",
     "handlebars-helpers": "^0.8.2",
     "moment": "^2.18.1",

src/controls/PropertyPaneTextDialog/components/TextDialog/AceEditor.scss

@@ -0,0 +1,3 @@
+.ace_editor.ace_autocomplete {
+  z-index: 2000000 !important;
+} 

src/controls/PropertyPaneTextDialog/components/TextDialog/TextDialog.tsx

@@ -4,7 +4,14 @@ import { Button, ButtonType, Label } 			from 'office-ui-fabric-react';
 import { TextField } 							from 'office-ui-fabric-react';
 import { ITextDialogProps }                  	from './ITextDialogProps';
 import { ITextDialogState }                  	from './ITextDialogState';
+import AceEditor 								from 'react-ace';
 import styles                                   from './TextDialog.module.scss';
+import './AceEditor.scss';
+
+import 'brace';
+import 'brace/mode/html';
+import 'brace/theme/monokai';
+import 'brace/ext/language_tools';
 
 export class TextDialog extends React.Component<ITextDialogProps, ITextDialogState> {
 
@@ -83,11 +90,16 @@ export class TextDialog extends React.Component<ITextDialogProps, ITextDialogSta
 						isBlocking={ true }
 						containerClassName={ 'ms-dialogMainOverride ' + styles.textDialog }>
 				
-					<TextField placeholder={ this.props.strings.dialogTextBoxPlaceholder }
+					<AceEditor
+						width="100%"
+						mode="html"
+						theme="monokai"
+						enableLiveAutocompletion={ true }
+						showPrintMargin={ false }
+						onChange={ this.onDialogTextChanged.bind(this) }
 						value={ this.state.dialogText }
-							   multiline rows={ 20 }
-							   resizable={ true }
-							   onChanged={ this.onDialogTextChanged.bind(this) } />
+						name="CodeEditor"
+						editorProps={{$blockScrolling: 0}} />
 
 					<DialogFooter>
 						<Button buttonType={ ButtonType.primary } onClick={ this.saveDialog.bind(this) }>{ this.props.strings.saveButtonText }</Button>
@@ -97,4 +109,9 @@ export class TextDialog extends React.Component<ITextDialogProps, ITextDialogSta
             </div>
         );
     }
+
+	private editorDidMount(editor, monaco) {
+		console.log('editorDidMount', editor);
+		editor.focus();
+	}
 }