From ddf31e87b29731e6ce0866ac31499f0d491341b7 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 13 Feb 2015 00:15:07 +0000
Subject: [PATCH] Update core nodes to use ACE editor

---
 nodes/core/core/80-function.html | 70 ++++++++++++++++++--------------
 nodes/core/core/80-template.html | 63 ++++++++++++++++++----------
 nodes/core/core/90-comment.html  | 33 ++++++++-------
 3 files changed, 99 insertions(+), 67 deletions(-)

diff --git a/nodes/core/core/80-function.html b/nodes/core/core/80-function.html
index 695931303..e11e1e242 100644
--- a/nodes/core/core/80-function.html
+++ b/nodes/core/core/80-function.html
@@ -1,5 +1,5 @@
 <!--
-  Copyright 2013, 2014 IBM Corp.
+  Copyright 2013, 2015 IBM Corp.
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -34,22 +34,22 @@
 </script>
 
 <script type="text/x-red" data-help-name="function">
-	<p>A function block where you can write code to do more interesting things.</p>
-	<p>The message is passed in as a JavaScript object called <code>msg</code>.</p>
-	<p>By convention it will have a <code>msg.payload</code> property containing
-	   the body of the message.</p>
-	<p>The function should return the messages it wants to pass on to the next nodes
-	in the flow. It can return:</p>
-	<ul>
-	  <li>a single message object - passed to nodes connected to the first output</li>
-	  <li>an array of message objects - passed to nodes connected to the corresponding outputs</li>
+    <p>A function block where you can write code to do more interesting things.</p>
+    <p>The message is passed in as a JavaScript object called <code>msg</code>.</p>
+    <p>By convention it will have a <code>msg.payload</code> property containing
+       the body of the message.</p>
+    <p>The function should return the messages it wants to pass on to the next nodes
+    in the flow. It can return:</p>
+    <ul>
+      <li>a single message object - passed to nodes connected to the first output</li>
+      <li>an array of message objects - passed to nodes connected to the corresponding outputs</li>
     </ul>
     <p>If any element of the array is itself an array of messages, multiple
-	      messages are sent to the corresponding output.</p>
-	<p>If null is returned, either by itself or as an element of the array, no
-	      message is passed on.</p>
-	<p>See the <a target="_new" href="http://nodered.org/docs/writing-functions.html">online documentation</a> for more help.</p>
-	      
+          messages are sent to the corresponding output.</p>
+    <p>If null is returned, either by itself or as an element of the array, no
+          message is passed on.</p>
+    <p>See the <a target="_new" href="http://nodered.org/docs/writing-functions.html">online documentation</a> for more help.</p>
+
 </script>
 
 <script type="text/javascript">
