Merge pull request #9698 from mtanda/text_ace_editor

[Feature Request] ace editor for text panel

public/app/core/components/code_editor/code_editor.ts

@@ -36,6 +36,8 @@ import 'brace/mode/text';
 import 'brace/snippets/text';
 import 'brace/mode/sql';
 import 'brace/snippets/sql';
+import 'brace/mode/markdown';
+import 'brace/snippets/markdown';
 
 const DEFAULT_THEME_DARK = "ace/theme/grafana-dark";
 const DEFAULT_THEME_LIGHT = "ace/theme/textmate";

public/app/plugins/panel/text/editor.html

@@ -15,5 +15,9 @@
 	(This area uses <a target="_blank" href="http://en.wikipedia.org/wiki/Markdown">Markdown</a>. HTML is not supported)
 </span>
 
-<textarea class="gf-form-input" ng-model="ctrl.panel.content" rows="20" style="width:95%" give-focus="true" ng-change="ctrl.render()" ng-model-onblur>
-</textarea>
+<div class="gf-form-inline">
+	<div class="gf-form gf-form--grow">
+		<code-editor content="ctrl.panel.content" rows="20" on-change="ctrl.render()" data-mode="markdown" code-editor-focus="true">
+		</code-editor>
+	</div>
+</div>

public/app/plugins/panel/text/module.ts

@@ -23,6 +23,11 @@ export class TextPanelCtrl extends PanelCtrl {
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
     this.events.on('refresh', this.onRefresh.bind(this));
     this.events.on('render', this.onRender.bind(this));
+    $scope.$watch('ctrl.panel.content',
+     _.throttle(() => {
+       this.render();
+     }, 1000)
+    );
   }
 
   onInitEditMode() {
@@ -66,7 +71,9 @@ export class TextPanelCtrl extends PanelCtrl {
       });
     }
 
-    this.updateContent(this.remarkable.render(content));
+    this.$scope.$applyAsync(() => {
+      this.updateContent(this.remarkable.render(content));
+    });
   }
 
   updateContent(html) {