@node-red/editor-client 4.1.0-beta.1 → 4.1.0

package/public/red/red.js

@@ -6341,6 +6341,7 @@ RED.nodes = (function() {
      *       - id:replace - import over the top of existing
      *  - modules: map of module:version - hints for unknown nodes
      *  - applyNodeDefaults - whether to apply default values to the imported nodes (default: false)
+     *  - eventContext - context to include in the `nodes:add` event
      */
     function importNodes(newNodesObj,options) { // createNewIds,createMissingWorkspace) {
         const defOpts = {
@@ -6349,7 +6350,8 @@ RED.nodes = (function() {
             markChanged: false,
             reimport: false,
             importMap: {},
-            applyNodeDefaults: false
+            applyNodeDefaults: false,
+            eventContext: null
         }
         options = Object.assign({}, defOpts, options)
         options.importMap = options.importMap || {}
@@ -6501,29 +6503,29 @@ RED.nodes = (function() {
                 // Provide option to install missing modules
                 notificationOptions.buttons = [
                     {
-                        text: RED._("palette.editor.manageModules"),
+                        text: RED._("palette.editor.installAll"),
                         class: "primary",
                         click: function(e) {
                             unknownNotification.close();
 
                             RED.actions.invoke('core:manage-palette', {
-                                view: 'install',
-                                filter: '"' + missingModules.join('", "') + '"'
+                                autoInstall: true,
+                                modules: missingModules.reduce((modules, moduleName) => {
+                                    modules[moduleName] = options.modules[moduleName];
+                                    return modules;
+                                }, {}),
                             });
                         }
                     },
                     {
-                        text: RED._("palette.editor.installAll"),
+                        text: RED._("palette.editor.manageModules"),
                         class: "pull-left",
                         click: function(e) {
                             unknownNotification.close();
 
                             RED.actions.invoke('core:manage-palette', {
-                                autoInstall: true,
-                                modules: missingModules.reduce((modules, moduleName) => {
-                                    modules[moduleName] = options.modules[moduleName];
-                                    return modules;
-                                }, {}),
+                                view: 'install',
+                                filter: '"' + missingModules.join('", "') + '"'
                             });
                         }
                     }
@@ -7225,7 +7227,7 @@ RED.nodes = (function() {
 
         // Now the nodes have been fully updated, add them.
         for (i=0;i<new_nodes.length;i++) {
-            new_nodes[i] = addNode(new_nodes[i])
+            new_nodes[i] = addNode(new_nodes[i], options.eventContext)
             node_map[new_nodes[i].id] = new_nodes[i]
         }
 
@@ -9864,7 +9866,7 @@ RED.utils = (function() {
 
     renderer.code = function (code, lang) {
         if(lang === "mermaid") {
-            return `<pre class='mermaid'>${code}</pre>`;
+            return `<pre style='word-break: unset;' data-c64='${btoa(code)}' class='mermaid'>${code}</pre>`;
         } else {
             return "<pre><code>" +code +"</code></pre>";
         }
@@ -17310,14 +17312,25 @@ RED.stack = (function() {
  *             The function must either return auto-complete options, or pass them
  *             to the optional 'done' parameter.
  *             If the function signature includes 'done', it must be used
+ *             The auto-complete options can either be an array of strings, or an array of objects in the form:
+ *             {
+ *                value: String : the value to insert if selected
+ *                label: String|DOM Element : the label to display in the dropdown.
+ *             }
+ *
  *  minLength: number
  *             If `minLength` is 0, pressing down arrow will show the list
+ * 
+ * completionPluginType: String
+ *             If provided instead of `search`, this will look for any plugins
+ *             registered with the given type that implement the `getCompletions` function. This
+ *             can be an async function that returns an array of string completions. It does not support
+ *             the full options object as above.
  *
- * The auto-complete options should be an array of objects in the form:
- *  {
- *      value: String : the value to insert if selected
- *      label: String|DOM Element : the label to display in the dropdown.
- *  }
+ * node:       Node
+ *             If provided, this will be passed to the `getCompletions` function of the plugin
+ *             to allow the plugin to provide context-aware completions.
+ * 
  *
  */
 
@@ -17326,6 +17339,54 @@ RED.stack = (function() {
             const that = this;
             this.completionMenuShown = false;
             this.options.minLength = parseInteger(this.options.minLength, 1, 0);
+            if (!this.options.search) {
+                // No search function provided; nothing to provide completions
+                if (this.options.completionPluginType) {
+                    const plugins = RED.plugins.getPluginsByType(this.options.completionPluginType)
+                    if (plugins.length > 0) {
+                        this.options.search = async function (value, done) {
+                            // for now, only support a single plugin
+                            const promises = plugins.map(plugin => plugin.getCompletions(value, that.options.context))
+                            const completions = (await Promise.all(promises)).flat()
+                            const results = []
+                            completions.forEach(completion => {
+                                const element = $('<div>',{style: "display: flex"})
+                                const valEl = $('<div/>',{ class: "red-ui-autoComplete-completion" })
+                                const valMatch = getMatch(completion, value)
+                                if (valMatch.found) {
+                                    valEl.append(generateSpans(valMatch))
+                                    valEl.appendTo(element)
+                                    results.push({
+                                        value: completion,
+                                        label: element,
+                                        match: valMatch
+                                    })
+                                }
+                                results.sort((a, b) => {
+                                    if (a.match.exact && !b.match.exact) {
+                                        return -1;
+                                    } else if (!a.match.exact && b.match.exact) {
+                                        return 1;
+                                    } else if (a.match.index < b.match.index) {
+                                        return -1;
+                                    } else if (a.match.index > b.match.index) {
+                                        return 1;
+                                    } else {
+                                        return 0;
+                                    }
+                                })
+                            })
+                            done(results)
+                        }
+                    } else {
+                        // No search function and no plugins found
+                        return
+                    }
+                } else {
+                    // No search function and no plugin type provided
+                    return
+                }
+            }
             this.options.search = this.options.search || function() { return [] };
             this.element.addClass("red-ui-autoComplete");
             this.element.on("keydown.red-ui-autoComplete", function(evt) {
@@ -17387,6 +17448,11 @@ RED.stack = (function() {
                     }
                     return
                 }
+                if (typeof completions[0] === "string") {
+                    completions = completions.map(function(c) {
+                        return { value: c, label: c };
+                    });
+                }
                 if (that.completionMenuShown) {
                     that.menu.options(completions);
                 } else {
@@ -17418,6 +17484,27 @@ RED.stack = (function() {
         if(isNaN(n) || n < min || n > max) { n = def || 0; }
         return n;
     }
+    // TODO: this is copied from typedInput - should be a shared utility
+    function getMatch(value, searchValue) {
+        const idx = value.toLowerCase().indexOf(searchValue.toLowerCase());
+        const len = idx > -1 ? searchValue.length : 0;
+        return {
+            index: idx,
+            found: idx > -1,
+            pre: value.substring(0,idx),
+            match: value.substring(idx,idx+len),
+            post: value.substring(idx+len),
+            exact: idx === 0 && value.length === searchValue.length
+        }
+    }
+    // TODO: this is copied from typedInput - should be a shared utility
+    function generateSpans(match) {
+        const els = [];
+        if(match.pre) { els.push($('<span/>').text(match.pre)); }
+        if(match.match) { els.push($('<span/>',{style:"font-weight: bold; color: var(--red-ui-text-color-link);"}).text(match.match)); }
+        if(match.post) { els.push($('<span/>').text(match.post)); }
+        return els;
+    }
 })(jQuery);
 ;RED.actions = (function() {
     var actions = {
@@ -20657,6 +20744,7 @@ RED.keyboard = (function() {
         "backspace": 8,
         "delete": 46,
         "space": 32,
+        "tab": 9,
         ";":186,
         "=":187,
         "+":187, // <- QWERTY specific
@@ -20923,23 +21011,27 @@ RED.keyboard = (function() {
             return resolveKeyEvent(evt);
         }
     }
-    d3.select(window).on("keydown",function() {
+    d3.select(window).on("keydown", () => {
+        handleEvent(d3.event)
+    })
+
+    function handleEvent (evt) {
         if (!handlersActive) {
             return;
         }
-        if (metaKeyCodes[d3.event.keyCode]) {
+        if (metaKeyCodes[evt]) {
             return;
         }
-        var handler = resolveKeyEvent(d3.event);
+        var handler = resolveKeyEvent(evt);
         if (handler && handler.ondown) {
             if (typeof handler.ondown === "string") {
                 RED.actions.invoke(handler.ondown);
             } else {
                 handler.ondown();
             }
-            d3.event.preventDefault();
-        }
-    });
+            evt.preventDefault();
+        }        
+    }
 
     function addHandler(scope,key,modifiers,ondown) {
         var mod = modifiers;
@@ -21321,7 +21413,8 @@ RED.keyboard = (function() {
         formatKey: formatKey,
         validateKey: validateKey,
         disable: disable,
-        enable: enable
+        enable: enable,
+        handle: handleEvent
     }
 
 })();
@@ -23195,7 +23288,9 @@ RED.view = (function() {
                         return;
                     }
                     var historyEvent = result.historyEvent;
-                    var nn = RED.nodes.add(result.node, { source: 'palette' });
+                    const linkToSplice = $(ui.helper).data("splice");
+
+                    var nn = RED.nodes.add(result.node, { source: 'palette', splice: !!linkToSplice });
 
                     var showLabel = RED.utils.getMessageProperty(RED.settings.get('editor'),"view.view-node-show-label");
                     if (showLabel !== undefined &&  (nn._def.hasOwnProperty("showLabel")?nn._def.showLabel:true) && !nn._def.defaults.hasOwnProperty("l")) {
@@ -23254,7 +23349,6 @@ RED.view = (function() {
                         nn.y -= gridOffset.y;
                     }
 
-                    var linkToSplice = $(ui.helper).data("splice");
                     if (linkToSplice) {
                         spliceLink(linkToSplice, nn, historyEvent)
                     }
@@ -23327,7 +23421,11 @@ RED.view = (function() {
             if (RED.workspaces.isLocked()) {
                 return
             }
-            importNodes(clipboard,{generateIds: clipboardSource === 'copy', generateDefaultNames: clipboardSource === 'copy'});
+            importNodes(clipboard, {
+                generateIds: clipboardSource === 'copy',
+                generateDefaultNames: clipboardSource === 'copy',
+                eventContext: { source: 'clipboard' }
+            });
         });
 
         RED.actions.add("core:detach-selected-nodes", function() { detachSelectedNodes() })
@@ -23937,10 +24035,12 @@ RED.view = (function() {
         var lastAddedX;
         var lastAddedWidth;
 
-        const context = {}
+        const context = {
+            workspace: RED.workspaces.active()
+        }
 
         if (quickAddLink) {
-            context.source = quickAddLink.node.id;
+            context.source = quickAddLink.node;
             context.sourcePort = quickAddLink.port;
             context.sourcePortType = quickAddLink.portType;
             if (quickAddLink?.virtualLink) {
@@ -23956,6 +24056,7 @@ RED.view = (function() {
             y:clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
             disableFocus: touchTrigger,
             filter: filter,
+            context,
             move: function(dx,dy) {
                 if (ghostNode) {
                     var pos = d3.transform(ghostNode.attr("transform")).translate;
@@ -23996,7 +24097,8 @@ RED.view = (function() {
                             touchImport: true,
                             notify: false,
                             // Ensure the node gets all of its defaults applied
-                            applyNodeDefaults: true
+                            applyNodeDefaults: true,
+                            eventContext: { source: 'typeSearch' }
                         })
                         quickAddActive = false;
                         ghostNode.remove();
@@ -24004,8 +24106,9 @@ RED.view = (function() {
                         if (quickAddLink) {
                             // Need to attach the link to the suggestion. This is assumed to be the first
                             // node in the array - as that's the one we've focussed on.
-                            const targetNode = importResult.nodeMap[type.nodes[0].id]
-
+                            // We need to map from the suggested node's id to the imported node's id,
+                            // and then get the proxy object for the node
+                            const targetNode = RED.nodes.node(importResult.nodeMap[type.nodes[0].id].id)
                             const drag_line = quickAddLink;
                             let src = null, dst, src_port;
                             if (drag_line.portType === PORT_TYPE_OUTPUT && (targetNode.inputs > 0 || drag_line.virtualLink) ) {
@@ -24045,6 +24148,7 @@ RED.view = (function() {
                 }
                 var nn;
                 var historyEvent;
+                let addHistoryEvent;
                 if (/^_action_:/.test(type)) {
                     const actionName = type.substring(9)
                     quickAddActive = false;
@@ -24078,6 +24182,7 @@ RED.view = (function() {
                     nn = result.node;
                     historyEvent = result.historyEvent;
                 }
+                addHistoryEvent = historyEvent;
                 if (keepAdding) {
                     mouse_mode = RED.state.QUICK_JOINING;
                 }
@@ -24091,7 +24196,7 @@ RED.view = (function() {
                 if (nn.type === 'junction') {
                     nn = RED.nodes.addJunction(nn);
                 } else {
-                    nn = RED.nodes.add(nn, { source: 'typeSearch' });
+                    nn = RED.nodes.add(nn, { source: 'typeSearch', splice: !!linkToSplice });
                 }
                 if (quickAddLink) {
                     var drag_line = quickAddLink;
@@ -24232,7 +24337,8 @@ RED.view = (function() {
 
                 if (linkToSplice) {
                     resetMouseVars();
-                    spliceLink(linkToSplice, nn, historyEvent)
+                    // Add any history event data to the original add event
+                    spliceLink(linkToSplice, nn, addHistoryEvent)
                 }
                 RED.history.push(historyEvent);
                 RED.nodes.dirty(true);
@@ -24276,17 +24382,14 @@ RED.view = (function() {
                 }
             },
             suggest: function (suggestion) {
+                // TypeSearch only provides one suggestion at a time
                 if (suggestion?.nodes?.length > 0) {
                     // Reposition the suggestion relative to the existing ghost node position
-                    const deltaX = suggestion.nodes[0].x - point[0]
-                    const deltaY = suggestion.nodes[0].y - point[1]
+                    const deltaX = (suggestion.nodes[0].x || 0) - point[0]
+                    const deltaY = (suggestion.nodes[0].y || 0) - point[1]
                     suggestion.nodes.forEach(node => {
-                        if (Object.hasOwn(node, 'x')) {
-                            node.x = node.x - deltaX
-                        }
-                        if (Object.hasOwn(node, 'y')) {
-                            node.y = node.y - deltaY
-                        }
+                        node.x = (node.x || 0) - deltaX
+                        node.y = (node.y || 0) - deltaY
                     })
                 }
                 setSuggestedFlow(suggestion);
@@ -27297,6 +27400,10 @@ RED.view = (function() {
                         .on("touchend",nodeTouchEnd)
                         .on("mouseover",nodeMouseOver)
                         .on("mouseout",nodeMouseOut);
+                } else if (d.__ghostClick) {
+                    d3.select(mainRect)
+                        .on("mousedown",d.__ghostClick)
+                        .on("touchstart",d.__ghostClick)
                 }
                 nodeContents.appendChild(mainRect);
                 //node.append("rect").attr("class", "node-gradient-top").attr("rx", 6).attr("ry", 6).attr("height",30).attr("stroke","none").attr("fill","url(#gradient-top)").style("pointer-events","none");
@@ -27539,6 +27646,10 @@ RED.view = (function() {
                                     .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
                                     .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
                                 RED.hooks.trigger("viewAddPort",{node:d,el: this, port: inputGroup[0][0], portType: "input", portIndex: 0})
+                            } else if (d.__ghostClick) {
+                                inputGroupPorts
+                                    .on("mousedown",d.__ghostClick)
+                                    .on("touchstart",d.__ghostClick)
                             }
                         }
                         var numOutputs = d.outputs;
@@ -27597,6 +27708,9 @@ RED.view = (function() {
                                     portPort.addEventListener("touchend", portTouchEndProxy);
                                     portPort.addEventListener("mouseover", portMouseOverProxy);
                                     portPort.addEventListener("mouseout", portMouseOutProxy);
+                                } else if (d.__ghostClick) {
+                                    portPort.addEventListener("mousedown", d.__ghostClick)
+                                    portPort.addEventListener("touchstart", d.__ghostClick)
                                 }
 
                                 this.appendChild(portGroup);
@@ -27898,6 +28012,10 @@ RED.view = (function() {
                                 }
                             }
                         })
+                } else if (d.__ghostClick) {
+                    d3.select(pathBack)
+                        .on("mousedown",d.__ghostClick)
+                        .on("touchstart",d.__ghostClick)
                 }
 
                 var pathOutline = document.createElementNS("http://www.w3.org/2000/svg","path");
@@ -28369,7 +28487,8 @@ RED.view = (function() {
             generateIds: false,
             generateDefaultNames: false,
             notify: true,
-            applyNodeDefaults: false
+            applyNodeDefaults: false,
+            eventContext: null
         }
         const addNewFlow = options.addFlow
         const touchImport = options.touchImport;
@@ -28459,7 +28578,8 @@ RED.view = (function() {
                 importMap: options.importMap,
                 markChanged: true,
                 modules: modules,
-                applyNodeDefaults: applyNodeDefaults
+                applyNodeDefaults: applyNodeDefaults,
+                eventContext: options.eventContext
             });
             if (importResult) {
                 var new_nodes = importResult.nodes;
@@ -28914,10 +29034,10 @@ RED.view = (function() {
         nn.w = RED.view.node_width;
         nn.h = Math.max(RED.view.node_height, (nn.outputs || 0) * 15);
         nn.resize = true;
-        if (x != null && typeof x == "number" && x >= 0) {
+        if (x != null && typeof x == "number") {
             nn.x = x;
         }
-        if (y != null && typeof y == "number" && y >= 0) {
+        if (y != null && typeof y == "number") {
             nn.y = y;
         }
         var historyEvent = {
@@ -29007,7 +29127,9 @@ RED.view = (function() {
      *             x: 0,
      *             y: 0,
      *         }
-     *      ]
+     *     ],
+     *     "source": <sourceNode>,
+     *     "sourcePort": <sourcePort>, 
      * }
      * If `nodes` is a single node without an id property, it will be generated
      * using its default properties.
@@ -29015,6 +29137,9 @@ RED.view = (function() {
      * If `nodes` has multiple, they must all have ids and will be assumed to be 'importable'.
      * In other words, a piece of valid flow json.
      * 
+     * `source`/`sourcePort` are option and used to indicate a node the suggestion should be connected to.
+     * If provided, a ghost wire will be added between the source and the first node in the suggestion.
+     * 
      * Limitations:
      *  - does not support groups, subflows or whole tabs
      *  - does not support config nodes
@@ -29025,6 +29150,9 @@ RED.view = (function() {
      * @param {Object} suggestion - The suggestion object
      */
     function setSuggestedFlow (suggestion) {
+        $(window).off('keydown.suggestedFlow')
+        $(window).off('mousedown.suggestedFlow');
+        RED.keyboard.enable()
         if (!currentSuggestion && !suggestion) {
             // Avoid unnecessary redraws
             return
@@ -29032,18 +29160,57 @@ RED.view = (function() {
         // Clear up any existing suggestion state
         clearSuggestedFlow()
         currentSuggestion = suggestion
-        if (suggestion?.nodes?.length > 0) {
+        if (suggestion && suggestion.nodes) {
+            // If suggestion.nodes is an array of arrays, then there are multiple suggestions being provided
+            // Normalise the shape of the suggestion.nodes to be an array of arrays 
+            if (!Array.isArray(suggestion.nodes[0])) {
+                suggestion.nodes = [suggestion.nodes]
+            }
+            suggestion.count = suggestion.nodes.length
+            suggestion.currentIndex = 0
+            suggestion.current = suggestion.nodes[suggestion.currentIndex]
+            refreshSuggestedFlow()
+        } else {
+            redraw()
+        }
+    }
+
+    function refreshSuggestedFlow () {
+        const suggestion = currentSuggestion
+        suggestedNodes = []
+        suggestedLinks = []
+
+        currentSuggestion.current = currentSuggestion.nodes[currentSuggestion.currentIndex]
+        if (suggestion.current.length > 0) {
             const nodeMap = {}
             const links = []
-            suggestion.nodes.forEach(nodeConfig => {
+            const positionOffset = { x: 0, y: 0 }
+            if (suggestion.source && suggestion.position === 'relative') {
+                // If the suggestion is relative to a source node, use its position plus a suitable offset
+                let targetX = suggestion.source.x + (suggestion.source.w || 120) + (3 * gridSize)
+                const targetY = suggestion.source.y
+                // Keep targetY where it is, but ensure targetX is grid aligned
+                if (snapGrid) {
+                    // This isn't a perfect grid snap, as we don't have the true node width at this point.
+                    // TODO: defer grid snapping until the node is created?
+                    const gridOffset = RED.view.tools.calculateGridSnapOffsets({ x: targetX, y: targetY, w: node_width, h: node_height });
+                    targetX += gridOffset.x
+                }
+
+                positionOffset.x = targetX - (suggestion.current[0].x || 0)
+                positionOffset.y = targetY - (suggestion.current[0].y || 0)
+            }
+
+            suggestion.current.forEach(nodeConfig => {
                 if (!nodeConfig.type || nodeConfig.type === 'group' || nodeConfig.type === 'subflow' || nodeConfig.type === 'tab') {
                     // A node type we don't support previewing
                     return
                 }
 
                 let node
-
                 if (nodeConfig.type === 'junction') {
+                    nodeConfig.x = (nodeConfig.x || 0) + positionOffset.x
+                    nodeConfig.y = (nodeConfig.y || 0) + positionOffset.y
                     node = {
                         _def: {defaults:{}},
                         type: 'junction',
@@ -29064,6 +29231,8 @@ RED.view = (function() {
                         // TODO: unknown node types could happen...
                         return
                     }
+                    nodeConfig.x = (nodeConfig.x || 0) + positionOffset.x
+                    nodeConfig.y = (nodeConfig.y || 0) + positionOffset.y
                     const result = createNode(nodeConfig.type, nodeConfig.x, nodeConfig.y)
                     if (!result) {
                         return
@@ -29086,6 +29255,11 @@ RED.view = (function() {
                     node.id = nodeConfig.id || node.id
                     node.__ghost = true;
                     node.dirty = true;
+                    if (suggestion.clickToApply) {
+                        node.__ghostClick = function () {
+                            applySuggestedFlow()
+                        }
+                    }
                     nodeMap[node.id] = node
 
                     if (nodeConfig.wires) {
@@ -29114,6 +29288,56 @@ RED.view = (function() {
                     suggestedLinks.push(link)
                 }
             })
+            if (suggestion.source && suggestedNodes[0]?._def?.inputs > 0) {
+                suggestedLinks.push({
+                    source: suggestion.source,
+                    sourcePort: suggestion.sourcePort || 0,
+                    target: suggestedNodes[0],
+                    targetPort: 0,
+                    __ghost: true
+                })
+            }
+            if (!RED.typeSearch.isVisible()) {
+                // Disable the core keyboard handling so we get priority.
+                // Ideally we'd be able to do this via actions, but we can't currently scope
+                // actions finely enough to only be handled when the suggested flow is active.
+                RED.keyboard.disable()
+                $(window).on('keydown.suggestedFlow', function (evt) {
+                    $(window).off('keydown.suggestedFlow')
+                    RED.keyboard.enable()
+                    if (evt.keyCode === 9) { // tab; apply suggestion
+                        evt.stopPropagation();
+                        evt.preventDefault();
+                        applySuggestedFlow();
+                    } else if (evt.keyCode === 38 && currentSuggestion.count > 1) { // up arrow
+                        evt.stopPropagation();
+                        evt.preventDefault();
+                        currentSuggestion.currentIndex--
+                        if (currentSuggestion.currentIndex < 0) {
+                            currentSuggestion.currentIndex = currentSuggestion.count - 1
+                        }
+                        refreshSuggestedFlow();
+                    } else if (evt.keyCode === 40 && currentSuggestion.count > 1) { // down arrow
+                        evt.stopPropagation();
+                        evt.preventDefault();
+                        currentSuggestion.currentIndex++
+                        if (currentSuggestion.currentIndex === currentSuggestion.count) {
+                            currentSuggestion.currentIndex = 0
+                        }
+                        refreshSuggestedFlow();
+                    } else { // Anything else; clear the suggestion
+                        clearSuggestedFlow();
+                        RED.view.redraw(true);
+                        // manually push the event to the keyboard handler
+                        RED.keyboard.handle(evt)
+                    }
+                });
+            }
+            if (suggestion.clickToApply) {
+                $(window).on('mousedown.suggestedFlow', function (evnt) {
+                    clearSuggestedFlow();
+                })
+            }
         }
         if (ghostNode) {
             if (suggestedNodes.length > 0) {
@@ -29122,26 +29346,62 @@ RED.view = (function() {
                 ghostNode.style('opacity', 1)
             }
         }
-        redraw();
+        if (currentSuggestion.count > 1 && suggestedNodes.length > 0) {
+            suggestedNodes[0].status = {
+                text: `${currentSuggestion.currentIndex + 1} / ${currentSuggestion.count}`,
+            }
+            suggestedNodes[0].dirtyStatus = true
+        }
+        redraw()
     }
 
     function clearSuggestedFlow () {
+        $(window).off('mousedown.suggestedFlow');
+        $(window).off('keydown.suggestedFlow')
+        RED.keyboard.enable()
         currentSuggestion = null
         suggestedNodes = []
         suggestedLinks = []
     }
 
     function applySuggestedFlow () {
-        if (currentSuggestion && currentSuggestion.nodes) {
-            const nodesToImport = currentSuggestion.nodes
+        if (currentSuggestion && currentSuggestion.current) {
+            const nodesToImport = currentSuggestion.current
+            const sourceNode = currentSuggestion.source
+            const sourcePort = currentSuggestion.sourcePort || 0
             setSuggestedFlow(null)
-            return importNodes(nodesToImport, {
+            const result = importNodes(nodesToImport, {
                 generateIds: true,
                 touchImport: true,
                 notify: false,
                 // Ensure the node gets all of its defaults applied
-                applyNodeDefaults: true
+                applyNodeDefaults: true,
+                eventContext: { source: 'suggestion' }
             })
+            if (sourceNode) {
+                const firstNode = result.nodeMap[nodesToImport[0].id]
+                if (firstNode && firstNode._def?.inputs > 0) {
+                    // Connect the source node to the first node in the suggestion
+                    const link = {
+                        source: sourceNode,
+                        target: RED.nodes.node(firstNode.id),
+                        sourcePort: sourcePort,
+                        targetPort: 0
+                    };
+                    RED.nodes.addLink(link)
+                    let historyEvent = RED.history.peek();
+                    if (historyEvent.t === "multi") {
+                        historyEvent = historyEvent.events.find(e => e.t === "add")
+                    }
+                    if (historyEvent) {
+                        historyEvent.links = historyEvent.links || [];
+                        historyEvent.links.push(link);
+                    }
+                    RED.view.redraw(true);
+                }
+            }
+
+            return result
         }
     }
 
@@ -30121,6 +30381,8 @@ RED.view.tools = (function() {
 
 
     function gotoNearestNode(direction) {
+        // Do not select a nearest node if move is active
+        if (RED.view.state() === RED.state.MOVING_ACTIVE) { return }
         var selection = RED.view.selection();
         if (selection.nodes && selection.nodes.length === 1) {
             var origin = selection.nodes[0];
@@ -30900,8 +31162,8 @@ RED.view.tools = (function() {
                         t: 'multi',
                         events: historyEvents
                     })
+                    RED.nodes.dirty(true)
                 }
-                RED.nodes.dirty(true)
                 RED.view.redraw()
             }
         }
@@ -31562,7 +31824,7 @@ RED.palette = (function() {
             getNodeCount: function (visibleOnly) {
                 const nodes = catDiv.find(".red-ui-palette-node")
                 if (visibleOnly) {
-                    return nodes.filter(function() { return $(this).css('display') !== 'none'}).length
+                    return nodes.filter(function() { return $(this).attr("data-filter") !== "true"}).length
                 } else {
                     return nodes.length
                 }
@@ -32054,8 +32316,10 @@ RED.palette = (function() {
             var currentLabel = $(el).attr("data-palette-label");
             var type = $(el).attr("data-palette-type");
             if (val === "" || re.test(type) || re.test(currentLabel)) {
+                $(el).attr("data-filter", null)
                 $(this).show();
             } else {
+                $(el).attr("data-filter", "true")
                 $(this).hide();
             }
         });
@@ -35691,6 +35955,11 @@ RED.palette.editor = (function() {
         });
 
         RED.events.on('registry:module-updated', function(ns) {
+            if (nodeEntries[ns.module]) {
+                // Set the node/plugin as updated
+                nodeEntries[ns.module].info.pending_version = ns.version;
+            }
+
             refreshNodeModule(ns.module);
             refreshUpdateStatus();
         });
@@ -37827,6 +38096,7 @@ RED.editor = (function() {
 
     function showEditDialog(node, defaultTab) {
         if (buildingEditDialog) { return }
+        if (editStack.includes(node)) { return }
         buildingEditDialog = true;
         if (node.z && RED.workspaces.isLocked(node.z)) { return }
         var editing_node = node;
@@ -38144,6 +38414,7 @@ RED.editor = (function() {
         var editing_config_node = RED.nodes.node(id);
         var activeEditPanes = [];
 
+        if (editStack.includes(editing_config_node)) { return }
         if (editing_config_node && editing_config_node.z && RED.workspaces.isLocked(editing_config_node.z)) { return }
 
         var configNodeScope = ""; // default to global
@@ -38587,6 +38858,7 @@ RED.editor = (function() {
 
     function showEditSubflowDialog(subflow, defaultTab) {
         if (buildingEditDialog) { return }
+        if (editStack.includes(subflow)) { return }
         buildingEditDialog = true;
 
         editStack.push(subflow);
@@ -38803,6 +39075,7 @@ RED.editor = (function() {
 
     function showEditGroupDialog(group, defaultTab) {
         if (buildingEditDialog) { return }
+        if (editStack.includes(group)) { return }
         buildingEditDialog = true;
         if (group.z && RED.workspaces.isLocked(group.z)) { return }
         var editing_node = group;
@@ -38917,6 +39190,7 @@ RED.editor = (function() {
 
     function showEditFlowDialog(workspace, defaultTab) {
         if (buildingEditDialog) { return }
+        if (editStack.includes(workspace)) { return }
         buildingEditDialog = true;
         var activeEditPanes = [];
         RED.view.state(RED.state.EDITING);
@@ -43208,7 +43482,7 @@ RED.editor = (function() {
 
             nodes.forEach(async node => {
                 if (!node.getAttribute('mermaid-processed')) {
-                    const mermaidContent = node.innerText
+                    const mermaidContent = atob($(node).data('c64'))
                     node.setAttribute('mermaid-processed', true)
                     try {
                         const { svg } = await mermaid.render('mermaid-render-'+Date.now()+'-'+(diagramIds++), mermaidContent);
@@ -44949,6 +45223,15 @@ RED.editor.codeEditor.monaco = (function() {
             ed.gotoLine(row, col);
         }
         ed.type = type;
+
+        ed.onKeyDown((event) => {
+            if (event.keyCode === monaco.KeyCode.Escape) {
+                if (monacoWidgetsAreOpen(ed)) {
+                    event.preventDefault();
+                }
+            }
+        })
+
         return ed;
     }
 
@@ -44958,6 +45241,16 @@ RED.editor.codeEditor.monaco = (function() {
         return true;
     }
 
+    function monacoWidgetsAreOpen(editor) {
+        /** @type {HTMLElement} */
+        const editorDomNode = editor.getDomNode()
+        const suggestVisible = !!editorDomNode.querySelector('.monaco-editor .suggest-widget.visible');
+        const parameterHintsVisible = !!editorDomNode.querySelector('.monaco-editor .parameter-hints-widget.visible');
+        const findWidgetVisible = !!editorDomNode.querySelector('.monaco-editor .find-widget.visible');
+        const renameInputVisible = !!editorDomNode.querySelector('.monaco-editor .rename-box');
+        return suggestVisible || parameterHintsVisible || findWidgetVisible || renameInputVisible
+    }
+
     return {
         /**
          * Editor type
@@ -45000,11 +45293,14 @@ RED.editor.codeEditor.monaco = (function() {
  **/
 RED.eventLog = (function() {
 
-    var template = '<script type="text/x-red" data-template-name="_eventLog"><div class="form-row node-text-editor-row"><div style="height: 100%;min-height: 150px;" class="node-text-editor" id="red-ui-event-log-editor"></div></div></script>';
+    const template = '<script type="text/x-red" data-template-name="_eventLog"><div class="form-row node-text-editor-row"><div style="height: 100%;min-height: 150px;" class="node-text-editor" id="red-ui-event-log-editor"></div></div></script>';
+
+    let eventLogEditor;
+    let backlog = [];
+    let shown = false;
+
+    const activeLogs = new Set()
 
-    var eventLogEditor;
-    var backlog = [];
-    var shown = false;
 
     function appendLogLine(line) {
         backlog.push(line);
@@ -45023,6 +45319,18 @@ RED.eventLog = (function() {
         init: function() {
             $(template).appendTo("#red-ui-editor-node-configs");
             RED.actions.add("core:show-event-log",RED.eventLog.show);
+
+            const statusWidget = $('<button type="button" class="red-ui-footer-button red-ui-event-log-status" style="line-height: normal"><img style="width: 80%" src="red/images/spin.svg"/></div></button>');
+            statusWidget.on("click", function(evt) {
+                RED.actions.invoke("core:show-event-log");
+            })
+            RED.statusBar.add({
+                id: "red-ui-event-log-status",
+                align: "right",
+                element: statusWidget
+            });
+            RED.statusBar.hide("red-ui-event-log-status");
+
         },
         show: function() {
             if (shown) {
@@ -45083,6 +45391,12 @@ RED.eventLog = (function() {
         },
         log: function(id,payload) {
             var ts = (new Date(payload.ts)).toISOString()+" ";
+            if (!payload.end) {
+                activeLogs.add(id)
+            } else {
+                activeLogs.delete(id);
+            }
+
             if (payload.type) {
                 ts += "["+payload.type+"] "
             }
@@ -45096,6 +45410,11 @@ RED.eventLog = (function() {
                     appendLogLine(ts+line);
                 })
             }
+            if (activeLogs.size > 0) {
+                RED.statusBar.show("red-ui-event-log-status");
+            } else {
+                RED.statusBar.hide("red-ui-event-log-status");
+            }
         },
         startEvent: function(name) {
             backlog.push("");
@@ -45337,14 +45656,6 @@ RED.eventLog = (function() {
             editorStack = $("#red-ui-editor-stack");
             $(window).on("resize", handleWindowResize);
             RED.events.on("sidebar:resize",handleWindowResize);
-            $("#red-ui-editor-shade").on("click", function() {
-                if (!openingTray) {
-                    var tray = stack[stack.length-1];
-                    if (tray && tray.primaryButton) {
-                        tray.primaryButton.click();
-                    }
-                }
-            });
         },
         show: function show(options) {
             lowerTrayZ();
@@ -49422,7 +49733,6 @@ RED.actionList = (function() {
             addItem: function(container, i, nodeItem) {
                 // nodeItem can take multiple forms
                 // - A node type: {type: "inject", def: RED.nodes.getType("inject"), label: "Inject"}
-                // - A flow suggestion: { suggestion: true, nodes: [] }
                 // - A placeholder suggestion: { suggestionPlaceholder: true, label: 'loading suggestions...' }
 
                 let nodeDef = nodeItem.def;
@@ -49502,7 +49812,17 @@ RED.actionList = (function() {
 
     }
 
+    let activeSuggestion
     function updateSuggestion(nodeItem) {
+        if (nodeItem === activeSuggestion) {
+            return
+        }
+        if (!visible && nodeItem) {
+            // Do not update suggestion if the dialog is not visible
+            // - for example, whilst the dialog is closing and the user mouses over a new item
+            return
+        }
+        activeSuggestion = nodeItem
         if (suggestCallback) {
             if (!nodeItem) {
                 suggestCallback(null);
@@ -49524,6 +49844,14 @@ RED.actionList = (function() {
         }
     }
     function confirm(def) {
+        if (!activeSuggestion) {
+            // The user has hit Enter without selecting an entry in the list.
+            // This means no suggestion has been shown yet - and the position recalculation
+            // has not been done.
+            // Trigger an update of the suggestion to get the position right before
+            // applying.
+            updateSuggestion(def)
+        }
         hide();
         if (!def.nodes && !/^_action_:/.test(def.type)) {
             typesUsed[def.type] = Date.now();
@@ -49559,6 +49887,7 @@ RED.actionList = (function() {
             }
             visible = true;
         } else {
+            updateSuggestion(null)
             dialog.hide();
             searchResultsDiv.hide();
         }
@@ -49599,9 +49928,7 @@ RED.actionList = (function() {
         },200);
     }
     function hide(fast) {
-        if (suggestCallback) {
-            suggestCallback(null);
-        }
+        updateSuggestion(null)
         if (visible) {
             visible = false;
             if (dialog !== null) {
@@ -49700,32 +50027,37 @@ RED.actionList = (function() {
 
         let index = 0;
 
-        // const suggestionItem = {
-        //     suggestionPlaceholder: true,
-        //     label: 'loading suggestions...',
-        //     separator: true,
-        //     i: index++
-        // }
-        // searchResults.editableList('addItem', suggestionItem);
-        // setTimeout(function() {
-        //     searchResults.editableList('removeItem', suggestionItem);
-
-        //     const suggestedItem = {
-        //         suggestion: true,
-        //         label: 'Change/Debug Combo',
-        //         separator: true,
-        //         i: suggestionItem.i,
-        //         nodes: [
-        //             { id: 'suggestion-1', type: 'change', x: 0, y: 0, wires:[['suggestion-2']] },
-        //             { id: 'suggestion-2', type: 'function', outputs: 3, x: 200, y: 0, wires:[['suggestion-3'],['suggestion-4'],['suggestion-6']] },
-        //             { id: 'suggestion-3', _g: 'suggestion-group-1', type: 'debug', x: 375, y: -40 },
-        //             { id: 'suggestion-4', _g: 'suggestion-group-1', type: 'debug', x: 375, y: 0 },
-        //             { id: 'suggestion-5', _g: 'suggestion-group-1', type: 'debug', x: 410, y: 40 },
-        //             { id: 'suggestion-6', type: 'junction', wires: [['suggestion-5']], x:325, y:40 }
-        //         ]
-        //     }
-        //     searchResults.editableList('addItem', suggestedItem);
-        // }, 1000)
+        if (!opts.context?.virtualLink) {
+            // Check for suggestion plugins
+            const suggestionPlugins = RED.plugins.getPluginsByType('node-red-flow-suggestion-source');
+            if (suggestionPlugins.length > 0) {
+                const suggestionItem = {
+                    suggestionPlaceholder: true,
+                    label: RED._('palette.loadingSuggestions'),
+                    separator: true,
+                    i: index++
+                }
+                searchResults.editableList('addItem', suggestionItem);
+                suggestionPlugins[0].getSuggestions(opts.context).then(function (suggestedFlows) {
+                    searchResults.editableList('removeItem', suggestionItem);
+                    if (!Array.isArray(suggestedFlows)) {
+                        suggestedFlows = [suggestedFlows];
+                    }
+                    suggestedFlows.forEach(function(suggestion, index) {
+                        const suggestedItem = {
+                            suggestion: true,
+                            separator: index === suggestedFlows.length - 1,
+                            i: suggestionItem.i,
+                            ...suggestion
+                        }
+                        if (!suggestion.label && suggestion.nodes && suggestion.nodes.length === 1 && suggestion.nodes[0].type) {
+                            suggestedItem.label = getTypeLabel(suggestion.nodes[0].type, RED.nodes.getType(suggestion.nodes[0].type));
+                        }
+                        searchResults.editableList('addItem', suggestedItem);
+                    })
+                })
+            }
+        }
 
         for(i=0;i<common.length;i++) {
             let itemDef
@@ -49776,9 +50108,10 @@ RED.actionList = (function() {
     }
 
     return {
-        show: show,
+        show,
         refresh: refreshTypeList,
-        hide: hide
+        hide,
+        isVisible: () => visible
     };
 
 })();