@node-red/editor-client 4.0.0-beta.4 → 4.0.1

package/public/red/red.js

@@ -6757,6 +6757,13 @@ RED.nodes = (function() {
             } else {
                 delete n.g
             }
+            // If importing into a subflow, ensure an outbound-link doesn't get added
+            if (activeSubflow && /^link /.test(n.type) && n.links) {
+                n.links = n.links.filter(function(id) {
+                    const otherNode = node_map[id] || RED.nodes.node(id);
+                    return (otherNode && otherNode.z === activeWorkspace);
+                });
+            }
             for (var d3 in n._def.defaults) {
                 if (n._def.defaults.hasOwnProperty(d3)) {
                     if (n._def.defaults[d3].type) {
@@ -6780,14 +6787,6 @@ RED.nodes = (function() {
                     }
                 }
             }
-            // If importing into a subflow, ensure an outbound-link doesn't
-            // get added
-            if (activeSubflow && /^link /.test(n.type) && n.links) {
-                n.links = n.links.filter(function(id) {
-                    const otherNode = node_map[id] || RED.nodes.node(id);
-                    return (otherNode && otherNode.z === activeWorkspace)
-                });
-            }
         }
         for (i=0;i<new_subflows.length;i++) {
             n = new_subflows[i];
@@ -10129,11 +10128,25 @@ RED.utils = (function() {
         return parts;
     }
 
-    function validatePropertyExpression(str) {
+    /**
+     * Validate a property expression
+     * @param {*} str - the property value
+     * @returns {boolean|string} whether the node proprty is valid. `true`: valid `false|String`: invalid
+     */
+    function validatePropertyExpression(str, opt) {
         try {
-            var parts = normalisePropertyExpression(str);
+            const parts = normalisePropertyExpression(str);
             return true;
         } catch(err) {
+            // If the validator has opt, it is a 3.x validator that
+            // can return a String to mean 'invalid' and provide a reason
+            if (opt) {
+                if (opt.label) {
+                    return opt.label + ': ' + err.message;
+                }
+                return err.message;
+            }
+            // Otherwise, a 2.x returns a false value
             return false;
         }
     }
@@ -10151,22 +10164,24 @@ RED.utils = (function() {
             // Allow ${ENV_VAR} value
             return true
         }
-        let error
+        let error;
         if (propertyType === 'json') {
             try {
                 JSON.parse(propertyValue);
             } catch(err) {
                 error = RED._("validator.errors.invalid-json", {
                     error: err.message
-                })
+                });
             }
         } else if (propertyType === 'msg' || propertyType === 'flow' || propertyType === 'global' ) {
-            if (!RED.utils.validatePropertyExpression(propertyValue)) {
-                error = RED._("validator.errors.invalid-prop")
+            // To avoid double label
+            const valid = RED.utils.validatePropertyExpression(propertyValue, opt ? {} : null);
+            if (valid !== true) {
+                error = opt ? valid : RED._("validator.errors.invalid-prop");
             }
         } else if (propertyType === 'num') {
             if (!/^NaN$|^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$|^[+-]?(0b|0B)[01]+$|^[+-]?(0o|0O)[0-7]+$|^[+-]?(0x|0X)[0-9a-fA-F]+$/.test(propertyValue)) {
-                error = RED._("validator.errors.invalid-num")
+                error = RED._("validator.errors.invalid-num");
             }
         } else if (propertyType === 'jsonata') {
             try { 
@@ -10174,16 +10189,16 @@ RED.utils = (function() {
             } catch(err) {
                 error = RED._("validator.errors.invalid-expr", {
                     error: err.message
-                })
+                });
             }
         }
         if (error) {
             if (opt && opt.label) {
-                return opt.label+': '+error
+                return opt.label + ': ' + error;
             }
-            return error
+            return error;
         }
-        return true
+        return true;
     }
 
     function getMessageProperty(msg,expr) {
@@ -15231,61 +15246,64 @@ RED.stack = (function() {
         { value: "_session", source: ["websocket out","tcp out"] },
     ]
     var allOptions = {
-        msg: {value:"msg",label:"msg.",validate:RED.utils.validatePropertyExpression, autoComplete: msgAutoComplete(msgCompletions)},
-        flow: {value:"flow",label:"flow.",hasValue:true,
-            options:[],
-            validate:RED.utils.validatePropertyExpression,
+        msg: { value: "msg", label: "msg.", validate: RED.utils.validatePropertyExpression, autoComplete: msgAutoComplete(msgCompletions) },
+        flow: { value: "flow", label: "flow.", hasValue: true,
+            options: [],
+            validate: RED.utils.validatePropertyExpression,
             parse: contextParse,
             export: contextExport,
             valueLabel: contextLabel,
             autoComplete: contextAutoComplete
         },
-        global: {value:"global",label:"global.",hasValue:true,
-            options:[],
-            validate:RED.utils.validatePropertyExpression,
+        global: {
+            value: "global", label: "global.", hasValue: true,
+            options: [],
+            validate: RED.utils.validatePropertyExpression,
             parse: contextParse,
             export: contextExport,
             valueLabel: contextLabel,
             autoComplete: contextAutoComplete
         },
-        str: {value:"str",label:"string",icon:"red/images/typedInput/az.svg"},
-        num: {value:"num",label:"number",icon:"red/images/typedInput/09.svg",validate: function(v) {
-            return (true === RED.utils.validateTypedProperty(v, "num"));
+        str: { value: "str", label: "string", icon: "red/images/typedInput/az.svg" },
+        num: { value: "num", label: "number", icon: "red/images/typedInput/09.svg", validate: function (v, o) {
+            return RED.utils.validateTypedProperty(v, "num", o);
         } },
-        bool: {value:"bool",label:"boolean",icon:"red/images/typedInput/bool.svg",options:["true","false"]},
+        bool: { value: "bool", label: "boolean", icon: "red/images/typedInput/bool.svg", options: ["true", "false"] },
         json: {
-            value:"json",
-            label:"JSON",
-            icon:"red/images/typedInput/json.svg",
-            validate: function(v) { try{JSON.parse(v);return true;}catch(e){return false;}},
-            expand: function() {
+            value: "json",
+            label: "JSON",
+            icon: "red/images/typedInput/json.svg",
+            validate: function (v, o) {
+                return RED.utils.validateTypedProperty(v, "json", o);
+            },
+            expand: function () {
                 var that = this;
                 var value = this.value();
                 try {
-                    value = JSON.stringify(JSON.parse(value),null,4);
-                } catch(err) {
+                    value = JSON.stringify(JSON.parse(value), null, 4);
+                } catch (err) {
                 }
                 RED.editor.editJSON({
                     value: value,
                     stateId: RED.editor.generateViewStateId("typedInput", that, "json"),
                     focus: true,
-                    complete: function(v) {
+                    complete: function (v) {
                         var value = v;
                         try {
                             value = JSON.stringify(JSON.parse(v));
-                        } catch(err) {
+                        } catch (err) {
                         }
                         that.value(value);
                     }
                 })
             }
         },
-        re: {value:"re",label:"regular expression",icon:"red/images/typedInput/re.svg"},
+        re: { value: "re", label: "regular expression", icon: "red/images/typedInput/re.svg" },
         date: {
-            value:"date",
-            label:"timestamp",
-            icon:"fa fa-clock-o",
-            options:[
+            value: "date",
+            label: "timestamp",
+            icon: "fa fa-clock-o",
+            options: [
                 {
                     label: 'milliseconds since epoch',
                     value: ''
@@ -15304,15 +15322,17 @@ RED.stack = (function() {
             value: "jsonata",
             label: "expression",
             icon: "red/images/typedInput/expr.svg",
-            validate: function(v) { try{jsonata(v);return true;}catch(e){return false;}},
-            expand:function() {
+            validate: function (v, o) {
+                return RED.utils.validateTypedProperty(v, "jsonata", o);
+            },
+            expand: function () {
                 var that = this;
                 RED.editor.editExpression({
-                    value: this.value().replace(/\t/g,"\n"),
+                    value: this.value().replace(/\t/g, "\n"),
                     stateId: RED.editor.generateViewStateId("typedInput", that, "jsonata"),
                     focus: true,
-                    complete: function(v) {
-                        that.value(v.replace(/\n/g,"\t"));
+                    complete: function (v) {
+                        that.value(v.replace(/\n/g, "\t"));
                     }
                 })
             }
@@ -15321,13 +15341,13 @@ RED.stack = (function() {
             value: "bin",
             label: "buffer",
             icon: "red/images/typedInput/bin.svg",
-            expand: function() {
+            expand: function () {
                 var that = this;
                 RED.editor.editBuffer({
                     value: this.value(),
                     stateId: RED.editor.generateViewStateId("typedInput", that, "bin"),
                     focus: true,
-                    complete: function(v) {
+                    complete: function (v) {
                         that.value(v);
                     }
                 })
@@ -15343,9 +15363,9 @@ RED.stack = (function() {
             value: "node",
             label: "node",
             icon: "red/images/typedInput/target.svg",
-            valueLabel: function(container,value) {
+            valueLabel: function (container, value) {
                 var node = RED.nodes.node(value);
-                var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).css({
+                var nodeDiv = $('<div>', { class: "red-ui-search-result-node" }).css({
                     "margin-top": "2px",
                     "margin-left": "3px"
                 }).appendTo(container);
@@ -15354,117 +15374,117 @@ RED.stack = (function() {
                     "margin-left": "6px"
                 }).appendTo(container);
                 if (node) {
-                    var colour = RED.utils.getNodeColor(node.type,node._def);
-                    var icon_url = RED.utils.getNodeIcon(node._def,node);
+                    var colour = RED.utils.getNodeColor(node.type, node._def);
+                    var icon_url = RED.utils.getNodeIcon(node._def, node);
                     if (node.type === 'tab') {
                         colour = "#C0DEED";
                     }
-                    nodeDiv.css('backgroundColor',colour);
-                    var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
+                    nodeDiv.css('backgroundColor', colour);
+                    var iconContainer = $('<div/>', { class: "red-ui-palette-icon-container" }).appendTo(nodeDiv);
                     RED.utils.createIconElement(icon_url, iconContainer, true);
-                    var l = RED.utils.getNodeLabel(node,node.id);
+                    var l = RED.utils.getNodeLabel(node, node.id);
                     nodeLabel.text(l);
                 } else {
                     nodeDiv.css({
                         'backgroundColor': '#eee',
-                        'border-style' : 'dashed'
+                        'border-style': 'dashed'
                     });
 
                 }
             },
-            expand: function() {
+            expand: function () {
                 var that = this;
                 RED.tray.hide();
                 RED.view.selectNodes({
                     single: true,
                     selected: [that.value()],
-                    onselect: function(selection) {
+                    onselect: function (selection) {
                         that.value(selection.id);
                         RED.tray.show();
                     },
-                    oncancel: function() {
+                    oncancel: function () {
                         RED.tray.show();
                     }
                 })
             }
         },
-        cred:{
-            value:"cred",
-            label:"credential",
-            icon:"fa fa-lock",
+        cred: {
+            value: "cred",
+            label: "credential",
+            icon: "fa fa-lock",
             inputType: "password",
-            valueLabel: function(container,value) {
+            valueLabel: function (container, value) {
                 var that = this;
-                container.css("pointer-events","none");
-                container.css("flex-grow",0);
+                container.css("pointer-events", "none");
+                container.css("flex-grow", 0);
                 this.elementDiv.hide();
                 var buttons = $('<div>').css({
                     position: "absolute",
-                    right:"6px",
+                    right: "6px",
                     top: "6px",
-                    "pointer-events":"all"
+                    "pointer-events": "all"
                 }).appendTo(container);
                 var eyeButton = $('<button type="button" class="red-ui-button red-ui-button-small"></button>').css({
-                    width:"20px"
-                }).appendTo(buttons).on("click", function(evt) {
+                    width: "20px"
+                }).appendTo(buttons).on("click", function (evt) {
                     evt.preventDefault();
                     var cursorPosition = that.input[0].selectionStart;
                     var currentType = that.input.attr("type");
                     if (currentType === "text") {
-                        that.input.attr("type","password");
+                        that.input.attr("type", "password");
                         eyeCon.removeClass("fa-eye-slash").addClass("fa-eye");
-                        setTimeout(function() {
+                        setTimeout(function () {
                             that.input.focus();
                             that.input[0].setSelectionRange(cursorPosition, cursorPosition);
-                        },50);
+                        }, 50);
                     } else {
-                        that.input.attr("type","text");
+                        that.input.attr("type", "text");
                         eyeCon.removeClass("fa-eye").addClass("fa-eye-slash");
-                        setTimeout(function() {
+                        setTimeout(function () {
                             that.input.focus();
                             that.input[0].setSelectionRange(cursorPosition, cursorPosition);
-                        },50);
+                        }, 50);
                     }
                 }).hide();
-                var eyeCon = $('<i class="fa fa-eye"></i>').css("margin-left","-2px").appendTo(eyeButton);
+                var eyeCon = $('<i class="fa fa-eye"></i>').css("margin-left", "-2px").appendTo(eyeButton);
 
                 if (value === "__PWRD__") {
                     var innerContainer = $('<div><i class="fa fa-asterisk"></i><i class="fa fa-asterisk"></i><i class="fa fa-asterisk"></i><i class="fa fa-asterisk"></i><i class="fa fa-asterisk"></i></div>').css({
-                        padding:"6px 6px",
-                        borderRadius:"4px"
+                        padding: "6px 6px",
+                        borderRadius: "4px"
                     }).addClass("red-ui-typedInput-value-label-inactive").appendTo(container);
-                    var editButton = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-pencil"></i></button>').appendTo(buttons).on("click", function(evt) {
+                    var editButton = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-pencil"></i></button>').appendTo(buttons).on("click", function (evt) {
                         evt.preventDefault();
                         innerContainer.hide();
-                        container.css("background","none");
-                        container.css("pointer-events","none");
+                        container.css("background", "none");
+                        container.css("pointer-events", "none");
                         that.input.val("");
                         that.element.val("");
                         that.elementDiv.show();
                         editButton.hide();
                         cancelButton.show();
                         eyeButton.show();
-                        setTimeout(function() {
+                        setTimeout(function () {
                             that.input.focus();
-                        },50);
+                        }, 50);
                     });
-                    var cancelButton = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-times"></i></button>').css("margin-left","3px").appendTo(buttons).on("click", function(evt) {
+                    var cancelButton = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-times"></i></button>').css("margin-left", "3px").appendTo(buttons).on("click", function (evt) {
                         evt.preventDefault();
                         innerContainer.show();
-                        container.css("background","");
+                        container.css("background", "");
                         that.input.val("__PWRD__");
                         that.element.val("__PWRD__");
                         that.elementDiv.hide();
                         editButton.show();
                         cancelButton.hide();
                         eyeButton.hide();
-                        that.input.attr("type","password");
+                        that.input.attr("type", "password");
                         eyeCon.removeClass("fa-eye-slash").addClass("fa-eye");
 
                     }).hide();
                 } else {
-                    container.css("background","none");
-                    container.css("pointer-events","none");
+                    container.css("background", "none");
+                    container.css("pointer-events", "none");
                     this.elementDiv.show();
                     eyeButton.show();
                 }
@@ -16411,26 +16431,48 @@ RED.stack = (function() {
                 }
             }
         },
-        validate: function() {
-            var result;
-            var value = this.value();
-            var type = this.type();
+        validate: function(options) {
+            let valid = true;
+            const value = this.value();
+            const type = this.type();
             if (this.typeMap[type] && this.typeMap[type].validate) {
-                var val = this.typeMap[type].validate;
-                if (typeof val === 'function') {
-                    result = val(value);
+                const validate = this.typeMap[type].validate;
+                if (typeof validate === 'function') {
+                    valid = validate(value, {});
                 } else {
-                    result = val.test(value);
+                    // Regex
+                    valid = validate.test(value);
+                    if (!valid) {
+                        valid = RED._("validator.errors.invalid-regexp");
+                    }
                 }
-            } else {
-                result = true;
             }
-            if (result) {
-                this.uiSelect.removeClass('input-error');
+            if ((typeof valid === "string") || !valid) {
+                this.element.addClass("input-error");
+                this.uiSelect.addClass("input-error");
+                if (typeof valid === "string") {
+                    let tooltip = this.element.data("tooltip");
+                    if (tooltip) {
+                        tooltip.setContent(valid);
+                    } else {
+                        tooltip = RED.popover.tooltip(this.elementDiv, valid);
+                        this.element.data("tooltip", tooltip);
+                    }
+                }
             } else {
-                this.uiSelect.addClass('input-error');
+                this.element.removeClass("input-error");
+                this.uiSelect.removeClass("input-error");
+                const tooltip = this.element.data("tooltip");
+                if (tooltip) {
+                    this.element.data("tooltip", null);
+                    tooltip.delete();
+                }
             }
-            return result;
+            if (options?.returnErrorMessage === true) {
+                return valid;
+            }
+            // Must return a boolean for no 3.x validator
+            return (typeof valid === "string") ? false : valid;
         },
         show: function() {
             this.uiSelect.show();
@@ -31783,7 +31825,7 @@ RED.sidebar.info = (function() {
                 evt.stopPropagation();
                 RED.search.show("type:subflow:"+n.id);
             })
-            // RED.popover.tooltip(userCountBadge,function() { return RED._('editor.nodesUse',{count:n.users.length})});
+            RED.popover.tooltip(subflowInstanceBadge,function() { return RED._('subflow.subflowInstances',{count:n.instances.length})});
         }
         if (n._def.category === "config" && n.type !== "group") {
             var userCountBadge = $('<button type="button" class="red-ui-info-outline-item-control-users red-ui-button red-ui-button-small"><i class="fa fa-toggle-right"></i></button>').text(n.users.length).appendTo(controls).on("click",function(evt) {
@@ -35338,7 +35380,10 @@ RED.editor = (function() {
                 const input = $("#"+prefix+"-"+property);
                 const isTypedInput = input.length > 0 && input.next(".red-ui-typedInput-container").length > 0;
                 if (isTypedInput) {
-                    valid = input.typedInput("validate");
+                    valid = input.typedInput("validate", { returnErrorMessage: true });
+                    if (typeof valid === "string") {
+                        return label ? label + ": " + valid : valid;
+                    }
                 }
             }
         }
@@ -35558,11 +35603,8 @@ RED.editor = (function() {
             if (selectedOpt?.data('env')) {
                 disableButton(addButton, true);
                 disableButton(editButton, true);
-            // disable the edit button if no options available
-            } else if (optionsLength === 1 && selectedOpt.val() === "_ADD_") {
-                disableButton(addButton, false);
-                disableButton(editButton, true);
-            } else if (selectedOpt.val() === "") {
+            // disable the edit button if no options available or 'none' selected
+            } else if (optionsLength === 1 || selectedOpt.val() === "_ADD_") {
                 disableButton(addButton, false);
                 disableButton(editButton, true);
             } else {
@@ -35571,14 +35613,9 @@ RED.editor = (function() {
             }
         });
 
-        var label = "";
-        var configNode = RED.nodes.node(nodeValue);
-
-        if (configNode) {
-            label = RED.utils.getNodeLabel(configNode, configNode.id);
-        }
-
-        input.val(label);
+        // If the value is "", 'add new...' option if no config node available or 'none' option
+        // Otherwise, it's a config node
+        select.val(nodeValue || '_ADD_');
     }
 
     /**
@@ -36079,9 +36116,11 @@ RED.editor = (function() {
                 }
 
                 if (!configNodes.length) {
+                    // Add 'add new...' option
                     select.append('<option value="_ADD_" selected>' + RED._("editor.addNewType", { type: label }) + '</option>');
                 } else {
-                    select.append('<option value="">' + RED._("editor.inputs.none") + '</option>');
+                    // Add 'none' option
+                    select.append('<option value="_ADD_">' + RED._("editor.inputs.none") + '</option>');
                 }
 
                 window.setTimeout(function() { select.trigger("change");},50);
@@ -43573,6 +43612,7 @@ RED.clipboard = (function() {
     var currentPopoverError;
     var activeTab;
     var libraryBrowser;
+    var clipboardTabs;
 
     var activeLibraries = {};
 
@@ -43762,6 +43802,13 @@ RED.clipboard = (function() {
                 open: function( event, ui ) {
                     RED.keyboard.disable();
                 },
+                beforeClose: function(e) {
+                    if (clipboardTabs && activeTab === "red-ui-clipboard-dialog-export-tab-clipboard") {
+                        const jsonTabIndex = clipboardTabs.getTabIndex('red-ui-clipboard-dialog-export-tab-clipboard-json')
+                        const activeTabIndex = clipboardTabs.activeIndex()
+                        RED.settings.set("editor.dialog.export.json-view", activeTabIndex === jsonTabIndex )
+                    }
+                },
                 close: function(e) {
                     RED.keyboard.enable();
                     if (popover) {
@@ -43775,12 +43822,23 @@ RED.clipboard = (function() {
 
         exportNodesDialog =
             '<div class="form-row">'+
-                '<label style="width:auto;margin-right: 10px;" data-i18n="common.label.export"></label>'+
-                '<span id="red-ui-clipboard-dialog-export-rng-group" class="button-group">'+
-                    '<a id="red-ui-clipboard-dialog-export-rng-selected" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.selected"></a>'+
-                    '<a id="red-ui-clipboard-dialog-export-rng-flow" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.current"></a>'+
-                    '<a id="red-ui-clipboard-dialog-export-rng-full" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
-                '</span>'+
+                '<div style="display: flex; justify-content: space-between;">'+
+                    '<div class="form-row">'+
+                        '<label style="width:auto;margin-right: 10px;" data-i18n="common.label.export"></label>'+
+                        '<span id="red-ui-clipboard-dialog-export-rng-group" class="button-group">'+
+                            '<a id="red-ui-clipboard-dialog-export-rng-selected" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.selected"></a>'+
+                            '<a id="red-ui-clipboard-dialog-export-rng-flow" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.current"></a>'+
+                            '<a id="red-ui-clipboard-dialog-export-rng-full" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
+                        '</span>'+
+                    '</div>'+
+                    '<div class="form-row">'+
+                        '<label style="width:auto;margin-right: 10px;" data-i18n="common.label.format"></label>'+
+                        '<span id="red-ui-clipboard-dialog-export-fmt-group" class="button-group">'+
+                            '<a id="red-ui-clipboard-dialog-export-fmt-mini" class="red-ui-button red-ui-button toggle" href="#" data-i18n="clipboard.export.compact"></a>'+
+                            '<a id="red-ui-clipboard-dialog-export-fmt-full" class="red-ui-button red-ui-button toggle" href="#" data-i18n="clipboard.export.formatted"></a>'+
+                        '</span>'+
+                    '</div>'+
+                '</div>'+
             '</div>'+
             '<div class="red-ui-clipboard-dialog-box">'+
                 '<div class="red-ui-clipboard-dialog-tabs">'+
@@ -43795,15 +43853,9 @@ RED.clipboard = (function() {
                             '<div id="red-ui-clipboard-dialog-export-tab-clipboard-preview-list"></div>'+
                         '</div>'+
                         '<div class="red-ui-clipboard-dialog-export-tab-clipboard-tab" id="red-ui-clipboard-dialog-export-tab-clipboard-json">'+
-                            '<div class="form-row" style="height:calc(100% - 40px)">'+
+                            '<div class="form-row" style="height:calc(100% - 10px)">'+
                                 '<textarea readonly id="red-ui-clipboard-dialog-export-text"></textarea>'+
                             '</div>'+
-                            '<div class="form-row" style="text-align: right;">'+
-                                '<span id="red-ui-clipboard-dialog-export-fmt-group" class="button-group">'+
-                                    '<a id="red-ui-clipboard-dialog-export-fmt-mini" class="red-ui-button red-ui-button-small toggle" href="#" data-i18n="clipboard.export.compact"></a>'+
-                                    '<a id="red-ui-clipboard-dialog-export-fmt-full" class="red-ui-button red-ui-button-small toggle" href="#" data-i18n="clipboard.export.formatted"></a>'+
-                                '</span>'+
-                            '</div>'+
                         '</div>'+
                     '</div>'+
                     '<div class="form-row" id="red-ui-clipboard-dialog-export-tab-library-filename">'+
@@ -44116,7 +44168,7 @@ RED.clipboard = (function() {
 
         dialogContainer.empty();
         dialogContainer.append($(exportNodesDialog));
-
+        clipboardTabs = null
         var tabs = RED.tabs.create({
             id: "red-ui-clipboard-dialog-export-tabs",
             vertical: true,
@@ -44177,7 +44229,7 @@ RED.clipboard = (function() {
         $("#red-ui-clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)});
         $("#red-ui-clipboard-dialog-export").button("enable");
 
-        var clipboardTabs = RED.tabs.create({
+        clipboardTabs = RED.tabs.create({
             id: "red-ui-clipboard-dialog-export-tab-clipboard-tabs",
             onchange: function(tab) {
                 $(".red-ui-clipboard-dialog-export-tab-clipboard-tab").hide();
@@ -44194,6 +44246,9 @@ RED.clipboard = (function() {
             id: "red-ui-clipboard-dialog-export-tab-clipboard-json",
             label: RED._("editor.types.json")
         });
+        if (RED.settings.get("editor.dialog.export.json-view") === true) {
+            clipboardTabs.activateTab("red-ui-clipboard-dialog-export-tab-clipboard-json");
+        }
 
         var previewList = $("#red-ui-clipboard-dialog-export-tab-clipboard-preview-list").css({position:"absolute",top:0,right:0,bottom:0,left:0}).treeList({
             data: []
@@ -48821,7 +48876,7 @@ RED.subflow = (function() {
                 input.val(val.value);
                 break;
             case "cred":
-                input = $('<input type="password">').css('width','70%').appendTo(row);
+                input = $('<input type="password">').css('width','70%').attr('id', elId).appendTo(row);
                 if (node.credentials) {
                     if (node.credentials[tenv.name]) {
                         input.val(node.credentials[tenv.name]);
@@ -49067,7 +49122,7 @@ RED.subflow = (function() {
                         }
                         break;
                     case "cred":
-                        item.value = input.val();
+                        item.value = input.typedInput('value');
                         item.type = 'cred';
                         break;
                     case "spinner":