Add expression editor for jsonata

Gruntfile.js

@@ -161,7 +161,9 @@ module.exports = function(grunt) {
                 files: {
                     'public/red/red.min.js': 'public/red/red.js',
                     'public/red/main.min.js': 'public/red/main.js',
-                    'public/vendor/jsonata/jsonata.min.js': 'editor/vendor/jsonata/jsonata.js'
+                    'public/vendor/jsonata/jsonata.min.js': 'editor/vendor/jsonata/jsonata.js',
+                    'public/vendor/ace/mode-jsonata.js': 'editor/vendor/jsonata/mode-jsonata.js',
+                    'public/vendor/ace/worker-jsonata.js': 'editor/vendor/jsonata/worker-jsonata.js'
                 }
             }
         },

editor/js/ui/common/typedInput.js

@@ -95,7 +95,21 @@
         json: {value:"json",label:"JSON",icon:"red/images/typedInput/json.png", validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}}},
         re: {value:"re",label:"regular expression",icon:"red/images/typedInput/re.png"},
         date: {value:"date",label:"timestamp",hasValue:false},
-        jsonata: {value:"jsonata",label:"expression",icon:"red/images/typedInput/expr.png", validate: function(v) { try{jsonata(v);return true;}catch(e){return false;}}},
+        jsonata: {
+            value: "jsonata",
+            label: "expression",
+            icon: "red/images/typedInput/expr.png",
+            validate: function(v) { try{jsonata(v);return true;}catch(e){return false;}},
+            expand:function() {
+                var that = this;
+                RED.editor.editExpression({
+                    value: this.value(),
+                    complete: function(v) {
+                        that.value(v);
+                    }
+                })
+            }
+        }
     };
     var nlsd = false;
 
@@ -189,7 +203,7 @@
                 that.uiSelect.addClass('red-ui-typedInput-focus');
             });
 
-
+            this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"><i class="fa fa-ellipsis-h"></i></button>').appendTo(this.uiSelect);
 
 
             this.type(this.options.default||this.typeList[0].value);
@@ -323,11 +337,16 @@
                 this.uiSelect.width(this.uiWidth);
             }
             if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) {
-                this.selectTrigger.css('width',"100%");
+                this.selectTrigger.addClass("red-ui-typedInput-full-width");
             } else {
-                this.selectTrigger.width('auto');
+                this.selectTrigger.removeClass("red-ui-typedInput-full-width");
                 var labelWidth = this._getLabelWidth(this.selectTrigger);
                 this.elementDiv.css('left',labelWidth+"px");
+                if (this.optionExpandButton.is(":visible")) {
+                    this.elementDiv.css('right',"22px");
+                } else {
+                    this.elementDiv.css('right','0');
+                }
                 if (this.optionSelectTrigger) {
                     this.optionSelectTrigger.css({'left':(labelWidth)+"px",'width':'calc( 100% - '+labelWidth+'px )'});
                 }
@@ -397,6 +416,9 @@
                         this.selectLabel.text(opt.label);
                     }
                     if (opt.options) {
+                        if (this.optionExpandButton) {
+                            this.optionExpandButton.hide();
+                        }
                         if (this.optionSelectTrigger) {
                             this.optionSelectTrigger.show();
                             this.elementDiv.hide();
@@ -430,6 +452,16 @@
                             }
                             this.elementDiv.show();
                         }
