From e9645045a0bed41524457fc319307a4acc8a1224 Mon Sep 17 00:00:00 2001
From: Mitsuhiro Tanda <mitsuhiro.tanda@gmail.com>
Date: Tue, 24 Oct 2017 02:08:29 +0900
Subject: [PATCH] ace editor for text panel

---
 public/app/core/components/code_editor/code_editor.ts | 2 ++
 public/app/plugins/panel/text/editor.html             | 8 ++++++--
 public/app/plugins/panel/text/module.ts               | 9 ++++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/code_editor/code_editor.ts b/public/app/core/components/code_editor/code_editor.ts
index 2615a635c7e..cc3b1e46ad4 100644
--- a/public/app/core/components/code_editor/code_editor.ts
+++ b/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";
diff --git a/public/app/plugins/panel/text/editor.html b/public/app/plugins/panel/text/editor.html
index 8e1283a39ba..eab53dc7615 100644
--- a/public/app/plugins/panel/text/editor.html
+++ b/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>
diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts
index 5f453aea15b..a3a58e968fc 100644
--- a/public/app/plugins/panel/text/module.ts
+++ b/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) {