Add Markdown capability to Comment node

body is rendered in the info tab and can be styled with Markdown

nodes/core/core/90-comment.html

@@ -16,21 +16,21 @@
 
 <script type="text/x-red" data-template-name="comment">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-comment"></i> Comment</label>
+        <label for="node-input-name"><i class="fa fa-comment"></i> Title</label>
         <input type="text" id="node-input-name" placeholder="Comment">
     </div>
     <div class="form-row" style="margin-bottom: 0px;">
-        <label for="node-input-info" style="width: 100% !important;"><i class="fa fa-comments"></i> More</label>
+        <label for="node-input-info" style="width: 100% !important;"><i class="fa fa-comments"></i> Body - will be rendered in info tab.</label>
         <input type="hidden" id="node-input-info" autofocus="autofocus">
     </div>
     <div class="form-row node-text-editor-row">
         <div style="height: 250px;" class="node-text-editor" id="node-input-info-editor" ></div>
     </div>
-    <div class="form-tips">Tip: this isn't meant for "War and Peace" - but useful notes can be kept here.</div>
+    <div class="form-tips">Tip: The text here can be styled as <i><a href="https://help.github.com/articles/markdown-basics/" target="_new">Github flavored Markdown</a></i></div>
 </script>
 
 <script type="text/x-red" data-help-name="comment">
-    <p>Simple comment block.</p>
+    <p>Comment</p>
 </script>
 
 <script type="text/javascript">
@@ -50,6 +50,9 @@
         labelStyle: function() {
             return this.name?"node_label_italic":"";
         },
+        info: function() {
+            return "### "+this.name+"\n"+this.info;
+        },
         oneditprepare: function() {
             $( "#node-input-outputs" ).spinner({
                 min:1

public/index.html

@@ -242,6 +242,7 @@
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <script src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
 <script src="jquery/js/jquery.ui.touch-punch.min.js"></script>
+<script src="marked/marked.min.js"></script>
 <script src="orion/built-editor.min.js"></script>
 <script src="d3.v3.min.js"></script>
 <script src="red/main.js"></script>
@@ -263,5 +264,6 @@
 <script src="red/ui/library.js"></script>
 <script src="red/ui/notifications.js"></script>
 <script src="red/ui/touch/radialMenu.js"></script>
+
 </body>
 </html>

public/red/ui/tab-info.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 RED.sidebar.info = (function() {
-    
+
     var content = document.createElement("div");
     content.id = "tab-info";
     content.style.paddingTop = "4px";
@@ -22,7 +22,7 @@ RED.sidebar.info = (function() {
     content.style.paddingRight = "4px";
 
     RED.sidebar.addTab("info",content);
-    
+
     function jsonFilter(key,value) {
         if (key === "") {
             return value;
@@ -39,7 +39,7 @@ RED.sidebar.info = (function() {
         }
         return value;
     }
-    
+
     function refresh(node) {
         var table = '<table class="node-info"><tbody>';
 
@@ -66,7 +66,7 @@ RED.sidebar.info = (function() {
                     var val = node[n]||"";
                     var type = typeof val;
                     if (type === "string") {
-                        if (val.length > 30) { 
+                        if (val.length > 30) {
                             val = val.substring(0,30)+" ...";
                         }
                         val = val.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
@@ -86,7 +86,7 @@ RED.sidebar.info = (function() {
                         val = JSON.stringify(val,jsonFilter," ");
                         val = val.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
                     }
-                    
+
                     table += "<tr><td>"+n+"</td><td>"+val+"</td></tr>";
                 }
             }
@@ -94,15 +94,26 @@ RED.sidebar.info = (function() {
         table += "</tbody></table><br/>";
         var helpText = $("script[data-help-name|='"+node.type+"']").html()||"";
         table  += '<div class="node-help">'+helpText+"</div>";
-        
+
         if (node._def.info) {
             var info = node._def.info;
-            table += '<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';
+            marked.setOptions({
+                renderer: new marked.Renderer(),
+                gfm: true,
+                tables: true,
+                breaks: false,
+                pedantic: false,
+                sanitize: true,
+                smartLists: true,
+                smartypants: false
+            });
+            table += '<div class="node-help">'+marked(typeof info === "function" ? info.call(node) : info)+'</div>';
+            //table += '<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';
         }
-        
+
         $("#tab-info").html(table);
     }
-    
+
     return {
         refresh:refresh,
         clear: function() {