@@ -68,11 +68,13 @@
             return this.name;
         },
         oneditprepare: function() {
+            var that = this;
             $( "#node-input-outputs" ).spinner({
                 min:1
             });
 
             function functionDialogResize() {
+                that.editor.resize();
                 var rows = $("#dialog-form>div:not(.node-text-editor-row)");
                 var height = $("#dialog-form").height();
                 for (var i=0;i<rows.size();i++) {
@@ -82,7 +84,6 @@
                 height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
                 $(".node-text-editor").css("height",height+"px");
             };
-
             $( "#dialog" ).on("dialogresize", functionDialogResize);
             $( "#dialog" ).one("dialogopen", function(ev) {
                 var size = $( "#dialog" ).dialog('option','sizeCache-function');
@@ -96,25 +97,32 @@
                 var height = $( "#dialog" ).dialog('option','height');
                 $( "#dialog" ).off("dialogresize",functionDialogResize);
             });
-            var that = this;
-            require(["orion/editor/edit"], function(edit) {
-                that.editor = edit({
-                    parent:document.getElementById('node-input-func-editor'),
-                    lang:"js",
-                    contents: $("#node-input-func").val()
-                });
-                RED.library.create({
-                    url:"functions", // where to get the data from
-                    type:"function", // the type of object the library is for
-                    editor:that.editor, // the field name the main text body goes to
-                    fields:['name','outputs']
-                });
-                $("#node-input-name").focus();
 
+            ace.require("ace/ext/language_tools");
+            that.editor = ace.edit('node-input-func-editor');
+            that.editor.setText = that.editor.setValue; // alias to make library work :-)
+            that.editor.getText = that.editor.getValue; // alias to make library work
+            //that.editor.setTheme("ace/theme/solarized_light");
+            //that.editor.setTheme("ace/theme/crimson_editor");
+            //that.editor.setTheme("ace/theme/chrome");
+            that.editor.setTheme("ace/theme/tomorrow");
+            that.editor.getSession().setMode("ace/mode/javascript");
+            that.editor.getSession().setFoldStyle("markbeginend");
+            that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
+            that.editor.$blockScrolling = Infinity;
+            that.editor.setValue($("#node-input-func").val());
+            that.editor.gotoLine(1,1);
+            document.getElementById('node-input-func-editor').style.fontSize='17px';
+            RED.library.create({
+                url:"functions", // where to get the data from
+                type:"function", // the type of object the library is for
+                editor:that.editor, // the field name the main text body goes to
+                fields:['name','outputs']
             });
+            $("#node-input-name").focus();
         },
         oneditsave: function() {
-            $("#node-input-func").val(this.editor.getText())
+            $("#node-input-func").val(this.editor.getValue());
             delete this.editor;
         }
     });
diff --git a/nodes/core/core/80-template.html b/nodes/core/core/80-template.html
index af2f42fe8..c0277064d 100644
--- a/nodes/core/core/80-template.html
+++ b/nodes/core/core/80-template.html
@@ -1,5 +1,5 @@
 <!--
-  Copyright 2013,2014 IBM Corp.
+  Copyright 2013, 2015 IBM Corp.
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -22,13 +22,20 @@
     <div class="form-row" style="margin-bottom: 0px;">
         <label for="node-input-template"><i class="fa fa-file-code-o"></i> Template</label>
         <input type="hidden" id="node-input-template" autofocus="autofocus">
+        <select id="node-input-mark" style="width:110px; float:right;">
+            <option value="handlebars">mustache</option>
+            <option value="html">HTML</option>
+            <option value="json">JSON</option>
+            <option value="markdown">Markdown</option>
+            <option value="text">none</option>
+        </select>
     </div>
     <div class="form-row node-text-editor-row">
         <div style="height: 250px;" class="node-text-editor" id="node-input-template-editor" ></div>
     </div>
     <div class="form-row">
         <label for="node-input-field"><i class="fa fa-edit"></i> Property</label>
-        msg.<input type="text" id="node-input-field" placeholder="payload" style="width: 64%;">
+        msg.<input type="text" id="node-input-field" placeholder="payload" style="width:170px;">
     </div>
 </script>
 
@@ -54,7 +61,8 @@
         defaults: {
             name: {value:""},
             field: {value:"payload"},
-            template: {value:"This is the payload: {{payload}}!"},
+            mark: {value:"handlebars"},
+            template: {value:"This is the payload: {{payload}} !"},
         },
         inputs:1,
         outputs:1,
@@ -63,8 +71,9 @@
             return this.name;
         },
         oneditprepare: function() {
-
+            var that = this;
             function templateDialogResize() {
+                that.editor.resize();
                 var rows = $("#dialog-form>div:not(.node-text-editor-row)");
                 var height = $("#dialog-form").height();
                 for (var i=0;i<rows.size();i++) {
@@ -74,7 +83,6 @@
                 height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
                 $(".node-text-editor").css("height",height+"px");
             };
-
             $( "#dialog" ).on("dialogresize", templateDialogResize);
             $( "#dialog" ).one("dialogopen", function(ev) {
                 var size = $( "#dialog" ).dialog('option','sizeCache-template');
@@ -88,25 +96,38 @@
                 var height = $( "#dialog" ).dialog('option','height');
                 $( "#dialog" ).off("dialogresize",templateDialogResize);
             });
-
-            var that = this;
-            require(["orion/editor/edit"], function(edit) {
-                that.editor = edit({
-                    parent:document.getElementById('node-input-template-editor'),
-                    lang:"html",
-                    contents: $("#node-input-template").val()
-                });
-                RED.library.create({
-                    url:"templates", // where to get the data from
-                    type:"template", // the type of object the library is for
-                    editor:that.editor, // the field name the main text body goes to
-                    fields:['name','field']
-                });
-                $("#node-input-name").focus();
+            ace.require("ace/ext/language_tools");
+            that.editor = ace.edit('node-input-template-editor');
+            that.editor.setText = that.editor.setValue; // alias to make library work :-)
+            that.editor.getText = that.editor.getValue; // alias to make library work
+            //that.editor.setTheme("ace/theme/solarized_light");
+            //that.editor.setTheme("ace/theme/crimson_editor");
+            //that.editor.setTheme("ace/theme/chrome");
+            that.editor.setTheme("ace/theme/tomorrow");
+            that.editor.getSession().setMode("ace/mode/html");
+            that.editor.getSession().setFoldStyle("markbeginend");
+            that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
+            that.editor.$blockScrolling = Infinity;
+            that.editor.setValue($("#node-input-template").val());
+            that.editor.gotoLine(1);
+            document.getElementById('node-input-template-editor').style.fontSize='17px';
+            RED.library.create({
+                url:"functions", // where to get the data from
+                type:"function", // the type of object the library is for
+                editor:that.editor, // the field name the main text body goes to
+                fields:['name','outputs']
+            });
+            $("#node-input-name").focus();
+            $("#node-input-mark").change(function() {
+                var mod = "ace/mode/"+$("#node-input-mark").val();
+                that.editor.getSession().setMode({
+                   path: mod,
+                   v: Date.now()
+                })
             });
         },
         oneditsave: function() {
-            $("#node-input-template").val(this.editor.getText())
+            $("#node-input-template").val(this.editor.getValue())
             delete this.editor;
         }
     });
diff --git a/nodes/core/core/90-comment.html b/nodes/core/core/90-comment.html
index af03f9f0d..032955d6d 100644
--- a/nodes/core/core/90-comment.html
+++ b/nodes/core/core/90-comment.html
@@ -1,5 +1,5 @@
 <!--
-  Copyright 2013 IBM Corp.
+  Copyright 2013, 2015 IBM Corp.
 
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
@@ -26,7 +26,7 @@
     <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: 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>
+    <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 flavoured Markdown</a></i></div>
 </script>
 
 <script type="text/x-red" data-help-name="comment">
@@ -51,13 +51,17 @@
             return this.name?"node_label_italic":"";
         },
         info: function() {
-            return "### "+this.name+"\n"+this.info;
+            var t = this.name || "Comment node";
+            var b = this.info || "Use this node to add simple documentation.\n\nAnything you add will be rendered in this info panel.\n\nYou may use Markdown syntax to **enhance** the *presentation*.";
+            return "### "+t+"\n"+b;
         },
         oneditprepare: function() {
+            var that = this;
             $( "#node-input-outputs" ).spinner({
                 min:1
             });
             function functionDialogResize() {
+                that.editor.resize();
                 var rows = $("#dialog-form>div:not(.node-text-editor-row)");
                 var height = $("#dialog-form").height();
                 for (var i=0;i<rows.size();i++) {
@@ -80,20 +84,19 @@
                 var height = $( "#dialog" ).dialog('option','height');
                 $( "#dialog" ).off("dialogresize",functionDialogResize);
             });
-            var that = this;
-            require(["orion/editor/edit"], function(edit) {
-                that.editor = edit({
-                    parent:document.getElementById('node-input-info-editor'),
-                    lang:"text",
-                    showLinesRuler:false,
-                    showFoldingRuler:false,
-                    contents: $("#node-input-info").val()
-                });
-                $("#node-input-name").focus();
-            });
+            ace.require("ace/ext/language_tools");
+            that.editor = ace.edit('node-input-info-editor');
+            that.editor.setTheme("ace/theme/chrome");
+            that.editor.getSession().setMode("ace/mode/markdown");
+            that.editor.getSession().setFoldStyle("markbeginend");
+            that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
+            that.editor.$blockScrolling = Infinity;
+            that.editor.setValue($("#node-input-info").val());
+            that.editor.gotoLine(1);
+            document.getElementById('node-input-info-editor').style.fontSize='17px';
         },
         oneditsave: function() {
-            $("#node-input-info").val(this.editor.getText());
+            $("#node-input-info").val(this.editor.getValue());
             delete this.editor;
         }
     });