@node-red/editor-client 4.0.7 → 4.0.9

package/public/red/red.js

@@ -2017,10 +2017,10 @@ RED.user = (function() {
             userIcon.css({
                 backgroundImage: "url("+user.image+")",
             })
-        } else if (user.anonymous) {
+        } else if (user.anonymous || (!user.username && !user.email)) {
             $('<i class="fa fa-user"></i>').appendTo(userIcon);
         } else {
-            $('<span>').text(user.username.substring(0,2)).appendTo(userIcon);
+            $('<span>').text((user.username || user.email).substring(0,2)).appendTo(userIcon);
         }
         if (user.profileColor !== undefined) {
             userIcon.addClass('red-ui-user-profile-color-' + user.profileColor)
@@ -2715,14 +2715,13 @@ RED.comms = (function() {
             anonIconBody.setAttribute("d",`M ${radius/2} ${radius/2 + 5} h -2.5 c -2 1 -2 -5 0.5 -4.5 c 2 1 2 1 4 0 c 2.5 -0.5  2.5 5.5  0 4.5  z`);
             group.appendChild(anonIconBody)
         } else {
-            const labelText = user.username ? user.username.substring(0,2) : user
             const label = document.createElementNS("http://www.w3.org/2000/svg","text");
-            if (user.username) {
+            if (user.username || user.email) {
                 label.setAttribute("class","red-ui-multiplayer-annotation-label");
-                label.textContent = user.username.substring(0,2)
+                label.textContent = (user.username || user.email).substring(0,2)
             } else {
                 label.setAttribute("class","red-ui-multiplayer-annotation-label red-ui-multiplayer-user-count")
-                label.textContent = user
+                label.textContent = 'nr'
             }
             label.setAttribute("text-anchor", "middle")
             label.setAttribute("x",radius/2);
@@ -6552,6 +6551,8 @@ RED.nodes = (function() {
             activeWorkspace = RED.workspaces.active();
         }
 
+        const pendingConfigNodes = []
+        const pendingConfigNodeIds = new Set()
         // Find all config nodes and add them
         for (i=0;i<newNodes.length;i++) {
             n = newNodes[i];
@@ -6611,7 +6612,8 @@ RED.nodes = (function() {
                         type:n.type,
                         info: n.info,
                         users:[],
-                        _config:{}
+                        _config:{},
+                        _configNodeReferences: new Set()
                     };
                     if (!n.z) {
                         delete configNode.z;
@@ -6626,6 +6628,9 @@ RED.nodes = (function() {
                         if (def.defaults.hasOwnProperty(d)) {
                             configNode[d] = n[d];
                             configNode._config[d] = JSON.stringify(n[d]);
+                            if (def.defaults[d].type) {
+                                configNode._configNodeReferences.add(n[d])
+                            }
                         }
                     }
                     if (def.hasOwnProperty('credentials') && n.hasOwnProperty('credentials')) {
@@ -6642,25 +6647,54 @@ RED.nodes = (function() {
                         configNode.id = getID();
                     }
                     node_map[n.id] = configNode;
-                    new_nodes.push(configNode);
+                    pendingConfigNodes.push(configNode);
+                    pendingConfigNodeIds.add(configNode.id)
                 }
             }
         }
 
-        // Config node can use another config node, must ensure that this other
-        // config node is added before to exists when updating the user list
-        const configNodeFilter = function (node) {
-            let count = 0;
-            if (node._def?.defaults) {
-                for (const def of Object.values(node._def.defaults)) {
-                    if (def.type) {
-                        count++;
-                    }
+        // We need to sort new_nodes (which only contains config nodes at this point)
+        // to ensure they get added in the right order. If NodeA depends on NodeB, then
+        // NodeB must be added first.
+        
+        // Limit us to 5 full iterations of the list - this should be more than
+        // enough to process the list as config->config node relationships are
+        // not very common
+        let iterationLimit = pendingConfigNodes.length * 5
+        const handledConfigNodes = new Set()
+        while (pendingConfigNodes.length > 0 && iterationLimit > 0) {
+            const node = pendingConfigNodes.shift()
+            let hasPending = false
+            // Loop through the nodes referenced by this node to see if anything
+            // is pending
+            node._configNodeReferences.forEach(id => {
+                if (pendingConfigNodeIds.has(id) && !handledConfigNodes.has(id)) {
+                    // This reference is for a node we know is in this import, but
+                    // it isn't added yet - flag as pending
+                    hasPending = true
                 }
-            }
-            return count;
-        };
-        new_nodes.sort((a, b) => configNodeFilter(a) - configNodeFilter(b));
+            })
+            if (!hasPending) {
+                // This node has no pending config node references - safe to add
+                delete node._configNodeReferences
+                new_nodes.push(node)
+                handledConfigNodes.add(node.id)
+            } else {
+                // This node has pending config node references
+                // Put to the back of the queue
+                pendingConfigNodes.push(node)
+            }
+            iterationLimit--
+        }
+        if (pendingConfigNodes.length > 0) {
+            // We exceeded the iteration count. Could be due to reference loops
+            // between the config nodes. At this point, just add the remaining
+            // nodes as-is
+            pendingConfigNodes.forEach(node => {
+                delete node._configNodeReferences
+                new_nodes.push(node)
+            })
+        }
 
         // Find regular flow nodes and subflow instances
         for (i=0;i<newNodes.length;i++) {
@@ -9760,7 +9794,7 @@ RED.utils = (function() {
     var pinnedPaths = {};
     var formattedPaths = {};
 
-    function addMessageControls(obj,sourceId,key,msg,rootPath,strippedKey,extraTools) {
+    function addMessageControls(obj,sourceId,key,msg,rootPath,strippedKey,extraTools,enablePinning) {
         if (!pinnedPaths.hasOwnProperty(sourceId)) {
             pinnedPaths[sourceId] = {}
         }
@@ -9780,7 +9814,7 @@ RED.utils = (function() {
             RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue");
         })
         RED.popover.tooltip(copyPayload,RED._("node-red:debug.sidebar.copyPayload"));
-        if (strippedKey !== undefined && strippedKey !== '') {
+        if (enablePinning && strippedKey !== undefined && strippedKey !== '') {
             var isPinned = pinnedPaths[sourceId].hasOwnProperty(strippedKey);
 
             var pinPath = $('<button class="red-ui-button red-ui-button-small red-ui-debug-msg-tools-pin"><i class="fa fa-map-pin"></i></button>').appendTo(tools).on("click", function(e) {
@@ -9811,13 +9845,16 @@ RED.utils = (function() {
             }
         }
     }
-    function checkExpanded(strippedKey,expandPaths,minRange,maxRange) {
+    function checkExpanded(strippedKey, expandPaths, { minRange, maxRange, expandLeafNodes }) {
         if (expandPaths && expandPaths.length > 0) {
             if (strippedKey === '' && minRange === undefined) {
                 return true;
             }
             for (var i=0;i<expandPaths.length;i++) {
                 var p = expandPaths[i];
+                if (expandLeafNodes && p === strippedKey) {
+                    return true
+                }
                 if (p.indexOf(strippedKey) === 0 && (p[strippedKey.length] === "." ||  p[strippedKey.length] === "[") ) {
 
                     if (minRange !== undefined && p[strippedKey.length] === "[") {
@@ -9924,6 +9961,8 @@ RED.utils = (function() {
         var sourceId = options.sourceId;
         var rootPath = options.rootPath;
         var expandPaths = options.expandPaths;
+        const enablePinning = options.enablePinning
+        const expandLeafNodes = options.expandLeafNodes;
         var ontoggle = options.ontoggle;
         var exposeApi = options.exposeApi;
         var tools = options.tools;
@@ -9946,11 +9985,11 @@ RED.utils = (function() {
         }
         header = $('<span class="red-ui-debug-msg-row"></span>').appendTo(element);
         if (sourceId) {
-            addMessageControls(header,sourceId,path,obj,rootPath,strippedKey,tools);
+            addMessageControls(header,sourceId,path,obj,rootPath,strippedKey,tools, enablePinning);
         }
         if (!key) {
             element.addClass("red-ui-debug-msg-top-level");
-            if (sourceId) {
+            if (sourceId && !expandPaths) {
                 var pinned = pinnedPaths[sourceId];
                 expandPaths = [];
                 if (pinned) {
@@ -10006,7 +10045,7 @@ RED.utils = (function() {
                     $('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-type-header"></span>').text(typeHint||'string').appendTo(header);
                     var row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(element);
                     $('<pre class="red-ui-debug-msg-type-string"></pre>').text(obj).appendTo(row);
-                },function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey,expandPaths));
+                },function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey, expandPaths, { expandLeafNodes }));
             }
             e = $('<span class="red-ui-debug-msg-type-string red-ui-debug-msg-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
             if (/^#[0-9a-f]{6}$/i.test(obj)) {
@@ -10122,14 +10161,16 @@ RED.utils = (function() {
                                     typeHint: type==='buffer'?'hex':false,
                                     hideKey: false,
                                     path: path+"["+i+"]",
-                                    sourceId: sourceId,
-                                    rootPath: rootPath,
-                                    expandPaths: expandPaths,
-                                    ontoggle: ontoggle,
-                                    exposeApi: exposeApi,
+                                    sourceId,
+                                    rootPath,
+                                    expandPaths,
+                                    expandLeafNodes,
+                                    ontoggle,
+                                    exposeApi,
                                     // tools: tools // Do not pass tools down as we
                                                     // keep them attached to the top-level header
                                     nodeSelector: options.nodeSelector,
+                                    enablePinning
                                 }
                             ).appendTo(row);
                         }
@@ -10153,21 +10194,23 @@ RED.utils = (function() {
                                                 typeHint: type==='buffer'?'hex':false,
                                                 hideKey: false,
                                                 path: path+"["+i+"]",
-                                                sourceId: sourceId,
-                                                rootPath: rootPath,
-                                                expandPaths: expandPaths,
-                                                ontoggle: ontoggle,
-                                                exposeApi: exposeApi,
+                                                sourceId,
+                                                rootPath,
+                                                expandPaths,
+                                                expandLeafNodes,
+                                                ontoggle,
+                                                exposeApi,
                                                 // tools: tools // Do not pass tools down as we
                                                                 // keep them attached to the top-level header
                                                 nodeSelector: options.nodeSelector,
+                                                enablePinning
                                             }
                                         ).appendTo(row);
                                     }
                                 }
                             })(),
                             (function() { var path = path+"["+i+"]"; return function(state) {if (ontoggle) { ontoggle(path,state);}}})(),
-                            checkExpanded(strippedKey,expandPaths,minRange,Math.min(fullLength-1,(minRange+9))));
+                            checkExpanded(strippedKey,expandPaths,{ minRange, maxRange: Math.min(fullLength-1,(minRange+9)), expandLeafNodes}));
                             $('<span class="red-ui-debug-msg-object-key"></span>').html("["+minRange+" &hellip; "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
                         }
                         if (fullLength < originalLength) {
@@ -10176,7 +10219,7 @@ RED.utils = (function() {
                     }
                 },
                 function(state) {if (ontoggle) { ontoggle(path,state);}},
-                checkExpanded(strippedKey,expandPaths));
+                checkExpanded(strippedKey, expandPaths, { expandLeafNodes }));
             }
         } else if (typeof obj === 'object') {
             element.addClass('collapsed');
@@ -10210,14 +10253,16 @@ RED.utils = (function() {
                                 typeHint: false,
                                 hideKey: false,
                                 path: newPath,
-                                sourceId: sourceId,
-                                rootPath: rootPath,
-                                expandPaths: expandPaths,
-                                ontoggle: ontoggle,
-                                exposeApi: exposeApi,
+                                sourceId,
+                                rootPath,
+                                expandPaths,
+                                expandLeafNodes,
+                                ontoggle,
+                                exposeApi,
                                 // tools: tools // Do not pass tools down as we
                                                 // keep them attached to the top-level header
                                 nodeSelector: options.nodeSelector,
+                                enablePinning
                             }
                         ).appendTo(row);
                     }
@@ -10226,7 +10271,7 @@ RED.utils = (function() {
                     }
                 },
                 function(state) {if (ontoggle) { ontoggle(path,state);}},
-                checkExpanded(strippedKey,expandPaths));
+                checkExpanded(strippedKey, expandPaths, { expandLeafNodes }));
             }
             if (key) {
                 $('<span class="red-ui-debug-msg-type-meta"></span>').text(type).appendTo(entryObj);
@@ -15254,6 +15299,7 @@ RED.stack = (function() {
             pre: value.substring(0,idx),
             match: value.substring(idx,idx+len),
             post: value.substring(idx+len),
+            exact: idx === 0 && value.length === searchValue.length
         }
     }
     function generateSpans(match) {
@@ -15274,7 +15320,7 @@ RED.stack = (function() {
                 const srcMatch = getMatch(optSrc, val);
                 if (valMatch.found || srcMatch.found) {
                     const element = $('<div>',{style: "display: flex"});
-                    const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"});
+                    const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
                     valEl.append(generateSpans(valMatch));
                     valEl.appendTo(element);
                     if (optSrc) {
@@ -15350,7 +15396,7 @@ RED.stack = (function() {
             if (valMatch.found) {
                 const optSrc = envVarsMap[v]
                 const element = $('<div>',{style: "display: flex"});
-                const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"});
+                const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
                 valEl.append(generateSpans(valMatch))
                 valEl.appendTo(element)
 
@@ -15392,7 +15438,7 @@ RED.stack = (function() {
         const that = this
         const getContextKeysFromRuntime = function(scope, store, searchKey, done) {
             contextKnownKeys[scope] = contextKnownKeys[scope] || {}
-            contextKnownKeys[scope][store] = contextKnownKeys[scope][store] || new Set()
+            contextKnownKeys[scope][store] = contextKnownKeys[scope][store] || new Map()
             if (searchKey.length > 0) {
                 try {
                     RED.utils.normalisePropertyExpression(searchKey)
@@ -15414,11 +15460,12 @@ RED.stack = (function() {
                     const result = data[store] || {}
                     const keys = result.keys || []
                     const keyPrefix = searchKey + (searchKey.length > 0 ? '.' : '')
-                    keys.forEach(key => {
+                    keys.forEach(keyInfo => {
+                        const key = keyInfo.key
                         if (/^[a-zA-Z_$][0-9a-zA-Z_$]*$/.test(key)) {
-                            contextKnownKeys[scope][store].add(keyPrefix + key)
+                            contextKnownKeys[scope][store].set(keyPrefix + key, keyInfo)
                         } else {
-                            contextKnownKeys[scope][store].add(searchKey + "[\""+key.replace(/"/,"\\\"")+"\"]")
+                            contextKnownKeys[scope][store].set(searchKey + "[\""+key.replace(/"/,"\\\"")+"\"]", keyInfo)
                         }                        
                     })
                     done()
@@ -15433,14 +15480,14 @@ RED.stack = (function() {
                 // Get the flow id of the node we're editing
                 const editStack = RED.editor.getEditStack()
                 if (editStack.length === 0) {
-                    done([])
+                    done(new Map())
                     return
                 }
                 const editingNode = editStack.pop()
                 if (editingNode.z) {
                     scope = `${scope}/${editingNode.z}`
                 } else {
-                    done([])
+                    done(new Map())
                     return
                 }
             }
@@ -15460,17 +15507,29 @@ RED.stack = (function() {
         return function(val, done) {
             getContextKeys(val, function (keys) {
                 const matches = []
-                keys.forEach(v => {
+                keys.forEach((keyInfo, v) => {
                     let optVal = v
                     let valMatch = getMatch(optVal, val);
-                    if (!valMatch.found && val.length > 0 && val.endsWith('.')) {
-                        // Search key ends in '.' - but doesn't match. Check again
-                        // with [" at the end instead so we match bracket notation
-                        valMatch = getMatch(optVal, val.substring(0, val.length - 1) + '["')
+                    if (!valMatch.found && val.length > 0) {
+                        if (val.endsWith('.')) {
+                            // Search key ends in '.' - but doesn't match. Check again
+                            // with [" at the end instead so we match bracket notation
+                            valMatch = getMatch(optVal, val.substring(0, val.length - 1) + '["')
+                        // } else if (val.endsWith('[') && /^array/.test(keyInfo.format)) {
+                        //     console.log('this case')
+                        }
                     }
                     if (valMatch.found) {
                         const element = $('<div>',{style: "display: flex"});
-                        const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"});
+                        const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" });
+                        // if (keyInfo.format) {
+                        //     valMatch.post += ' ' + keyInfo.format
+                        // }
+                        if (valMatch.exact && /^array/.test(keyInfo.format)) {
+                            valMatch.post += `[0-${keyInfo.length}]`
+                            optVal +=  '['
+
+                        }
                         valEl.append(generateSpans(valMatch))
                         valEl.appendTo(element)
                         matches.push({
@@ -16758,7 +16817,8 @@ RED.stack = (function() {
                     if (tooltip) {
                         tooltip.setContent(valid);
                     } else {
-                        tooltip = RED.popover.tooltip(this.elementDiv, valid);
+                        const target = this.typeMap[type]?.options ? this.optionSelectLabel : this.elementDiv;
+                        tooltip = RED.popover.tooltip(target, valid);
                         this.element.data("tooltip", tooltip);
                     }
                 }
@@ -16990,7 +17050,7 @@ RED.stack = (function() {
             }
             this.menu = RED.popover.menu({
                 tabSelect: true,
-                width: 300,
+                width: Math.max(300, this.element.width()),
                 maxHeight: 200,
                 class: "red-ui-autoComplete-container",
                 options: completions,
@@ -17193,6 +17253,7 @@ RED.deploy = (function() {
     /**
      * options:
      *   type: "default" - Button with drop-down options - no further customisation available
+     *      label: the text to display - default: "Deploy"
      *   type: "simple"  - Button without dropdown. Customisations:
      *      label: the text to display - default: "Deploy"
      *      icon : the icon to use. Null removes the icon. default: "red/images/deploy-full-o.svg"
@@ -17200,13 +17261,14 @@ RED.deploy = (function() {
     function init(options) {
         options = options || {};
         var type = options.type || "default";
+        var label = options.label || RED._("deploy.deploy");
 
         if (type == "default") {
             $('<li><span class="red-ui-deploy-button-group button-group">'+
               '<a id="red-ui-header-button-deploy" class="red-ui-deploy-button disabled" href="#">'+
                 '<span class="red-ui-deploy-button-content">'+
                  '<img id="red-ui-header-button-deploy-icon" src="red/images/deploy-full-o.svg"> '+
-                 '<span>'+RED._("deploy.deploy")+'</span>'+
+                 '<span>'+label+'</span>'+
                 '</span>'+
                 '<span class="red-ui-deploy-button-spinner hide">'+
                  '<img src="red/images/spin.svg"/>'+
@@ -17227,7 +17289,6 @@ RED.deploy = (function() {
             mainMenuItems.push({id:"deploymenu-item-reload", icon:"red/images/deploy-reload.svg",label:RED._("deploy.restartFlows"),sublabel:RED._("deploy.restartFlowsDesc"),onselect:"core:restart-flows"})
             RED.menu.init({id:"red-ui-header-button-deploy-options", options: mainMenuItems });
         } else if (type == "simple") {
-            var label = options.label || RED._("deploy.deploy");
             var icon = 'red/images/deploy-full-o.svg';
             if (options.hasOwnProperty('icon')) {
                 icon = options.icon;
@@ -23410,11 +23471,6 @@ RED.view = (function() {
         var targetGroup = options.group;
         var touchTrigger = options.touchTrigger;
 
-        if (targetGroup) {
-            selectedGroups.add(targetGroup,false);
-            RED.view.redraw();
-        }
-
         // `point` is the place in the workspace the mouse has clicked.
         //  This takes into account scrolling and scaling of the workspace.
         var ox = point[0];
@@ -23736,9 +23792,6 @@ RED.view = (function() {
                 // auto select dropped node - so info shows (if visible)
                 clearSelection();
                 nn.selected = true;
-                if (targetGroup) {
-                    selectedGroups.add(targetGroup,false);
-                }
                 movingSet.add(nn);
                 updateActiveNodes();
                 updateSelection();
@@ -24323,19 +24376,24 @@ RED.view = (function() {
                         n.n.moved = true;
                     }
                 }
-
-                // Check to see if we need to splice a link
+                // If a node has moved and ends up being spliced into a link, keep
+                // track of which historyEvent to add the splice info to
+                let targetSpliceEvent = null
                 if (moveEvent.nodes.length > 0) {
                     historyEvent.events.push(moveEvent)
-                    if (activeSpliceLink) {
-                        var linkToSplice = d3.select(activeSpliceLink).data()[0];
-                        spliceLink(linkToSplice, movingSet.get(0).n, moveEvent)
-                    }
+                    targetSpliceEvent = moveEvent
                 }
                 if (moveAndChangedGroupEvent.nodes.length > 0) {
                     historyEvent.events.push(moveAndChangedGroupEvent)
+                    targetSpliceEvent = moveAndChangedGroupEvent
                 }
-                
+                // activeSpliceLink will only be set if the movingSet has a single
+                // node that is able to splice.
+                if (targetSpliceEvent && activeSpliceLink) {
+                    var linkToSplice = d3.select(activeSpliceLink).data()[0];
+                    spliceLink(linkToSplice, movingSet.get(0).n, targetSpliceEvent)
+                }
+
                 // Only continue if something has moved
                 if (historyEvent.events.length > 0) {
                     RED.nodes.dirty(true);
@@ -33794,8 +33852,6 @@ RED.sidebar.context = (function() {
     var content;
     var sections;
 
-    var localCache = {};
-
     var flowAutoRefresh;
     var nodeAutoRefresh;
     var nodeSection;
@@ -33803,6 +33859,8 @@ RED.sidebar.context = (function() {
     var flowSection;
     var globalSection;
 
+    const expandedPaths = {}
+
     var currentNode;
     var currentFlow;
 
@@ -33988,14 +34046,41 @@ RED.sidebar.context = (function() {
             var l = keys.length;
             for (var i = 0; i < l; i++) {
                 sortedData[keys[i]].forEach(function(v) {
-                    var k = keys[i];
-                    var l2 = sortedData[k].length;
-                    var propRow = $('<tr class="red-ui-help-info-row"><td class="red-ui-sidebar-context-property"></td><td></td></tr>').appendTo(container);
-                    var obj = $(propRow.children()[0]);
+                    const k = keys[i];
+                    let payload = v.msg;
+                    let format = v.format;
+                    const tools = $('<span class="button-group"></span>');
+                    expandedPaths[id + "." + k] = expandedPaths[id + "." + k] || new Set()
+                    const objectElementOptions = {
+                        typeHint: format,
+                        sourceId: id + "." + k,
+                        tools,
+                        path: k,
+                        rootPath: k,
+                        exposeApi: true,
+                        ontoggle: function(path,state) {
+                            path = path.substring(k.length+1)
+                            if (state) {
+                                expandedPaths[id+"."+k].add(path)
+                            } else {
+                                // if 'a' has been collapsed, we want to remove 'a.b' and 'a[0]...' from the set
+                                // of collapsed paths
+                                for (let expandedPath of expandedPaths[id+"."+k]) {
+                                    if (expandedPath.startsWith(path+".") || expandedPath.startsWith(path+"[")) {
+                                        expandedPaths[id+"."+k].delete(expandedPath)
+                                    }
+                                }
+                                expandedPaths[id+"."+k].delete(path)
+                            }
+                        },
+                        expandPaths: [ ...expandedPaths[id+"."+k] ].sort(),
+                        expandLeafNodes: true
+                    }
+                    const propRow = $('<tr class="red-ui-help-info-row"><td class="red-ui-sidebar-context-property"></td><td></td></tr>').appendTo(container);
+                    const obj = $(propRow.children()[0]);
                     obj.text(k);
-                    var tools = $('<span class="button-group"></span>');
                     const urlSafeK = encodeURIComponent(k)
-                    var refreshItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).on("click", function(e) {
+                    const refreshItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>').appendTo(tools).on("click", function(e) {
                         e.preventDefault();
                         e.stopPropagation();
                         $.getJSON(baseUrl+"/"+urlSafeK+"?store="+v.store, function(data) {
@@ -34005,16 +34090,14 @@ RED.sidebar.context = (function() {
                                 tools.detach();
                                 $(propRow.children()[1]).empty();
                                 RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), {
+                                    ...objectElementOptions,
                                     typeHint: data.format,
-                                    sourceId: id+"."+k,
-                                    tools: tools,
-                                    path: k
                                 }).appendTo(propRow.children()[1]);
                             }
                         })
                     });
                     RED.popover.tooltip(refreshItem,RED._("sidebar.context.refrsh"));
-                    var deleteItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>').appendTo(tools).on("click", function(e) {
+                    const deleteItem = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>').appendTo(tools).on("click", function(e) {
                         e.preventDefault();
                         e.stopPropagation();
                         var popover = RED.popover.create({
@@ -34022,7 +34105,7 @@ RED.sidebar.context = (function() {
                             target: propRow,
                             direction: "left",
                             content: function() {
-                                var content = $('<div>');
+                                const content = $('<div>');
                                 $('<p data-i18n="sidebar.context.deleteConfirm"></p>').appendTo(content);
                                 var row = $('<p>').appendTo(content);
                                 var bg = $('<span class="button-group"></span>').appendTo(row);
@@ -34045,16 +34128,15 @@ RED.sidebar.context = (function() {
                                                 if (container.children().length === 0) {
                                                     $('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.empty"></td></tr>').appendTo(container).i18n();
                                                 }
+                                                delete expandedPaths[id + "." + k]
                                             } else {
                                                 payload = data.msg;
                                                 format = data.format;
                                                 tools.detach();
                                                 $(propRow.children()[1]).empty();
                                                 RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), {
-                                                    typeHint: data.format,
-                                                    sourceId: id+"."+k,
-                                                    tools: tools,
-                                                    path: k
+                                                    ...objectElementOptions,
+                                                    typeHint: data.format
                                                 }).appendTo(propRow.children()[1]);
                                             }
                                         });
@@ -34069,14 +34151,7 @@ RED.sidebar.context = (function() {
 
                     });
                     RED.popover.tooltip(deleteItem,RED._("sidebar.context.delete"));
-                    var payload = v.msg;
-                    var format = v.format;
-                    RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), {
-                        typeHint: v.format,
-                        sourceId: id+"."+k,
-                        tools: tools,
-                        path: k
-                    }).appendTo(propRow.children()[1]);
+                    RED.utils.createObjectElement(RED.utils.decodeObject(payload,format), objectElementOptions).appendTo(propRow.children()[1]);
                     if (contextStores.length > 1) {
                         $("<span>",{class:"red-ui-sidebar-context-property-storename"}).text(v.store).appendTo($(propRow.children()[0]))
                     }
@@ -37414,8 +37489,18 @@ RED.editor = (function() {
                                 }
                             });
                         }
-
+                        let envToRemove = new Set()
                         if (!isSameObj(old_env, new_env)) {
+                            // Get a list of env properties that have been removed
+                            // by comparing old_env and new_env
+                            if (old_env) {
+                                old_env.forEach(env => { envToRemove.add(env.name) })
+                            }
+                            if (new_env) {
+                                new_env.forEach(env => {
+                                    envToRemove.delete(env.name)
+                                })
+                            }
                             editState.changes.env = editing_node.env;
                             editing_node.env = new_env;
                             editState.changed = true;
@@ -37424,10 +37509,11 @@ RED.editor = (function() {
 
 
                         if (editState.changed) {
-                            var wasChanged = editing_node.changed;
+                            let wasChanged = editing_node.changed;
                             editing_node.changed = true;
                             validateNode(editing_node);
-                            var subflowInstances = [];
+                            let subflowInstances = [];
+                            let instanceHistoryEvents = []
                             RED.nodes.eachNode(function(n) {
                                 if (n.type == "subflow:"+editing_node.id) {
                                     subflowInstances.push({
@@ -37437,13 +37523,35 @@ RED.editor = (function() {
                                     n._def.color = editing_node.color;
                                     n.changed = true;
                                     n.dirty = true;
+                                    if (n.env) {
+                                        const oldEnv = n.env
+                                        const newEnv = []
+                                        let envChanged = false
+                                        n.env.forEach((env, index) => {
+                                            if (envToRemove.has(env.name)) {
+                                                envChanged = true
+                                            } else {
+                                                newEnv.push(env)
+                                            }
+                                        })
+                                        if (envChanged) {
+                                            instanceHistoryEvents.push({
+                                                t: 'edit',
+                                                node: n,
+                                                changes: { env: oldEnv },
+                                                dirty: n.dirty,
+                                                changed: n.changed
+                                            })
+                                            n.env = newEnv
+                                        }
+                                    }
                                     updateNodeProperties(n);
                                     validateNode(n);
                                 }
                             });
                             RED.events.emit("subflows:change",editing_node);
                             RED.nodes.dirty(true);
-                            var historyEvent = {
+                            let historyEvent = {
                                 t:'edit',
                                 node:editing_node,
                                 changes:editState.changes,
@@ -37453,7 +37561,13 @@ RED.editor = (function() {
                                     instances:subflowInstances
                                 }
                             };
-
+                            if (instanceHistoryEvents.length > 0) {
+                                historyEvent = {
+                                    t: 'multi',
+                                    events: [ historyEvent, ...instanceHistoryEvents ],
+                                    dirty: wasDirty
+                                }
+                            }
                             RED.history.push(historyEvent);
                         }
                         editing_node.dirty = true;
@@ -42899,6 +43013,7 @@ RED.editor.codeEditor.monaco = (function() {
                         2322,  //Type 'unknown' is not assignable to type 'string'
                         2339,  //property does not exist on
                         2345,  //Argument of type xxx is not assignable to parameter of type 'DateTimeFormatOptions'
+                        2538,  //Ignore symbols as index property error. 
                         7043,  //i forget what this one is,
                         80001, //Convert to ES6 module
                         80004, //JSDoc types may be moved to TypeScript types.
@@ -45748,10 +45863,15 @@ RED.library = (function() {
                         if (lib.types && lib.types.indexOf(options.url) === -1) {
                             return;
                         }
+                        let icon = 'fa fa-hdd-o';
+                        if (lib.icon) {
+                            const fullIcon = RED.utils.separateIconPath(lib.icon);
+                            icon = (fullIcon.module==="font-awesome"?"fa ":"")+fullIcon.file;
+                        }
                         listing.push({
                             library: lib.id,
                             type: options.url,
-                            icon: lib.icon || 'fa fa-hdd-o',
+                            icon,
                             label: RED._(lib.label||lib.id),
                             path: "",
                             expanded: true,
@@ -45806,10 +45926,15 @@ RED.library = (function() {
                         if (lib.types && lib.types.indexOf(options.url) === -1) {
                             return;
                         }
+                        let icon = 'fa fa-hdd-o';
+                        if (lib.icon) {
+                            const fullIcon = RED.utils.separateIconPath(lib.icon);
+                            icon = (fullIcon.module==="font-awesome"?"fa ":"")+fullIcon.file;
+                        }
                         listing.push({
                             library: lib.id,
                             type: options.url,
-                            icon: lib.icon || 'fa fa-hdd-o',
+                            icon,
                             label: RED._(lib.label||lib.id),
                             path: "",
                             expanded: true,