@node-red/editor-client 4.1.4 → 4.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-client",
-    "version": "4.1.4",
+    "version": "4.1.6",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",

package/public/red/about

@@ -1,4 +1,20 @@
-#### 4.1.4: Maintenance Releas
+#### 4.1.6: Maintenance Release
+
+ - Allow palette.theme to be set via theme plugin and include icons (#5500) @knolleary
+ - Ensure config sidebar tooltip handles html content (#5501) @knolleary
+ - Allow node-red integrator access to available updates (#5499) @Steve-Mcl
+ - Add frontend pre and post debug message hooks (#5495) @Steve-Mcl
+ - Fix: allow middle-click panning over links and ports (#5496) @lklivingstone
+ - Support ctrl key to select configuration nodes (#5486) @kazuhitoyokoi
+ - Add § as shortcut meta-key (#5482) @gorenje
+ - Update dependencies (#5502) @knolleary
+
+#### 4.1.5: Maintenance Release
+
+ - chore: bump tar to 7.5.7 (#5472) @bryopsida
+ - Update node-red-admin dependency @knolleary
+
+#### 4.1.4: Maintenance Release
 
  - Update tar dependency @knolleary
  - Revert overflow fix in editableList (#5467) @knolleary

package/public/red/red.js

@@ -1079,138 +1079,209 @@ var RED = (function() {
          emit: emit
      }
  })();
-;RED.hooks = (function() {
+;RED.hooks = (function () {
+    // At the time of writing this PR, VALID_HOOKS were not enforced. There may be a good reason for this
+    // so the below flag has been added to permit this behaviour. If desired, this can be set to false to
+    // enforce that only known hooks can be added/triggered.
+    const knownHooksOnly = false
+
+    const VALID_HOOKS = Object.freeze({
+        viewRemoveNode: true,
+        viewAddNode: true,
+        viewRemovePort: true,
+        viewAddPort: true,
+        viewRedrawNode: true,
+        debugPreProcessMessage: true,
+        debugPostProcessMessage: true
+    })
 
-    var VALID_HOOKS = [
+    /**
+     * @typedef {keyof typeof VALID_HOOKS} HookId - A string literal type representing a hook identifier (sans label).
+     * 
+     * @typedef {Object} HookItem - An item in the linked list of hooks for a given HookId
+     * @property {function} cb - The callback function to be called when the hook is triggered
+     * @property {HookItem|null} previousHook - The previous hook in the linked list
+     * @property {HookItem|null} nextHook - The next hook in the linked list
+     * @property {boolean} removed - Flag indicating if the hook has been removed
+     * 
+     * @typedef {Record<HookId, HookItem|null>} Hooks - A mapping of HookIds to the head of their linked list of HookItems
+     */
 
-    ]
 
-    var hooks = { }
-    var labelledHooks = { }
+    /** @type {Hooks} - A mapping of HookIds to the head of their linked list of HookItems */
+    let hooks = {}
+
+    /** @type {Record<string, Record<HookId, HookItem>>} - A mapping of labels to their hooks */
+    let labelledHooks = {}
 
     function add(hookId, callback) {
-        var parts = hookId.split(".");
-        var id = parts[0], label = parts[1];
+        const { label, id } = parseLabelledHook(hookId)
 
-        // if (VALID_HOOKS.indexOf(id) === -1) {
-        //     throw new Error("Invalid hook '"+id+"'");
-        // }
+        if (knownHooksOnly && !isKnownHook(id)) {
+            throw new Error("Invalid hook '" + id + "'")
+        }
         if (label && labelledHooks[label] && labelledHooks[label][id]) {
-            throw new Error("Hook "+hookId+" already registered")
+            throw new Error("Hook " + hookId + " already registered")
         }
-        var hookItem = {cb:callback, previousHook: null, nextHook: null }
+        if (typeof callback !== "function") {
+            throw new Error("Invalid hook '" + hookId + "'. Callback must be a function")
+        }
+
+        /** @type {HookItem} */
+        const hookItem = { cb: callback, previousHook: null, nextHook: null }
 
-        var tailItem = hooks[id];
+        let tailItem = hooks[id]
         if (tailItem === undefined) {
-            hooks[id] = hookItem;
+            hooks[id] = hookItem
         } else {
-            while(tailItem.nextHook !== null) {
+            while (tailItem.nextHook !== null) {
                 tailItem = tailItem.nextHook
             }
-            tailItem.nextHook = hookItem;
-            hookItem.previousHook = tailItem;
+            tailItem.nextHook = hookItem
+            hookItem.previousHook = tailItem
         }
 
         if (label) {
-            labelledHooks[label] = labelledHooks[label]||{};
-            labelledHooks[label][id] = hookItem;
+            labelledHooks[label] = labelledHooks[label] || {}
+            labelledHooks[label][id] = hookItem
         }
     }
+
     function remove(hookId) {
-        var parts = hookId.split(".");
-        var id = parts[0], label = parts[1];
-        if ( !label) {
-            throw new Error("Cannot remove hook without label: "+hookId)
+        const { label, id } = parseLabelledHook(hookId)
+        if (!label) {
+            throw new Error("Cannot remove hook without label: " + hookId)
         }
         if (labelledHooks[label]) {
             if (id === "*") {
                 // Remove all hooks for this label
-                var hookList = Object.keys(labelledHooks[label]);
-                for (var i=0;i<hookList.length;i++) {
-                    removeHook(hookList[i],labelledHooks[label][hookList[i]])
+                const hookList = Object.keys(labelledHooks[label])
+                for (let i = 0; i < hookList.length; i++) {
+                    removeHook(hookList[i], labelledHooks[label][hookList[i]])
                 }
-                delete labelledHooks[label];
+                delete labelledHooks[label]
             } else if (labelledHooks[label][id]) {
-                removeHook(id,labelledHooks[label][id])
-                delete labelledHooks[label][id];
-                if (Object.keys(labelledHooks[label]).length === 0){
-                    delete labelledHooks[label];
+                removeHook(id, labelledHooks[label][id])
+                delete labelledHooks[label][id]
+                if (Object.keys(labelledHooks[label]).length === 0) {
+                    delete labelledHooks[label]
                 }
             }
         }
     }
 
-    function removeHook(id,hookItem) {
-        var previousHook = hookItem.previousHook;
-        var nextHook = hookItem.nextHook;
+    /**
+     * Remove a hook from the linked list of hooks for a given id
+     * @param {HookId} id 
+     * @param {HookItem} hookItem 
+     * @private
+     */
+    function removeHook(id, hookItem) {
+        let previousHook = hookItem.previousHook
+        let nextHook = hookItem.nextHook
 
         if (previousHook) {
-            previousHook.nextHook = nextHook;
+            previousHook.nextHook = nextHook
         } else {
-            hooks[id] = nextHook;
+            hooks[id] = nextHook
         }
         if (nextHook) {
-            nextHook.previousHook = previousHook;
+            nextHook.previousHook = previousHook
         }
-        hookItem.removed = true;
+        hookItem.removed = true
         if (!previousHook && !nextHook) {
-            delete hooks[id];
+            delete hooks[id]
         }
     }
 
-    function trigger(hookId, payload, done) {
-        var hookItem = hooks[hookId];
+    /**
+     * Trigger a hook, calling all registered callbacks in sequence.
+     * If any callback returns false, the flow is halted and no further hooks are called.
+     * @param {HookId} id The id of the hook to trigger (should not include a label - e.g. "viewAddNode", not "viewAddNode.myLabel")
+     * @param {*} payload The payload to be passed to each hook callback
+     * @param {function(?Error=):void} [done] Optional callback. If not provided, a Promise will be returned.
+     * @return {Promise|undefined} Returns a Promise if the done callback is not provided, otherwise undefined
+     */
+    function trigger(id, payload, done) {
+        let hookItem = hooks[id]
         if (!hookItem) {
             if (done) {
-                done();
+                done()
+                return
+            } else {
+                return Promise.resolve()
             }
-            return;
         }
+        if (!done) {
+            return new Promise((resolve, reject) => {
+                invokeStack(hookItem, payload, function (err) {
+                    if (err !== undefined && err !== false) {
+                        if (!(err instanceof Error)) {
+                            err = new Error(err)
+                        }
+                        err.hook = id
+                        reject(err)
+                    } else {
+                        resolve(err)
+                    }
+                })
+            })
+        } else {
+            invokeStack(hookItem, payload, done)
+        }
+    }
+
+    /**
+     * @private
+     */
+    function invokeStack(hookItem, payload, done) {
         function callNextHook(err) {
             if (!hookItem || err) {
-                if (done) { done(err) }
-                return err;
+                done(err)
+                return
             }
             if (hookItem.removed) {
-                hookItem = hookItem.nextHook;
-                return callNextHook();
+                hookItem = hookItem.nextHook
+                callNextHook()
+                return
             }
-            var callback = hookItem.cb;
+            const callback = hookItem.cb
             if (callback.length === 1) {
                 try {
-                    let result = callback(payload);
+                    let result = callback(payload)
                     if (result === false) {
                         // Halting the flow
-                        if (done) { done(false) }
-                        return result;
+                        done(false)
+                        return
                     }
-                    hookItem = hookItem.nextHook;
-                    return callNextHook();
-                } catch(e) {
-                    console.warn(e);
-                    if (done) { done(e);}
-                    return e;
+                    if (result && typeof result.then === 'function') {
+                        result.then(handleResolve, callNextHook)
+                        return
+                    }
+                    hookItem = hookItem.nextHook
+                    callNextHook()
+                } catch (e) {
+                    done(e)
+                    return
                 }
             } else {
-                // There is a done callback
                 try {
-                    callback(payload,function(result) {
-                        if (result === undefined) {
-                            hookItem = hookItem.nextHook;
-                            callNextHook();
-                        } else {
-                            if (done) { done(result)}
-                        }
-                    })
-                } catch(e) {
-                    console.warn(e);
-                    if (done) { done(e) }
-                    return e;
+                    callback(payload, handleResolve)
+                } catch (e) {
+                    done(e)
+                    return
                 }
             }
         }
-
-        return callNextHook();
+        function handleResolve(result) {
+            if (result === undefined) {
+                hookItem = hookItem.nextHook
+                callNextHook()
+            } else {
+                done(result)
+            }
+        }
+        callNextHook()
     }
 
     function clear() {
@@ -1218,23 +1289,51 @@ var RED = (function() {
         labelledHooks = {}
     }
 
+    /**
+     * Check if a hook with the given id exists
+     * @param {string} hookId The hook identifier, which may include a label (e.g. "viewAddNode.myLabel")
+     * @returns {boolean}
+     */
     function has(hookId) {
-        var parts = hookId.split(".");
-        var id = parts[0], label = parts[1];
+        const { label, id } = parseLabelledHook(hookId)
         if (label) {
             return !!(labelledHooks[label] && labelledHooks[label][id])
         }
         return !!hooks[id]
     }
 
+    function isKnownHook(hookId) {
+        const { id } = parseLabelledHook(hookId)
+        return !!VALID_HOOKS[id]
+    }
+
+    /**
+     * Split a hook identifier into its id and label components.
+     * @param {*} hookId A hook identifier, which may include a label (e.g. "viewAddNode.myLabel")
+     * @returns {{label: string, id: HookId}}
+     * @private
+     */
+    function parseLabelledHook(hookId) {
+        if (typeof hookId !== "string") {
+            return { label: '', id: '' }
+        }
+        const parts = hookId.split(".")
+        const id = parts[0]
+        const label = parts[1]
+        return { label, id }
+    }
+
+    VALID_HOOKS['all'] = true // Special wildcard to allow hooks to indicate they should be triggered for all ids
+
     return {
-        has: has,
-        clear: clear,
-        add: add,
-        remove: remove,
-        trigger: trigger
+        has,
+        clear,
+        add,
+        remove,
+        trigger,
+        isKnownHook
     }
-})();
+})()
 ;/**
  * Copyright JS Foundation and other contributors, http://js.foundation
  *
@@ -10892,20 +10991,36 @@ RED.utils = (function() {
         return result;
     }
 
+    /**
+     * Get the default icon for a given node based on its definition.
+     * @param {*} def 
+     * @param {*} node 
+     * @returns 
+     */
     function getDefaultNodeIcon(def,node) {
         def = def || {};
         var icon_url;
         if (node && node.type === "subflow") {
             icon_url = "node-red/subflow.svg";
-        } else if (typeof def.icon === "function") {
-            try {
-                icon_url = def.icon.call(node);
-            } catch(err) {
-                console.log("Definition error: "+def.type+".icon",err);
-                icon_url = "arrow-in.svg";
-            }
         } else {
-            icon_url = def.icon;
+            let themeRule = nodeIconCache[def.type]
+            if (themeRule === undefined) {
+                // If undefined, we've not checked the theme yet
+                nodeIconCache[def.type] = getThemeOverrideForNode(def, 'icon') || null;
+                themeRule = nodeIconCache[def.type];
+            }
+            if (themeRule) {
+                icon_url = themeRule.icon;
+            } else if (typeof def.icon === "function") {
+                try {
+                    icon_url = def.icon.call(node);
+                } catch(err) {
+                    console.log("Definition error: "+def.type+".icon",err);
+                    icon_url = "arrow-in.svg";
+                }
+            } else {
+                icon_url = def.icon;
+            }
         }
 
         var iconPath = separateIconPath(icon_url);
@@ -11031,48 +11146,60 @@ RED.utils = (function() {
         return label
     }
 
-    var nodeColorCache = {};
+    let nodeColorCache = {};
+    let nodeIconCache = {}
     function clearNodeColorCache() {
         nodeColorCache = {};
     }
 
-    function getNodeColor(type, def) {
-        def = def || {};
-        var result = def.color;
-        var paletteTheme = RED.settings.theme('palette.theme') || [];
+    /**
+     * Checks if there is a theme override for the given node definition and property
+     * @param {*} def node definition 
+     * @param {*} property either 'color' or 'icon'
+     * @returns the theme override value if there is a match, otherwise null
+     */
+    function getThemeOverrideForNode(def, property) {
+        const paletteTheme = RED.settings.theme('palette.theme') || [];
         if (paletteTheme.length > 0) {
-            if (!nodeColorCache.hasOwnProperty(type)) {
-                nodeColorCache[type] = def.color;
-                var l = paletteTheme.length;
-                for (var i = 0; i < l; i++ ){
-                    var themeRule = paletteTheme[i];
-                    if (themeRule.hasOwnProperty('category')) {
-                        if (!themeRule.hasOwnProperty('_category')) {
-                            themeRule._category = new RegExp(themeRule.category);
-                        }
-                        if (!themeRule._category.test(def.category)) {
-                            continue;
-                        }
+            for (let i = 0; i < paletteTheme.length; i++ ){
+                const themeRule = paletteTheme[i];
+                if (themeRule.hasOwnProperty('category')) {
+                    if (!themeRule.hasOwnProperty('_category')) {
+                        themeRule._category = new RegExp(themeRule.category);
                     }
-                    if (themeRule.hasOwnProperty('type')) {
-                        if (!themeRule.hasOwnProperty('_type')) {
-                            themeRule._type = new RegExp(themeRule.type);
-                        }
-                        if (!themeRule._type.test(type)) {
-                            continue;
-                        }
+                    if (!themeRule._category.test(def.category)) {
+                        continue;
+                    }
+                }
+                if (themeRule.hasOwnProperty('type')) {
+                    if (!themeRule.hasOwnProperty('_type')) {
+                        themeRule._type = new RegExp(themeRule.type);
+                    }
+                    if (!themeRule._type.test(def.type)) {
+                        continue;
                     }
-                    nodeColorCache[type] = themeRule.color || def.color;
-                    break;
+                }
+                // We have found a rule that matches - now see if it provides the requested property
+                if (themeRule.hasOwnProperty(property)) {
+                    return themeRule;
                 }
             }
-            result = nodeColorCache[type];
         }
-        if (result) {
-            return result;
-        } else {
-            return "#ddd";
+        return null;
+    }
+
+    function getNodeColor(type, def) {
+        def = def || {};
+        if (!nodeColorCache.hasOwnProperty(type)) {
+            const paletteTheme = RED.settings.theme('palette.theme') || [];
+            if (paletteTheme.length > 0) {
+                const themeRule = getThemeOverrideForNode(def, 'color');
+                nodeColorCache[type] = themeRule?.color || def.color;
+            } else {
+                nodeColorCache[type] = def.color;
+            }
         }
+        return nodeColorCache[type] || "#ddd";
     }
 
     function addSpinnerOverlay(container,contain) {
@@ -20790,6 +20917,7 @@ RED.keyboard = (function() {
         "-":189,
         ".":190,
         "/":191,
+        "§":192, // <- top left key MacOS
         "\\":220,
         "'":222,
         "?":191, // <- QWERTY specific
@@ -25892,7 +26020,7 @@ RED.view = (function() {
         clearSuggestedFlow();
         RED.contextMenu.hide();
         evt = evt || d3.event;
-        if (evt === 1) {
+        if (evt.button !== 0) {
             return;
         }
         if (mouse_mode === RED.state.SELECTING_NODE) {
@@ -26748,7 +26876,7 @@ RED.view = (function() {
             d3.event.stopPropagation();
             return;
         }
-        if (d3.event.button === 2) {
+        if (d3.event.button !== 0) {
             return
         }
         mousedown_link = d;
@@ -34636,7 +34764,7 @@ RED.sidebar.config = (function() {
                     nodeDiv.addClass("red-ui-palette-node-config-invalid");
                     RED.popover.tooltip(nodeDivAnnotations, function () {
                         if (node.validationErrors && node.validationErrors.length > 0) {
-                            return RED._("editor.errors.invalidProperties") + "<br>  - " + node.validationErrors.join("<br>  - ");
+                            return $('<span>' + RED._("editor.errors.invalidProperties") + "<br>  - " + node.validationErrors.join("<br>  - ") + '</span>');
                         }
                     })
                 }
@@ -34644,7 +34772,7 @@ RED.sidebar.config = (function() {
                 nodeDiv.on('click',function(e) {
                     e.stopPropagation();
                     RED.view.select(false);
-                    if (e.metaKey) {
+                    if (e.metaKey || e.ctrlKey) {
                         $(this).toggleClass("selected");
                     } else {
                         $(content).find(".red-ui-palette-node").removeClass("selected");
@@ -35294,6 +35422,12 @@ RED.palette.editor = (function() {
     // Install tab - search input
     let searchInput;
 
+    // Core and Package Updates
+    /** @type {Array<{package: string, current: string, available: string}>} */
+    const moduleUpdates = []
+    const updateStatusState = { version: null, moduleCount: 0 }
+
+
     const SMALL_CATALOGUE_SIZE = 40
 
     const typesInUse = {};
@@ -37079,8 +37213,6 @@ RED.palette.editor = (function() {
 
     const updateStatusWidget = $('<button type="button" class="red-ui-footer-button red-ui-update-status"></button>');
     let updateStatusWidgetPopover;
-    const updateStatusState = { moduleCount: 0 }
-    let updateAvailable = [];
 
     function addUpdateInfoToStatusBar() {
         updateStatusWidgetPopover = RED.popover.create({
@@ -37089,7 +37221,7 @@ RED.palette.editor = (function() {
             interactive: true,
             direction: "bottom",
             content: function () {
-                const count = updateAvailable.length || 0;
+                const count = moduleUpdates.length || 0
                 const content = $('<div style="display: flex; flex-direction: column; gap: 5px;"></div>');
                 if (updateStatusState.version) {
                     $(`<a class='red-ui-button' href="https://github.com/node-red/node-red/releases/tag/${updateStatusState.version}" target="_blank">${RED._("telemetry.updateAvailableDesc", updateStatusState)}</a>`).appendTo(content)
@@ -37099,7 +37231,7 @@ RED.palette.editor = (function() {
                         updateStatusWidgetPopover.close()
                         RED.actions.invoke("core:manage-palette", {
                             view: "nodes",
-                            filter: '"' + updateAvailable.join('", "') + '"'
+                            filter: '"' + moduleUpdates.map(u => u.package).join('", "') + '"'
                         });
                     }).appendTo(content)
                 }
@@ -37121,7 +37253,7 @@ RED.palette.editor = (function() {
     function refreshUpdateStatus() {
         clearTimeout(pendingRefreshTimeout)
         pendingRefreshTimeout = setTimeout(() => {
-            updateAvailable = [];
+            moduleUpdates.length = 0
             for (const module of Object.keys(nodeEntries)) {
                 if (loadedIndex.hasOwnProperty(module)) {
                     const moduleInfo = nodeEntries[module].info;
@@ -37129,36 +37261,52 @@ RED.palette.editor = (function() {
                         // Module updated
                         continue;
                     }
+                    const current = moduleInfo.version
+                    const latest = loadedIndex[module].version
                     if (updateAllowed &&
-                        semVerCompare(loadedIndex[module].version, moduleInfo.version) > 0 &&
+                        semVerCompare(latest, current) > 0 &&
                         RED.utils.checkModuleAllowed(module, null, updateAllowList, updateDenyList)
                     ) {
-                        updateAvailable.push(module);
+                        moduleUpdates.push({ package: module, current, latest })
                     }
                 }
             }
-            updateStatusState.moduleCount = updateAvailable.length;
+            updateStatusState.moduleCount = moduleUpdates.length
             updateStatus();
         }, 200)
     }
 
     function updateStatus() {
-        if (updateStatusState.moduleCount || updateStatusState.version) {
+        const updates = RED.palette.editor.getAvailableUpdates()
+        if (updates.count > 0) {
             updateStatusWidget.empty();
-            let count = updateStatusState.moduleCount || 0;
-            if (updateStatusState.version) {
-                count ++
-            }
-            $(`<span><i class="fa fa-cube"></i> ${RED._("telemetry.updateAvailable", { count: count })}</span>`).appendTo(updateStatusWidget);
+            $(`<span><i class="fa fa-cube"></i> ${RED._("telemetry.updateAvailable", { count: updates.count })}</span>`).appendTo(updateStatusWidget);
             RED.statusBar.show("red-ui-status-package-update");
         } else {
             RED.statusBar.hide("red-ui-status-package-update");
         }
+        RED.events.emit("registry:updates-available", updates)
+    }
+
+    function getAvailableUpdates () {
+        const palette = [...moduleUpdates]
+        let core = null
+        let count = palette.length
+        if (updateStatusState.version) {
+            core = { current: RED.settings.version, latest: updateStatusState.version }
+            count ++
+        }
+        return {
+            count,
+            core,
+            palette
+        }
     }
 
     return {
-        init: init,
-        install: install
+        init,
+        install,
+        getAvailableUpdates
     }
 })();
 ;/**