Refactored text panel to use markdown

panels/text/editor.html

@@ -1,5 +1,5 @@
 <div ng-controller="text">
   <label class="small">Font Size</label> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
-  <label class=small>Content</label>
+  <label class=small>Content (This area uses <a target="_blank" href="http://en.wikipedia.org/wiki/Markdown">Markdown</a>)</label>
   <textarea ng-model="panel.content" rows="6" style="width:95%"></textarea>
 </div>

panels/text/module.html

@@ -1,3 +1,6 @@
 <kibana-panel ng-controller='text' ng-init="init()">
-  <p ng-show='!panel.allowhtml' ng-style="panel.style" ng-bind-html-unsafe="panel.content | striphtml | newlines"></p>
+  <!--<p ng-style="panel.style" ng-bind-html-unsafe="panel.content | striphtml | newlines"></p>-->
+  <markdown>
+    {{panel.content}}
+  </markdown>
 </kibana-panel>

panels/text/module.js

@@ -12,6 +12,26 @@ angular.module('kibana.text', [])
   $scope.init = function() {
   }
 
+}).directive('markdown', function() {
+  return {
+    restrict: 'E',
+    link: function(scope, element, attrs) {
+      scope.$on('render', function() {
+        render_panel();
+      })
+
+      function render_panel() {
+        var scripts = $LAB.script("panels/text/lib/showdown.js")
+        scripts.wait(function(){
+          var converter = new Showdown.converter();
+          var htmlText = converter.makeHtml(scope.panel.content);
+          element.html(htmlText);
+        });
+      }
+
+      render_panel();
+    }
+  }
 })
 .filter('newlines', function(){
   return function (input) {
@@ -19,10 +39,10 @@ angular.module('kibana.text', [])
   }
 })
 .filter('striphtml', function () {
-    return function(text) {
-        return text
-                .replace(/&/g, '&')
-                .replace(/>/g, '>')
-                .replace(/</g, '&lt;');
-    }
+  return function(text) {
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/>/g, '&gt;')
+      .replace(/</g, '&lt;');
+  }
 });