From 1665ece04e20a596639f8136b63b91df6734aed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Levert?= <slevert@outlook.com>
Date: Wed, 3 May 2017 13:21:33 -0400
Subject: [PATCH] Adding AceEditor as Code Editor

---
 package.json                                  |  2 ++
 .../components/TextDialog/AceEditor.scss      |  3 +++
 .../components/TextDialog/TextDialog.tsx      | 27 +++++++++++++++----
 3 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 src/controls/PropertyPaneTextDialog/components/TextDialog/AceEditor.scss

diff --git a/package.json b/package.json
index 690969372..753bb7583 100644
--- a/package.json
+++ b/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",
diff --git a/src/controls/PropertyPaneTextDialog/components/TextDialog/AceEditor.scss b/src/controls/PropertyPaneTextDialog/components/TextDialog/AceEditor.scss
new file mode 100644
index 000000000..b1fdb7b33
--- /dev/null
+++ b/src/controls/PropertyPaneTextDialog/components/TextDialog/AceEditor.scss
@@ -0,0 +1,3 @@
+.ace_editor.ace_autocomplete {
+  z-index: 2000000 !important;
+} 
\ No newline at end of file
diff --git a/src/controls/PropertyPaneTextDialog/components/TextDialog/TextDialog.tsx b/src/controls/PropertyPaneTextDialog/components/TextDialog/TextDialog.tsx
index f1cd8bbc9..1760d3176 100644
--- a/src/controls/PropertyPaneTextDialog/components/TextDialog/TextDialog.tsx
+++ b/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 }
-							   value={ this.state.dialogText }
-							   multiline rows={ 20 }
-							   resizable={ true }
-							   onChanged={ this.onDialogTextChanged.bind(this) } />
+					<AceEditor
+						width="100%"
+						mode="html"
+						theme="monokai"
+						enableLiveAutocompletion={ true }
+						showPrintMargin={ false }
+						onChange={ this.onDialogTextChanged.bind(this) }
+						value={ this.state.dialogText }
+						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();
+	}
 }