Update add-junction menu to work in more cases

Update for 3 beta 4

.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 }}

CHANGELOG.md

@@ -1,3 +1,189 @@
+#### 3.0.0-beta.4: Beta Release
+
+Editor
+
+ - Fix clicking on node in workspace to hide context menu (#3696) @knolleary
+ - Fix credential type input item of subflow template (#3703) @HiroyasuNishiyama
+ - Add option flag `reimport` to `importNodes` (#3718) @Steve-Mcl
+ - Update german translation (#3691) @Dennis14e
+ - List welcome tours in help sidebar (#3717) @knolleary
+ - Ensure 'hidden flow' count doesn't include subflows (#3715) @knolleary
+ - Fix Chinese translate (#3706) @hotlong
+ - Fix use default button for node icon (#3714) @kazuhitoyokoi
+ - Fix select boxes vertical alignment (#3698) @bonanitech
+ - Ensure workspace clean after undoing dropped node (#3708) @Steve-Mcl
+ - Use solid colour as config node icon background to hide text overflow (#3710) @Steve-Mcl
+ - Increase quick-add height to reveal 2 most recent entries (#3711) @Steve-Mcl
+ - Set default editor to monaco in absence of user preference (#3702) @knolleary
+ - Add Japanese translations for v3.0-beta.3 (#3688) @kazuhitoyokoi
+ - Fix handling of spacebar inside JSON visual editor (#3687) @knolleary
+ - Fix menu padding to handle both icons and submenus (#3686) @knolleary
+ - Include scroll offset when positioning quick-add dialog (#3685) @knolleary
+
+Runtime
+
+ - Import default export if node is a transpiled es module (#3669) @dschmidt
+ - Leave Monaco theme commented out by default (#3704) @bonanitech
+
+Nodes
+
+ - CSV: Fix CSV node to handle when outputting text fields (#3716) @dceejay
+ - Delay: Fix delay rate limit last timing when empty (#3709) @dceejay
+ - Link: Ensure link-call cache is updated when link-in is modified (#3695) @Steve-Mcl
+ - Join: Join node in reduce mode doesn't keep existing msg properties (#3670) @dceejay
+ - Template: Add support for evalulating {{env.<var>}} within a template node (#3690) @cow0w
+
+#### 3.0.0-beta.3: Beta Release
+
+Editor
+
+ - Add Right-Click content menu (#3678) @knolleary
+ - Fix disable junction (#3671) @HiroyasuNishiyama
+ - Add Japanese translations for v2.2.3 (#3672) @kazuhitoyokoi
+ - Reset mouse state when switching tabs (#3643) @knolleary
+ - Fix uncorrect fix of junction to subflow conversion (#3666) @HiroyasuNishiyama
+ - Fix undoing junction to subflow (#3653) @HiroyasuNishiyama
+ - Fix conversion of junction to subflow (#3652) @HiroyasuNishiyama
+ - Fix to include junction to exported nodes (#3650) @HiroyasuNishiyama
+ - Fix z-index value for shade to cover nodes in palette (#3649) @kazuhitoyokoi
+ - Fix to extend escaped subflow category characters (#3647) @HiroyasuNishiyama
+ - Fix to sanitize tab name (#3646) @HiroyasuNishiyama
+ - Fix selector placement (#3644) @bonanitech
+ - Add Japanese translations for v3.0-beta.2 (#3622) @kazuhitoyokoi
+ - Fix new folder menu of save to library dialog (#3633) @HiroyasuNishiyama
+ - Fix layer of palette node (#3638) @HiroyasuNishiyama
+ - Fix to place a node dragged from palette within the workspace (#3637) @HiroyasuNishiyama
+ - Fix typo in CSS (#3628) @bonanitech
+ - Use the correct variable for the gutter text color (#3615) @bonanitech
+
+
+Runtime
+
+ - Support loading node modules from `nodesdir` (#3676) @Steve-Mcl
+ - fix buffer parse error message of evaluateNodeProperty (#3624) @HiroyasuNishiyama
+
+Nodes
+
+ - File: Further simplify file node filename entry UX (v3) (#3677) @Steve-Mcl
+ - Function: Fix initial cursor position of init/finalize tab of function node (#3674) @HiroyasuNishiyama
+ - Function: Fix ESM module loading in Function node (#3645) @knolleary
+ - Inject: Fix JSONata evaluation of inject button (#3632) @HiroyasuNishiyama
+ - TCP: Dont delete TCP socket twice (#3630) @Steve-Mcl
+ - MQTT Node: define noproxy variable (#3626) @Steve-Mcl
+ - Debug: i18n debug sidebar node label (#3623) @HiroyasuNishiyama
+
+#### 3.0.0-beta.2: Beta Release
+
+**Migration from 2.x**
+
+ - The 'slice wires' action has changed from Ctrl-RightMouseButton to Alt-LeftMouseButton
+
+Editor
+
+ - Rework Junctions to be more node like in their event handling (#3607) @knolleary
+ - Change slicing / slice-junction operations over to mouse button 0 (Left Mouse Button) (#3609) @Steve-Mcl
+ - Do not slice-junction link node wires (#3608) @knolleary
+ - Handle many-to-one slicing of wires (#3604) @knolleary
+ - Ensure ACE worker options are set (#3611) @Steve-Mcl
+ - Remove duplicate history add of ungroup event (#3605) @knolleary
+ - use text width instead of number of characters for deciding select fi… (#3603) @HiroyasuNishiyama
+ - Update Japanese info of link call node reflecting update of English info (#3600) @HiroyasuNishiyama
+ - Fix typedInput label not visible on themes (#3580) @bonanitech
+ - Fix project switching when junctions are present (#3595) @Steve-Mcl
+ - Fix junction: when wiring from a regular nodes INPUT, backwards to a junction (#3591) @Steve-Mcl
+ - Fix error initialising flow tab editor (#3585) @Steve-Mcl
+ - Add Japanese translations for v3.0-beta.1 (#3576) @kazuhitoyokoi
+ - Fix image paths where `red/image/typedInput/XXXX.png` should be `red/image/typedInput/XXXX.svg` (#3592) @kazuhitoyokoi
+ - Fix browser console error Uncaught TypeError when searching certain terms (#3584) @Steve-Mcl
+
+Runtime
+
+ - fix error on system-info action (#3589) @HiroyasuNishiyama
+
+Nodes
+
+ - I18n switch rule selector (#3602) @HiroyasuNishiyama
+ - Handle removal of event handlers to allow mqtt client.end() to work (#3594) @PhilDay-CT
+ - update link-call node info according to current behavior (#3597) @HiroyasuNishiyama
+
+
+#### 3.0.0-beta.1: Beta Release
+
+**Migration from 2.x**
+
+ - Node-RED now requires Node.js 14.x or later.
+ - New installs of Node-RED will default to the monaco editor.
+
+
+Editor
+
+ - Add Junctions (#3462) @knolleary
+ - Allow node name to be auto-generated when added (#3478, #3538) @knolleary
+ - Set monaco as default code editor as of v3.x (#3543) @Steve-Mcl
+ - Update Monaco to V0.33.0 (#3522) @Steve-Mcl
+ - Auto-complete Improvements (#3521) @Steve-Mcl
+ - Add a tooltip to debug sidebar messages to reveal full path to node (#3503) @knolleary
+ - Fix down arrow triggering menu in search box (#3507) @Steve-Mcl
+ - Add Japanese translations for v3.0 (#3512) @kazuhitoyokoi
+ - Add feature: Continuous search tools (search previous, search next) (#3405) @Steve-Mcl
+ - Add feature: split-wire-to-links (#3399, #3476) @Steve-Mcl
+ - Add copy button to node properties tables (#3390) @knolleary
+ - Add info-tab search options dropdown to the regular search (#3395) @Steve-Mcl
+ - New Feature: Add ability to find modified nodes/flows. (#3392) @Steve-Mcl
+ - Code editor ux improvements around remembering state of each code editor in a flow (#3553) @Steve-Mcl
+ - Make it easier to apply themes on SVG icons (#3515) @bonanitech
+ - Add support of property validation message (#3438) @HiroyasuNishiyama
+ - Ensure node validation tooltip is closed when field becomes valid (#3570) @knolleary
+ - Add "search for" buttons to notifications (#3567) @Steve-Mcl
+ - Don't let themes change node config colors (#3564) @bonanitech
+ - Fix gap between typedInput containers borders (#3560) @bonanitech
+ - Fix recording removed links in edit history (#3547) @knolleary
+ - Remove unused SASS vars (#3536) @bonanitech
+ - Add custom style for jQuery widgets borders (#3537) @bonanitech
+ - fix out of scope reference of hasUnusedConfig variable (#3535) @HiroyasuNishiyama
+ - correct "non string" check parenthesis (#3524) @Steve-Mcl
+ - Ensure i18n of scoped package name (#3516) @Steve-Mcl
+ - Prevent shortcut deploy when deploy button shaded (#3517) @Steve-Mcl
+ - Fix: Sidebar "Configuration" filter button tooltip (#3500) @ralphwetzel
+ - Add the ability to customize diff colors even more (#3499) @bonanitech
+ - Do JSON comparison of old value/new value in editor (#3481) @Steve-Mcl
+ - Fix nodes losing their wires when in an iframe (#3484) @zettca
+ - Improve scroll into view (#3468) @Steve-Mcl
+ - Do not show 1st tab if hidden when loading (#3464) @Steve-Mcl
+
+Runtime
+
+ - Fix importing external module from node-red module (#3541) @knolleary
+ - Add support for multiple static paths with optional static root (#3542) @Steve-Mcl
+ - Store external token when authenticating if provided (#3460) @ArFe
+ - Support OAuth/OpenID logout (#3388) @mw75
+ - Allow adminAuth to auto-login users when using passport strategy (#3519) @knolleary
+ - Add runtime diagnostics admin endpoint (#3511) @Steve-Mcl
+ - Don't start if user has no home directory (#3540) @hardillb
+ - Error on invalid encrypted credentials (#3498) @sammachin
+
+Nodes
+
+ - Debug: Add message count option to Debug status (#3544 #3551) @rafaelmuynarsk @knolleary
+ - File: Change basic Filename field to a typedInput (#3533) @Steve-Mcl
+ - HTTP Request: Add UI for Http Request node headers (#3488) @Steve-Mcl
+ - Inject: let inject optionally fire at start in only at time mode. (#3385) @dceejay
+ - Link Call: Dynamic link call (#3463) @Steve-Mcl
+ - Link Call: Display link targets of nodes in a regular flow, for Link Call nodes inside a subflow (#3528) @Steve-Mcl
+ - MQTT: MQTT payload auto parsing improvements (#3530) @Steve-Mcl
+ - MQTT: Add client and Runtime MQTT topic validation (#3563) @Steve-Mcl [dev]
+ - MQTT: save and restore v5 config user props (#3562) @Steve-Mcl
+ - MQTT: Fix incorrect MQTT status (#3552) @Steve-Mcl
+ - MQTT: fix reference error of msg.status in debug node (#3526) @HiroyasuNishiyama
+ - MQTT: Add unit tests for MQTT nodes (#3497) @Steve-Mcl
+ - MQTT: fix typo of will properties (#3502) @Steve-Mcl
+ - MQTT: ensure mqtt v5 props can be set false (#3472) @Steve-Mcl
+ - Switch: add check for NaN in is of type number to be false (#3409) @dceejay
+ - TCP: TCP node better split (#3465) @dceejay
+ - Watch: Update Watch node to use node-watch module (#3559 #3569) @knolleary
+ - WebSocket: call done after ws disconnects (#3531) @Steve-Mcl
+
+
 #### 2.2.2: Maintenance Release
 
 Nodes

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

@@ -1,6 +1,6 @@
 {
     "name": "node-red",
-    "version": "2.2.2",
+    "version": "3.0.0-beta.4",
     "description": "Low-code programming for event-driven applications",
     "homepage": "http://nodered.org",
     "license": "Apache-2.0",
@@ -26,56 +26,57 @@
         }
     ],
     "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-session": "1.17.2",
+        "express": "4.18.1",
+        "express-session": "1.17.3",
         "form-data": "4.0.0",
-        "fs-extra": "10.0.0",
-        "fs.notify": "0.0.4",
-        "got": "11.8.3",
+        "fs-extra": "10.1.0",
+        "got": "11.8.5",
         "hash-sum": "2.0.0",
-        "hpagent": "0.1.2",
-        "https-proxy-agent": "5.0.0",
-        "i18next": "21.6.11",
+        "hpagent": "1.0.0",
+        "https-proxy-agent": "5.0.1",
+        "i18next": "21.8.10",
         "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.3",
         "moment-timezone": "0.5.34",
-        "mqtt": "4.3.5",
-        "multer": "1.4.4",
+        "mqtt": "4.3.7",
+        "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-http-bearer": "1.0.1",
         "passport-oauth2-client-password": "0.1.2",
-        "raw-body": "2.4.3",
-        "semver": "7.3.5",
+        "raw-body": "2.5.1",
+        "semver": "7.3.7",
         "tar": "6.1.11",
         "tough-cookie": "4.0.0",
-        "uglify-js": "3.15.1",
+        "uglify-js": "3.16.0",
         "uuid": "8.3.2",
         "ws": "7.5.6",
         "xml2js": "0.4.23"
@@ -84,18 +85,18 @@
         "bcrypt": "5.0.1"
     },
     "devDependencies": {
-        "dompurify": "2.3.5",
-        "grunt": "1.4.1",
+        "dompurify": "2.3.8",
+        "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-copy": "~1.0.0",
-        "grunt-contrib-jshint": "3.1.1",
-        "grunt-contrib-uglify": "5.0.1",
-        "grunt-contrib-watch": "~1.1.0",
+        "grunt-contrib-concat": "2.1.0",
+        "grunt-contrib-copy": "1.0.0",
+        "grunt-contrib-jshint": "3.2.0",
+        "grunt-contrib-uglify": "5.2.1",
+        "grunt-contrib-watch": "1.1.0",
         "grunt-jsdoc": "2.4.1",
         "grunt-jsdoc-to-markdown": "6.0.0",
         "grunt-jsonlint": "2.1.3",
@@ -104,22 +105,22 @@
         "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.17",
         "minami": "1.2.3",
-        "mocha": "9.2.0",
-        "node-red-node-test-helper": "^0.2.7",
-        "nodemon": "2.0.15",
+        "mocha": "9.2.2",
+        "node-red-node-test-helper": "^0.3.0",
+        "nodemon": "2.0.16",
         "proxy": "^1.0.2",
-        "sass": "1.49.7",
+        "sass": "1.52.3",
         "should": "13.2.3",
         "sinon": "11.1.2",
         "stoppable": "^1.1.0",
-        "supertest": "6.2.2"
+        "supertest": "6.2.3"
     },
     "engines": {
-        "node": ">=12"
+        "node": ">=14"
     }
 }

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",
-                "prompts":[{type:"button",label:mergedAdminAuth.strategy.label, url: urlPrefix + "auth/strategy"}]
+                "type":"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;
                 });
-                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});
-                });
+                // 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@node-red/editor-api",
-    "version": "2.2.2",
+    "version": "3.0.0-beta.4",
     "license": "Apache-2.0",
     "main": "./lib/index.js",
     "repository": {
@@ -16,17 +16,17 @@
         }
     ],
     "dependencies": {
-        "@node-red/util": "2.2.2",
-        "@node-red/editor-client": "2.2.2",
+        "@node-red/util": "3.0.0-beta.4",
+        "@node-red/editor-client": "3.0.0-beta.4",
         "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": "4.17.2",
+        "express-session": "1.17.3",
+        "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",

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.",
-            "lostConnectionTry": "Jetzt testen",
+            "lostConnectionReconnect": "Verbindung zum Server verloren. Wiederherstellung der Verbindung in __time__s.",
+            "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__'",
-            "merge-abort": "Merge abgebrochen",
+            "change-branch": "Wechsel in den lokalen Branch '__project__'",
+            "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_plural": "Importierte Typen nicht erkannt:",
-        "importDuplicate": "Importiertes doppeltes Node:",
-        "importDuplicate_plural": "Importierte doppelte Nodes:",
-        "nodesExported": "Nodes in der Zwischenablage abgelegt",
-        "nodesImported": "Eingefügt:",
+        "importUnrecognised": "Nicht erkannten Typ importiert:",
+        "importUnrecognised_plural": "Nicht erkannte Typen importiert:",
+        "importDuplicate": "Doppelten Node importiert:",
+        "importDuplicate_plural": "Doppelte Nodes importiert:",
+        "nodesExported": "Nodes in die Zwischenablage exportiert",
+        "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",
-        "exportNode": "Node exportieren",
+        "importNode": "Nodes importieren",
+        "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,7 +672,7 @@
             "outline": "Entwurf",
             "empty": "leer",
             "globalConfig": "Globale Konfigurations-Nodes",
-            "triggerAction": "Auslösen",
+            "triggerAction": "Aktion auslösen",
             "find": "Suche im Arbeitsbereich"
         },
         "help": {
@@ -736,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",
@@ -855,6 +894,8 @@
         "addTitle": "Element hinzufügen"
     },
     "search": {
+        "history": "Suchhistorie",
+        "clear": "Leeren",
         "empty": "Keine Übereinstimmungen gefunden",
         "addNode": "Node hinzufügen ...",
         "options": {
@@ -862,7 +903,10 @@
             "unusedConfigNodes": "Unbenutzte Konfigurations-Nodes",
             "invalidNodes": "Ungültige Nodes",
             "uknownNodes": "Unbekannte Nodes",
-            "unusedSubflows": "Unbenutzte Subflows"
+            "unusedSubflows": "Unbenutzte Subflows",
+            "hiddenFlows": "Versteckte Flows",
+            "modifiedNodes": "Geänderte Nodes",
+            "thisFlow": "Aktueller Flow"
         }
     },
     "expressionEditor": {
@@ -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",
-        "en-US": "English",
-        "ja": "Japanese",
-        "ko": "Korean",
-        "ru": "Russian",
-        "zh-CN": "Chinese(Simplified)",
-        "zh-TW": "Chinese(Traditional)"
+        "de": "Deutsch",
+        "en-US": "Englisch",
+        "ja": "Japanisch",
+        "ko": "Koreanisch",
+        "ru": "Russisch",
+        "zh-CN": "Chinesisch (Vereinfacht)",
+        "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

@@ -3,7 +3,7 @@
         "label": {
             "name": "Name",
             "ok": "Ok",
-            "done":"Done",
+            "done": "Done",
             "cancel": "Cancel",
             "delete": "Delete",
             "close": "Close",
@@ -66,7 +66,7 @@
         "listSubflows": "List subflows",
         "status": "Status",
         "enabled": "Enabled",
-        "disabled":"Disabled",
+        "disabled": "Disabled",
         "info": "Description",
         "selectNodes": "Click nodes to select"
     },
@@ -114,7 +114,7 @@
             "keyboardShortcuts": "Keyboard shortcuts",
             "login": "Login",
             "logout": "Logout",
-            "editPalette":"Manage palette",
+            "editPalette": "Manage palette",
             "other": "Other",
             "showTips": "Show tips",
             "showWelcomeTours": "Show guided tours for new versions",
@@ -130,19 +130,19 @@
             "ungroupSelection": "Ungroup selection",
             "groupMergeSelection": "Merge selection",
             "groupRemoveSelection": "Remove from group",
-            "arrange":"Arrange",
-            "alignLeft":"Align to left",
-            "alignCenter":"Align to center",
-            "alignRight":"Align to right",
-            "alignTop":"Align to top",
-            "alignMiddle":"Align to middle",
-            "alignBottom":"Align to bottom",
-            "distributeHorizontally":"Distribute horizontally",
-            "distributeVertically":"Distribute vertically",
-            "moveToBack":"Move to back",
-            "moveToFront":"Move to front",
-            "moveBackwards":"Move backwards",
-            "moveForwards":"Move forwards"
+            "arrange": "Arrange",
+            "alignLeft": "Align to left",
+            "alignCenter": "Align to center",
+            "alignRight": "Align to right",
+            "alignTop": "Align to top",
+            "alignMiddle": "Align to middle",
+            "alignBottom": "Align to bottom",
+            "distributeHorizontally": "Distribute horizontally",
+            "distributeVertically": "Distribute vertically",
+            "moveToBack": "Move to back",
+            "moveToFront": "Move to front",
+            "moveBackwards": "Move backwards",
+            "moveForwards": "Move forwards"
         }
     },
     "actions": {
@@ -169,6 +169,10 @@
         }
     },
     "notification": {
+        "state": {
+            "flowsStopped": "Flows stopped",
+            "flowsStarted": "Flows started"
+        },
         "warning": "<strong>Warning</strong>: __message__",
         "warnings": {
             "undeployedChanges": "node has undeployed changes",
@@ -176,10 +180,10 @@
             "nodeActionDisabledSubflow": "node actions disabled within subflow",
             "missing-types": "<p>Flows stopped due to missing node types.</p>",
             "missing-modules": "<p>Flows stopped due to missing modules.</p>",
-            "safe-mode":"<p>Flows stopped in safe mode.</p><p>You can modify your flows and deploy the changes to restart.</p>",
+            "safe-mode": "<p>Flows stopped in safe mode.</p><p>You can modify your flows and deploy the changes to restart.</p>",
             "restartRequired": "Node-RED must be restarted to enable upgraded modules",
             "credentials_load_failed": "<p>Flows stopped as the credentials could not be decrypted.</p><p>The flow credential file is encrypted, but the project's encryption key is missing or invalid.</p>",
-            "credentials_load_failed_reset":"<p>Credentials could not be decrypted</p><p>The flow credential file is encrypted, but the project's encryption key is missing or invalid.</p><p>The flow credential file will be reset on the next deployment. Any existing flow credentials will be cleared.</p>",
+            "credentials_load_failed_reset": "<p>Credentials could not be decrypted</p><p>The flow credential file is encrypted, but the project's encryption key is missing or invalid.</p><p>The flow credential file will be reset on the next deployment. Any existing flow credentials will be cleared.</p>",
             "missing_flow_file": "<p>Project flow file not found.</p><p>The project is not configured with a flow file.</p>",
             "missing_package_file": "<p>Project package file not found.</p><p>The project is missing a package.json file.</p>",
             "project_empty": "<p>The project is empty.</p><p>Do you want to create a default set of project files?<br/>Otherwise, you will have to manually add files to the project outside of the editor.</p>",
@@ -217,7 +221,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": {
@@ -256,11 +261,11 @@
         "recoveredNodesInfo": "The nodes on this flow were missing a valid flow id when they were imported. They have been added to this flow so you can either restore or delete them.",
         "recoveredNodesNotification": "<p>Imported nodes without a valid flow id</p><p>They have been added to a new flow called '__flowName__'.</p>",
         "export": {
-            "selected":"selected nodes",
-            "current":"current flow",
-            "all":"all flows",
-            "compact":"compact",
-            "formatted":"formatted",
+            "selected": "selected nodes",
+            "current": "current flow",
+            "all": "all flows",
+            "compact": "compact",
+            "formatted": "formatted",
             "copy": "Copy to clipboard",
             "export": "Export to library",
             "exportAs": "Export as",
@@ -300,8 +305,10 @@
         "successfulDeploy": "Successfully deployed",
         "successfulRestart": "Successfully restarted flows",
         "deployFailed": "Deploy failed: __message__",
-        "unusedConfigNodes":"You have some unused configuration nodes.",
-        "unusedConfigNodesLink":"Click here to see them",
+        "unusedConfigNodes": "You have some unused configuration nodes.",
+        "unusedConfigNodesButton": "Search unused config nodes",
+        "unknownNodesButton": "Search for unknown nodes",
+        "invalidNodesButton": "Search for invalid nodes",
         "errors": {
             "noResponse": "no response from server"
         },
@@ -348,8 +355,8 @@
         },
         "nodeCount": "__count__ node",
         "nodeCount_plural": "__count__ nodes",
-        "local":"Local changes",
-        "remote":"Remote changes",
+        "local": "Local changes",
+        "remote": "Remote changes",
         "reviewChanges": "Review Changes",
         "noBinaryFileShowed": "Cannot show binary file contents",
         "viewCommitDiff": "View Commit Changes",
@@ -433,7 +440,7 @@
         "inputType": "Input type",
         "selectType": "select types...",
         "loadCredentials": "Loading node credentials",
-        "inputs" : {
+        "inputs": {
             "input": "input",
             "select": "select",
             "checkbox": "checkbox",
@@ -502,7 +509,7 @@
         "searchBox": "Open search box",
         "managePalette": "Manage palette",
         "actionList": "Action list",
-        "splitWiresWithLinks": "Split selection with Link nodes"
+        "splitWireWithLinks": "Split selection with Link nodes"
     },
     "library": {
         "library": "Library",
@@ -614,19 +621,19 @@
             },
             "confirm": {
                 "install": {
-                    "body":"<p>Installing '__module__'</p><p>Before installing, please read the node's documentation. Some nodes have dependencies that cannot be automatically resolved and can require a restart of Node-RED.</p>",
+                    "body": "<p>Installing '__module__'</p><p>Before installing, please read the node's documentation. Some nodes have dependencies that cannot be automatically resolved and can require a restart of Node-RED.</p>",
                     "title": "Install nodes"
                 },
                 "remove": {
-                    "body":"<p>Removing '__module__'</p><p>Removing the node will uninstall it from Node-RED. The node may continue to use resources until Node-RED is restarted.</p>",
+                    "body": "<p>Removing '__module__'</p><p>Removing the node will uninstall it from Node-RED. The node may continue to use resources until Node-RED is restarted.</p>",
                     "title": "Remove nodes"
                 },
                 "update": {
-                    "body":"<p>Updating '__module__'</p><p>Updating the node will require a restart of Node-RED to complete the update. This must be done manually.</p>",
+                    "body": "<p>Updating '__module__'</p><p>Updating the node will require a restart of Node-RED to complete the update. This must be done manually.</p>",
                     "title": "Update nodes"
                 },
                 "cannotUpdate": {
-                    "body":"An update for this node is available, but it is not installed in a location that the palette manager can update.<br/><br/>Please refer to the documentation for how to update this node."
+                    "body": "An update for this node is available, but it is not installed in a location that the palette manager can update.<br/><br/>Please refer to the documentation for how to update this node."
                 },
                 "button": {
                     "review": "Open node information",
@@ -660,14 +667,14 @@
             "showMore": "show more",
             "showLess": "show less",
             "flow": "Flow",
-            "selection":"Selection",
-            "nodes":"__count__ nodes",
+            "selection": "Selection",
+            "nodes": "__count__ nodes",
             "flowDesc": "Flow Description",
             "subflowDesc": "Subflow Description",
             "nodeHelp": "Node Help",
-            "none":"None",
+            "none": "None",
             "arrayItems": "__count__ items",
-            "showTips":"You can open the tips from the settings panel",
+            "showTips": "You can open the tips from the settings panel",
             "outline": "Outline",
             "empty": "empty",
             "globalConfig": "Global Configuration Nodes",
@@ -682,7 +689,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",
@@ -698,8 +706,8 @@
             "filtered": "__count__ hidden"
         },
         "context": {
-            "name":"Context Data",
-            "label":"context",
+            "name": "Context Data",
+            "label": "context",
             "none": "none selected",
             "refresh": "refresh to load",
             "empty": "empty",
@@ -737,9 +745,9 @@
                 "files": "Files",
                 "flow": "Flow",
                 "credentials": "Credentials",
-                "package":"Package",
-                "packageCreate":"File will be created when changes are saved",
-                "fileNotExist":"File does not exist",
+                "package": "Package",
+                "packageCreate": "File will be created when changes are saved",
+                "fileNotExist": "File does not exist",
                 "selectFile": "Select File",
                 "invalidEncryptionKey": "Invalid encryption key",
                 "encryptionEnabled": "Encryption enabled",
@@ -904,7 +912,8 @@
             "uknownNodes": "Unknown nodes",
             "unusedSubflows": "Unused subflows",
             "hiddenFlows": "Hidden flows",
-            "modifiedNodes": "Modified nodes and flows"
+            "modifiedNodes": "Modified nodes and flows",
+            "thisFlow": "Current flow"
         }
     },
     "expressionEditor": {
@@ -940,6 +949,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",
@@ -972,7 +983,7 @@
         "title": "Buffer editor",
         "modeString": "Handle as UTF-8 String",
         "modeArray": "Handle as JSON array",
-        "modeDesc":"<h3>Buffer editor</h3><p>The Buffer type is stored as a JSON array of byte values. The editor will attempt to parse the entered value as a JSON array. If it is not valid JSON, it will be treated as a UTF-8 String and converted to an array of the individual character code points.</p><p>For example, a value of <code>Hello World</code> will be converted to the JSON array:<pre>[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]</pre></p>"
+        "modeDesc": "<h3>Buffer editor</h3><p>The Buffer type is stored as a JSON array of byte values. The editor will attempt to parse the entered value as a JSON array. If it is not valid JSON, it will be treated as a UTF-8 String and converted to an array of the individual character code points.</p><p>For example, a value of <code>Hello World</code> will be converted to the JSON array:<pre>[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]</pre></p>"
     },
     "projects": {
         "config-git": "Configure Git client",
@@ -1134,7 +1145,7 @@
             "no-empty": "Cannot create default file set on a non-empty project",
             "git-error": "git error"
         },
-        "errors" : {
+        "errors": {
             "no-username-email": "Your Git client is not configured with a username/email.",
             "unexpected": "An unexpected error occurred",
             "code": "code"
@@ -1152,9 +1163,13 @@
     "tourGuide": {
         "takeATour": "Take a tour",
         "start": "Start",
-        "next": "Next"
+        "next": "Next",
+        "welcomeTours": "Welcome Tours"
     },
-    "languages" : {
+    "diagnostics": {
+        "title": "System Info"
+    },
+    "languages": {
         "de": "German",
         "en-US": "English",
         "ja": "Japanese",
@@ -1162,5 +1177,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/en-US/infotips.json

@@ -1,23 +1,23 @@
 {
     "info": {
-        "tip0" : "You can remove the selected nodes or links with {{core:delete-selection}}",
-        "tip1" : "Search for nodes using {{core:search}}",
-        "tip2" : "{{core:toggle-sidebar}} will toggle the view of this sidebar",
-        "tip3" : "You can manage your palette of nodes with {{core:manage-palette}}",
-        "tip4" : "Your flow configuration nodes are listed in the sidebar panel. It can be accessed from the menu or with {{core:show-config-tab}}",
-        "tip5" : "Enable or disable these tips from the option in the settings",
-        "tip6" : "Move the selected nodes using the [left] [up] [down] and [right] keys. Hold [shift] to nudge them further",
-        "tip7" : "Dragging a node onto a wire will splice it into the link",
-        "tip8" : "Export the selected nodes, or the current tab with {{core:show-export-dialog}}",
-        "tip9" : "Import a flow by dragging its JSON into the editor, or with {{core:show-import-dialog}}",
-        "tip10" : "[shift] [click] and drag on a node port to move all of the attached wires or just the selected one",
-        "tip11" : "Show the Info tab with {{core:show-info-tab}} or the Debug tab with {{core:show-debug-tab}}",
-        "tip12" : "[ctrl] [click] in the workspace to open the quick-add dialog",
-        "tip13" : "Hold down [ctrl] when you [click] on a node port to enable quick-wiring",
-        "tip14" : "Hold down [shift] when you [click] on a node to also select all of its connected nodes",
-        "tip15" : "Hold down [ctrl] when you [click] on a node to add or remove it from the current selection",
-        "tip16" : "Switch flow tabs with {{core:show-previous-tab}} and {{core:show-next-tab}}",
-        "tip17" : "You can confirm your changes in the node edit tray with {{core:confirm-edit-tray}} or cancel them with {{core:cancel-edit-tray}}",
-        "tip18" : "Pressing {{core:edit-selected-node}} will edit the first node in the current selection"
+        "tip0": "You can remove the selected nodes or links with {{core:delete-selection}}",
+        "tip1": "Search for nodes using {{core:search}}",
+        "tip2": "{{core:toggle-sidebar}} will toggle the view of this sidebar",
+        "tip3": "You can manage your palette of nodes with {{core:manage-palette}}",
+        "tip4": "Your flow configuration nodes are listed in the sidebar panel. It can be accessed from the menu or with {{core:show-config-tab}}",
+        "tip5": "Enable or disable these tips from the option in the settings",
+        "tip6": "Move the selected nodes using the [left] [up] [down] and [right] keys. Hold [shift] to nudge them further",
+        "tip7": "Dragging a node onto a wire will splice it into the link",
+        "tip8": "Export the selected nodes, or the current tab with {{core:show-export-dialog}}",
+        "tip9": "Import a flow by dragging its JSON into the editor, or with {{core:show-import-dialog}}",
+        "tip10": "[shift] [click] and drag on a node port to move all of the attached wires or just the selected one",
+        "tip11": "Show the Info tab with {{core:show-info-tab}} or the Debug tab with {{core:show-debug-tab}}",
+        "tip12": "[ctrl] [click] in the workspace to open the quick-add dialog",
+        "tip13": "Hold down [ctrl] when you [click] on a node port to enable quick-wiring",
+        "tip14": "Hold down [shift] when you [click] on a node to also select all of its connected nodes",
+        "tip15": "Hold down [ctrl] when you [click] on a node to add or remove it from the current selection",
+        "tip16": "Switch flow tabs with {{core:show-previous-tab}} and {{core:show-next-tab}}",
+        "tip17": "You can confirm your changes in the node edit tray with {{core:confirm-edit-tray}} or cancel them with {{core:cancel-edit-tray}}",
+        "tip18": "Pressing {{core:edit-selected-node}} will edit the first node in the current selection"
     }
 }

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

@@ -52,52 +52,52 @@
         "desc": "Finds occurrences of `pattern` within `str` and replaces them with `replacement`.\n\nThe optional `limit` parameter is the maximum number of replacements."
     },
     "$now": {
-        "args":"$[picture [, timezone]]",
-        "desc":"Generates a timestamp in ISO 8601 compatible format and returns it as a string. If the optional picture and timezone parameters are supplied, then the current timestamp is formatted as described by the `$fromMillis()` function"
+        "args": "$[picture [, timezone]]",
+        "desc": "Generates a timestamp in ISO 8601 compatible format and returns it as a string. If the optional picture and timezone parameters are supplied, then the current timestamp is formatted as described by the `$fromMillis()` function"
     },
     "$base64encode": {
-        "args":"string",
-        "desc":"Converts an ASCII string to a base 64 representation. Each character in the string is treated as a byte of binary data. This requires that all characters in the string are in the 0x00 to 0xFF range, which includes all characters in URI encoded strings. Unicode characters outside of that range are not supported."
+        "args": "string",
+        "desc": "Converts an ASCII string to a base 64 representation. Each character in the string is treated as a byte of binary data. This requires that all characters in the string are in the 0x00 to 0xFF range, which includes all characters in URI encoded strings. Unicode characters outside of that range are not supported."
     },
     "$base64decode": {
-        "args":"string",
-        "desc":"Converts base 64 encoded bytes to a string, using a UTF-8 Unicode codepage."
+        "args": "string",
+        "desc": "Converts base 64 encoded bytes to a string, using a UTF-8 Unicode codepage."
     },
     "$number": {
         "args": "arg",
         "desc": "Casts the `arg` parameter to a number using the following casting rules:\n\n - Numbers are unchanged\n - Strings that contain a sequence of characters that represent a legal JSON number are converted to that number\n - All other values cause an error to be thrown."
     },
     "$abs": {
-        "args":"number",
-        "desc":"Returns the absolute value of the `number` parameter."
+        "args": "number",
+        "desc": "Returns the absolute value of the `number` parameter."
     },
     "$floor": {
-        "args":"number",
-        "desc":"Returns the value of `number` rounded down to the nearest integer that is smaller or equal to `number`."
+        "args": "number",
+        "desc": "Returns the value of `number` rounded down to the nearest integer that is smaller or equal to `number`."
     },
     "$ceil": {
-        "args":"number",
-        "desc":"Returns the value of `number` rounded up to the nearest integer that is greater than or equal to `number`."
+        "args": "number",
+        "desc": "Returns the value of `number` rounded up to the nearest integer that is greater than or equal to `number`."
     },
     "$round": {
-        "args":"number [, precision]",
-        "desc":"Returns the value of the `number` parameter rounded to the number of decimal places specified by the optional `precision` parameter."
+        "args": "number [, precision]",
+        "desc": "Returns the value of the `number` parameter rounded to the number of decimal places specified by the optional `precision` parameter."
     },
     "$power": {
-        "args":"base, exponent",
-        "desc":"Returns the value of `base` raised to the power of `exponent`."
+        "args": "base, exponent",
+        "desc": "Returns the value of `base` raised to the power of `exponent`."
     },
     "$sqrt": {
-        "args":"number",
-        "desc":"Returns the square root of the value of the `number` parameter."
+        "args": "number",
+        "desc": "Returns the square root of the value of the `number` parameter."
     },
     "$random": {
-        "args":"",
-        "desc":"Returns a pseudo random number greater than or equal to zero and less than one."
+        "args": "",
+        "desc": "Returns a pseudo random number greater than or equal to zero and less than one."
     },
     "$millis": {
-        "args":"",
-        "desc":"Returns the number of milliseconds since the Unix Epoch (1 January, 1970 UTC) as a number. All invocations of `$millis()` within an evaluation of an expression will all return the same value."
+        "args": "",
+        "desc": "Returns the number of milliseconds since the Unix Epoch (1 January, 1970 UTC) as a number. All invocations of `$millis()` within an evaluation of an expression will all return the same value."
     },
     "$sum": {
         "args": "array",
@@ -136,20 +136,20 @@
         "desc": "Appends two arrays"
     },
     "$sort": {
-        "args":"array [, function]",
-        "desc":"Returns an array containing all the values in the `array` parameter, but sorted into order.\n\nIf a comparator `function` is supplied, then it must be a function that takes two parameters:\n\n`function(left, right)`\n\nThis function gets invoked by the sorting algorithm to compare two values left and right. If the value of left should be placed after the value of right in the desired sort order, then the function must return Boolean `true` to indicate a swap. Otherwise it must return `false`."
+        "args": "array [, function]",
+        "desc": "Returns an array containing all the values in the `array` parameter, but sorted into order.\n\nIf a comparator `function` is supplied, then it must be a function that takes two parameters:\n\n`function(left, right)`\n\nThis function gets invoked by the sorting algorithm to compare two values left and right. If the value of left should be placed after the value of right in the desired sort order, then the function must return Boolean `true` to indicate a swap. Otherwise it must return `false`."
     },
     "$reverse": {
-        "args":"array",
-        "desc":"Returns an array containing all the values from the `array` parameter, but in reverse order."
+        "args": "array",
+        "desc": "Returns an array containing all the values from the `array` parameter, but in reverse order."
     },
     "$shuffle": {
-        "args":"array",
-        "desc":"Returns an array containing all the values from the `array` parameter, but shuffled into random order."
+        "args": "array",
+        "desc": "Returns an array containing all the values from the `array` parameter, but shuffled into random order."
     },
     "$zip": {
-        "args":"array, ...",
-        "desc":"Returns a convolved (zipped) array containing grouped arrays of values from the `array1` … `arrayN` arguments from index 0, 1, 2...."
+        "args": "array, ...",
+        "desc": "Returns a convolved (zipped) array containing grouped arrays of values from the `array1` … `arrayN` arguments from index 0, 1, 2...."
     },
     "$keys": {
         "args": "object",
@@ -168,24 +168,24 @@
         "desc": "Merges an array of `objects` into a single `object` containing all the key/value pairs from each of the objects in the input array. If any of the input objects contain the same key, then the returned `object` will contain the value of the last one in the array. It is an error if the input array contains an item that is not an object."
     },
     "$sift": {
-        "args":"object, function",
-        "desc":"Returns an object that contains only the key/value pairs from the `object` parameter that satisfy the predicate `function` passed in as the second parameter.\n\nThe `function` that is supplied as the second parameter must have the following signature:\n\n`function(value [, key [, object]])`"
+        "args": "object, function",
+        "desc": "Returns an object that contains only the key/value pairs from the `object` parameter that satisfy the predicate `function` passed in as the second parameter.\n\nThe `function` that is supplied as the second parameter must have the following signature:\n\n`function(value [, key [, object]])`"
     },
     "$each": {
-        "args":"object, function",
-        "desc":"Returns an array containing the values return by the `function` when applied to each key/value pair in the `object`."
+        "args": "object, function",
+        "desc": "Returns an array containing the values return by the `function` when applied to each key/value pair in the `object`."
     },
     "$map": {
-        "args":"array, function",
-        "desc":"Returns an array containing the results of applying the `function` parameter to each value in the `array` parameter.\n\nThe `function` that is supplied as the second parameter must have the following signature:\n\n`function(value [, index [, array]])`"
+        "args": "array, function",
+        "desc": "Returns an array containing the results of applying the `function` parameter to each value in the `array` parameter.\n\nThe `function` that is supplied as the second parameter must have the following signature:\n\n`function(value [, index [, array]])`"
     },
     "$filter": {
-        "args":"array, function",
-        "desc":"Returns an array containing only the values in the `array` parameter that satisfy the `function` predicate.\n\nThe `function` that is supplied as the second parameter must have the following signature:\n\n`function(value [, index [, array]])`"
+        "args": "array, function",
+        "desc": "Returns an array containing only the values in the `array` parameter that satisfy the `function` predicate.\n\nThe `function` that is supplied as the second parameter must have the following signature:\n\n`function(value [, index [, array]])`"
     },
     "$reduce": {
-        "args":"array, function [, init]",
-        "desc":"Returns an aggregated value derived from applying the `function` parameter successively to each value in `array` in combination with the result of the previous application of the function.\n\nThe function must accept two arguments, and behaves like an infix operator between each value within the `array`. The signature of `function` must be of the form: `myfunc($accumulator, $value[, $index[, $array]])`\n\nThe optional `init` parameter is used as the initial value in the aggregation."
+        "args": "array, function [, init]",
+        "desc": "Returns an aggregated value derived from applying the `function` parameter successively to each value in `array` in combination with the result of the previous application of the function.\n\nThe function must accept two arguments, and behaves like an infix operator between each value within the `array`. The signature of `function` must be of the form: `myfunc($accumulator, $value[, $index[, $array]])`\n\nThe optional `init` parameter is used as the initial value in the aggregation."
     },
     "$flowContext": {
         "args": "string[, string]",

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__ としてログインしました",
@@ -213,7 +217,8 @@
             "create-default-package": "デフォルトパッケージファイルの作成",
             "no-thanks": "不要",
             "create-default-project": "デフォルトプロジェクトファイルの作成",
-            "show-merge-conflicts": "マージ競合を表示"
+            "show-merge-conflicts": "マージ競合を表示",
+            "unknownNodesButton": "不明なノードを検索する"
         }
     },
     "clipboard": {
@@ -297,7 +302,9 @@
         "successfulRestart": "フローの再起動が成功しました",
         "deployFailed": "デプロイが失敗しました: __message__",
         "unusedConfigNodes": "使われていない設定ノードがあります。",
-        "unusedConfigNodesLink": "設定を参照する",
+        "unusedConfigNodesButton": "未使用の構成ノードを検索",
+        "unknownNodesButton": "不明なノードを検索する",
+        "invalidNodesButton": "無効なノードを検索する",
         "errors": {
             "noResponse": "サーバの応答がありません"
         },
@@ -497,7 +504,8 @@
         "redoChange": "変更操作をやり直し",
         "searchBox": "ノードを検索",
         "managePalette": "パレットの管理",
-        "actionList": "動作一覧"
+        "actionList": "動作一覧",
+        "splitWireWithLinks": "選択したワイヤーをlinkノードで分離"
     },
     "library": {
         "library": "ライブラリ",
@@ -898,7 +906,9 @@
             "invalidNodes": "不正なノード",
             "uknownNodes": "未知のノード",
             "unusedSubflows": "未使用のサブフロー",
-            "hiddenFlows": "非表示のフロー"
+            "hiddenFlows": "非表示のフロー",
+            "modifiedNodes": "修正したノードやフロー",
+            "thisFlow": "現在のフロー"
         }
     },
     "expressionEditor": {
@@ -934,6 +944,8 @@
         "format": "JSONフォーマット",
         "rawMode": "JSONを編集",
         "uiMode": "ビジュアルエディタ",
+        "rawMode-readonly": "JSON",
+        "uiMode-readonly": "ビジュアル",
         "insertAbove": "上に挿入",
         "insertBelow": "下に挿入",
         "addItem": "要素を追加",
@@ -1146,7 +1158,11 @@
     "tourGuide": {
         "takeATour": "ツアーを開始",
         "start": "開始",
-        "next": "次へ"
+        "next": "次へ",
+	"tours": "ツアー"
+    },
+    "diagnostics": {
+        "title": "システム情報"
     },
     "languages": {
         "de": "ドイツ語",
@@ -1157,6 +1173,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 +1212,7 @@
         "hide-all-flows": "全てのフローを非表示",
         "show-all-flows": "全てのフローを表示",
         "show-last-hidden-flow": "最後に非表示にしたフローを表示",
+        "list-modified-nodes": "修正したフローを表示",
         "list-hidden-flows": "非表示フローを表示",
         "list-flows": "フロー一覧",
         "list-subflows": "サブフロー一覧",
@@ -1240,6 +1279,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 +1307,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 +1319,8 @@
         "set-deploy-type-to-modified-flows": "デプロイを「変更したフロー」に設定",
         "set-deploy-type-to-modified-nodes": "デプロイを「変更したノード」に設定",
         "show-debug-tab": "デバッグタブを表示",
-        "clear-debug-messages": "デバッグメッセージをクリア",
-        "clear-filtered-debug-messages": "フィルタしたデバッグメッセージをクリア",
+        "clear-debug-messages": "デバッグメッセージを削除",
+        "clear-filtered-debug-messages": "フィルタしたデバッグメッセージを削除",
         "activate-selected-debug-nodes": "選択したデバッグノードを有効化",
         "activate-all-debug-nodes": "全てのデバッグノードを有効化",
         "activate-all-flow-debug-nodes": "フロー内の全デバッグノードを有効化",
@@ -1287,6 +1330,12 @@
         "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": "バージョンコントロールタブを表示"
     }
 }

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": "нет ответа от сервера"
         },

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": "登陆",
-        "loginFailed": "登陆失败",
+        "login": "登录",
+        "loginFailed": "登录失败",
         "notAuthorized": "未授权",
         "errors": {
-            "settings": "设置信息需要登陆后才能访问",
-            "deploy": "改动需要登陆后才能部署",
-            "notAuthorized": "此操作需要登陆后才能执行"
+            "settings": "设置信息需要登录后才能访问",
+            "deploy": "改动需要登录后才能部署",
+            "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": "服务器没有响应"
         },

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": "伺服器沒有回應"
         },

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-beta.4",
     "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

@@ -22,6 +22,14 @@ 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;
@@ -514,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;
@@ -523,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/nodes.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  **/
 
-/** 
+/**
  * An Interface to nodes and utility functions for creating/adding/deleting nodes and links
  * @namespace RED.nodes
 */
@@ -738,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];
@@ -772,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) {
@@ -1617,21 +1654,19 @@ 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 || {
-            generateIds: false,
-            addFlow: false,
-        }
-        options.importMap = options.importMap || {};
-
-        var createNewIds = options.generateIds;
-        var createMissingWorkspace = options.addFlow;
+        const defOpts = { generateIds: false, addFlow: false, reimport: false, importMap: {} }
+        options = Object.assign({}, defOpts, options)
+        const createNewIds = options.generateIds;
+        const reimport = (!createNewIds && !!options.reimport)
+        const createMissingWorkspace = options.addFlow;
         var i;
         var n;
         var newNodes;
@@ -1932,7 +1967,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;
                     }
                 }
@@ -2033,7 +2069,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);
@@ -2183,7 +2220,7 @@ RED.nodes = (function() {
             }
             if (n.wires) {
                 for (var w1=0;w1<n.wires.length;w1++) {
-                    var wires = (n.wires[w1] instanceof Array)?n.wires[w1]:[n.wires[w1]];
+                    var wires = (Array.isArray(n.wires[w1]))?n.wires[w1]:[n.wires[w1]];
                     for (var w2=0;w2<wires.length;w2++) {
                         if (node_map.hasOwnProperty(wires[w2])) {
                             if (n.z === node_map[wires[w2]].z) {
@@ -2462,6 +2499,8 @@ RED.nodes = (function() {
         workspacesOrder = [];
         groups = {};
         groupsByZ = {};
+        junctions = {};
+        junctionsByZ = {};
 
         var subflowIds = Object.keys(subflows);
         subflowIds.forEach(function(id) {
@@ -2730,7 +2769,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;

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

@@ -252,8 +252,21 @@ var RED = (function() {
                         if (/^#flow\/.+$/.test(currentHash)) {
                             RED.workspaces.show(currentHash.substring(6),true);
                         }
-                        if (RED.workspaces.active() === 0 && RED.workspaces.count() > 0) {
-                            RED.workspaces.show(RED.nodes.getWorkspaceOrder()[0])
+                        if (RED.workspaces.count() > 0) {
+                            const hiddenTabs = JSON.parse(RED.settings.getLocal("hiddenTabs")||"{}");
+                            const workspaces = RED.nodes.getWorkspaceOrder();
+                            if (RED.workspaces.active() === 0) {
+                                for (let index = 0; index < workspaces.length; index++) {
+                                    const ws = workspaces[index];
+                                    if (!hiddenTabs[ws]) {
+                                        RED.workspaces.show(ws);
+                                        break;
+                                    }
+                                }
+                            }
+                            if (RED.workspaces.active() === 0) {
+                                RED.workspaces.show(workspaces[0]);
+                            }
                         }
                     } catch(err) {
                         console.warn(err);
@@ -284,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();
@@ -319,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 = [
                             {
@@ -345,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();
@@ -452,16 +476,16 @@ var RED = (function() {
             } else if (persistentNotifications.hasOwnProperty(notificationId)) {
                 persistentNotifications[notificationId].close();
                 delete persistentNotifications[notificationId];
-                if (notificationId === 'runtime-state') {
-                    RED.events.emit("runtime-state",msg);
-                }
+            }
+            if (notificationId === 'runtime-state') {
+                RED.events.emit("runtime-state",msg);
             }
         });
         RED.comms.subscribe("status/#",function(topic,msg) {
             var parts = topic.split("/");
             var node = RED.nodes.node(parts[1]);
             if (node) {
-                if (msg.hasOwnProperty("text") && msg.text !== null && /^[a-zA-Z]/.test(msg.text)) {
+                if (msg.hasOwnProperty("text") && msg.text !== null && /^[@a-zA-Z]/.test(msg.text)) {
                     msg.text = node._(msg.text.toString(),{defaultValue:msg.text.toString()});
                 }
                 node.status = msg;
@@ -717,6 +741,7 @@ var RED = (function() {
         RED.search.init();
         RED.actionList.init();
         RED.editor.init();
+        RED.diagnostics.init();
         RED.diff.init();
 
 
@@ -725,6 +750,7 @@ var RED = (function() {
         RED.keyboard.init(buildMainMenu);
 
         RED.nodes.init();
+        RED.runtime.init()
         RED.comms.connect();
 
         $("#red-ui-main-container").show();

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,6 +21,34 @@ RED.actions = (function() {
     function getAction(name) {
         return actions[name].handler;
     }
+    function getActionLabel(name) {
+        let def = actions[name]
+        if (!def) {
+            return ''
+        }
+        if (!def.label) {
+            var options = def.options;
+            var key = options ? options.label : undefined;
+            if (!key) {
+                key = "action-list." +name.replace(/^.*:/,"");
+            }
+            var label = RED._(key);
+            if (label === key) {
+                // no translation. convert `name` to description
+                label = name.replace(/(^.+:([a-z]))|(-([a-z]))/g, function() {
+                    if (arguments[5] === 0) {
+                        return arguments[2].toUpperCase();
+                    } else {
+                        return " "+arguments[4].toUpperCase();
+                    }
+                });
+            }
+            def.label = label;
+        }
+        return def.label
+    }
+
+
     function invokeAction() {
         var args = Array.prototype.slice.call(arguments);
         var name = args.shift();
@@ -31,7 +59,7 @@ RED.actions = (function() {
     }
     function listActions() {
         var result = [];
-        var missing = [];
+
         Object.keys(actions).forEach(function(action) {
             var def = actions[action];
             var shortcut = RED.keyboard.getShortcut(action);
@@ -42,28 +70,8 @@ RED.actions = (function() {
                 isUser = !!RED.keyboard.getUserShortcut(action);
             }
             if (!def.label) {
-                var name = action;
-                var options = def.options;
-                var key = options ? options.label : undefined;
-                if (!key) {
-                    key = "action-list." +name.replace(/^.*:/,"");
-                }
-                var label = RED._(key);
-                if (label === key) {
-                    // no translation. convert `name` to description 
-                    label = name.replace(/(^.+:([a-z]))|(-([a-z]))/g, function() {
-                        if (arguments[5] === 0) {
-                            return arguments[2].toUpperCase();
-                        } else {
-                            return " "+arguments[4].toUpperCase();
-                        }
-                    });
-                    missing.push(key);
-                }
-                def.label = label;
+                def.label = getActionLabel(action)
             }
-            //console.log("; missing:", missing);
-
             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) {

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

@@ -9,12 +9,14 @@
  *
  * options:
  *
- *  search : function(value, [done])
- *           A function that is passed the current contents of the input whenever
- *           it changes.
- *           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
+ *  search:    function(value, [done])
+ *             A function that is passed the current contents of the input whenever
+ *             it changes.
+ *             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.element.addClass("red-ui-autoComplete")
+            this.options.minLength = parseInteger(this.options.minLength, 1, 0);
+            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;
-            if (val.trim() === "") {
+            const that = this;
+            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-check-square pull-left"></i>';
+                linkContent += '<i class="fa fa-square'+(opt.direction!=='right'?" 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 targetWidth = target.width();
-                var targetHeight = target.outerHeight();
+                var pos = isAbsolutePosition?{left:xPos, top: yPos}:target.offset();
+                var targetWidth = isAbsolutePosition?0:target.width();
+                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) {
-                        //DOWN
+                    if (!menuShown && e.keyCode === 40 && $(this).val() === '') {
+                        //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;
-                var i = v.toLowerCase().indexOf(val.toLowerCase());
-                if (i > -1) {
-                    var pre = v.substring(0,i);
-                    var matchedVal = v.substring(i,i+val.length);
-                    var post = v.substring(i+val.length)
-
-                    var el = $('<div/>',{style:"white-space:nowrap; overflow: hidden; flex-grow:1"});
-                    $('<span/>').text(pre).appendTo(el);
-                    $('<span/>',{style:"font-weight: bold"}).text(matchedVal).appendTo(el);
-                    $('<span/>').text(post).appendTo(el);
-
-                    var element = $('<div>',{style: "display: flex"});
-                    el.appendTo(element);
-                    if (opt.source) {
-                        $('<div>').css({
-                            "font-size": "0.8em"
-                        }).text(opt.source.join(",")).appendTo(element);
+                const optVal = opt.value;
+                const optSrc = (opt.source||[]).join(",");
+                const valMatch = getMatch(optVal, val);
+                const srcMatch = getMatch(optSrc, val);
+                if (valMatch.found || srcMatch.found) {
+                    const element = $('<div>',{style: "display: flex"});
+                    const valEl = $('<div/>',{style:"font-family: var(--red-ui-monospace-font); white-space:nowrap; overflow: hidden; flex-grow:1"});
+                    valEl.append(generateSpans(valMatch));
+                    valEl.appendTo(element);
+                    if (optSrc) {
+                        const optEl = $('<div>').css({ "font-size": "0.8em" });
+                        optEl.append(generateSpans(srcMatch));
+                        optEl.appendTo(element);
                     }
-
-                    matches.push({
-                        value: v,
-                        label: element,
-                        i:i
-                    })
+                    matches.push({ 
+                        value: optVal, 
+                        label: element, 
+                        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);
                     }
@@ -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();
-                            image.name = opt.icon;
-                            image.src = mapDeprecatedIcon(opt.icon);
-                            $('<img>',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
+                            $('<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);
                         }
                         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,209 @@
+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 hasSelection = (selection.nodes && selection.nodes.length > 0);
+        const hasMultipleSelection = hasSelection && selection.nodes.length > 1;
+        const hasLinks = selection.links && selection.links.length > 0;
+        const isSingleLink = !hasSelection && hasLinks && selection.links.length === 1
+        const isMultipleLinks = !hasSelection && hasLinks && selection.links.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()
+
+        let addX = options.x - offset.left + $("#red-ui-workspace-chart").scrollLeft()
+        let addY = options.y - offset.top + $("#red-ui-workspace-chart").scrollTop()
+
+        if (RED.view.snapGrid) {
+            const gridSize = RED.view.gridSize()
+            addX = gridSize*Math.floor(addX/gridSize)
+            addY = gridSize*Math.floor(addY/gridSize)
+        }
+
+        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
+                            })
+                        }
+                    },
+                    ( hasSelection || hasLinks ) ? {
+                        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.redraw(true)
+                        }
+                    },
+                    {
+                        label: RED._("contextMenu.linkNodes"),
+                        onselect: 'core:split-wire-with-link-nodes',
+                        disabled: hasSelection || !hasLinks
+                    }
+                ]
+
+
+
+            }
+        ]
+        // menuItems.push(
+        //     {
+        //         label: (isSingleLink || isMultipleLinks)?'Insert into wire...':'Add node...',
+        //         onselect: function() {
+        //             RED.view.showQuickAddDialog({
+        //                 position: [ options.x - offset.left, options.y - offset.top ],
+        //                 touchTrigger: true,
+        //                 splice: isSingleLink?selection.links[0]:undefined,
+        //                 spliceMultiple: isMultipleLinks
+        //             })
+        //         }
+        //     },
+        // )
+        // if (hasLinks && !hasSelection) {
+        //     menuItems.push({ onselect: 'core:split-wires-with-junctions', label: 'Insert junction'})
+        // }
+        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") })
+            }
+
+        }
+        menu = RED.menu.init({
+            direction: 'right',
+            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();
+
+        // menu.show({
+        //     target: $('#red-ui-main-container'),
+        //     x: options.x,
+        //     y: options.y
+        // })
+
+
+    }
+
+    return {
+        show: show,
+        hide: disposeMenu
+    }
+})()

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

@@ -63,16 +63,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",
-                  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")}}},
-                      {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-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,
-                      {id:"deploymenu-item-reload", icon:"red/images/deploy-reload.svg",label:RED._("deploy.restartFlows"),sublabel:RED._("deploy.restartFlowsDesc"),onselect:"core:restart-flows"},
-
-                  ]
-              });
+            const mainMenuItems = [
+                    {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.svg",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
+                    {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-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:"Start"/*RED._("deploy.startFlows")*/,sublabel:"Start Flows" /*RED._("deploy.startFlowsDesc")*/,onselect:"core:start-flows", visible:false})
+                mainMenuItems.push({id:"deploymenu-item-runtime-stop", icon:"red/images/stop.svg",label:"Stop"/*RED._("deploy.startFlows")*/,sublabel:"Stop Flows" /*RED._("deploy.startFlowsDesc")*/,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';
@@ -100,6 +102,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); });
@@ -270,18 +276,73 @@ RED.deploy = (function() {
     function sanitize(html) {
         return html.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
     }
-    function restart() {
-        var startTime = Date.now();
-        $(".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;
+
+    function shadeShow() {
         $("#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",
@@ -307,217 +368,244 @@ 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);
-                $(".red-ui-deploy-button-spinner").hide();
-                $("#red-ui-header-shade").hide();
-                $("#red-ui-editor-shade").hide();
-                $("#red-ui-palette-shade").hide();
-                $("#red-ui-sidebar-shade").hide();
+                deployButtonClearBusy();
+                deployInflight = false;
             },delta);
         });
     }
-    function save(skipValidation,force) {
-        if (!$("#red-ui-header-button-deploy").hasClass("disabled")) {
-            if (!RED.user.hasPermission("flows.write")) {
-                RED.notify(RED._("user.errors.deploy"),"error");
+    function save(skipValidation, force) {
+        if ($("#red-ui-header-button-deploy").hasClass("disabled")) {
+            return; //deploy is disabled
+        }
+        if ($("#red-ui-header-shade").is(":visible")) {
+            return; //deploy is shaded
+        }
+        if (!RED.user.hasPermission("flows.write")) {
+            RED.notify(RED._("user.errors.deploy"), "error");
+            return;
+        }
+        let hasUnusedConfig = false;
+        if (!skipValidation) {
+            let hasUnknown = false;
+            let hasInvalid = false;
+            const unknownNodes = [];
+            const invalidNodes = [];
+
+            RED.nodes.eachConfig(function (node) {
+                if (node.valid === undefined) {
+                    RED.editor.validateNode(node);
+                }
+                if (!node.valid && !node.d) {
+                    invalidNodes.push(getNodeInfo(node));
+                }
+                if (node.type === "unknown") {
+                    if (unknownNodes.indexOf(node.name) == -1) {
+                        unknownNodes.push(node.name);
+                    }
+                }
+            });
+            RED.nodes.eachNode(function (node) {
+                if (!node.valid && !node.d) {
+                    invalidNodes.push(getNodeInfo(node));
+                }
+                if (node.type === "unknown") {
+                    if (unknownNodes.indexOf(node.name) == -1) {
+                        unknownNodes.push(node.name);
+                    }
+                }
+            });
+            hasUnknown = unknownNodes.length > 0;
+            hasInvalid = invalidNodes.length > 0;
+
+            const unusedConfigNodes = [];
+            RED.nodes.eachConfig(function (node) {
+                if ((node._def.hasUsers !== false) && (node.users.length === 0)) {
+                    unusedConfigNodes.push(getNodeInfo(node));
+                    hasUnusedConfig = true;
+                }
+            });
+
+            let showWarning = false;
+            let notificationMessage;
+            let notificationButtons = [];
+            let notification;
+            if (hasUnknown && !ignoreDeployWarnings.unknown) {
+                showWarning = true;
+                notificationMessage = "<p>" + RED._('deploy.confirm.unknown') + "</p>" +
+                    '<ul class="red-ui-deploy-dialog-confirm-list"><li>' + cropList(unknownNodes).map(function (n) { return sanitize(n) }).join("</li><li>") + "</li></ul><p>" +
+                    RED._('deploy.confirm.confirm') +
+                    "</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"),
+                        class: "primary",
+                        click: function () {
+                            save(true);
+                            notification.close();
+                        }
+                    }
+                ];
+            } else if (hasInvalid && !ignoreDeployWarnings.invalid) {
+                showWarning = true;
+                invalidNodes.sort(sortNodeInfo);
+
+                notificationMessage = "<p>" + RED._('deploy.confirm.improperlyConfigured') + "</p>" +
+                    '<ul class="red-ui-deploy-dialog-confirm-list"><li>' + cropList(invalidNodes.map(function (A) { return sanitize((A.tab ? "[" + A.tab + "] " : "") + A.label + " (" + A.type + ")") })).join("</li><li>") + "</li></ul><p>" +
+                    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"),
+                        class: "primary",
+                        click: function () {
+                            save(true);
+                            notification.close();
+                        }
+                    }
+                ];
+            }
+            if (showWarning) {
+                notificationButtons.unshift(
+                    {
+                        text: RED._("common.label.cancel"),
+                        click: function () {
+                            notification.close();
+                        }
+                    }
+                );
+                notification = RED.notify(notificationMessage, {
+                    modal: true,
+                    fixed: true,
+                    buttons: notificationButtons
+                });
                 return;
             }
-            if (!skipValidation) {
-                var hasUnknown = false;
-                var hasInvalid = false;
-                var hasUnusedConfig = false;
-
-                var unknownNodes = [];
-                var invalidNodes = [];
-
-                RED.nodes.eachConfig(function(node) {
-                    if (node.valid === undefined) {
-                        RED.editor.validateNode(node);
-                    }
-                    if (!node.valid && !node.d) {
-                        invalidNodes.push(getNodeInfo(node));
-                    }
-                    if (node.type === "unknown") {
-                        if (unknownNodes.indexOf(node.name) == -1) {
-                            unknownNodes.push(node.name);
-                        }
-                    }                    
-                });
-                RED.nodes.eachNode(function(node) {
-                    if (!node.valid && !node.d) {
-                        invalidNodes.push(getNodeInfo(node));
-                    }
-                    if (node.type === "unknown") {
-                        if (unknownNodes.indexOf(node.name) == -1) {
-                            unknownNodes.push(node.name);
-                        }
-                    }
-                });
-                hasUnknown = unknownNodes.length > 0;
-                hasInvalid = invalidNodes.length > 0;
-
-                var unusedConfigNodes = [];
-                RED.nodes.eachConfig(function(node) {
-                    if ((node._def.hasUsers !== false) && (node.users.length === 0)) {
-                        unusedConfigNodes.push(getNodeInfo(node));
-                        hasUnusedConfig = true;
-                    }
-                });
-
-                var showWarning = false;
-                var notificationMessage;
-                var notificationButtons = [];
-                var notification;
-                if (hasUnknown && !ignoreDeployWarnings.unknown) {
-                    showWarning = true;
-                    notificationMessage = "<p>"+RED._('deploy.confirm.unknown')+"</p>"+
-                        '<ul class="red-ui-deploy-dialog-confirm-list"><li>'+cropList(unknownNodes).map(function(n) { return sanitize(n) }).join("</li><li>")+"</li></ul><p>"+
-                        RED._('deploy.confirm.confirm')+
-                        "</p>";
-
-                    notificationButtons= [
-                        {
-                            id: "red-ui-deploy-dialog-confirm-deploy-deploy",
-                            text: RED._("deploy.confirm.button.confirm"),
-                            class: "primary",
-                            click: function() {
-                                save(true);
-                                notification.close();
-                            }
-                        }
-                    ];
-                } else if (hasInvalid && !ignoreDeployWarnings.invalid) {
-                    showWarning = true;
-                    invalidNodes.sort(sortNodeInfo);
-
-                    notificationMessage = "<p>"+RED._('deploy.confirm.improperlyConfigured')+"</p>"+
-                        '<ul class="red-ui-deploy-dialog-confirm-list"><li>'+cropList(invalidNodes.map(function(A) { return sanitize( (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")")})).join("</li><li>")+"</li></ul><p>"+
-                        RED._('deploy.confirm.confirm')+
-                        "</p>";
-                    notificationButtons= [
-                        {
-                            id: "red-ui-deploy-dialog-confirm-deploy-deploy",
-                            text: RED._("deploy.confirm.button.confirm"),
-                            class: "primary",
-                            click: function() {
-                                save(true);
-                                notification.close();
-                            }
-                        }
-                    ];
-                }
-                if (showWarning) {
-                    notificationButtons.unshift(
-                        {
-                            text: RED._("common.label.cancel"),
-                            click: function() {
-                                notification.close();
-                            }
-                        }
-                    );
-                    notification = RED.notify(notificationMessage,{
-                        modal: true,
-                        fixed: true,
-                        buttons:notificationButtons
-                    });
-                    return;
-                }
-            }
-
-            var nns = RED.nodes.createCompleteNodeSet();
-
-            var startTime = Date.now();
-            $(".red-ui-deploy-button-content").css('opacity',0);
-            $(".red-ui-deploy-button-spinner").show();
-            $("#red-ui-header-button-deploy").addClass("disabled");
-
-            var data = {flows:nns};
-
-            if (!force) {
-                data.rev = RED.nodes.version();
-            }
-
-            deployInflight = true;
-            $("#red-ui-header-shade").show();
-            $("#red-ui-editor-shade").show();
-            $("#red-ui-palette-shade").show();
-            $("#red-ui-sidebar-shade").show();
-            $.ajax({
-                url:"flows",
-                type: "POST",
-                data: JSON.stringify(data),
-                contentType: "application/json; charset=utf-8",
-                headers: {
-                    "Node-RED-Deployment-Type":deploymentType
-                }
-            }).done(function(data,textStatus,xhr) {
-                RED.nodes.dirty(false);
-                RED.nodes.version(data.rev);
-                RED.nodes.originalFlow(nns);
-                if (hasUnusedConfig) {
-                    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);
-                } else {
-                    RED.notify('<p>'+RED._("deploy.successfulDeploy")+'</p>',"success");
-                }
-                RED.nodes.eachNode(function(node) {
-                    if (node.changed) {
-                        node.dirty = true;
-                        node.changed = false;
-                    }
-                    if (node.moved) {
-                        node.dirty = true;
-                        node.moved = false;
-                    }
-                    if(node.credentials) {
-                        delete node.credentials;
-                    }
-                });
-                RED.nodes.eachConfig(function (confNode) {
-                    confNode.changed = false;
-                    if (confNode.credentials) {
-                        delete confNode.credentials;
-                    }
-                });
-                RED.nodes.eachSubflow(function(subflow) {
-                    subflow.changed = false;
-                });
-                RED.nodes.eachWorkspace(function(ws) {
-                    ws.changed = false;
-                });
-                // Once deployed, cannot undo back to a clean state
-                RED.history.markAllDirty();
-                RED.view.redraw();
-                RED.events.emit("deploy");
-            }).fail(function(xhr,textStatus,err) {
-                RED.nodes.dirty(true);
-                $("#red-ui-header-button-deploy").removeClass("disabled");
-                if (xhr.status === 401) {
-                    RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error");
-                } else if (xhr.status === 409) {
-                    resolveConflict(nns, true);
-                } else if (xhr.responseText) {
-                    RED.notify(RED._("deploy.deployFailed",{message:xhr.responseText}),"error");
-                } else {
-                    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);
-                    $(".red-ui-deploy-button-spinner").hide();
-                    $("#red-ui-header-shade").hide();
-                    $("#red-ui-editor-shade").hide();
-                    $("#red-ui-palette-shade").hide();
-                    $("#red-ui-sidebar-shade").hide();
-                },delta);
-            });
         }
+
+        const nns = RED.nodes.createCompleteNodeSet();
+        const startTime = Date.now();
+
+        deployButtonSetBusy();
+        const data = { flows: nns };
+        if (!force) {
+            data.rev = RED.nodes.version();
+        }
+
+        deployInflight = true;
+        shadeShow();
+        $.ajax({
+            url: "flows",
+            type: "POST",
+            data: JSON.stringify(data),
+            contentType: "application/json; charset=utf-8",
+            headers: {
+                "Node-RED-Deployment-Type": deploymentType
+            }
+        }).done(function (data, textStatus, xhr) {
+            RED.nodes.dirty(false);
+            RED.nodes.version(data.rev);
+            RED.nodes.originalFlow(nns);
+            if (hasUnusedConfig) {
+                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") + '</p>', opts);
+            } else {
+                RED.notify('<p>' + RED._("deploy.successfulDeploy") + '</p>', "success");
+            }
+            RED.nodes.eachNode(function (node) {
+                if (node.changed) {
+                    node.dirty = true;
+                    node.changed = false;
+                }
+                if (node.moved) {
+                    node.dirty = true;
+                    node.moved = false;
+                }
+                if (node.credentials) {
+                    delete node.credentials;
+                }
+            });
+            RED.nodes.eachConfig(function (confNode) {
+                confNode.changed = false;
+                if (confNode.credentials) {
+                    delete confNode.credentials;
+                }
+            });
+            RED.nodes.eachSubflow(function (subflow) {
+                subflow.changed = false;
+            });
+            RED.nodes.eachWorkspace(function (ws) {
+                ws.changed = false;
+            });
+            // Once deployed, cannot undo back to a clean state
+            RED.history.markAllDirty();
+            RED.view.redraw();
+            RED.events.emit("deploy");
+        }).fail(function (xhr, textStatus, err) {
+            RED.nodes.dirty(true);
+            $("#red-ui-header-button-deploy").removeClass("disabled");
+            if (xhr.status === 401) {
+                RED.notify(RED._("deploy.deployFailed", { message: RED._("user.notAuthorized") }), "error");
+            } else if (xhr.status === 409) {
+                resolveConflict(nns, true);
+            } else if (xhr.responseText) {
+                RED.notify(RED._("deploy.deployFailed", { message: xhr.responseText }), "error");
+            } else {
+                RED.notify(RED._("deploy.deployFailed", { message: RED._("deploy.errors.noResponse") }), "error");
+            }
+        }).always(function () {
+            const delta = Math.max(0, 300 - (Date.now() - startTime));
+            setTimeout(function () {
+                deployInflight = false;
+                deployButtonClearBusy()
+                shadeHide()
+            }, delta);
+        });
     }
     return {
         init: init,

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);
-        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);
-                }
-            });
-        }
+        $("#"+prefix+"-"+property).on("change keyup paste", 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,8 +1078,17 @@ RED.editor = (function() {
                 if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
                     RED.view.state(RED.state.DEFAULT);
                 }
-                if (editing_node && !skipInfoRefreshOnClose) {
-                    RED.sidebar.info.refresh(editing_node);
+                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();
 
@@ -1867,6 +1948,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 +2006,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;
@@ -48,12 +48,12 @@
     }
 
     function create(options) {
-        //TODO: (quandry - for consideration) 
+        //TODO: (quandry - for consideration)
         // Below, I had to create a hidden element if options.id || options.element is not in the DOM
-        // I have seen 1 node calling  `this.editor = RED.editor.createEditor()` with an 
+        // I have seen 1 node calling  `this.editor = RED.editor.createEditor()` with an
         // invalid (non existing html element selector) (e.g. node-red-contrib-components does this)
-        // This causes monaco to throw an error when attempting to hook up its events to the dom  & the rest of the 'oneditperapre' 
-        // code is thus skipped. 
+        // This causes monaco to throw an error when attempting to hook up its events to the dom  & the rest of the 'oneditperapre'
+        // code is thus skipped.
         // In ACE mode, creating an ACE editor (with an invalid ID) allows the editor to be created (but obviously there is no UI)
         // Because one (or more) contrib nodes have left this bad code in place, how would we handle this?
         // For compatibility, I have decided to create a hidden element so that at least an editor is created & errors do not occur.
@@ -79,7 +79,7 @@
             return this.editor.create(options);//fallback to ACE
         }
     }
- 
+
     return {
         init: init,
         /**
@@ -91,7 +91,7 @@
         },
         /**
          * Get user selected code editor
-         * @return {string} Returns 
+         * @return {string} Returns
          * @memberof RED.editor.codeEditor
          */
         get editor() {
@@ -104,4 +104,4 @@
          */
         create: create
     }
-})();
+})();

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) {
-            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.focusMemory = options.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,17 +1307,33 @@ RED.editor.codeEditor.monaco = (function() {
         }
 
         function onVisibilityChange(visible, delay, element) {
-            if(visible) {
-                if(ed._mode == "javascript" && ed._tempMode == "text") {
+            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
+                    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
+            } else if (ed._mode == "javascript" && ed._tempMode != "text") {
+                if (element.parentElement) { //ensure el is still in DOM
                     ed.setMode('text', undefined, false);
                     ed._tempMode = "text";
                 }
@@ -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)
-                    valueField.typedInput({default:'str',types:isTemplateNode?DEFAULT_ENV_TYPE_LIST:DEFAULT_ENV_TYPE_LIST_INC_CRED});
+                    }).attr("autocomplete","disable").appendTo(envRow);
+                    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;">'+
-                '<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">'+
+                    '<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:"object",label:RED._("common.type.object"),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.svg"}
                 ],
                 default: valType
             });
@@ -395,17 +404,19 @@
             valueLabel.hide();
         })
         item.gutter = $('<span class="red-ui-editor-type-json-editor-item-gutter"></span>');
-
-        if (parent) {//red-ui-editor-type-json-editor-item-handle
-            $('<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);
+        if(!readOnly) {
+            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);
+            }
+            $('<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, readOnly);
+            });
         }
-        $('<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);
-        });
+
         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: "",
-                        mode:"ace/mode/json"
+                        value: value||"",
+                        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() {}
             }
@@ -168,7 +173,7 @@
                 'b': { before:"**", after: "**", tooltip: RED._("markdownEditor.bold")},
                 'i': { before:"_", after: "_", tooltip: RED._("markdownEditor.italic")},
                 'code': { before:"`", after: "`", tooltip: RED._("markdownEditor.code")},
-                'ol': { before:" * ", newline: true, tooltip: RED._("markdownEditor.ordered-list")},
+                'ol': { before:" 1. ", newline: true, tooltip: RED._("markdownEditor.ordered-list")},
                 'ul': { before:" - ", newline: true, tooltip: RED._("markdownEditor.unordered-list")},
                 'bq': { before:"> ", newline: true, tooltip: RED._("markdownEditor.quote")},
                 'link': { before:"[", after: "]()", tooltip: RED._("markdownEditor.link")},

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) &&
-                            (icon !== "")) {
+                        if ((node.icon && icon !== node.icon) || (!node.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/panes/properties.js

@@ -107,7 +107,7 @@
                                         newValue = "";
                                     }
                                 }
-                                if (node[d] != newValue) {
+                                if (!isEqual(node[d], newValue)) {
                                     if (node._def.defaults[d].type) {
                                         // Change to a related config node
                                         var configNode = RED.nodes.node(node[d]);
@@ -139,6 +139,23 @@
         }
     });
 
+    /**
+     * Compares `newValue` with `originalValue` for equality.  
+     * @param {*} originalValue Original value
+     * @param {*} newValue New value
+     * @returns {boolean} true if originalValue equals newValue, otherwise false
+     */
+     function isEqual(originalValue, newValue) {
+        try {
+            if(originalValue == newValue) {
+                return true; 
+            }
+            return JSON.stringify(originalValue) === JSON.stringify(newValue);
+        } catch (err) {
+            return false;
+        }
+    }
+
     /**
      * Update the node credentials from the edit form
      * @param node - the node containing the credentials

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: "",
-                        mode:"ace/mode/"+(options.mode||"text")
+                        value: value||"",
+                        stateId: options.stateId,
+                        mode:"ace/mode/"+(options.mode||"text"),
+                        focus: true,
                     });
-                    expressionEditor.getSession().setValue(value||"",-1);
-                    if (options.cursor) {
+                    if (options.cursor && !expressionEditor._initState) {
                         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

@@ -323,9 +323,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);

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

@@ -363,106 +363,112 @@ RED.library = (function() {
                     options.onconfirm(item);
                 }
             });
-        var 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",
-                    options: [
-                        {id:"red-ui-library-browser-menu-addFolder",label:RED._("library.newFolder"), onselect: function() {
-                            var defaultFolderName = "new-folder";
-                            var defaultFolderNameMatches = {};
-
-                            var selected = dirList.treeList('selected');
-                            if (!selected.children) {
-                                selected = selected.parent;
-                            }
-                            var complete = function() {
-                                selected.children.forEach(function(c) {
-                                    if (/^new-folder/.test(c.label)) {
-                                        defaultFolderNameMatches[c.label] = true
-                                    }
-                                });
-                                var folderIndex = 2;
-                                while(defaultFolderNameMatches[defaultFolderName]) {
-                                    defaultFolderName = "new-folder-"+(folderIndex++)
-                                }
-
-                                selected.treeList.expand();
-                                var input = $('<input type="text" class="red-ui-treeList-input">').val(defaultFolderName);
-                                var newItem = {
-                                    icon: "fa fa-folder-o",
-                                    children:[],
-                                    path: selected.path,
-                                    element: input
-                                }
-                                var confirmAdd = function() {
-                                    var val = input.val().trim();
-                                    if (val === "") {
-                                        cancelAdd();
-                                        return;
-                                    } else {
-                                        for (var i=0;i<selected.children.length;i++) {
-                                            if (selected.children[i].label === val) {
-                                                cancelAdd();
-                                                return;
-                                            }
-                                        }
-                                    }
-                                    newItem.treeList.remove();
-                                    var finalItem = {
-                                        library: selected.library,
-                                        type: selected.type,
-                                        icon: "fa fa-folder",
-                                        children:[],
-                                        label: val,
-                                        path: newItem.path+val+"/"
-                                    }
-                                    selected.treeList.addChild(finalItem,true);
-                                }
-                                var cancelAdd = function() {
-                                    newItem.treeList.remove();
-                                }
-                                input.on('keydown', function(evt) {
-                                    evt.stopPropagation();
-                                    if (evt.keyCode === 13) {
-                                        confirmAdd();
-                                    } else if (evt.keyCode === 27) {
-                                        cancelAdd();
-                                    }
-                                })
-                                input.on("blur", function() {
-                                    confirmAdd();
-                                })
-                                selected.treeList.addChild(newItem);
-                                setTimeout(function() {
-                                    input.trigger("focus");
-                                    input.select();
-                                },400);
-                            }
-                            selected.treeList.expand(complete);
-
-                        } },
-                        // null,
-                        // {id:"red-ui-library-browser-menu-rename",label:"Rename", onselect: function() {} },
-                        // {id:"red-ui-library-browser-menu-delete",label:"Delete", onselect: function() {} }
-                    ]
-                }).on('mouseleave', function(){ $(this).remove(); dirList.focus() })
-                  .on('mouseup', function() { var self = $(this);self.hide(); dirList.focus(); setTimeout(function() { self.remove() },100)})
-                  .appendTo("body");
-                menuOptionMenu.css({
-                    position: "absolute",
-                    top: elementPos.top+"px",
-                    left: (elementPos.left - menuOptionMenu.width() + 20)+"px"
-                }).show();
-
-            }).appendTo(itemTools);
+        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",
+                                      options: [
+                                          {id:"red-ui-library-browser-menu-addFolder",label:RED._("library.newFolder"), onselect: function() {
+                                              var defaultFolderName = "new-folder";
+                                              var defaultFolderNameMatches = {};
+
+                                              var selected = dirList.treeList('selected');
+                                              if (!selected.children) {
+                                                  selected = selected.parent;
+                                              }
+                                              var complete = function() {
+                                                  selected.children.forEach(function(c) {
+                                                      if (/^new-folder/.test(c.label)) {
+                                                          defaultFolderNameMatches[c.label] = true
+                                                      }
+                                                  });
+                                                  var folderIndex = 2;
+                                                  while(defaultFolderNameMatches[defaultFolderName]) {
+                                                      defaultFolderName = "new-folder-"+(folderIndex++)
+                                                  }
+
+                                                  selected.treeList.expand();
+                                                  var input = $('<input type="text" class="red-ui-treeList-input">').val(defaultFolderName);
+                                                  var newItem = {
+                                                      icon: "fa fa-folder-o",
+                                                      children:[],
+                                                      path: selected.path,
+                                                      element: input
+                                                  }
+                                                  var confirmAdd = function() {
+                                                      var val = input.val().trim();
+                                                      if (val === "") {
+                                                          cancelAdd();
+                                                          return;
+                                                      } else {
+                                                          for (var i=0;i<selected.children.length;i++) {
+                                                              if (selected.children[i].label === val) {
+                                                                  cancelAdd();
+                                                                  return;
+                                                              }
+                                                          }
+                                                      }
+                                                      newItem.treeList.remove();
+                                                      var finalItem = {
+                                                          library: selected.library,
+                                                          type: selected.type,
+                                                          icon: "fa fa-folder",
+                                                          children:[],
+                                                          label: val,
+                                                          path: newItem.path+val+"/"
+                                                      }
+                                                      selected.treeList.addChild(finalItem,true);
+                                                  }
+                                                  var cancelAdd = function() {
+                                                      newItem.treeList.remove();
+                                                  }
+                                                  input.on('keydown', function(evt) {
+                                                      evt.stopPropagation();
+                                                      if (evt.keyCode === 13) {
+                                                          confirmAdd();
+                                                      } else if (evt.keyCode === 27) {
+                                                          cancelAdd();
+                                                      }
+                                                  })
+                                                  input.on("blur", function() {
+                                                      confirmAdd();
+                                                  })
+                                                  selected.treeList.addChild(newItem);
+                                                  setTimeout(function() {
+                                                      input.trigger("focus");
+                                                      input.select();
+                                                  },400);
+                                              }
+                                              selected.treeList.expand(complete);
+
+                                          } },
+                                          // null,
+                                          // {id:"red-ui-library-browser-menu-rename",label:"Rename", onselect: function() {} },
+                                          // {id:"red-ui-library-browser-menu-delete",label:"Delete", onselect: function() {} }
+                                      ]
+                                                }).on('mouseleave', function(){ $(this).remove(); dirList.focus() })
+                                .on('mouseup', function() { var self = $(this);self.hide(); dirList.focus(); setTimeout(function() { self.remove() },100)})
+                                .appendTo("body");
+                            menuOptionMenu.css({
+                                position: "absolute",
+                                top: elementPos.top+"px",
+                                left: (elementPos.left - menuOptionMenu.width() + 20)+"px"
+                            }).show();
+
+                        }).appendTo(itemTools);
+                    
                     itemTools.appendTo(item.treeList.label);
                 }
             });

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

@@ -208,7 +208,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) {

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

@@ -108,7 +108,6 @@ RED.search = (function() {
 
     function search(val) {
         var results = [];
-        var keys = [];
         var typeFilter;
         var m = /(?:^| )type:([^ ]+)/.exec(val);
         if (m) {
@@ -122,19 +121,24 @@ RED.search = (function() {
         val = extractFlag(val,"subflow",flags);
         val = extractFlag(val,"hidden",flags);
         val = extractFlag(val,"modified",flags);
-        // uses:<node-id>
-        val = extractValue(val,"uses",flags);
-
-        var hasFlags = Object.keys(flags).length > 0;
-
+        val = extractValue(val,"flow",flags);// flow:active or flow:<flow-id>
+        val = extractValue(val,"uses",flags);// uses:<node-id>
         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 {
@@ -144,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';
@@ -188,6 +192,11 @@ RED.search = (function() {
                                 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,
@@ -255,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) {
@@ -592,8 +601,8 @@ RED.search = (function() {
             {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() {

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],

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

@@ -349,7 +349,7 @@ RED.sidebar.config = (function() {
                 refreshConfigNodeList();
             }
         });
-        RED.popover.tooltip($('#red-ui-sidebar-config-filter-all'), RED._("sidebar.config.showAllUnusedConfigNodes"));
+        RED.popover.tooltip($('#red-ui-sidebar-config-filter-all'), RED._("sidebar.config.showAllConfigNodes"));
         RED.popover.tooltip($('#red-ui-sidebar-config-filter-unused'), RED._("sidebar.config.showAllUnusedConfigNodes"));
 
     }

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 = [
             {
-                id: 'changelog',
-                label: "Node-RED v"+RED.settings.version,
-                content: getChangelog
+                label: "Node-RED",
+                children: [
+                    {
+                        id: 'changelog',
+                        label: RED._("sidebar.help.changeLog"),
+                        content: getChangelog
+                    },
+                    {
+                        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({

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.0-beta.4",
+                path: "./tours/welcome.js"
+            },
+            {
+                id: "2_2",
+                label: "2.2.0",
+                path: "./tours/2.2/welcome.js"
+            },
+            {
+                id: "2_1",
+                label: "2.1.0",
+                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);
-                    body.find(":focusable:first").trigger("focus");
+                    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');
-                        typesUsed[n.type] = Date.now();
+                        if (!/^_action_:/.test(n.type)) {
+                            typesUsed[n.type] = Date.now();
+                        }
                         if (n.def.outputs === 0) {
                             confirm(n);
                         } else {
@@ -173,6 +175,8 @@ RED.typeSearch = (function() {
                 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);
                     nodeDiv.css('backgroundColor',colour);
@@ -182,11 +186,14 @@ RED.typeSearch = (function() {
                 var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
                 RED.utils.createIconElement(icon_url, iconContainer, false);
 
-                if (object.type !== "junction" && def.inputs > 0) {
-                    $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);
-                }
-                if (object.type !== "junction" && def.outputs > 0) {
-                    $('<div/>',{class:"red-ui-search-result-node-port red-ui-search-result-node-output"}).appendTo(nodeDiv);
+
+                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);
@@ -207,7 +214,9 @@ RED.typeSearch = (function() {
     }
     function confirm(def) {
         hide();
-        typesUsed[def.type] = Date.now();
+        if (!/^_action_:/.test(def.type)) {
+            typesUsed[def.type] = Date.now();
+        }
         addCallback(def.type);
     }
 
@@ -316,6 +325,7 @@ RED.typeSearch = (function() {
     function applyFilter(filter,type,def) {
         return !filter ||
             (
+                (!filter.spliceMultiple) &&
                 (!filter.type || type === filter.type) &&
                 (!filter.input || type === 'junction' || def.inputs > 0) &&
                 (!filter.output || type === 'junction' || def.outputs > 0)
@@ -330,6 +340,13 @@ RED.typeSearch = (function() {
             '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];
@@ -354,6 +371,8 @@ RED.typeSearch = (function() {
             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 = {

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

@@ -1032,6 +1032,8 @@ RED.utils = (function() {
             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"

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

@@ -336,17 +336,17 @@ RED.view.tools = (function() {
 
     }
 
-    function addNode() {
-        var selection = RED.view.selection();
-        if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].outputs > 0) {
-            var selectedNode = selection.nodes[0];
-            RED.view.showQuickAddDialog([
-                selectedNode.x + selectedNode.w + 50,selectedNode.y
-            ])
-        } else {
-            RED.view.showQuickAddDialog();
-        }
-    }
+    // function addNode() {
+    //     var selection = RED.view.selection();
+    //     if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].outputs > 0) {
+    //         var selectedNode = selection.nodes[0];
+    //         RED.view.showQuickAddDialog([
+    //             selectedNode.x + selectedNode.w + 50,selectedNode.y
+    //         ])
+    //     } else {
+    //         RED.view.showQuickAddDialog();
+    //     }
+    // }
 
 
     function gotoNearestNode(direction) {
@@ -815,6 +815,9 @@ RED.view.tools = (function() {
      */
     function splitWiresWithLinkNodes(wires) {
         let wiresToSplit = wires || RED.view.selection().links;
+        if (!wiresToSplit) {
+            return
+        }
         if (!Array.isArray(wiresToSplit)) {
             wiresToSplit = [wiresToSplit];
         }
@@ -976,19 +979,33 @@ RED.view.tools = (function() {
      *  - 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) {
-        const nodes = node?[node]:RED.view.selection().nodes;
+    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 = !node || !!RED.nodes.node(node.id)
+            const generateHistory = options.generateHistory && (!node || !!RED.nodes.node(node.id))
             const historyEvents = []
             const typeIndex = {}
             let changed = false;
             nodes.forEach(n => {
-                if (n._def && n._def.defaults && n._def.defaults.name) {
-                    const paletteLabel = RED.utils.getPaletteLabel(n.type, n._def)
+                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})
@@ -1004,7 +1021,7 @@ RED.view.tools = (function() {
                         })
                         typeIndex[n.type] = maxNameNumber + 1
                     }
-                    if (n.name === '') {
+                    if ((options.renameBlank && n.name === '') || (options.renameClash && defaultNodeNameRE.test(n.name))) {
                         if (generateHistory) {
                             historyEvents.push({
                                 t:'edit',
@@ -1034,6 +1051,135 @@ RED.view.tools = (function() {
         }
     }
 
+    function addJunctionsToWires(wires) {
+        let wiresToSplit = wires || RED.view.selection().links;
+        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
+        })
+        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({
+                t: 'add',
+                links: addedLinks,
+                junctions: addedJunctions,
+                removedLinks: Array.from(removedLinks)
+            })
+            RED.nodes.dirty(true)
+        }
+        RED.view.redraw(true);
+    }
+
     return {
         init: function() {
             RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); })
@@ -1096,6 +1242,7 @@ RED.view.tools = (function() {
             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 )
 

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

@@ -93,7 +93,6 @@ RED.view = (function() {
     var selectNodesOptions;
 
     let flashingNodeId;
-    let flashingNodeTimer;
 
     var clipboard = "";
 
@@ -173,7 +172,8 @@ RED.view = (function() {
             length: function() { return set.length},
             get: function(i) { return set[i] },
             forEach: function(func) { set.forEach(func) },
-            nodes: function() { return set.map(function(n) { return n.n })}
+            nodes: function() { return set.map(function(n) { return n.n })},
+            has: function(node) { return setIds.has(node.id) }
         }
         return api;
     })();
@@ -205,13 +205,16 @@ RED.view = (function() {
 
     function init() {
 
-// setTimeout(function() {
-//     function snap(p) { return RED.view.gridSize() * Math.round(p/RED.view.gridSize())}; for (var i = 0;i<10;i++) {
-//     RED.nodes.addJunction({_def:{defaults:{}}, type:'junction', z:"0ccdc1d81f2729cc",id:RED.nodes.id(),x:snap(Math.floor(Math.random()*600)),y:snap(Math.floor(Math.random()*600)), w:0,h:0})
-// } ; RED.view.redraw(true)
-// },2000)
         chart = $("#red-ui-workspace-chart");
-
+        chart.on('contextmenu', function(evt) {
+            evt.preventDefault()
+            evt.stopPropagation()
+            RED.contextMenu.show({
+                x:evt.clientX-5,
+                y:evt.clientY-5
+            })
+            return false
+        })
         outer = d3.select("#red-ui-workspace-chart")
             .append("svg:svg")
             .attr("width", space_width)
@@ -235,6 +238,7 @@ RED.view = (function() {
             .on("mousedown", canvasMouseDown)
             .on("mouseup", canvasMouseUp)
             .on("mouseenter", function() {
+                d3.select(document).on('mouseup.red-ui-workspace-tracker', null)
                 if (lasso) {
                     if (d3.event.buttons !== 1) {
                         lasso.remove();
@@ -250,6 +254,7 @@ RED.view = (function() {
                     }
                 }
             })
+            .on("mouseleave", canvasMouseLeave)
             .on("touchend", function() {
                 d3.event.preventDefault();
                 clearTimeout(touchStartTime);
@@ -390,6 +395,9 @@ RED.view = (function() {
         drag_lines = [];
 
         RED.events.on("workspace:change",function(event) {
+            // Just in case the mouse left the workspace whilst doing an action,
+            // put us back into default mode so the refresh works
+            mouse_mode = 0
             if (event.old !== 0) {
                 workspaceScrollPositions[event.old] = {
                     left:chart.scrollLeft(),
@@ -455,7 +463,7 @@ RED.view = (function() {
             }
         });
 
-        //add search to status-toolbar 
+        //add search to status-toolbar
         RED.statusBar.add({
             id: "view-search-tools",
             align: "left",
@@ -531,6 +539,23 @@ RED.view = (function() {
                 nn.x = mousePos[0];
                 nn.y = mousePos[1];
 
+                var minX = nn.w/2 -5;
+                if (nn.x < minX) {
+                    nn.x = minX;
+                }
+                var minY = nn.h/2 -5;
+                if (nn.y < minY) {
+                    nn.y = minY;
+                }
+                var maxX = space_width -nn.w/2 +5;
+                if (nn.x > maxX) {
+                    nn.x = maxX;
+                }
+                var maxY = space_height -nn.h +5;
+                if (nn.y > maxY) {
+                    nn.y = maxY;
+                }
+
                 if (snapGrid) {
                     var gridOffset = RED.view.tools.calculateGridSnapOffsets(nn);
                     nn.x -= gridOffset.x;
@@ -604,7 +629,7 @@ RED.view = (function() {
 
         RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection);
         RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();});
-        RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard,{generateIds: true});});
+        RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard,{generateIds: true, generateDefaultNames: true});});
 
         RED.actions.add("core:detach-selected-nodes", function() { detachSelectedNodes() })
 
@@ -960,8 +985,10 @@ RED.view = (function() {
     }
 
     function canvasMouseDown() {
-        if (RED.view.DEBUG) { console.warn("canvasMouseDown", mouse_mode); }
-        var point;
+        if (RED.view.DEBUG) {
+            console.warn("canvasMouseDown", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
+        RED.contextMenu.hide();
         if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
             return;
@@ -974,49 +1001,56 @@ RED.view = (function() {
             scroll_position = [chart.scrollLeft(),chart.scrollTop()];
             return;
         }
-        if (!mousedown_node && !mousedown_link && !mousedown_group) {
+        if (d3.event.button === 2) {
+            return
+        }
+        if (!mousedown_node && !mousedown_link && !mousedown_group && !d3.event.shiftKey) {
             selectedLinks.clear();
             updateSelection();
         }
-        if (mouse_mode === 0) {
-            if (lasso) {
-                lasso.remove();
-                lasso = null;
-            }
+        if (mouse_mode === 0 && lasso) {
+            lasso.remove();
+            lasso = null;
         }
-        if ((mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) && (d3.event.touches || d3.event.button === 0) && (d3.event.metaKey || d3.event.ctrlKey)) {
-            // Trigger quick add dialog
-            d3.event.stopPropagation();
-            clearSelection();
-            point = d3.mouse(this);
-            var clickedGroup = getGroupAt(point[0],point[1]);
-            if (drag_lines.length > 0) {
-                clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
+        if (d3.event.touches || d3.event.button === 0) {
+            if ((mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) && (d3.event.metaKey || d3.event.ctrlKey) && !(d3.event.altKey || d3.event.shiftKey)) {
+                // Trigger quick add dialog
+                d3.event.stopPropagation();
+                clearSelection();
+                const point = d3.mouse(this);
+                var clickedGroup = getGroupAt(point[0], point[1]);
+                if (drag_lines.length > 0) {
+                    clickedGroup = clickedGroup || RED.nodes.group(drag_lines[0].node.g)
+                }
+                showQuickAddDialog({ position: point, group: clickedGroup });
+            } else if (mouse_mode === 0 && !(d3.event.metaKey || d3.event.ctrlKey)) {
+                // CTRL not being held
+                if (!d3.event.altKey) {
+                    // ALT not held (shift is allowed) Trigger lasso
+                    if (!touchStartTime) {
+                        const point = d3.mouse(this);
+                        lasso = eventLayer.append("rect")
+                            .attr("ox", point[0])
+                            .attr("oy", point[1])
+                            .attr("rx", 1)
+                            .attr("ry", 1)
+                            .attr("x", point[0])
+                            .attr("y", point[1])
+                            .attr("width", 0)
+                            .attr("height", 0)
+                            .attr("class", "nr-ui-view-lasso");
+                        d3.event.preventDefault();
+                    }
+                } else if (d3.event.altKey) {
+                    //Alt [+shift] held - Begin slicing
+                    clearSelection();
+                    mouse_mode = (d3.event.shiftKey) ? RED.state.SLICING_JUNCTION : RED.state.SLICING;
+                    const point = d3.mouse(this);
+                    slicePath = eventLayer.append("path").attr("class", "nr-ui-view-slice").attr("d", `M${point[0]} ${point[1]}`)
+                    slicePathLast = point;
+                    RED.view.redraw();
+                }
             }
-            showQuickAddDialog({position:point, group:clickedGroup});
-        } else if (mouse_mode === 0 && (d3.event.touches || d3.event.button === 0) && !(d3.event.metaKey || d3.event.ctrlKey)) {
-            // Tigger lasso
-            if (!touchStartTime) {
-                point = d3.mouse(this);
-                lasso = eventLayer.append("rect")
-                .attr("ox",point[0])
-                .attr("oy",point[1])
-                .attr("rx",1)
-                .attr("ry",1)
-                .attr("x",point[0])
-                .attr("y",point[1])
-                .attr("width",0)
-                .attr("height",0)
-                .attr("class","nr-ui-view-lasso");
-                d3.event.preventDefault();
-            }
-        } else if (mouse_mode === 0 && d3.event.button === 2 && (d3.event.metaKey || d3.event.ctrlKey || d3.event.shiftKey)) {
-            clearSelection();
-            mouse_mode = (d3.event.metaKey || d3.event.ctrlKey)?RED.state.SLICING : RED.state.SLICING_JUNCTION;
-            point = d3.mouse(this);
-            slicePath = eventLayer.append("path").attr("class","nr-ui-view-slice").attr("d",`M${point[0]} ${point[1]}`)
-            slicePathLast = point;
-            RED.view.redraw();
         }
     }
 
@@ -1024,6 +1058,7 @@ RED.view = (function() {
         options = options || {};
         var point = options.position || lastClickPosition;
         var spliceLink = options.splice;
+        var spliceMultipleLinks = options.spliceMultiple
         var targetGroup = options.group;
         var touchTrigger = options.touchTrigger;
 
@@ -1036,6 +1071,10 @@ RED.view = (function() {
         var ox = point[0];
         var oy = point[1];
 
+        const offset = $("#red-ui-workspace-chart").offset()
+        var clientX = ox + offset.left - $("#red-ui-workspace-chart").scrollLeft()
+        var clientY = oy + offset.top - $("#red-ui-workspace-chart").scrollTop()
+
         if (RED.settings.get("editor").view['view-snap-grid']) {
             // eventLayer.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','red')
             point[0] = Math.round(point[0] / gridSize) * gridSize;
@@ -1087,8 +1126,12 @@ RED.view = (function() {
             }
             hideDragLines();
         }
-        if (spliceLink) {
-            filter = {input:true, output:true}
+        if (spliceLink || spliceMultipleLinks) {
+            filter = {
+                input:true,
+                output:true,
+                spliceMultiple: spliceMultipleLinks
+            }
         }
 
         var rebuildQuickAddLink = function() {
@@ -1113,8 +1156,8 @@ RED.view = (function() {
         var lastAddedWidth;
 
         RED.typeSearch.show({
-            x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]),
-            y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
+            x:clientX-mainPos.left-node_width/2 - (ox-point[0]),
+            y:clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
             disableFocus: touchTrigger,
             filter: filter,
             move: function(dx,dy) {
@@ -1142,7 +1185,7 @@ RED.view = (function() {
                 hideDragLines();
                 redraw();
             },
-            add: function(type,keepAdding) {
+            add: function(type, keepAdding) {
                 if (touchTrigger) {
                     keepAdding = false;
                     resetMouseVars();
@@ -1150,7 +1193,13 @@ RED.view = (function() {
 
                 var nn;
                 var historyEvent;
-                if (type === 'junction') {
+                if (/^_action_:/.test(type)) {
+                    const actionName = type.substring(9)
+                    quickAddActive = false;
+                    ghostNode.remove();
+                    RED.actions.invoke(actionName)
+                    return
+                } else if (type === 'junction') {
                     nn = {
                         _def: {defaults:{}},
                         type: 'junction',
@@ -1716,12 +1765,24 @@ RED.view = (function() {
             redraw();
         }
     }
-
+    function canvasMouseLeave() {
+        if (mouse_mode !== 0 && d3.event.buttons !== 0) {
+            d3.select(document).on('mouseup.red-ui-workspace-tracker', function() {
+                d3.select(document).on('mouseup.red-ui-workspace-tracker', null)
+                canvasMouseUp.call(this)
+            })
+        }
+    }
     function canvasMouseUp() {
         lastClickPosition = [d3.event.offsetX/scaleFactor,d3.event.offsetY/scaleFactor];
-        if (RED.view.DEBUG) { console.warn("canvasMouseUp", mouse_mode); }
+        if (RED.view.DEBUG) {
+            console.warn("canvasMouseUp", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
         var i;
         var historyEvent;
+        if (d3.event.button === 2) {
+            return
+        }
         if (mouse_mode === RED.state.PANNING) {
             resetMouseVars();
             return
@@ -1813,8 +1874,20 @@ RED.view = (function() {
                     }
                 }
             })
-
-
+            activeLinks.forEach(function(link) {
+                if (!link.selected) {
+                    var sourceY = link.source.y
+                    var targetY = link.target.y
+                    var sourceX = link.source.x+(link.source.w/2) + 10
+                    var targetX = link.target.x-(link.target.w/2) - 10
+                    if (
+                        sourceX > x && sourceX < x2 && sourceY > y && sourceY < y2 &&
+                        targetX > x && targetX < x2 && targetY > y && targetY < y2
+                    ) {
+                        selectedLinks.add(link);
+                    }
+                }
+            })
 
             // var selectionChanged = false;
             // do {
@@ -1862,86 +1935,118 @@ RED.view = (function() {
             slicePath = null;
             RED.view.redraw(true);
         } else if (mouse_mode == RED.state.SLICING_JUNCTION) {
-            var removedLinks = []
-            var addedLinks = []
-            var addedJunctions = []
-
-            var groupedLinks = {}
-            selectedLinks.forEach(function(l) {
-                var sourceId = l.source.id+":"+l.sourcePort
-                groupedLinks[sourceId] = groupedLinks[sourceId] || []
-                groupedLinks[sourceId].push(l)
-            });
-            var linkGroups = Object.keys(groupedLinks)
-            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.forEach(function(l) {
-                    junction.x += l._sliceLocation.x
-                    junction.y += l._sliceLocation.y
-                })
-                junction.x = Math.round(junction.x/links.length)
-                junction.y = Math.round(junction.y/links.length)
-                if (snapGrid) {
-                    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)
-                var newLink = {
-                    source: links[0].source,
-                    sourcePort: links[0].sourcePort,
-                    target: junction
-                }
-                addedLinks.push(newLink)
-                RED.nodes.addLink(newLink)
-                links.forEach(function(l) {
-                    removedLinks.push(l)
-                    RED.nodes.removeLink(l)
-                    var 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)
-                    }
-                }
-            })
+            RED.actions.invoke("core:split-wires-with-junctions")
             slicePath.remove();
             slicePath = null;
 
-            if (addedJunctions.length > 0) {
-                RED.history.push({
-                    t: 'add',
-                    links: addedLinks,
-                    junctions: addedJunctions,
-                    removedLinks: removedLinks
-                })
-                RED.nodes.dirty(true)
-            }
-            RED.view.redraw(true);
+            // var removedLinks = new Set()
+            // var addedLinks = []
+            // var addedJunctions = []
+            //
+            // var groupedLinks = {}
+            // selectedLinks.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
+            // })
+            // 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
+            //     }
+            //     links.forEach(function(l) {
+            //         junction.x += l._sliceLocation.x
+            //         junction.y += l._sliceLocation.y
+            //     })
+            //     junction.x = Math.round(junction.x/links.length)
+            //     junction.y = Math.round(junction.y/links.length)
+            //     if (snapGrid) {
+            //         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)
+            //         }
+            //     }
+            // })
+            // slicePath.remove();
+            // slicePath = null;
+            //
+            // if (addedJunctions.length > 0) {
+            //     RED.history.push({
+            //         t: 'add',
+            //         links: addedLinks,
+            //         junctions: addedJunctions,
+            //         removedLinks: Array.from(removedLinks)
+            //     })
+            //     RED.nodes.dirty(true)
+            // }
+            // RED.view.redraw(true);
         }
         if (mouse_mode == RED.state.MOVING_ACTIVE) {
             if (movingSet.length() > 0) {
@@ -2463,7 +2568,7 @@ RED.view = (function() {
                         var removedEntities = RED.nodes.remove(node.id);
                         removedNodes.push(node);
                         removedNodes = removedNodes.concat(removedEntities.nodes);
-                        addToRemovedLinks(removedNodes.removedLinks);
+                        addToRemovedLinks(removedEntities.links);
                         if (node.g) {
                             var group = RED.nodes.group(node.g);
                             if (selectedGroups.indexOf(group) === -1) {
@@ -2802,6 +2907,7 @@ RED.view = (function() {
 
     function portMouseDown(d,portType,portIndex, evt) {
         if (RED.view.DEBUG) { console.warn("portMouseDown", mouse_mode,d,portType,portIndex); }
+        RED.contextMenu.hide();
         evt = evt || d3.event;
         if (evt === 1) {
             return;
@@ -2918,7 +3024,7 @@ RED.view = (function() {
                     } else if (drag_line.portType === PORT_TYPE_INPUT) {
                         src = mouseup_node;
                         dst = drag_line.node;
-                        src_port = portIndex;
+                        src_port = portIndex || 0;
                     }
                     var link = {source: src, sourcePort:src_port, target: dst};
                     if (drag_line.virtualLink) {
@@ -3209,52 +3315,16 @@ RED.view = (function() {
         port.classed("red-ui-flow-port-hovered",false);
     }
 
-    function junctionMouseOver(junction, d) {
-        junction.classed("red-ui-flow-junction-hovered",true);
+    function junctionMouseOver(junction, d, portType) {
+        var active = (portType === undefined) ||
+                     (mouse_mode !== RED.state.JOINING && mouse_mode !== RED.state.QUICK_JOINING) ||
+                     (drag_lines.length > 0 && drag_lines[0].portType !== portType && !drag_lines[0].virtualLink)
+        junction.classed("red-ui-flow-junction-hovered", active);
     }
     function junctionMouseOut(junction, d) {
         junction.classed("red-ui-flow-junction-hovered",false);
     }
 
-    function junctionMouseDown(junction, d, evt) {
-        if (RED.view.DEBUG) { console.warn("junctionMouseDown", d); }
-        evt = evt || d3.event;
-        d3.event = evt
-        if (evt === 1) {
-            return;
-        }
-        if (mouse_mode === RED.state.SELECTING_NODE) {
-            evt.stopPropagation();
-            return;
-        }
-        if (mouse_mode == RED.state.QUICK_JOINING) {
-            d3.event.stopPropagation();
-            return;
-        }
-
-        // mousedown_node = d;
-        // mousedown_port_type = portType;
-        // mousedown_port_index = portIndex || 0;
-        if (mouse_mode !== RED.state.QUICK_JOINING && (evt.ctrlKey || evt.metaKey)) {
-            mouse_mode = RED.state.QUICK_JOINING;
-            document.body.style.cursor = "crosshair";
-            showDragLines([{node:d,port:0,portType: PORT_TYPE_OUTPUT}]);
-            $(window).on('keyup',disableQuickJoinEventHandler);
-        } else if (event.button != 2) {
-            nodeMouseDown.call(junction[0][0],d)
-            // clearSelection();
-            // movingSet.add(d);
-            // mousedown_node = d;
-            // mouse_mode = RED.state.MOVING;
-            // var mouse = d3.touches(junction[0][0])[0]||d3.mouse(junction[0][0]);
-            // mouse[0] += d.x-d.w/2;
-            // mouse[1] += d.y-d.h/2;
-            // prepareDrag(mouse);
-        }
-        evt.stopPropagation();
-        evt.preventDefault();
-    }
-
     function prepareDrag(mouse) {
         mouse_mode = RED.state.MOVING;
         // Called when movingSet should be prepared to be dragged
@@ -3346,6 +3416,7 @@ RED.view = (function() {
     function nodeMouseDown(d) {
         if (RED.view.DEBUG) { console.warn("nodeMouseDown", mouse_mode,d); }
         focusView();
+        RED.contextMenu.hide();
         if (d3.event.button === 1) {
             return;
         }
@@ -3414,6 +3485,9 @@ RED.view = (function() {
             return;
         } else if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
+            if (d.type === 'junction') {
+                return
+            }
             if (selectNodesOptions.single) {
                 selectNodesOptions.done(d);
                 return;
@@ -3440,12 +3514,12 @@ RED.view = (function() {
         var now = Date.now();
         clickElapsed = now-clickTime;
         clickTime = now;
-        dblClickPrimed = (lastClickNode == mousedown_node &&
+        dblClickPrimed = lastClickNode == mousedown_node &&
             (d3.event.touches || d3.event.button === 0) &&
             !d3.event.shiftKey && !d3.event.altKey &&
-            clickElapsed < dblClickInterval
-            )
-            lastClickNode = mousedown_node;
+            clickElapsed < dblClickInterval &&
+            d.type !== 'junction'
+        lastClickNode = mousedown_node;
 
         if (!d.selected && d.g /*&& !RED.nodes.group(d.g).selected*/) {
             var nodeGroup = RED.nodes.group(d.g);
@@ -3480,7 +3554,6 @@ RED.view = (function() {
                         enterActiveGroup(ag);
                         activeGroup.selected = true;
                     }
-                    console.log(d3.event);
                     var cnodes = RED.nodes.getAllFlowNodes(mousedown_node);
                     for (var n=0;n<cnodes.length;n++) {
                         if (!cnodes[n].selected) {
@@ -3572,9 +3645,9 @@ RED.view = (function() {
                     clearSelection();
                 }
                 var clickPosition = (d3.event.offsetX/scaleFactor - mousedown_node.x)
-                var edgeDelta = (mousedown_node.w/2) - Math.abs(clickPosition);
+                var edgeDelta = ((mousedown_node.w||10)/2) - Math.abs(clickPosition);
                 var cnodes;
-                var targetEdgeDelta = mousedown_node.w > 30 ? 25 : 8;
+                var targetEdgeDelta = mousedown_node.w > 30 ? 25 : (mousedown_node.w > 0 ? 8 : 3);
                 if (edgeDelta < targetEdgeDelta) {
                     if (clickPosition < 0) {
                         cnodes = [mousedown_node].concat(RED.nodes.getAllUpstreamNodes(mousedown_node));
@@ -3719,12 +3792,14 @@ RED.view = (function() {
     function portMouseOverProxy(e) { portMouseOver(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); }
     function portMouseOutProxy(e) { portMouseOut(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); }
 
-    function junctionMouseOverProxy(e) { junctionMouseOver(d3.select(this), this.__data__) }
+    function junctionMouseOverProxy(e) { junctionMouseOver(d3.select(this), this.__data__, this.__portType__) }
     function junctionMouseOutProxy(e) { junctionMouseOut(d3.select(this), this.__data__) }
-    function junctionMouseDownProxy(e) { junctionMouseDown(d3.select(this), this.__data__, e) }
-    function junctionMouseUpProxy(e) { junctionMouseUp(d3.select(this), this.__data__) }
 
     function linkMouseDown(d) {
+        if (RED.view.DEBUG) {
+            console.warn("linkMouseDown", { mouse_mode, point: d3.mouse(this), event: d3.event });
+        }
+        RED.contextMenu.hide();
         if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
             return;
@@ -3784,6 +3859,9 @@ RED.view = (function() {
     }
 
     function groupMouseUp(g) {
+        if (RED.view.DEBUG) {
+            console.warn("groupMouseUp", { mouse_mode, event: d3.event });
+        }
         if (dblClickPrimed && mousedown_group == g && clickElapsed > 0 && clickElapsed < dblClickInterval) {
             mouse_mode = RED.state.DEFAULT;
             RED.editor.editGroup(g);
@@ -3799,6 +3877,10 @@ RED.view = (function() {
         //     return
         // }
 
+        if (RED.view.DEBUG) {
+            console.warn("groupMouseDown", { mouse_mode, point: mouse, event: d3.event });
+        }
+        RED.contextMenu.hide();
         focusView();
         if (d3.event.button === 1) {
             return;
@@ -4795,6 +4877,9 @@ RED.view = (function() {
                         if (d._def.button) {
                             var buttonEnabled = isButtonEnabled(d);
                             this.__buttonGroup__.classList.toggle("red-ui-flow-node-button-disabled", !buttonEnabled);
+                            if (RED.runtime && Object.hasOwn(RED.runtime,'started')) {
+                                this.__buttonGroup__.classList.toggle("red-ui-flow-node-button-stopped", !RED.runtime.started);
+                            }
 
                             var x = d._def.align == "right"?d.w-6:-25;
                             if (d._def.button.toggle && !d[d._def.button.toggle]) {
@@ -4873,22 +4958,56 @@ RED.view = (function() {
                 junctionBack.setAttribute("y",-5);
                 junctionBack.setAttribute("width",10);
                 junctionBack.setAttribute("height",10);
-                junctionBack.setAttribute("rx",5);
-                junctionBack.setAttribute("ry",5);
+                junctionBack.setAttribute("rx",3);
+                junctionBack.setAttribute("ry",3);
                 junctionBack.__data__ = d;
                 this.__junctionBack__ = junctionBack;
                 contents.appendChild(junctionBack);
 
+                var junctionInput = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                junctionInput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-input");
+                junctionInput.setAttribute("x",-5);
+                junctionInput.setAttribute("y",-5);
+                junctionInput.setAttribute("width",10);
+                junctionInput.setAttribute("height",10);
+                junctionInput.setAttribute("rx",3);
+                junctionInput.setAttribute("ry",3);
+                junctionInput.__data__ = d;
+                junctionInput.__portType__ = PORT_TYPE_INPUT;
+                junctionInput.__portIndex__ = 0;
+                this.__junctionInput__ = junctionOutput;
+                contents.appendChild(junctionInput);
+                junctionInput.addEventListener("mouseup", portMouseUpProxy);
+                junctionInput.addEventListener("mousedown", portMouseDownProxy);
+
+
+                this.__junctionInput__ = junctionInput;
+                contents.appendChild(junctionInput);
+                var junctionOutput = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                junctionOutput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-output");
+                junctionOutput.setAttribute("x",-5);
+                junctionOutput.setAttribute("y",-5);
+                junctionOutput.setAttribute("width",10);
+                junctionOutput.setAttribute("height",10);
+                junctionOutput.setAttribute("rx",3);
+                junctionOutput.setAttribute("ry",3);
+                junctionOutput.__data__ = d;
+                junctionOutput.__portType__ = PORT_TYPE_OUTPUT;
+                junctionOutput.__portIndex__ = 0;
+                this.__junctionOutput__ = junctionOutput;
+                contents.appendChild(junctionOutput);
+                junctionOutput.addEventListener("mouseup", portMouseUpProxy);
+                junctionOutput.addEventListener("mousedown", portMouseDownProxy);
+
+                junctionOutput.addEventListener("mouseover", junctionMouseOverProxy);
+                junctionOutput.addEventListener("mouseout", junctionMouseOutProxy);
+                junctionInput.addEventListener("mouseover", junctionMouseOverProxy);
+                junctionInput.addEventListener("mouseout", junctionMouseOutProxy);
                 junctionBack.addEventListener("mouseover", junctionMouseOverProxy);
                 junctionBack.addEventListener("mouseout", junctionMouseOutProxy);
-                junctionBack.addEventListener("mouseup", portMouseUpProxy);
-                junctionBack.addEventListener("mousedown", junctionMouseDownProxy);
 
-                // d3.select(junctionBack).on("mousedown", nodeMouseDown);
-
-                this.__portType__ = PORT_TYPE_INPUT
-                this.__portIndex__ = 0
-// function portMouseUpProxy(e) { portMouseUp(this.__data__,this.__portType__,this.__portIndex__, e); }
+                // These handlers expect to be registered as d3 events
+                d3.select(junctionBack).on("mousedown", nodeMouseDown).on("mouseup", nodeMouseUp);
 
                 junction[0][0].appendChild(contents);
             })
@@ -4897,6 +5016,7 @@ RED.view = (function() {
                 var junction = d3.select(this);
                 this.setAttribute("transform", "translate(" + (d.x) + "," + (d.y) + ")");
                 if (d.dirty) {
+                    junction.classed("red-ui-flow-junction-dragging", mouse_mode === RED.state.MOVING_ACTIVE && movingSet.has(d))
                     junction.classed("selected", !!d.selected)
                     dirtyNodes[d.id] = d;
 
@@ -4937,10 +5057,11 @@ RED.view = (function() {
                     .on("touchstart",linkTouchStart)
                     .on("mousemove", function(d) {
                         if (mouse_mode === RED.state.SLICING) {
+
                             selectedLinks.add(d)
                             l.classed("red-ui-flow-link-splice",true)
                             redraw()
-                        } else if (mouse_mode === RED.state.SLICING_JUNCTION) {
+                        } else if (mouse_mode === RED.state.SLICING_JUNCTION && !d.link) {
                             if (!l.classed("red-ui-flow-link-splice")) {
                                 // Find intersection point
                                 var lineLength = pathLine.getTotalLength();
@@ -5403,12 +5524,16 @@ RED.view = (function() {
      *  - addFlow - whether to import nodes to a new tab
      *  - touchImport - whether this is a touch import. If not, imported nodes are
      *                  attachedto mouse for placing - "IMPORT_DRAGGING" state
+     *  - generateIds - whether to automatically generate new ids for all imported nodes
+     *  - generateDefaultNames - whether to automatically update any nodes with clashing
+     *                           default names
      */
     function importNodes(newNodesObj,options) {
         options = options || {
             addFlow: false,
             touchImport: false,
-            generateIds: false
+            generateIds: false,
+            generateDefaultNames: false
         }
         var addNewFlow = options.addFlow
         var touchImport = options.touchImport;
@@ -5436,7 +5561,13 @@ RED.view = (function() {
         if (!$.isArray(nodesToImport)) {
             nodesToImport = [nodesToImport];
         }
-
+        if (options.generateDefaultNames) {
+            RED.actions.invoke("core:generate-node-names", nodesToImport, {
+                renameBlank: false,
+                renameClash: true,
+                generateHistory: false
+            })
+        }
 
         try {
             var activeSubflowChanged;
@@ -5676,7 +5807,12 @@ RED.view = (function() {
                         node.dirty = true;
                         node.dirtyStatus = true;
                         node.changed = true;
-                        RED.events.emit("nodes:change",node);
+                        if (node.type === "junction") {
+                            RED.events.emit("junctions:change",node);
+                        }
+                        else {
+                            RED.events.emit("nodes:change",node);
+                        }
                     }
                 }
             }
@@ -5739,6 +5875,7 @@ RED.view = (function() {
      * @private
      */
      function createNode(type, x, y, z) {
+        const wasDirty = RED.nodes.dirty()
         var m = /^subflow:(.+)$/.exec(type);
         var activeSubflow = z ? RED.nodes.subflow(z) : null;
         if (activeSubflow && m) {
@@ -5797,7 +5934,7 @@ RED.view = (function() {
         var historyEvent = {
             t: "add",
             nodes: [nn.id],
-            dirty: RED.nodes.dirty()
+            dirty: wasDirty
         }
         if (activeSubflow) {
             var subflowRefresh = RED.subflow.refresh(true);
@@ -5844,27 +5981,26 @@ RED.view = (function() {
         if(typeof node === "string") { node = RED.nodes.node(n); }
         if(!node) { return; }
 
-        const flashingNode = flashingNodeTimer && flashingNodeId && RED.nodes.node(flashingNodeId);
+        const flashingNode = flashingNodeId && RED.nodes.node(flashingNodeId);
         if(flashingNode) {
             //cancel current flashing node before flashing new node
-            clearInterval(flashingNodeTimer);
-            flashingNodeTimer = null;
+            clearInterval(flashingNode.__flashTimer);
+            delete flashingNode.__flashTimer;
             flashingNode.dirty = true;
             flashingNode.highlighted = false;
         }
-
-        flashingNodeTimer = setInterval(function(flashEndTime) {
-            node.dirty = true;
+        node.__flashTimer = setInterval(function(flashEndTime, n) {
+            n.dirty = true;
             if (flashEndTime >= Date.now()) {
-                node.highlighted = !node.highlighted;
+                n.highlighted = !n.highlighted;
             } else {
-                clearInterval(flashingNodeTimer);
-                flashingNodeTimer = null;
-                node.highlighted = false;
+                clearInterval(n.__flashTimer);
+                delete n.__flashTimer;
                 flashingNodeId = null;
+                n.highlighted = false;
             }
             RED.view.redraw();
-        }, 100, Date.now() + 2200)
+        }, 100, Date.now() + 2200, node)
         flashingNodeId = node.id;
         node.highlighted = true;
         RED.view.redraw();
@@ -5973,7 +6109,7 @@ RED.view = (function() {
                         node.dirty = true;
                         RED.workspaces.show(node.z);
 
-                        var screenSize = [chart.width()/scaleFactor,chart.height()/scaleFactor];
+                        var screenSize = [chart[0].clientWidth/scaleFactor,chart[0].clientHeight/scaleFactor];
                         var scrollPos = [chart.scrollLeft()/scaleFactor,chart.scrollTop()/scaleFactor];
                         var cx = node.x;
                         var cy = node.y;

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

@@ -284,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"
                     })
                 }

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

@@ -118,20 +118,26 @@ RED.user = (function() {
                     });
 
                 } else if (data.type == "strategy") {
+                    var sessionMessage = /[?&]session_message=(.*?)(?:$|&)/.exec(window.location.search);
+                    RED.sessionMessages = RED.sessionMessages || [];
+                    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);
+                        } else {
+                            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];
-                        var sessionMessage = /[?&]session_message=(.*?)(?:$|&)/.exec(window.location.search);
-                        if (sessionMessage) {
-                            RED.sessionMessages = RED.sessionMessages || [];
-                            RED.sessionMessages.push(sessionMessage[1]);
-                            if (history.pushState) {
-                                var newurl = window.location.protocol+"//"+window.location.host+window.location.pathname
-                                window.history.replaceState({ path: newurl }, "", newurl);
-                            } else {
-                                window.location.search = "";
-                            }
-                        }
                         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));}},
-    regex: function(re){return function(v) { return re.test(v);}},
-    typedInput: function(ptypeName,isConfig) { return function(v) {
-        var ptype = $("#node-"+(isConfig?"config-":"")+"input-"+ptypeName).val() || this[ptypeName];
-        if (ptype === 'json') {
-            try {
-                JSON.parse(v);
+    number: function(blankAllowed,mopt){
+        return function(v, opt) {
+            if ((blankAllowed&&(v===''||v===undefined)) || (v!=='' && !isNaN(v))) {
                 return true;
-            } catch(err) {
-                return false;
             }
-        } else if (ptype === 'msg' || ptype === 'flow' || ptype === 'global' ) {
-            return RED.utils.validatePropertyExpression(v);
-        } else if (ptype === 'num') {
-            return /^[+-]?[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;
+        };
+    },
+    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) {
+                    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' ) {
+                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') {
+                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;
-            color: $text-editor-color-disabled;
+            background: var(--red-ui-text-editor-background-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;
-        color: $popover-color;
+        background: var(--red-ui-popover-background);
+        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;
-            color: $event-log-color;
+            background: var(--red-ui-event-log-background);
+            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-family: $primary-font;
+    font-size: var(--red-ui-primary-font-size);
+    font-family: var(--red-ui-primary-font);
     padding: 0;
     margin: 0;
-    background: $primary-background;
-    color: $primary-text-color;
+    background: var(--red-ui-primary-background);
+    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%;
-        background-size: contain
-    }
+        -webkit-mask-image: url(images/spin.svg);
+        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-size: $primary-font-size;
-        color: $text-color-code;
+        font-family: var(--red-ui-monospace-font);
+        font-size: var(--red-ui-primary-font-size);
+        color: var(--red-ui-text-color-code);
         white-space: nowrap;
     }
 
     code {
-        font-family: $monospace-font;
-        font-size: $primary-font-size;
+        font-family: var(--red-ui-monospace-font);
+        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;
-        border: 1px solid $tertiary-border-color;
+        background-color:var(--red-ui-tertiary-background);
+        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;
-        color: $secondary-text-color;
+        border-left: 4px solid var(--red-ui-secondary-border-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,8 @@ $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;
 $diff-state-deleted: #f80000;
 $diff-state-changed: #f89406;
@@ -193,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;
@@ -212,6 +216,7 @@ $node-icon-background-color-opacity: 0.05;
 $node-icon-border-color: #000;
 $node-icon-border-color-opacity: 0.1;
 
+$node-config-background: #f3f3f3;
 
 $node-link-port-background: #eee;
 
@@ -299,6 +304,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;
-    box-shadow: 0 2px 6px $shadow;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
+    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-left: 8px solid $debug-message-border;
-    border-right: 8px solid $debug-message-border;
+    border-bottom: 1px solid var(--red-ui-debug-message-border);
+    border-left: 8px solid var(--red-ui-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;
-    color: $secondary-text-color-inactive;
+    padding: 1px 0px;
+    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;
-    font-family: $monospace-font;
+    background: var(--red-ui-debug-message-background);
+    font-family: var(--red-ui-monospace-font);
     font-size: 13px !important;
 }
 .red-ui-debug-msg-level-log {
-    border-left-color: $debug-message-border;
-    border-right-color: $debug-message-border;
+    border-left-color: var(--red-ui-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-right-color: $debug-message-border-warning;
+    border-left-color: var(--red-ui-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-right-color: $debug-message-border-error;
+    border-left-color: var(--red-ui-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-string { color: $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-meta { color: $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-other { color: var(--red-ui-debug-message-text-color-msg-type-other); }
+.red-ui-debug-msg-type-string { color: var(--red-ui-debug-message-text-color-msg-type-string); }
+.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: var(--red-ui-debug-message-text-color-msg-type-meta); font-style: italic;}
+.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-color:$secondary-border-color;
-        border-left: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-color:var(--red-ui-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;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-primary-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     white-space: nowrap;
 }
 .red-ui-diff-list-flow {
-    background: $secondary-background;
-    border: 1px solid $secondary-border-color;
+    background: var(--red-ui-secondary-background);
+    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-left: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-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-deleted { color: $diff-state-deleted; }
-.red-ui-diff-state-changed { color: $diff-state-changed; }
-.red-ui-diff-state-unchanged { color: $diff-state-unchanged; }
-.red-ui-diff-state-conflicted { color: $diff-state-conflicted; }
+.red-ui-diff-state-added { color: var(--red-ui-diff-state-added); }
+.red-ui-diff-state-deleted { color: var(--red-ui-diff-state-deleted); }
+.red-ui-diff-state-changed { color: var(--red-ui-diff-state-changed); }
+.red-ui-diff-state-unchanged { color: var(--red-ui-diff-state-unchanged); }
+.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,
-        $secondary-background-disabled 5px,
-        $secondary-background-disabled 10px
+        var(--red-ui-secondary-background), var(--red-ui-secondary-background) 5px,
+        var(--red-ui-secondary-background-disabled) 5px,
+        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,86 +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;
-            background: $tertiary-background;
+            color: var(--red-ui-tertiary-text-color);
+            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: $secondary-text-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: var(--red-ui-diff-state-color);
         }
         td.removed {
-            background: $diff-state-deleted-background;
+            background: var(--red-ui-diff-state-deleted-background);
+            color: var(--red-ui-diff-state-color);
         }
         tr.mergeHeader td {
-            color: $diff-merge-header-color;
-            background: $diff-merge-header-background;
+            color: var(--red-ui-diff-merge-header-color);
+            background: var(--red-ui-diff-merge-header-background);
             height: 26px;
             vertical-align: middle;
         }
         tr.mergeHeader-separator td {
-            color: $diff-merge-header-color;
-            background: $diff-merge-header-border-color;
+            color: var(--red-ui-diff-merge-header-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;
-            color: $diff-state-unchanged;
+            background: var(--red-ui-diff-state-unchanged-background);
+            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;
@@ -629,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;
@@ -649,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: $secondary-text-color;
-            background: $diff-text-header-background;
+            color: var(--red-ui-diff-text-header-color);
+            background: var(--red-ui-diff-text-header-background);
             height: 30px;
             vertical-align: middle;
-            border-top: 1px solid $secondary-border-color;
-            border-bottom: 1px solid $secondary-border-color;
+            border-top: 1px solid var(--red-ui-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-size: $primary-font-size;
+    font-family: var(--red-ui-primary-font);
+    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;
-    border: 1px solid $secondary-border-color;
-    box-shadow: 0 5px 10px $shadow;
+    background: var(--red-ui-menuBackground);
+    border: 1px solid var(--red-ui-secondary-border-color);
+    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,42 @@
         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 > li > a,
+    &.red-ui-menu-dropdown-submenus > li > a:focus {
+        padding-right: 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;
-            border-color: $menuDisabledColor;
+            color: var(--red-ui-menuDisabledColor);
+            border-color: var(--red-ui-menuDisabledColor);
         }
     }
 
@@ -118,8 +133,8 @@
             padding: 0;
             font-size: 13px;
             // float: right;
-            color: $menuColor;
-            border-color: $menuColor;
+            color: var(--red-ui-menuColor);
+            border-color: var(--red-ui-menuColor);
         }
     }
 
@@ -136,17 +151,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%;
-        margin-top: -6px;
+        left: calc(100% - 5px);
+        margin-top: 0;
         margin-left: -1px;
     }
     &.open > .red-ui-menu-dropdown,
@@ -161,7 +176,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,10 +190,10 @@
     }
 }
 
-.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;
@@ -187,20 +202,38 @@
     margin-left: -30px;
     /* 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: $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 +244,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;
-    border-left: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $primary-border-color;
+    background: var(--red-ui-secondary-background);
+    border-left: 1px solid var(--red-ui-secondary-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;
-    background: $palette-header-background;
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
+    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;
-            background: $workspace-button-background-active;
+            color: var(--red-ui-workspace-button-color-selected) !important;
+            background: var(--red-ui-workspace-button-background-active);
         }
     }
 
@@ -116,8 +116,8 @@
 }
 
 .red-ui-tray-titlebar {
-    color: $header-text-color;
-    border-bottom: 1px solid $secondary-border-color;
+    color: var(--red-ui-header-text-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;
-    box-shadow: -1px 0 6px $shadow;
+    border-left: 1px solid var(--red-ui-primary-border-color);
+    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;
-    color: $workspace-button-color;
+    background: var(--red-ui-primary-background);
+    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-family: $monospace-font !important;
+    font-size: var(--red-ui-primary-font-size !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-bottom: 2px solid $secondary-text-color;
+    border-top: 2px solid var(--red-ui-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;
-    background: $tertiary-background;
+    border-top: 1px solid var(--red-ui-secondary-border-color);
+    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;
-    background: $secondary-background-disabled;
+    color: var(--red-ui-tertiary-text-color);
+    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-bottom: 2px dashed $secondary-border-color;
-            // border: 1px dashed $secondary-border-color;
+            // border-left: 2px dashed var(--red-ui-secondary-border-color);
+            // border-bottom: 2px dashed var(--red-ui-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;
-                        background: $tertiary-background;
+                        border-right: 1px solid var(--red-ui-secondary-border-color);
+                        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-bottom: 1px dashed $secondary-border-color;
+//             border-left: 1px dashed var(--red-ui-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;
-    fill: $view-lasso-fill;
+    stroke: var(--red-ui-view-lasso-stroke);
+    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-opacity: $group-default-fill-opacity;
+    fill: var(--red-ui-group-default-fill);
+    fill-opacity: var(--red-ui-group-default-fill-opacity);
     stroke-width: 2;
-    stroke: $group-default-stroke;
-    stroke-opacity: $group-default-stroke-opacity;
+    stroke: var(--red-ui-group-default-stroke);
+    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;
-    fill: $node-background-placeholder;
+    stroke: var(--red-ui-node-border-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-opacity: $node-icon-background-color-opacity;
+    fill: var(--red-ui-node-icon-background-color-fill);
+    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: $node-icon-border-color;
+    stroke-opacity: var(--red-ui-node-icon-border-color-opacity);
+    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;
-    stroke: $node-status-error-border;
+    fill: var(--red-ui-node-status-error-background);
+    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;
-    stroke: $node-status-changed-border;
+    fill: var(--red-ui-node-status-changed-background);
+    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);
-        stroke: map-get($node-status-colors,$current-color);
+        fill: var(--red-ui-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;
-        stroke: map-get($node-status-colors,$current-color);
+        fill: var(--red-ui-view-background);
+        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;
-    fill:  $port-selected-color;
+    stroke: var(--red-ui-port-selected-color);
+    fill:  var(--red-ui-port-selected-color);
 }
 
 .red-ui-flow-subflow-port {
-    fill: $node-background-placeholder;
-    stroke: $node-border;
+    fill: var(--red-ui-node-background-placeholder);
+    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;
-    stroke: $link-link-color;
+    fill: var(--red-ui-node-link-port-background);
+    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,32 +371,67 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
     pointer-events: none;
 
     path:first-child {
-        fill: $popover-background;
-        stroke: $popover-background;
+        fill: var(--red-ui-popover-background);
+        stroke: var(--red-ui-popover-background);
         stroke-width: 1;
     }
 }
 .red-ui-flow-port-tooltip-label {
     stroke-width: 0;
-    fill: $popover-color;
-    font-family: $primary-font;
+    fill: var(--red-ui-popover-color);
+    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-background {
-    stroke: $node-border;
+.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: $node-port-background;
+    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: $port-selected-color;
-    fill:  $port-selected-color;
+    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: $port-selected-color;
-    // fill:  $port-selected-color;
+    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;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-input-background);
+        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;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-input-background);
+        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;
-        border-color: $form-input-border-color;
+        background-color: var(--red-ui-form-input-background-disabled);
+        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;
-        background-color: $form-input-background-disabled;
+        color: var(--red-ui-form-text-color-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;
-        border: 1px solid $form-input-border-color;
+        background-color: var(--red-ui-form-button-background);
+        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-right: 2px solid $header-background;
+        border-left: 2px solid var(--red-ui-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;
-        color: $deploy-button-color;
+        background: var(--red-ui-deploy-button-background);
+        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;
-            color: $deploy-button-color-active;
+            background: var(--red-ui-deploy-button-background-active);
+            color: var(--red-ui-deploy-button-color-active);
         }
     }
 
@@ -149,21 +149,21 @@
         padding: 4px 12px;
         &.disabled {
             cursor: default;
-            background: $deploy-button-background-disabled;
-            color: $deploy-button-color-disabled;
+            background: var(--red-ui-deploy-button-background-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;
-                color: $deploy-button-color-active;
+                background: var(--red-ui-deploy-button-background-disabled);
+                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,23 +174,23 @@
 
     .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;
-        border-color: $header-button-background-active;
+        background: var(--red-ui-header-button-background-active);
+        border-color: var(--red-ui-header-button-background-active);
     }
 
 
     ul.red-ui-menu-dropdown {
-        background: $header-menu-background;
-        border: 1px solid $header-menu-background;
+        background: var(--red-ui-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;
             img {
                 max-width: 100%;
@@ -199,11 +199,11 @@
                 border: 3px solid transparent;
             }
             .red-ui-popover-key {
-                color: $header-menu-color-disabled !important;
-                border-color: $header-menu-color-disabled !important;
+                color: var(--red-ui-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,7 @@
         }
     }
     .red-ui-menu-dropdown-submenu>a:before {
-        border-right-color: $headerMenuCaret;
+        border-right-color: var(--red-ui-headerMenuCaret);
     }
 
     /* Deploy menu customisations */
@@ -250,7 +250,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 +263,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;
-    background: $workspace-button-background;
+    color: var(--red-ui-workspace-button-color);
+    background: var(--red-ui-workspace-button-background);
 
     &.leftButton {
         float: left;
@@ -100,18 +109,18 @@
     }
 
     &.primary {
-        border-color: $workspace-button-background-primary;
-        color: $workspace-button-color-primary !important;
-        background: $workspace-button-background-primary;
+        border-color: var(--red-ui-workspace-button-background-primary);
+        color: var(--red-ui-workspace-button-color-primary) !important;
+        background: var(--red-ui-workspace-button-background-primary);
         &:not(.disabled):hover {
-            border-color: $workspace-button-background-primary-hover;
-            background: $workspace-button-background-primary-hover;
-            color: $workspace-button-color-primary !important;
+            border-color: var(--red-ui-workspace-button-background-primary-hover);
+            background: var(--red-ui-workspace-button-background-primary-hover);
+            color: var(--red-ui-workspace-button-color-primary) !important;
         }
         &.disabled {
-            border-color: $form-input-border-color;
-            color: $workspace-button-color-disabled !important;
-            background: $workspace-button-background;
+            border-color: var(--red-ui-form-input-border-color);
+            color: var(--red-ui-workspace-button-color-disabled) !important;
+            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;
-    background: $form-button-background;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    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;
-    background: $workspace-button-background-hover;
-    color: $workspace-button-color-hover;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    background: var(--red-ui-workspace-button-background-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;
-    background: $workspace-button-background-active;
+    border: 1px solid var(--red-ui-secondary-border-color);
+    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;
-    font-family: $monospace-font;
-    box-shadow: $shade-color  1px 1px 1px;
+    background: var(--red-ui-tertiary-background);
+    font-family: var(--red-ui-monospace-font);
+    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;
-    background: $workspace-button-background;
+    color: var(--red-ui-workspace-button-color) !important;
+    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, {
-        color: $workspace-button-color-hover !important;
-        background: $workspace-button-background-hover;
+    &:not(.disabled):not(:disabled):hover {
+        color: var(--red-ui-workspace-button-color-hover) !important;
+        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;
-        background: $workspace-button-background-active;
+        color: var(--red-ui-workspace-button-color-active) !important;
+        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;
-        background: $workspace-button-background-active;
+        color: var(--red-ui-workspace-button-color-selected) !important;
+        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;
-        color: $workspace-button-color-primary !important;
-        background: $workspace-button-background-primary;
+        border-color: var(--red-ui-workspace-button-background-primary);
+        color: var(--red-ui-workspace-button-color-primary) !important;
+        background: var(--red-ui-workspace-button-background-primary);
         &.disabled, &.ui-state-disabled {
             background: none;
-            color: $workspace-button-color !important;
-            border-color: $form-input-border-color;
+            color: var(--red-ui-workspace-button-color) !important;
+            border-color: var(--red-ui-form-input-border-color);
         }
         &:not(.disabled):not(.ui-button-disabled):hover {
-            border-color: $workspace-button-background-primary-hover;
-            background: $workspace-button-background-primary-hover;
-            color: $workspace-button-color-primary !important;
+            border-color: var(--red-ui-workspace-button-background-primary-hover);
+            background: var(--red-ui-workspace-button-background-primary-hover);
+            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;
-    background: $primary-background;
+    border-top: 1px solid var(--red-ui-primary-border-color);
+    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;
-    background-color: $secondary-background;
-    color: $primary-text-color;
-    border: 1px solid $notification-border-default;
+    box-shadow: 0 1px 1px 1px var(--red-ui-shadow);
+    background-color: var(--red-ui-secondary-background);
+    color: var(--red-ui-primary-text-color);
+    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;
-        border: 1px dashed $secondary-border-color;
+        background: var(--red-ui-primary-background);
+        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;
@@ -254,7 +254,7 @@ button.red-ui-palette-editor-upload-button {
         padding: 2px 8px;
     }
     form {
-	width: 0;
+        width: 0;
     }
 }
 .red-ui-palette-editor-upload {
@@ -264,9 +264,9 @@ button.red-ui-palette-editor-upload-button {
     right: 0;
     top: 44px;
     padding: 20px;
-    background: $secondary-background;
-    border-bottom: 1px $secondary-border-color solid;
-    box-shadow: 1px 1px 4px $shadow;
+    background: var(--red-ui-secondary-background);
+    border-bottom: 1px var(--red-ui-secondary-border-color solid);
+    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;
-    color: $palette-header-color;
+    background: var(--red-ui-palette-header-background);
+    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,14 @@
     bottom:0;
     left:0;
     width: 30px;
-    border-right: 1px solid $node-icon-background-color;
-    background-color: $node-icon-background-color;
+    border-right: 1px solid var(--red-ui-node-icon-background-color);
+    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);
 }
 .red-ui-palette-icon {
     display: inline-block;
@@ -197,7 +198,7 @@
             background: none;
         }
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
             font-size: 18px;
         }
     }
@@ -248,12 +249,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 {
@@ -277,7 +278,7 @@
             background: none;
         }
         .red-ui-palette-icon-fa {
-            color: $secondary-text-color;
+            color: var(--red-ui-secondary-text-color);
             font-size: 16px;
         }
     }
@@ -317,5 +318,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-bottom: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-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-right: 1px solid $secondary-border-color;
+        border-left: 1px solid var(--red-ui-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-size: $primary-font-size;
+    font-family: var(--red-ui-primary-font);
+    font-size: var(--red-ui-primary-font-size);
     position: absolute;
     box-sizing: border-box;
-    border: 1px solid $primary-border-color;
-    background: $secondary-background;
+    border: 1px solid var(--red-ui-primary-border-color);
+    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-right-color:$secondary-border-color;
+            border-color: var(--red-ui-form-background);
+            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;
-    background: $list-item-background;
-    border-left: 3px solid $list-item-background;
-    border-right: 3px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 3px solid var(--red-ui-list-item-background);
+    border-right: 3px solid var(--red-ui-list-item-background);
 
     &.projects-list-entry-current {
         &:not(.selectable) {
-            color: $form-text-color;
-            background: $list-item-background-selected;
-            border-left-color:$list-item-border-selected;
-            border-right-color:$list-item-border-selected;
+            color: var(--red-ui-form-text-color);
+            background: var(--red-ui-list-item-background-selected);
+            border-left-color:var(--red-ui-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;
-            background: $list-item-background-hover;
-            border-left-color:$list-item-background-hover;
-            border-right-color:$list-item-background-hover;
+            color: var(--red-ui-form-text-color);
+            background: var(--red-ui-list-item-background-hover);
+            border-left-color:var(--red-ui-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;
-        background: $list-item-background-selected;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        color: var(--red-ui-form-text-color);
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color:var(--red-ui-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;
-        background: $secondary-background-inactive;
+        border: 1px dashed var(--red-ui-secondary-border-color);
+        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-right: 1px solid $primary-border-color;
-        border-bottom: 1px solid $primary-border-color;
-        box-shadow: 1px 1px 4px $shadow;
+        border-left: 1px solid var(--red-ui-primary-border-color);
+        border-right: 1px solid var(--red-ui-primary-border-color);
+        border-bottom: 1px solid var(--red-ui-primary-border-color);
+        box-shadow: 1px 1px 4px var(--red-ui-shadow);
 
-        color: $primary-text-color;
-        background: $tertiary-background;
+        color: var(--red-ui-primary-text-color);
+        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-left: 1px solid $secondary-border-color;
-        border-right: 1px solid $secondary-border-color;
+        border-top: 1px solid var(--red-ui-secondary-border-color);
+        border-left: 1px solid var(--red-ui-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;
-    background: $list-item-background;
-    border-left: 2px solid $list-item-background;
-    border-right: 2px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 2px solid var(--red-ui-list-item-background);
+    border-right: 2px solid var(--red-ui-list-item-background);
     cursor: pointer;
     &.selected {
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        border-left-color:var(--red-ui-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;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        background: var(--red-ui-list-item-background-hover);
+        border-left-color:var(--red-ui-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;
-    color: $vcCommitShaColor;
+    font-family: var(--red-ui-monospace-font);
+    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;
-    background: $tertiary-background;
+    color: var(--red-ui-primary-text-color);
+    background: var(--red-ui-tertiary-background);
     padding: 4px 10px;
     height: 30px;
     box-sizing: border-box;
-    border-top: 1px solid $secondary-border-color;
-    border-bottom: 1px solid $secondary-border-color;
+    border-top: 1px solid var(--red-ui-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;
-    background: $tertiary-background;
+    color: var(--red-ui-primary-text-color);
+    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-right: 2px solid $list-item-background;
-    background: $list-item-background;
+    border-left: 2px solid var(--red-ui-list-item-background);
+    border-right: 2px solid var(--red-ui-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;
-            border-left-color:$list-item-border-selected;
-            border-right-color:$list-item-border-selected;
+            background: var(--red-ui-list-item-background-hover);
+            border-left-color:var(--red-ui-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;
-        border-left-color:$list-item-border-selected;
-        border-right-color:$list-item-border-selected;
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color:var(--red-ui-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;
 
          }
@@ -747,7 +747,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 +756,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 +775,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 +784,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 +802,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 +819,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 +830,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);
 }

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

@@ -15,8 +15,8 @@
 **/
 
 .red-ui-editor-radial-menu {
-    font-size: $primary-font-size;
-    font-family: $primary-font;
+    font-size: var(--red-ui-primary-font-size);
+    font-family: var(--red-ui-primary-font);
     position: absolute;
     top: 0;
     left:0;
@@ -29,8 +29,8 @@
         border-radius: 80px;
         width: 160px;
         height: 160px;
-        background: $shadow;
-        border: 1px solid $primary-border-color;
+        background: var(--red-ui-shadow);
+        border: 1px solid var(--red-ui-primary-border-color);
     }
 }
 
@@ -39,20 +39,20 @@
     border-radius: 20px;
     width: 50px;
     height: 50px;
-    background: $secondary-background;
-    border: 2px solid $primary-border-color;
+    background: var(--red-ui-secondary-background);
+    border: 2px solid var(--red-ui-primary-border-color);
     text-align: center;
     line-height:50px;
 
     &.selected {
-        background: $workspace-button-background-hover;
+        background: var(--red-ui-workspace-button-background-hover);
     }
 }
 
 .red-ui-editor-radial-menu-opt-disabled {
-    border-color: $tertiary-border-color;
-    color: $tertiary-border-color;
+    border-color: var(--red-ui-tertiary-border-color);
+    color: var(--red-ui-tertiary-border-color);
 }
 .red-ui-editor-radial-menu-opt-active {
-    background: $secondary-background-hover;
+    background: var(--red-ui-secondary-background-hover);
 }

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

@@ -22,9 +22,9 @@
     left: 50%;
     margin-left: -250px;
     top: 0px;
-    border: 1px solid $primary-border-color;
-    box-shadow: 0 0 10px $shadow;
-    background: $secondary-background;
+    border: 1px solid var(--red-ui-primary-border-color);
+    box-shadow: 0 0 10px var(--red-ui-shadow);
+    background: var(--red-ui-secondary-background);
 
     .red-ui-searchBox-container {
         display: inline-block;
@@ -47,17 +47,17 @@
     .red-ui-search-container {
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
-        border: 1px dashed $primary-border-color;
+        border: 1px dashed var(--red-ui-primary-border-color);
         border-bottom: none;
         padding: 0;
         width: 100%;
     }
     .red-ui-search-results-container {
         display: none;
-        height: 150px;
+        height: 195px;
         .red-ui-editableList-container {
-            border: 1px dashed $primary-border-color;
-            border-top: 1px solid $secondary-border-color;
+            border: 1px dashed var(--red-ui-primary-border-color);
+            border-top: 1px solid var(--red-ui-secondary-border-color);
         }
     }
     .red-ui-search-result {
@@ -73,7 +73,7 @@
         }
     }
     .red-ui-search-result-separator {
-        border-bottom: 3px solid $secondary-border-color;
+        border-bottom: 3px solid var(--red-ui-secondary-border-color);
     }
     .red-ui-search-result-node {
         position: relative;
@@ -84,12 +84,12 @@
     .red-ui-search-result-node-port {
         position: absolute;
         border-radius: 2px;
-        border: 1px solid $node-border;;
+        border: 1px solid $node-border;
         width: 6px;
         height: 7px;
         top:4px;
         left:-4px;
-        background: $node-port-background;
+        background: var(--red-ui-node-port-background);
         box-sizing: border-box;
     }
     .red-ui-search-result-node-output{
@@ -107,26 +107,26 @@
         margin-left:8px;
     }
     .red-ui-search-result-node-label {
-        color: $secondary-text-color;
+        color: var(--red-ui-secondary-text-color);
     }
 }
 
 .red-ui-search-container {
     padding: 3px;
-    background: $form-input-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-form-input-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
 }
 .red-ui-search-results-container {
     position:relative;
     height: 300px;
     padding: 5px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     .red-ui-search-results-list {
 
     }
     .red-ui-editableList-container {
         padding: 0;
-        background: $primary-background;
+        background: var(--red-ui-primary-background);
         li {
             padding: 0;
         }
@@ -137,21 +137,21 @@
     display: flex;
     align-items: start;
     cursor: pointer;
-    color: $list-item-color;
-    background: $list-item-background;
-    border-left: 3px solid $list-item-background;
-    border-right: 3px solid $list-item-background;
+    color: var(--red-ui-list-item-color);
+    background: var(--red-ui-list-item-background);
+    border-left: 3px solid var(--red-ui-list-item-background);
+    border-right: 3px solid var(--red-ui-list-item-background);
     li.selected & {
-        background: $list-item-background-selected;
-        border-left-color: $list-item-border-selected;
-        border-right-color: $list-item-border-selected;
+        background: var(--red-ui-list-item-background-selected);
+        border-left-color: var(--red-ui-list-item-border-selected);
+        border-right-color: var(--red-ui-list-item-border-selected);
     }
     &:hover {
         text-decoration: none;
-        color: $form-text-color;
-        background: $list-item-background-hover;
-        border-left-color:$list-item-background-hover;
-        border-right-color:$list-item-background-hover;
+        color: var(--red-ui-form-text-color);
+        background: var(--red-ui-list-item-background-hover);
+        border-left-color:var(--red-ui-list-item-background-hover);
+        border-right-color:var(--red-ui-list-item-background-hover);
     }
     &:after {
         content: "";
@@ -165,7 +165,7 @@
     float:left;
     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;
@@ -182,28 +182,28 @@
     flex-grow: 1;
 }
 .red-ui-search-result-node-label {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-search-result-node-type {
     font-style: italic;
     font-size: 0.9em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-result-node-flow {
     float:right;
     font-size: 0.8em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-result-node-id {
     display:none;
     font-size: 0.8em;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }
 .red-ui-search-empty {
     padding: 10px;
     text-align: center;
     font-style: italic;
-    color: $form-placeholder-color;
+    color: var(--red-ui-form-placeholder-color);
 }
 .red-ui-search-history {
     button {
@@ -229,12 +229,12 @@
 }
 
 .red-ui-search-result-action {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
 }
 .red-ui-search-result-action-key {
     position: absolute;
     top: 9px;
     right: 0;
     margin-right: 10px;
-    color: $tertiary-text-color;
+    color: var(--red-ui-tertiary-text-color);
 }

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

@@ -20,7 +20,7 @@
     right: 0px;
     bottom: 0px;
     width: 315px;
-    background: $primary-background;
+    background: var(--red-ui-primary-background);
     box-sizing: border-box;
     z-index: 10;
     @include component-border;
@@ -32,7 +32,7 @@
 
 #red-ui-sidebar-content {
     position: absolute;
-    background: $secondary-background;
+    background: var(--red-ui-secondary-background);
     top: 35px;
     right: 0;
     bottom: 25px;
@@ -47,8 +47,24 @@
     bottom:10px;
     width: 7px;
     // z-index: 11;
-    background: $primary-background url(images/grip.png) no-repeat 50% 50%;
+    background-color: var(--red-ui-primary-background);
     cursor: col-resize;
+
+    &: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-sidebar-closed > #red-ui-sidebar { display: none; }
@@ -66,11 +82,11 @@
 
 .sidebar-header, /* Deprecated -> red-ui-sidebar-header */
 .red-ui-sidebar-header {
-    color: $primary-text-color;
+    color: var(--red-ui-primary-text-color);
     text-align: right;
     padding: 8px 10px;
-    background: $primary-background;
-    border-bottom: 1px solid $secondary-border-color;
+    background: var(--red-ui-primary-background);
+    border-bottom: 1px solid var(--red-ui-secondary-border-color);
     white-space: nowrap;
 }
 
@@ -122,9 +138,9 @@ button.red-ui-sidebar-header-button-toggle {
     top: calc(50% - 26px);
 
     padding:15px 8px;
-    border:1px solid $primary-border-color;
-    background:$primary-background;
-    color: $secondary-text-color;
+    border:1px solid var(--red-ui-primary-border-color);
+    background:var(--red-ui-primary-background);
+    color: var(--red-ui-secondary-text-color);
     text-align: center;
     cursor: pointer;
 }