@node-red/editor-client 4.0.0-beta.3-1 → 4.0.0

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();
                 }
@@ -15882,12 +15902,12 @@ RED.stack = (function() {
             }
             if (menu.opts.multiple) {
                 var selected = {};
-                 this.value().split(",").forEach(function(f) {
-                     selected[f] = true;
-                 })
+                this.value().split(",").forEach(function(f) {
+                    selected[f] = true;
+                });
                 menu.find('input[type="checkbox"]').each(function() {
-                    $(this).prop("checked",selected[$(this).data('value')])
-                })
+                    $(this).prop("checked", selected[$(this).data('value')] || false);
+                });
             }
 
 
@@ -15978,7 +15998,7 @@ RED.stack = (function() {
                         this.input.trigger('change',[this.propertyType,this.value()]);
                     }
                 } else {
-                    this.optionSelectLabel.text(o.length+" selected");
+                    this.optionSelectLabel.text(RED._("typedInput.selected", { count: o.length }));
                 }
             }
         },
@@ -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();
@@ -16867,7 +16909,7 @@ RED.deploy = (function() {
                  '<img src="red/images/spin.svg"/>'+
                 '</span>'+
               '</a>'+
-              '<a id="red-ui-header-button-deploy-options" class="red-ui-deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
+              '<a id="red-ui-header-button-deploy-options" class="red-ui-deploy-button" href="#"><i class="fa fa-caret-down"></i><i class="fa fa-lock"></i></a>'+
               '</span></li>').prependTo(".red-ui-header-toolbar");
             const mainMenuItems = [
                     {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.svg",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
@@ -16928,6 +16970,9 @@ RED.deploy = (function() {
         })
 
         RED.events.on('workspace:dirty',function(state) {
+            if (RED.settings.user?.permissions === 'read') {
+                return
+            }
             if (state.dirty) {
                 // window.onbeforeunload = function() {
                 //     return 
@@ -16973,6 +17018,22 @@ RED.deploy = (function() {
                 activeBackgroundDeployNotification.update(message, options)
             }
         });
+
+
+        updateLockedState()
+        RED.events.on('login', updateLockedState)
+    }
+
+    function updateLockedState() {
+        if (RED.settings.user?.permissions === 'read') {
+            $(".red-ui-deploy-button-group").addClass("readOnly");
+            $("#red-ui-header-button-deploy").addClass("disabled");
+        } else {
+            $(".red-ui-deploy-button-group").removeClass("readOnly");
+            if (RED.nodes.dirty()) {
+                $("#red-ui-header-button-deploy").removeClass("disabled");
+            }
+        }
     }
 
     function getNodeInfo(node) {
@@ -17447,6 +17508,7 @@ RED.deploy = (function() {
             // Once deployed, cannot undo back to a clean state
             RED.history.markAllDirty();
             RED.view.redraw();
+            RED.sidebar.config.refresh();
             RED.events.emit("deploy");
         }).fail(function (xhr, textStatus, err) {
             RED.nodes.dirty(true);
@@ -22935,6 +22997,7 @@ RED.view = (function() {
 
         if (d3.event.button === 1) {
             // Middle Click pan
+            d3.event.preventDefault();
             mouse_mode = RED.state.PANNING;
             mouse_position = [d3.event.pageX,d3.event.pageY]
             scroll_position = [chart.scrollLeft(),chart.scrollTop()];
@@ -32406,7 +32469,13 @@ RED.sidebar.help = (function() {
         toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(content);
         $('<span class="button-group"><a id="red-ui-sidebar-help-show-toc" class="red-ui-button red-ui-button-small selected" href="#"><i class="fa fa-list-ul"></i></a></span>').appendTo(toolbar)
         var showTOCButton = toolbar.find('#red-ui-sidebar-help-show-toc')
-        RED.popover.tooltip(showTOCButton,RED._("sidebar.help.showTopics"));
+        RED.popover.tooltip(showTOCButton, function () {
+            if ($(showTOCButton).hasClass('selected')) {
+                return RED._("sidebar.help.hideTopics");
+            } else {
+                return RED._("sidebar.help.showTopics");
+            }
+        });
         showTOCButton.on("click",function(e) {
             e.preventDefault();
             if ($(this).hasClass('selected')) {
@@ -33250,9 +33319,11 @@ RED.sidebar.config = (function() {
                 refreshConfigNodeList();
             }
         });
+
         RED.popover.tooltip($('#red-ui-sidebar-config-filter-all'), RED._("sidebar.config.showAllConfigNodes"));
         RED.popover.tooltip($('#red-ui-sidebar-config-filter-unused'), RED._("sidebar.config.showAllUnusedConfigNodes"));
-
+        RED.popover.tooltip($('#red-ui-sidebar-config-collapse-all'), RED._("palette.actions.collapse-all"));
+        RED.popover.tooltip($('#red-ui-sidebar-config-expand-all'), RED._("palette.actions.expand-all"));
     }
 
     function flashConfigNode(el) {
@@ -35309,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;
+                    }
                 }
             }
         }
@@ -35367,6 +35441,8 @@ RED.editor = (function() {
             var value = input.val();
             if (defaults[property].hasOwnProperty("format") && defaults[property].format !== "" && input[0].nodeName === "DIV") {
                 value = input.text();
+            } else if (input.attr("type") === "checkbox") {
+                value = input.prop("checked");
             }
             var valid = validateNodeProperty(node, defaults, property,value);
             if (((typeof valid) === "string") || !valid) {
@@ -35920,9 +35996,16 @@ RED.editor = (function() {
             }
 
             try {
-                var rc = editing_node._def.oneditsave.call(editing_node);
+                const rc = editing_node._def.oneditsave.call(editing_node);
                 if (rc === true) {
                     editState.changed = true;
+                } else if (typeof rc === 'object' && rc !== null ) {
+                    if (rc.changed === true) {
+                        editState.changed = true
+                    }
+                    if (Array.isArray(rc.history) && rc.history.length > 0) {
+                        editState.history = rc.history
+                    }
                 }
             } catch(err) {
                 console.warn("oneditsave",editing_node.id,editing_node.type,err.toString());
@@ -36124,6 +36207,17 @@ RED.editor = (function() {
                             dirty: startDirty
                         }
 
+                        if (editing_node.g) {
+                            const group = RED.nodes.group(editing_node.g);
+                            // Don't use RED.group.removeFromGroup as that emits
+                            // a change event on the node - but we're deleting it
+                            const index = group?.nodes.indexOf(editing_node) ?? -1;
+                            if (index > -1) {
+                                group.nodes.splice(index, 1);
+                                RED.group.markDirty(group);
+                            }
+                        }
+
                         RED.nodes.dirty(true);
                         RED.view.redraw(true);
                         RED.history.push(historyEvent);
@@ -36225,7 +36319,7 @@ RED.editor = (function() {
                                     }
                                 });
                             }
-                            var historyEvent = {
+                            let historyEvent = {
                                 t:'edit',
                                 node:editing_node,
                                 changes:editState.changes,
@@ -36241,6 +36335,15 @@ RED.editor = (function() {
                                     instances:subflowInstances
                                 }
                             }
+
+                            if (editState.history) {
+                                historyEvent = {
+                                    t: 'multi',
+                                    events: [ historyEvent, ...editState.history ],
+                                    dirty: wasDirty
+                                }
+                            }
+
                             RED.history.push(historyEvent);
                         }
                         editing_node.dirty = true;
@@ -43515,6 +43618,7 @@ RED.clipboard = (function() {
     var currentPopoverError;
     var activeTab;
     var libraryBrowser;
+    var clipboardTabs;
 
     var activeLibraries = {};
 
@@ -43704,6 +43808,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) {
@@ -43717,12 +43828,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">'+
@@ -43737,15 +43859,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">'+
@@ -44058,7 +44174,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,
@@ -44119,7 +44235,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();
@@ -44136,6 +44252,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: []