+                        if (opt.expand && typeof opt.expand === 'function') {
+                            this.optionExpandButton.show();
+                            this.optionExpandButton.off('click');
+                            this.optionExpandButton.on('click',function(evt) {
+                                evt.preventDefault();
+                                opt.expand.call(that);
+                            })
+                        } else {
+                            this.optionExpandButton.hide();
+                        }
                         this.element.trigger('change',this.propertyType,this.value());
                     }
                     if (image) {

editor/js/ui/editor.js

@@ -494,12 +494,13 @@ RED.editor = (function() {
     }
 
     function getEditStackTitle() {
-
         var title = '<ul class="editor-tray-breadcrumbs">';
         for (var i=0;i<editStack.length;i++) {
             var node = editStack[i];
             var label = node.type;
-            if (node.type === 'subflow') {
+            if (node.type === '_expression') {
+                label = "Expression editor";
+            } else if (node.type === 'subflow') {
                 label = RED._("subflow.editSubflow",{name:node.name})
             } else if (node.type.indexOf("subflow:")===0) {
                 var subflow = RED.nodes.subflow(node.type.substring(8));
@@ -526,6 +527,33 @@ RED.editor = (function() {
         return title;
     }
 
+    function buildEditForm(tray,formId,type,ns) {
+        var trayBody = tray.find('.editor-tray-body');
+        var dialogForm = $('<form id="'+formId+'" class="form-horizontal"></form>').appendTo(trayBody);
+        dialogForm.html($("script[data-template-name='"+type+"']").html());
+        ns = ns||"node-red";
+        dialogForm.find('[data-i18n]').each(function() {
+            var current = $(this).attr("data-i18n");
+            var keys = current.split(";");
+            for (var i=0;i<keys.length;i++) {
+                var key = keys[i];
+                if (key.indexOf(":") === -1) {
+                    var prefix = "";
+                    if (key.indexOf("[")===0) {
+                        var parts = key.split("]");
+                        prefix = parts[0]+"]";
+                        key = parts[1];
+                    }
+                    keys[i] = prefix+ns+":"+key;
+                }
+            }
+            $(this).attr("data-i18n",keys.join(";"));
+        });
+        $('<input type="text" style="display: none;" />').prependTo(dialogForm);
+        dialogForm.submit(function(e) { e.preventDefault();});
+        return dialogForm;
+    }
+
     function showEditDialog(node) {
         var editing_node = node;
         editStack.push(node);
@@ -763,33 +791,13 @@ RED.editor = (function() {
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                 }
-                var trayBody = tray.find('.editor-tray-body');
-                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
-                dialogForm.html($("script[data-template-name='"+type+"']").html());
                 var ns;
                 if (node._def.set.module === "node-red") {
                     ns = "node-red";
                 } else {
                     ns = node._def.set.id;
                 }
-                dialogForm.find('[data-i18n]').each(function() {
+                var dialogForm = buildEditForm(tray,"dialog-form",type,ns);
-                    var current = $(this).attr("data-i18n");
-                    var keys = current.split(";");
-                    for (var i=0;i<keys.length;i++) {
-                        var key = keys[i];
-                        if (key.indexOf(":") === -1) {
-                            var prefix = "";
-                            if (key.indexOf("[")===0) {
-                                var parts = key.split("]");
-                                prefix = parts[0]+"]";
-                                key = parts[1];
-                            }
-                            keys[i] = prefix+ns+":"+key;
-                        }
-                    }
-                    $(this).attr("data-i18n",keys.join(";"));
-                });
-                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
                 prepareEditDialog(node,node._def,"node-input");
                 dialogForm.i18n();
             },
@@ -882,7 +890,6 @@ RED.editor = (function() {
             },
             open: function(tray) {
                 var trayHeader = tray.find(".editor-tray-header");
-                var trayBody = tray.find(".editor-tray-body");
                 var trayFooter = tray.find(".editor-tray-footer");
 
                 if (node_def.hasUsers !== false) {
@@ -890,21 +897,8 @@ RED.editor = (function() {
                 }
                 trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
 
-                var dialogForm = $('<form id="node-config-dialog-edit-form" class="form-horizontal"></form>').appendTo(trayBody);
+                var dialogForm = buildEditForm(tray,"node-config-dialog-edit-form",type,ns);
-                dialogForm.html($("script[data-template-name='"+type+"']").html());
+
-                dialogForm.find('[data-i18n]').each(function() {
-                    var current = $(this).attr("data-i18n");
-                    if (current.indexOf(":") === -1) {
-                        var prefix = "";
-                        if (current.indexOf("[")===0) {
-                            var parts = current.split("]");
-                            prefix = parts[0]+"]";
-                            current = parts[1];
-                        }
-                        $(this).attr("data-i18n",prefix+ns+":"+current);
-                    }
-                });
-                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
                 prepareEditDialog(editing_config_node,node_def,"node-config-input");
                 if (editing_config_node._def.exclusive) {
                     $("#node-config-dialog-scope").hide();
@@ -1338,30 +1332,7 @@ RED.editor = (function() {
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                 }
-                var trayBody = tray.find('.editor-tray-body');
+                var dialogForm = buildEditForm(tray,"dialog-form","subflow-template");
-                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
-                dialogForm.html($("script[data-template-name='subflow-template']").html());
-                var ns = "node-red";
-                dialogForm.find('[data-i18n]').each(function() {
-                    var current = $(this).attr("data-i18n");
-                    var keys = current.split(";");
-                    for (var i=0;i<keys.length;i++) {
-                        var key = keys[i];
-                        if (key.indexOf(":") === -1) {
-                            var prefix = "";
-                            if (key.indexOf("[")===0) {
-                                var parts = key.split("]");
-                                prefix = parts[0]+"]";
-                                key = parts[1];
-                            }
-                            keys[i] = prefix+ns+":"+key;
-                        }
-                    }
-                    $(this).attr("data-i18n",keys.join(";"));
-                });
-                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
-
-                dialogForm.submit(function(e) { e.preventDefault();});
                 subflowEditor = RED.editor.createEditor({
                     id: 'subflow-input-info-editor',
                     mode: 'ace/mode/markdown',
@@ -1397,6 +1368,78 @@ RED.editor = (function() {
         RED.tray.show(trayOptions);
     }
 
+
+    function editExpression(options) {
+        var value = options.value;
+        var onComplete = options.complete;
+        var type = "_expression"
+        editStack.push({type:type});
+        RED.view.state(RED.state.EDITING);
+        var expressionEditor;
+
+        var trayOptions = {
+            title: getEditStackTitle(),
+            buttons: [
+                {
+                    id: "node-dialog-cancel",
+                    text: RED._("common.label.cancel"),
+                    click: function() {
+                        RED.tray.close();
+                    }
+                },
+                {
+                    id: "node-dialog-ok",
+                    text: RED._("common.label.done"),
+                    class: "primary",
+                    click: function() {
+                        onComplete(expressionEditor.getValue());
+                        RED.tray.close();
+                    }
+                }
+            ],
+            resize: function(dimensions) {
+                editTrayWidthCache[type] = dimensions.width;
+
+                var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                var editorRow = $("#dialog-form>div.node-text-editor-row");
+                var height = $("#dialog-form").height();
+                for (var i=0;i<rows.size();i++) {
+                    height -= $(rows[i]).outerHeight(true);
+                }
+                height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
+                $(".node-text-editor").css("height",height+"px");
+                expressionEditor.resize();
+            },
+            open: function(tray) {
+                var trayBody = tray.find('.editor-tray-body');
+                var dialogForm = buildEditForm(tray,'dialog-form','_expression');
+
+                expressionEditor = RED.editor.createEditor({
+                    id: 'node-input-expression',
+                    value: "",
+                    mode:"ace/mode/jsonata",
+                    options: {
+                        enableBasicAutocompletion:true,
+                        enableSnippets:false,
+                        enableLiveAutocompletion: true
+                    }
+                });
+                expressionEditor.getSession().setValue(value||"",-1);
+
+                dialogForm.i18n();
+
+            },
+            close: function() {
+                editStack.pop();
+            },
+            show: function() {}
+        }
+        if (editTrayWidthCache.hasOwnProperty(type)) {
+            trayOptions.width = editTrayWidthCache[type];
+        }
+        RED.tray.show(trayOptions);
+    }
+
     return {
         init: function() {
             RED.tray.init();
@@ -1413,6 +1456,7 @@ RED.editor = (function() {
         edit: showEditDialog,
         editConfig: showEditConfigNodeDialog,
         editSubflow: showEditSubflowDialog,
+        editExpression: editExpression,
         validateNode: validateNode,
         updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo
 

editor/sass/ace.scss

@@ -0,0 +1,8 @@
+.ace_gutter {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.ace_scroller {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}

editor/sass/style.scss

@@ -21,6 +21,7 @@
 
 @import "jquery";
 @import "bootstrap";
+@import "ace";
 
 @import "dropdownMenu";
 

editor/sass/ui/common/typedInput.scss

@@ -69,6 +69,9 @@
             margin-right:4px;
             margin-top: 1px;
             vertical-align: middle;
+            &.fa-ellipsis-h {
+                top: -1px;
+            }
         }
         &.disabled {
             cursor: default;
@@ -95,6 +98,19 @@
             background: $typedInput-button-background-active;
             text-decoration: none;
         }
+        &.red-ui-typedInput-full-width {
+            width: 100%;
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+    }
+
+    button.red-ui-typedInput-option-expand {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        right: 0;
     }
 
     button.red-ui-typedInput-option-trigger {

editor/templates/index.mst

@@ -159,6 +159,13 @@
     <div class="form-row form-tips" id="subflow-dialog-user-count"></div>
 </script>
 
+<script type="text/x-red" data-template-name="_expression">
+    <div class="form-row node-text-editor-row">
+        <div style="height: 250px;" class="node-text-editor" id="node-input-expression"></div>
+    </div>
+</script>
+
+
 <script src="vendor/vendor.js"></script>
 <script src="vendor/jsonata/jsonata.min.js"></script>
 <script src="vendor/ace/ace.js"></script>

editor/vendor/jsonata/mode-jsonata.js

@@ -0,0 +1,129 @@
+define("ace/mode/jsonata",["require","exports","module","ace/lib/oop","ace/mode/text_highlight_rules","ace/worker/worker_client","ace/mode/text"], function(require, exports, module) {
+    "use strict";
+
+    var oop = require("../lib/oop");
+    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
+    var WorkerClient = require("../worker/worker_client").WorkerClient;
+
+    var JSONataHighlightRules = function() {
+
+        var keywordMapper = this.createKeywordMapper({
+            "keyword.operator":
+                "and|or|in",
+            "constant.language":
+                "null|Infinity|NaN|undefined",
+            "storage.type":
+                "function",
+            "keyword":
+                "$sum|$count|$max|$min|$average|$string|$substring|$substringBefore|"+
+                "$substringAfter|$lowercase|$uppercase|$length|$split|$join|$number|"+
+                "$boolean|$not|$map|$reduce|$keys|$lookup|$append|$exists|$spread"
+        }, "identifier");
+        this.$rules = {
+            "start" : [
+                {
+                    token : "string",
+                    regex : "'(?=.)",
+                    next  : "qstring"
+                },
+                {
+                    token : "string",
+                    regex : '"(?=.)',
+                    next  : "qqstring"
+                },
+                {
+                    token : "constant.numeric", // hex
+                    regex : /0(?:[xX][0-9a-fA-F]+|[bB][01]+)\b/
+                },
+                {
+                    token : "constant.numeric", // float
+                    regex : /[+-]?\d[\d_]*(?:(?:\.\d*)?(?:[eE][+-]?\d+)?)?\b/
+                },
+                {
+                    token : keywordMapper,
+                    regex : "[a-zA-Z\\$_\u00a1-\uffff][a-zA-Z\\d\\$_\u00a1-\uffff]*"
+                },
+                {   token: "keyword",
+                    regex: /λ/
+                },
+                {
+                    token: "constant.language.boolean",
+                    regex: "true|false"
+                },
+                {
+                    token : "punctuation.operator",
+                    regex : /[.](?![.])/
+                },
+                {
+                    token : "keyword.operator",
+                    regex : /\|\||<=|>=|\.\.|\*\*|!=|:=|[=<>`!$%&*+\-~\/^]/,
+                    next  : "start"
+                },
+                {
+                    token : "punctuation.operator",
+                    regex : /[?:,;.]/,
+                    next  : "start"
+                },
+                {
+                    token : "paren.lparen",
+                    regex : /[\[({]/,
+                    next  : "start"
+                },
+                {
+                    token : "paren.rparen",
+                    regex : /[\])}]/
+                }
+            ],
+            "qqstring" : [
+                {
+                    token : "string",
+                    regex : '"|$',
+                    next  : "start"
+                }, {
+                    defaultToken: "string"
+                }
+            ],
+            "qstring" : [
+                {
+                    token : "string",
+                    regex : "'|$",
+                    next  : "start"
+                }, {
+                    defaultToken: "string"
+                }
+            ]
+        };
+    };
+
+    oop.inherits(JSONataHighlightRules, TextHighlightRules);
+
+    var TextMode = require("./text").Mode;
+    var Mode = function() {
+        this.HighlightRules = JSONataHighlightRules;
+    };
+    oop.inherits(Mode, TextMode);
+
+
+    (function() {
+        this.createWorker = function(session) {
+            var worker = new WorkerClient(["ace"], "ace/mode/jsonata_worker", "JSONataWorker");
+            worker.attachToDocument(session.getDocument());
+
+            worker.on("annotate", function(e) {
+                session.setAnnotations(e.data);
+            });
+
+            worker.on("terminate", function() {
+                session.clearAnnotations();
+            });
+
+            return worker;
+        };
+
+
+        this.$id = "ace/mode/jsonata";
+    }).call(Mode.prototype);
+
+    exports.Mode = Mode;
+
+});