update from upstream

.github/workflows/release.yml

@@ -26,7 +26,7 @@ jobs:
             path: 'node-red.github.io'
       - uses: actions/setup-node@v1
         with:
-            node-version: '12'
+            node-version: '16'
       - run: node ./node-red/.github/scripts/update-node-red-docker.js
       - name: Create Docker Pull Request
         uses: peter-evans/create-pull-request@v2

.github/workflows/tests.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12, 14, 16]
+        node-version: [14, 16]
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}

Gruntfile.js

@@ -142,6 +142,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/settings.js",
                     "packages/node_modules/@node-red/editor-client/src/js/user.js",
                     "packages/node_modules/@node-red/editor-client/src/js/comms.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/runtime.js",
                     "packages/node_modules/@node-red/editor-client/src/js/text/bidi.js",
                     "packages/node_modules/@node-red/editor-client/src/js/text/format.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/state.js",
@@ -165,6 +166,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/autoComplete.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/actions.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/diagnostics.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js",
@@ -191,6 +193,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/library.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/search.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/actionList.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js",

package.json

@@ -20,56 +20,57 @@
         "docs": "grunt docs"
     },
     "dependencies": {
-        "acorn": "8.7.0",
+        "acorn": "8.7.1",
         "acorn-walk": "8.2.0",
-        "ajv": "8.10.0",
+        "ajv": "8.11.0",
         "async-mutex": "0.3.2",
         "basic-auth": "2.0.1",
         "bcryptjs": "2.4.3",
-        "body-parser": "1.19.1",
+        "body-parser": "1.20.0",
         "cheerio": "1.0.0-rc.10",
         "clone": "2.1.2",
         "content-type": "1.0.4",
-        "cookie": "0.4.2",
+        "cookie": "0.5.0",
         "cookie-parser": "1.4.6",
         "cors": "2.8.5",
         "cronosjs": "1.7.1",
         "denque": "2.0.1",
-        "express": "4.17.2",
+        "express": "4.18.1",
-        "express-session": "1.17.2",
+        "express-session": "1.17.3",
         "form-data": "4.0.0",
-        "fs-extra": "10.0.0",
+        "fs-extra": "10.1.0",
-        "fs.notify": "0.0.4",
+        "got": "11.8.5",
-        "got": "11.8.3",
         "hash-sum": "2.0.0",
-        "hpagent": "0.1.2",
+        "hpagent": "1.0.0",
-        "https-proxy-agent": "5.0.0",
+        "https-proxy-agent": "5.0.1",
-        "i18next": "21.6.11",
+        "i18next": "21.8.14",
         "iconv-lite": "0.6.3",
         "is-utf8": "0.2.1",
-        "js-yaml": "3.14.1",
+        "js-yaml": "4.1.0",
         "json-stringify-safe": "5.0.1",
         "jsonata": "1.8.6",
         "lodash.clonedeep": "^4.5.0",
         "media-typer": "1.1.0",
         "memorystore": "1.6.7",
         "mime": "3.0.0",
+        "moment": "2.29.4",
         "moment-timezone": "0.5.34",
-        "mqtt": "4.3.5",
+        "mqtt": "4.3.7",
-        "multer": "1.4.4",
+        "multer": "1.4.5-lts.1",
         "mustache": "4.2.0",
-        "node-red-admin": "^2.2.3",
+        "node-red-admin": "^3.0.0",
+        "node-watch": "0.7.3",
         "nopt": "5.0.0",
         "oauth2orize": "1.11.1",
         "on-headers": "1.0.2",
-        "passport": "0.5.2",
+        "passport": "0.6.0",
         "passport-http-bearer": "1.0.1",
         "passport-oauth2-client-password": "0.1.2",
-        "raw-body": "2.4.3",
+        "raw-body": "2.5.1",
-        "semver": "7.3.5",
+        "semver": "7.3.7",
         "tar": "6.1.11",
         "tough-cookie": "4.0.0",
-        "uglify-js": "3.15.1",
+        "uglify-js": "3.16.2",
         "uuid": "8.3.2",
         "ws": "7.5.6",
         "xml2js": "0.4.23"
@@ -79,18 +80,18 @@
     },
     "devDependencies": {
         "cypress": "^9.3.1",
-        "dompurify": "2.3.5",
+        "dompurify": "2.3.9",
-        "grunt": "1.4.1",
+        "grunt": "1.5.3",
         "grunt-chmod": "~1.1.1",
         "grunt-cli": "~1.4.3",
         "grunt-concurrent": "3.0.0",
-        "grunt-contrib-clean": "~2.0.0",
+        "grunt-contrib-clean": "2.0.1",
         "grunt-contrib-compress": "2.0.0",
-        "grunt-contrib-concat": "~1.0.1",
+        "grunt-contrib-concat": "2.1.0",
-        "grunt-contrib-copy": "~1.0.0",
+        "grunt-contrib-copy": "1.0.0",
-        "grunt-contrib-jshint": "3.1.1",
+        "grunt-contrib-jshint": "3.2.0",
-        "grunt-contrib-uglify": "5.0.1",
+        "grunt-contrib-uglify": "5.2.2",
-        "grunt-contrib-watch": "~1.1.0",
+        "grunt-contrib-watch": "1.1.0",
         "grunt-jsdoc": "2.4.1",
         "grunt-jsdoc-to-markdown": "6.0.0",
         "grunt-jsonlint": "2.1.3",
@@ -99,20 +100,20 @@
         "grunt-sass": "~3.1.0",
         "grunt-simple-mocha": "~0.4.1",
         "grunt-simple-nyc": "^3.0.1",
-        "i18next-http-backend": "1.3.2",
+        "i18next-http-backend": "1.4.1",
         "jquery-i18next": "1.2.1",
         "jsdoc-nr-template": "github:node-red/jsdoc-nr-template",
-        "marked": "4.0.12",
+        "marked": "4.0.18",
         "minami": "1.2.3",
-        "mocha": "9.2.0",
+        "mocha": "9.2.2",
-        "node-red-node-test-helper": "^0.2.7",
+        "node-red-node-test-helper": "^0.3.0",
-        "nodemon": "2.0.15",
+        "nodemon": "2.0.19",
         "proxy": "^1.0.2",
-        "sass": "1.49.7",
+        "sass": "1.53.0",
         "should": "13.2.3",
         "sinon": "11.1.2",
         "stoppable": "^1.1.0",
-        "supertest": "6.2.2"
+        "supertest": "6.2.4"
     },
     "engines": {
         "node": ">=16"

packages/node_modules/@node-red/editor-api/lib/admin/diagnostics.js

@@ -0,0 +1,23 @@
+let runtimeAPI;
+let settings;
+const apiUtil = require("../util");
+module.exports = {
+    init: function(_settings, _runtimeAPI) {
+        settings = _settings;
+        runtimeAPI = _runtimeAPI;
+    },
+    getReport: function(req, res) {
+        const diagnosticsOpts = settings.diagnostics || {};
+        const opts = {
+            user: req.user,
+            scope: diagnosticsOpts.level || "basic"
+        }
+        if(diagnosticsOpts.enabled === false || diagnosticsOpts.enabled === "false") {
+            apiUtil.rejectHandler(req, res, {message: "diagnostics are disabled", status: 403, code: "diagnostics.disabled" })
+        } else {
+            runtimeAPI.diagnostics.get(opts)
+            .then(function(result) { res.json(result); })
+            .catch(err => apiUtil.rejectHandler(req, res, err))
+        }
+    }
+}

packages/node_modules/@node-red/editor-api/lib/admin/flows.js

@@ -68,5 +68,28 @@ module.exports = {
         }).catch(function(err) {
             apiUtils.rejectHandler(req,res,err);
         })
+    },
+    getState: function(req,res) {
+        const opts = {
+            user: req.user,
+            req: apiUtils.getRequestLogObject(req)
+        }
+        runtimeAPI.flows.getState(opts).then(function(result) {
+            res.json(result);
+        }).catch(function(err) {
+            apiUtils.rejectHandler(req,res,err);
+        })
+    },
+    postState: function(req,res) {
+        const opts = {
+            user: req.user,
+            state: req.body.state || "",
+            req: apiUtils.getRequestLogObject(req)
+        }
+        runtimeAPI.flows.setState(opts).then(function(result) {
+            res.json(result);
+        }).catch(function(err) {
+            apiUtils.rejectHandler(req,res,err);
+        })
     }
 }

packages/node_modules/@node-red/editor-api/lib/admin/index.js

@@ -23,6 +23,7 @@ var context = require("./context");
 var auth = require("../auth");
 var info = require("./settings");
 var plugins = require("./plugins");
+var diagnostics = require("./diagnostics");
 
 var apiUtil = require("../util");
 
@@ -34,6 +35,7 @@ module.exports = {
         context.init(runtimeAPI);
         info.init(settings,runtimeAPI);
         plugins.init(runtimeAPI);
+        diagnostics.init(settings, runtimeAPI);
 
         var needsPermission = auth.needsPermission;
 
@@ -52,6 +54,12 @@ module.exports = {
         adminApp.get("/flows",needsPermission("flows.read"),flows.get,apiUtil.errorHandler);
         adminApp.post("/flows",needsPermission("flows.write"),flows.post,apiUtil.errorHandler);
 
+        // Flows/state
+        adminApp.get("/flows/state", needsPermission("flows.read"), flows.getState, apiUtil.errorHandler);
+        if (settings.runtimeState && settings.runtimeState.enabled === true) {
+            adminApp.post("/flows/state", needsPermission("flows.write"), flows.postState, apiUtil.errorHandler);
+        }
+
         // Flow
         adminApp.get("/flow/:id",needsPermission("flows.read"),flow.get,apiUtil.errorHandler);
         adminApp.post("/flow",needsPermission("flows.write"),flow.post,apiUtil.errorHandler);
@@ -95,6 +103,8 @@ module.exports = {
         adminApp.get("/plugins", needsPermission("plugins.read"), plugins.getAll, apiUtil.errorHandler);
         adminApp.get("/plugins/messages", needsPermission("plugins.read"), plugins.getCatalogs, apiUtil.errorHandler);
 
+        adminApp.get("/diagnostics", needsPermission("diagnostics.read"), diagnostics.getReport, apiUtil.errorHandler);
+
         return adminApp;
     }
 }

packages/node_modules/@node-red/editor-api/lib/auth/index.js

@@ -106,9 +106,15 @@ async function login(req,res) {
                 urlPrefix += "/";
             }
             response = {
-                "type":"strategy",
+                "type":"strategy"
-                "prompts":[{type:"button",label:mergedAdminAuth.strategy.label, url: urlPrefix + "auth/strategy"}]
             }
+            if (mergedAdminAuth.strategy.autoLogin) {
+                response.autoLogin = true
+                response.loginRedirect = urlPrefix + "auth/strategy"
+            }
+            response.prompts = [
+                {type:"button",label:mergedAdminAuth.strategy.label, url: urlPrefix + "auth/strategy"}
+            ]
             if (mergedAdminAuth.strategy.icon) {
                 response.prompts[0].icon = mergedAdminAuth.strategy.icon;
             }
@@ -185,7 +191,7 @@ function genericStrategy(adminApp,strategy) {
                 }
             };
 
-            options.verify.apply(null,args);
+            options.verify.apply(this,args);
         } else {
             var profile = arguments[arguments.length - 2];
             return completeVerify(profile,originalDone);

packages/node_modules/@node-red/editor-api/lib/auth/strategies.js

@@ -92,10 +92,16 @@ var passwordTokenExchange = function(client, username, password, scope, done) {
                 loginAttempts = loginAttempts.filter(function(logEntry) {
                     return logEntry.user !== username;
                 });
+                // Check if the user contains a user defined token and use it
+                // instead of generating a new token
+                if(user.token){
+                    done(null,user.token,null,null);
+                } else {
                     Tokens.create(username,client.id,scope).then(function(tokens) {
                         log.audit({event: "auth.login",user,username:username,client:client.id,scope:scope});
                         done(null,tokens.accessToken,null,{expires_in:tokens.expires_in});
                     });
+                }
             } else {
                 log.audit({event: "auth.login.fail.permissions",username:username,client:client.id,scope:scope});
                 done(null,false);

packages/node_modules/@node-red/editor-api/lib/editor/theme.js

@@ -102,7 +102,10 @@ module.exports = {
         }
         themeSettings = null;
         theme = settings.editorTheme || {};
-        themeContext.asset.vendorMonaco = ((theme.codeEditor || {}).lib === "monaco") ? "vendor/monaco/monaco-bootstrap.js" : "";
+        themeContext.asset.vendorMonaco = "vendor/monaco/monaco-bootstrap.js"
+        if (theme.codeEditor && theme.codeEditor.lib === 'ace') {
+            themeContext.asset.vendorMonaco = ''
+        }
         activeTheme = theme.theme;
     },
 
@@ -264,10 +267,70 @@ module.exports = {
                     theme.page = theme.page || {_:{}}
                     theme.page._.scripts = scriptFiles.concat(theme.page._.scripts || [])
                 }
-                if(theme.codeEditor) {
+                // check and load page settings from theme
-                    theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options);
+                if (themePlugin.page) {
+                    if (themePlugin.page.favicon  && !theme.page.favicon) {
+                        const result = serveFilesFromTheme(
+                            [themePlugin.page.favicon],
+                            themeApp,
+                            "/",
+                            themePlugin.path
+                        )
+                        if(result && result.length > 0) {
+                            // update themeContext page favicon
+                            themeContext.page.favicon = result[0]
+                            theme.page = theme.page || {_:{}}
+                            theme.page._.favicon = result[0]
                         }
                     }
+                    if (themePlugin.page.tabicon && themePlugin.page.tabicon.icon && !theme.page.tabicon) {
+                        const result = serveFilesFromTheme(
+                            [themePlugin.page.tabicon.icon],
+                            themeApp,
+                            "/page/",
+                            themePlugin.path
+                        )
+                        if(result && result.length > 0) {
+                            // update themeContext page tabicon
+                            themeContext.page.tabicon.icon = result[0]
+                            themeContext.page.tabicon.colour = themeContext.page.tabicon.colour || themeContext.page.tabicon.colour
+                            theme.page = theme.page || {_:{}}
+                            theme.page._.tabicon = theme.page._.tabicon || {}
+                            theme.page._.tabicon.icon = themeContext.page.tabicon.icon 
+                            theme.page._.tabicon.colour = themeContext.page.tabicon.colour
+                        }
+                    }
+                    // if the plugin has a title AND the users settings.js does NOT
+                    if (themePlugin.page.title && !theme.page.title) {
+                        themeContext.page.title = themePlugin.page.title || themeContext.page.title
+                    }
+                }
+                // check and load header settings from theme
+                if (themePlugin.header) {
+                    if (themePlugin.header.image && !theme.header.image) {
+                        const result = serveFilesFromTheme(
+                            [themePlugin.header.image],
+                            themeApp,
+                            "/header/",
+                            themePlugin.path
+                        )
+                        if(result && result.length > 0) {
+                            // update themeContext header image
+                            themeContext.header.image = result[0]
+                        }
+                    }
+                    // if the plugin has a title AND the users settings.js does NOT have a title
+                    if (themePlugin.header.title && !theme.header.title) {
+                        themeContext.header.title = themePlugin.header.title || themeContext.header.title
+                    }
+                    // if the plugin has a header url AND the users settings.js does NOT
+                    if (themePlugin.header.url && !theme.header.url) {
+                        themeContext.header.url = themePlugin.header.url || themeContext.header.url
+                    }
+                }
+                theme.codeEditor = theme.codeEditor || {}
+                theme.codeEditor.options = Object.assign({}, themePlugin.monacoOptions, theme.codeEditor.options);
+            }
             activeThemeInitialised = true;
         }
         return themeContext;

packages/node_modules/@node-red/editor-api/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-api",
-    "version": "2.2.2",
+    "version": "3.0.0",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,22 +16,22 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "2.2.2",
+        "@node-red/util": "3.0.0",
-        "@node-red/editor-client": "2.2.2",
+        "@node-red/editor-client": "3.0.0",
         "bcryptjs": "2.4.3",
-        "body-parser": "1.19.1",
+        "body-parser": "1.20.0",
         "clone": "2.1.2",
         "cors": "2.8.5",
-        "express-session": "1.17.2",
+        "express-session": "1.17.3",
-        "express": "4.17.2",
+        "express": "4.18.1",
         "memorystore": "1.6.7",
         "mime": "3.0.0",
-        "multer": "1.4.4",
+        "multer": "1.4.5-lts.1",
         "mustache": "4.2.0",
         "oauth2orize": "1.11.1",
         "passport-http-bearer": "1.0.1",
         "passport-oauth2-client-password": "0.1.2",
-        "passport": "0.5.2",
+        "passport": "0.6.0",
         "ws": "7.5.6"
     },
     "optionalDependencies": {

packages/node_modules/@node-red/editor-client/locales/de/editor.json

@@ -44,7 +44,8 @@
         "loadNodes": "Lade Nodes __count__",
         "loadFlows": "Lade Flows",
         "importFlows": "Füge Flows dem Arbeitsbereich hinzu",
-        "importError": "<p>Fehler beim Laden von Flows.</p><p>__message__</p>"
+        "importError": "<p>Fehler beim Laden von Flows.</p><p>__message__</p>",
+        "loadingProject": "Lade Projekt"
     },
     "workspace": {
         "defaultName": "Flow __number__",
@@ -53,7 +54,16 @@
         "delete": "Sind Sie sicher, dass '__label__' gelöscht werden soll?",
         "dropFlowHere": "Hier kann der Flow eingefügt werden",
         "addFlow": "Flow hinzufügen",
+        "addFlowToRight": "Flow zum Arbeitsbereich rechts hinzufügen",
+        "hideFlow": "Flow ausblenden",
+        "hideOtherFlows": "Andere Flows ausblenden",
+        "showAllFlows": "Alle Flows anzeigen",
+        "hideAllFlows": "Alle Flows ausblenden",
+        "hiddenFlows": "Liste __count__ ausgeblendeten Flow auf",
+        "hiddenFlows_plural": "Liste __count__ ausgeblendete Flows auf",
+        "showLastHiddenFlow": "Letzten ausgeblendeten Flow anzeigen",
         "listFlows": "Flows auflisten",
+        "listSubflows": "Subflows auflisten",
         "status": "Status",
         "enabled": "Aktiviert",
         "disabled": "Deaktiviert",
@@ -65,6 +75,8 @@
             "view": {
                 "view": "Ansicht",
                 "grid": "Raster",
+                "storeZoom": "Zoomstufe beim Laden wiederherstellen",
+                "storePosition": "Scrollposition beim Laden wiederherstellen",
                 "showGrid": "Raster anzeigen",
                 "snapGrid": "Am Raster ausrichten",
                 "gridSize": "Rastergröße",
@@ -82,6 +94,7 @@
             "palette": {
                 "show": "Palette anzeigen"
             },
+            "edit": "Bearbeiten",
             "settings": "Einstellungen",
             "userSettings": "Einstellungen",
             "nodes": "Nodes",
@@ -92,7 +105,7 @@
             "search": "Flows durchsuchen",
             "searchInput": "Flows durchsuchen",
             "subflows": "Subflow",
-            "createSubflow": "Erstellen",
+            "createSubflow": "Subflow",
             "selectionToSubflow": "Auswahl in Subflow umwandeln",
             "flows": "Flow",
             "add": "Hinzufügen",
@@ -104,24 +117,42 @@
             "editPalette": "Palette verwalten",
             "other": "Sonstige",
             "showTips": "Tipps anzeigen",
+            "showWelcomeTours": "Geführte Touren für neue Versionen anzeigen",
             "help": "Node-RED-Website",
-            "projects": "Projekt",
+            "projects": "Projekte",
             "projects-new": "Neu",
             "projects-open": "Öffnen",
             "projects-settings": "Einstellungen",
             "showNodeLabelDefault": "Zeige Namen von neu hinzugefügten Nodes",
-            "groups": "Gruppe",
+            "codeEditor": "Code-Editor",
+            "groups": "Gruppen",
             "groupSelection": "Auswahl gruppieren",
             "ungroupSelection": "Gruppe auflösen",
             "groupMergeSelection": "Auswahl der Gruppe hinzufügen",
-            "groupRemoveSelection": "Auswahl aus der Gruppe entfernen"
+            "groupRemoveSelection": "Auswahl aus der Gruppe entfernen",
+            "arrange": "Anordnen",
+            "alignLeft": "Links ausrichten",
+            "alignCenter": "Zentrieren",
+            "alignRight": "Rechts ausrichten",
+            "alignTop": "Oben ausrichten",
+            "alignMiddle": "Mittig ausrichten",
+            "alignBottom": "Unten ausrichten",
+            "distributeHorizontally": "Horizontal verteilen",
+            "distributeVertically": "Vertikal verteilen",
+            "moveToBack": "Nach hinten verschieben",
+            "moveToFront": "Nach vorne verschieben",
+            "moveBackwards": "Rückwärts verschieben",
+            "moveForwards": "Vorwärts verschieben"
         }
     },
     "actions": {
         "toggle-navigator": "Navigator ein-/ausblenden",
         "zoom-out": "Verkleinern",
         "zoom-reset": "Vergrößerung rücksetzen",
-        "zoom-in": "Vergrößern"
+        "zoom-in": "Vergrößern",
+        "search-flows": "Flows durchsuchen",
+        "search-prev": "Vorherige",
+        "search-next": "Nächste"
     },
     "user": {
         "loggedInAs": "Angemeldet als __name__",
@@ -131,7 +162,7 @@
         "loginFailed": "Anmeldung fehlgeschlagen",
         "notAuthorized": "Nicht berechtigt",
         "errors": {
-            "settings": "Sie müssen angemeldet sein, um auf die Einstellungen zuzugreifen zu können",
+            "settings": "Sie müssen angemeldet sein, um auf die Einstellungen zugreifen zu können",
             "deploy": "Sie müssen angemeldet sein, um Änderungen übernehmen (deploy) zu können",
             "notAuthorized": "Sie müssen angemeldet sein, um diese Aktion ausführen zu können"
         }
@@ -141,7 +172,7 @@
         "warnings": {
             "undeployedChanges": "Node hat nicht übernommene (deploy) Änderungen",
             "nodeActionDisabled": "Node-Aktionen deaktiviert",
-            "nodeActionDisabledSubflow": "Node-Aktionen deaktiviert im Subflow",
+            "nodeActionDisabledSubflow": "Node-Aktionen innerhalb des Subflows deaktiviert",
             "missing-types": "<p>Flows gestoppt aufgrund fehlender Node-Typen</p>",
             "missing-modules": "<p>Flows angehalten aufgrund fehlender Module</p>",
             "safe-mode": "<p>Flows sind im abgesicherten Modus gestoppt.</p><p>Flows können bearbeitet und übernommen (deploy) werden, um sie neu zu starten.</p>",
@@ -157,21 +188,21 @@
         "error": "<strong>Fehler:</strong> __message__",
         "errors": {
             "lostConnection": "Verbindung zum Server verloren. Verbindung wird erneut hergestellt ...",
-            "lostConnectionReconnect": "Verbindung zum Server verloren. Verbindung wird in __time__ s versucht wieder herzustellen.",
+            "lostConnectionReconnect": "Verbindung zum Server verloren. Wiederherstellung der Verbindung in __time__s.",
-            "lostConnectionTry": "Jetzt testen",
+            "lostConnectionTry": "Jetzt versuchen",
             "cannotAddSubflowToItself": "Subflow kann nicht zu sich selbst hinzugefügt werden",
             "cannotAddCircularReference": "Subflow kann nicht hinzugefügt werden, da ein zirkulärer Bezug erkannt wurde",
             "unsupportedVersion": "<p>Nicht unterstützte Version von Node.js erkannt.</p><p>Es muss ein Upgrade auf das neueste LTS-Release von Node.js durchgeführt werden.</p>",
             "failedToAppendNode": "<p>Fehler beim Laden von '__module__'.</p><p>__error__</p>"
         },
         "project": {
-            "change-branch": "Wechsel in den Branch '__project__'",
+            "change-branch": "Wechsel in den lokalen Branch '__project__'",
-            "merge-abort": "Merge abgebrochen",
+            "merge-abort": "Git-Merge abgebrochen",
             "loaded": "Projekt '__project__' geladen",
             "updated": "Projekt '__project__' aktualisiert",
             "pull": "Projekt '__project__' erneut geladen",
             "revert": "Änderungen im Projekt '__project__' rückgängig gemacht",
-            "merge-complete": "Merge abgeschlossen",
+            "merge-complete": "Git-Merge abgeschlossen",
             "setupCredentials": "Berechtigungen einrichten",
             "setupProjectFiles": "Projektdateien einrichten",
             "no": "Nein, Danke",
@@ -185,7 +216,8 @@
             "create-default-package": "Standardpaketdatei erstellen",
             "no-thanks": "Nein, Danke",
             "create-default-project": "Standardprojektdateien erstellen",
-            "show-merge-conflicts": "Merge-Konflikte anzeigen"
+            "show-merge-conflicts": "Merge-Konflikte anzeigen",
+            "unknownNodesButton": "Nach unbekannten Nodes suchen"
         }
     },
     "clipboard": {
@@ -203,17 +235,17 @@
         "subflow_plural": "__count__ Subflows",
         "replacedNodes": "__count__ Node ersetzt",
         "replacedNodes_plural": "__count__ Nodes ersetzt",
-        "pasteNodes": "Flow-JSON hier einfügen oder",
+        "pasteNodes": "Flow-JSON einfügen oder",
         "selectFile": "Datei für Import auswählen",
         "importNodes": "Import",
         "exportNodes": "Export",
         "download": "Download",
-        "importUnrecognised": "Importierter Typ nicht erkannt:",
+        "importUnrecognised": "Nicht erkannten Typ importiert:",
-        "importUnrecognised_plural": "Importierte Typen nicht erkannt:",
+        "importUnrecognised_plural": "Nicht erkannte Typen importiert:",
-        "importDuplicate": "Importiertes doppeltes Node:",
+        "importDuplicate": "Doppelten Node importiert:",
-        "importDuplicate_plural": "Importierte doppelte Nodes:",
+        "importDuplicate_plural": "Doppelte Nodes importiert:",
-        "nodesExported": "Nodes in der Zwischenablage abgelegt",
+        "nodesExported": "Nodes in die Zwischenablage exportiert",
-        "nodesImported": "Eingefügt:",
+        "nodesImported": "Importiert:",
         "nodeCopied": "__count__ Node kopiert",
         "nodeCopied_plural": "__count__ Nodes kopiert",
         "groupCopied": "__count__ Gruppe kopiert",
@@ -229,11 +261,11 @@
             "all": "Alle Flows",
             "compact": "Kompakt",
             "formatted": "Formatiert",
-            "copy": "In Zwischenablage exportieren",
+            "copy": "In Zwischenablage kopieren",
             "export": "In Bibliothek exportieren",
             "exportAs": "Exportiere als",
             "overwrite": "Ersetzen",
-            "exists": "<p>'__file__' existiert bereits.</p><p>Soll sie ersetzt werden?</p>"
+            "exists": "<p><b>\"__file__\"</b> existiert bereits.</p><p>Soll sie ersetzt werden?</p>"
         },
         "import": {
             "import": "Importiere in",
@@ -269,7 +301,9 @@
         "successfulRestart": "Flows erfolgreich neugestartet",
         "deployFailed": "Übernahme (deploy) fehlgeschlagen: __message__",
         "unusedConfigNodes": "Einige Konfigurations-Nodes werden nicht verwendet.",
-        "unusedConfigNodesLink": "Hier klicken, um sie anzuschauen.",
+        "unusedConfigNodesButton": "Suche nach unbenutzten Konfigurations-Nodes",
+        "unknownNodesButton": "Suche nach unbekannten Nodes",
+        "invalidNodesButton": "Suche nach ungültigen Nodes",
         "errors": {
             "noResponse": "Keine Antwort vom Server"
         },
@@ -352,10 +386,10 @@
         "keys": "Schlüsselwörter",
         "keysPlaceholder": "Komma-getrennte Schlüsselwörter",
         "author": "Author",
-        "authorPlaceholder": "Dein Name <email@beispiel.de>",
+        "authorPlaceholder": "Ihr Name <email@example.com>",
         "desc": "Beschreibung",
         "env": {
-            "restore": "Stelle auf Subflow-Standard zurück",
+            "restore": "Subflow-Standard wiederherstellen",
             "remove": "Entferne Umgebungsvariable"
         },
         "errors": {
@@ -364,9 +398,9 @@
         }
     },
     "group": {
-        "editGroup": "Editiere Gruppe: __name__",
+        "editGroup": "Bearbeite Gruppe: __name__",
         "errors": {
-            "cannotCreateDiffGroups": "Kann keine Gruppe erzeugen mit Nodes von verschiedenen Gruppen",
+            "cannotCreateDiffGroups": "Kann keine Gruppe mit Nodes von anderen Gruppen erstellen",
             "cannotAddSubflowPorts": "Kann keine Subflow-Anschlüsse zu einer Gruppe hinzufügen"
         }
     },
@@ -380,7 +414,7 @@
         "addNewConfig": "Neuen Konfigurations-Node '__type__' hinzufügen",
         "editNode": "Node '__type__' bearbeiten",
         "editConfig": "Konfigurations-Node '__type__' bearbeiten",
-        "addNewType": "Neuen Typ '__type__' hinzufügen",
+        "addNewType": "Neuen Typ '__type__' hinzufügen ...",
         "nodeProperties": "Node-Eigenschaften",
         "label": "Name",
         "color": "Farbe",
@@ -403,7 +437,7 @@
         "loadCredentials": "Lade Node-Berechtigungen",
         "inputs": {
             "input": "Eingang",
-            "select": "Wähle",
+            "select": "Auswahl",
             "checkbox": "Checkbox",
             "spinner": "Spinner",
             "none": "Kein",
@@ -446,23 +480,27 @@
         "shortcut": "Tastenkürzel",
         "scope": "Geltungsbereich",
         "unassigned": "Nicht zugeordnet",
-        "global": "global",
+        "global": "Global",
         "workspace": "Arbeitsbereich",
-        "selectAll": "Alle Nodes auswählen",
+        "selectAll": "Alles auswählen",
+        "selectNone": "Alles abwählen",
         "selectAllConnected": "Alle verbundenen Nodes auswählen",
         "addRemoveNode": "Node aus Auswahl hinzufügen/entfernen",
         "editSelected": "Ausgewählten Node bearbeiten",
         "deleteSelected": "Ausgewählte Nodes oder Links löschen",
-        "importNode": "Node importieren",
+        "importNode": "Nodes importieren",
-        "exportNode": "Node exportieren",
+        "exportNode": "Nodes exportieren",
         "nudgeNode": "Ausgewählte Nodes verschieben (1px)",
         "moveNode": "Ausgewählte Nodes verschieben (20px)",
         "toggleSidebar": "Seitenleiste ein-/ausblenden",
         "togglePalette": "Palette ein-/ausblenden",
         "copyNode": "Ausgewählte Nodes kopieren",
         "cutNode": "Ausgewählte Nodes ausschneiden",
-        "pasteNode": "Node einfügen",
+        "pasteNode": "Nodes einfügen",
+        "copyGroupStyle": "Gruppenstil kopieren",
+        "pasteGroupStyle": "Gruppenstil einfügen",
         "undoChange": "Letzte Änderung rückgängig machen",
+        "redoChange": "Letzte Änderung wiederholen",
         "searchBox": "Suchfeld öffnen",
         "managePalette": "Palette verwalten",
         "actionList": "Aktionsliste"
@@ -488,7 +526,7 @@
     "palette": {
         "noInfo": "Keine Informationen verfügbar",
         "filter": "Nodes filtern",
-        "search": "Modules durchsuchen",
+        "search": "Module durchsuchen",
         "addCategory": "Neu hinzufügen ...",
         "label": {
             "subflows": "Subflows",
@@ -517,7 +555,8 @@
             "nodeEnabled_plural": "Nodes aktiviert:",
             "nodeDisabled": "Node deaktiviert:",
             "nodeDisabled_plural": "Nodes deaktiviert:",
-            "nodeUpgraded": "Upgrade von Node-Modul __module__ auf Version __version__ durchgeführt"
+            "nodeUpgraded": "Upgrade von Node-Modul __module__ auf Version __version__ durchgeführt",
+            "unknownNodeRegistered": "Fehler beim Laden des Nodes: <ul><li>__type__<br>__error__</li></ul>"
         },
         "editor": {
             "title": "Palette verwalten",
@@ -633,15 +672,8 @@
             "outline": "Entwurf",
             "empty": "leer",
             "globalConfig": "Globale Konfigurations-Nodes",
-            "triggerAction": "Auslösen",
+            "triggerAction": "Aktion auslösen",
-            "find": "Suche im Arbeitsbereich",
+            "find": "Suche im Arbeitsbereich"
-            "search": {
-                "configNodes": "Konfigurations-Nodes",
-                "unusedConfigNodes": "Unbenutzte Konfigurations-Nodes",
-                "invalidNodes": "Ungültige Nodes",
-                "uknownNodes": "Unbekannte Nodes",
-                "unusedSubflows": "Unbenutzte Subflows"
-            }
         },
         "help": {
             "name": "Hilfe",
@@ -743,7 +775,7 @@
                 "userName": "Benutzername",
                 "email": "E-Mail",
                 "workflow": "Arbeitsablauf",
-                "workfowTip": "Wähle deinen bevorzugten Git-Arbeitsablauf",
+                "workfowTip": "Wählen Sie Ihren bevorzugten Git-Arbeitsablauf (Workflow)",
                 "workflowManual": "Manuell",
                 "workflowManualTip": "Alle Änderungen müssen manuell übertragen werden (commit) über die Seitenleiste 'Projekthistorie'",
                 "workflowAuto": "Automatisch",
@@ -862,8 +894,20 @@
         "addTitle": "Element hinzufügen"
     },
     "search": {
+        "history": "Suchhistorie",
+        "clear": "Leeren",
         "empty": "Keine Übereinstimmungen gefunden",
-        "addNode": "Node hinzufügen ..."
+        "addNode": "Node hinzufügen ...",
+        "options": {
+            "configNodes": "Konfigurations-Nodes",
+            "unusedConfigNodes": "Unbenutzte Konfigurations-Nodes",
+            "invalidNodes": "Ungültige Nodes",
+            "uknownNodes": "Unbekannte Nodes",
+            "unusedSubflows": "Unbenutzte Subflows",
+            "hiddenFlows": "Versteckte Flows",
+            "modifiedNodes": "Geänderte Nodes",
+            "thisFlow": "Aktueller Flow"
+        }
     },
     "expressionEditor": {
         "functions": "Funktionen",
@@ -884,6 +928,9 @@
             "eval": "Fehler beim Auswerten des Ausdrucks\n__message__"
         }
     },
+    "monaco": {
+        "setTheme": "Thema auswählen"
+    },
     "jsEditor": {
         "title": "JavaScript-Editor"
     },
@@ -893,8 +940,10 @@
     "jsonEditor": {
         "title": "JSON-Editor",
         "format": "JSON formatieren",
-        "rawMode": "JSON-Editor",
+        "rawMode": "Bearbeite JSON",
         "uiMode": "Visueller Editor",
+        "rawMode-readonly": "JSON",
+        "uiMode-readonly": "Visuell",
         "insertAbove": "Oberhalb einfügen",
         "insertBelow": "Unterhalb einfügen",
         "addItem": "Element hinzufügen",
@@ -965,7 +1014,7 @@
             "clone": "Projekt klonen",
             "desc0": "Wenn Sie bereits über ein Git-Repository verfügen, das ein Projekt enthält, können Sie es klonen, um damit zu arbeiten.",
             "already-exists": "Das Projekt ist bereits vorhanden",
-            "must-contain": "Darf nur A-Z 0-9 _ enthalten",
+            "must-contain": "Darf nur A-Z 0-9 _ - enthalten",
             "project-name": "Projektname",
             "no-info-in-url": "Geben Sie Benutzername & Passwort nicht innerhalb der URL vor",
             "git-url": "Git-Repository-URL",
@@ -1023,7 +1072,7 @@
             "desc2": "Im Tab 'Commit-Historie' in der Seitenleiste werden alle Dateien angezeigt, die sich in Ihrem Projekt geändert haben, und um sie ins lokale Repository zu übertragen (commit). Es zeigt Ihnen eine vollständige Historie Ihrer Commits an und ermöglicht es Ihnen, Ihre Commits in ein (remote) Server-Repository zu schieben (push)."
         },
         "create": {
-            "projects": "Projekt",
+            "projects": "Projekte",
             "already-exists": "Das Projekt ist bereits vorhanden",
             "must-contain": "Darf nur A-Z 0-9 _ enthalten",
             "no-info-in-url": "Geben Sie Benutzername & Passwort nicht innerhalb der URL vor",
@@ -1056,7 +1105,8 @@
             "not-git": "Kein Git-Repository",
             "no-resource": "Repository nicht gefunden",
             "cant-get-ssh-key-path": "Fehler! Der ausgewählte SSH-Schlüsselpfad kann nicht abgerufen werden.",
-            "unexpected_error": "unerwarteter_Fehler"
+            "unexpected_error": "unerwarteter_Fehler",
+            "clearContext": "Kontextdaten löschen beim Projektwechsel"
         },
         "delete": {
             "confirm": "Sind Sie sicher, dass dieses Projekt gelöscht werden soll?"
@@ -1103,13 +1153,43 @@
         "preview": "Vorschau",
         "defaultValue": "Standardwert"
     },
+    "tourGuide": {
+        "takeATour": "Tour starten",
+        "start": "Start",
+        "next": "Nächste"
+    },
+    "diagnostics": {
+        "title": "System-Informationen"
+    },
     "languages": {
-        "de": "German",
+        "de": "Deutsch",
-        "en-US": "English",
+        "en-US": "Englisch",
-        "ja": "Japanese",
+        "ja": "Japanisch",
-        "ko": "Korean",
+        "ko": "Koreanisch",
-        "ru": "Russian",
+        "ru": "Russisch",
-        "zh-CN": "Chinese(Simplified)",
+        "zh-CN": "Chinesisch (Vereinfacht)",
-        "zh-TW": "Chinese(Traditional)"
+        "zh-TW": "Chinesisch (Traditionell)"
+    },
+    "validator": {
+        "errors": {
+            "invalid-json": "Ungültige JSON-Daten: __error__",
+            "invalid-json-prop": "__prop__: ungültige JSON-Daten: __error__",
+            "invalid-prop": "Ungültiger Eigenschaftsausdruck",
+            "invalid-prop-prop": "__prop__: ungültiger Eigenschaftsausdruck",
+            "invalid-num": "Ungültige Nummer",
+            "invalid-num-prop": "__prop__: ungültige Nummer",
+            "invalid-regexp": "Ungültiges Eingabemuster",
+            "invalid-regex-prop": "__prop__: ungültiges Eingabemuster",
+            "missing-required-prop": "__prop__: Eigenschaftswert fehlt",
+            "invalid-config": "__prop__: ungültige Konfigurations-Node",
+            "missing-config": "__prop__: Konfigurations-Node fehlt",
+            "validation-error": "__prop__: Validierungsfehler: __node__, __id__: __error__"
+        }
+    },
+    "contextMenu": {
+        "insert": "Einfügen",
+        "node": "Node",
+        "junction": "Kreuzung",
+        "linkNodes": "Verknüpfe Nodes"
     }
 }

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -151,7 +151,11 @@
         "toggle-navigator": "Toggle navigator",
         "zoom-out": "Zoom out",
         "zoom-reset": "Reset zoom",
-        "zoom-in": "Zoom in"
+        "zoom-in": "Zoom in",
+        "search-flows": "Search flows",
+        "search-prev": "Previous",
+        "search-next": "Next",
+        "search-counter": "\"__term__\" __result__ of __count__"
     },
     "user": {
         "loggedInAs": "Logged in as __name__",
@@ -167,6 +171,10 @@
         }
     },
     "notification": {
+        "state": {
+            "flowsStopped": "Flows stopped",
+            "flowsStarted": "Flows started"
+        },
         "warning": "<strong>Warning</strong>: __message__",
         "warnings": {
             "undeployedChanges": "node has undeployed changes",
@@ -215,7 +223,8 @@
             "create-default-package": "Create default package file",
             "no-thanks": "No thanks",
             "create-default-project": "Create default project files",
-            "show-merge-conflicts": "Show merge conflicts"
+            "show-merge-conflicts": "Show merge conflicts",
+            "unknownNodesButton": "Search for unknown nodes"
         }
     },
     "clipboard": {
@@ -293,13 +302,19 @@
         "modifiedFlowsDesc": "Only deploys flows that contain changed nodes",
         "modifiedNodes": "Modified Nodes",
         "modifiedNodesDesc": "Only deploys nodes that have changed",
-        "restartFlows": "Delete Changes",
+        "startFlows": "Start",
-        "restartFlowsDesc": "Undoes all changes since last save",
+        "startFlowsDesc": "Start Flows",
+        "stopFlows": "Stop",
+        "stopFlowsDesc": "Stop Flows",
+        "restartFlows": "Restart Flows",
+        "restartFlowsDesc": "Restarts the current deployed flows",
         "successfulDeploy": "Successfully deployed",
         "successfulRestart": "Successfully restarted flows",
         "deployFailed": "Deploy failed: __message__",
         "unusedConfigNodes": "You have some unused configuration nodes.",
-        "unusedConfigNodesLink":"Click here to see them",
+        "unusedConfigNodesButton": "Search unused config nodes",
+        "unknownNodesButton": "Search for unknown nodes",
+        "invalidNodesButton": "Search for invalid nodes",
         "errors": {
             "noResponse": "no response from server"
         },
@@ -499,7 +514,8 @@
         "redoChange": "Redo",
         "searchBox": "Open search box",
         "managePalette": "Manage palette",
-        "actionList":"Action list"
+        "actionList": "Action list",
+        "splitWireWithLinks": "Split selection with Link nodes"
     },
     "library": {
         "library": "Library",
@@ -669,15 +685,7 @@
             "empty": "empty",
             "globalConfig": "Global Configuration Nodes",
             "triggerAction": "Trigger action",
-            "find": "Find in workspace",
+            "find": "Find in workspace"
-            "search": {
-                "configNodes": "Configuration nodes",
-                "unusedConfigNodes": "Unused configuration nodes",
-                "invalidNodes": "Invalid nodes",
-                "uknownNodes": "Unknown nodes",
-                "unusedSubflows": "Unused subflows",
-                "hiddenFlows": "Hidden flows"
-            }
         },
         "help": {
             "name": "Help",
@@ -687,7 +695,8 @@
             "showHelp": "Show help",
             "showInOutline": "Show in outline",
             "showTopics": "Show topics",
-            "noHelp": "No help topic selected"
+            "noHelp": "No help topic selected",
+            "changeLog": "Change Log"
         },
         "config": {
             "name": "Configuration nodes",
@@ -901,7 +910,17 @@
         "history": "Search history",
         "clear": "clear all",
         "empty": "No matches found",
-        "addNode": "add a node..."
+        "addNode": "add a node...",
+        "options": {
+            "configNodes": "Configuration nodes",
+            "unusedConfigNodes": "Unused configuration nodes",
+            "invalidNodes": "Invalid nodes",
+            "uknownNodes": "Unknown nodes",
+            "unusedSubflows": "Unused subflows",
+            "hiddenFlows": "Hidden flows",
+            "modifiedNodes": "Modified nodes and flows",
+            "thisFlow": "Current flow"
+        }
     },
     "expressionEditor": {
         "functions": "Functions",
@@ -936,6 +955,8 @@
         "format": "format JSON",
         "rawMode": "Edit JSON",
         "uiMode": "Visual editor",
+        "rawMode-readonly": "JSON",
+        "uiMode-readonly": "Visual",
         "insertAbove": "Insert above",
         "insertBelow": "Insert below",
         "addItem": "Add item",
@@ -1148,7 +1169,11 @@
     "tourGuide": {
         "takeATour": "Take a tour",
         "start": "Start",
-        "next": "Next"
+        "next": "Next",
+        "welcomeTours": "Welcome Tours"
+    },
+    "diagnostics": {
+        "title": "System Info"
     },
     "languages": {
         "de": "German",
@@ -1158,5 +1183,27 @@
         "ru": "Russian",
         "zh-CN": "Chinese(Simplified)",
         "zh-TW": "Chinese(Traditional)"
+    },
+    "validator": {
+        "errors": {
+            "invalid-json": "Invalid JSON data: __error__",
+            "invalid-json-prop": "__prop__: invalid JSON data: __error__",
+            "invalid-prop": "Invalid property expression",
+            "invalid-prop-prop": "__prop__: invalid property expression",
+            "invalid-num": "Invalid number",
+            "invalid-num-prop": "__prop__: invalid number",
+            "invalid-regexp": "Invalid input pattern",
+            "invalid-regex-prop": "__prop__: invalid input pattern",
+            "missing-required-prop": "__prop__: property value missing",
+            "invalid-config": "__prop__: invalid configuration node",
+            "missing-config": "__prop__: missing configuration node",
+            "validation-error": "__prop__: validation error: __node__, __id__: __error__"
+        }
+    },
+    "contextMenu": {
+        "insert": "Insert",
+        "node": "Node",
+        "junction": "Junction",
+        "linkNodes": "Link Nodes"
     }
 }

packages/node_modules/@node-red/editor-client/locales/ja/editor.json

@@ -149,7 +149,11 @@
         "toggle-navigator": "ナビゲータの表示/非表示を切替",
         "zoom-out": "縮小",
         "zoom-reset": "拡大/縮小を初期化",
-        "zoom-in": "拡大"
+        "zoom-in": "拡大",
+        "search-flows": "フローを検索",
+        "search-prev": "前へ",
+        "search-next": "次へ",
+        "search-counter": "\"__term__\" __count__ 件中の __result__ 件目"
     },
     "user": {
         "loggedInAs": "__name__ としてログインしました",
@@ -165,6 +169,10 @@
         }
     },
     "notification": {
+        "state": {
+            "flowsStopped": "フローを停止しました",
+            "flowsStarted": "フローを開始しました"
+        },
         "warning": "<strong>警告</strong>: __message__",
         "warnings": {
             "undeployedChanges": "ノードの変更をデプロイしていません",
@@ -213,7 +221,8 @@
             "create-default-package": "デフォルトパッケージファイルの作成",
             "no-thanks": "不要",
             "create-default-project": "デフォルトプロジェクトファイルの作成",
-            "show-merge-conflicts": "マージ競合を表示"
+            "show-merge-conflicts": "マージ競合を表示",
+            "unknownNodesButton": "不明なノードを検索する"
         }
     },
     "clipboard": {
@@ -291,13 +300,19 @@
         "modifiedFlowsDesc": "変更したノードを含むフローのみデプロイ",
         "modifiedNodes": "変更したノード",
         "modifiedNodesDesc": "変更したノードのみデプロイ",
+        "startFlows": "開始",
+        "startFlowsDesc": "フローを開始",
+        "stopFlows": "停止",
+        "stopFlowsDesc": "フローを停止",
         "restartFlows": "フローを再起動",
         "restartFlowsDesc": "デプロイされた現在のフローを再起動",
         "successfulDeploy": "デプロイが成功しました",
         "successfulRestart": "フローの再起動が成功しました",
         "deployFailed": "デプロイが失敗しました: __message__",
         "unusedConfigNodes": "使われていない設定ノードがあります。",
-        "unusedConfigNodesLink": "設定を参照する",
+        "unusedConfigNodesButton": "未使用の構成ノードを検索",
+        "unknownNodesButton": "不明なノードを検索する",
+        "invalidNodesButton": "無効なノードを検索する",
         "errors": {
             "noResponse": "サーバの応答がありません"
         },
@@ -497,7 +512,8 @@
         "redoChange": "変更操作をやり直し",
         "searchBox": "ノードを検索",
         "managePalette": "パレットの管理",
-        "actionList": "動作一覧"
+        "actionList": "動作一覧",
+        "splitWireWithLinks": "選択したワイヤーをlinkノードで分離"
     },
     "library": {
         "library": "ライブラリ",
@@ -667,15 +683,7 @@
             "empty": "空",
             "globalConfig": "グローバル設定ノード",
             "triggerAction": "アクションを実行",
-            "find": "ワークスペース内を検索",
+            "find": "ワークスペース内を検索"
-            "search": {
-                "configNodes": "設定ノード",
-                "unusedConfigNodes": "未使用の設定ノード",
-                "invalidNodes": "不正なノード",
-                "uknownNodes": "未知のノード",
-                "unusedSubflows": "未使用のサブフロー",
-                "hiddenFlows": "非表示のフロー"
-            }
         },
         "help": {
             "name": "ヘルプ",
@@ -685,7 +693,8 @@
             "showHelp": "ヘルプを表示",
             "showInOutline": "アウトラインに表示",
             "showTopics": "トピックを表示",
-            "noHelp": "ヘルプのトピックが未選択"
+            "noHelp": "ヘルプのトピックが未選択",
+            "changeLog": "更新履歴"
         },
         "config": {
             "name": "設定ノードを表示",
@@ -845,7 +854,7 @@
                 "pushFailed": "リモートに新しいコミットがあるため、プッシュに失敗しました。プルしてマージしてから、再度プッシュしてください。",
                 "push": "プッシュ",
                 "pull": "プル",
-                "unablePull": "<p>リモートの変更のプル失敗：ステージングされていないローカルの変更を上書きされてしまいます。</p><p>変更をコミットしてから再度実行してください。</p>",
+                "unablePull": "<p>リモートの変更のプル失敗：ステージングされていないローカルの変更が上書きされてしまいます。</p><p>変更をコミットしてから再度実行してください。</p>",
                 "showUnstagedChanges": "ステージングされていない変更を表示",
                 "connectionFailed": "リモートリポジトリに接続できません: ",
                 "pullUnrelatedHistory": "<p>リモートに関連のないコミット履歴があります。</p><p>本当に変更をプルしてローカルリポジトリに反映しますか？</p>",
@@ -899,7 +908,17 @@
         "history": "検索履歴",
         "clear": "全て削除",
         "empty": "一致したものが見つかりませんでした",
-        "addNode": "ノードを追加..."
+        "addNode": "ノードを追加...",
+        "options": {
+            "configNodes": "設定ノード",
+            "unusedConfigNodes": "未使用の設定ノード",
+            "invalidNodes": "不正なノード",
+            "uknownNodes": "未知のノード",
+            "unusedSubflows": "未使用のサブフロー",
+            "hiddenFlows": "非表示のフロー",
+            "modifiedNodes": "修正したノードやフロー",
+            "thisFlow": "現在のフロー"
+        }
     },
     "expressionEditor": {
         "functions": "関数",
@@ -934,6 +953,8 @@
         "format": "JSONフォーマット",
         "rawMode": "JSONを編集",
         "uiMode": "ビジュアルエディタ",
+        "rawMode-readonly": "JSON",
+        "uiMode-readonly": "ビジュアル",
         "insertAbove": "上に挿入",
         "insertBelow": "下に挿入",
         "addItem": "要素を追加",
@@ -1146,7 +1167,12 @@
     "tourGuide": {
         "takeATour": "ツアーを開始",
         "start": "開始",
-        "next": "次へ"
+        "next": "次へ",
+        "welcomeTours": "ウェルカムツアー",
+        "tours": "ツアー"
+    },
+    "diagnostics": {
+        "title": "システム情報"
     },
     "languages": {
         "de": "ドイツ語",
@@ -1157,6 +1183,28 @@
         "zh-CN": "中国語(簡体)",
         "zh-TW": "中国語(繁体)"
     },
+    "validator": {
+        "errors": {
+            "invalid-json": "JSONデータが不正: __error__",
+            "invalid-json-prop": "__prop__: JSONデータが不正: __error__",
+            "invalid-prop": "プロパティ式が不正",
+            "invalid-prop-prop": "__prop__: プロパティ式が不正",
+            "invalid-num": "数値が不正",
+            "invalid-num-prop": "__prop__: 数値が不正",
+            "invalid-regexp": "入力パターンが不正",
+            "invalid-regex-prop": "__prop__: 入力パターンが不正",
+            "missing-required-prop": "__prop__: プロパティが未設定",
+            "invalid-config": "__prop__: 設定ノードが不正",
+            "missing-config": "__prop__: 設定ノードが存在しません",
+            "validation-error": "__prop__: チェックエラー: __node__, __id__: __error__"
+        }
+    },
+    "contextMenu": {
+        "insert": "挿入",
+        "node": "ノード",
+        "junction": "分岐点",
+        "linkNodes": "Linkノード"
+    },
     "action-list": {
         "toggle-show-tips": "ヒント表示切替",
         "show-about": "Node-REDの説明を表示",
@@ -1174,6 +1222,7 @@
         "hide-all-flows": "全てのフローを非表示",
         "show-all-flows": "全てのフローを表示",
         "show-last-hidden-flow": "最後に非表示にしたフローを表示",
+        "list-modified-nodes": "修正したフローを表示",
         "list-hidden-flows": "非表示フローを表示",
         "list-flows": "フロー一覧",
         "list-subflows": "サブフロー一覧",
@@ -1240,6 +1289,8 @@
         "distribute-selection-vertically": "選択を上下に整列",
         "wire-series-of-nodes": "ノードを一続きに接続",
         "wire-node-to-multiple": "ノードを複数に接続",
+        "split-wire-with-link-nodes": "ワイヤーをlinkノードで分割",
+        "generate-node-names": "ノード名を生成",
         "show-user-settings": "ユーザ設定を表示",
         "show-help": "ヘルプを表示",
         "toggle-palette": "パレットの表示切替",
@@ -1266,7 +1317,9 @@
         "show-library-import-dialog": "ライブラリ読み込みダイアログを表示",
         "show-examples-import-dialog": "サンプル読み込みダイアログを表示",
         "search": "検索",
-        "show-action-list": "アクション一覧を表示",
+        "search-previous": "前を検索",
+        "search-next": "次を検索",
+        "show-action-list": "動作一覧を表示",
         "confirm-edit-tray": "編集を完了",
         "cancel-edit-tray": "編集をキャンセル",
         "show-remote-diff": "リモートとの変更差分を表示",
@@ -1276,8 +1329,8 @@
         "set-deploy-type-to-modified-flows": "デプロイを「変更したフロー」に設定",
         "set-deploy-type-to-modified-nodes": "デプロイを「変更したノード」に設定",
         "show-debug-tab": "デバッグタブを表示",
-        "clear-debug-messages": "デバッグメッセージをクリア",
+        "clear-debug-messages": "デバッグメッセージを削除",
-        "clear-filtered-debug-messages": "フィルタしたデバッグメッセージをクリア",
+        "clear-filtered-debug-messages": "フィルタしたデバッグメッセージを削除",
         "activate-selected-debug-nodes": "選択したデバッグノードを有効化",
         "activate-all-debug-nodes": "全てのデバッグノードを有効化",
         "activate-all-flow-debug-nodes": "フロー内の全デバッグノードを有効化",
@@ -1287,6 +1340,14 @@
         "zoom-in": "ズームイン",
         "zoom-out": "ズームアウト",
         "zoom-reset": "ズームリセット",
-        "toggle-navigator": "ナビゲータ表示切替"
+        "toggle-navigator": "ナビゲータ表示切替",
+        "show-system-info": "システム情報",
+        "split-wires-with-junctions": "分岐点によりワイヤーを分割",
+        "new-project": "新しいプロジェクト",
+        "open-project": "プロジェクトを開く",
+        "show-project-settings": "プロジェクト設定を表示",
+        "show-version-control-tab": "バージョンコントロールタブを表示",
+        "start-flows": "フローを開始",
+        "stop-flows": "フローを停止"
     }
 }

packages/node_modules/@node-red/editor-client/locales/ja/infotips.json

@@ -17,7 +17,7 @@
         "tip14": "[shift] を押しながらノードを [click] すると、接続された全てのノードを選択できます。",
         "tip15": "[ctrl] を押しながらノードを [click] すると、選択/非選択を切り替えできます。",
         "tip16": "{{core:show-previous-tab}} や {{core:show-next-tab}} で、タブの切り替えができます。",
-        "tip17": "ノードのプロバティ設定画面にて {{core:confirm-edit-tray}} を押すと、変更を確定できます。また、 {{core:cancel-edit-tray}} を押すと、変更を取り消せます。",
+        "tip17": "ノードのプロパティ設定画面にて {{core:confirm-edit-tray}} を押すと、変更を確定できます。また、 {{core:cancel-edit-tray}} を押すと、変更を取り消せます。",
         "tip18": "ノードを選択し、 {{core:edit-selected-node}} を押すとプロパティ設定画面が表示されます。"
     }
 }

packages/node_modules/@node-red/editor-client/locales/ko/editor.json

@@ -141,7 +141,8 @@
       "create-default-package": "기본 패키지 파일 생성",
       "no-thanks": "괜찮습니다",
       "create-default-project": "기본 프로젝트 파일 생성",
-      "show-merge-conflicts": "병합 충돌 보여주기"
+      "show-merge-conflicts": "병합 충돌 보여주기",
+      "unknownNodesButton": "알 수 없는 노드 검색"
     }
   },
   "clipboard": {
@@ -203,7 +204,9 @@
     "successfulRestart": "플로우 재시작을 성공했습니다",
     "deployFailed": "배포 실패 : __message__",
     "unusedConfigNodes": "사용되지 않는 설정노드가 있습니다",
-    "unusedConfigNodesLink": "여기를 클릭하면 볼 수 있습니다",
+    "unusedConfigNodesButton":"사용하지 않는 구성 노드 검색",
+    "unknownNodesButton":"알 수 없는 노드 검색",
+    "invalidNodesButton":"잘못된 노드 검색",
     "errors": {
       "noResponse": "서버의 응답이 없습니다"
     },

packages/node_modules/@node-red/editor-client/locales/ru/editor.json

@@ -183,7 +183,8 @@
             "create-default-package": "Создать файл пакета по умолчанию",
             "no-thanks": "Нет, спасибо",
             "create-default-project": "Создать файлы проекта по умолчанию",
-            "show-merge-conflicts": "Показать конфликты слияния"
+            "show-merge-conflicts": "Показать конфликты слияния",
+            "unknownNodesButton": "Поиск неизвестных узлов"
         }
     },
     "clipboard": {
@@ -277,7 +278,9 @@
         "successfulRestart": "Потоки успешно перезапущены",
         "deployFailed": "Развертывание не удалось: __message__",
         "unusedConfigNodes":"У вас есть неиспользуемых узлы конфигурации.",
-        "unusedConfigNodesLink":"Нажмите здесь, чтобы их увидеть",
+        "unusedConfigNodesButton":"Поиск неиспользуемых узлов конфигурации",
+        "unknownNodesButton":"Поиск неизвестных узлов",
+        "invalidNodesButton":"Поиск недопустимых узлов",
         "errors": {
             "noResponse": "нет ответа от сервера"
         },
@@ -650,14 +653,7 @@
             "empty": "пусто",
             "globalConfig": "Глобальные конфиг узлы",
             "triggerAction": "Вызвать действие",
-            "find": "Найти в рабочей области",
+            "find": "Найти в рабочей области"
-            "search": {
-                "configNodes": "Узлы конфигурации",
-                "unusedConfigNodes": "Неиспользуемые узлы конфигурации",
-                "invalidNodes": "Недействительные узлы",
-                "uknownNodes": "Неизвестные узлы",
-                "unusedSubflows": "Неиспользуемые подпотоки"
-            }
         },
         "help": {
             "name": "Справка",
@@ -888,7 +884,14 @@
     },
     "search": {
         "empty": "Ничего не найдено",
-        "addNode": "добавить узел..."
+        "addNode": "добавить узел...",
+        "options": {
+            "configNodes": "Узлы конфигурации",
+            "unusedConfigNodes": "Неиспользуемые узлы конфигурации",
+            "invalidNodes": "Недействительные узлы",
+            "uknownNodes": "Неизвестные узлы",
+            "unusedSubflows": "Неиспользуемые подпотоки"
+        }
     },
     "expressionEditor": {
         "functions": "Функции",

packages/node_modules/@node-red/editor-client/locales/zh-CN/editor.json

@@ -97,7 +97,7 @@
             "rename": "重命名",
             "delete": "删除",
             "keyboardShortcuts": "键盘快捷方式",
-            "login": "登陆",
+            "login": "登录",
             "logout": "退出",
             "editPalette": "节点管理",
             "other": "其他",
@@ -122,16 +122,16 @@
         "zoom-in": "放大"
     },
     "user": {
-        "loggedInAs": "作为 __name__ 登陆",
+        "loggedInAs": "作为 __name__ 登录",
         "username": "账号",
         "password": "密码",
-        "login": "登陆",
+        "login": "登录",
-        "loginFailed": "登陆失败",
+        "loginFailed": "登录失败",
         "notAuthorized": "未授权",
         "errors": {
-            "settings": "设置信息需要登陆后才能访问",
+            "settings": "设置信息需要登录后才能访问",
-            "deploy": "改动需要登陆后才能部署",
+            "deploy": "改动需要登录后才能部署",
-            "notAuthorized": "此操作需要登陆后才能执行"
+            "notAuthorized": "此操作需要登录后才能执行"
         }
     },
     "notification": {
@@ -182,7 +182,8 @@
             "create-default-package": "创建默认的包文件",
             "no-thanks": "不了，谢谢",
             "create-default-project": "创建默认项目文件",
-            "show-merge-conflicts": "显示合并冲突"
+            "show-merge-conflicts": "显示合并冲突",
+            "unknownNodesButton": "搜索未知节点"
         }
     },
     "clipboard": {
@@ -264,7 +265,9 @@
         "successfulRestart": "成功重启流程",
         "deployFailed": "部署失败: __message__",
         "unusedConfigNodes": "您有一些未使用的配置节点",
-        "unusedConfigNodesLink": "点击此处查看它们",
+        "unusedConfigNodesButton":"搜索未使用的配置节点",
+        "unknownNodesButton":"搜索未知节点",
+        "invalidNodesButton":"搜索无效节点",
         "errors": {
             "noResponse": "服务器没有响应"
         },
@@ -614,14 +617,7 @@
             "empty": "空的",
             "globalConfig": "全局配置节点",
             "triggerAction": "触发动作",
-            "find": "在工作区中查找",
+            "find": "在工作区中查找"
-            "search": {
-                "configNodes": "配置节点",
-                "unusedConfigNodes": "未使用的配置节点",
-                "invalidNodes": "无效的节点",
-                "uknownNodes": "未知的节点",
-                "unusedSubflows": "未使用的子流程"
-            }
         },
         "help": {
             "name": "帮助",
@@ -842,7 +838,14 @@
     },
     "search": {
         "empty": "找不到匹配",
-        "addNode": "添加一个节点..."
+        "addNode": "添加一个节点...",
+        "options": {
+            "configNodes": "配置节点",
+            "unusedConfigNodes": "未使用的配置节点",
+            "invalidNodes": "无效的节点",
+            "uknownNodes": "未知的节点",
+            "unusedSubflows": "未使用的子流程"
+        }
     },
     "expressionEditor": {
         "functions": "功能",

packages/node_modules/@node-red/editor-client/locales/zh-TW/editor.json

@@ -182,7 +182,8 @@
             "create-default-package": "創建默認的包文件",
             "no-thanks": "不了，謝謝",
             "create-default-project": "創建默認項目文件",
-            "show-merge-conflicts": "顯示合併衝突"
+            "show-merge-conflicts": "顯示合併衝突",
+            "unknownNodesButton": "搜索未知節點"
         }
     },
     "clipboard": {
@@ -264,7 +265,9 @@
         "successfulRestart": "成功重啟流程",
         "deployFailed": "部署失敗: __message__",
         "unusedConfigNodes": "您有一些未使用的配置節點",
-        "unusedConfigNodesLink": "點擊此處查看它們",
+        "unusedConfigNodesButton":"搜索未使用的配置節點",
+        "unknownNodesButton":"搜索未知節點",
+        "invalidNodesButton":"搜索無效節點",
         "errors": {
             "noResponse": "伺服器沒有回應"
         },
@@ -614,14 +617,7 @@
             "empty": "空的",
             "globalConfig": "全局配置節點",
             "triggerAction": "觸發動作",
-            "find": "在工作區中查找",
+            "find": "在工作區中查找"
-            "search": {
-                "configNodes": "配置節點",
-                "unusedConfigNodes": "未使用的配置節點",
-                "invalidNodes": "無效的節點",
-                "uknownNodes": "未知的節點",
-                "unusedSubflows": "未使用的子流程"
-            }
         },
         "help": {
             "name": "幫助",
@@ -842,7 +838,14 @@
     },
     "search": {
         "empty": "找不到匹配",
-        "addNode": "添加一個節點..."
+        "addNode": "添加一個節點...",
+        "options": {
+            "configNodes": "配置節點",
+            "unusedConfigNodes": "未使用的配置節點",
+            "invalidNodes": "無效的節點",
+            "uknownNodes": "未知的節點",
+            "unusedSubflows": "未使用的子流程"
+        }
     },
     "expressionEditor": {
         "functions": "功能",

packages/node_modules/@node-red/editor-client/package.json

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

packages/node_modules/@node-red/editor-client/src/ace/mode/nrjavascript_worker.js

@@ -76,7 +76,7 @@ oop.inherits(NRJavaScriptWorker, Mirror);
 
 (function() {
     this.setOptions = function(options) {
-        this.options = {
+        o.options = {
             // undef: true,
             // unused: true,
             esversion: 9,
@@ -98,7 +98,7 @@ oop.inherits(NRJavaScriptWorker, Mirror);
         if (options) {
             for (var opt in options) {
                 if (options.hasOwnProperty(opt)) {
-                    this.options[opt] = options.opt;
+                    o.options[opt] = options[opt];
                 }
             }
         }

packages/node_modules/@node-red/editor-client/src/images/grip-horizontal.svg

@@ -0,0 +1 @@
+<svg width="50" height="5" viewBox="0, 0, 50, 5" xmlns="http://www.w3.org/2000/svg"><path d="M0 1H50V4H0Z" fill="#CCC"/></svg>

packages/node_modules/@node-red/editor-client/src/images/grip.svg

@@ -0,0 +1 @@
+<svg width="5" height="50" viewBox="0, 0, 5, 50" xmlns="http://www.w3.org/2000/svg"><path d="M1 0H4V50H1Z" fill="#CCC"/></svg>

packages/node_modules/@node-red/editor-client/src/images/start.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+    <path color="#000" fill="#8c101c" d="M0 0h32v32H0z"></path>
+    <path style="fill:#ffffff;stroke:#000000;stroke-width:0" d="M 24,16 8,24 8,8 Z" fill="none" stroke="#000" stroke-width="1.5"></path>
+</svg>

packages/node_modules/@node-red/editor-client/src/images/stop.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+    <path color="#000" fill="#8c101c" d="M0 0h32v32H0z"></path>
+    <rect style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0;" width="15" height="15" x="8" y="8.5"></rect>
+</svg>

packages/node_modules/@node-red/editor-client/src/js/history.js

@@ -13,10 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  **/
+
+/** 
+ * An API for undo / redo history buffer
+ * @namespace RED.history
+*/
 RED.history = (function() {
     var undoHistory = [];
     var redoHistory = [];
 
+    function nodeOrJunction(id) {
+        var node = RED.nodes.node(id);
+        if (node) {
+            return node;
+        }
+        return RED.nodes.junction(id);
+    }
+
     function undoEvent(ev) {
         var i;
         var len;
@@ -101,6 +114,23 @@ RED.history = (function() {
                         RED.nodes.removeLink(ev.links[i]);
                     }
                 }
+                if (ev.junctions) {
+                    inverseEv.junctions = [];
+                    for (i=0;i<ev.junctions.length;i++) {
+                        inverseEv.junctions.push(ev.junctions[i]);
+                        RED.nodes.removeJunction(ev.junctions[i]);
+                        if (ev.junctions[i].g) {
+                            var group = RED.nodes.group(ev.junctions[i].g);
+                            var index = group.nodes.indexOf(ev.junctions[i]);
+                            if (index !== -1) {
+                                group.nodes.splice(index,1);
+                                RED.group.markDirty(group);
+                            }
+                        }
+
+
+                    }
+                }
                 if (ev.groups) {
                     inverseEv.groups = [];
                     for (i = ev.groups.length - 1;i>=0;i--) {
@@ -267,6 +297,21 @@ RED.history = (function() {
                         }
                     }
                 }
+                if (ev.junctions) {
+                    inverseEv.junctions = [];
+                    for (i=0;i<ev.junctions.length;i++) {
+                        inverseEv.junctions.push(ev.junctions[i]);
+                        RED.nodes.addJunction(ev.junctions[i]);
+                        if (ev.junctions[i].g) {
+                            group = RED.nodes.group(ev.junctions[i].g);
+                            if (group.nodes.indexOf(ev.junctions[i]) === -1) {
+                                group.nodes.push(ev.junctions[i]);
+                            }
+                            RED.group.markDirty(group)
+                        }
+
+                    }
+                }
                 if (ev.links) {
                     inverseEv.links = [];
                     for (i=0;i<ev.links.length;i++) {
@@ -477,6 +522,7 @@ RED.history = (function() {
                     var z = ev.activeWorkspace;
                     var fullNodeList = RED.nodes.filterNodes({z:ev.subflow.subflow.id});
                     fullNodeList = fullNodeList.concat(RED.nodes.groups(ev.subflow.subflow.id))
+                    fullNodeList = fullNodeList.concat(RED.nodes.junctions(ev.subflow.subflow.id))
                     fullNodeList.forEach(function(n) {
                         n.x += ev.subflow.offsetX;
                         n.y += ev.subflow.offsetY;
@@ -486,7 +532,7 @@ RED.history = (function() {
                     });
                     inverseEv.subflows = [];
                     for (i=0;i<ev.nodes.length;i++) {
-                        inverseEv.subflows.push(RED.nodes.node(ev.nodes[i]));
+                        inverseEv.subflows.push(nodeOrJunction(ev.nodes[i]));
                         RED.nodes.remove(ev.nodes[i]);
                     }
                 }

packages/node_modules/@node-red/editor-client/src/js/keymap.json

@@ -3,16 +3,12 @@
         "alt-shift-p":"core:manage-palette",
         "ctrl-f": "core:search",
         "ctrl-shift-f": "core:list-flows",
-        "ctrl-+": "core:zoom-in",
-        "ctrl--": "core:zoom-out",
-        "ctrl-0": "core:zoom-reset",
-        "ctrl-enter": "core:confirm-edit-tray",
-        "ctrl-escape": "core:cancel-edit-tray",
         "ctrl-d": "core:deploy-flows",
-        "ctrl-g i": "core:show-info-tab",
-        "ctrl-g h": "core:show-help-tab",
-        "ctrl-g d": "core:show-debug-tab",
         "ctrl-g c": "core:show-config-tab",
+        "ctrl-g d": "core:show-debug-tab",
+        "ctrl-g h": "core:show-help-tab",
+        "ctrl-g i": "core:show-info-tab",
+        "ctrl-g v": "core:show-version-control-tab",
         "ctrl-g x": "core:show-context-tab",
         "ctrl-e": "core:show-export-dialog",
         "ctrl-i": "core:show-import-dialog",
@@ -23,11 +19,8 @@
         "ctrl-alt-r": "core:show-remote-diff",
         "ctrl-alt-n": "core:new-project",
         "ctrl-alt-o": "core:open-project",
-        "ctrl-g v": "core:show-version-control-tab",
         "ctrl-shift-l": "core:show-event-log",
-        "ctrl-shift-p":"core:show-action-list",
+        "ctrl-shift-p":"core:show-action-list"
-        "alt-w": "core:hide-flow",
-        "alt-shift-w": "core:show-last-hidden-flow"
     },
     "red-ui-sidebar-node-config": {
         "backspace": "core:delete-config-selection",
@@ -90,6 +83,19 @@
         "alt-a m": "core:align-selection-to-middle",
         "alt-a c": "core:align-selection-to-center",
         "alt-a h": "core:distribute-selection-horizontally",
-        "alt-a v": "core:distribute-selection-vertically"
+        "alt-a v": "core:distribute-selection-vertically",
+        "shift-f": "core:search-previous",
+        "f": "core:search-next",
+        "alt-l l": "core:split-wire-with-link-nodes",
+        "alt-w": "core:hide-flow",
+        "alt-shift-w": "core:show-last-hidden-flow",
+        "ctrl-+": "core:zoom-in",
+        "ctrl--": "core:zoom-out",
+        "ctrl-0": "core:zoom-reset"
+
+     },
+     "red-ui-editor-stack": {
+        "ctrl-enter": "core:confirm-edit-tray",
+        "ctrl-escape": "core:cancel-edit-tray"
      }
 }

packages/node_modules/@node-red/editor-client/src/js/nodes.js

@@ -13,6 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  **/
+
+/**
+ * An Interface to nodes and utility functions for creating/adding/deleting nodes and links
+ * @namespace RED.nodes
+*/
 RED.nodes = (function() {
 
     var PORT_TYPE_INPUT = 1;
@@ -33,6 +38,9 @@ RED.nodes = (function() {
     var groups = {};
     var groupsByZ = {};
 
+    var junctions = {};
+    var junctionsByZ = {};
+
     var initialLoad;
 
     var dirty = false;
@@ -730,6 +738,10 @@ RED.nodes = (function() {
             moveGroupToTab(node,z);
             return;
         }
+        if (node.type === "junction") {
+            moveJunctionToTab(node,z);
+            return;
+        }
         var oldZ = node.z;
         allNodes.moveNode(node,z);
         var nl = nodeLinks[node.id];
@@ -764,6 +776,39 @@ RED.nodes = (function() {
         RED.events.emit("groups:change",group);
     }
 
+    function moveJunctionToTab(junction, z) {
+        var index = junctionsByZ[junction.z].indexOf(junction);
+        junctionsByZ[junction.z].splice(index,1);
+        junctionsByZ[z] = junctionsByZ[z] || [];
+        junctionsByZ[z].push(junction);
+
+        var oldZ = junction.z;
+        junction.z = z;
+
+        var nl = nodeLinks[junction.id];
+        if (nl) {
+            nl.in.forEach(function(l) {
+                var idx = linkTabMap[oldZ].indexOf(l);
+                if (idx != -1) {
+                    linkTabMap[oldZ].splice(idx, 1);
+                }
+                if ((l.source.z === z) && linkTabMap[z]) {
+                    linkTabMap[z].push(l);
+                }
+            });
+            nl.out.forEach(function(l) {
+                var idx = linkTabMap[oldZ].indexOf(l);
+                if (idx != -1) {
+                    linkTabMap[oldZ].splice(idx, 1);
+                }
+                if ((l.target.z === z) && linkTabMap[z]) {
+                    linkTabMap[z].push(l);
+                }
+            });
+        }
+        RED.events.emit("junctions:change",junction);
+    }
+
     function removeLink(l) {
         var index = links.indexOf(l);
         if (index != -1) {
@@ -814,6 +859,7 @@ RED.nodes = (function() {
         var removedNodes = [];
         var removedLinks = [];
         var removedGroups = [];
+        var removedJunctions = [];
         if (ws) {
             delete workspaces[id];
             delete linkTabMap[id];
@@ -822,7 +868,14 @@ RED.nodes = (function() {
             var node;
 
             if (allNodes.hasTab(id)) {
-                removedNodes = allNodes.getNodes(id).slice()
+                removedNodes = allNodes.getNodes(id).filter(n => {
+                    if (n.type === 'junction') {
+                        removedJunctions.push(n)
+                        return false
+                    } else {
+                        return true
+                    }
+                })
             }
             for (i in configNodes) {
                 if (configNodes.hasOwnProperty(i)) {
@@ -837,6 +890,10 @@ RED.nodes = (function() {
                 var result = removeNode(removedNodes[i].id);
                 removedLinks = removedLinks.concat(result.links);
             }
+            for (i=0;i<removedJunctions.length;i++) {
+                var result = removeJunction(removedJunctions[i])
+                removedLinks = removedLinks.concat(result.links)
+            }
 
             // Must get 'removedGroups' in the right order.
             //  - start with the top-most groups
@@ -856,7 +913,7 @@ RED.nodes = (function() {
             allNodes.removeTab(id);
             RED.events.emit('flows:remove',ws);
         }
-        return {nodes:removedNodes,links:removedLinks, groups: removedGroups};
+        return {nodes:removedNodes,links:removedLinks, groups: removedGroups, junctions: removedJunctions};
     }
 
     function addSubflow(sf, createNewIds) {
@@ -1113,7 +1170,7 @@ RED.nodes = (function() {
                 delete node.env;
             }
         }
-        if (n._def.category != "config") {
+        if (n._def.category != "config" || n.type === 'junction') {
             node.x = n.x;
             node.y = n.y;
             if (exportDimensions) {
@@ -1376,6 +1433,11 @@ RED.nodes = (function() {
                 nns.push(convertNode(groups[i], opts));
             }
         }
+        for (i in junctions) {
+            if (junctions.hasOwnProperty(i)) {
+                nns.push(convertNode(junctions[i], opts));
+            }
+        }
         for (i in configNodes) {
             if (configNodes.hasOwnProperty(i)) {
                 nns.push(convertNode(configNodes[i], opts));
@@ -1457,6 +1519,7 @@ RED.nodes = (function() {
             tabs: {},
             subflows: {},
             groups: {},
+            junctions: {},
             configs: {},
             nodes: {},
             all: [],
@@ -1472,6 +1535,8 @@ RED.nodes = (function() {
                 imported.subflows[n.id] = n;
             } else if (n.type === "group") {
                 imported.groups[n.id] = n;
+            } else if (n.type === "junction") {
+                imported.junctions[n.id] = n;
             } else if (n.hasOwnProperty("x") && n.hasOwnProperty("y")) {
                 imported.nodes[n.id] = n;
             } else {
@@ -1480,7 +1545,7 @@ RED.nodes = (function() {
             var nodeZ = n.z || "__global__";
             imported.zMap[nodeZ] = imported.zMap[nodeZ] || [];
             imported.zMap[nodeZ].push(n)
-            if (allNodes.hasNode(n.id) || configNodes[n.id] || workspaces[n.id] || subflows[n.id] || groups[n.id]) {
+            if (allNodes.hasNode(n.id) || configNodes[n.id] || workspaces[n.id] || subflows[n.id] || groups[n.id] || junctions[n.id]) {
                 imported.conflicted[n.id] = n;
             }
         })
@@ -1589,21 +1654,20 @@ RED.nodes = (function() {
      * Options:
      *  - generateIds - whether to replace all node ids
      *  - addFlow - whether to import nodes to a new tab
-     *  - importToCurrent
+     *  - reimport - if node has a .z property, dont overwrite it
+     *               Only applicible when `generateIds` is false
      *  - importMap - how to resolve any conflicts.
      *       - id:import - import as-is
      *       - id:copy - import with new id
      *       - id:replace - import over the top of existing
      */
     function importNodes(newNodesObj,options) { // createNewIds,createMissingWorkspace) {
-        options = options || {
+        const defOpts = { generateIds: false, addFlow: false, reimport: false, importMap: {} }
-            generateIds: false,
+        options = Object.assign({}, defOpts, options)
-            addFlow: false,
+        options.importMap = options.importMap || {}
-        }
+        const createNewIds = options.generateIds;
-        options.importMap = options.importMap || {};
+        const reimport = (!createNewIds && !!options.reimport)
-
+        const createMissingWorkspace = options.addFlow;
-        var createNewIds = options.generateIds;
-        var createMissingWorkspace = options.addFlow;
         var i;
         var n;
         var newNodes;
@@ -1646,7 +1710,7 @@ RED.nodes = (function() {
             if (!options.generateIds) {
                 if (!options.importMap[id]) {
                     // No conflict resolution for this node
-                    var existing = allNodes.getNode(id) || configNodes[id] || workspaces[id] || subflows[id] || groups[id];
+                    var existing = allNodes.getNode(id) || configNodes[id] || workspaces[id] || subflows[id] || groups[id] || junctions[id];
                     if (existing) {
                         existingNodes.push({existing:existing, imported:n});
                     }
@@ -1700,6 +1764,7 @@ RED.nodes = (function() {
                 n.type != "tab" &&
                 n.type != "subflow" &&
                 n.type != "group" &&
+                n.type != 'junction' &&
                 !registry.getNodeType(n.type) &&
                 n.type.substring(0,8) != "subflow:" &&
                 unknownTypes.indexOf(n.type)==-1) {
@@ -1772,6 +1837,7 @@ RED.nodes = (function() {
         var new_nodes = [];
         var new_links = [];
         var new_groups = [];
+        var new_junctions = [];
         var new_group_set = new Set();
         var nid;
         var def;
@@ -1902,7 +1968,8 @@ RED.nodes = (function() {
                         }
                     }
                 } else {
-                    if (n.z && !workspace_map[n.z] && !subflow_map[n.z]) {
+                    const keepNodesCurrentZ = reimport && n.z && RED.workspaces.contains(n.z)
+                    if (!keepNodesCurrentZ && n.z && !workspace_map[n.z] && !subflow_map[n.z]) {
                         n.z = activeWorkspace;
                     }
                 }
@@ -1963,12 +2030,15 @@ RED.nodes = (function() {
                         changed:false,
                         _config:{}
                     }
-                    if (n.type !== "group") {
+                    if (n.type !== "group" && n.type !== 'junction') {
                         node.wires = n.wires||[];
                         node.inputLabels = n.inputLabels;
                         node.outputLabels = n.outputLabels;
                         node.icon = n.icon;
                     }
+                    if (n.type === 'junction') {
+                        node.wires = n.wires||[];
+                    }
                     if (n.hasOwnProperty('l')) {
                         node.l = n.l;
                     }
@@ -2000,7 +2070,8 @@ RED.nodes = (function() {
                         node.id = getID();
                     } else {
                         node.id = n.id;
-                        if (node.z == null || (!workspace_map[node.z] && !subflow_map[node.z])) {
+                        const keepNodesCurrentZ = reimport && node.z && RED.workspaces.contains(node.z)
+                        if (!keepNodesCurrentZ && (node.z == null || (!workspace_map[node.z] && !subflow_map[node.z]))) {
                             if (createMissingWorkspace) {
                                 if (missingWorkspace === null) {
                                     missingWorkspace = RED.workspaces.add(null,true);
@@ -2037,6 +2108,15 @@ RED.nodes = (function() {
                         node.outputs = subflow.out.length;
                         node.inputs = subflow.in.length;
                         node.env = n.env;
+                    } else if (n.type === 'junction') {
+                         node._def = {defaults:{}}
+                         node._config.x = node.x
+                         node._config.y = node.y
+                         node.inputs = 1
+                         node.outputs = 1
+                         node.w = 0;
+                         node.h = 0;
+
                     } else {
                         if (!node._def) {
                             if (node.x && node.y) {
@@ -2120,7 +2200,9 @@ RED.nodes = (function() {
                     node_map[n.id] = node;
                     // If an 'unknown' config node, it will not have been caught by the
                     // proper config node handling, so needs adding to new_nodes here
-                    if (node.type === "unknown" || node._def.category !== "config") {
+                    if (node.type === 'junction') {
+                        new_junctions.push(node)
+                    } else if (node.type === "unknown" || node._def.category !== "config") {
                         new_nodes.push(node);
                     } else if (node.type === "group") {
                         new_groups.push(node);
@@ -2131,8 +2213,12 @@ RED.nodes = (function() {
         }
 
         // Remap all wires and config node references
-        for (i=0;i<new_nodes.length;i++) {
+        for (i=0;i<new_nodes.length+new_junctions.length;i++) {
+            if (i<new_nodes.length) {
                 n = new_nodes[i];
+            } else {
+                n = new_junctions[i - new_nodes.length]
+            }
             if (n.wires) {
                 for (var w1=0;w1<n.wires.length;w1++) {
                     var wires = (Array.isArray(n.wires[w1]))?n.wires[w1]:[n.wires[w1]];
@@ -2271,6 +2357,12 @@ RED.nodes = (function() {
             addGroup(n);
         }
 
+        for (i=0;i<new_junctions.length;i++) {
+            var junction = new_junctions[i];
+            addJunction(junction);
+        }
+
+
         // Now the nodes have been fully updated, add them.
         for (i=0;i<new_nodes.length;i++) {
             var node = new_nodes[i];
@@ -2301,6 +2393,7 @@ RED.nodes = (function() {
             nodes:new_nodes,
             links:new_links,
             groups:new_groups,
+            junctions: new_junctions,
             workspaces:new_workspaces,
             subflows:new_subflows,
             missingWorkspace: missingWorkspace,
@@ -2407,6 +2500,8 @@ RED.nodes = (function() {
         workspacesOrder = [];
         groups = {};
         groupsByZ = {};
+        junctions = {};
+        junctionsByZ = {};
 
         var subflowIds = Object.keys(subflows);
         subflowIds.forEach(function(id) {
@@ -2456,6 +2551,30 @@ RED.nodes = (function() {
         RED.events.emit("groups:remove",group);
     }
 
+    function addJunction(junction) {
+        junctionsByZ[junction.z] = junctionsByZ[junction.z] || []
+        junctionsByZ[junction.z].push(junction)
+        junctions[junction.id] = junction;
+        if (!nodeLinks[junction.id]) {
+            nodeLinks[junction.id] = {in:[],out:[]};
+        }
+        RED.events.emit("junctions:add", junction)
+    }
+    function removeJunction(junction) {
+        var i = junctionsByZ[junction.z].indexOf(junction)
+        junctionsByZ[junction.z].splice(i, 1)
+        if (junctionsByZ[junction.z].length === 0) {
+            delete junctionsByZ[junction.z]
+        }
+        delete junctions[junction.id]
+        delete nodeLinks[junction.id];
+        RED.events.emit("junctions:remove", junction)
+
+        var removedLinks = links.filter(function(l) { return (l.source === junction) || (l.target === junction); });
+        removedLinks.forEach(removeLink);
+        return { links: removedLinks }
+    }
+
     function getNodeHelp(type) {
         var helpContent = "";
         var helpElement = $("script[data-help-name='"+type+"']");
@@ -2651,7 +2770,7 @@ RED.nodes = (function() {
                     // Force the redraw to be synchronous so the view updates
                     // *now* and removes the unknown node
                     RED.view.redraw(true, true);
-                    var result = importNodes(reimportList,{generateIds:false});
+                    var result = importNodes(reimportList,{generateIds:false, reimport: true});
                     var newNodeMap = {};
                     result.nodes.forEach(function(n) {
                         newNodeMap[n.id] = n;
@@ -2684,7 +2803,6 @@ RED.nodes = (function() {
         getType: registry.getNodeType,
         getNodeHelp: getNodeHelp,
         convertNode: convertNode,
-
         add: addNode,
         remove: removeNode,
         clear: clear,
@@ -2730,6 +2848,11 @@ RED.nodes = (function() {
         group: function(id) { return groups[id] },
         groups: function(z) { return groupsByZ[z]?groupsByZ[z].slice():[] },
 
+        addJunction: addJunction,
+        removeJunction: removeJunction,
+        junction: function(id) { return junctions[id] },
+        junctions: function(z) { return junctionsByZ[z]?junctionsByZ[z].slice():[] },
+
         eachNode: function(cb) {
             allNodes.eachNode(cb);
         },

packages/node_modules/@node-red/editor-client/src/js/red.js

@@ -297,6 +297,10 @@ var RED = (function() {
                 // handled below
                 return;
             }
+            if (notificationId === "flows-run-state") {
+                // handled in editor-client/src/js/runtime.js
+                return;
+            }
             if (notificationId === "project-update") {
                 loader.start(RED._("event.loadingProject"), 0);
                 RED.nodes.clear();
@@ -332,7 +336,6 @@ var RED = (function() {
                     id: notificationId
                 }
                 if (notificationId === "runtime-state") {
-                    RED.events.emit("runtime-state",msg);
                     if (msg.error === "safe-mode") {
                         options.buttons = [
                             {
@@ -358,6 +361,14 @@ var RED = (function() {
                         } else {
                             options.buttons = [
                                 {
+                                    text: RED._("notification.label.unknownNodesButton"),
+                                    class: "pull-left",
+                                    click: function() {
+                                        RED.actions.invoke("core:search", "type:unknown ");
+                                    }
+                                },
+                                {
+                                    class: "primary",
                                     text: RED._("common.label.close"),
                                     click: function() {
                                         persistentNotifications[notificationId].hideNotification();
@@ -465,10 +476,10 @@ var RED = (function() {
             } else if (persistentNotifications.hasOwnProperty(notificationId)) {
                 persistentNotifications[notificationId].close();
                 delete persistentNotifications[notificationId];
+            }
             if (notificationId === 'runtime-state') {
                 RED.events.emit("runtime-state",msg);
             }
-            }
         });
         RED.comms.subscribe("status/#",function(topic,msg) {
             var parts = topic.split("/");
@@ -615,7 +626,10 @@ var RED = (function() {
             null,
             {id: "menu-item-edit-select-all", label:RED._("keyboard.selectAll"), onselect: "core:select-all-nodes"},
             {id: "menu-item-edit-select-connected", label:RED._("keyboard.selectAllConnected"), onselect: "core:select-connected-nodes"},
-            {id: "menu-item-edit-select-none", label:RED._("keyboard.selectNone"), onselect: "core:select-none"}
+            {id: "menu-item-edit-select-none", label:RED._("keyboard.selectNone"), onselect: "core:select-none"},
+            null,
+            {id: "menu-item-edit-split-wire-with-links", label:RED._("keyboard.splitWireWithLinks"), onselect: "core:split-wire-with-link-nodes"},
+
         ]});
 
         menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[
@@ -727,6 +741,7 @@ var RED = (function() {
         RED.search.init();
         RED.actionList.init();
         RED.editor.init();
+        RED.diagnostics.init();
         RED.diff.init();
 
 
@@ -735,6 +750,7 @@ var RED = (function() {
         RED.keyboard.init(buildMainMenu);
 
         RED.nodes.init();
+        RED.runtime.init()
         RED.comms.connect();
 
         $("#red-ui-main-container").show();
@@ -750,7 +766,7 @@ var RED = (function() {
         $('<div id="red-ui-header-shade" class="hide"></div>').appendTo(header);
         $('<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">'+
             '<div id="red-ui-workspace"></div>'+
-            '<div id="red-ui-editor-stack"></div>'+
+            '<div id="red-ui-editor-stack" tabindex="-1"></div>'+
             '<div id="red-ui-palette"></div>'+
             '<div id="red-ui-sidebar"></div>'+
             '<div id="red-ui-sidebar-separator"></div>'+

packages/node_modules/@node-red/editor-client/src/js/runtime.js

@@ -0,0 +1,36 @@
+RED.runtime = (function() {
+    let state = ""
+    let settings = { ui: false, enabled: false };
+    const STOPPED = "stop"
+    const STARTED = "start"
+    const SAFE = "safe"
+
+    return {
+        init: function() {
+            // refresh the current runtime status from server
+            settings = Object.assign({}, settings, RED.settings.runtimeState);
+            RED.events.on("runtime-state", function(msg) {
+                if (msg.state) {
+                    const currentState = state
+                    state = msg.state
+                    $(".red-ui-flow-node-button").toggleClass("red-ui-flow-node-button-stopped", state !== STARTED)
+                    if(settings.enabled === true && settings.ui === true) {
+                        RED.menu.setVisible("deploymenu-item-runtime-stop", state === STARTED)
+                        RED.menu.setVisible("deploymenu-item-runtime-start", state !== STARTED)
+                    }
+                    // Do not notify the user about this event if:
+                    // - This is the very first event we've received after loading the editor (currentState = '')
+                    // - The state matches what we already thought was the case (state === currentState)
+                    // - The event was triggered by a deploy (msg.deploy === true)
+                    // - The event is a safe mode event - that gets notified separately
+                    if (currentState !== '' && state !== currentState && !msg.deploy && state !== SAFE) {
+                        RED.notify(RED._("notification.state.flows"+(state === STOPPED?'Stopped':'Started'), msg), "success")
+                    }
+                }
+            });
+        },
+        get started() {
+            return state === STARTED
+        }
+    }
+})()

packages/node_modules/@node-red/editor-client/src/js/ui/actions.js

@@ -21,28 +21,12 @@ RED.actions = (function() {
     function getAction(name) {
         return actions[name].handler;
     }
-    function invokeAction() {
+    function getActionLabel(name) {
-        var args = Array.prototype.slice.call(arguments);
+        let def = actions[name]
-        var name = args.shift();
+        if (!def) {
-        if (actions.hasOwnProperty(name)) {
+            return ''
-            var handler = actions[name].handler;
-            handler.apply(null, args);
-        }
-    }
-    function listActions() {
-        var result = [];
-        var missing = [];
-        Object.keys(actions).forEach(function(action) {
-            var def = actions[action];
-            var shortcut = RED.keyboard.getShortcut(action);
-            var isUser = false;
-            if (shortcut) {
-                isUser = shortcut.user;
-            } else {
-                isUser = !!RED.keyboard.getUserShortcut(action);
         }
         if (!def.label) {
-                var name = action;
             var options = def.options;
             var key = options ? options.label : undefined;
             if (!key) {
@@ -58,12 +42,36 @@ RED.actions = (function() {
                         return " "+arguments[4].toUpperCase();
                     }
                 });
-                    missing.push(key);
             }
             def.label = label;
         }
-            //console.log("; missing:", missing);
+        return def.label
+    }
 
+
+    function invokeAction() {
+        var args = Array.prototype.slice.call(arguments);
+        var name = args.shift();
+        if (actions.hasOwnProperty(name)) {
+            var handler = actions[name].handler;
+            handler.apply(null, args);
+        }
+    }
+    function listActions() {
+        var result = [];
+
+        Object.keys(actions).forEach(function(action) {
+            var def = actions[action];
+            var shortcut = RED.keyboard.getShortcut(action);
+            var isUser = false;
+            if (shortcut) {
+                isUser = shortcut.user;
+            } else {
+                isUser = !!RED.keyboard.getUserShortcut(action);
+            }
+            if (!def.label) {
+                def.label = getActionLabel(action)
+            }
             result.push({
                 id:action,
                 scope:shortcut?shortcut.scope:undefined,
@@ -79,6 +87,7 @@ RED.actions = (function() {
         add: addAction,
         remove: removeAction,
         get: getAction,
+        getLabel: getActionLabel,
         invoke: invokeAction,
         list: listActions
     }

packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js

@@ -709,6 +709,7 @@ RED.clipboard = (function() {
             } else if (type === 'flow') {
                 var activeWorkspace = RED.workspaces.active();
                 nodes = RED.nodes.groups(activeWorkspace);
+                nodes = nodes.concat(RED.nodes.junctions(activeWorkspace));
                 nodes = nodes.concat(RED.nodes.filterNodes({z:activeWorkspace}));
                 RED.nodes.eachConfig(function(n) {
                     if (n.z === RED.workspaces.active() && n._def.hasUsers === false) {
@@ -987,6 +988,7 @@ RED.clipboard = (function() {
         try {
             RED.view.importNodes(newNodes, importOptions);
         } catch(error) {
+            console.log(error.importConfig)
             // Thrown for import_conflict
             confirmImport(error.importConfig, newNodes, importOptions);
         }

packages/node_modules/@node-red/editor-client/src/js/ui/common/autoComplete.js

@@ -15,6 +15,8 @@
  *             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
+ *  minLength: number
+ *             If `minLength` is 0, pressing down arrow will show the list
  *
  * The auto-complete options should be an array of objects in the form:
  *  {
@@ -26,10 +28,11 @@
 
     $.widget( "nodered.autoComplete", {
         _create: function() {
-            var that = this;
+            const that = this;
             this.completionMenuShown = false;
-            this.options.search = this.options.search || function() { return [] }
+            this.options.minLength = parseInteger(this.options.minLength, 1, 0);
-            this.element.addClass("red-ui-autoComplete")
+            this.options.search = this.options.search || function() { return [] };
+            this.element.addClass("red-ui-autoComplete");
             this.element.on("keydown.red-ui-autoComplete", function(evt) {
                 if ((evt.keyCode === 13 || evt.keyCode === 9) && that.completionMenuShown) {
                     var opts = that.menu.options();
@@ -71,8 +74,8 @@
             this.completionMenuShown = true;
         },
         _updateCompletions: function(val) {
-            var that = this;
+            const that = this;
-            if (val.trim() === "") {
+            if (val.trim().length < this.options.minLength) {
                 if (this.completionMenuShown) {
                     this.menu.hide();
                 }
@@ -96,7 +99,7 @@
                 }
             }
             if (this.options.search.length === 2) {
-                var requestId = 1+Math.floor(Math.random()*10000);
+                const requestId = 1+Math.floor(Math.random()*10000);
                 this.pendingRequest = requestId;
                 this.options.search(val,function(completions) { displayResults(completions,requestId);})
             } else {
@@ -112,4 +115,12 @@
             }
         }
     });
+    function parseInteger(input, def, min, max) {
+        if(input == null) { return (def || 0); }
+        min = min == null ? Number.NEGATIVE_INFINITY : min; 
+        max = max == null ? Number.POSITIVE_INFINITY : max; 
+        let n = parseInt(input);
+        if(isNaN(n) || n < min || n > max) { n = def || 0; }
+        return n;
+    }
 })(jQuery);

packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js

@@ -16,6 +16,7 @@
 RED.menu = (function() {
 
     var menuItems = {};
+    let menuItemCount = 0
 
     function createMenuItem(opt) {
         var item;
@@ -59,15 +60,16 @@ RED.menu = (function() {
             item = $('<li class="red-ui-menu-divider"></li>');
         } else {
             item = $('<li></li>');
-
+            if (!opt.id) {
+                opt.id = 'red-ui-menu-item-'+(menuItemCount++)
+            }
             if (opt.group) {
                 item.addClass("red-ui-menu-group-"+opt.group);
-
             }
             var linkContent = '<a '+(opt.id?'id="'+opt.id+'" ':'')+'tabindex="-1" href="#">';
             if (opt.toggle) {
-                linkContent += '<i class="fa fa-square pull-left"></i>';
+                linkContent += '<i class="fa fa-square'+(opt.direction!=='right'?" pull-left":"")+'"></i>';
-                linkContent += '<i class="fa fa-check-square pull-left"></i>';
+                linkContent += '<i class="fa fa-check-square'+(opt.direction!=='right'?" pull-left":"")+'"></i>';
 
             }
             if (opt.icon !== undefined) {
@@ -77,12 +79,15 @@ RED.menu = (function() {
                     linkContent += '<i class="'+(opt.icon?opt.icon:'" style="display: inline-block;"')+'"></i> ';
                 }
             }
-
+            let label = opt.label
+            if (!opt.label && typeof opt.onselect === 'string') {
+                label = RED.actions.getLabel(opt.onselect)
+            }
             if (opt.sublabel) {
-                linkContent += '<span class="red-ui-menu-label-container"><span class="red-ui-menu-label">'+opt.label+'</span>'+
+                linkContent += '<span class="red-ui-menu-label-container"><span class="red-ui-menu-label">'+label+'</span>'+
                                '<span class="red-ui-menu-sublabel">'+opt.sublabel+'</span></span>'
             } else {
-                linkContent += '<span class="red-ui-menu-label"><span>'+opt.label+'</span></span>'
+                linkContent += '<span class="red-ui-menu-label"><span>'+label+'</span></span>'
             }
 
             linkContent += '</a>';
@@ -126,19 +131,45 @@ RED.menu = (function() {
                 });
             }
             if (opt.options) {
-                item.addClass("red-ui-menu-dropdown-submenu pull-left");
+                item.addClass("red-ui-menu-dropdown-submenu"+(opt.direction!=='right'?" pull-left":""));
                 var submenu = $('<ul id="'+opt.id+'-submenu" class="red-ui-menu-dropdown"></ul>').appendTo(item);
+                var hasIcons = false
+                var hasSubmenus = false
 
                 for (var i=0;i<opt.options.length;i++) {
+
+                    if (opt.options[i]) {
+                        if (opt.onpreselect && opt.options[i].onpreselect === undefined) {
+                            opt.options[i].onpreselect = opt.onpreselect
+                        }
+                        if (opt.onpostselect && opt.options[i].onpostselect === undefined) {
+                            opt.options[i].onpostselect = opt.onpostselect
+                        }
+                        opt.options[i].direction = opt.direction
+                        hasIcons = hasIcons || (opt.options[i].icon);
+                        hasSubmenus = hasSubmenus || (opt.options[i].options);
+                    }
+
                     var li = createMenuItem(opt.options[i]);
                     if (li) {
                         li.appendTo(submenu);
                     }
                 }
+                if (!hasIcons) {
+                    submenu.addClass("red-ui-menu-dropdown-noicons")
+                }
+                if (hasSubmenus) {
+                    submenu.addClass("red-ui-menu-dropdown-submenus")
+                }
+
+
             }
             if (opt.disabled) {
                 item.addClass("disabled");
             }
+            if (opt.visible === false) {
+                item.addClass("hide");
+            }
         }
 
 
@@ -147,7 +178,9 @@ RED.menu = (function() {
     }
     function createMenu(options) {
         var topMenu = $("<ul/>",{class:"red-ui-menu red-ui-menu-dropdown pull-right"});
-
+        if (options.direction) {
+            topMenu.addClass("red-ui-menu-dropdown-direction-"+options.direction)
+        }
         if (options.id) {
             topMenu.attr({id:options.id+"-submenu"});
             var menuParent = $("#"+options.id);
@@ -173,9 +206,22 @@ RED.menu = (function() {
         }
 
         var lastAddedSeparator = false;
+        var hasSubmenus = false;
+        var hasIcons = false;
         for (var i=0;i<options.options.length;i++) {
             var opt = options.options[i];
+            if (opt) {
+                if (options.onpreselect && opt.onpreselect === undefined) {
+                    opt.onpreselect = options.onpreselect
+                }
+                if (options.onpostselect && opt.onpostselect === undefined) {
+                    opt.onpostselect = options.onpostselect
+                }
+                opt.direction = options.direction || 'left'
+            }
             if (opt !== null || !lastAddedSeparator) {
+                hasIcons = hasIcons || (opt && opt.icon);
+                hasSubmenus = hasSubmenus || (opt && opt.options);
                 var li = createMenuItem(opt);
                 if (li) {
                     li.appendTo(topMenu);
@@ -183,13 +229,21 @@ RED.menu = (function() {
                 }
             }
         }
-
+        if (!hasIcons) {
+            topMenu.addClass("red-ui-menu-dropdown-noicons")
+        }
+        if (hasSubmenus) {
+            topMenu.addClass("red-ui-menu-dropdown-submenus")
+        }
         return topMenu;
     }
 
     function triggerAction(id, args) {
         var opt = menuItems[id];
         var callback = opt.onselect;
+        if (opt.onpreselect) {
+            opt.onpreselect.call(opt,args)
+        }
         if (typeof opt.onselect === 'string') {
             callback = RED.actions.get(opt.onselect);
         }
@@ -198,6 +252,9 @@ RED.menu = (function() {
         } else {
             console.log("No callback for",id,opt.onselect);
         }
+        if (opt.onpostselect) {
+            opt.onpostselect.call(opt,args)
+        }
     }
 
     function isSelected(id) {
@@ -249,6 +306,14 @@ RED.menu = (function() {
         }
     }
 
+    function setVisible(id,state) {
+        if (!state) {
+            $("#"+id).parent().addClass("hide");
+        } else {
+            $("#"+id).parent().removeClass("hide");
+        }
+    }
+
     function addItem(id,opt) {
         var item = createMenuItem(opt);
         if (opt !== null && opt.group) {
@@ -305,6 +370,7 @@ RED.menu = (function() {
         isSelected: isSelected,
         toggleSelected: toggleSelected,
         setDisabled: setDisabled,
+        setVisible: setVisible,
         addItem: addItem,
         removeItem: removeItem,
         setAction: setAction,

packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js

@@ -359,6 +359,7 @@ RED.popover = (function() {
                 setTimeout(closePopup,delay.hide);
             }
         });
+
         if (trigger === 'hover') {
             target.on('mouseenter',function(e) {
                 clearTimeout(timer);
@@ -470,6 +471,11 @@ RED.popover = (function() {
             popover.setAction = function(newAction) {
                 action = newAction;
             }
+            popover.delete = function() {
+                popover.close(true)
+                target.off("mouseenter");
+                target.off("mouseleave");
+            };
             return popover;
 
         },
@@ -604,10 +610,13 @@ RED.popover = (function() {
                 var target = options.target;
                 var align = options.align || "right";
                 var offset = options.offset || [0,0];
+                var xPos = options.x;
+                var yPos = options.y;
+                var isAbsolutePosition = (xPos !== undefined && yPos !== undefined)
 
-                var pos = target.offset();
+                var pos = isAbsolutePosition?{left:xPos, top: yPos}:target.offset();
-                var targetWidth = target.width();
+                var targetWidth = isAbsolutePosition?0:target.width();
-                var targetHeight = target.outerHeight();
+                var targetHeight = isAbsolutePosition?0:target.outerHeight();
                 var panelHeight = panel.height();
                 var panelWidth = panel.width();
 

packages/node_modules/@node-red/editor-client/src/js/ui/common/searchBox.js

@@ -105,8 +105,8 @@
                     }
                 });
                 this.element.on("keydown",function(e) {
-                    if (!menuShown && e.keyCode === 40) {
+                    if (!menuShown && e.keyCode === 40 && $(this).val() === '') {
-                        //DOWN
+                        //DOWN (only show menu if search field is emty)
                         showMenu();
                     }
                 });

packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

@@ -670,7 +670,7 @@ RED.tabs = (function() {
                 }
                 var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
                 if (tab.icon) {
-                    $('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
+                    $('<i>',{class:"red-ui-tab-icon", style:"mask-image: url("+tab.icon+"); -webkit-mask-image: url("+tab.icon+");"}).appendTo(link);
                 } else if (tab.iconClass) {
                     $('<i>',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link);
                 }
@@ -828,7 +828,7 @@ RED.tabs = (function() {
                 }
 
                 // link.attr("title",tab.label);
-                RED.popover.tooltip(link,function() { return tab.label})
+                RED.popover.tooltip(link,function() { return RED.utils.sanitize(tab.label); });
 
                 if (options.onadd) {
                     options.onadd(tab);

packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js

@@ -21,6 +21,7 @@
  *   - multi : boolean - if true, .selected will return an array of results
  *                       otherwise, returns the first selected item
  *   - sortable: boolean/string - TODO: see editableList
+ *   - selectable: boolean - default true - whether individual items can be selected
  *   - rootSortable: boolean - if 'sortable' is set, then setting this to
  *                             false, prevents items being sorted to the
  *                             top level of the tree
@@ -118,6 +119,7 @@
                 switch(evt.keyCode) {
                     case 32: // SPACE
                     case 13: // ENTER
+                        if (!that.options.selectable) { return }
                         if (evt.altKey || evt.ctrlKey || evt.metaKey || evt.shiftKey) {
                             return
                         }

packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js

@@ -55,34 +55,46 @@
     }
 
     var autoComplete = function(options) {
+        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),
+            }
+        }
+        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;
+        }
         return function(val) {
             var matches = [];
             options.forEach(opt => {
-                let v = opt.value;
+                const optVal = opt.value;
-                var i = v.toLowerCase().indexOf(val.toLowerCase());
+                const optSrc = (opt.source||[]).join(",");
-                if (i > -1) {
+                const valMatch = getMatch(optVal, val);
-                    var pre = v.substring(0,i);
+                const srcMatch = getMatch(optSrc, val);
-                    var matchedVal = v.substring(i,i+val.length);
+                if (valMatch.found || srcMatch.found) {
-                    var post = v.substring(i+val.length)
+                    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"});
-                    var el = $('<div/>',{style:"white-space:nowrap; overflow: hidden; flex-grow:1"});
+                    valEl.append(generateSpans(valMatch));
-                    $('<span/>').text(pre).appendTo(el);
+                    valEl.appendTo(element);
-                    $('<span/>',{style:"font-weight: bold"}).text(matchedVal).appendTo(el);
+                    if (optSrc) {
-                    $('<span/>').text(post).appendTo(el);
+                        const optEl = $('<div>').css({ "font-size": "0.8em" });
-
+                        optEl.append(generateSpans(srcMatch));
-                    var element = $('<div>',{style: "display: flex"});
+                        optEl.appendTo(element);
-                    el.appendTo(element);
-                    if (opt.source) {
-                        $('<div>').css({
-                            "font-size": "0.8em"
-                        }).text(opt.source.join(",")).appendTo(element);
                     }
-
                     matches.push({
-                        value: v,
+                        value: optVal,
                         label: element,
-                        i:i
+                        i: (valMatch.found ? valMatch.index : srcMatch.index)
-                    })
+                    });
                 }
             })
             matches.sort(function(A,B){return A.i-B.i})
@@ -93,6 +105,36 @@
     // This is a hand-generated list of completions for the core nodes (based on the node help html).
     var msgCompletions = [
         { value: "payload" },
+        { value: "topic", source: ["mqtt","inject","rbe"] },
+        { value: "action", source: ["mqtt"] },
+        { value: "complete", source: ["join"] },
+        { value: "contentType", source: ["mqtt"] },
+        { value: "cookies", source: ["http request","http response"] },
+        { value: "correlationData", source: ["mqtt"] },
+        { value: "delay", source: ["delay","trigger"] },
+        { value: "encoding", source: ["file"] },
+        { value: "error", source: ["catch"] },
+        { value: "error.message", source: ["catch"] },
+        { value: "error.source", source: ["catch"] },
+        { value: "error.source.id", source: ["catch"] },
+        { value: "error.source.type", source: ["catch"] },
+        { value: "error.source.name", source: ["catch"] },
+        { value: "filename", source: ["file","file in"] },
+        { value: "flush", source: ["delay"] },
+        { value: "followRedirects", source: ["http request"] },
+        { value: "headers", source: ["http response","http request"] },
+        { value: "host", source: ["tcp request","http request"] },
+        { value: "ip", source: ["udp out"] },
+        { value: "kill", source: ["exec"] },
+        { value: "messageExpiryInterval", source: ["mqtt"] },
+        { value: "method", source: ["http request"] },
+        { value: "options", source: ["xml"] },
+        { value: "parts", source: ["split","join","batch","sort"] },
+        { value: "pid", source: ["exec"] },
+        { value: "port", source: ["tcp request"," udp out"] },
+        { value: "qos", source: ["mqtt"] },
+        { value: "rate", source: ["delay"] },
+        { value: "rejectUnauthorized", source: ["http request"] },
         { value: "req", source: ["http in"]},
         { value: "req.body", source: ["http in"]},
         { value: "req.headers", source: ["http in"]},
@@ -100,38 +142,28 @@
         { value: "req.params", source: ["http in"]},
         { value: "req.cookies", source: ["http in"]},
         { value: "req.files", source: ["http in"]},
-        { value: "complete", source: ["join"] },
-        { value: "contentType", source: ["mqtt"] },
-        { value: "cookies", source: ["http in","http request"] },
-        { value: "correlationData", source: ["mqtt"] },
-        { value: "delay", source: ["delay","trigger"] },
-        { value: "encoding", source: ["file"] },
-        { value: "error", source: ["catch"] },
-        { value: "filename", source: ["file","file in"] },
-        { value: "flush", source: ["delay"] },
-        { value: "followRedirects", source: ["http request"] },
-        { value: "headers", source: ["http in"," http request"] },
-        { value: "kill", source: ["exec"] },
-        { value: "messageExpiryInterval", source: ["mqtt"] },
-        { value: "method", source: ["http-request"] },
-        { value: "options", source: ["xml"] },
-        { value: "parts", source: ["split","join"] },
-        { value: "pid", source: ["exec"] },
-        { value: "qos", source: ["mqtt"] },
-        { value: "rate", source: ["delay"] },
-        { value: "rejectUnauthorized", source: ["http request"] },
         { value: "requestTimeout", source: ["http request"] },
         { value: "reset", source: ["delay","trigger","join","rbe"] },
+        { value: "responseCookies", source: ["http request"] },
         { value: "responseTopic", source: ["mqtt"] },
+        { value: "responseURL", source: ["http request"] },
         { value: "restartTimeout", source: ["join"] },
         { value: "retain", source: ["mqtt"] },
+        { value: "schema", source: ["json"] },
         { value: "select", source: ["html"] },
-        { value: "statusCode", source: ["http in"] },
+        { value: "statusCode", source: ["http response","http request"] },
+        { value: "status", source: ["status"] },
+        { value: "status.text", source: ["status"] },
+        { value: "status.source", source: ["status"] },
+        { value: "status.source.type", source: ["status"] },
+        { value: "status.source.id", source: ["status"] },
+        { value: "status.source.name", source: ["status"] },
+        { value: "target", source: ["link call"] },
         { value: "template", source: ["template"] },
         { value: "toFront", source: ["delay"] },
-        { value: "topic", source: ["inject","mqtt","rbe"] },
         { value: "url", source: ["http request"] },
-        { value: "userProperties", source: ["mqtt"] }
+        { value: "userProperties", source: ["mqtt"] },
+        { value: "_session", source: ["websocket out","tcp out"] },
     ]
     var allOptions = {
         msg: {value:"msg",label:"msg.",validate:RED.utils.validatePropertyExpression, autoComplete: autoComplete(msgCompletions)},
@@ -166,6 +198,8 @@
                 }
                 RED.editor.editJSON({
                     value: value,
+                    stateId: RED.editor.generateViewStateId("typedInput", that, "json"),
+                    focus: true,
                     complete: function(v) {
                         var value = v;
                         try {
@@ -188,6 +222,8 @@
                 var that = this;
                 RED.editor.editExpression({
                     value: this.value().replace(/\t/g,"\n"),
+                    stateId: RED.editor.generateViewStateId("typedInput", that, "jsonata"),
+                    focus: true,
                     complete: function(v) {
                         that.value(v.replace(/\n/g,"\t"));
                     }
@@ -202,6 +238,8 @@
                 var that = this;
                 RED.editor.editBuffer({
                     value: this.value(),
+                    stateId: RED.editor.generateViewStateId("typedInput", that, "bin"),
+                    focus: true,
                     complete: function(v) {
                         that.value(v);
                     }
@@ -463,7 +501,7 @@
                 this.options.types = this.options.types||Object.keys(allOptions);
             }
 
-            this.selectTrigger = $('<button class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
+            this.selectTrigger = $('<button type="button" class="red-ui-typedInput-type-select" tabindex="0"></button>').prependTo(this.uiSelect);
             $('<i class="red-ui-typedInput-icon fa fa-caret-down"></i>').toggle(this.options.types.length > 1).appendTo(this.selectTrigger);
 
             this.selectLabel = $('<span class="red-ui-typedInput-type-label"></span>').appendTo(this.selectTrigger);
@@ -532,7 +570,7 @@
             })
 
             // explicitly set optionSelectTrigger display to inline-block otherwise jQ sets it to 'inline'
-            this.optionSelectTrigger = $('<button tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
+            this.optionSelectTrigger = $('<button type="button" tabindex="0" class="red-ui-typedInput-option-trigger" style="display:inline-block"><span class="red-ui-typedInput-option-caret"><i class="red-ui-typedInput-icon fa fa-caret-down"></i></span></button>').appendTo(this.uiSelect);
             this.optionSelectLabel = $('<span class="red-ui-typedInput-option-label"></span>').prependTo(this.optionSelectTrigger);
             // RED.popover.tooltip(this.optionSelectLabel,function() {
             //     return that.optionValue;
@@ -553,7 +591,7 @@
                 that.uiSelect.addClass('red-ui-typedInput-focus');
             });
 
-            this.optionExpandButton = $('<button tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect);
+            this.optionExpandButton = $('<button type="button" tabindex="0" class="red-ui-typedInput-option-expand" style="display:inline-block"></button>').appendTo(this.uiSelect);
             this.optionExpandButtonIcon = $('<i class="red-ui-typedInput-icon fa fa-ellipsis-h"></i>').appendTo(this.optionExpandButton);
 
             this.type(this.typeField.val() || this.options.default||this.typeList[0].value);
@@ -637,7 +675,7 @@
                     if (opt.icon.indexOf("<") === 0) {
                         $(opt.icon).prependTo(op);
                     } else if (opt.icon.indexOf("/") !== -1) {
-                        $('<img>',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px; height: 18px;"}).prependTo(op);
+                        $('<i>',{class:"red-ui-typedInput-icon", style:"mask-image: url("+opt.icon+"); -webkit-mask-image: url("+opt.icon+");"}).prependTo(op);
                     } else {
                         $('<i>',{class:"red-ui-typedInput-icon "+opt.icon}).prependTo(op);
                     }
@@ -988,10 +1026,7 @@
                             $(opt.icon).prependTo(this.selectLabel);
                         }
                         else if (opt.icon.indexOf("/") !== -1) {
-                            image = new Image();
+                            $('<i>',{class:"red-ui-typedInput-icon", style:"mask-image: url("+opt.icon+"); -webkit-mask-image: url("+opt.icon+"); margin-right: 4px;height: 18px;width:13px"}).prependTo(this.selectLabel);
-                            image.name = opt.icon;
-                            image.src = mapDeprecatedIcon(opt.icon);
-                            $('<img>',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
                         }
                         else {
                             $('<i>',{class:"red-ui-typedInput-icon "+opt.icon,style:"min-width: 13px; margin-right: 4px;"}).prependTo(this.selectLabel);
@@ -1147,7 +1182,8 @@
                             this.elementDiv.show();
                             if (opt.autoComplete) {
                                 this.input.autoComplete({
-                                    search: opt.autoComplete
+                                    search: opt.autoComplete,
+                                    minLength: 0
                                 })
                             }
                         }

packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js

@@ -0,0 +1,203 @@
+RED.contextMenu = (function () {
+
+    let menu;
+    function createMenu() {
+        // menu = RED.popover.menu({
+        //     options: [
+        //         {
+        //             label: 'delete selection',
+        //             onselect: function() {
+        //                 RED.actions.invoke('core:delete-selection')
+        //                 RED.view.focus()
+        //             }
+        //         },
+        //         { label: 'world' }
+        //     ],
+        //     width: 200,
+        // })
+    }
+
+    function disposeMenu() {
+        $(document).off("mousedown.red-ui-workspace-context-menu");
+        if (menu) {
+            menu.remove();
+        }
+        menu = null;
+    }
+    function show(options) {
+        if (menu) {
+            menu.remove()
+        }
+
+        const selection = RED.view.selection()
+        const noSelection = !selection || Object.keys(selection).length === 0
+        const hasSelection = (selection.nodes && selection.nodes.length > 0);
+        const hasMultipleSelection = hasSelection && selection.nodes.length > 1;
+        const virtulLinks = (selection.links && selection.links.filter(e => !!e.link)) || [];
+        const wireLinks = (selection.links && selection.links.filter(e => !e.link)) || [];
+        const hasLinks = wireLinks.length > 0;
+        const isSingleLink = !hasSelection && hasLinks && wireLinks.length === 1
+        const isMultipleLinks = !hasSelection && hasLinks && wireLinks.length > 1
+        const canDelete = hasSelection || hasLinks
+        const isGroup = hasSelection && selection.nodes.length === 1 && selection.nodes[0].type === 'group'
+
+        const canRemoveFromGroup = hasSelection && !!selection.nodes[0].g
+        const offset = $("#red-ui-workspace-chart").offset()
+
+        // addX/addY must be the position in the workspace accounting for both scroll and scale
+        // The +5 is because we display the contextMenu -5,-5 to actual click position
+        let addX = (options.x + 5 - offset.left + $("#red-ui-workspace-chart").scrollLeft()) / RED.view.scale()
+        let addY = (options.y + 5 - offset.top + $("#red-ui-workspace-chart").scrollTop()) / RED.view.scale()
+
+        const menuItems = [
+            { onselect: 'core:show-action-list', onpostselect: function () { } },
+            {
+                label: RED._("contextMenu.insert"),
+                options: [
+                    {
+                        label: RED._("contextMenu.node"),
+                        onselect: function () {
+                            RED.view.showQuickAddDialog({
+                                position: [addX, addY],
+                                touchTrigger: true,
+                                splice: isSingleLink ? selection.links[0] : undefined,
+                                // spliceMultiple: isMultipleLinks
+                            })
+                        },
+                        onpostselect: function() {
+                            // ensure quick add dialog search input has focus
+                            $('#red-ui-type-search-input').trigger('focus')
+                        }
+                    },
+                    (hasLinks) ? { // has least 1 wire selected
+                        label: RED._("contextMenu.junction"),
+                        onselect: 'core:split-wires-with-junctions',
+                        disabled: !hasLinks
+                    } : {
+                        label: RED._("contextMenu.junction"),
+                        onselect: function () {
+                            const nn = {
+                                _def: { defaults: {} },
+                                type: 'junction',
+                                z: RED.workspaces.active(),
+                                id: RED.nodes.id(),
+                                x: addX,
+                                y: addY,
+                                w: 0, h: 0,
+                                outputs: 1,
+                                inputs: 1,
+                                dirty: true
+                            }
+                            const historyEvent = {
+                                dirty: RED.nodes.dirty(),
+                                t: 'add',
+                                junctions: [nn]
+                            }
+                            RED.nodes.addJunction(nn);
+                            RED.history.push(historyEvent);
+                            RED.nodes.dirty(true);
+                            RED.view.select({nodes: [nn] });
+                            RED.view.redraw(true)
+                        }
+                    },
+                    {
+                        label: RED._("contextMenu.linkNodes"),
+                        onselect: 'core:split-wire-with-link-nodes',
+                        disabled: !hasLinks
+                    }
+                ]
+
+
+
+            }
+        ]
+
+        menuItems.push(
+            null,
+            { onselect: 'core:undo', disabled: RED.history.list().length === 0 },
+            { onselect: 'core:redo', disabled: RED.history.listRedo().length === 0 },
+            null,
+            { onselect: 'core:cut-selection-to-internal-clipboard', label: RED._("keyboard.cutNode"), disabled: !hasSelection },
+            { onselect: 'core:copy-selection-to-internal-clipboard', label: RED._("keyboard.copyNode"), disabled: !hasSelection },
+            { onselect: 'core:paste-from-internal-clipboard', label: RED._("keyboard.pasteNode"), disabled: !RED.view.clipboard() },
+            { onselect: 'core:delete-selection', disabled: !canDelete },
+            { onselect: 'core:show-export-dialog', label: RED._("menu.label.export") },
+            { onselect: 'core:select-all-nodes' }
+        )
+
+        if (hasSelection) {
+            menuItems.push(
+                null,
+                isGroup ?
+                    { onselect: 'core:ungroup-selection', disabled: !isGroup }
+                    : { onselect: 'core:group-selection', disabled: !hasSelection }
+            )
+            if (canRemoveFromGroup) {
+                menuItems.push({ onselect: 'core:remove-selection-from-group', label: RED._("menu.label.groupRemoveSelection") })
+            }
+
+        }
+
+        var direction = "right";
+        var MENU_WIDTH = 500; // can not use menu width here
+        if ((options.x -$(document).scrollLeft()) >
+            ($(window).width() -MENU_WIDTH)) {
+            direction = "left";
+        }
+
+        menu = RED.menu.init({
+            direction: direction,
+            onpreselect: function() {
+                disposeMenu()
+            },
+            onpostselect: function () {
+                RED.view.focus()
+            },
+            options: menuItems
+        });
+
+        menu.attr("id", "red-ui-workspace-context-menu");
+        menu.css({
+            position: "absolute"
+        })
+        menu.appendTo("body");
+
+        // TODO: prevent the menu from overflowing the window.
+
+        var top = options.y
+        var left = options.x
+
+        if (top + menu.height() - $(document).scrollTop() > $(window).height()) {
+            top -= (top + menu.height()) - $(window).height() + 22;
+        }
+        if (left + menu.width() - $(document).scrollLeft() > $(window).width()) {
+            left -= (left + menu.width()) - $(window).width() + 18;
+        }
+        menu.css({
+            top: top + "px",
+            left: left + "px"
+        })
+        $(".red-ui-menu.red-ui-menu-dropdown").hide();
+        $(document).on("mousedown.red-ui-workspace-context-menu", function (evt) {
+            if (menu && menu[0].contains(evt.target)) {
+                return
+            }
+            disposeMenu()
+        });
+        menu.show();
+        // set focus to first item so that pressing escape key closes the menu
+        $("#red-ui-workspace-context-menu :first(ul) > a").trigger("focus")
+
+    }
+    // Allow escape key hook and other editor events to close context menu
+    RED.keyboard.add("red-ui-workspace-context-menu", "escape", function () { RED.contextMenu.hide() })
+    RED.events.on("editor:open", function () { RED.contextMenu.hide() });
+    RED.events.on("search:open", function () { RED.contextMenu.hide() });
+    RED.events.on("type-search:open", function () { RED.contextMenu.hide() });
+    RED.events.on("actionList:open", function () { RED.contextMenu.hide() });
+    RED.events.on("view:selection-changed", function () { RED.contextMenu.hide() });
+    return {
+        show: show,
+        hide: disposeMenu
+    }
+})()

packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js

@@ -61,14 +61,18 @@ RED.deploy = (function() {
               '</a>'+
               '<a id="red-ui-header-button-deploy-options" class="red-ui-deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
               '</span></li>').prependTo(".red-ui-header-toolbar");
-              RED.menu.init({id:"red-ui-header-button-deploy-options",
+            const mainMenuItems = [
-                  options: [
                     {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.svg",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
-                      null,
+                    {id:"deploymenu-item-flow",toggle:"deploy-type",icon:"red/images/deploy-flows.svg",label:RED._("deploy.modifiedFlows"),sublabel:RED._("deploy.modifiedFlowsDesc"), onselect:function(s) {if(s){changeDeploymentType("flows")}}},
-                      {id:"deploymenu-item-reload", icon:"red/images/deploy-reload.svg",label:RED._("deploy.restartFlows"),sublabel:RED._("deploy.restartFlowsDesc"),onselect:"core:restart-flows"},
+                    {id:"deploymenu-item-node",toggle:"deploy-type",icon:"red/images/deploy-nodes.svg",label:RED._("deploy.modifiedNodes"),sublabel:RED._("deploy.modifiedNodesDesc"),onselect:function(s) { if(s){changeDeploymentType("nodes")}}},
-
+                    null
             ]
-              });
+            if (RED.settings.runtimeState && RED.settings.runtimeState.ui === true) {
+                mainMenuItems.push({id:"deploymenu-item-runtime-start", icon:"red/images/start.svg",label:RED._("deploy.startFlows"),sublabel:RED._("deploy.startFlowsDesc"),onselect:"core:start-flows", visible:false})
+                mainMenuItems.push({id:"deploymenu-item-runtime-stop", icon:"red/images/stop.svg",label:RED._("deploy.stopFlows"),sublabel:RED._("deploy.stopFlowsDesc"),onselect:"core:stop-flows", visible:false})
+            }
+            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';
@@ -96,6 +100,10 @@ RED.deploy = (function() {
 
         RED.actions.add("core:deploy-flows",save);
         if (type === "default") {
+            if (RED.settings.runtimeState && RED.settings.runtimeState.ui === true) {
+                RED.actions.add("core:stop-flows",function() { stopStartFlows("stop") });
+                RED.actions.add("core:start-flows",function() { stopStartFlows("start") });
+            }
             RED.actions.add("core:restart-flows",restart);
             RED.actions.add("core:set-deploy-type-to-full",function() { RED.menu.setSelected("deploymenu-item-full",true);});
             RED.actions.add("core:set-deploy-type-to-modified-flows",function() { RED.menu.setSelected("deploymenu-item-flow",true); });
@@ -266,18 +274,73 @@ RED.deploy = (function() {
     function sanitize(html) {
         return html.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
     }
-    function restart() {
+
-        var startTime = Date.now();
+    function shadeShow() {
-        $(".red-ui-deploy-button-content").css('opacity',0);
-        $(".red-ui-deploy-button-spinner").show();
-        var deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled");
-        $("#red-ui-header-button-deploy").addClass("disabled");
-        deployInflight = true;
         $("#red-ui-header-shade").show();
         $("#red-ui-editor-shade").show();
         $("#red-ui-palette-shade").show();
         $("#red-ui-sidebar-shade").show();
-
+    }
+    function shadeHide() {
+        $("#red-ui-header-shade").hide();
+        $("#red-ui-editor-shade").hide();
+        $("#red-ui-palette-shade").hide();
+        $("#red-ui-sidebar-shade").hide();
+    }
+    function deployButtonSetBusy(){
+        $(".red-ui-deploy-button-content").css('opacity',0);
+        $(".red-ui-deploy-button-spinner").show();
+        $("#red-ui-header-button-deploy").addClass("disabled");
+    }
+    function deployButtonClearBusy(){
+        $(".red-ui-deploy-button-content").css('opacity',1);
+        $(".red-ui-deploy-button-spinner").hide();
+    }
+    function stopStartFlows(state) {
+        const startTime = Date.now()
+        const deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled")
+        deployInflight = true
+        deployButtonSetBusy()
+        shadeShow()
+        $.ajax({
+            url:"flows/state",
+            type: "POST",
+            data: {state: state}
+        }).done(function(data,textStatus,xhr) {
+            if (deployWasEnabled) {
+                $("#red-ui-header-button-deploy").removeClass("disabled")
+            }
+        }).fail(function(xhr,textStatus,err) {
+            if (deployWasEnabled) {
+                $("#red-ui-header-button-deploy").removeClass("disabled")
+            }
+            if (xhr.status === 401) {
+                RED.notify(RED._("notification.error", { message: RED._("user.notAuthorized") }), "error")
+            } else if (xhr.responseText) {
+                const errorDetail = { message: err ? (err + "") : "" }
+                try {
+                    errorDetail.message = JSON.parse(xhr.responseText).message
+                } finally {
+                    errorDetail.message = errorDetail.message || xhr.responseText
+                }
+                RED.notify(RED._("notification.error", errorDetail), "error")
+            } else {
+                RED.notify(RED._("notification.error", { message: RED._("deploy.errors.noResponse") }), "error")
+            }
+        }).always(function() {
+            const delta = Math.max(0, 300 - (Date.now() - startTime))
+            setTimeout(function () {
+                deployButtonClearBusy()
+                shadeHide()
+                deployInflight = false
+            }, delta);
+        });
+    }
+    function restart() {
+        var startTime = Date.now();
+        var deployWasEnabled = !$("#red-ui-header-button-deploy").hasClass("disabled");
+        deployInflight = true;
+        deployButtonSetBusy();
         $.ajax({
             url:"flows",
             type: "POST",
@@ -303,15 +366,10 @@ RED.deploy = (function() {
                 RED.notify(RED._("deploy.deployFailed",{message:RED._("deploy.errors.noResponse")}),"error");
             }
         }).always(function() {
-            deployInflight = false;
             var delta = Math.max(0,300-(Date.now()-startTime));
             setTimeout(function() {
-                $(".red-ui-deploy-button-content").css('opacity',1);
+                deployButtonClearBusy();
-                $(".red-ui-deploy-button-spinner").hide();
+                deployInflight = false;
-                $("#red-ui-header-shade").hide();
-                $("#red-ui-editor-shade").hide();
-                $("#red-ui-palette-shade").hide();
-                $("#red-ui-sidebar-shade").hide();
             },delta);
         });
     }
@@ -326,10 +384,10 @@ RED.deploy = (function() {
             RED.notify(RED._("user.errors.deploy"), "error");
             return;
         }
+        let hasUnusedConfig = false;
         if (!skipValidation) {
             let hasUnknown = false;
             let hasInvalid = false;
-            let hasUnusedConfig = false;
             const unknownNodes = [];
             const invalidNodes = [];
 
@@ -379,6 +437,14 @@ RED.deploy = (function() {
                     "</p>";
 
                 notificationButtons = [
+                    {
+                        text: RED._("deploy.unknownNodesButton"),
+                        class: "pull-left",
+                        click: function() {
+                            notification.close();
+                            RED.actions.invoke("core:search","type:unknown ");
+                        }
+                    },
                     {
                         id: "red-ui-deploy-dialog-confirm-deploy-deploy",
                         text: RED._("deploy.confirm.button.confirm"),
@@ -398,6 +464,14 @@ RED.deploy = (function() {
                     RED._('deploy.confirm.confirm') +
                     "</p>";
                 notificationButtons = [
+                    {
+                        text: RED._("deploy.invalidNodesButton"),
+                        class: "pull-left",
+                        click: function() {
+                            notification.close();
+                            RED.actions.invoke("core:search","is:invalid ");
+                        }
+                    },
                     {
                         id: "red-ui-deploy-dialog-confirm-deploy-deploy",
                         text: RED._("deploy.confirm.button.confirm"),
@@ -430,21 +504,14 @@ RED.deploy = (function() {
         const nns = RED.nodes.createCompleteNodeSet();
         const startTime = Date.now();
 
-        $(".red-ui-deploy-button-content").css('opacity', 0);
+        deployButtonSetBusy();
-        $(".red-ui-deploy-button-spinner").show();
-        $("#red-ui-header-button-deploy").addClass("disabled");
-
         const data = { flows: nns };
-
         if (!force) {
             data.rev = RED.nodes.version();
         }
 
         deployInflight = true;
-        $("#red-ui-header-shade").show();
+        shadeShow();
-        $("#red-ui-editor-shade").show();
-        $("#red-ui-palette-shade").show();
-        $("#red-ui-sidebar-shade").show();
         $.ajax({
             url: "flows",
             type: "POST",
@@ -458,9 +525,33 @@ RED.deploy = (function() {
             RED.nodes.version(data.rev);
             RED.nodes.originalFlow(nns);
             if (hasUnusedConfig) {
-                RED.notify(
+                let notification;
+                const opts = {
+                    type: "success",
+                    fixed: false,
+                    timeout: 6000,
+                    buttons: [
+                        {
+                            text: RED._("deploy.unusedConfigNodesButton"),
+                            class: "pull-left",
+                            click: function() {
+                                notification.close();
+                                RED.actions.invoke("core:search","is:config is:unused ");
+                            }
+                        },
+                        {
+                            text: RED._("common.label.close"),
+                            class: "primary",
+                            click: function () {
+                                save(true);
+                                notification.close();
+                            }
+                        }
+                    ]
+                }
+                notification = RED.notify(
                     '<p>' + RED._("deploy.successfulDeploy") + '</p>' +
-                    '<p>' + RED._("deploy.unusedConfigNodes") + ' <a href="#" onclick="RED.sidebar.config.show(true); return false;">' + RED._("deploy.unusedConfigNodesLink") + '</a></p>', "success", false, 6000);
+                    '<p>' + RED._("deploy.unusedConfigNodes") + '</p>', opts);
             } else {
                 RED.notify('<p>' + RED._("deploy.successfulDeploy") + '</p>', "success");
             }
@@ -506,15 +597,11 @@ RED.deploy = (function() {
                 RED.notify(RED._("deploy.deployFailed", { message: RED._("deploy.errors.noResponse") }), "error");
             }
         }).always(function () {
-            deployInflight = false;
             const delta = Math.max(0, 300 - (Date.now() - startTime));
             setTimeout(function () {
-                $(".red-ui-deploy-button-content").css('opacity', 1);
+                deployInflight = false;
-                $(".red-ui-deploy-button-spinner").hide();
+                deployButtonClearBusy()
-                $("#red-ui-header-shade").hide();
+                shadeHide()
-                $("#red-ui-editor-shade").hide();
-                $("#red-ui-palette-shade").hide();
-                $("#red-ui-sidebar-shade").hide();
             }, delta);
         });
     }

packages/node_modules/@node-red/editor-client/src/js/ui/diagnostics.js

@@ -0,0 +1,61 @@
+
+RED.diagnostics = (function () {
+
+    function init() {
+        if (RED.settings.get('diagnostics.ui', true) === false) {
+            return;
+        }
+        RED.actions.add("core:show-system-info", function () { show(); });
+    }
+
+    function show() {
+        $.ajax({
+            headers: {
+                "Accept": "application/json"
+            },
+            cache: false,
+            url: 'diagnostics',
+            success: function (data) {
+                var json = JSON.stringify(data || {}, "", 4);
+                if (json === "{}") {
+                    json = "{\n\n}";
+                }
+                RED.editor.editJSON({
+                    title: RED._('diagnostics.title'),
+                    value: json,
+                    requireValid: true,
+                    readOnly: true,
+                    toolbarButtons: [
+                        {
+                            text: RED._('clipboard.export.copy'),
+                            icon: 'fa fa-copy',
+                            click: function () {
+                                RED.clipboard.copyText(json, $(this), RED._('clipboard.copyMessageValue'))
+                            }
+                        },
+                        {
+                            text: RED._('clipboard.download'),
+                            icon: 'fa fa-download',
+                            click: function () {
+                                var element = document.createElement('a');
+                                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json));
+                                element.setAttribute('download', "system-info.json");
+                                element.style.display = 'none';
+                                document.body.appendChild(element);
+                                element.click();
+                                document.body.removeChild(element);
+                            }
+                        },
+                    ]
+                });
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                console.log("Unexpected error loading system info:", jqXHR.status, textStatus, errorThrown);
+            }
+        });
+    }
+
+    return {
+        init: init,
+    };
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -110,7 +110,11 @@ RED.editor = (function() {
         var result = [];
         for (var prop in definition) {
             if (definition.hasOwnProperty(prop)) {
-                if (!validateNodeProperty(node, definition, prop, properties[prop])) {
+                var valid = validateNodeProperty(node, definition, prop, properties[prop]);
+                if ((typeof valid) === "string") {
+                    result.push(valid);
+                }
+                else if(!valid) {
                     result.push(prop);
                 }
             }
@@ -124,7 +128,7 @@ RED.editor = (function() {
      * @param definition - the node property definitions (either def.defaults or def.creds)
      * @param property - the property name being validated
      * @param value - the property value being validated
-     * @returns {boolean} whether the node proprty is valid
+     * @returns {boolean|string} whether the node proprty is valid. `true`: valid `false|String`: invalid
      */
     function validateNodeProperty(node,definition,property,value) {
         var valid = true;
@@ -136,22 +140,74 @@ RED.editor = (function() {
         if (/^\$\{[a-zA-Z_][a-zA-Z0-9_]*\}$/.test(value)) {
             return true;
         }
+        var label = null;
+        if (("label" in definition[property]) &&
+            ((typeof definition[property].label) == "string")) {
+            label = definition[property].label;
+        }
         if ("required" in definition[property] && definition[property].required) {
             valid = value !== "";
+            if (!valid && label) {
+                return RED._("validator.errors.missing-required-prop", {
+                    prop: label
+                });
+            }
         }
         if (valid && "validate" in definition[property]) {
             try {
-                valid = definition[property].validate.call(node,value);
+                var opt = {};
+                if (label) {
+                    opt.label = label;
+                }
+                valid = definition[property].validate.call(node,value, opt);
+                // If the validator takes two arguments, it is a 3.x validator that
+                // can return a String to mean 'invalid' and provide a reason
+                if ((definition[property].validate.length === 2) &&
+                    ((typeof valid) === "string")) {
+                    return valid;
+                } else {
+                    // Otherwise, a 2.x returns a truth-like/false-like value that
+                    // we should cooerce to a boolean.
+                    valid = !!valid
+                }
             } catch(err) {
                 console.log("Validation error:",node.type,node.id,"property: "+property,"value:",value,err);
+                return RED._("validator.errors.validation-error", {
+                    prop: property,
+                    node: node.type,
+                    id: node.id,
+                    error: err.message
+                });
             }
         }
         if (valid && definition[property].type && RED.nodes.getType(definition[property].type) && !("validate" in definition[property])) {
             if (!value || value == "_ADD_") {
                 valid = definition[property].hasOwnProperty("required") && !definition[property].required;
+                if (!valid && label) {
+                    return RED._("validator.errors.missing-required-prop", {
+                        prop: label
+                    });
+                }
             } else {
                 var configNode = RED.nodes.node(value);
-                valid = (configNode && (configNode.valid == null || configNode.valid));
+                if (configNode) {
+                    if ((configNode.valid == null) || configNode.valid) {
+                        return true;
+                    }
+                    if (label) {
+                        return RED._("validator.errors.invalid-config", {
+                            prop: label
+                        });
+                    }
+                }
+                else {
+                    if (label) {
+                        return RED._("validator.errors.missing-config", {
+                            prop: label
+                        });
+                    }
+                }
+                return false;
             }
         }
         return valid;
@@ -179,10 +235,26 @@ RED.editor = (function() {
             if (defaults[property].hasOwnProperty("format") && defaults[property].format !== "" && input[0].nodeName === "DIV") {
                 value = input.text();
             }
-            if (!validateNodeProperty(node, defaults, property,value)) {
+            var valid = validateNodeProperty(node, defaults, property,value);
+            if (((typeof valid) === "string") || !valid) {
                 input.addClass("input-error");
+                if ((typeof valid) === "string") {
+                    var tooltip = input.data("tooltip");
+                    if (tooltip) {
+                        tooltip.setContent(valid);
+                    }
+                    else {
+                        tooltip = RED.popover.tooltip(input, valid);
+                        input.data("tooltip", tooltip);
+                    }
+                }
             } else {
                 input.removeClass("input-error");
+                var tooltip = input.data("tooltip");
+                if (tooltip) {
+                    input.data("tooltip", null);
+                    tooltip.delete();
+                }
             }
         }
     }
@@ -349,20 +421,11 @@ RED.editor = (function() {
      * @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
      */
     function attachPropertyChangeHandler(node,definition,property,prefix) {
-        var input = $("#"+prefix+"-"+property);
+        $("#"+prefix+"-"+property).on("change keyup paste", function(event) {
-        if (definition !== undefined && "format" in definition[property] && definition[property].format !== "" && input[0].nodeName === "DIV") {
-            $("#"+prefix+"-"+property).on('change keyup', function(event) {
             if (!$(this).attr("skipValidation")) {
                 validateNodeEditor(node,prefix);
             }
         });
-        } else {
-            $("#"+prefix+"-"+property).on("change", function(event) {
-                if (!$(this).attr("skipValidation")) {
-                    validateNodeEditor(node,prefix);
-                }
-            });
-        }
     }
 
     /**
@@ -796,6 +859,7 @@ RED.editor = (function() {
         if (buildingEditDialog) { return }
         buildingEditDialog = true;
         var editing_node = node;
+        var removeInfoEditorOnClose = false;
         var skipInfoRefreshOnClose = false;
         var activeEditPanes = [];
 
@@ -991,6 +1055,14 @@ RED.editor = (function() {
                 }
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty('info'))  {
                     nodeEditPanes.push('editor-tab-description');
+                    removeInfoEditorOnClose = true;
+                    if(node.infoEditor) {
+                        //As 'editor-tab-description' adds `node.infoEditor` store original & set a
+                        //flag to NOT remove this property
+                        node.infoEditor__orig = node.infoEditor;
+                        delete node.infoEditor;
+                        removeInfoEditorOnClose = false;
+                    }
                 }
                 nodeEditPanes.push("editor-tab-appearance");
 
@@ -1006,9 +1078,18 @@ RED.editor = (function() {
                 if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
                     RED.view.state(RED.state.DEFAULT);
                 }
-                if (editing_node && !skipInfoRefreshOnClose) {
+                if (editing_node) {
+                    if (editing_node.infoEditor__orig) {
+                        editing_node.infoEditor = editing_node.infoEditor__orig;
+                        delete editing_node.infoEditor__orig;
+                    }
+                    if (removeInfoEditorOnClose) {
+                        delete editing_node.infoEditor;
+                    }
+                    if (!skipInfoRefreshOnClose) {
                         RED.sidebar.info.refresh(editing_node);
                     }
+                }
                 RED.workspaces.refresh();
 
                 activeEditPanes.forEach(function(pane) {
@@ -1024,6 +1105,10 @@ RED.editor = (function() {
                 if (editing_node) {
                     RED.sidebar.info.refresh(editing_node);
                     RED.sidebar.help.show(editing_node.type, false);
+                    //ensure focused element is NOT body (for keyboard scope to operate correctly)
+                    if (document.activeElement.tagName === 'BODY') {
+                        $('#red-ui-editor-stack').trigger('focus')
+                    }
                 }
             }
         }
@@ -1867,6 +1952,48 @@ RED.editor = (function() {
         }
     }
 
+    /** Genrate a consistent but unique ID for saving and restoring the code editors view state */
+    function generateViewStateId(source, thing, suffix) {
+        try {
+            thing = thing || {};
+            const thingOptions = typeof thing.options === "object" ? thing.options : {};
+            let stateId;
+            if (thing.hasOwnProperty("stateId")) {
+                stateId = thing.stateId
+            } else if (thingOptions.hasOwnProperty("stateId")) {
+                stateId = thing.stateId
+            }
+            if (stateId === false) { return false; }
+            if (!stateId) {
+                let id;
+                const selection = RED.view.selection();
+                if (source === "node" && thing.id) {
+                    id = thing.id;
+                } else if (selection.nodes && selection.nodes.length) {
+                    id = selection.nodes[0].id;
+                } else {
+                    return false; //cant obtain Id.
+                }
+                //Use a string builder to build an ID
+                const sb = [id];
+                //get the index of the el - there may be more than one editor.
+                const el = $(thing.element || thingOptions.element);
+                if(el.length) {
+                    sb.push(el.closest(".form-row").index());
+                    sb.push(el.index());
+                }
+                if (source == "typedInput") {
+                    sb.push(el.closest("li").index());//for when embeded in editable list
+                    if (!suffix && thing.propertyType) { suffix = thing.propertyType }
+                }
+                stateId = sb.join("/");
+            }
+            if (stateId && suffix) { stateId += "/" + suffix; }
+            return stateId;
+        } catch (error) {
+            return false;
+        }
+    }
     return {
         init: function() {
             if(window.ace) { window.ace.config.set('basePath', 'vendor/ace'); }
@@ -1883,6 +2010,7 @@ RED.editor = (function() {
             });
             RED.editor.codeEditor.init();
         },
+        generateViewStateId: generateViewStateId,
         edit: showEditDialog,
         editConfig: showEditConfigNodeDialog,
         editFlow: showEditFlowDialog,

packages/node_modules/@node-red/editor-client/src/js/ui/editors/buffer.js

@@ -47,6 +47,7 @@
     var definition = {
         show: function(options) {
             var value = options.value;
+            var onCancel = options.cancel;
             var onComplete = options.complete;
             var type = "_buffer"
             if ($("script[data-template-name='"+type+"']").length === 0) {
@@ -60,12 +61,14 @@
 
             var trayOptions = {
                 title: options.title,
+                focusElement: options.focusElement,
                 width: "inherit",
                 buttons: [
                     {
                         id: "node-dialog-cancel",
                         text: RED._("common.label.cancel"),
                         click: function() {
+                            if (onCancel) { onCancel(); }
                             RED.tray.close();
                         }
                     },
@@ -74,7 +77,8 @@
                         text: RED._("common.label.done"),
                         class: "primary",
                         click: function() {
-                            onComplete(JSON.stringify(bufferBinValue));
+                            bufferStringEditor.saveView();
+                            if (onComplete) { onComplete(JSON.stringify(bufferBinValue),null,bufferStringEditor); }
                             RED.tray.close();
                         }
                     }
@@ -86,19 +90,20 @@
                     }
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.red-ui-tray-body');
                     var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
-
                     bufferStringEditor = RED.editor.createEditor({
                         id: 'red-ui-editor-type-buffer-str',
-                        value: "",
+                        value: value||"",
+                        stateId: RED.editor.generateViewStateId("buffer", options, ""),
+                        focus: true,
                         mode:"ace/mode/text"
                     });
-                    bufferStringEditor.getSession().setValue(value||"",-1);
 
                     bufferBinEditor = RED.editor.createEditor({
                         id: 'red-ui-editor-type-buffer-bin',
                         value: "",
+                        stateId: false,
+                        focus: false,
                         mode:"ace/mode/text",
                         readOnly: true
                     });

packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js

@@ -21,7 +21,7 @@
 
     const MONACO = "monaco";
     const ACE = "ace";
-    const defaultEditor = ACE;
+    const defaultEditor = MONACO;
     const DEFAULT_SETTINGS = { lib: defaultEditor, options: {} };
     var selectedCodeEditor = null;
     var initialised = false;

packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/ace.js

@@ -80,6 +80,9 @@ RED.editor.codeEditor.ace = (function() {
                 }
             },100);
         }
+        if (!options.stateId && options.stateId !== false) {
+            options.stateId = RED.editor.generateViewStateId("ace", options, (options.mode || options.title).split("/").pop());
+        }
         if (options.mode === 'ace/mode/markdown') {
             $(el).addClass("red-ui-editor-text-container-toolbar");
             editor.toolbar = RED.editor.customEditTypes['_markdown'].buildToolbar(toolbarRow,editor);
@@ -92,11 +95,15 @@ RED.editor.codeEditor.ace = (function() {
                     RED.editor.editMarkdown({
                         value: value,
                         width: "Infinity",
-                        cursor: editor.getCursorPosition(),
+                        stateId: options.stateId,
+                        focus: true,
+                        cancel: function () {
+                            editor.focus();
+                        },
                         complete: function(v,cursor) {
                             editor.setValue(v, -1);
-                            editor.gotoLine(cursor.row+1,cursor.column,false);
                             setTimeout(function() {
+                                editor.restoreView();
                                 editor.focus();
                             },300);
                         }
@@ -117,11 +124,56 @@ RED.editor.codeEditor.ace = (function() {
         editor._destroy = editor.destroy;
         editor.destroy = function() {
             try {
+                editor.saveView();
+                editor._initState = null;
                 this._destroy();
             } catch (e) { }
             $(el).remove();
             $(toolbarRow).remove();
         }
+        editor.on("blur", function () {
+            editor.focusMemory = false;
+            editor.saveView();
+        })
+        editor.on("focus", function () {
+            if (editor._initState) {
+                editor.restoreView(editor._initState);
+                editor._initState = null;
+            }
+        })
+        editor.getView = function () {
+            var session = editor.getSession();
+            return {
+                selection: session.selection.toJSON(),
+                scrollTop: session.getScrollTop(),
+                scrollLeft: session.getScrollLeft(),
+                options: session.getOptions()
+            }
+        }
+        editor.saveView = function () {
+            if (!options.stateId) { return; } //only possible if created with a unique stateId
+            window._editorStateAce = window._editorStateAce || {};
+            var state = editor.getView();
+            window._editorStateAce[options.stateId] = state;
+            return state;
+        }
+        editor.restoreView = function (state) {
+            if (!options.stateId) { return; } //only possible if created with a unique stateId
+            window._editorStateAce = window._editorStateAce || {};
+            var _state = state || window._editorStateAce[options.stateId];
+            if (!_state) { return; } //no view state available
+            try {
+                var session = editor.getSession();
+                session.setOptions(_state.options);
+                session.selection.fromJSON(_state.selection);
+                session.setScrollTop(_state.scrollTop);
+                session.setScrollLeft(_state.scrollLeft);
+                editor._initState = _state;
+            } catch (error) {
+                delete window._editorStateMonaco[options.stateId];
+            }
+        };
+        editor.restoreView();
         editor.type = type;
         return editor;
     }

packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editors/monaco.js

@@ -171,7 +171,7 @@ RED.editor.codeEditor.monaco = (function() {
 
         options = options || {};
         window.MonacoEnvironment = window.MonacoEnvironment || {};
-        window.MonacoEnvironment.getWorkerUrl = function (moduleId, label) {
+        window.MonacoEnvironment.getWorkerUrl = window.MonacoEnvironment.getWorkerUrl || function (moduleId, label) {
             if (label === 'json') { return './vendor/monaco/dist/json.worker.js'; }
             if (label === 'css' || label === 'scss') { return './vendor/monaco/dist/css.worker.js'; }
             if (label === 'html' || label === 'handlebars') { return './vendor/monaco/dist/html.worker.js'; }
@@ -747,13 +747,25 @@ RED.editor.codeEditor.monaco = (function() {
                     mode = "html";
                     break;
                 case "appcache":
+                case "sh":
+                case "bash":
                     mode = "shell";
                     break;
+                case "batchfile":
+                    mode = "bat";
+                    break;
+                case "protobuf":
+                    mode = "proto";
+                    break;
                 //TODO: add other compatability types.
             }
             return mode;
         }
 
+        
+        if(!options.stateId && options.stateId !== false) {
+            options.stateId = RED.editor.generateViewStateId("monaco", options, (options.mode || options.title || "").split("/").pop());
+        }
         var el = options.element || $("#"+options.id)[0];
         var toolbarRow = $("<div>").appendTo(el);
         el = $("<div>").appendTo(el).addClass("red-ui-editor-text-container")[0];
@@ -1098,6 +1110,7 @@ RED.editor.codeEditor.monaco = (function() {
             try {
                 var m = this.getModel();
                 if(m && !m.isDisposed()) {
+                    ed._initState = null;
                     m.dispose();
                 }
                 this.setModel(null);
@@ -1151,7 +1164,7 @@ RED.editor.codeEditor.monaco = (function() {
             try {
                 var _model = ed.getModel();
                 if (_model !== null) {
-                    var id = _model.getModeId(); // e.g. javascript
+                    var id = _model._languageId; // e.g. javascript
                     var ra = _model._associatedResource.authority;  //e.g.  model
                     var rp = _model._associatedResource.path;   //e.g.      /18
                     var rs = _model._associatedResource.scheme; //e.g.      inmemory
@@ -1243,14 +1256,7 @@ RED.editor.codeEditor.monaco = (function() {
         //#endregion "ACE compatability"
 
         //final setup
-        if (options.cursor) {
+        ed.focusMemory = options.focus;
-            var row = options.cursor.row || options.cursor.lineNumber;
-            var col = options.cursor.column || options.cursor.col;
-            ed.gotoLine(row, col);
-        }
-        if (options.focus) {
-            ed.focus();
-        }
         ed._mode = editorOptions.language;
 
         //as models are signleton, consts and let are avialable to other javascript instances
@@ -1262,11 +1268,12 @@ RED.editor.codeEditor.monaco = (function() {
         }
 
         ed.onDidBlurEditorWidget(function() {
+            ed.focusMemory = false;
+            ed.saveView();
             if(isVisible(el) == false) {
                 onVisibilityChange(false, 0, el);
             }
         });
-
         ed.onDidFocusEditorWidget(function() {
             onVisibilityChange(true, 10, el);
         });
@@ -1300,14 +1307,30 @@ RED.editor.codeEditor.monaco = (function() {
         }
 
         function onVisibilityChange(visible, delay, element) {
+            delay = delay || 50;
             if (visible) {
+                if (ed.focusMemory) {
+                    setTimeout(function () {
+                        if (element.parentElement) { //ensure el is still in DOM
+                            ed.focus();
+                        }
+                    }, 300)
+                }
+                if (ed._initState) {
+                    setTimeout(function () {
+                        if (element.parentElement) { //ensure el is still in DOM
+                            ed.restoreViewState(ed._initState);
+                            ed._initState = null;
+                        }
+                    }, delay);
+                }
                 if (ed._mode == "javascript" && ed._tempMode == "text") {
                     ed._tempMode = "";
                     setTimeout(function () {
                         if (element.parentElement) { //ensure el is still in DOM
                             ed.setMode('javascript', undefined, false);
                         }
-                    }, delay || 50);
+                    }, delay);
                 }
             } else if (ed._mode == "javascript" && ed._tempMode != "text") {
                 if (element.parentElement) { //ensure el is still in DOM
@@ -1329,15 +1352,19 @@ RED.editor.codeEditor.monaco = (function() {
                 expandButton.on("click", function (e) {
                     e.preventDefault();
                     var value = ed.getValue();
+                    ed.saveView();
                     RED.editor.editMarkdown({
                         value: value,
                         width: "Infinity",
-                        cursor: ed.getCursorPosition(),
+                        stateId: options.stateId,
+                        cancel: function () {
+                            ed.focus();
+                        },
                         complete: function (v, cursor) {
                             ed.setValue(v, -1);
-                            ed.gotoLine(cursor.row + 1, cursor.column, false);
                             setTimeout(function () {
                                 ed.focus();
+                                ed.restoreView();
                             }, 300);
                         }
                     })
@@ -1353,7 +1380,37 @@ RED.editor.codeEditor.monaco = (function() {
                 autoClose: 50
             });
         }
-
+        ed.getView = function () {
+            return ed.saveViewState();
+        }
+        ed.saveView = function (debuginfo) {
+            if (!options.stateId) { return; } //only possible if created with a unique stateId
+            window._editorStateMonaco = window._editorStateMonaco || {};
+            var state = ed.getView();
+            window._editorStateMonaco[options.stateId] = state;
+            return state;
+        }
+        ed.restoreView = function (state) {
+            if (!options.stateId) { return; } //only possible if created with a unique stateId
+            window._editorStateMonaco = window._editorStateMonaco || {};
+            var _state = state || window._editorStateMonaco[options.stateId];
+            if (!_state) { return; } //no view state available
+            try {
+                if (ed.type) { //is editor already initialised?
+                    ed.restoreViewState(_state);
+                } else {
+                    ed._initState = _state;
+                }
+            } catch (error) {
+                delete window._editorStateMonaco[options.stateId];
+            }
+        };
+        ed.restoreView();
+        if (options.cursor && !ed._initState) {
+            var row = options.cursor.row || options.cursor.lineNumber;
+            var col = options.cursor.column || options.cursor.col;
+            ed.gotoLine(row, col);
+        }
         ed.type = type;
         return ed;
     }

packages/node_modules/@node-red/editor-client/src/js/ui/editors/envVarList.js

@@ -41,8 +41,12 @@ RED.editor.envVarList = (function() {
                         style: "width:100%",
                         class: "node-input-env-value",
                         type: "text",
-                    }).attr("autocomplete","disable").appendTo(envRow)
+                    }).attr("autocomplete","disable").appendTo(envRow);
-                    valueField.typedInput({default:'str',types:isTemplateNode?DEFAULT_ENV_TYPE_LIST:DEFAULT_ENV_TYPE_LIST_INC_CRED});
+                    var types = (opt.ui && opt.ui.opts && opt.ui.opts.types);
+                    if (!types) {
+                        types = isTemplateNode ? DEFAULT_ENV_TYPE_LIST : DEFAULT_ENV_TYPE_LIST_INC_CRED;
+                    }
+                    valueField.typedInput({default:'str',types:types});
                     valueField.typedInput('type', opt.type);
                     if (opt.type === "cred") {
                         if (opt.value) {
@@ -94,6 +98,11 @@ RED.editor.envVarList = (function() {
                         }
                         opt.ui.label = opt.ui.label || {};
                         opt.ui.type = opt.ui.type || "input";
+                        if ((opt.ui.type === "cred") &&
+                            opt.ui.opts &&
+                            opt.ui.opts.types) {
+                            opt.ui.type = "input";
+                        }
 
                         var uiRow = $('<div/>').appendTo(container).hide();
                         // save current info for reverting on cancel

packages/node_modules/@node-red/editor-client/src/js/ui/editors/expression.js

@@ -50,6 +50,7 @@
         show: function(options) {
             var expressionTestCacheId = options.parent||"_";
             var value = options.value;
+            var onCancel = options.cancel;
             var onComplete = options.complete;
             var type = "_expression"
             if ($("script[data-template-name='"+type+"']").length === 0) {
@@ -63,12 +64,14 @@
 
             var trayOptions = {
                 title: options.title,
+                focusElement: options.focusElement,
                 width: "inherit",
                 buttons: [
                     {
                         id: "node-dialog-cancel",
                         text: RED._("common.label.cancel"),
                         click: function() {
+                            if(onCancel) { onCancel(); }
                             RED.tray.close();
                         }
                     },
@@ -78,7 +81,8 @@
                         class: "primary",
                         click: function() {
                             $("#red-ui-editor-type-expression-help").text("");
-                            onComplete(expressionEditor.getValue());
+                            expressionEditor.saveView();
+                            if (onComplete) { onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition(),expressionEditor); }
                             RED.tray.close();
                         }
                     }
@@ -110,6 +114,8 @@
                         id: 'red-ui-editor-type-expression',
                         value: "",
                         mode:"ace/mode/jsonata",
+                        stateId: options.stateId,
+                        focus: true,
                         options: {
                             enableBasicAutocompletion:true,
                             enableSnippets:true,
@@ -233,6 +239,8 @@
                     testDataEditor = RED.editor.createEditor({
                         id: 'red-ui-editor-type-expression-test-data',
                         value: expressionTestCache[expressionTestCacheId] || '{\n    "payload": "hello world"\n}',
+                        stateId: false,
+                        focus: false,
                         mode:"ace/mode/json",
                         lineNumbers: false
                     });
@@ -302,6 +310,8 @@
                     testResultEditor = RED.editor.createEditor({
                         id: 'red-ui-editor-type-expression-test-result',
                         value: "",
+                        stateId: false,
+                        focus: false,
                         mode:"ace/mode/json",
                         lineNumbers: false,
                         readOnly: true

packages/node_modules/@node-red/editor-client/src/js/ui/editors/js.js

@@ -21,6 +21,7 @@
     var definition = {
         show: function(options) {
             var value = options.value;
+            var onCancel = options.cancel;
             var onComplete = options.complete;
             var type = "_js"
             if ($("script[data-template-name='"+type+"']").length === 0) {
@@ -28,16 +29,16 @@
             }
             RED.view.state(RED.state.EDITING);
             var expressionEditor;
-            var changeTimer;
-
             var trayOptions = {
                 title: options.title,
+                focusElement: options.focusElement,
                 width: options.width||"inherit",
                 buttons: [
                     {
                         id: "node-dialog-cancel",
                         text: RED._("common.label.cancel"),
                         click: function() {
+                            if (onCancel) { onCancel(); }
                             RED.tray.close();
                         }
                     },
@@ -46,7 +47,8 @@
                         text: RED._("common.label.done"),
                         class: "primary",
                         click: function() {
-                            onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
+                            expressionEditor.saveView();
+                            if (onComplete) { onComplete(expressionEditor.getValue(), expressionEditor.getCursorPosition(), expressionEditor); }
                             RED.tray.close();
                         }
                     }
@@ -62,11 +64,12 @@
                     expressionEditor.resize();
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.red-ui-tray-body');
                     var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
                     expressionEditor = RED.editor.createEditor({
                         id: 'node-input-js',
                         mode: options.mode || 'ace/mode/javascript',
+                        stateId: options.stateId,
+                        focus: true,
                         value: value,
                         globals: {
                             msg:true,
@@ -84,19 +87,16 @@
                         },
                         extraLibs: options.extraLibs
                     });
-                    if (options.cursor) {
+                    if (options.cursor && !expressionEditor._initState) {
                         expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
                     }
                     dialogForm.i18n();
-                    setTimeout(function() {
-                        expressionEditor.focus();
-                    },300);
                 },
                 close: function() {
-                    expressionEditor.destroy();
                     if (options.onclose) {
                         options.onclose();
                     }
+                    expressionEditor.destroy();
                 },
                 show: function() {}
             }

packages/node_modules/@node-red/editor-client/src/js/ui/editors/json.js

@@ -21,7 +21,9 @@
         '<ul id="red-ui-editor-type-json-tabs"></ul>'+
         '<div id="red-ui-editor-type-json-tab-raw" class="red-ui-editor-type-json-tab-content hide">'+
             '<div class="form-row" style="margin-bottom: 3px; text-align: right;">'+
+                '<span class="button-group">'+
                     '<button id="node-input-json-reformat" class="red-ui-button red-ui-button-small"><span data-i18n="jsonEditor.format"></span></button>'+
+                '<span class="button-group">'+
             '</div>'+
             '<div class="form-row node-text-editor-row">'+
                 '<div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-json"></div>'+
@@ -34,7 +36,7 @@
 
     var activeTab;
 
-    function insertNewItem(parent,index,copyIndex) {
+    function insertNewItem(parent,index,copyIndex,readOnly) {
         var newValue = "";
 
         if (parent.children.length > 0) {
@@ -60,26 +62,26 @@
                 newKey = keyRoot+"-"+(keySuffix++);
             }
         }
-        var newItem = handleItem(newKey,newValue,parent.depth+1,parent);
+        var newItem = handleItem(newKey,newValue,parent.depth+1,parent,readOnly);
         parent.treeList.insertChildAt(newItem, index, true);
         parent.treeList.expand();
     }
-    function showObjectMenu(button,item) {
+    function showObjectMenu(button,item,readOnly) {
         var elementPos = button.offset();
         var options = [];
         if (item.parent) {
             options.push({id:"red-ui-editor-type-json-menu-insert-above", icon:"fa fa-toggle-up", label:RED._('jsonEditor.insertAbove'),onselect:function(){
                 var index = item.parent.children.indexOf(item);
-                insertNewItem(item.parent,index,index);
+                insertNewItem(item.parent,index,index,readOnly);
             }});
             options.push({id:"red-ui-editor-type-json-menu-insert-below", icon:"fa fa-toggle-down", label:RED._('jsonEditor.insertBelow'),onselect:function(){
                 var index = item.parent.children.indexOf(item)+1;
-                insertNewItem(item.parent,index,index-1);
+                insertNewItem(item.parent,index,index-1,readOnly);
             }});
         }
         if (item.type === 'array' || item.type === 'object') {
             options.push({id:"red-ui-editor-type-json-menu-add-child", icon:"fa fa-plus", label:RED._('jsonEditor.addItem'),onselect:function(){
-                insertNewItem(item,item.children.length,item.children.length-1);
+                insertNewItem(item,item.children.length,item.children.length-1,readOnly);
             }});
         }
         if (item.parent) {
@@ -121,7 +123,7 @@
                         newKey = keyRoot+"-"+(keySuffix++);
                     }
                 }
-                var newItem = handleItem(newKey,convertToObject(item),item.parent.depth+1,item.parent);
+                var newItem = handleItem(newKey,convertToObject(item),item.parent.depth+1,item.parent,readOnly);
                 var index = item.parent.children.indexOf(item)+1;
 
                 item.parent.treeList.insertChildAt(newItem, index, true);
@@ -171,24 +173,24 @@
         menuOptionMenu.show();
     }
 
-    function parseObject(obj,depth,parent) {
+    function parseObject(obj,depth,parent,readOnly) {
         var result = [];
         for (var prop in obj) {
             if (obj.hasOwnProperty(prop)) {
-                result.push(handleItem(prop,obj[prop],depth,parent));
+                result.push(handleItem(prop,obj[prop],depth,parent,readOnly));
             }
         }
         return result;
     }
-    function parseArray(obj,depth,parent) {
+    function parseArray(obj,depth,parent,readOnly) {
         var result = [];
         var l = obj.length;
         for (var i=0;i<l;i++) {
-            result.push(handleItem(i,obj[i],depth,parent));
+            result.push(handleItem(i,obj[i],depth,parent,readOnly));
         }
         return result;
     }
-    function handleItem(key,val,depth,parent) {
+    function handleItem(key,val,depth,parent,readOnly) {
         var item = {depth:depth, type: typeof val};
         var container = $('<span class="red-ui-editor-type-json-editor-label">');
         if (key != null) {
@@ -204,11 +206,14 @@
             if (parent && parent.type === "array") {
                 keyLabel.addClass("red-ui-editor-type-json-editor-label-array-key")
             }
-
+            if(readOnly) {
+                keyLabel.addClass("readonly")
+            }
             keyLabel.on("click", function(evt) {
                 if (item.parent.type === 'array') {
                     return;
                 }
+                if (readOnly) { return; }
                 evt.preventDefault();
                 evt.stopPropagation();
                 var w = Math.max(150,keyLabel.width());
@@ -253,10 +258,10 @@
             item.expanded = depth < 2;
             item.type = "array";
             item.deferBuild = depth >= 2;
-            item.children = parseArray(val,depth+1,item);
+            item.children = parseArray(val,depth+1,item,readOnly);
         } else if (val !== null && item.type === "object") {
             item.expanded = depth < 2;
-            item.children = parseObject(val,depth+1,item);
+            item.children = parseObject(val,depth+1,item,readOnly);
             item.deferBuild = depth >= 2;
         } else {
             item.value = val;
@@ -287,7 +292,11 @@
         //
         var orphanedChildren;
         var valueLabel = $('<span class="red-ui-editor-type-json-editor-label-value">').addClass(valClass).text(valValue).appendTo(container);
+        if (readOnly) {
+            valueLabel.addClass("readonly")
+        }
         valueLabel.on("click", function(evt) {
+            if (readOnly) { return; }
             evt.preventDefault();
             evt.stopPropagation();
             if (valType === 'str') {
@@ -302,8 +311,8 @@
                 types:[
                     'str','num','bool',
                     {value:"null",label:RED._("common.type.null"),hasValue:false},
-                    {value:"array",label:RED._("common.type.array"),hasValue:false,icon:"red/images/typedInput/json.png"},
+                    {value:"array",label:RED._("common.type.array"),hasValue:false,icon:"red/images/typedInput/json.svg"},
-                    {value:"object",label:RED._("common.type.object"),hasValue:false,icon:"red/images/typedInput/json.png"}
+                    {value:"object",label:RED._("common.type.object"),hasValue:false,icon:"red/images/typedInput/json.svg"}
                 ],
                 default: valType
             });
@@ -395,8 +404,8 @@
             valueLabel.hide();
         })
         item.gutter = $('<span class="red-ui-editor-type-json-editor-item-gutter"></span>');
-
+        if(!readOnly) {
-        if (parent) {//red-ui-editor-type-json-editor-item-handle
+            if (parent) {
                 $('<span class="red-ui-editor-type-json-editor-item-handle"><i class="fa fa-bars"></span>').appendTo(item.gutter);
             } else {
                 $('<span></span>').appendTo(item.gutter);
@@ -404,8 +413,10 @@
             $('<button type="button" class="editor-button editor-button-small"><i class="fa fa-caret-down"></button>').appendTo(item.gutter).on("click", function(evt) {
                 evt.preventDefault();
                 evt.stopPropagation();
-            showObjectMenu($(this), item);
+                showObjectMenu($(this), item, readOnly);
             });
+        }
+
         item.element = container;
         return item;
     }
@@ -434,6 +445,7 @@
     var definition = {
         show: function(options) {
             var value = options.value;
+            var onCancel = options.cancel;
             var onComplete = options.complete;
             var type = "_json"
             if ($("script[data-template-name='"+type+"']").length === 0) {
@@ -455,15 +467,16 @@
                 }
             }
             var rootNode;
-
             var trayOptions = {
                 title: options.title,
+                focusElement: options.focusElement,
                 width: options.width||700,
                 buttons: [
                     {
                         id: "node-dialog-cancel",
                         text: RED._("common.label.cancel"),
                         click: function() {
+                            if (onCancel) { onCancel(); }
                             RED.tray.close();
                         }
                     },
@@ -485,7 +498,8 @@
                             } else if (activeTab === "json-raw") {
                                 result = expressionEditor.getValue();
                             }
-                            if (onComplete) { onComplete(result) }
+                            expressionEditor.saveView();
+                            if (onComplete) { onComplete(result,null,expressionEditor) }
                             RED.tray.close();
                         }
                     }
@@ -498,10 +512,29 @@
                 open: function(tray) {
                     var trayBody = tray.find('.red-ui-tray-body');
                     var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
-
+                    var toolbarButtons = options.toolbarButtons || [];
+                    if (toolbarButtons.length) {
+                        toolbarButtons.forEach(function (button) {
+                            var element = $('<button type="button" class="red-ui-button red-ui-button-small"> </button>')
+                                .insertBefore("#node-input-json-reformat")
+                                .on("click", function (evt) {
+                                    evt.preventDefault();
+                                    if (button.click !== undefined) {
+                                        button.click.call(element, evt);
+                                    }
+                                });
+                            if (button.id) { element.attr("id", button.id); }
+                            if (button.title) { element.attr("title", button.title); }
+                            if (button.icon) { element.append($("<i></i>").attr("class", button.icon)); }
+                            if (button.label || button.text) {
+                                element.append($("<span></span>").text(" " + (button.label || button.text)));
+                            }
+                        });
+                    }
                     var container = $("#red-ui-editor-type-json-tab-ui-container").css({"height":"100%"});
                     var filterDepth = Infinity;
                     var list = $('<div class="red-ui-debug-msg-payload red-ui-editor-type-json-editor">').appendTo(container).treeList({
+                        selectable: false,
                         rootSortable: false,
                         sortable: ".red-ui-editor-type-json-editor-item-handle",
                     }).on("treelistchangeparent", function(event, evt) {
@@ -528,13 +561,15 @@
                         })
                     });
 
-
                     expressionEditor = RED.editor.createEditor({
                         id: 'node-input-json',
-                        value: "",
+                        value: value||"",
-                        mode:"ace/mode/json"
+                        mode:"ace/mode/json",
+                        readOnly: !!options.readOnly,
+                        stateId: options.stateId,
+                        focus: true
                     });
-                    expressionEditor.getSession().setValue(value||"",-1);
+
                     if (options.requireValid) {
                         expressionEditor.getSession().on('change', function() {
                             clearTimeout(changeTimer);
@@ -571,7 +606,7 @@
                                     var raw = expressionEditor.getValue().trim() ||"{}";
                                     try {
                                         var parsed = JSON.parse(raw);
-                                        rootNode = handleItem(null,parsed,0,null);
+                                        rootNode = handleItem(null,parsed,0,null,options.readOnly);
                                         rootNode.class = "red-ui-editor-type-json-root-node"
                                         list.treeList('data',[rootNode]);
                                     } catch(err) {
@@ -589,17 +624,15 @@
 
                     tabs.addTab({
                         id: 'json-raw',
-                        label: RED._('jsonEditor.rawMode'),
+                        label: options.readOnly ? RED._('jsonEditor.rawMode-readonly') : RED._('jsonEditor.rawMode'),
                         content: $("#red-ui-editor-type-json-tab-raw")
                     });
                     tabs.addTab({
                         id: 'json-ui',
-                        label: RED._('jsonEditor.uiMode'),
+                        label: options.readOnly ? RED._('jsonEditor.uiMode-readonly') : RED._('jsonEditor.uiMode'),
                         content: $("#red-ui-editor-type-json-tab-ui")
                     });
                     finishedBuild = true;
-
-
                 },
                 close: function() {
                     if (options.onclose) {

packages/node_modules/@node-red/editor-client/src/js/ui/editors/markdown.js

@@ -54,24 +54,26 @@
     var definition = {
         show: function(options) {
             var value = options.value;
+            var onCancel = options.cancel;
             var onComplete = options.complete;
             var type = "_markdown"
             if ($("script[data-template-name='"+type+"']").length === 0) {
                 $(template).appendTo("#red-ui-editor-node-configs");
             }
 
-
             RED.view.state(RED.state.EDITING);
             var expressionEditor;
 
             var trayOptions = {
                 title: options.title,
+                focusElement: options.focusElement,
                 width: options.width||Infinity,
                 buttons: [
                     {
                         id: "node-dialog-cancel",
                         text: RED._("common.label.cancel"),
                         click: function() {
+                            if (onCancel) { onCancel(); }
                             RED.tray.close();
                         }
                     },
@@ -80,7 +82,8 @@
                         text: RED._("common.label.done"),
                         class: "primary",
                         click: function() {
-                            onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
+                            expressionEditor.saveView();
+                            if (onComplete) { onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition(), expressionEditor); }
                             RED.tray.close();
                         }
                     }
@@ -99,6 +102,8 @@
                     expressionEditor = RED.editor.createEditor({
                         id: 'red-ui-editor-type-markdown',
                         value: value,
+                        stateId: options.stateId,
+                        focus: true,
                         mode:"ace/mode/markdown",
                         expandable: false
                     });
@@ -143,17 +148,17 @@
                     });
                     RED.popover.tooltip($("#node-btn-markdown-preview"), RED._("markdownEditor.toggle-preview"));
 
-                    if (options.cursor) {
+                    if (options.cursor && !expressionEditor._initState) {
                         expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
                     }
 
                     dialogForm.i18n();
                 },
                 close: function() {
-                    expressionEditor.destroy();
                     if (options.onclose) {
                         options.onclose();
                     }
+                    expressionEditor.destroy();
                 },
                 show: function() {}
             }

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js

@@ -37,8 +37,7 @@
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty("icon")) {
                     var icon = $("#red-ui-editor-node-icon").val()||"";
                     if (!this.isDefaultIcon) {
-                        if ((icon !== node.icon) &&
+                        if ((node.icon && icon !== node.icon) || (!node.icon && icon !== "")) {
-                            (icon !== "")) {
                             editState.changes.icon = node.icon;
                             node.icon = icon;
                             editState.changed = true;

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/description.js

@@ -8,7 +8,6 @@
 
             create: function(container) {
                 this.editor = buildDescriptionForm(container,node);
-                RED.e = this.editor;
             },
             resize: function(size) {
                 this.editor.resize();
@@ -58,11 +57,9 @@
         var nodeInfoEditor = RED.editor.createEditor({
             id: editorId,
             mode: 'ace/mode/markdown',
-            value: ""
+            stateId: RED.editor.generateViewStateId("node", node, "nodeinfo"),
+            value: node.info || ""
         });
-        if (node.info) {
-            nodeInfoEditor.getSession().setValue(node.info, -1);
-        }
         node.infoEditor = nodeInfoEditor;
         return nodeInfoEditor;
     }

packages/node_modules/@node-red/editor-client/src/js/ui/editors/text.js

@@ -21,6 +21,7 @@
     var definition = {
         show: function(options) {
             var value = options.value;
+            var onCancel = options.cancel;
             var onComplete = options.complete;
             var type = "_text"
             if ($("script[data-template-name='"+type+"']").length === 0) {
@@ -28,16 +29,16 @@
             }
             RED.view.state(RED.state.EDITING);
             var expressionEditor;
-            var changeTimer;
-
             var trayOptions = {
                 title: options.title,
+                focusElement: options.focusElement,
                 width: options.width||"inherit",
                 buttons: [
                     {
                         id: "node-dialog-cancel",
                         text: RED._("common.label.cancel"),
                         click: function() {
+                            if(onCancel) { onCancel(); }
                             RED.tray.close();
                         }
                     },
@@ -46,7 +47,8 @@
                         text: RED._("common.label.done"),
                         class: "primary",
                         click: function() {
-                            onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
+                            expressionEditor.saveView();
+                            if (onComplete) { onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition(),expressionEditor);}
                             RED.tray.close();
                         }
                     }
@@ -55,31 +57,27 @@
                     var rows = $("#dialog-form>div:not(.node-text-editor-row)");
                     var editorRow = $("#dialog-form>div.node-text-editor-row");
                     var height = $("#dialog-form").height();
-                    // for (var i=0;i<rows.size();i++) {
-                    //     height -= $(rows[i]).outerHeight(true);
-                    // }
-                    // height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
                     $(".node-text-editor").css("height",height+"px");
                     expressionEditor.resize();
                 },
                 open: function(tray) {
-                    var trayBody = tray.find('.red-ui-tray-body');
                     var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
                     expressionEditor = RED.editor.createEditor({
                         id: 'node-input-text',
-                        value: "",
+                        value: value||"",
-                        mode:"ace/mode/"+(options.mode||"text")
+                        stateId: options.stateId,
+                        mode:"ace/mode/"+(options.mode||"text"),
+                        focus: true,
                     });
-                    expressionEditor.getSession().setValue(value||"",-1);
+                    if (options.cursor && !expressionEditor._initState) {
-                    if (options.cursor) {
                         expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
                     }
                 },
                 close: function() {
-                    expressionEditor.destroy();
                     if (options.onclose) {
                         options.onclose();
                     }
+                    expressionEditor.destroy();
                 },
                 show: function() {}
             }

packages/node_modules/@node-red/editor-client/src/js/ui/group.js

@@ -308,6 +308,7 @@ RED.group = (function() {
                 RED.history.push(historyEvent);
                 RED.view.select({nodes:[group]});
                 RED.nodes.dirty(true);
+                RED.view.focus();
             }
         }
     }
@@ -323,9 +324,6 @@ RED.group = (function() {
                 groups: [ ],
                 dirty: RED.nodes.dirty()
             }
-            RED.history.push(historyEvent);
-
-
             groups.forEach(function(g) {
                 newSelection = newSelection.concat(ungroup(g))
                 historyEvent.groups.push(g);
@@ -333,6 +331,7 @@ RED.group = (function() {
             RED.history.push(historyEvent);
             RED.view.select({nodes:newSelection})
             RED.nodes.dirty(true);
+            RED.view.focus();
         }
     }
 
@@ -352,8 +351,10 @@ RED.group = (function() {
             }
             if (n.type === 'group') {
                 RED.events.emit("groups:change",n)
-            } else {
+            } else if (n.type !== 'junction') {
                 RED.events.emit("nodes:change",n)
+            } else {
+                RED.events.emit("junctions:change",n)
             }
         })
         RED.nodes.removeGroup(g);
@@ -425,6 +426,7 @@ RED.group = (function() {
             });
             RED.history.push(historyEvent);
             RED.nodes.dirty(true);
+            RED.view.focus();
         }
     }
 
@@ -452,6 +454,7 @@ RED.group = (function() {
                 }
             }
             RED.view.select({nodes:selection.nodes})
+            RED.view.focus();
         }
     }
     function createGroup(nodes) {
@@ -547,8 +550,10 @@ RED.group = (function() {
                 group.h = Math.max(group.h,n.y+n.h/2+25-group.y);
                 if (n.type === 'group') {
                     RED.events.emit("groups:change",n)
-                } else {
+                } else if (n.type !== 'junction') {
                     RED.events.emit("nodes:change",n)
+                } else {
+                    RED.events.emit("junctions:change",n)
                 }
             }
         }
@@ -583,8 +588,10 @@ RED.group = (function() {
             }
             if (n.type === 'group') {
                 RED.events.emit("groups:change",n)
-            } else {
+            } else if (n.type !== 'junction') {
                 RED.events.emit("nodes:change",n)
+            } else {
+                RED.events.emit("junctions:change",n)
             }
         }
         markDirty(group);

packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js

@@ -265,13 +265,18 @@ RED.keyboard = (function() {
                 if (partialState) {
                     partialState = null;
                     return resolveKeyEvent(evt);
-                } else if (Object.keys(handler).length > 0) {
+                }
+                if (Object.keys(handler).length > 0) {
+                    // check if there's a potential combined handler initiated by this keyCode 
+                    for (let h in handler) {
+                        if (matchHandlerToEvent(evt,handler[h]) > -1) {
                             partialState = handler;
                             evt.preventDefault();
-                    return null;
+                            break;
-                } else {
-                    return null;
                         }
+                    }
+                }
+                return null;
             } else {
                 var depth = Infinity;
                 var matchedHandler;

packages/node_modules/@node-red/editor-client/src/js/ui/library.js

@@ -363,14 +363,22 @@ RED.library = (function() {
                     options.onconfirm(item);
                 }
             });
-        var itemTools = $("<div>").css({position: "absolute",bottom:"6px",right:"8px"});
+        var itemTools = null;
+        if (options.folderTools) {
+            dirList.on('treelistselect', function(event, item) {
+                if (item.writable !== false && item.treeList) {
+                    if (itemTools) {
+                        itemTools.remove();
+                    }
+                    itemTools = $("<div>").css({position: "absolute",bottom:"6px",right:"8px"});
                     var menuButton = $('<button class="red-ui-button red-ui-button-small" type="button"><i class="fa fa-ellipsis-h"></i></button>')
                         .on("click", function(evt) {
                             evt.preventDefault();
                             evt.stopPropagation();
                             var elementPos = menuButton.offset();
 
-                var menuOptionMenu = RED.menu.init({id:"red-ui-library-browser-menu",
+                            var menuOptionMenu
+                                = RED.menu.init({id:"red-ui-library-browser-menu",
                                       options: [
                                           {id:"red-ui-library-browser-menu-addFolder",label:RED._("library.newFolder"), onselect: function() {
                                               var defaultFolderName = "new-folder";
@@ -460,9 +468,7 @@ RED.library = (function() {
                             }).show();
 
                         }).appendTo(itemTools);
-        if (options.folderTools) {
+                    
-            dirList.on('treelistselect', function(event, item) {
-                if (item.writable !== false && item.treeList) {
                     itemTools.appendTo(item.treeList.label);
                 }
             });

packages/node_modules/@node-red/editor-client/src/js/ui/palette.js

@@ -217,7 +217,7 @@ RED.palette = (function() {
     }
 
     function escapeCategory(category) {
-        return category.replace(/[ /.]/g,"_");
+        return category.replace(/[\x00-\x2c\x2e-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]/g,"_");
     }
     function addNodeType(nt,def) {
         if (getPaletteNode(nt).length) {
@@ -233,14 +233,7 @@ RED.palette = (function() {
 
             var d = $('<div>',{class:"red-ui-palette-node"}).attr("data-palette-type",nt).data('category',rootCategory);
 
-            var label = nt;///^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
+            var label = RED.utils.getPaletteLabel(nt, def);///^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
-            if (typeof def.paletteLabel !== "undefined") {
-                try {
-                    label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||"";
-                } catch(err) {
-                    console.log("Definition error: "+nt+".paletteLabel",err);
-                }
-            }
 
             $('<div/>', {
                 class: "red-ui-palette-label"+(((!def.align && def.inputs !== 0 && def.outputs === 0) || "right" === def.align) ? " red-ui-palette-label-right" : "")

packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js

@@ -120,6 +120,7 @@ RED.projects.settings = (function() {
             title: RED._('sidebar.project.editDescription'),
             header: $('<span><i class="fa fa-book"></i> README.md</span>'),
             value: activeProject.description,
+            stateId: "sidebar.project.editDescription",
             complete: function(v) {
                 container.empty();
                 var spinner = utils.addSpinnerOverlay(container);

packages/node_modules/@node-red/editor-client/src/js/ui/search.js

@@ -25,6 +25,8 @@ RED.search = (function() {
     var searchHistory = [];
     var index = {};
     var currentResults = [];
+    var activeResults = [];
+    var currentIndex = 0;
     var previousActiveElement;
 
     function indexProperty(node,label,property) {
@@ -106,7 +108,6 @@ RED.search = (function() {
 
     function search(val) {
         var results = [];
-        var keys = [];
         var typeFilter;
         var m = /(?:^| )type:([^ ]+)/.exec(val);
         if (m) {
@@ -119,19 +120,25 @@ RED.search = (function() {
         val = extractFlag(val,"config",flags);
         val = extractFlag(val,"subflow",flags);
         val = extractFlag(val,"hidden",flags);
-        // uses:<node-id>
+        val = extractFlag(val,"modified",flags);
-        val = extractValue(val,"uses",flags);
+        val = extractValue(val,"flow",flags);// flow:active or flow:<flow-id>
-
+        val = extractValue(val,"uses",flags);// uses:<node-id>
-        var hasFlags = Object.keys(flags).length > 0;
-
         val = val.trim();
-
+        var hasFlags = Object.keys(flags).length > 0;
+        if (flags.flow && flags.flow.indexOf("current") >= 0) {
+            let idx = flags.flow.indexOf("current");
+            flags.flow[idx] = RED.workspaces.active();//convert active to flow ID
+        }
+        if (flags.flow && flags.flow.length) {
+            flags.flow = [ ...new Set(flags.flow) ]; //deduplicate
+        }
         if (val.length > 0 || typeFilter || hasFlags) {
             val = val.toLowerCase();
             var i;
             var j;
             var list = [];
             var nodes = {};
+            let keys = [];
             if (flags.uses) {
                 keys = flags.uses;
             } else {
@@ -141,7 +148,7 @@ RED.search = (function() {
                 var key = keys[i];
                 var kpos = keys[i].indexOf(val);
                 if (kpos > -1) {
-                    var ids = Object.keys(index[key]);
+                    var ids = Object.keys(index[key]||{});
                     for (j=0;j<ids.length;j++) {
                         var node = index[key][ids[j]];
                         var isConfigNode = node.node._def.category === "config" && node.node.type !== 'group';
@@ -164,6 +171,11 @@ RED.search = (function() {
                                 continue;
                             }
                         }
+                        if (flags.hasOwnProperty("modified")) {
+                            if (!node.node.changed && !node.node.moved) {
+                                continue;
+                            }
+                        }
                         if (flags.hasOwnProperty("hidden")) {
                             // Only tabs can be hidden
                             if (node.node.type !== 'tab') {
@@ -175,11 +187,16 @@ RED.search = (function() {
                         }
                         if (flags.hasOwnProperty("unused")) {
                             var isUnused = (node.node.type === 'subflow' && node.node.instances.length === 0) ||
-                                           (isConfigNode && node.node.users.length === 0)
+                                           (isConfigNode && node.node.users.length === 0 && node.node._def.hasUsers !== false)
                             if (flags.unused !== isUnused) {
                                 continue;
                             }
                         }
+                        if (flags.hasOwnProperty("flow")) {
+                            if (flags.flow.indexOf(node.node.z || node.node.id) < 0) {
+                                continue;
+                            }
+                        }
                         if (!typeFilter || node.node.type === typeFilter) {
                             nodes[node.node.id] = nodes[node.node.id] = {
                                 node: node.node,
@@ -247,7 +264,7 @@ RED.search = (function() {
                 }
                 currentResults = search(value);
                 if (currentResults.length > 0) {
-                    for (i=0;i<Math.min(currentResults.length,25);i++) {
+                    for (let i=0;i<Math.min(currentResults.length,25);i++) {
                         searchResults.editableList('addItem',currentResults[i])
                     }
                     if (currentResults.length > 25) {
@@ -261,9 +278,8 @@ RED.search = (function() {
                 } else {
                     searchResults.editableList('addItem',{});
                 }
-
+            },
-
+            options: getSearchOptions()
-            }
         });
         var copySearchContainer = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-caret-right"></button>').appendTo(searchDiv).on('click', function(evt) {
             evt.preventDefault();
@@ -324,7 +340,8 @@ RED.search = (function() {
                         }
                     } else if (!$(children[selected]).hasClass("red-ui-search-historyHeader")) {
                         if (currentResults.length > 0) {
-                            reveal(currentResults[Math.max(0,selected)].node);
+                            currentIndex = Math.max(0,selected);
+                            reveal(currentResults[currentIndex].node);
                         }
                     }
                 }
@@ -408,6 +425,7 @@ RED.search = (function() {
 
                     div.on("click", function(evt) {
                         evt.preventDefault();
+                        currentIndex = i;
                         reveal(node);
                     });
                 }
@@ -423,13 +441,59 @@ RED.search = (function() {
         if (existingIndex > -1) {
             searchHistory.splice(existingIndex,1);
         }
-        searchHistory.unshift(searchInput.val());
+        searchHistory.unshift(searchVal);
-        hide();
+        $("#red-ui-view-searchtools-search").data("term", searchVal);
+        activeResults = Object.assign([], currentResults);
+        hide(null, activeResults.length > 0);
         RED.view.reveal(node.id);
     }
 
+    function revealPrev() {
+        if (disabled) {
+            updateSearchToolbar();
+            return;
+        }
+        if (!searchResults || !activeResults.length) {
+            show();
+            return;
+        }
+        if (currentIndex > 0) {
+            currentIndex--;
+        } else {
+            currentIndex = activeResults.length - 1;
+        }
+        const n = activeResults[currentIndex];
+        if (n && n.node && n.node.id) {
+            RED.view.reveal(n.node.id);
+            $("#red-ui-view-searchtools-prev").trigger("focus");
+        }
+        updateSearchToolbar();
+    }
+    function revealNext() {
+        if (disabled) {
+            updateSearchToolbar();
+            return;
+        }
+        if (!searchResults || !activeResults.length) {
+            show();
+            return;
+        }
+        if (currentIndex < activeResults.length - 1) {
+            currentIndex++
+        } else {
+            currentIndex = 0;
+        }
+        const n = activeResults[currentIndex];
+        if (n && n.node && n.node.id) {
+            RED.view.reveal(n.node.id);
+            $("#red-ui-view-searchtools-next").trigger("focus");
+        }
+        updateSearchToolbar();
+    }
+
     function show(v) {
         if (disabled) {
+            updateSearchToolbar();
             return;
         }
         if (!visible) {
@@ -456,7 +520,7 @@ RED.search = (function() {
         searchInput.trigger("focus");
     }
 
-    function hide() {
+    function hide(el, keepSearchToolbar) {
         if (visible) {
             visible = false;
             $("#red-ui-header-shade").hide();
@@ -470,13 +534,37 @@ RED.search = (function() {
                 });
             }
             RED.events.emit("search:close");
-            if (previousActiveElement) {
+            if (previousActiveElement && (!keepSearchToolbar || !activeResults.length)) {
                 $(previousActiveElement).trigger("focus");
+            }
             previousActiveElement = null;
         }
+        if(!keepSearchToolbar) {
+            clearActiveSearch();
+        }
+        updateSearchToolbar();
+        if(keepSearchToolbar && activeResults.length) {
+            $("#red-ui-view-searchtools-next").trigger("focus");
+        }
+    }
+    function updateSearchToolbar() {
+        if (!disabled && currentIndex >= 0 && activeResults && activeResults.length) {
+            let term = $("#red-ui-view-searchtools-search").data("term") || "";
+            if (term.length > 16) {
+                term = term.substring(0, 12) + "..."
+            }
+            const i18nSearchCounterData = {
+                term: term,
+                result: (currentIndex + 1),
+                count: activeResults.length
+            }
+            $("#red-ui-view-searchtools-counter").text(RED._('actions.search-counter', i18nSearchCounterData));
+            $("#view-search-tools > :not(:first-child)").show(); //show other tools
+        } else {
+            clearActiveSearch();
+            $("#view-search-tools > :not(:first-child)").hide(); //hide all but search button
         }
     }
-
     function clearIndex() {
         index = {};
     }
@@ -498,9 +586,29 @@ RED.search = (function() {
         addItemToIndex(item);
     }
 
+    function clearActiveSearch() {
+        activeResults = [];
+        currentIndex = 0;
+        $("#red-ui-view-searchtools-search").data("term", "");
+    }
+
+    function getSearchOptions() {
+        return [
+            {label:RED._("search.options.configNodes"), value:"is:config"},
+            {label:RED._("search.options.unusedConfigNodes"), value:"is:config is:unused"},
+            {label:RED._("search.options.modifiedNodes"), value:"is:modified"},
+            {label:RED._("search.options.invalidNodes"), value: "is:invalid"},
+            {label:RED._("search.options.uknownNodes"), value: "type:unknown"},
+            {label:RED._("search.options.unusedSubflows"), value:"is:subflow is:unused"},
+            {label:RED._("search.options.hiddenFlows"), value:"is:hidden"},
+            {label:RED._("search.options.thisFlow"), value:"flow:current"},
+        ]
+    }
 
     function init() {
         RED.actions.add("core:search",show);
+        RED.actions.add("core:search-previous",revealPrev);
+        RED.actions.add("core:search-next",revealNext);
 
         RED.events.on("editor:open",function() { disabled = true; });
         RED.events.on("editor:close",function() { disabled = false; });
@@ -511,11 +619,21 @@ RED.search = (function() {
 
         RED.keyboard.add("red-ui-search","escape",hide);
 
+        RED.keyboard.add("view-search-tools","escape",function() {
+            clearActiveSearch();
+            updateSearchToolbar();
+        });
+
         $("#red-ui-header-shade").on('mousedown',hide);
         $("#red-ui-editor-shade").on('mousedown',hide);
         $("#red-ui-palette-shade").on('mousedown',hide);
         $("#red-ui-sidebar-shade").on('mousedown',hide);
 
+        $("#red-ui-view-searchtools-close").on("click", function close() {
+            clearActiveSearch();
+            updateSearchToolbar();
+        });
+        $("#red-ui-view-searchtools-close").trigger("click");
 
         RED.events.on("workspace:clear", clearIndex);
 
@@ -541,7 +659,8 @@ RED.search = (function() {
         init: init,
         show: show,
         hide: hide,
-        search: search
+        search: search,
+        getSearchOptions: getSearchOptions
     };
 
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/state.js

@@ -29,5 +29,6 @@ RED.state = {
     GROUP_DRAGGING: 12,
     GROUP_RESIZE: 13,
     DETACHED_DRAGGING: 14,
-    SLICING: 15
+    SLICING: 15,
+    SLICING_JUNCTION: 16
 }

packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js

@@ -31,6 +31,7 @@ RED.statusBar = (function() {
     function addWidget(options) {
         widgets[options.id] = options;
         var el = $('<span class="red-ui-statusbar-widget"></span>');
+        el.prop('id', options.id);
         options.element.appendTo(el);
         if (options.align === 'left') {
             leftBucket.append(el);

packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js

@@ -604,6 +604,14 @@ RED.subflow = (function() {
         return x;
     }
 
+    function nodeOrJunction(id) {
+        var node = RED.nodes.node(id);
+        if (node) {
+            return node;
+        }
+        return RED.nodes.junction(id);
+    }
+
     function convertToSubflow() {
         var selection = RED.view.selection();
         if (!selection.nodes) {
@@ -792,14 +800,15 @@ RED.subflow = (function() {
 
         subflow.in.forEach(function(input) {
             input.wires.forEach(function(wire) {
-                var link = {source: input, sourcePort: 0, target: RED.nodes.node(wire.id) }
+                var link = {source: input, sourcePort: 0, target: nodeOrJunction(wire.id) }
                 new_links.push(link);
                 RED.nodes.addLink(link);
             });
         });
+
         subflow.out.forEach(function(output,i) {
             output.wires.forEach(function(wire) {
-                var link = {source: RED.nodes.node(wire.id), sourcePort: wire.port , target: output }
+                var link = {source: nodeOrJunction(wire.id), sourcePort: wire.port , target: output }
                 new_links.push(link);
                 RED.nodes.addLink(link);
             });
@@ -815,7 +824,7 @@ RED.subflow = (function() {
                 n.links = n.links.filter(function(id) {
                     var isLocalLink = nodes.hasOwnProperty(id);
                     if (!isLocalLink) {
-                        var otherNode = RED.nodes.node(id);
+                        var otherNode = nodeOrJunction(id);
                         if (otherNode && otherNode.links) {
                             var i = otherNode.links.indexOf(n.id);
                             if (i > -1) {
@@ -831,7 +840,6 @@ RED.subflow = (function() {
             RED.nodes.moveNodeToTab(n, subflow.id);
         }
 
-
         var historyEvent = {
             t:'createSubflow',
             nodes:[subflowInstance.id],
@@ -869,6 +877,7 @@ RED.subflow = (function() {
         RED.nodes.dirty(true);
         RED.view.updateActive();
         RED.view.select(null);
+        RED.view.focus();
     }
 
 
@@ -923,6 +932,7 @@ RED.subflow = (function() {
 
 
     function buildEnvUIRow(row, tenv, ui, node) {
+        console.log(tenv, ui)
         ui.label = ui.label||{};
         if ((tenv.type === "cred" || (tenv.parent && tenv.parent.type === "cred")) && !ui.type) {
             ui.type = "cred";
@@ -983,6 +993,17 @@ RED.subflow = (function() {
                         default: inputType
                     })
                     input.typedInput('value',val.value)
+                    if (inputType === 'cred') {
+                        if (node.credentials) {
+                            if (node.credentials[tenv.name]) {
+                                input.typedInput('value', node.credentials[tenv.name]);
+                            } else if (node.credentials['has_'+tenv.name]) {
+                                input.typedInput('value', "__PWRD__")
+                            } else {
+                                input.typedInput('value', "");
+                            }
+                        }
+                    }
                 } else {
                     input.val(val.value)
                 }

packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js

@@ -15,6 +15,8 @@
  **/
 RED.sidebar.config = (function() {
 
+    let flashingConfigNode;
+    let flashingConfigNodeTimer;
 
     var content = document.createElement("div");
     content.className = "red-ui-sidebar-node-config";
@@ -145,6 +147,7 @@ RED.sidebar.config = (function() {
                 var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
                 var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
                 entry.data('node',node.id);
+                nodeDiv.data('node',node.id);
                 var label = $('<div class="red-ui-palette-label"></div>').text(label).appendTo(nodeDiv);
                 if (node.d) {
                     nodeDiv.addClass("red-ui-palette-node-config-disabled");
@@ -350,6 +353,32 @@ RED.sidebar.config = (function() {
         RED.popover.tooltip($('#red-ui-sidebar-config-filter-unused'), RED._("sidebar.config.showAllUnusedConfigNodes"));
 
     }
+
+    function flashConfigNode(el) {
+        if(flashingConfigNode && flashingConfigNode.length) {
+            //cancel current flashing node before flashing new node
+            clearInterval(flashingConfigNodeTimer);
+            flashingConfigNodeTimer = null;
+            flashingConfigNode.children("div").removeClass('highlighted');
+            flashingConfigNode = null;
+        }
+        if(!el || !el.children("div").length) { return; }
+
+        flashingConfigNodeTimer = setInterval(function(flashEndTime) {
+            if (flashEndTime >= Date.now()) {
+                const highlighted = el.children("div").hasClass("highlighted");
+                el.children("div").toggleClass('highlighted', !highlighted)
+            } else {
+                clearInterval(flashingConfigNodeTimer);
+                flashingConfigNodeTimer = null;
+                flashingConfigNode = null;
+                el.children("div").removeClass('highlighted');
+            }
+        }, 100, Date.now() + 2200);
+        flashingConfigNode = el;
+        el.children("div").addClass('highlighted');
+    }
+
     function show(id) {
         if (typeof id === 'boolean') {
             if (id) {
@@ -374,19 +403,7 @@ RED.sidebar.config = (function() {
                 } else if (y<0) {
                     scrollWindow.animate({scrollTop: '+='+(y-10)},150);
                 }
-                var flash = 21;
+                flashConfigNode(node, id);
-                var flashFunc = function() {
-                    if ((flash%2)===0) {
-                        node.removeClass('node_highlighted');
-                    } else {
-                        node.addClass('node_highlighted');
-                    }
-                    flash--;
-                    if (flash >= 0) {
-                        setTimeout(flashFunc,100);
-                    }
-                }
-                flashFunc();
             },100);
         }
         RED.sidebar.show("config");

packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js

@@ -20,10 +20,8 @@ RED.sidebar.help = (function() {
     var helpSection;
     var panels;
     var panelRatio;
-    var helpTopics = [];
     var treeList;
     var tocPanel;
-    var helpIndex = {};
 
     function resizeStack() {
         var h = $(content).parent().height() - toolbar.outerHeight();
@@ -97,7 +95,10 @@ RED.sidebar.help = (function() {
         var pendingContentLoad;
         treeList.on('treelistselect', function(e,item) {
             pendingContentLoad = item;
-            if (item.nodeType) {
+            if (item.tour) {
+                RED.tourGuide.run(item.tour);
+            }
+            else if (item.nodeType) {
                 showNodeTypeHelp(item.nodeType);
             } else if (item.content) {
                 helpSection.empty();
@@ -189,7 +190,6 @@ RED.sidebar.help = (function() {
     }
 
     function refreshHelpIndex() {
-        helpTopics = [];
         var modules = RED.nodes.registry.getModuleList();
         var moduleNames = Object.keys(modules);
         moduleNames.sort();
@@ -198,15 +198,32 @@ RED.sidebar.help = (function() {
             label: RED._("sidebar.help.nodeHelp"),
             children: [],
             expanded: true
-        }
+        };
+        var tours = RED.tourGuide.list().map(function (item) {
+            return {
+                icon: "fa fa-play-circle-o",
+                label: item.label,
+                tour: item.path,
+            };
+        });
         var helpData = [
+            {
+                label: "Node-RED",
+                children: [
                     {
                         id: 'changelog',
-                label: "Node-RED v"+RED.settings.version,
+                        label: RED._("sidebar.help.changeLog"),
                         content: getChangelog
                     },
-            nodeHelp
+                    {
+                        label: RED._("tourGuide.welcomeTours"),
+                        children: tours
+                    }
+
                 ]
+            },
+            nodeHelp
+        ];
         var subflows = RED.nodes.registry.getNodeTypes().filter(function(t) {return /subflow/.test(t)});
         if (subflows.length > 0) {
             nodeHelp.children.push({
@@ -370,7 +387,7 @@ RED.sidebar.help = (function() {
                 var node = selection.nodes[0];
                 if (node.type === "subflow" && node.direction) {
                     // ignore subflow virtual ports
-                } else if (node.type !== 'group'){
+                } else if (node.type !== 'group' && node.type !== 'junction'){
                     showNodeTypeHelp(node.type);
                 }
             }

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js

@@ -268,14 +268,7 @@ RED.sidebar.info.outliner = (function() {
 
                 }
             },
-            options: [
+            options: RED.search.getSearchOptions()
-                {label:RED._("sidebar.info.search.configNodes"), value:"is:config"},
-                {label:RED._("sidebar.info.search.unusedConfigNodes"), value:"is:config is:unused"},
-                {label:RED._("sidebar.info.search.invalidNodes"), value: "is:invalid"},
-                {label:RED._("sidebar.info.search.uknownNodes"), value: "type:unknown"},
-                {label:RED._("sidebar.info.search.unusedSubflows"), value:"is:subflow is:unused"},
-                {label:RED._("sidebar.info.search.hiddenFlows"), value:"is:hidden"},
-            ]
         });
 
         projectInfo = $('<div class="red-ui-treeList-label red-ui-info-outline-project"><span class="red-ui-treeList-icon"><i class="fa fa-archive"></i></span></div>').hide().appendTo(container)
@@ -287,15 +280,18 @@ RED.sidebar.info.outliner = (function() {
             data:getFlowData()
         })
         treeList.on('treelistselect', function(e,item) {
-            var node = RED.nodes.node(item.id) || RED.nodes.group(item.id);
+            var node = RED.nodes.node(item.id) || RED.nodes.group(item.id) || RED.nodes.workspace(item.id) || RED.nodes.subflow(item.id);
             if (node) {
-                if (node.type === 'group' || node._def.category !== "config") {
-                    // RED.view.select({nodes:[node]})
-                } else if (node._def.category === "config") {
                 RED.sidebar.info.refresh(node);
+                // if (node.type === 'group' || node._def.category !== "config") {
+                //     // RED.view.select({nodes:[node]})
+                // } else if (node._def.category === "config") {
+                //     RED.sidebar.info.refresh(node);
+                // } else {
+                //     // RED.view.select({nodes:[]})
+                // }
             } else {
-                    // RED.view.select({nodes:[]})
+                RED.sidebar.info.refresh(null);
-                }
             }
         })
         treeList.on('treelistconfirm', function(e,item) {

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js

@@ -163,6 +163,7 @@ RED.sidebar.info = (function() {
         });
         return el;
     }
+
     function refresh(node) {
         if (node === undefined) {
             refreshSelection();
@@ -271,7 +272,7 @@ RED.sidebar.info = (function() {
                 objectType = "group";
             }
             $(propRow.children()[0]).text(RED._("sidebar.info."+objectType))
-            RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
+            RED.utils.createObjectElement(node.id,{sourceId: node.id}).appendTo(propRow.children()[1]);
 
             if (node.type === "tab" || node.type === "subflow") {
                 // If nothing is selected, but we're on a flow or subflow tab.
@@ -301,8 +302,8 @@ RED.sidebar.info = (function() {
                 if (typeCounts.groups > 0) {
                     $('<div>').text(RED._("clipboard.group",{count:typeCounts.groups})).appendTo(counts);
                 }
-
+            } else if (node.type === 'junction') {
-
+                propertiesPanelHeaderHelp.hide();
             } else {
                 propertiesPanelHeaderHelp.show();
 
@@ -365,7 +366,7 @@ RED.sidebar.info = (function() {
 
                                     }
                                 } else {
-                                    RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
+                                    RED.utils.createObjectElement(val,{sourceId: node.id}).appendTo(propRow.children()[1]);
                                 }
                             }
                         }
@@ -431,6 +432,7 @@ RED.sidebar.info = (function() {
 
 
     }
+
     function setInfoText(infoText,target) {
         var info = addTargetToExternalLinks($('<div class="red-ui-help"><span class="red-ui-text-bidi-aware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(target);
         info.find(".red-ui-text-bidi-aware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
@@ -447,6 +449,7 @@ RED.sidebar.info = (function() {
                 $(this).toggleClass('expanded',!isExpanded);
             })
     }
+
     var tips = (function() {
         var enabled = true;
         var startDelay = 1000;

packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js

@@ -433,9 +433,30 @@ RED.tourGuide = (function() {
         })
     }
 
+    function listTour() {
+        return [
+            {
+                id: "3_0",
+                label: "3.0",
+                path: "./tours/welcome.js"
+            },
+            {
+                id: "2_2",
+                label: "2.2",
+                path: "./tours/2.2/welcome.js"
+            },
+            {
+                id: "2_1",
+                label: "2.1",
+                path: "./tours/2.1/welcome.js"
+            }
+        ];
+    }
+
     return {
         load: loadTour,
         run: run,
+        list: listTour,
         reset: function() {
             RED.settings.set("editor.tours.welcome",'');
         }

packages/node_modules/@node-red/editor-client/src/js/ui/tray.js

@@ -169,7 +169,13 @@
                         raiseTrayZ();
                         handleWindowResize();//cause call to monaco layout
                     },200);
+                    if(!options.hasOwnProperty("focusElement")) {
+                        //focusElement is not inside options - default to focusing 1st
                         body.find(":focusable:first").trigger("focus");
+                    } else if(options.focusElement !== false) {
+                        //focusElement IS specified, focus that instead (if not false)
+                        $(options.focusElement).trigger("focus");
+                    } 
 
                 },150);
                 el.css({right:0});

packages/node_modules/@node-red/editor-client/src/js/ui/typeSearch.js

@@ -104,7 +104,9 @@ RED.typeSearch = (function() {
                     var index = Math.max(0,selected);
                     if (index < children.length) {
                         var n = $(children[index]).find(".red-ui-editableList-item-content").data('data');
+                        if (!/^_action_:/.test(n.type)) {
                             typesUsed[n.type] = Date.now();
+                        }
                         if (n.def.outputs === 0) {
                             confirm(n);
                         } else {
@@ -171,19 +173,28 @@ RED.typeSearch = (function() {
                 var div = $('<div>',{class:"red-ui-search-result"}).appendTo(container);
 
                 var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(div);
+                if (object.type === "junction") {
+                    nodeDiv.addClass("red-ui-palette-icon-junction");
+                } else if (/^_action_:/.test(object.type)) {
+                    nodeDiv.addClass("red-ui-palette-icon-junction")
+                } else {
                     var colour = RED.utils.getNodeColor(object.type,def);
-                var icon_url = RED.utils.getNodeIcon(def);
                     nodeDiv.css('backgroundColor',colour);
+                }
+                var icon_url = RED.utils.getNodeIcon(def);
 
                 var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
                 RED.utils.createIconElement(icon_url, iconContainer, false);
 
+
+                if (!/^_action_:/.test(object.type) && object.type !== "junction") {
                     if (def.inputs > 0) {
                         $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);
                     }
                     if (def.outputs > 0) {
                         $('<div/>',{class:"red-ui-search-result-node-port red-ui-search-result-node-output"}).appendTo(nodeDiv);
                     }
+                }
 
                 var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
 
@@ -203,7 +214,9 @@ RED.typeSearch = (function() {
     }
     function confirm(def) {
         hide();
+        if (!/^_action_:/.test(def.type)) {
             typesUsed[def.type] = Date.now();
+        }
         addCallback(def.type);
     }
 
@@ -256,8 +269,8 @@ RED.typeSearch = (function() {
         moveCallback = opts.move;
         RED.events.emit("type-search:open");
         //shade.show();
-        if ($("#red-ui-main-container").height() - opts.y - 150 < 0) {
+        if ($("#red-ui-main-container").height() - opts.y - 195 < 0) {
-            opts.y = opts.y - 235;
+            opts.y = opts.y - 275;
         }
         dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();
         searchResultsDiv.slideDown(300);
@@ -312,9 +325,10 @@ RED.typeSearch = (function() {
     function applyFilter(filter,type,def) {
         return !filter ||
             (
+                (!filter.spliceMultiple) &&
                 (!filter.type || type === filter.type) &&
-                (!filter.input || def.inputs > 0) &&
+                (!filter.input || type === 'junction' || def.inputs > 0) &&
-                (!filter.output || def.outputs > 0)
+                (!filter.output || type === 'junction' || def.outputs > 0)
             )
     }
     function refreshTypeList(opts) {
@@ -323,9 +337,16 @@ RED.typeSearch = (function() {
         searchInput.searchBox('value','').focus();
         selected = -1;
         var common = [
-            'inject','debug','function','change','switch'
+            'inject','debug','function','change','switch','junction'
         ].filter(function(t) { return applyFilter(opts.filter,t,RED.nodes.getType(t)); });
 
+        // if (opts.filter && opts.filter.input && opts.filter.output && !opts.filter.type) {
+        //     if (opts.filter.spliceMultiple) {
+        //         common.push('_action_:core:split-wires-with-junctions')
+        //     }
+        //     common.push('_action_:core:split-wire-with-link-nodes')
+        // }
+
         var recentlyUsed = Object.keys(typesUsed);
         recentlyUsed.sort(function(a,b) {
             return typesUsed[b]-typesUsed[a];
@@ -348,6 +369,11 @@ RED.typeSearch = (function() {
         var index = 0;
         for(i=0;i<common.length;i++) {
             var itemDef = RED.nodes.getType(common[i]);
+            if (common[i] === 'junction') {
+                itemDef = { inputs:1, outputs: 1, label: 'junction', type: 'junction'}
+            } else if (/^_action_:/.test(common[i]) ) {
+                itemDef = { inputs:1, outputs: 1, label: common[i], type: common[i]}
+            }
             if (itemDef) {
                 item = {
                     type: common[i],

packages/node_modules/@node-red/editor-client/src/js/ui/utils.js

@@ -365,7 +365,16 @@ RED.utils = (function() {
         }
     }
 
-    function buildMessageElement(obj,options) {
+    /**
+     * Create a DOM element representation of obj - as used by Debug sidebar etc
+     *
+     * @params obj - the data to display
+     * @params options - a bag of options
+     *
+     * - If you want the Copy Value button, then set `sourceId`
+     * - If you want the Copy Path button, also set `path` to the value to be copied
+     */
+    function createObjectElement(obj,options) {
         options = options || {};
         var key = options.key;
         var typeHint = options.typeHint;
@@ -555,7 +564,7 @@ RED.utils = (function() {
                     if (fullLength <= 10) {
                         for (i=0;i<fullLength;i++) {
                             row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(arrayRows);
-                            subElements[path+"["+i+"]"] = buildMessageElement(
+                            subElements[path+"["+i+"]"] = createObjectElement(
                                 data[i],
                                 {
                                     key: ""+i,
@@ -585,7 +594,7 @@ RED.utils = (function() {
                                 return function() {
                                     for (var i=min;i<=max;i++) {
                                         var row = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(parent);
-                                        subElements[path+"["+i+"]"] = buildMessageElement(
+                                        subElements[path+"["+i+"]"] = createObjectElement(
                                             data[i],
                                             {
                                                 key: ""+i,
@@ -641,7 +650,7 @@ RED.utils = (function() {
                                 newPath += "[\""+keys[i].replace(/"/,"\\\"")+"\"]"
                             }
                         }
-                        subElements[newPath] = buildMessageElement(
+                        subElements[newPath] = createObjectElement(
                             data[keys[i]],
                             {
                                 key: keys[i],
@@ -1019,8 +1028,12 @@ RED.utils = (function() {
             return "font-awesome/fa-object-ungroup";
         } else if (node && node.type === 'group') {
             return "font-awesome/fa-object-group"
+        } else if ((node && node.type === 'junction') || (def.type === "junction") ) {
+            return "font-awesome/fa-circle-o"
         } else if (def.category === 'config') {
             return RED.settings.apiRootUrl+"icons/node-red/cog.svg"
+        } else if ((node && /^_action_:/.test(node.type)) || /^_action_:/.test(def.type)) {
+            return "font-awesome/fa-cogs"
         } else if (node && node.type === 'tab') {
             return "red-ui-icons/red-ui-icons-flow"
             // return RED.settings.apiRootUrl+"images/subflow_tab.svg"
@@ -1084,6 +1097,8 @@ RED.utils = (function() {
             l = node.label || defaultLabel
         } else if (node.type === 'group') {
             l = node.name || defaultLabel
+        } else if (node.type === 'junction') {
+            l = 'junction'
         } else {
             l = node._def.label;
             try {
@@ -1096,6 +1111,18 @@ RED.utils = (function() {
         return RED.text.bidi.enforceTextDirectionWithUCC(l);
     }
 
+    function getPaletteLabel(nodeType, def) {
+        var label = nodeType;
+        if (typeof def.paletteLabel !== "undefined") {
+            try {
+                label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||"";
+            } catch(err) {
+                console.log("Definition error: "+nodeType+".paletteLabel",err);
+            }
+        }
+        return label
+    }
+
     var nodeColorCache = {};
     function clearNodeColorCache() {
         nodeColorCache = {};
@@ -1238,6 +1265,8 @@ RED.utils = (function() {
             nodeDiv.addClass("red-ui-palette-icon-selection");
         } else if (node.type === "group") {
             nodeDiv.addClass("red-ui-palette-icon-group");
+        } else if (node.type === "junction") {
+            nodeDiv.addClass("red-ui-palette-icon-junction");
         } else if (node.type === 'tab') {
             nodeDiv.addClass("red-ui-palette-icon-flow");
         } else {
@@ -1369,7 +1398,7 @@ RED.utils = (function() {
     }
 
     return {
-        createObjectElement: buildMessageElement,
+        createObjectElement: createObjectElement,
         getMessageProperty: getMessageProperty,
         setMessageProperty: setMessageProperty,
         normalisePropertyExpression: normalisePropertyExpression,
@@ -1379,6 +1408,7 @@ RED.utils = (function() {
         getNodeIcon: getNodeIcon,
         getNodeLabel: getNodeLabel,
         getNodeColor: getNodeColor,
+        getPaletteLabel: getPaletteLabel,
         clearNodeColorCache: clearNodeColorCache,
         addSpinnerOverlay: addSpinnerOverlay,
         decodeObject: decodeObject,

packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js

@@ -105,6 +105,9 @@ RED.view.tools = (function() {
                 $(document).one('keyup',endKeyboardMove);
                 endMoveSet = true;
             }
+            var dim = RED.view.dimensions();
+            var space_width = dim.width;
+            var space_height = dim.height;
             var minX = 0;
             var minY = 0;
             var node;
@@ -120,6 +123,12 @@ RED.view.tools = (function() {
                 node.n.dirty = true;
                 node.n.x += dx;
                 node.n.y += dy;
+                if ((node.n.x +node.n.w/2) >= space_width) {
+                    node.n.x = space_width -node.n.w/2;
+                }
+                if ((node.n.y +node.n.h/2) >= space_height) {
+                    node.n.y = space_height -node.n.h/2;
+                }
                 node.n.dirty = true;
                 if (node.n.type === "group") {
                     RED.group.markDirty(node.n);
@@ -336,17 +345,17 @@ RED.view.tools = (function() {
 
     }
 
-    function addNode() {
+    // function addNode() {
-        var selection = RED.view.selection();
+    //     var selection = RED.view.selection();
-        if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].outputs > 0) {
+    //     if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].outputs > 0) {
-            var selectedNode = selection.nodes[0];
+    //         var selectedNode = selection.nodes[0];
-            RED.view.showQuickAddDialog([
+    //         RED.view.showQuickAddDialog([
-                selectedNode.x + selectedNode.w + 50,selectedNode.y
+    //             selectedNode.x + selectedNode.w + 50,selectedNode.y
-            ])
+    //         ])
-        } else {
+    //     } else {
-            RED.view.showQuickAddDialog();
+    //         RED.view.showQuickAddDialog();
-        }
+    //     }
-    }
+    // }
 
 
     function gotoNearestNode(direction) {
@@ -809,6 +818,380 @@ RED.view.tools = (function() {
         }
     }
 
+    /**
+     * Splits selected wires and re-joins them with link-out+link-in
+     * @param {Object || Object[]} wires The wire(s) to split and replace with link-out, link-in nodes.
+     */
+    function splitWiresWithLinkNodes(wires) {
+        let wiresToSplit = wires || (RED.view.selection().links && RED.view.selection().links.filter(e => !e.link));
+        if (!wiresToSplit) {
+            return
+        }
+        if (!Array.isArray(wiresToSplit)) {
+            wiresToSplit = [wiresToSplit];
+        }
+        if (wiresToSplit.length < 1) {
+            return; //nothing selected
+        }
+
+        const history = {
+            t: 'multi',
+            events: [],
+            dirty: RED.nodes.dirty()
+        }
+        const nodeSrcMap = {};
+        const nodeTrgMap = {};
+        const _gridSize = RED.view.gridSize();
+
+        for (let wireIdx = 0; wireIdx < wiresToSplit.length; wireIdx++) {
+            const wire = wiresToSplit[wireIdx];
+
+            //get source and target nodes of this wire link
+            const nSrc = wire.source;
+            const nTrg = wire.target;
+
+            var updateNewNodePosXY = function (origNode, newNode, alignLeft, snap, yOffset) {
+                const nnSize = RED.view.calculateNodeDimensions(newNode);
+                newNode.w = nnSize[0];
+                newNode.h = nnSize[1];
+                const coords = { x: origNode.x || 0, y: origNode.y || 0, w: origNode.w || RED.view.node_width, h: origNode.h || RED.view.node_height };
+                const x = coords.x - (coords.w/2.0);
+                if (alignLeft) {
+                    coords.x = x - _gridSize - (newNode.w/2.0);
+                } else {
+                    coords.x = x + coords.w + _gridSize + (newNode.w/2.0);
+                }
+                newNode.x = coords.x;
+                newNode.y = coords.y;
+                if (snap !== false) {
+                    const offsets = RED.view.tools.calculateGridSnapOffsets(newNode);
+                    newNode.x -= offsets.x;
+                    newNode.y -= offsets.y;
+                }
+                newNode.y += (yOffset || 0);
+            }
+            const srcPort = (wire.sourcePort || 0);
+            let linkOutMapId = nSrc.id + ':' + srcPort;
+            let nnLinkOut = nodeSrcMap[linkOutMapId];
+            //Create a Link Out if one is not already present
+            if(!nnLinkOut) {
+                const nLinkOut = RED.view.createNode("link out"); //create link node
+                nnLinkOut = nLinkOut.node;
+                nodeSrcMap[linkOutMapId] = nnLinkOut;
+                let yOffset = 0;
+                if(nSrc.outputs > 1) {
+
+                    const CENTER_PORT = (((nSrc.outputs-1) / 2) + 1);
+                    const offsetCount = Math.abs(CENTER_PORT - (srcPort + 1));
+                    yOffset = (_gridSize * 2 * offsetCount);
+                    if((srcPort + 1) < CENTER_PORT) {
+                        yOffset = -yOffset;
+                    }
+                    updateNewNodePosXY(nSrc, nnLinkOut, false, false, yOffset);
+                } else {
+                    updateNewNodePosXY(nSrc, nnLinkOut, false, RED.view.snapGrid, yOffset);
+                }
+                //add created node
+                RED.nodes.add(nnLinkOut);
+                RED.editor.validateNode(nnLinkOut);
+                history.events.push(nLinkOut.historyEvent);
+                //connect node to link node
+                const link = {
+                    source: nSrc,
+                    sourcePort: wire.sourcePort || 0,
+                    target: nnLinkOut
+                };
+                RED.nodes.addLink(link);
+                history.events.push({
+                    t: 'add',
+                    links: [link],
+                });
+            }
+
+            let nnLinkIn = nodeTrgMap[nTrg.id];
+            //Create a Link In if one is not already present
+            if(!nnLinkIn) {
+                const nLinkIn = RED.view.createNode("link in"); //create link node
+                nnLinkIn = nLinkIn.node;
+                nodeTrgMap[nTrg.id] = nnLinkIn;
+                updateNewNodePosXY(nTrg, nnLinkIn, true, RED.view.snapGrid, 0);
+                //add created node
+                RED.nodes.add(nnLinkIn);
+                RED.editor.validateNode(nnLinkIn);
+                history.events.push(nLinkIn.historyEvent);
+                //connect node to link node
+                const link = {
+                    source: nnLinkIn,
+                    sourcePort: 0,
+                    target: nTrg
+                };
+                RED.nodes.addLink(link);
+                history.events.push({
+                    t: 'add',
+                    links: [link],
+                });
+            }
+
+            //connect the link out/link in virtual wires
+            if(nnLinkIn.links.indexOf(nnLinkOut.id) == -1) {
+                nnLinkIn.links.push(nnLinkOut.id);
+            }
+            if(nnLinkOut.links.indexOf(nnLinkIn.id) == -1) {
+                nnLinkOut.links.push(nnLinkIn.id);
+            }
+
+            //delete the original wire
+            RED.nodes.removeLink(wire);
+            history.events.push({
+                t: "delete",
+                links: [wire]
+            });
+        }
+        //add all history events to stack
+        RED.history.push(history);
+
+        //select all downstream of new link-in nodes so user can drag to new location
+        RED.view.clearSelection();
+        RED.view.select({nodes: Object.values(nodeTrgMap) });
+        selectConnected("down");
+
+        //update the view
+        RED.nodes.dirty(true);
+        RED.view.redraw(true);
+    }
+
+    /**
+     * Calculate the required offsets to snap a node
+     * @param {Object} node The node to calculate grid snap offsets for
+     * @param {Object} [options] Options: `align` can be "nearest", "left" or "right"
+     * @returns `{x:number, y:number}`  as the offsets to deduct from `x` and `y`
+     */
+    function calculateGridSnapOffsets(node, options) {
+        options = options || { align: "nearest" };
+        const gridOffset = { x: 0, y: 0 };
+        const gridSize = RED.view.gridSize();
+        const offsetLeft = node.x - (gridSize * Math.round((node.x - node.w / 2) / gridSize) + node.w / 2);
+        const offsetRight = node.x - (gridSize * Math.round((node.x + node.w / 2) / gridSize) - node.w / 2);
+        gridOffset.x = offsetRight;
+        if (options.align === "right") {
+            //skip - already set to right
+        } else if (options.align === "left" || Math.abs(offsetLeft) < Math.abs(offsetRight)) {
+            gridOffset.x = offsetLeft;
+        }
+        gridOffset.y = node.y - (gridSize * Math.round(node.y / gridSize));
+        return gridOffset;
+    }
+
+    /**
+     * Generate names for the select nodes.
+     *  - it only sets the name if it is currently blank
+     *  - it uses `<paletteLabel> <N>` - where N is the next available integer that
+     *    doesn't clash with any existing nodes of that type
+     * @param {Object} node The node to set the name of - if not provided, uses current selection
+     * @param {{ renameBlank: boolean, renameClash: boolean, generateHistory: boolean }} options Possible options are `renameBlank`, `renameClash` and `generateHistory`
+     */
+    function generateNodeNames(node, options) {
+        options = Object.assign({
+            renameBlank: true,
+            renameClash: true,
+            generateHistory: true
+        }, options)
+        let nodes = node;
+        if (node) {
+            if (!Array.isArray(node)) {
+                nodes = [ node ]
+            }
+        } else {
+            nodes = RED.view.selection().nodes;
+        }
+        if (nodes && nodes.length > 0) {
+            // Generate history event if using the workspace selection,
+            // or if the provided node already exists
+            const generateHistory = options.generateHistory && (!node || !!RED.nodes.node(node.id))
+            const historyEvents = []
+            const typeIndex = {}
+            let changed = false;
+            nodes.forEach(n => {
+                const nodeDef = n._def || RED.nodes.getType(n.type)
+                if (nodeDef && nodeDef.defaults && nodeDef.defaults.name) {
+                    const paletteLabel = RED.utils.getPaletteLabel(n.type, nodeDef)
+                    const defaultNodeNameRE = new RegExp('^'+paletteLabel+' (\\d+)$')
+                    if (!typeIndex.hasOwnProperty(n.type)) {
+                        const existingNodes = RED.nodes.filterNodes({type: n.type})
+                        let maxNameNumber = 0;
+                        existingNodes.forEach(n => {
+                            let match = defaultNodeNameRE.exec(n.name)
+                            if (match) {
+                                let nodeNumber = parseInt(match[1])
+                                if (nodeNumber > maxNameNumber) {
+                                    maxNameNumber = nodeNumber
+                                }
+                            }
+                        })
+                        typeIndex[n.type] = maxNameNumber + 1
+                    }
+                    if ((options.renameBlank && n.name === '') || (options.renameClash && defaultNodeNameRE.test(n.name))) {
+                        if (generateHistory) {
+                            historyEvents.push({
+                                t:'edit',
+                                node: n,
+                                changes: { name: n.name },
+                                dirty: RED.nodes.dirty(),
+                                changed: n.changed
+                            })
+                        }
+                        n.name = paletteLabel+" "+typeIndex[n.type]
+                        n.dirty = true
+                        typeIndex[n.type]++
+                        changed = true
+                    }
+                }
+            })
+            if (changed) {
+                if (historyEvents.length > 0) {
+                    RED.history.push({
+                        t: 'multi',
+                        events: historyEvents
+                    })
+                }
+                RED.nodes.dirty(true)
+                RED.view.redraw()
+            }
+        }
+    }
+
+    function addJunctionsToWires(wires) {
+        let wiresToSplit = wires || (RED.view.selection().links && RED.view.selection().links.filter(e => !e.link));
+        if (!wiresToSplit) {
+            return
+        }
+        if (!Array.isArray(wiresToSplit)) {
+            wiresToSplit = [wiresToSplit];
+        }
+        if (wiresToSplit.length === 0) {
+            return;
+        }
+
+        var removedLinks = new Set()
+        var addedLinks = []
+        var addedJunctions = []
+
+        var groupedLinks = {}
+        wiresToSplit.forEach(function(l) {
+            var sourceId = l.source.id+":"+l.sourcePort
+            groupedLinks[sourceId] = groupedLinks[sourceId] || []
+            groupedLinks[sourceId].push(l)
+
+            groupedLinks[l.target.id] = groupedLinks[l.target.id] || []
+            groupedLinks[l.target.id].push(l)
+        });
+        var linkGroups = Object.keys(groupedLinks)
+        linkGroups.sort(function(A,B) {
+            return groupedLinks[B].length - groupedLinks[A].length
+        })
+        const wasDirty = RED.nodes.dirty()
+        linkGroups.forEach(function(gid) {
+            var links = groupedLinks[gid]
+            var junction = {
+                _def: {defaults:{}},
+                type: 'junction',
+                z: RED.workspaces.active(),
+                id: RED.nodes.id(),
+                x: 0,
+                y: 0,
+                w: 0, h: 0,
+                outputs: 1,
+                inputs: 1,
+                dirty: true
+            }
+            links = links.filter(function(l) { return !removedLinks.has(l) })
+            if (links.length === 0) {
+                return
+            }
+            let pointCount = 0
+            links.forEach(function(l) {
+                if (l._sliceLocation) {
+                    junction.x += l._sliceLocation.x
+                    junction.y += l._sliceLocation.y
+                    delete l._sliceLocation
+                    pointCount++
+                } else {
+                    junction.x += l.source.x + l.source.w/2 + l.target.x - l.target.w/2
+                    junction.y += l.source.y + l.target.y
+                    pointCount += 2
+                }
+            })
+            junction.x = Math.round(junction.x/pointCount)
+            junction.y = Math.round(junction.y/pointCount)
+            if (RED.view.snapGrid) {
+                let gridSize = RED.view.gridSize()
+                junction.x = (gridSize*Math.round(junction.x/gridSize));
+                junction.y = (gridSize*Math.round(junction.y/gridSize));
+            }
+
+            var nodeGroups = new Set()
+
+            RED.nodes.addJunction(junction)
+            addedJunctions.push(junction)
+            let newLink
+            if (gid === links[0].source.id+":"+links[0].sourcePort) {
+                newLink = {
+                    source: links[0].source,
+                    sourcePort: links[0].sourcePort,
+                    target: junction
+                }
+            } else {
+                newLink = {
+                    source: junction,
+                    sourcePort: 0,
+                    target: links[0].target
+                }
+            }
+            addedLinks.push(newLink)
+            RED.nodes.addLink(newLink)
+            links.forEach(function(l) {
+                removedLinks.add(l)
+                RED.nodes.removeLink(l)
+                let newLink
+                if (gid === l.target.id) {
+                    newLink = {
+                        source: l.source,
+                        sourcePort: l.sourcePort,
+                        target: junction
+                    }
+                } else {
+                    newLink = {
+                        source: junction,
+                        sourcePort: 0,
+                        target: l.target
+                    }
+                }
+                addedLinks.push(newLink)
+                RED.nodes.addLink(newLink)
+                nodeGroups.add(l.source.g || "__NONE__")
+                nodeGroups.add(l.target.g || "__NONE__")
+            })
+            if (nodeGroups.size === 1) {
+                var group = nodeGroups.values().next().value
+                if (group !== "__NONE__") {
+                    RED.group.addToGroup(RED.nodes.group(group), junction)
+                }
+            }
+        })
+        if (addedJunctions.length > 0) {
+            RED.history.push({
+                dirty: wasDirty,
+                t: 'add',
+                links: addedLinks,
+                junctions: addedJunctions,
+                removedLinks: Array.from(removedLinks)
+            })
+            RED.nodes.dirty(true)
+            RED.view.select({nodes: addedJunctions });
+        }
+        RED.view.redraw(true);
+    }
+
     return {
         init: function() {
             RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); })
@@ -870,6 +1253,11 @@ RED.view.tools = (function() {
             RED.actions.add("core:wire-series-of-nodes", function() { wireSeriesOfNodes() })
             RED.actions.add("core:wire-node-to-multiple", function() { wireNodeToMultiple() })
 
+            RED.actions.add("core:split-wire-with-link-nodes", function () { splitWiresWithLinkNodes() });
+            RED.actions.add("core:split-wires-with-junctions", function () { addJunctionsToWires() });
+
+            RED.actions.add("core:generate-node-names", generateNodeNames )
+
             // RED.actions.add("core:add-node", function() { addNode() })
         },
         /**
@@ -881,7 +1269,8 @@ RED.view.tools = (function() {
          * @param  {Number} dx
          * @param  {Number} dy
          */
-        moveSelection: moveSelection
+        moveSelection: moveSelection,
+        calculateGridSnapOffsets: calculateGridSnapOffsets
     }
 
 })();

packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js

@@ -24,6 +24,9 @@ RED.workspaces = (function() {
     var hideStack = [];
     var viewStackPos = 0;
 
+    let flashingTab;
+    let flashingTabTimer;
+
     function addToViewStack(id) {
         if (viewStackPos !== viewStack.length) {
             viewStack.splice(viewStackPos);
@@ -281,9 +284,22 @@ RED.workspaces = (function() {
                         onselect: "core:show-last-hidden-flow"
                     }
                 ]
-                if (hideStack.length > 0) {
+                let hiddenFlows = new Set()
+                for (let i = 0; i < hideStack.length; i++) {
+                    let ids = hideStack[i]
+                    if (!Array.isArray(ids)) {
+                        ids = [ids]
+                    }
+                    ids.forEach(id => {
+                        if (RED.nodes.workspace(id)) {
+                            hiddenFlows.add(id)
+                        }
+                    })
+                }
+                const flowCount = hiddenFlows.size;
+                if (flowCount > 0) {
                     menuItems.unshift({
-                        label: RED._("workspace.hiddenFlows",{count: hideStack.length}),
+                        label: RED._("workspace.hiddenFlows",{count: flowCount}),
                         onselect: "core:list-hidden-flows"
                     })
                 }
@@ -428,6 +444,9 @@ RED.workspaces = (function() {
                 }
             }
         })
+        RED.actions.add("core:list-modified-nodes",function() {
+            RED.actions.invoke("core:search","is:modified ");
+        })
         RED.actions.add("core:list-hidden-flows",function() {
             RED.actions.invoke("core:search","is:hidden ");
         })
@@ -528,6 +547,31 @@ RED.workspaces = (function() {
         workspace_tabs.order(order);
     }
 
+    function flashTab(tabId) {
+        if(flashingTab && flashingTab.length) {
+            //cancel current flashing node before flashing new node
+            clearInterval(flashingTabTimer);
+            flashingTabTimer = null;
+            flashingTab.removeClass('highlighted');
+            flashingTab = null;
+        }
+        let tab = $("#red-ui-tab-" + tabId);
+        if(!tab || !tab.length) { return; }
+
+        flashingTabTimer = setInterval(function(flashEndTime) {
+            if (flashEndTime >= Date.now()) {
+                const highlighted = tab.hasClass("highlighted");
+                tab.toggleClass('highlighted', !highlighted)
+            } else {
+                clearInterval(flashingTabTimer);
+                flashingTabTimer = null;
+                flashingTab = null;
+                tab.removeClass('highlighted');
+            }
+        }, 100, Date.now() + 2200);
+        flashingTab = tab;
+        tab.addClass('highlighted');
+    }
     return {
         init: init,
         add: addWorkspace,
@@ -560,7 +604,7 @@ RED.workspaces = (function() {
         isHidden: function(id) {
             return hideStack.includes(id)
         },
-        show: function(id,skipStack,unhideOnly) {
+        show: function(id,skipStack,unhideOnly,flash) {
             if (!workspace_tabs.contains(id)) {
                 var sf = RED.nodes.subflow(id);
                 if (sf) {
@@ -582,6 +626,9 @@ RED.workspaces = (function() {
                 }
                 workspace_tabs.activateTab(id);
             }
+            if(flash) {
+                flashTab(id.replace(".","-"))
+            }
         },
         refresh: function() {
             RED.nodes.eachWorkspace(function(ws) {

packages/node_modules/@node-red/editor-client/src/js/user.js

@@ -118,13 +118,10 @@ RED.user = (function() {
                     });
 
                 } else if (data.type == "strategy") {
-                    i = 0;
-                    for (;i<data.prompts.length;i++) {
-                        var field = data.prompts[i];
                     var sessionMessage = /[?&]session_message=(.*?)(?:$|&)/.exec(window.location.search);
-                        if (sessionMessage) {
                     RED.sessionMessages = RED.sessionMessages || [];
-                            RED.sessionMessages.push(sessionMessage[1]);
+                    if (sessionMessage) {
+                        RED.sessionMessages.push(decodeURIComponent(sessionMessage[1]));
                         if (history.pushState) {
                             var newurl = window.location.protocol+"//"+window.location.host+window.location.pathname
                             window.history.replaceState({ path: newurl }, "", newurl);
@@ -132,6 +129,15 @@ RED.user = (function() {
                             window.location.search = "";
                         }
                     }
+
+                    if (RED.sessionMessages.length === 0 && data.autoLogin) {
+                        document.location = data.loginRedirect
+                        return
+                    }
+
+                    i = 0;
+                    for (;i<data.prompts.length;i++) {
+                        var field = data.prompts[i];
                         if (RED.sessionMessages) {
                             var sessionMessages = $("<div/>",{class:"form-row",style:"text-align: center"}).appendTo("#node-dialog-login-fields");
                             RED.sessionMessages.forEach(function (msg) {

packages/node_modules/@node-red/editor-client/src/js/validators.js

@@ -14,22 +14,72 @@
  * limitations under the License.
  **/
 RED.validators = {
-    number: function(blankAllowed){return function(v) { return (blankAllowed&&(v===''||v===undefined)) || (v!=='' && !isNaN(v));}},
+    number: function(blankAllowed,mopt){
-    regex: function(re){return function(v) { return re.test(v);}},
+        return function(v, opt) {
-    typedInput: function(ptypeName,isConfig) { return function(v) {
+            if ((blankAllowed&&(v===''||v===undefined)) || (v!=='' && !isNaN(v))) {
+                return true;
+            }
+            if (opt && opt.label) {
+                return RED._("validator.errors.invalid-num-prop", {
+                    prop: opt.label
+                });
+            }
+            return opt ? RED._("validator.errors.invalid-num") : false;
+        };
+    },
+    regex: function(re, mopt) {
+        return function(v, opt) {
+            if (re.test(v)) {
+                return true;
+            }
+            if (opt && opt.label) {
+                return RED._("validator.errors.invalid-regex-prop", {
+                    prop: opt.label
+                });
+            }
+            return opt ? RED._("validator.errors.invalid-regexp") : false;
+        };
+    },
+    typedInput: function(ptypeName,isConfig,mopt) {
+        return function(v, opt) {
             var ptype = $("#node-"+(isConfig?"config-":"")+"input-"+ptypeName).val() || this[ptypeName];
             if (ptype === 'json') {
                 try {
                     JSON.parse(v);
                     return true;
                 } catch(err) {
-                return false;
+                    if (opt && opt.label) {
+                        return RED._("validator.errors.invalid-json-prop", {
+                            error: err.message,
+                            prop: opt.label,
+                        });
+                    }
+                    return opt ? RED._("validator.errors.invalid-json", {
+                        error: err.message
+                    }) : false;
                 }
             } else if (ptype === 'msg' || ptype === 'flow' || ptype === 'global' ) {
-            return RED.utils.validatePropertyExpression(v);
+                if (RED.utils.validatePropertyExpression(v)) {
+                    return true;
+                }
+                if (opt && opt.label) {
+                    return RED._("validator.errors.invalid-prop-prop", {
+                        prop: opt.label
+                    });
+                }
+                return opt ? RED._("validator.errors.invalid-prop") : false;
             } else if (ptype === 'num') {
-            return /^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/.test(v);
+                if (/^[+-]?[0-9]*\.?[0-9]*([eE][-+]?[0-9]+)?$/.test(v)) {
+                    return true;
+                }
+                if (opt && opt.label) {
+                    return RED._("validator.errors.invalid-num-prop", {
+                        prop: opt.label
+                    });
+                }
+                return opt ? RED._("validator.errors.invalid-num") : false;
             }
             return true;
-    }}
+        };
+    }
 };

packages/node_modules/@node-red/editor-client/src/sass/ace.scss

@@ -2,48 +2,48 @@
 
     .ace_read-only {
         .ace_scroller {
-            background: $text-editor-background-disabled;
+            background: var(--red-ui-text-editor-background-disabled);
-            color: $text-editor-color-disabled;
+            color: var(--red-ui-text-editor-color-disabled);
         }
         .ace_cursor {
            color: transparent !important;
         }
     }
     .ace_gutter {
-        background: $text-editor-gutter-background;
+        background: var(--red-ui-text-editor-gutter-background);
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
     }
     .ace_scroller {
-        background: $text-editor-background;
+        background: var(--red-ui-text-editor-background);
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
-        color: $text-editor-color;
+        color: var(--red-ui-text-editor-color);
     }
     .ace_marker-layer .ace_active-line {
-        background: $text-editor-active-line-background;
+        background: var(--red-ui-text-editor-active-line-background);
     }
     .ace_marker-layer .ace_selection {
-        background: $text-editor-selection-background;
+        background: var(--red-ui-text-editor-selection-background);
         border-radius: 1px;
     }
     .ace_gutter-cell  {
-        color: $text-editor-color;
+        color: var(--red-ui-text-editor-gutter-color);
     }
     .ace_gutter-active-line {
-        background: $text-editor-gutter-active-line-background;
+        background: var(--red-ui-text-editor-gutter-active-line-background);
     }
     .ace_tooltip {
-        font-family: $primary-font;
+        font-family: var(--red-ui-primary-font);
         line-height: 1.4em;
         max-width: 400px;
         white-space: normal;
         background-image: none;
-        background: $popover-background;
+        background: var(--red-ui-popover-background);
-        color: $popover-color;
+        color: var(--red-ui-popover-color);
         border-radius: 4px;
         @include component-shadow;
-        border-color: $popover-background;
+        border-color: var(--red-ui-popover-background);
     }
     .ace_content {
         line-height: 1;
@@ -55,14 +55,14 @@
 
     #red-ui-event-log-editor {
         .ace_scroller {
-            background: $event-log-background;
+            background: var(--red-ui-event-log-background);
-            color: $event-log-color;
+            color: var(--red-ui-event-log-color);
         }
         .ace_marker-layer .ace_active-line {
-            background: $event-log-active-line-background;
+            background: var(--red-ui-event-log-active-line-background);
         }
         .ace_marker-layer .ace_selection {
-            background: $event-log-selection-background;
+            background: var(--red-ui-event-log-selection-background);
         }
     }
 }

packages/node_modules/@node-red/editor-client/src/sass/base.scss

@@ -20,12 +20,12 @@ body {
 }
 
 .red-ui-editor {
-    font-size: $primary-font-size;
+    font-size: var(--red-ui-primary-font-size);
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
     padding: 0;
     margin: 0;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
     line-height: 20px;
 }
 
@@ -44,7 +44,7 @@ body {
 
 #red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade  {
     @include shade;
-    z-index: 2;
+    z-index: 5;
 }
 #red-ui-sidebar-shade  {
     left: -8px;
@@ -63,15 +63,15 @@ body {
 .red-ui-icon-picker {
     a {
         text-decoration: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     a:hover,
     a:focus {
         text-decoration: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     a:focus {
-        outline: 1px solid $form-input-focus-color;
+        outline: 1px solid var(--red-ui-form-input-focus-color);
     }
 
     p {
@@ -130,7 +130,7 @@ body {
     hr {
         margin: 20px 0;
         border: 0;
-        border-top: 1px solid $tertiary-border-color;
+        border-top: 1px solid var(--red-ui-tertiary-border-color);
     }
 
 
@@ -142,23 +142,30 @@ body {
         line-height: 14px;
         vertical-align: text-top;
         margin-top: 0px;
-        background: url(images/spin.svg) no-repeat 50% 50%;
+        -webkit-mask-image: url(images/spin.svg);
-        background-size: contain
+        mask-image: url(images/spin.svg);
+        -webkit-mask-size: contain;
+        mask-size: contain;
+        -webkit-mask-position: 50% 50%;
+        mask-position: 50% 50%;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        background-color: var(--red-ui-spinner-color);
         }
 
     .red-ui-font-code {
-        font-family: $monospace-font;
+        font-family: var(--red-ui-monospace-font);
-        font-size: $primary-font-size;
+        font-size: var(--red-ui-primary-font-size);
-        color: $text-color-code;
+        color: var(--red-ui-text-color-code);
         white-space: nowrap;
     }
 
     code {
-        font-family: $monospace-font;
+        font-family: var(--red-ui-monospace-font);
-        font-size: $primary-font-size;
+        font-size: var(--red-ui-primary-font-size);
         padding: 0px;
         margin: 1px;
-        color: $text-color-code;
+        color: var(--red-ui-text-color-code);
         white-space: nowrap;
     }
 
@@ -170,8 +177,8 @@ body {
         word-break: break-all;
         word-wrap: break-word;
         white-space: pre-wrap;
-        background-color:$tertiary-background;
+        background-color:var(--red-ui-tertiary-background);
-        border: 1px solid $tertiary-border-color;
+        border: 1px solid var(--red-ui-tertiary-border-color);
         border-radius: 2px;
     }
 
@@ -210,8 +217,8 @@ body {
     blockquote {
         padding: 0 0 0 15px;
         margin: 0 0 20px;
-        border-left: 4px solid $secondary-border-color;
+        border-left: 4px solid var(--red-ui-secondary-border-color);
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
 
         p {
             font-size: 14px;
@@ -237,7 +244,7 @@ body {
     right: 1px;
     text-align: center;
     padding: 40px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     &:before {
       content: '';
       display: inline-block;
@@ -251,14 +258,14 @@ body {
         width: 80px;
     }
     &.red-ui-component-spinner-sidebar {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         padding:0;
         img {
             width: 40px;
         }
     }
     &.projects-version-control-spinner-sidebar {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         padding:0;
         img {
             width: 20px;

packages/node_modules/@node-red/editor-client/src/sass/colors.scss

@@ -112,9 +112,13 @@ $tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive;
 $tab-badge-color: $tertiary-text-color;
 $tab-background: $secondary-background;
 $tab-background-active: $secondary-background;
+$tab-background-active-alpha: rgba($tab-background-active, 0.001);
 $tab-background-selected: $secondary-background-selected;
+$tab-background-selected-alpha: rgba($tab-background-selected, 0.001);
 $tab-background-inactive: $secondary-background-inactive;
+$tab-background-inactive-alpha: rgba($tab-background-inactive, 0.001);
 $tab-background-hover: $secondary-background-hover;
+$tab-background-hover-alpha: rgba($tab-background-hover, 0.001);
 
 $palette-header-background: $primary-background;
 $palette-header-color: $header-text-color;
@@ -150,7 +154,6 @@ $popover-button-border-color-hover: #666;
 
 $diff-text-header-color: $secondary-text-color;
 $diff-text-header-background: #ffd;
-$diff-text-header-background-hover: #ffc;
 $diff-state-color: $primary-text-color;
 $diff-state-prefix-color: $secondary-text-color;
 $diff-state-added: #009900;
@@ -195,7 +198,6 @@ $view-lasso-stroke: #ff7f0e;
 $view-lasso-fill: rgba(20,125,255,0.1);
 
 $view-background: $secondary-background;
-$view-select-mode-background: $secondary-background-selected;
 $view-grid-color: #eee;
 
 $node-label-color: #333;
@@ -214,6 +216,8 @@ $node-icon-background-color-opacity: 0.05;
 $node-icon-border-color: #000;
 $node-icon-border-color-opacity: 0.1;
 
+$node-config-background: #f3f3f3;
+$node-config-icon-container-disabled: #aaa;
 
 $node-link-port-background: #eee;
 
@@ -301,6 +305,14 @@ $group-default-label-color: #a4a4a4;
 $tourGuide-border: #c56c6c;
 $tourGuide-heading-color: #c56c6c;
 
+$grip-color: #ccc;
+
+$icons-flow-color: #808080;
+
+$spinner-color: #999;
+
+$tab-icon-color: #dedede;
+
 // Deprecated
 $text-color-green: $text-color-success;
 $info-text-code-color: $text-color-code;

packages/node_modules/@node-red/editor-client/src/sass/debug.scss

@@ -17,7 +17,7 @@
 .red-ui-debug-window {
     padding:0;
     margin:0;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     line-height: 20px;
     .red-ui-debug-msg-payload {
         font-size: 14px;
@@ -38,15 +38,15 @@
     left: 0px;
     right: 0px;
     z-index: 20;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     padding: 10px;
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
-    box-shadow: 0 2px 6px $shadow;
+    box-shadow: 0 2px 6px var(--red-ui-shadow);
 }
 #red-ui-sidebar-debug-filter-node-list-row {
     .red-ui-treeList-label.disabled {
         font-style: italic;
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     .red-ui-treeList-label {
@@ -57,22 +57,22 @@
             background: inherit;
         }
         &.focus, &.focus .red-ui-treeList-sublabel-text {
-            background: $list-item-background-hover !important;
+            background: var(--red-ui-list-item-background-hover) !important;
         }
     }
 }
 .red-ui-debug-msg {
     position: relative;
-    border-bottom: 1px solid $debug-message-border;
+    border-bottom: 1px solid var(--red-ui-debug-message-border);
-    border-left: 8px solid $debug-message-border;
+    border-left: 8px solid var(--red-ui-debug-message-border);
-    border-right: 8px solid $debug-message-border;
+    border-right: 8px solid var(--red-ui-debug-message-border);
     padding: 2px;
     &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
         display: none;
     }
 
     &.red-ui-debug-msg-hover {
-        border-right-color: $debug-message-border-hover;
+        border-right-color: var(--red-ui-debug-message-border-hover);
         &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools {
             display: inline-block;
         }
@@ -86,7 +86,7 @@
         display: inline-block;
     }
     &:hover {
-        background: $debug-message-background-hover;
+        background: var(--red-ui-debug-message-background-hover);
         &>.red-ui-debug-msg-tools {
             .red-ui-debug-msg-tools-copy {
                 display: inline-block;
@@ -120,20 +120,23 @@
 }
 
 .red-ui-debug-msg-meta {
-    background: $debug-message-background;
+    background: var(--red-ui-debug-message-background);
     font-size: 11px;
-    color: $secondary-text-color-inactive;
+    color: var(--red-ui-secondary-text-color-inactive);
+    overflow-wrap: anywhere;
 }
 .red-ui-debug-msg-date {
-    padding: 1px 5px 1px 1px;
+    padding: 1px 10px 1px 0px;
+    white-space: nowrap;
 }
 .red-ui-debug-msg-topic {
     display: block;
-    color: $debug-message-text-color-meta;
+    color: var(--red-ui-debug-message-text-color-meta);
 }
 .red-ui-debug-msg-name {
-    padding: 1px 5px;
+    padding: 1px 0px;
-    color: $secondary-text-color-inactive;
+    color: var(--red-ui-secondary-text-color-inactive);
+    white-space: nowrap;
 }
 .red-ui-debug-msg-tools {
     position: absolute;
@@ -149,39 +152,39 @@
 .red-ui-debug-msg-payload {
     display: block;
     padding: 2px;
-    background: $debug-message-background;
+    background: var(--red-ui-debug-message-background);
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
     font-size: 13px !important;
 }
 .red-ui-debug-msg-level-log {
-    border-left-color: $debug-message-border;
+    border-left-color: var(--red-ui-debug-message-border);
-    border-right-color: $debug-message-border;
+    border-right-color: var(--red-ui-debug-message-border);
 }
 .red-ui-debug-msg-level-30 {
-    border-left-color: $debug-message-border-warning;
+    border-left-color: var(--red-ui-debug-message-border-warning);
-    border-right-color: $debug-message-border-warning;
+    border-right-color: var(--red-ui-debug-message-border-warning);
 }
 .red-ui-debug-msg-level-20 {
-    border-left-color: $debug-message-border-error;
+    border-left-color: var(--red-ui-debug-message-border-error);
-    border-right-color: $debug-message-border-error;
+    border-right-color: var(--red-ui-debug-message-border-error);
 }
 .red-ui-debug-msg-object-entry {
     position: relative;
     padding-left: 15px;
 }
 .red-ui-debug-msg-element {
-    color: $debug-message-text-color;
+    color: var(--red-ui-debug-message-text-color);
     line-height: 1.3em;
     overflow-wrap: break-word;
 }
 .red-ui-debug-msg-object-key {
-    color: $debug-message-text-color-object-key;
+    color: var(--red-ui-debug-message-text-color-object-key);
 }
 .red-ui-debug-msg-object-value {
 
 }
 .red-ui-debug-msg-object-handle {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 1em;
     width: 1em;
     text-align: center;
@@ -216,17 +219,17 @@
     display:none;
 }
 .red-ui-debug-msg-object-entry pre {
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
     font-size: 13px;
     line-height: 1.2em;
     margin: 0 0 0 -1em;
 }
 
-.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; }
+.red-ui-debug-msg-type-other { color: var(--red-ui-debug-message-text-color-msg-type-other); }
-.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; }
+.red-ui-debug-msg-type-string { color: var(--red-ui-debug-message-text-color-msg-type-string); }
-.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;}
+.red-ui-debug-msg-type-null { color: var(--red-ui-debug-message-text-color-msg-type-null); font-style: italic;}
-.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;}
+.red-ui-debug-msg-type-meta { color: var(--red-ui-debug-message-text-color-msg-type-meta); font-style: italic;}
-.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; };
+.red-ui-debug-msg-type-number { color: var(--red-ui-debug-message-text-color-msg-type-number); }
 .red-ui-debug-msg-type-number-toggle { cursor: pointer;}
 
 .red-ui-debug-msg-type-string {
@@ -238,14 +241,14 @@
     padding: 4px 2px 2px;
     position: relative;
     &.red-ui-debug-msg-row-pinned {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-debug-msg-expandable {
     cursor: pointer;
 }
 .red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle {
-    color:$secondary-text-color-hover;
+    color:var(--red-ui-secondary-text-color-hover);
 }
 
 .red-ui-debug-msg-buffer-opts {

packages/node_modules/@node-red/editor-client/src/sass/diff.scss

@@ -23,11 +23,11 @@
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
     }
     .red-ui-diff-list {
         li {
-            background: $tertiary-background;
+            background: var(--red-ui-tertiary-background);
             padding: 0px;
             border: none;
             min-height: 0;
@@ -62,29 +62,29 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         width: 50%;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         text-align: center;
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
-        border-color:$secondary-border-color;
+        border-color:var(--red-ui-secondary-border-color);
-        border-left: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
     }
     div:last-child {
-        border-right: 1px solid $secondary-border-color;
+        border-right: 1px solid var(--red-ui-secondary-border-color);
     }
 }
 
 .red-ui-diff-dialog-toolbar {
     box-sizing: border-box;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     text-align: right;
     padding: 8px 10px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     white-space: nowrap;
 }
 .red-ui-diff-list-flow {
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 1px;
     overflow: hidden;
 
@@ -114,10 +114,10 @@
     font-size: 0.9em;
 
     &:first-child {
-        border-top: 1px solid $tertiary-border-color;
+        border-top: 1px solid var(--red-ui-tertiary-border-color);
     }
     &:not(:last-child) {
-        border-bottom: 1px solid $tertiary-border-color;
+        border-bottom: 1px solid var(--red-ui-tertiary-border-color);
     }
 
     &.collapsed {
@@ -150,8 +150,8 @@
         width: 100%;
     }
     td, th {
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
-        border-left: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
         &:first-child {
             border-left: none;
         }
@@ -166,7 +166,7 @@
             overflow:hidden;
         }
         &:hover {
-            background: $secondary-background-selected;
+            background: var(--red-ui-secondary-background-selected);
         }
 
     }
@@ -212,7 +212,7 @@
     cursor: pointer;
     padding: 0;
     &:hover {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-diff-list-flow-title-meta {
@@ -223,7 +223,7 @@
 .red-ui-diff-list-node-header {
     cursor: pointer;
     &:hover {
-        background: $secondary-background-selected;
+        background: var(--red-ui-secondary-background-selected);
     }
 }
 .red-ui-diff-list-node-icon {
@@ -232,9 +232,9 @@
     margin: 5px;
     width: 18px;
     height: 15px;
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     border-radius: 2px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
@@ -267,7 +267,7 @@
 .red-ui-diff-status-deleted {
     cursor: default !important;
     .red-ui-diff-status {
-        color: $diff-state-deleted;
+        color: var(--red-ui-diff-state-deleted);
     }
     .red-ui-diff-list-node-node {
         opacity: 0.5;
@@ -280,28 +280,28 @@
 .red-ui-diff-status-added {
     cursor: default !important;
     .red-ui-diff-status {
-        color: $diff-state-added;
+        color: var(--red-ui-diff-state-added);
     }
 }
 .red-ui-diff-status-moved {
     .red-ui-diff-status {
-        color: $diff-state-moved;
+        color: var(--red-ui-diff-state-moved);
     }
 }
 
 .red-ui-diff-status-changed {
     .red-ui-diff-status {
-        color: $diff-state-changed;
+        color: var(--red-ui-diff-state-changed);
     }
 }
 .red-ui-diff-status-unchanged {
     .red-ui-diff-status {
-        color: $diff-state-unchanged;
+        color: var(--red-ui-diff-state-unchanged);
     }
 }
 .red-ui-diff-status-conflict {
     .red-ui-diff-status {
-        color: $diff-state-conflict;
+        color: var(--red-ui-diff-state-conflict);
     }
 }
 .red-ui-diff-list-node-title {
@@ -312,7 +312,7 @@
 }
 .red-ui-diff-list-node-properties {
     margin: 0;
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-diff-status {
     display: inline-block;
@@ -329,7 +329,7 @@
 }
 
 .red-ui-diff-list-node-description {
-    color: $form-text-color;
+    color: var(--red-ui-form-text-color);
     margin-right: 5px;
     padding-top: 5px;
     display: inline-block;
@@ -340,11 +340,11 @@
     }
 }
 
-.red-ui-diff-state-added { color: $diff-state-added; }
+.red-ui-diff-state-added { color: var(--red-ui-diff-state-added); }
-.red-ui-diff-state-deleted { color: $diff-state-deleted; }
+.red-ui-diff-state-deleted { color: var(--red-ui-diff-state-deleted); }
-.red-ui-diff-state-changed { color: $diff-state-changed; }
+.red-ui-diff-state-changed { color: var(--red-ui-diff-state-changed); }
-.red-ui-diff-state-unchanged { color: $diff-state-unchanged; }
+.red-ui-diff-state-unchanged { color: var(--red-ui-diff-state-unchanged); }
-.red-ui-diff-state-conflicted { color: $diff-state-conflicted; }
+.red-ui-diff-state-conflicted { color: var(--red-ui-diff-state-conflicted); }
 
 
 .red-ui-diff-list-node-cell {
@@ -353,19 +353,19 @@
     box-sizing: border-box;
     width: calc( (100% - 20px) / 2);
     height: 32px;
-    border-left: 1px solid $secondary-border-color;
+    border-left: 1px solid var(--red-ui-secondary-border-color);
     padding-top: 2px;
     white-space: nowrap;
     overflow: hidden;
     position: relative;
 }
 .red-ui-diff-empty {
-    background: $secondary-background-disabled;
+    background: var(--red-ui-secondary-background-disabled);
     background: repeating-linear-gradient(
         20deg,
-        $secondary-background, $secondary-background 5px,
+        var(--red-ui-secondary-background), var(--red-ui-secondary-background) 5px,
-        $secondary-background-disabled 5px,
+        var(--red-ui-secondary-background-disabled) 5px,
-        $secondary-background-disabled 10px
+        var(--red-ui-secondary-background-disabled) 10px
         );
 }
 .red-ui-diff-list-node-cell:first-child {
@@ -425,10 +425,10 @@
         background: none;
     }
     &.red-ui-diff-status-changed {
-        background: $diff-state-changed-background;
+        background: var(--red-ui-diff-state-changed-background);
     }
     &.red-ui-diff-status-conflict {
-        background: $diff-state-conflict-background;
+        background: var(--red-ui-diff-state-conflict-background);
     }
 }
 
@@ -439,42 +439,42 @@ label.red-ui-diff-selectbox {
     bottom:0;
     width: 35px;
     text-align: center;
-    border-left: 1px solid $secondary-border-color;
+    border-left: 1px solid var(--red-ui-secondary-border-color);
     margin:0;
     input[type="radio"] {
         margin-top: 8px;
     }
 
     &:hover {
-        background: $secondary-background-hover;
+        background: var(--red-ui-secondary-background-hover);
     }
 }
 
 .red-ui-diff-list-node-conflict.red-ui-diff-select-remote {
     .red-ui-diff-list-node-remote {
-        background: $diff-state-added-background;
+        background: var(--red-ui-diff-state-added-background);
         label {
-            border-left-color: $diff-state-added-border;
+            border-left-color: var(--red-ui-diff-state-added-border);
         }
     }
     .red-ui-diff-list-node-local {
-        background: $diff-state-deleted-background;
+        background: var(--red-ui-diff-state-deleted-background);
         label {
-            border-left-color: $diff-state-deleted-border;
+            border-left-color: var(--red-ui-diff-state-deleted-border);
         }
     }
 }
 .red-ui-diff-list-node-conflict.red-ui-diff-select-local {
     .red-ui-diff-list-node-local {
-        background: $diff-state-added-background;
+        background: var(--red-ui-diff-state-added-background);
         label {
-            border-left-color: $diff-state-added-border;
+            border-left-color: var(--red-ui-diff-state-added-border);
         }
     }
     .red-ui-diff-list-node-remote {
-        background: $diff-state-deleted-background;
+        background: var(--red-ui-diff-state-deleted-background);
         label {
-            border-left-color: $diff-state-deleted-border;
+            border-left-color: var(--red-ui-diff-state-deleted-border);
         }
     }
 }
@@ -500,10 +500,10 @@ ul.red-ui-deploy-dialog-confirm-list {
         width: 30px;
         margin-right: 10px;
         &.fa-check {
-            color: $text-color-success;
+            color: var(--red-ui-text-color-success);
         }
         &.fa-exclamation {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     div {
@@ -529,7 +529,7 @@ ul.red-ui-deploy-dialog-confirm-list {
 
     table.red-ui-diff-text-content {
         margin: 10px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-radius: 3px;
         table-layout: fixed;
         width: calc(100% - 20px);
@@ -538,88 +538,88 @@ ul.red-ui-deploy-dialog-confirm-list {
             word-wrap: break-word;
         }
         td.lineno {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             text-align: right;
-            color: $tertiary-text-color;
+            color: var(--red-ui-tertiary-text-color);
-            background: $tertiary-background;
+            background: var(--red-ui-tertiary-background);
             padding: 1px 5px;
             &.added {
-                background: $diff-state-added-header-background;
+                background: var(--red-ui-diff-state-added-header-background);
             }
             &.removed {
-                background: $diff-state-deleted-header-background;
+                background: var(--red-ui-diff-state-deleted-header-background);
             }
         }
         td.lineno:nth-child(3) {
-            border-left: 1px solid $secondary-border-color;
+            border-left: 1px solid var(--red-ui-secondary-border-color);
         }
         td.linetext {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             white-space: pre-wrap;
             padding: 1px 5px;
-            border-left: 1px solid $tertiary-border-color;
+            border-left: 1px solid var(--red-ui-tertiary-border-color);
             span.prefix {
                 width: 30px;
                 display: inline-block;
                 text-align: center;
-                color: $diff-state-prefix-color;
+                color: var(--red-ui-diff-state-prefix-color);
             }
 
             &.added {
-                border-left-color: $diff-state-added-header-border;
+                border-left-color: var(--red-ui-diff-state-added-header-border);
             }
             &.removed {
-                border-left-color: $diff-state-deleted-header-border;
+                border-left-color: var(--red-ui-diff-state-deleted-header-border);
             }
         }
         td.blank {
-            background: $tertiary-background;
+            background: var(--red-ui-tertiary-background);
         }
         td.added {
-            background: $diff-state-added-background;
+            background: var(--red-ui-diff-state-added-background);
-            color: $diff-state-color;
+            color: var(--red-ui-diff-state-color);
         }
         td.removed {
-            background: $diff-state-deleted-background;
+            background: var(--red-ui-diff-state-deleted-background);
-            color: $diff-state-color;
+            color: var(--red-ui-diff-state-color);
         }
         tr.mergeHeader td {
-            color: $diff-merge-header-color;
+            color: var(--red-ui-diff-merge-header-color);
-            background: $diff-merge-header-background;
+            background: var(--red-ui-diff-merge-header-background);
             height: 26px;
             vertical-align: middle;
         }
         tr.mergeHeader-separator td {
-            color: $diff-merge-header-color;
+            color: var(--red-ui-diff-merge-header-color);
-            background: $diff-merge-header-border-color;
+            background: var(--red-ui-diff-merge-header-border-color);
             height: 0px;
         }
         tr.mergeHeader-ours td {
-            border-top: 2px solid $diff-merge-header-border-color;
+            border-top: 2px solid var(--red-ui-diff-merge-header-border-color);
         }
         tr.mergeHeader-theirs td {
-            border-bottom: 2px solid $diff-merge-header-border-color;
+            border-bottom: 2px solid var(--red-ui-diff-merge-header-border-color);
         }
         td.unchanged {
-            background: $diff-state-unchanged-background;
+            background: var(--red-ui-diff-state-unchanged-background);
-            color: $diff-state-unchanged;
+            color: var(--red-ui-diff-state-unchanged);
         }
         tr.unchanged {
-            background: $diff-state-unchanged-background;
+            background: var(--red-ui-diff-state-unchanged-background);
         }
         tr.start-block {
-            border-top: 1px solid $secondary-border-color;
+            border-top: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.end-block {
-            border-bottom: 1px solid $secondary-border-color;
+            border-bottom: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.red-ui-diff-text-file-header td {
             .filename {
-                font-family: $monospace-font;
+                font-family: var(--red-ui-monospace-font);
             }
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
             padding: 5px 10px 5px 0;
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             cursor: pointer;
             i.red-ui-diff-list-chevron {
                 width: 30px;
@@ -631,17 +631,17 @@ ul.red-ui-deploy-dialog-confirm-list {
             }
         }
         tr.red-ui-diff-text-commit-header td {
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
             padding: 5px 10px;
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             h3 {
                 font-size: 1.4em;
                 margin: 0;
             }
             .commit-summary {
-                border-top: 1px solid $secondary-border-color;
+                border-top: 1px solid var(--red-ui-secondary-border-color);
                 padding-top: 5px;
-                color: $secondary-text-color;
+                color: var(--red-ui-secondary-text-color);
             }
             .commit-body {
                 margin-bottom:15px;
@@ -651,20 +651,20 @@ ul.red-ui-deploy-dialog-confirm-list {
         }
 
         tr.red-ui-diff-text-header > td:not(.red-ui-diff-flow-diff) {
-            font-family: $monospace-font;
+            font-family: var(--red-ui-monospace-font);
             padding: 5px 10px;
             text-align: left;
-            color: $diff-text-header-color;
+            color: var(--red-ui-diff-text-header-color);
-            background: $diff-text-header-background;
+            background: var(--red-ui-diff-text-header-background);
             height: 30px;
             vertical-align: middle;
-            border-top: 1px solid $secondary-border-color;
+            border-top: 1px solid var(--red-ui-secondary-border-color);
-            border-bottom: 1px solid $secondary-border-color;
+            border-bottom: 1px solid var(--red-ui-secondary-border-color);
         }
         tr.red-ui-diff-text-expand td {
             cursor: pointer;
             &:hover {
-                background: $diff-text-header-background;
+                background: var(--red-ui-diff-text-header-background);
             }
         }
     }

packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss

@@ -18,7 +18,7 @@
     position: absolute;
     top: 0; bottom: 0;
     left: 0; right: 0;
-    background: $dnd-background;
+    background: var(--red-ui-dnd-background);
     display:table;
     width: 100%;
     height: 100%;
@@ -30,7 +30,7 @@
         vertical-align: middle;
         text-align: center;
         font-size: 40px;
-        color: $dnd-color;
+        color: var(--red-ui-dnd-color);
         i {
             pointer-events: none;
             font-size: 80px;

packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss

@@ -15,8 +15,8 @@
  **/
 
 .red-ui-menu-dropdown {
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
-    font-size: $primary-font-size;
+    font-size: var(--red-ui-primary-font-size);
     position: absolute;
     top: 100%;
     width: 230px;
@@ -28,9 +28,9 @@
     margin-left: 0px !important;
     padding: 5px 0;
     list-style: none;
-    background: $menuBackground;
+    background: var(--red-ui-menuBackground);
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
-    box-shadow: 0 5px 10px $shadow;
+    box-shadow: 0 5px 10px var(--red-ui-shadow);
 
     &.pull-right {
         right: 0;
@@ -41,7 +41,7 @@
         height: 1px;
         margin: 9px 1px;
         overflow: hidden;
-        background-color: $menuDivider;
+        background-color: var(--red-ui-menuDivider);
     }
     & > li > a,
     & > li > a:focus {
@@ -50,27 +50,45 @@
         clear: both;
         font-weight: normal;
         line-height: 20px;
-        color: $menuColor;
+        color: var(--red-ui-menuColor);
         white-space: normal !important;
         outline: none;
     }
+    & > li.pull-left > a,
+    & > li.pull-left > a:focus {
+        padding: 4px 12px 4px 32px;
+    }
+    &.red-ui-menu-dropdown-noicons > li > a,
+    &.red-ui-menu-dropdown-noicons > li > a:focus {
+        padding: 4px 12px 4px 12px;
+    }
+
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a,
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a:focus {
+        padding-right: 20px;
+    }
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a,
+    &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a:focus {
+        padding-left: 20px;
+    }
+
 
     & > .active > a,
     & > .active > a:hover,
     & > .active > a:focus {
-        color: $menuActiveColor;
+        color: var(--red-ui-menuActiveColor);
         text-decoration: none;
-        background-color: $menuActiveBackground;
+        background-color: var(--red-ui-menuActiveBackground);
         outline: 0;
     }
 
     & > .disabled > a,
     & > .disabled > a:hover,
     & > .disabled > a:focus {
-        color: $menuDisabledColor;
+        color: var(--red-ui-menuDisabledColor);
         .red-ui-popover-key {
-            color: $menuDisabledColor;
+            color: var(--red-ui-menuDisabledColor);
-            border-color: $menuDisabledColor;
+            border-color: var(--red-ui-menuDisabledColor);
         }
     }
 
@@ -118,8 +136,8 @@
             padding: 0;
             font-size: 13px;
             // float: right;
-            color: $menuColor;
+            color: var(--red-ui-menuColor);
-            border-color: $menuColor;
+            border-color: var(--red-ui-menuColor);
         }
     }
 
@@ -136,17 +154,17 @@
 .red-ui-menu-dropdown > li > a:focus,
 .red-ui-menu-dropdown-submenu:hover > a,
 .red-ui-menu-dropdown-submenu:focus > a {
-    color: $menuHoverColor;
+    color: var(--red-ui-menuHoverColor);
     text-decoration: none;
-    background-color: $menuHoverBackground;
+    background-color: var(--red-ui-menuHoverBackground);
 }
 
 .red-ui-menu-dropdown-submenu {
     position: relative;
     & > .red-ui-menu-dropdown {
         top: 0;
-        left: 100%;
+        left: calc(100% - 5px);
-        margin-top: -6px;
+        margin-top: 0;
         margin-left: -1px;
     }
     &.open > .red-ui-menu-dropdown,
@@ -161,7 +179,7 @@
       margin-top: 5px;
       margin-right: -10px;
       border-color: transparent;
-      border-left-color: $menuCaret;
+      border-left-color: var(--red-ui-menuCaret);
       border-style: solid;
       border-width: 5px 0 5px 5px;
       content: " ";
@@ -175,32 +193,50 @@
     }
 }
 
-.red-ui-menu-dropdown-submenu>a:after {
+.red-ui-menu-dropdown-submenu.pull-left>a:after {
     display: none;
 }
-.red-ui-menu-dropdown-submenu>a:before {
+.red-ui-menu-dropdown-submenu.pull-left>a:before {
     display: block;
     float: left;
     width: 0;
     height: 0;
     margin-top: 5px;
-    margin-left: -30px;
+    margin-left: -15px;
     /* Caret Arrow */
     border-color: transparent;
-    border-right-color: $menuCaret;
+    border-right-color: var(--red-ui-menuCaret);
     border-style: solid;
     border-width: 5px 5px 5px 0;
     content: " ";
 }
-
+.red-ui-menu-dropdown-direction-right {
+    .red-ui-menu-dropdown-submenu>a:after {
+        display: none;
+    }
+    .red-ui-menu-dropdown-submenu>a:before {
+        display: block;
+        float: right;
+        width: 0;
+        height: 0;
+        margin-top: 5px;
+        margin-right: -15px;
+        /* Caret Arrow */
+        border-color: transparent;
+        border-left-color: var(--red-ui-menuCaret);
+        border-style: solid;
+        border-width: 5px 0 5px 5px;
+        content: " ";
+    }
+}
 .red-ui-menu-dropdown-submenu.disabled > a:before {
-    border-right-color: $menuCaret;
+    border-right-color: var(--red-ui-menuCaret);
 }
 
 
 // Menu NG
 ul.red-ui-menu:not(.red-ui-menu-dropdown) {
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
     font-size: 12px;
     list-style-type: none;
     padding: 0;
@@ -211,14 +247,14 @@ ul.red-ui-menu:not(.red-ui-menu-dropdown) {
         clear: both;
         font-weight: normal;
         line-height: 20px;
-        color: $menuColor;
+        color: var(--red-ui-menuColor);
         white-space: nowrap;
         text-decoration: none;
 
         &:hover,&:focus {
-            color: $menuHoverColor;
+            color: var(--red-ui-menuHoverColor);
             text-decoration: none;
-            background-color: $menuHoverBackground;
+            background-color: var(--red-ui-menuHoverBackground);
             border: none;
             outline: none;
         }

packages/node_modules/@node-red/editor-client/src/sass/editor.scss

@@ -32,9 +32,9 @@
     width: auto;
     right: -1000px;
     bottom: 0;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
-    border-left: 1px solid $secondary-border-color;
+    border-left: 1px solid var(--red-ui-secondary-border-color);
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing: content-box;
 }
 .red-ui-tray.open {
@@ -67,8 +67,8 @@
     position: relative;
     box-sizing: border-box;
     font-weight: bold;
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
-    background: $palette-header-background;
+    background: var(--red-ui-palette-header-background);
     &:after {
         content: "";
         display: table;
@@ -88,8 +88,8 @@
         height: 26px;
         line-height: 26px;
         &.toggle:not(.selected) {
-            color: $workspace-button-color-selected !important;
+            color: var(--red-ui-workspace-button-color-selected) !important;
-            background: $workspace-button-background-active;
+            background: var(--red-ui-workspace-button-background-active);
         }
     }
 
@@ -116,8 +116,8 @@
 }
 
 .red-ui-tray-titlebar {
-    color: $header-text-color;
+    color: var(--red-ui-header-text-color);
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     padding: 8px;
 }
 .red-ui-editor ul.red-ui-tray-breadcrumbs {
@@ -131,7 +131,7 @@
         margin:0;
 
         &:not(:last-child) {
-            color: $workspace-button-color;
+            color: var(--red-ui-workspace-button-color);
             font-weight: normal;
 
             &:after {
@@ -149,13 +149,29 @@
     bottom: 0px;
     width: 7px;
     left: -9px;
-    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
+    background-color: var(--red-ui-primary-background);
     cursor: col-resize;
-    border-left: 1px solid $primary-border-color;
+    border-left: 1px solid var(--red-ui-primary-border-color);
-    box-shadow: -1px 0 6px $shadow;
+    box-shadow: -1px 0 6px var(--red-ui-shadow);
+
+    &:before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        -webkit-mask-image: url(images/grip.svg);
+        mask-image: url(images/grip.svg);
+        -webkit-mask-size: auto;
+        mask-size: auto;
+        -webkit-mask-position: 50% 50%;
+        mask-position: 50% 50%;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        background-color: var(--red-ui-grip-color);
+    }
     
     &.red-ui-tray-resize-maximised {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         cursor: default;
     }
 }
@@ -166,10 +182,10 @@ button.red-ui-tray-resize-button {
     height: 37px;
     line-height: 35px;
     border: none;
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     margin: 0;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
-    color: $workspace-button-color;
+    color: var(--red-ui-workspace-button-color);
 }
 
 .red-ui-editor .red-ui-tray {
@@ -187,16 +203,16 @@ button.red-ui-tray-resize-button {
     }
 
     .input-error {
-        border-color: $form-input-border-error-color !important;
+        border-color: var(--red-ui-form-input-border-error-color) !important;
     }
 
     .input-updated {
-        border-color: $node-selected-color !important;
+        border-color: var(--red-ui-node-selected-color) !important;
     }
 
     .form-row {
         clear: both;
-        color: $form-text-color;
+        color: var(--red-ui-form-text-color);
         margin-bottom:12px;
     }
     .form-row label {
@@ -207,10 +223,10 @@ button.red-ui-tray-resize-button {
         width:70%;
     }
     .form-tips {
-        background: $form-tips-background;
+        background: var(--red-ui-form-tips-background);
         padding: 8px;
         border-radius: 2px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         max-width: 450px;
     }
     .form-tips code {
@@ -222,7 +238,7 @@ button.red-ui-tray-resize-button {
     }
 
     .form-warning {
-        border-color: $text-color-error;
+        border-color: var(--red-ui-text-color-error);
     }
 }
 
@@ -239,11 +255,11 @@ button.red-ui-tray-resize-button {
     }
 }
 .red-ui-editor-text-container {
-    border:1px solid $tertiary-border-color;
+    border:1px solid var(--red-ui-tertiary-border-color);
     border-radius:5px;
     overflow: hidden;
-    font-size: $primary-font-size !important;
+    font-size: var(--red-ui-primary-font-size !important);
-    font-family: $monospace-font !important;
+    font-family: var(--red-ui-monospace-font !important);
     height: 100%;
 
     &.red-ui-editor-text-container-toolbar {
@@ -286,7 +302,7 @@ button.red-ui-button-small
 #red-ui-editor-config-scope-warning {
     display: inline-block;
     margin-right: 5px;
-    color: $text-color-warning;
+    color: var(--red-ui-text-color-warning);
     vertical-align: middle;
 }
 #red-ui-editor-config-scope {
@@ -342,18 +358,18 @@ button.red-ui-button-small
         padding: 20px 20px 10px;
         &:last-child {
             padding-top: 60px;
-            background: $primary-background;
+            background: var(--red-ui-primary-background);
 
         }
     }
 }
 .red-ui-editor-type-markdown-panel-preview {
     padding: 10px;
-    border:1px solid $secondary-border-color;
+    border:1px solid var(--red-ui-secondary-border-color);
     border-radius:5px;
     height: calc(100% - 21px);
     overflow-y: scroll;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
 }
 
 #red-ui-clipboard-hidden {
@@ -386,7 +402,7 @@ button.red-ui-button-small
     span {
         padding-left: 50px;
         width: 100px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
 }
 
@@ -411,14 +427,14 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
 
 .red-ui-group-layout-picker {
     padding: 5px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
 }
 .red-ui-group-layout-picker-cell-text {
     position: absolute;
     width: 14px;
     height: 2px;
-    border-top: 2px solid $secondary-text-color;
+    border-top: 2px solid var(--red-ui-secondary-text-color);
-    border-bottom: 2px solid $secondary-text-color;
+    border-bottom: 2px solid var(--red-ui-secondary-text-color);
     margin: 2px;
 
     &.red-ui-group-layout-text-pos-nw { top: 0; left: 0; }
@@ -435,7 +451,7 @@ button.red-ui-button.red-ui-editor-node-appearance-button {
         background-color: #FFF;
         background-size: 100% 100%;
         background-position: 0 0, 50% 50%;
-        background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent);
+        background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent);
         border: none;
     }
 }
@@ -459,17 +475,17 @@ button.red-ui-group-layout-picker-none {
         width: 100%;
         margin-bottom: 0;
         border: none;
-        border-bottom: 1px solid $form-input-border-color;
+        border-bottom: 1px solid var(--red-ui-form-input-border-color);
     }
     small {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         margin-left: 5px;
         margin-right: 4px;
         display: inline-block;
         min-width: 35px;
         text-align: right;
     }
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 .red-ui-editor-node-appearance-button {
     .red-ui-search-result-node {
@@ -480,7 +496,7 @@ button.red-ui-group-layout-picker-none {
     padding: 0;
     border-style: solid;
     border-width: 1px;
-    border-color: $secondary-border-color;
+    border-color: var(--red-ui-secondary-border-color);
 }
 .red-ui-color-picker-swatch {
     position: absolute;
@@ -493,7 +509,7 @@ button.red-ui-group-layout-picker-none {
     background-color: #FFF;
     background-size: 100% 100%;
     background-position: 0 0, 50% 50%;
-    background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%,  transparent 55%, transparent)
+    background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%,  transparent 55%, transparent)
 }
 .red-ui-search-result-node .red-ui-color-picker-cell-none {
     border-radius: 4px;
@@ -520,7 +536,7 @@ button.red-ui-group-layout-picker-none {
     top:0;right:0;left:0;bottom:0;
     background-image:linear-gradient(90deg, transparent 0%, #f00 100%);
     background-size: 100% 100%;
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
 }
 
 div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
@@ -531,9 +547,9 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     width: 10px;
     height: 22px;
     padding: 0;
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
     border-radius: 1px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     box-sizing: border-box;
 }
 .red-ui-icon-picker {
@@ -551,10 +567,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     position: relative;
     &.red-ui-icon-list-dark {
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
         .red-ui-palette-icon-container {
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
             border-radius: 4px;
         }
     }
@@ -567,10 +583,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     border-radius: 4px;
 
     &:hover {
-        background: $list-item-background-hover;
+        background: var(--red-ui-list-item-background-hover);
     }
     &.selected {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
         .red-ui-search-result-node {
             // border-color: white;
         }
@@ -581,22 +597,22 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     }
 }
 .red-ui-icon-list-module {
-    background: $palette-header-background;
+    background: var(--red-ui-palette-header-background);
     font-size: 0.9em;
     padding: 3px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     clear: both;
     i {
         margin-right: 5px;
     }
 }
 .red-ui-icon-meta {
-    border-top: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     height: 24px;
     span {
         padding: 4px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         font-size: 0.9em;
         line-height: 24px;
     }
@@ -614,7 +630,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
 .red-ui-editor-type-json-editor {
     height: calc(100% - 10px);
     .red-ui-treeList-container {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
     }
     .red-ui-treeList-label {
         padding-top: 0;
@@ -631,7 +647,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
             vertical-align: middle;
         }
         &:hover, &:hover .red-ui-treeList-sublabel-text {
-            background: $secondary-background-disabled;
+            background: var(--red-ui-secondary-background-disabled);
             .red-ui-editor-type-json-editor-item-gutter {
                 > span, > button {
                     display: inline-block;
@@ -640,11 +656,11 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
         }
         &.selected {
             .red-ui-editor-type-json-editor-item-gutter {
-                background: $secondary-background-hover;
+                background: var(--red-ui-secondary-background-hover);
             }
             &:hover {
                 .red-ui-editor-type-json-editor-item-gutter {
-                    background: $secondary-background-selected;
+                    background: var(--red-ui-secondary-background-selected);
                 }
             }
         }
@@ -682,9 +698,13 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     border: 2px solid rgba(0,0,0,0);
     border-radius: 3px;
     &:not(.red-ui-editor-type-json-editor-label-array-key):hover {
-        border-color: $list-item-background-hover;
+        border-color: var(--red-ui-list-item-background-hover);
         border-style: dashed;
     }
+    &.readonly {
+        cursor: pointer;
+        pointer-events: none;
+    }
 }
 .red-ui-editor-type-json-editor-item-gutter {
     width: 48px;
@@ -692,8 +712,8 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
 
     height: 100%;
     line-height: 35px;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
-    background: $secondary-background-disabled;
+    background: var(--red-ui-secondary-background-disabled);
     > span {
         display: inline-block;
         height: 35px;
@@ -704,6 +724,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle {
     > span, > button {
         display: none;
     }
+    &.readonly {
+        cursor: pointer;
+        pointer-events: none;
+    }
 }
 
 
@@ -731,7 +755,7 @@ button.red-ui-toggleButton.toggle {
     }
     >div:first-child {
         font-size: 0.9em;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         margin: 3px 0 -4px;
         >div {
             padding-left: 3px;
@@ -743,15 +767,15 @@ button.red-ui-toggleButton.toggle {
             line-height: 30px;
             display: inline-block;
             box-sizing: border-box;
-            // border-left: 2px dashed $secondary-border-color;
+            // border-left: 2px dashed var(--red-ui-secondary-border-color);
-            // border-bottom: 2px dashed $secondary-border-color;
+            // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
-            // border: 1px dashed $secondary-border-color;
+            // border: 1px dashed var(--red-ui-secondary-border-color);
             border-right: none;
             &:not(:first-child) {
                 padding: 3px;
             }
             // &:last-child {
-            //     border-right: 1px dashed $secondary-border-color;
+            //     border-right: 1px dashed var(--red-ui-secondary-border-color);
             // }
             .placeholder-input {
                 position: relative;
@@ -776,8 +800,8 @@ button.red-ui-toggleButton.toggle {
                         height: 100%;
                         width: 20px;
                         text-align:center;
-                        border-right: 1px solid $secondary-border-color;
+                        border-right: 1px solid var(--red-ui-secondary-border-color);
-                        background: $tertiary-background;
+                        background: var(--red-ui-tertiary-background);
                     }
                 }
                 input[type="checkbox"] {
@@ -793,13 +817,13 @@ button.red-ui-toggleButton.toggle {
             .red-ui-editableList-item-handle {
                 position:relative;
                 top: 0px;
-                color: $tertiary-text-color;
+                color: var(--red-ui-tertiary-text-color);
             }
         }
         >div:nth-child(2) {
             margin: 4px;
             height: 32px;
-            border: 1px dashed $secondary-border-color;
+            border: 1px dashed var(--red-ui-secondary-border-color);
             text-align: center;
             a {
                 display: block;
@@ -807,7 +831,7 @@ button.red-ui-toggleButton.toggle {
                 height: 100%;
                 line-height: 32px;
                 &:hover {
-                    background: $secondary-background-hover;
+                    background: var(--red-ui-secondary-background-hover);
                 }
                 i {
                     height: 100%;
@@ -827,7 +851,7 @@ button.red-ui-toggleButton.toggle {
 span.red-ui-editor-subflow-env-lang-icon {
     position: absolute;
     display: inline-block;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     opacity: 0.8;
     width: 20px;
     line-height: 32px;
@@ -840,12 +864,12 @@ span.red-ui-editor-subflow-env-lang-icon {
 }
 
 .red-ui-editor-subflow-env-input-type {
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     height: 100%;
     box-sizing: border-box;
 }
 .red-ui-editor-subflow-env-input-type-placeholder {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     padding-left: 4px;
 }
 
@@ -862,7 +886,7 @@ span.red-ui-editor-subflow-env-lang-icon {
 //             border-top: none;
 //         }
 //         &.ui-sortable-helper {
-//             border: 2px dashed $secondary-border-color;
+//             border: 2px dashed var(--red-ui-secondary-border-color);
 //             .red-ui-editableList-item-content {
 //                 >div {
 //                     border: none;
@@ -877,15 +901,15 @@ span.red-ui-editor-subflow-env-lang-icon {
 //         >div>div {
 //             display: inline-block;
 //             box-sizing: border-box;
-//             border-left: 1px dashed $secondary-border-color;
+//             border-left: 1px dashed var(--red-ui-secondary-border-color);
-//             border-bottom: 1px dashed $secondary-border-color;
+//             border-bottom: 1px dashed var(--red-ui-secondary-border-color);
 //         }
 //         >div:first-child {
 //             font-size: 0.9em;
 //             display: grid;
 //             grid-template-columns: 25px auto 20px;
 //             >div {
-//                 border-top: 1px dashed $secondary-border-color;
+//                 border-top: 1px dashed var(--red-ui-secondary-border-color);
 //                 padding: 1px;
 //             }
 //             >div:nth-child(3) {
@@ -905,9 +929,9 @@ span.red-ui-editor-subflow-env-lang-icon {
 //                 // line-height: 30px;
 //                 // box-sizing: border-box;
 //                 //
-//                 // border-left: 2px dashed $secondary-border-color;
+//                 // border-left: 2px dashed var(--red-ui-secondary-border-color);
 //                 border-top: none;
-//                 // border-bottom: 2px dashed $secondary-border-color;
+//                 // border-bottom: 2px dashed var(--red-ui-secondary-border-color);
 //                 &:not(:first-child) {
 //                     padding: 6px 3px;
 //                 }
@@ -939,7 +963,7 @@ span.red-ui-editor-subflow-env-lang-icon {
 //                     height: 100%;
 //                     line-height: 45px;
 //                     &:hover {
-//                         background: $secondary-background-hover;
+//                         background: var(--red-ui-secondary-background-hover);
 //                     }
 //                 }
 //             }
@@ -969,11 +993,11 @@ span.red-ui-editor-subflow-env-lang-icon {
 // }
 .red-ui-editor-subflow-ui-edit-panel {
     padding-bottom: 3px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     .red-ui-editableList-border {
         border: none;
         border-radius: 0;
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
     }
     .red-ui-editableList-container {
     }
@@ -981,10 +1005,10 @@ span.red-ui-editor-subflow-env-lang-icon {
         margin-left: 2px;
     }
     .red-ui-editableList-header {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         display: grid;
         grid-template-columns: 50% 50%;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         div:first-child {
             padding-left: 23px;
         }
@@ -995,7 +1019,7 @@ span.red-ui-editor-subflow-env-lang-icon {
     .red-ui-editableList-container {
         padding: 0 1px;
         li {
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
             // border-bottom: none;
             padding: 0;
             .red-ui-editableList-item-content {
@@ -1010,14 +1034,14 @@ span.red-ui-editor-subflow-env-lang-icon {
                 margin-bottom: 0;
                 border:none;
                 width: 100%;
-                border-right: 1px solid $secondary-border-color;
+                border-right: 1px solid var(--red-ui-secondary-border-color);
 
                 border-radius: 0;
                 &:focus {
-                    box-shadow: 0 0 0 1px inset $form-input-focus-color;
+                    box-shadow: 0 0 0 1px inset var(--red-ui-form-input-focus-color);
                 }
                 &:first-child {
-                    border-left: 1px solid $secondary-border-color;
+                    border-left: 1px solid var(--red-ui-secondary-border-color);
                 }
             }
             button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger {
@@ -1107,7 +1131,7 @@ span.red-ui-editor-subflow-env-lang-icon {
         border-top-left-radius: 4px;
         border-top-right-radius: 4px;
 
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         padding: 0;
         >div {
             display: grid;

packages/node_modules/@node-red/editor-client/src/sass/flow.scss

@@ -16,14 +16,14 @@
 
 .nr-ui-view-lasso {
     stroke-width: 1px;
-    stroke: $view-lasso-stroke;
+    stroke: var(--red-ui-view-lasso-stroke);
-    fill: $view-lasso-fill;
+    fill: var(--red-ui-view-lasso-fill);
     stroke-dasharray: 10 5;
 }
 
 .nr-ui-view-slice {
     stroke-width: 1px;
-    stroke: $view-lasso-stroke;
+    stroke: var(--red-ui-view-lasso-stroke);
     fill: none;
     stroke-dasharray: 10 5;
 }
@@ -33,11 +33,11 @@
     font-style: italic;
 }
 .red-ui-flow-node-label-white {
-    fill: $view-background !important;
+    fill: var(--red-ui-view-background) !important;
 }
 .red-ui-flow-node-label {
     stroke-width: 0;
-    fill: $node-label-color;
+    fill: var(--red-ui-node-label-color);
     font-size: 14px;
     pointer-events: none;
     -webkit-touch-callout: none;
@@ -54,7 +54,7 @@
 
 .red-ui-flow-port-label {
     stroke-width: 0;
-    fill: $node-port-label-color;
+    fill: var(--red-ui-node-port-label-color);
     font-size: 16px;
     dominant-baseline: middle;
     text-anchor: middle;
@@ -65,7 +65,7 @@
 
 
 .red-ui-flow-node {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     cursor: move;
     stroke-width: 1;
 }
@@ -80,7 +80,7 @@
         opacity: 0.9;
         .red-ui-flow-node {
             stroke-width: 2;
-            stroke: $node-selected-color !important;
+            stroke: var(--red-ui-node-selected-color) !important;
             stroke-dasharray: 10, 4;
         }
     }
@@ -95,53 +95,53 @@
     }
     &.red-ui-flow-group-active-hovered:not(.red-ui-flow-group-hovered) {
         .red-ui-flow-group-outline-select {
-            stroke: $link-link-color;
+            stroke: var(--red-ui-link-link-color);
         }
     }
 }
 
 .red-ui-flow-group-outline {
     fill: none;
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
     stroke-opacity: 0;
     stroke-width: 12;
     pointer-events: stroke;
 }
 .red-ui-flow-group-outline-select {
     fill: none;
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
     pointer-events: stroke;
     stroke-opacity: 0;
     stroke-width: 3;
 
     &.red-ui-flow-group-outline-select-background {
-        stroke: $view-background;
+        stroke: var(--red-ui-view-background);
         stroke-width: 6;
     }
 }
 .red-ui-flow-group-body {
     pointer-events: none;
-    fill: $group-default-fill;
+    fill: var(--red-ui-group-default-fill);
-    fill-opacity: $group-default-fill-opacity;
+    fill-opacity: var(--red-ui-group-default-fill-opacity);
     stroke-width: 2;
-    stroke: $group-default-stroke;
+    stroke: var(--red-ui-group-default-stroke);
-    stroke-opacity: $group-default-stroke-opacity;
+    stroke-opacity: var(--red-ui-group-default-stroke-opacity);
 }
 .red-ui-flow-group-label {
     @include disable-selection;
-    fill: $group-default-label-color;
+    fill: var(--red-ui-group-default-label-color);
 }
 
 
 
 .red-ui-flow-node-unknown {
     stroke-dasharray:10,4;
-    stroke: $node-border-unknown;
+    stroke: var(--red-ui-node-border-unknown);
 }
 .red-ui-flow-node-placeholder {
     stroke-dasharray:10,4;
-    stroke: $node-border-placeholder;
+    stroke: var(--red-ui-node-border-placeholder);
-    fill: $node-background-placeholder;
+    fill: var(--red-ui-node-background-placeholder);
     opacity: 0.5;
     stroke-width: 2;
 }
@@ -152,19 +152,19 @@
     .fa-lg {
         @include disable-selection;
         stroke: none;
-        fill: $node-icon-color;
+        fill: var(--red-ui-node-icon-color);
         text-anchor: middle;
         font-family: FontAwesome;
     }
 }
 .red-ui-flow-node-icon-shade {
     stroke: none;
-    fill: $node-icon-background-color-fill;
+    fill: var(--red-ui-node-icon-background-color-fill);
-    fill-opacity: $node-icon-background-color-opacity;
+    fill-opacity: var(--red-ui-node-icon-background-color-opacity);
 }
 .red-ui-flow-node-icon-shade-border {
-    stroke-opacity: $node-icon-border-color-opacity;
+    stroke-opacity: var(--red-ui-node-icon-border-color-opacity);
-    stroke: $node-icon-border-color;
+    stroke: var(--red-ui-node-icon-border-color);
     stroke-width: 1;
 }
 
@@ -176,32 +176,39 @@
             cursor: default;
         }
     }
+    &.red-ui-flow-node-button-stopped {
+        opacity: 0.4;
+        .red-ui-flow-node-button-button {
+            cursor: default;
+            pointer-events: none;
+        }
+    }
 }
 .red-ui-flow-node-button-button {
     cursor: pointer;
 }
 .red-ui-flow-node-button-background {
-    fill: $node-background-placeholder;
+    fill: var(--red-ui-node-background-placeholder);
 }
 
 .red-ui-flow-port {
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
     stroke-width: 1;
-    fill: $node-port-background;
+    fill: var(--red-ui-node-port-background);
     cursor: crosshair;
 }
 
 .red-ui-flow-node-error {
-    fill: $node-status-error-background;
+    fill: var(--red-ui-node-status-error-background);
-    stroke: $node-status-error-border;
+    stroke: var(--red-ui-node-status-error-border);
     stroke-width:1px;
     cursor: default;
     stroke-linejoin: round;
     stroke-linecap: round;
 }
 .red-ui-flow-node-changed {
-    fill: $node-status-changed-background;
+    fill: var(--red-ui-node-status-changed-background);
-    stroke: $node-status-changed-border;
+    stroke: var(--red-ui-node-status-changed-border);
     cursor: default;
     stroke-width:1px;
     stroke-linejoin: round;
@@ -214,13 +221,13 @@ g.red-ui-flow-node-selected {
     }
     .red-ui-flow-node,.red-ui-flow-subflow-port {
         stroke-width: 2;
-        stroke: $node-selected-color !important;
+        stroke: var(--red-ui-node-selected-color) !important;
     }
 }
 .red-ui-flow-node-highlighted {
-    border-color: $node-selected-color !important;
+    border-color: var(--red-ui-node-selected-color) !important;
     border-style: dashed !important;
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
     stroke-width: 3;
     stroke-dasharray: 8, 4;
 }
@@ -236,7 +243,7 @@ g.red-ui-flow-node-selected {
     .red-ui-flow-link-line {
         stroke-dasharray: 10,8 !important;
         stroke-width: 2 !important;
-        stroke: $link-disabled-color;
+        stroke: var(--red-ui-link-disabled-color);
     }
     .red-ui-flow-port {
         fill-opacity: 1;
@@ -254,7 +261,7 @@ g.red-ui-flow-node-selected {
     &.red-ui-flow-link-line {
         stroke-dasharray: 10,8 !important;
         stroke-width: 2 !important;
-        stroke: $link-disabled-color;
+        stroke: var(--red-ui-link-disabled-color);
     }
     .red-ui-flow-port {
         fill-opacity: 1;
@@ -263,49 +270,49 @@ g.red-ui-flow-node-selected {
 }
 @each $current-color in red green yellow blue grey gray {
     .red-ui-flow-node-status-dot-#{""+$current-color} {
-        fill: map-get($node-status-colors,$current-color);
+        fill: var(--red-ui-node-status-colors-#{"" + $current-color});
-        stroke: map-get($node-status-colors,$current-color);
+        stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
     }
     .red-ui-flow-node-status-ring-#{""+$current-color} {
-        fill: $view-background;
+        fill: var(--red-ui-view-background);
-        stroke: map-get($node-status-colors,$current-color);
+        stroke: var(--red-ui-node-status-colors-#{"" + $current-color});
     }
 }
 
 .red-ui-flow-node-status-label {
     @include disable-selection;
     stroke-width: 0;
-    fill: $secondary-text-color;
+    fill: var(--red-ui-secondary-text-color);
     font-size:9pt;
     text-anchor:start;
 }
 
 .red-ui-flow-port-hovered {
-    stroke: $port-selected-color;
+    stroke: var(--red-ui-port-selected-color);
-    fill:  $port-selected-color;
+    fill:  var(--red-ui-port-selected-color);
 }
 
 .red-ui-flow-subflow-port {
-    fill: $node-background-placeholder;
+    fill: var(--red-ui-node-background-placeholder);
-    stroke: $node-border;
+    stroke: var(--red-ui-node-border);
 }
 
 .red-ui-flow-drag-line {
-    stroke: $node-selected-color !important;
+    stroke: var(--red-ui-node-selected-color) !important;
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 
 .red-ui-flow-link-line {
-    stroke: $link-color;
+    stroke: var(--red-ui-link-color);
     stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 .red-ui-flow-link-link {
     stroke-width: 2;
-    stroke: $link-link-color;
+    stroke: var(--red-ui-link-link-color);
     fill: none;
     stroke-dasharray: 25,4;
 }
@@ -314,19 +321,19 @@ g.red-ui-flow-node-selected {
 }
 
 .red-ui-flow-link-port {
-    fill: $node-link-port-background;
+    fill: var(--red-ui-node-link-port-background);
-    stroke: $link-link-color;
+    stroke: var(--red-ui-link-link-color);
     stroke-width: 1;
 }
 .red-ui-flow-link-group-active .red-ui-flow-link-port {
-    stroke: $link-link-active-color;
+    stroke: var(--red-ui-link-link-active-color);
 }
 .red-ui-flow-link-group:hover {
     cursor: pointer;
 }
 
 .red-ui-flow-link-outline {
-    stroke: $view-background;
+    stroke: var(--red-ui-view-background);
     stroke-opacity: 0.4;
     stroke-width: 5;
     cursor: crosshair;
@@ -334,7 +341,7 @@ g.red-ui-flow-node-selected {
     pointer-events: none;
 }
 .red-ui-flow-link-background {
-    stroke: $view-background;
+    stroke: var(--red-ui-view-background);
     opacity: 0;
     stroke-width: 20;
     cursor: crosshair;
@@ -345,10 +352,10 @@ g.red-ui-flow-node-selected {
 }
 
 g.red-ui-flow-link-selected path.red-ui-flow-link-line {
-    stroke: $node-selected-color;
+    stroke: var(--red-ui-node-selected-color);
 }
 g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
-    stroke: $link-unknown-color;
+    stroke: var(--red-ui-link-unknown-color);
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
@@ -364,18 +371,67 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     pointer-events: none;
 
     path:first-child {
-        fill: $popover-background;
+        fill: var(--red-ui-popover-background);
-        stroke: $popover-background;
+        stroke: var(--red-ui-popover-background);
         stroke-width: 1;
     }
 }
 .red-ui-flow-port-tooltip-label {
     stroke-width: 0;
-    fill: $popover-color;
+    fill: var(--red-ui-popover-color);
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
     font-size: 12px;
     pointer-events: none;
     -webkit-touch-callout: none;
     white-space: pre;
     @include disable-selection;
 }
+.red-ui-flow-junction-dragging {
+    .red-ui-flow-junction-background {
+        background: red !important
+    }
+}
+.red-ui-flow-junction:not(.red-ui-flow-junction-dragging):hover {
+    .red-ui-flow-junction-background {
+        transform: scale(1.4);
+        stroke-width: 0.6;
+    }
+    .red-ui-flow-junction-port {
+        opacity: 1;
+        pointer-events: auto;
+    }
+    .red-ui-flow-junction-port-input {
+        transform: translate(-10px,0)
+    }
+    .red-ui-flow-junction-port-output {
+        transform: translate(10px,0)
+    }
+}
+.red-ui-flow-junction-port {
+    stroke: var(--red-ui-node-border);
+    stroke-width: 1;
+    fill: var(--red-ui-node-port-background);
+    cursor: crosshair;
+    transition: transform 0.1s;
+    opacity: 0;
+    pointer-events: none;
+}
+.red-ui-flow-junction-background {
+    stroke: var(--red-ui-node-border);
+    stroke-width: 1;
+    fill: var(--red-ui-node-port-background);
+    cursor: crosshair;
+    transform: scale(1);
+    transition: transform 0.1s;
+    &:hover {
+
+    }
+}
+.red-ui-flow-junction-hovered {
+    stroke: var(--red-ui-port-selected-color);
+    fill:  var(--red-ui-port-selected-color);
+}
+.red-ui-flow-junction.selected .red-ui-flow-junction-background {
+    stroke: var(--red-ui-port-selected-color);
+    // fill:  var(--red-ui-port-selected-color);
+}

packages/node_modules/@node-red/editor-client/src/sass/forms.scss

@@ -99,13 +99,13 @@
         margin-bottom: 20px;
         font-size: 21px;
         line-height: 40px;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         border: 0;
-        border-bottom: 1px solid $secondary-border-color;
+        border-bottom: 1px solid var(--red-ui-secondary-border-color);
     }
 
     legend small {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
     }
 
 
@@ -125,7 +125,7 @@
     button,
     select,
     textarea {
-        font-family: $primary-font;
+        font-family: var(--red-ui-primary-font);
     }
 
     label {
@@ -159,7 +159,7 @@
         margin-bottom: 10px;
         font-size: 14px;
         line-height: 20px;
-        color: $form-text-color;
+        color: var(--red-ui-form-text-color);
         vertical-align: middle;
         border-radius: 4px;
     }
@@ -193,8 +193,8 @@
     div[contenteditable="true"],
     .uneditable-input,
     .placeholder-input {
-        background-color: $form-input-background;
+        background-color: var(--red-ui-form-input-background);
-        border: 1px solid $form-input-border-color;
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     textarea:focus,
@@ -214,7 +214,7 @@
     input[type="color"]:focus,
     div[contenteditable="true"]:focus,
     .uneditable-input:focus {
-        border-color: $form-input-focus-color;
+        border-color: var(--red-ui-form-input-focus-color);
         outline: 0;
         outline: thin dotted \9;
     }
@@ -245,8 +245,8 @@
 
     select {
         width: 220px;
-        background-color: $form-input-background;
+        background-color: var(--red-ui-form-input-background);
-        border: 1px solid $form-input-border-color;
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     select[multiple],
@@ -258,16 +258,16 @@
     input[type="file"]:focus,
     input[type="radio"]:focus,
     input[type="checkbox"]:focus {
-        outline: 2px auto $form-input-focus-color;
+        outline: 2px auto var(--red-ui-form-input-focus-color);
         outline-offset: -3px;
     }
 
     .uneditable-input,
     .uneditable-textarea {
-        color: $form-text-color-disabled;
+        color: var(--red-ui-form-text-color-disabled);
         cursor: not-allowed;
-        background-color: $form-input-background-disabled;
+        background-color: var(--red-ui-form-input-background-disabled);
-        border-color: $form-input-border-color;
+        border-color: var(--red-ui-form-input-border-color);
     }
 
     .uneditable-input {
@@ -282,19 +282,19 @@
 
     input:-moz-placeholder,
     textarea:-moz-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     input:-ms-input-placeholder,
     div[contenteditable="true"]:-ms-input-placeholder,
     textarea:-ms-input-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     input::-webkit-input-placeholder,
     div[contenteditable="true"]::-webkit-input-placeholder,
     textarea::-webkit-input-placeholder {
-        color: $form-placeholder-color;
+        color: var(--red-ui-form-placeholder-color);
     }
 
     .radio,
@@ -384,7 +384,7 @@
     }
 
     label.disabled {
-        color: $form-text-color-disabled;
+        color: var(--red-ui-form-text-color-disabled);
         cursor: default;
     }
 
@@ -395,8 +395,8 @@
     select[readonly],
     textarea[readonly] {
         cursor: not-allowed;
-        color: $form-text-color-disabled;
+        color: var(--red-ui-form-text-color-disabled);
-        background-color: $form-input-background-disabled;
+        background-color: var(--red-ui-form-input-background-disabled);
     }
 
     input[type="radio"][disabled],
@@ -410,21 +410,21 @@
     div[contenteditable="true"]:invalid,
     textarea:invalid,
     select:invalid {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     input:focus:invalid,
     div[contenteditable="true"]:focus:invalid,
     textarea:focus:invalid,
     select:focus:invalid {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     input:focus:invalid:focus,
     div[contenteditable="true"]:focus:invalid:focus,
     textarea:focus:invalid:focus,
     select:focus:invalid:focus {
-        border-color: $form-input-border-error-color;
+        border-color: var(--red-ui-form-input-border-error-color);
     }
 
     .input-append,
@@ -488,8 +488,8 @@
         font-weight: normal;
         line-height: 20px;
         text-align: center;
-        background-color: $form-button-background;
+        background-color: var(--red-ui-form-button-background);
-        border: 1px solid $form-input-border-color;
+        border: 1px solid var(--red-ui-form-input-border-color);
     }
 
     .input-append .add-on,

packages/node_modules/@node-red/editor-client/src/sass/header.scss

@@ -24,10 +24,10 @@
     left: 0;
     width: 100%;
     height: 40px;
-    background: $header-background;
+    background: var(--red-ui-header-background);
     box-sizing: border-box;
     padding: 0px 0px 0px 20px;
-    color: $header-menu-color;
+    color: var(--red-ui-header-menu-color);
     font-size: 14px;
 
     span.red-ui-header-logo {
@@ -81,17 +81,17 @@
         font-size: 20px;
         padding: 0px 12px;
         text-decoration: none;
-        color: $header-menu-color;
+        color: var(--red-ui-header-menu-color);
         margin: auto 5px;
         vertical-align: middle;
-        border-left: 2px solid $header-background;
+        border-left: 2px solid var(--red-ui-header-background);
-        border-right: 2px solid $header-background;
+        border-right: 2px solid var(--red-ui-header-background);
 
         &:hover {
-            border-color: $header-menu-item-hover;
+            border-color: var(--red-ui-header-menu-item-hover);
         }
         &:active, &.active {
-            background: $header-button-background-active;
+            background: var(--red-ui-header-button-background-active);
         }
         &:focus {
             outline: none;
@@ -116,18 +116,18 @@
     }
 
     .red-ui-deploy-button {
-        background: $deploy-button-background;
+        background: var(--red-ui-deploy-button-background);
-        color: $deploy-button-color;
+        color: var(--red-ui-deploy-button-color);
 
         &:hover {
-            background: $deploy-button-background-hover;
+            background: var(--red-ui-deploy-button-background-hover);
         }
         &:focus {
             outline: none;
         }
         &:active {
-            background: $deploy-button-background-active;
+            background: var(--red-ui-deploy-button-background-active);
-            color: $deploy-button-color-active;
+            color: var(--red-ui-deploy-button-color-active);
         }
     }
 
@@ -149,21 +149,21 @@
         padding: 4px 12px;
         &.disabled {
             cursor: default;
-            background: $deploy-button-background-disabled;
+            background: var(--red-ui-deploy-button-background-disabled);
-            color: $deploy-button-color-disabled;
+            color: var(--red-ui-deploy-button-color-disabled);
 
             .red-ui-deploy-button-content>img {
                 opacity: 0.3;
             }
             &+ #red-ui-header-button-deploy-options {
-                background: $deploy-button-background-disabled;
+                background: var(--red-ui-deploy-button-background-disabled);
-                color: $deploy-button-color-active;
+                color: var(--red-ui-deploy-button-color-active);
             }
             &+ #red-ui-header-button-deploy-options:hover {
-                background: $deploy-button-background-disabled-hover;
+                background: var(--red-ui-deploy-button-background-disabled-hover);
             }
             &+ #red-ui-header-button-deploy-options:active {
-                background: $deploy-button-background-disabled;
+                background: var(--red-ui-deploy-button-background-disabled);
             }
         }
 
@@ -174,24 +174,24 @@
 
     .red-ui-deploy-button-group.open {
         #red-ui-header-button-deploy-options {
-            background: $header-button-background-active !important;
+            background: var(--red-ui-header-button-background-active) !important;
         }
     }
 
     li.open .button {
-        background: $header-button-background-active;
+        background: var(--red-ui-header-button-background-active);
-        border-color: $header-button-background-active;
+        border-color: var(--red-ui-header-button-background-active);
     }
 
 
     ul.red-ui-menu-dropdown {
-        background: $header-menu-background;
+        background: var(--red-ui-header-menu-background);
-        border: 1px solid $header-menu-background;
+        border: 1px solid var(--red-ui-header-menu-background);
         width: 260px !important;
         margin-top: 0;
         li a {
-            color: $header-menu-color;
+            color: var(--red-ui-header-menu-color);
-            padding: 3px 10px 3px 40px;
+            padding: 3px 10px 3px 30px;
             img {
                 max-width: 100%;
                 margin-right: 10px;
@@ -199,11 +199,11 @@
                 border: 3px solid transparent;
             }
             .red-ui-popover-key {
-                color: $header-menu-color-disabled !important;
+                color: var(--red-ui-header-menu-color-disabled) !important;
-                border-color: $header-menu-color-disabled !important;
+                border-color: var(--red-ui-header-menu-color-disabled) !important;
             }
             &.active img {
-                border: 3px solid $header-menu-item-border-active;
+                border: 3px solid var(--red-ui-header-menu-item-border-active);
             }
 
             span.red-ui-menu-label-container {
@@ -217,9 +217,9 @@
                 text-indent: 0px;
             }
             span.red-ui-menu-sublabel {
-                color: $header-menu-sublabel-color;
+                color: var(--red-ui-header-menu-sublabel-color);
                 font-size: 13px;
-                display: inline-block;
+                display: block;
                 text-indent: 0px;
             }
         }
@@ -228,13 +228,13 @@
         > li > a:focus,
         > li:hover > a,
         > li:focus > a {
-            background: $header-menu-item-hover !important;
+            background: var(--red-ui-header-menu-item-hover) !important;
         }
         li.red-ui-menu-divider {
-            background: $headerMenuItemDivider;
+            background: var(--red-ui-headerMenuItemDivider);
         }
         li.disabled a {
-            color:  $header-menu-color-disabled;
+            color:  var(--red-ui-header-menu-color-disabled);
         }
         > li.disabled > a:hover,
         > li.disabled > a:focus {
@@ -242,7 +242,8 @@
         }
     }
     .red-ui-menu-dropdown-submenu>a:before {
-        border-right-color: $headerMenuCaret;
+        border-right-color: var(--red-ui-headerMenuCaret);
+        margin-left: -25px !important;
     }
 
     /* Deploy menu customisations */
@@ -250,7 +251,7 @@
         width: 300px !important;
         li a {
             padding: 10px 30px;
-            color: $header-menu-heading-color;
+            color: var(--red-ui-header-menu-heading-color);
             span.red-ui-menu-label {
                 font-size: 16px;
                 display: inline-block;
@@ -263,7 +264,7 @@
     }
     /* User menu customisations */
     #usermenu-item-username > .red-ui-menu-label {
-        color: $header-menu-heading-color;
+        color: var(--red-ui-header-menu-heading-color);
     }
 
     #red-ui-header-button-user .user-profile {

packages/node_modules/@node-red/editor-client/src/sass/jquery.scss

@@ -16,18 +16,27 @@
 
 .ui-widget {
     font-size: 14px !important;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
 }
 .ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
     font-size: 14px !important;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
 }
 .ui-widget input, .ui-widget div[contenteditable="true"] {
     box-shadow: none;
 }
 
+.ui-widget.ui-widget-content {
+    border: 1px solid var(--red-ui-tertiary-border-color);
+}
+.ui-widget-content {
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-secondary-background);
+    color: var(--red-ui-primary-text-color);
+}
+
 .ui-widget-header {
-    color: $header-text-color;
+    color: var(--red-ui-header-text-color);
 }
 
 /* jQuery Theme overrides */
@@ -43,7 +52,7 @@
 
 .ui-dialog {
     border-radius: 1px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     padding: 0;
     @include component-shadow;
 }
@@ -55,20 +64,20 @@
 }
 .ui-dialog .ui-dialog-titlebar {
     padding: 10px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     border: none;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     border-radius: 0;
 }
 .ui-dialog .ui-dialog-buttonpane.ui-widget-content {
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
 
 }
 .ui-corner-all {
     border-radius: 1px;
 }
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 .ui-dialog-no-close .ui-dialog-titlebar-close {
     display: none;
@@ -88,8 +97,8 @@
     padding: 6px 14px;
     margin-right: 8px;
     border-radius: 2px;
-    color: $workspace-button-color;
+    color: var(--red-ui-workspace-button-color);
-    background: $workspace-button-background;
+    background: var(--red-ui-workspace-button-background);
 
     &.leftButton {
         float: left;
@@ -100,18 +109,18 @@
     }
 
     &.primary {
-        border-color: $workspace-button-background-primary;
+        border-color: var(--red-ui-workspace-button-background-primary);
-        color: $workspace-button-color-primary !important;
+        color: var(--red-ui-workspace-button-color-primary) !important;
-        background: $workspace-button-background-primary;
+        background: var(--red-ui-workspace-button-background-primary);
         &:not(.disabled):hover {
-            border-color: $workspace-button-background-primary-hover;
+            border-color: var(--red-ui-workspace-button-background-primary-hover);
-            background: $workspace-button-background-primary-hover;
+            background: var(--red-ui-workspace-button-background-primary-hover);
-            color: $workspace-button-color-primary !important;
+            color: var(--red-ui-workspace-button-color-primary) !important;
         }
         &.disabled {
-            border-color: $form-input-border-color;
+            border-color: var(--red-ui-form-input-border-color);
-            color: $workspace-button-color-disabled !important;
+            color: var(--red-ui-workspace-button-color-disabled) !important;
-            background: $workspace-button-background;
+            background: var(--red-ui-workspace-button-background);
         }
     }
     &.disabled {
@@ -135,10 +144,10 @@
 .ui-spinner {
     border-radius: 4px;
     padding: 0;
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
 }
 .ui-spinner input {
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     margin: 0 17px 0 0;
     padding: 6px;
     border: none;
@@ -162,8 +171,18 @@
 .ui-button,
 html .ui-button.ui-state-disabled:hover,
 html .ui-button.ui-state-disabled:active {
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
-    background: $form-button-background;
+    background: var(--red-ui-form-button-background);
+}
+
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited,
+a.ui-button,
+a:link.ui-button,
+a:visited.ui-button,
+.ui-button{
+    color: var(--red-ui-primary-text-color);
 }
 
 .ui-state-hover,
@@ -173,9 +192,9 @@ html .ui-button.ui-state-disabled:active {
 .ui-widget-content .ui-state-focus,
 .ui-widget-header .ui-state-focus,
 .ui-button:hover, .ui-button:focus {
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
-    background: $workspace-button-background-hover;
+    background: var(--red-ui-workspace-button-background-hover);
-    color: $workspace-button-color-hover;
+    color: var(--red-ui-workspace-button-color-hover);
 }
 
 .ui-state-active,
@@ -184,10 +203,10 @@ html .ui-button.ui-state-disabled:active {
 a.ui-button:active,
 .ui-button:active,
 .ui-button.ui-state-active:hover {
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
-    background: $workspace-button-background-active;
+    background: var(--red-ui-workspace-button-background-active);
     font-weight: normal;
-    color: $workspace-button-color-active;
+    color: var(--red-ui-workspace-button-color-active);
 }
 
 .ui-state-active .ui-icon, .ui-button:active .ui-icon {

packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss

@@ -23,9 +23,9 @@
     }
     .keyboard-shortcut-list-header {
         padding:0 5px 0 5px;
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
         div {
-            color: $header-text-color !important;
+            color: var(--red-ui-header-text-color) !important;
         }
         .red-ui-searchBox-container {
             width: calc(100% - 20px);
@@ -49,7 +49,7 @@
             }
         }
         li:hover {
-            background: $list-item-background-hover;
+            background: var(--red-ui-list-item-background-hover);
         }
     }
     .keyboard-shortcut-entry {
@@ -78,13 +78,13 @@
         width: calc(100% - 160px - 100px - 10px);
         overflow: hidden;
         i {
-            color: $tertiary-text-color;
+            color: var(--red-ui-tertiary-text-color);
             margin-right: 5px;
         }
     }
     .keyboard-shortcut-entry-scope {
         width:100px;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         vertical-align: middle;
         text-align: right;
     }
@@ -94,13 +94,13 @@
         }
     }
     .keyboard-shortcut-entry-unassigned {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         .keyboard-shortcut-entry-key {
             font-style: italic;
         }
     }
     .keyboard-shortcut-entry-expanded {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
         .keyboard-shortcut-entry-key {
             width: 150px;
         }
@@ -115,12 +115,12 @@
     }
 }
 .help-key {
-    border: 1px solid $tertiary-border-color;
+    border: 1px solid var(--red-ui-tertiary-border-color);
     padding: 4px;
     border-radius: 3px;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
-    box-shadow: $shade-color  1px 1px 1px;
+    box-shadow: var(--red-ui-shade-color  1px 1px 1px);
 }
 .help-key-block {
     white-space: nowrap;

packages/node_modules/@node-red/editor-client/src/sass/library.scss

@@ -18,13 +18,13 @@
     pre {
         margin: 10px 0;
         border: none;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
         span {
             padding: 5px 0;
         }
         span.error {
             padding: 5px;
-            border: 1px solid $form-input-border-error-color;
+            border: 1px solid var(--red-ui-form-input-border-error-color);
             margin: 0 1px;
         }
     }
@@ -52,16 +52,16 @@
 
 .red-ui-clipboard-dialog-tab-clipboard {
     textarea {
-        color: $secondary-text-color-active !important;
+        color: var(--red-ui-secondary-text-color-active) !important;
         resize: none;
         width: 100%;
         border-radius: 4px;
-        font-family: $monospace-font !important;
+        font-family: var(--red-ui-monospace-font !important);
         font-size: 13px !important;
         height: 100%;
         line-height: 1.3em;
         padding: 6px 10px;
-        background: $clipboard-textarea-background;
+        background: var(--red-ui-clipboard-textarea-background);
     }
 }
 
@@ -80,7 +80,7 @@
     right: 0;
     bottom: 0;
     padding: 0;
-    background: $form-input-background;
+    background: var(--red-ui-form-input-background);
     &>div {
         height: 100%;
         box-sizing: border-box;
@@ -89,7 +89,7 @@
 .red-ui-clipboard-dialog-box {
     height: 400px;
     position:relative;
-    border:1px solid $primary-border-color;
+    border:1px solid var(--red-ui-primary-border-color);
 }
 
 #red-ui-clipboard-dialog-export-tab-library-filename {
@@ -111,7 +111,7 @@
 .red-ui-clipboard-dialog-tabs-content>div.red-ui-clipboard-dialog-export-tab-library-browser {
     height: calc(100% - 60px);
     margin-bottom: 13px;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing: border-box;
 }
 #red-ui-clipboard-dialog-import-tab-library-browser {
@@ -124,7 +124,7 @@
     position: relative;
     height: 100%;
     .red-ui-treeList-container {
-        background: $secondary-background;
+        background: var(--red-ui-secondary-background);
         border: none;
         border-radius: 0;
         li {
@@ -149,14 +149,14 @@
 
 #red-ui-library-dialog-save-browser {
     height: calc(100% - 60px);
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
     margin-bottom: 10px;
 }
 #red-ui-library-dialog-load-browser {
-    // border: 1px solid $primary-border-color;
+    // border: 1px solid var(--red-ui-primary-border-color);
 }
 #red-ui-library-dialog-load-panes {
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
 }
 
 
@@ -180,15 +180,15 @@
     position: relative;
 
     li:not(:first-child) .red-ui-clipboard-dialog-import-conflicts-item-header {
-        // border-top: 1px solid $secondary-border-color;
+        // border-top: 1px solid var(--red-ui-secondary-border-color);
     }
 
 }
 
 .red-ui-clipboard-dialog-import-conflicts-item-header {
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     & > span:first-child {
-        color: $header-text-color;
+        color: var(--red-ui-header-text-color);
         padding-left: 4px;
         font-size: 12px;
     }
@@ -199,7 +199,7 @@
     bottom: 0;
     right: 0px;
     text-align: center;
-    color: $form-text-color;
+    color: var(--red-ui-form-text-color);
     .form-row & label  {
         padding: 2px 0;
         line-height: 23px;
@@ -210,7 +210,7 @@
         height: 100%;
         width: 80px;
         text-align: center;
-        border-left: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
     }
     input[type="checkbox"] {
         display: inline-block;
@@ -265,7 +265,7 @@
     span:nth-child(3), span:nth-child(4) {
         flex-grow: 0;
         padding-right: 5px;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         font-size: 0.9em;
     }
 }

packages/node_modules/@node-red/editor-client/src/sass/mixins.scss

@@ -31,33 +31,33 @@
 }
 
 @mixin component-border {
-   border: 1px solid $primary-border-color;
+   border: 1px solid var(--red-ui-primary-border-color);
    box-sizing: border-box;
 
 }
 
 @mixin reset-a-style {
-    color: $workspace-button-color !important;
+    color: var(--red-ui-workspace-button-color) !important;
-    background: $workspace-button-background;
+    background: var(--red-ui-workspace-button-background);
     text-decoration: none;
 
     &.disabled, &:disabled  {
         cursor: default;
-        color: $workspace-button-color-disabled !important;
+        color: var(--red-ui-workspace-button-color-disabled) !important;
     }
     &:hover, &:focus {
         text-decoration: none;
     }
-    &:not(.disabled):not(:disabled):hover, {
+    &:not(.disabled):not(:disabled):hover {
-        color: $workspace-button-color-hover !important;
+        color: var(--red-ui-workspace-button-color-hover) !important;
-        background: $workspace-button-background-hover;
+        background: var(--red-ui-workspace-button-background-hover);
     }
     &:not(.disabled):not(:disabled):focus {
-        color: $workspace-button-color-focus !important;
+        color: var(--red-ui-workspace-button-color-focus) !important;
     }
     &:not(.disabled):not(:disabled):active {
-        color: $workspace-button-color-active !important;
+        color: var(--red-ui-workspace-button-color-active) !important;
-        background: $workspace-button-background-active;
+        background: var(--red-ui-workspace-button-background-active);
         text-decoration: none;
     }
 }
@@ -68,14 +68,14 @@
 
     box-sizing: border-box;
     display: inline-block;
-    border: 1px solid $form-input-border-color;
+    border: 1px solid var(--red-ui-form-input-border-color);
     text-align: center;
     margin:0;
     cursor:pointer;
 
     &.selected:not(.disabled):not(:disabled) {
-        color: $workspace-button-color-selected !important;
+        color: var(--red-ui-workspace-button-color-selected) !important;
-        background: $workspace-button-background-active;
+        background: var(--red-ui-workspace-button-background-active);
     }
     .button-group &:not(:first-child) {
         border-left: none;
@@ -108,23 +108,23 @@
     }
 
     &:focus {
-        outline: 1px solid $workspace-button-color-focus-outline;
+        outline: 1px solid var(--red-ui-workspace-button-color-focus-outline);
         outline-offset: 1px;
     }
 
     &.primary {
-        border-color: $workspace-button-background-primary;
+        border-color: var(--red-ui-workspace-button-background-primary);
-        color: $workspace-button-color-primary !important;
+        color: var(--red-ui-workspace-button-color-primary) !important;
-        background: $workspace-button-background-primary;
+        background: var(--red-ui-workspace-button-background-primary);
         &.disabled, &.ui-state-disabled {
             background: none;
-            color: $workspace-button-color !important;
+            color: var(--red-ui-workspace-button-color) !important;
-            border-color: $form-input-border-color;
+            border-color: var(--red-ui-form-input-border-color);
         }
         &:not(.disabled):not(.ui-button-disabled):hover {
-            border-color: $workspace-button-background-primary-hover;
+            border-color: var(--red-ui-workspace-button-background-primary-hover);
-            background: $workspace-button-background-primary-hover;
+            background: var(--red-ui-workspace-button-background-primary-hover);
-            color: $workspace-button-color-primary !important;
+            color: var(--red-ui-workspace-button-color-primary) !important;
         }
     }
     &.secondary {
@@ -151,7 +151,7 @@
         margin-bottom: 1px;
         &.selected:not(.disabled):not(:disabled) {
             border-bottom-width: 2px;
-            border-bottom-color: $form-input-border-selected-color;
+            border-bottom-color: var(--red-ui-form-input-border-selected-color);
             margin-bottom: 0;
             cursor: default;
         }
@@ -166,7 +166,7 @@
     padding: 6px 14px;
     margin-right: 8px;
     &:not(.disabled):hover {
-        //color: $workspace-button-color;
+        //color: var(--red-ui-workspace-button-color);
     }
     &.disabled {
         background: none;
@@ -187,8 +187,8 @@
 }
 
 @mixin component-footer {
-    border-top: 1px solid $primary-border-color;
+    border-top: 1px solid var(--red-ui-primary-border-color);
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     text-align: right;
     position: absolute;
     bottom: 0;
@@ -231,7 +231,7 @@
 }
 
 @mixin component-shadow {
-    box-shadow: 1px 1px 4px $shadow;
+    box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
 }
 
@@ -241,7 +241,7 @@
     left: 0;
     bottom: 0;
     right: 0;
-    background: $shade-color;
+    background: var(--red-ui-shade-color);
     z-index: 5;
 }
 .red-ui-shade {

packages/node_modules/@node-red/editor-client/src/sass/notifications.scss

@@ -27,10 +27,10 @@
     position: relative;
     padding: 8px 18px 0px;
     margin-bottom: 4px;
-    box-shadow: 0 1px 1px 1px $shadow;
+    box-shadow: 0 1px 1px 1px var(--red-ui-shadow);
-    background-color: $secondary-background;
+    background-color: var(--red-ui-secondary-background);
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
-    border: 1px solid $notification-border-default;
+    border: 1px solid var(--red-ui-notification-border-default);
     border-left-width: 16px;
     overflow: hidden;
     .ui-dialog-buttonset {
@@ -50,13 +50,13 @@
 }
 
 .red-ui-notification-success {
-    border-color: $notification-border-success;
+    border-color: var(--red-ui-notification-border-success);
 }
 .red-ui-notification-warning {
-    border-color: $notification-border-warning;
+    border-color: var(--red-ui-notification-border-warning);
 }
 .red-ui-notification-error {
-    border-color: $notification-border-error;
+    border-color: var(--red-ui-notification-border-error);
 }
 
 .red-ui-notification-compact {

packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss

@@ -27,7 +27,7 @@
     left:0;
     padding: 0;
     box-sizing:border-box;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
 
     .red-ui-editableList-container {
         border: none;
@@ -37,27 +37,27 @@
 
         li {
             // border: none;
-            // border-top: 1px solid $primary-border-color;
+            // border-top: 1px solid var(--red-ui-primary-border-color);
             padding: 0px;
             .red-ui-button {
                 min-width: 60px;
             }
 
             .disabled {
-                // background: $secondary-background-inactive;//f3f3f3;
+                // background: var(--red-ui-secondary-background-inactive;//f3f3f3);
 
                 .red-ui-palette-module-name {
                     font-style: italic;
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
                 .red-ui-palette-module-version {
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
                 .red-ui-palette-module-errors .fa-warning {
                     opacity: 0.5;
                 }
                 ul.red-ui-palette-module-error-list li {
-                    color: $tertiary-text-color;
+                    color: var(--red-ui-tertiary-text-color);
                 }
 
 
@@ -66,7 +66,7 @@
                 padding: 12px 16px;
             }
             &:last-child {
-                // border-bottom: 1px solid $primary-border-color;
+                // border-bottom: 1px solid var(--red-ui-primary-border-color);
             }
         }
 
@@ -79,14 +79,14 @@
         bottom:0
     }
     .red-ui-palette-editor-toolbar {
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         box-sizing: border-box;
         padding: 8px 10px;
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
         text-align: right;
     }
     .red-ui-palette-module-shade-status {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .red-ui-palette-module-updated {
         margin-left: 10px;
@@ -98,7 +98,7 @@
     .red-ui-palette-module-description {
         margin-left: 20px;
         font-size: 0.9em;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .red-ui-palette-module-link {
     }
@@ -120,7 +120,7 @@
         }
     }
     .red-ui-palette-module-set {
-        border:1px solid $secondary-border-color;
+        border:1px solid var(--red-ui-secondary-border-color);
         border-radius: 0;
         padding: 5px;
         position: relative;
@@ -138,7 +138,7 @@
     }
 
     .red-ui-palette-module-type {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         padding-left: 5px;
         font-size: 0.9em;
         @include enable-selection;
@@ -150,8 +150,8 @@
         border-radius: 3px;
         vertical-align: middle;
         margin-right: 5px;
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
-        border: 1px dashed $secondary-border-color;
+        border: 1px dashed var(--red-ui-secondary-border-color);
     }
     .red-ui-palette-module-set-button-group {
         position: absolute;
@@ -160,35 +160,35 @@
     }
 
     .red-ui-palette-module-set-disabled {
-        background: $list-item-background-disabled;
+        background: var(--red-ui-list-item-background-disabled);
         .red-ui-palette-module-type {
-            color: $secondary-text-color-disabled-active;
+            color: var(--red-ui-secondary-text-color-disabled-active);
         }
     }
     .red-ui-palette-module-more {
         padding: 0 !important;
         margin-top: 10px;
         margin-bottom: 10px;
-        background: $tab-background-inactive;
+        background: var(--red-ui-tab-background-inactive);
         a {
             display: block;
             text-align: center;
             padding: 12px 8px;
-            color: $text-color-code;
+            color: var(--red-ui-text-color-code);
 
             &:hover {
                 text-decoration: none;
-                background: $tab-background-hover;
+                background: var(--red-ui-tab-background-hover);
             }
         }
     }
 
 }
 .red-ui-palette-module-meta {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     position: relative;
     &.disabled {
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     .fa {
@@ -198,7 +198,7 @@
     }
 }
 .red-ui-palette-module-name {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
     white-space: nowrap;
     @include enable-selection;
 }
@@ -216,7 +216,7 @@
     }
 }
 .red-ui-palette-module-meta .fa-warning {
-    color: $text-color-warning;
+    color: var(--red-ui-text-color-warning);
 }
 ul.red-ui-palette-module-error-list {
     display: inline-block;
@@ -264,9 +264,9 @@ button.red-ui-palette-editor-upload-button {
     right: 0;
     top: 44px;
     padding: 20px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
-    border-bottom: 1px $secondary-border-color solid;
+    border-bottom: 1px var(--red-ui-secondary-border-color solid);
-    box-shadow: 1px 1px 4px $shadow;
+    box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
     .placeholder-input {
         width: calc(100% - 180px);

packages/node_modules/@node-red/editor-client/src/sass/palette.scss

@@ -20,7 +20,7 @@
     top: 0px;
     bottom: 0px;
     left:0px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     width: 180px;
     text-align: center;
     @include disable-selection;
@@ -55,26 +55,26 @@
 .red-ui-palette-search {
     position: relative;
     overflow: hidden;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     text-align: center;
     height: 35px;
     padding: 3px;
-    border-bottom: 1px solid $primary-border-color;
+    border-bottom: 1px solid var(--red-ui-primary-border-color);
     box-sizing:border-box;
 }
 
 .red-ui-palette-category {
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 .red-ui-palette-content {
-    background: $palette-content-background;
+    background: var(--red-ui-palette-content-background);
     padding: 3px;
 }
 
 .red-ui-palette-header {
     position: relative;
-    background: $palette-header-background;
+    background: var(--red-ui-palette-header-background);
-    color: $palette-header-color;
+    color: var(--red-ui-palette-header-color);
     cursor: pointer;
     text-align: left;
     padding: 9px;
@@ -83,7 +83,7 @@
     overflow: hidden;
     user-select: none;
     &:hover {
-        background: $palette-header-background !important;
+        background: var(--red-ui-palette-header-background) !important;
     }
 }
 .red-ui-palette-header > i {
@@ -106,7 +106,7 @@
     clear: both;
 }
 .red-ui-palette-label {
-    color: $node-label-color;
+    color: var(--red-ui-node-label-color);
     font-size: 13px;
     margin: 4px 0 4px 32px;
     line-height: 20px;
@@ -121,16 +121,17 @@
 .red-ui-palette-node {
     // display: inline-block;
     cursor: move;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     margin: 10px auto;
     height: 25px;
     border-radius: 5px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     width: 120px;
     background-size: contain;
     position: relative;
+    z-index: 4;
     &:not(.red-ui-palette-node-config):not(.red-ui-palette-node-small):first-child {
         margin-top: 15px;
     }
@@ -140,7 +141,7 @@
 }
 .red-ui-palette-node:hover {
     border-color: transparent;
-    box-shadow: 0 0 0 2px $node-selected-color;
+    box-shadow: 0 0 0 2px var(--red-ui-node-selected-color);
 }
 .red-ui-palette-port {
     position: absolute;
@@ -148,11 +149,11 @@
     left: -5px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    background: $node-port-background;
+    background: var(--red-ui-node-port-background);
     border-radius: 3px;
     width: 10px;
     height: 10px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
 }
 .red-ui-palette-port-output {
     left:auto;
@@ -160,7 +161,7 @@
 }
 
 .red-ui-palette-node:hover .red-ui-palette-port {
-    background-color: $node-port-background-hover;
+    background-color: var(--red-ui-node-port-background-hover);
 }
 .red-ui-palette-icon-container {
     position: absolute;
@@ -169,14 +170,16 @@
     bottom:0;
     left:0;
     width: 30px;
-    border-right: 1px solid $node-icon-background-color;
+    border-right: 1px solid var(--red-ui-node-icon-background-color);
-    background-color: $node-icon-background-color;
+    border-radius: 4px 0px 0px 4px;
+    background-color: var(--red-ui-node-icon-background-color);
 }
 .red-ui-palette-icon-container-right {
     left: auto;
     right: 0;
     border-right: none;
-    border-left: 1px solid $node-icon-background-color;
+    border-left: 1px solid var(--red-ui-node-icon-background-color);
+    border-radius: 0px 4px 4px 0px;
 }
 .red-ui-palette-icon {
     display: inline-block;
@@ -189,6 +192,7 @@
 .red-ui-search-result-node {
     &.red-ui-palette-icon-flow,
     &.red-ui-palette-icon-group,
+    &.red-ui-palette-icon-junction,
     &.red-ui-palette-icon-selection {
         background: none;
         border-color: transparent;
@@ -196,7 +200,7 @@
             background: none;
         }
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
             font-size: 18px;
         }
     }
@@ -247,12 +251,12 @@
     // width: 30px;
     // height: 25px;
     border-radius: 3px;
-    border: 1px solid $node-border;
+    border: 1px solid var(--red-ui-node-border);
     background-position: 5% 50%;
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
-    background-color: $node-icon-background-color;
+    background-color: var(--red-ui-node-icon-background-color);
     text-align: center;
 
     .red-ui-palette-icon {
@@ -268,6 +272,7 @@
 
     &.red-ui-palette-icon-flow,
     &.red-ui-palette-icon-group,
+    &.red-ui-palette-icon-junction,
     &.red-ui-palette-icon-selection {
         background: none;
         border-color: transparent;
@@ -275,7 +280,7 @@
             background: none;
         }
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
             font-size: 16px;
         }
     }
@@ -303,6 +308,7 @@
         &.red-ui-palette-icon-flow {
             margin-top: -2px;
         }
+        &.red-ui-palette-icon-junction .red-ui-palette-icon-fa,
         &.red-ui-palette-icon-group .red-ui-palette-icon-fa {
             font-size: 14px;
         }
@@ -314,5 +320,5 @@
 .red-ui-node-label {
     white-space: nowrap;
     margin-left: 4px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }

packages/node_modules/@node-red/editor-client/src/sass/panels.scss

@@ -35,12 +35,28 @@
 
 .red-ui-panels-separator {
     flex: 0 0 auto;
-    border-top: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     height: 7px;
     box-sizing: border-box;
     cursor: ns-resize;
-    background: $primary-background url(images/grip-horizontal.png) no-repeat 50% 50%;
+    background-color: var(--red-ui-primary-background);
+
+    &:before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        -webkit-mask-image: url(images/grip-horizontal.svg);
+        mask-image: url(images/grip-horizontal.svg);
+        -webkit-mask-size: contain;
+        mask-size: contain;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        background-color: var(--red-ui-grip-color);
+    }
 }
 
 
@@ -64,12 +80,28 @@
         vertical-align: top;
         border-top: none;
         border-bottom: none;
-        border-left: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
-        border-right: 1px solid $secondary-border-color;
+        border-right: 1px solid var(--red-ui-secondary-border-color);
         height: 100%;
         width: 7px;
         display: inline-block;
         cursor: ew-resize;
-        background: $primary-background url(images/grip.png) no-repeat 50% 50%;
+        background-color: var(--red-ui-primary-background);
+
+        &:before {
+            content: '';
+            display: block;
+            width: 100%;
+            height: 100%;
+            -webkit-mask-image: url(images/grip.svg);
+            mask-image: url(images/grip.svg);
+            -webkit-mask-size: contain;
+            mask-size: contain;
+            -webkit-mask-position: 50% 50%;
+            mask-position: 50% 50%;
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            background-color: var(--red-ui-grip-color);
+        }
     }
 }

packages/node_modules/@node-red/editor-client/src/sass/popover.scss

@@ -25,7 +25,7 @@
     color: var(--red-ui-popover-color);
     border-radius: 4px;
     z-index: 1000;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
     font-size: 14px;
     line-height: 1.4em;
     @include component-shadow;
@@ -146,46 +146,59 @@
 
 .red-ui-popover-key {
     font-size: 11px;
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
     margin-left: 3px;
     border: 1px solid var(--red-ui-popover-color);
     border-radius:3px;
     padding: 1px 2px;
 }
-
+.red-ui-popover {
+    a {
+        text-decoration: none;
+        color: var(--red-ui-popover-color) !important;
+    }
+    a:hover,
+    a:focus {
+        text-decoration: none;
+        color: var(--red-ui-popover-color) !important;
+    }
+    a:focus {
+        outline: 1px solid var(--red-ui-form-input-focus-color);
+    }
+}
 .red-ui-popover a.red-ui-button,
 .red-ui-popover button.red-ui-button {
     &:not(.primary) {
-        border-color: $popover-button-border-color;
+        border-color: var(--red-ui-popover-button-border-color);
         background: var(--red-ui-popover-background);
         color: var(--red-ui-popover-color) !important;
     }
     &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
-        border-color: $popover-button-border-color-hover;
+        border-color: var(--red-ui-popover-button-border-color-hover);
     }
 
 
     &.primary {
-        border-color: $popover-button-border-color;
+        border-color: var(--red-ui-popover-button-border-color);
     }
     &.primary:not(.disabled):not(.ui-button-disabled):hover {
-        border-color: $popover-button-border-color-hover;
+        border-color: var(--red-ui-popover-button-border-color-hover);
     }
 }
 .red-ui-popover code {
     border: none;
     background: none;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 
 
 .red-ui-popover-panel {
     @include component-shadow;
-    font-family: $primary-font;
+    font-family: var(--red-ui-primary-font);
-    font-size: $primary-font-size;
+    font-size: var(--red-ui-primary-font-size);
     position: absolute;
     box-sizing: border-box;
-    border: 1px solid $primary-border-color;
+    border: 1px solid var(--red-ui-primary-border-color);
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     z-index: 2000;
 }

packages/node_modules/@node-red/editor-client/src/sass/projects.scss

@@ -29,7 +29,7 @@
     overflow-y: scroll;
 }
 .red-ui-sidebar-vc-shade {
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
 }
 
 .red-ui-projects-edit-form form {
@@ -37,7 +37,7 @@
     .form-row {
         margin-bottom: 15px;
         label {
-            color: $primary-text-color;
+            color: var(--red-ui-primary-text-color);
             width: 100%;
             display: block;
             &.red-ui-projects-edit-form-inline-label {
@@ -57,7 +57,7 @@
 
 }
 .red-ui-projects-edit-form-sublabel {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     text-align: right;
     margin-bottom: -15px;
     font-weight: normal;
@@ -76,7 +76,7 @@
         font-size: 1.4em;
         padding: 10px;
         min-height: 40px;
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
     }
     .red-ui-projects-dialog-screen-start-body {
         min-height: 300px;
@@ -132,21 +132,21 @@
     margin-left: -1px;
     padding: 15px;
     margin-top: -15px;
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 3px;
 }
 .red-ui-projects-dialog-credentials-box-left {
     width: 220px;
     > div {
         padding:  7px 8px 3px 8px;
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-radius: 4px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
-        border-right-color: $form-background;
+        border-right-color: var(--red-ui-form-background);
         &.disabled {
-            border-color: $form-background;
+            border-color: var(--red-ui-form-background);
-            border-right-color:$secondary-border-color;
+            border-right-color:var(--red-ui-secondary-border-color);
         }
         i {
             font-size: 1.4em;
@@ -173,7 +173,7 @@
 }
 
 .red-ui-projects-dialog-project-list-container {
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     border-radius: 2px;
     display: flex;
     flex-direction: column;
@@ -197,43 +197,43 @@
 .red-ui-projects-dialog-project-list-entry {
     padding: 12px 0;
 
-    color: $list-item-color;
+    color: var(--red-ui-list-item-color);
-    background: $list-item-background;
+    background: var(--red-ui-list-item-background);
-    border-left: 3px solid $list-item-background;
+    border-left: 3px solid var(--red-ui-list-item-background);
-    border-right: 3px solid $list-item-background;
+    border-right: 3px solid var(--red-ui-list-item-background);
 
     &.projects-list-entry-current {
         &:not(.selectable) {
-            color: $form-text-color;
+            color: var(--red-ui-form-text-color);
-            background: $list-item-background-selected;
+            background: var(--red-ui-list-item-background-selected);
-            border-left-color:$list-item-border-selected;
+            border-left-color:var(--red-ui-list-item-border-selected);
-            border-right-color:$list-item-border-selected;
+            border-right-color:var(--red-ui-list-item-border-selected);
         }
         i {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover:not(.selected) {
-            color: $form-text-color;
+            color: var(--red-ui-form-text-color);
-            background: $list-item-background-hover;
+            background: var(--red-ui-list-item-background-hover);
-            border-left-color:$list-item-background-hover;
+            border-left-color:var(--red-ui-list-item-background-hover);
-            border-right-color:$list-item-background-hover;
+            border-right-color:var(--red-ui-list-item-background-hover);
         }
     }
     .red-ui-projects-dialog-project-list-entry-icon {
         i {
-            color: $tertiary-text-color;
+            color: var(--red-ui-tertiary-text-color);
             font-size: 2em;
 
         }
     }
     &.selected {
-        color: $form-text-color;
+        color: var(--red-ui-form-text-color);
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
-        border-left-color:$list-item-border-selected;
+        border-left-color:var(--red-ui-list-item-border-selected);
-        border-right-color:$list-item-border-selected;
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         display: inline-block;
@@ -249,7 +249,7 @@
         float: right;
         margin-right: 20px;
         font-size: 0.9em;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         padding-top: 4px;
     }
     .red-ui-projects-dialog-project-list-entry-tools {
@@ -257,7 +257,7 @@
         top: 16px;
         right: 30px;
         display: none;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     &:hover {
         .red-ui-projects-dialog-project-list-entry-tools {
@@ -274,7 +274,7 @@
     width: 1000px;
     overflow: hidden;
     padding: 5px 20px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     transition: left 0.4s;
     white-space: nowrap;
     > span {
@@ -289,7 +289,7 @@
     position: relative;
 }
 .red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) {
-    color: $secondary-text-color-active !important;
+    color: var(--red-ui-secondary-text-color-active) !important;
 }
 .red-ui-projects-dialog-screen-input-status {
     text-align: right;
@@ -298,7 +298,7 @@
     right: 8px;
     width: 70px;
     height: 30px;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }
 
 .red-ui-sidebar-vc {
@@ -338,17 +338,17 @@
     }
     .red-ui-palette-module-unused {
         & > * {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
         }
     }
     .red-ui-palette-module-unknown {
-        border: 1px dashed $secondary-border-color;
+        border: 1px dashed var(--red-ui-secondary-border-color);
-        background: $secondary-background-inactive;
+        background: var(--red-ui-secondary-background-inactive);
     }
     .red-ui-palette-module-not-installed {
-        border: 1px dashed $text-color-warning;
+        border: 1px dashed var(--red-ui-text-color-warning);
         i.fa-warning {
-            color: $text-color-warning;
+            color: var(--red-ui-text-color-warning);
         }
     }
 }
@@ -365,11 +365,11 @@
 }
 .red-ui-sidebar-vc {
     .red-ui-editableList-container {
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         padding: 0;
         li {
             padding:0;
-            background: $secondary-background;
+            background: var(--red-ui-secondary-background);
         }
     }
     .red-ui-editableList-border {
@@ -384,7 +384,7 @@
     box-sizing: border-box;
     transition: height 0.2s ease-in-out;
     &:first-child {
-        // border-bottom: 1px solid $primary-border-color;
+        // border-bottom: 1px solid var(--red-ui-primary-border-color);
     }
 }
 .red-ui-sidebar-vc-merging {
@@ -399,7 +399,7 @@
     right:0;
     height:0;
     transition: height 0.2s ease-in-out;
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     box-sizing: border-box;
     overflow: hidden;
     &.red-ui-sidebar-vc-slide-box-top {
@@ -408,20 +408,20 @@
         left: auto;
         width: 100%;
         max-width: 280px;
-        border-left: 1px solid $primary-border-color;
+        border-left: 1px solid var(--red-ui-primary-border-color);
-        border-right: 1px solid $primary-border-color;
+        border-right: 1px solid var(--red-ui-primary-border-color);
-        border-bottom: 1px solid $primary-border-color;
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
-        box-shadow: 1px 1px 4px $shadow;
+        box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
-        color: $primary-text-color;
+        color: var(--red-ui-primary-text-color);
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         padding: 10px;
         box-sizing: border-box;
 
     }
     &.red-ui-sidebar-vc-slide-box-bottom {
         bottom: 0px;
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
     }
 
     textarea {
@@ -437,15 +437,15 @@
 .red-ui-projects-branch-list {
     position: relative;
     .red-ui-searchBox-container {
-        border-top: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
-        border-left: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-secondary-border-color);
-        border-right: 1px solid $secondary-border-color;
+        border-right: 1px solid var(--red-ui-secondary-border-color);
         border-top-left-radius: 2px;
         border-top-right-radius: 2px;
         overflow: hidden;
     }
     .red-ui-editableList {
-        border: 1px solid $secondary-border-color;
+        border: 1px solid var(--red-ui-secondary-border-color);
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
         & > .red-ui-editableList-border {
@@ -456,7 +456,7 @@
             padding: 0;
             li {
                 padding: 0;
-                background: $secondary-background;
+                background: var(--red-ui-secondary-background);
             }
         }
     }
@@ -483,23 +483,23 @@
 .red-ui-sidebar-vc-branch-list-entry {
     padding: 5px 8px;
     margin: 0 1px;
-    color: $list-item-color;
+    color: var(--red-ui-list-item-color);
-    background: $list-item-background;
+    background: var(--red-ui-list-item-background);
-    border-left: 2px solid $list-item-background;
+    border-left: 2px solid var(--red-ui-list-item-background);
-    border-right: 2px solid $list-item-background;
+    border-right: 2px solid var(--red-ui-list-item-background);
     cursor: pointer;
     &.selected {
-        border-left-color:$list-item-border-selected;
+        border-left-color:var(--red-ui-list-item-border-selected);
-        border-right-color:$list-item-border-selected;
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     i { width: 16px; text-align: center}
     &.input-error {
         cursor: default;
     }
     &:not(.input-error):hover {
-        background: $list-item-background-hover;
+        background: var(--red-ui-list-item-background-hover);
-        border-left-color:$list-item-border-selected;
+        border-left-color:var(--red-ui-list-item-border-selected);
-        border-right-color:$list-item-border-selected;
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         margin-left: 5px;
@@ -507,7 +507,7 @@
     span.current {
         float: right;
         font-size: 0.8em;
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
     }
 }
 
@@ -542,7 +542,7 @@
     }
     &.red-ui-help-info-node {
         text-align: center;
-        background: $list-item-background;
+        background: var(--red-ui-list-item-background);
         white-space: normal;
         height: auto;
     }
@@ -556,63 +556,63 @@
     overflow: hidden;
     cursor: pointer;
     &:hover {
-        background: $secondary-background-hover;
+        background: var(--red-ui-secondary-background-hover);
     }
 }
 .red-ui-sidebar-vc-commit-more {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     text-align: center;
     padding: 10px;
     font-style: italic;
 }
 .red-ui-sidebar-vc-commit-sha {
     float: right;
-    font-family: $monospace-font;
+    font-family: var(--red-ui-monospace-font);
-    color: $vcCommitShaColor;
+    color: var(--red-ui-vcCommitShaColor);
     display: inline-block;
     font-size: 0.85em;
     margin-left: 5px;
 }
 .red-ui-sidebar-vc-commit-subject {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-sidebar-vc-commit-refs {
     min-height: 22px;
 }
 .red-ui-sidebar-vc-commit-ref {
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
     font-size: 0.7em;
-    border: 1px solid $tertiary-border-color;
+    border: 1px solid var(--red-ui-tertiary-border-color);
     border-radius: 10px;
     padding: 2px 5px;
     margin-right: 5px;
 }
 .red-ui-sidebar-vc-commit-date {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 0.85em;
 }
 .red-ui-sidebar-vc-commit-user {
     float: right;
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
     font-size: 0.85em;
 }
 .red-ui-sidebar-vc-commit-head {
 }
 .red-ui-sidebar-vc-change-header {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     padding: 4px 10px;
     height: 30px;
     box-sizing: border-box;
-    border-top: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
-    border-bottom: 1px solid $secondary-border-color;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     i {
         transition: all 0.2s ease-in-out;
     }
 }
 .red-ui-sidebar-vc-repo-toolbar {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
-    background: $tertiary-background;
+    background: var(--red-ui-tertiary-background);
     padding: 10px;
     box-sizing: border-box;
 }
@@ -637,7 +637,7 @@
 .red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border {
     border-radius: 0;
     border: none;
-    border-top: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
 
 }
 .red-ui-editableList-container .red-ui-projects-dialog-file-list {
@@ -654,39 +654,39 @@
 }
 .red-ui-projects-dialog-file-list-entry {
     padding: 3px 0;
-    border-left: 2px solid $list-item-background;
+    border-left: 2px solid var(--red-ui-list-item-background);
-    border-right: 2px solid $list-item-background;
+    border-right: 2px solid var(--red-ui-list-item-background);
-    background: $list-item-background;
+    background: var(--red-ui-list-item-background);
 
     &.projects-list-entry-current {
         &:not(.selectable) {
-            background: $list-item-background-selected;
+            background: var(--red-ui-list-item-background-selected);
         }
         i {
-            color: $secondary-text-color-selected;
+            color: var(--red-ui-secondary-text-color-selected);
         }
     }
     &.selectable {
         cursor: pointer;
         &:hover {
-            background: $list-item-background-hover;
+            background: var(--red-ui-list-item-background-hover);
-            border-left-color:$list-item-border-selected;
+            border-left-color:var(--red-ui-list-item-border-selected);
-            border-right-color:$list-item-border-selected;
+            border-right-color:var(--red-ui-list-item-border-selected);
         }
     }
     &.unselectable {
-        color: $secondary-text-color-disabled;
+        color: var(--red-ui-secondary-text-color-disabled);
     }
 
     i {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
         width: 16px;
         text-align: center;
     }
     &.selected {
-        background: $list-item-background-selected;
+        background: var(--red-ui-list-item-background-selected);
-        border-left-color:$list-item-border-selected;
+        border-left-color:var(--red-ui-list-item-border-selected);
-        border-right-color:$list-item-border-selected;
+        border-right-color:var(--red-ui-list-item-border-selected);
     }
     span {
         display: inline-block;
@@ -696,7 +696,7 @@
          margin: 0 10px 0 0px;
 
          .fa-angle-right {
-             color: $primary-text-color;
+             color: var(--red-ui-primary-text-color);
              transition: all 0.2s ease-in-out;
 
          }
@@ -711,7 +711,9 @@
         transform: rotate(90deg);
     }
 }
-.red-ui-projects-dialog-file-list-entry-file-type-git { color: $tertiary-text-color }
+.red-ui-projects-dialog-file-list-entry-file-type-git {
+    color: var(--red-ui-tertiary-text-color);
+}
 
 .red-ui-projects-dialog-remote-list {
     .red-ui-editableList-container {
@@ -747,7 +749,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         padding: 10px 5px;
         cursor: pointer;
         &:hover {
-            background: $list-item-background-hover;
+            background: var(--red-ui-list-item-background-hover);
         }
     }
 }
@@ -756,7 +758,7 @@ div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     .red-ui-editableList-container {
         padding: 1px;
-        background: $tertiary-background;
+        background: var(--red-ui-tertiary-background);
         li:last-child {
             border-bottom: none;
         }
@@ -775,7 +777,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         text-align: center;
         min-width: 30px;
         vertical-align: top;
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
     .entry-name {
         min-width: 250px;
@@ -784,7 +786,7 @@ div.red-ui-projects-dialog-ssh-public-key {
         font-weight: bold;
     }
     .entry-detail {
-        color: $tertiary-text-color;
+        color: var(--red-ui-tertiary-text-color);
         font-size: 0.9em;
     }
 
@@ -802,9 +804,9 @@ div.red-ui-projects-dialog-ssh-public-key {
     position: relative;
     margin-top: 10px;
     margin-bottom: 20px;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     border-radius: 4px;
-    border: 1px solid $secondary-border-color;
+    border: 1px solid var(--red-ui-secondary-border-color);
     .red-ui-projects-edit-form-sublabel {
         margin-top: -8px !important;
         margin-right: 50px;
@@ -819,7 +821,7 @@ div.red-ui-projects-dialog-ssh-public-key {
 
     .red-ui-projects-dialog-list-dialog-header {
         font-weight: bold;
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         margin-top: 0 !important;
         padding: 5px 10px;
         margin-bottom: 10px;
@@ -830,5 +832,5 @@ div.red-ui-projects-dialog-ssh-public-key {
     padding: 8px 20px 20px;
 }
 .red-ui-settings-section-description {
-    color: $secondary-text-color;
+    color: var(--red-ui-secondary-text-color);
 }