@node-red/editor-client 5.0.0-beta.3 → 5.0.0-beta.4

package/public/red/red.js

@@ -706,7 +706,7 @@ var RED = (function() {
 
         loader.end();
 
-        $(".red-ui-header-toolbar").removeClass('hide');
+        $("#red-ui-header-toolbar").removeClass('hide');
         RED.sidebar.show(":first", true);
 
         setTimeout(function() {
@@ -941,8 +941,7 @@ var RED = (function() {
         const logoContainer = $('<div id="red-ui-header-logo"></div>').appendTo(header);
         let logo = $('<span class="red-ui-header-logo"></span>').appendTo(logoContainer);
         $('<div id="red-ui-header-tabs" class="hide"></div>').appendTo(header);
-        $('<ul class="red-ui-header-toolbar hide"></ul>').appendTo(header);
-        $('<div id="red-ui-header-shade" class="hide"></div>').appendTo(header);
+        $('<div id="red-ui-header-toolbar" class="hide"><div id="red-ui-header-shade" class="hide"></div><ul class="red-ui-header-toolbar"></ul></div>').appendTo(header);
         $('<div id="red-ui-main-container">'+
             '<div id="red-ui-sidebar-left"></div>'+
             '<div id="red-ui-workspace"></div>'+
@@ -1384,6 +1383,7 @@ RED.i18n = (function() {
             apiRootUrl = options.apiRootUrl||"";
             var preferredLanguage = localStorage.getItem("editor-language") || detectLanguage();
             var opts = {
+                showSupportNotice: false,
                 backend: {
                     loadPath: apiRootUrl+'locales/__ns__?lng=__lng__',
                 },
@@ -10039,9 +10039,14 @@ RED.utils = (function() {
     window._marked.use({extensions: [descriptionList, description] } );
 
     function renderMarkdown(txt) {
-        var rendered = _marked.parse(txt);
-        const cleaned = DOMPurify.sanitize(rendered);
-        return cleaned;
+        try {
+            var rendered = _marked.parse(txt);
+            const cleaned = DOMPurify.sanitize(rendered);
+            return cleaned;
+        } catch (err) {
+            console.warn(err);
+            return txt
+        }
     }
 
     function formatString(str) {
@@ -11227,6 +11232,9 @@ RED.utils = (function() {
 
     function getNodeColor(type, def) {
         def = def || {};
+        if (type === 'subflow') {
+            return def.color
+        }
         if (!nodeColorCache.hasOwnProperty(type)) {
             const paletteTheme = RED.settings.theme('palette.theme') || [];
             if (paletteTheme.length > 0) {
@@ -12593,12 +12601,12 @@ RED.utils = (function() {
                     });
                 // $('<span class="red-ui-treeList-icon"><i class="fa fa-folder-o" /></span>').appendTo(label);
                 label.on("click.red-ui-treeList-expand", function(e) {
-                    if (that.options.expandOnLabel !== false || item.expandOnLabel === true) {
-                        if (container.hasClass("expanded")) {
-                            if (item.hasOwnProperty('selected') || label.hasClass("selected")) {
-                                item.treeList.collapse();
-                            }
-                        } else {
+                    if (container.hasClass("expanded")) {
+                        if (item.expandOnLabel === true || label.hasClass("selected")) {
+                            item.treeList.collapse();
+                        }
+                    } else {
+                        if (item.expandOnLabel === true || label.hasClass("selected")) {
                             item.treeList.expand();
                         }
                     }
@@ -13078,9 +13086,75 @@ RED.utils = (function() {
  **/
 RED.menu = (function() {
 
+    var currentPortaledSubmenu = null;
     var menuItems = {};
     let menuItemCount = 0
 
+    /**
+     * Position a submenu relative to its parent item, handling viewport collisions.
+     * @param {HTMLElement} parentMenuEl - The parent menu item
+     * @param {HTMLElement} submenuEl - The submenu to position
+     * @param {string} preferredSide - 'left' or 'right'
+     * @returns {{x: number, y: number, placement: string}}
+     */
+    function getSubmenuPosition(parentMenuEl, submenuEl, preferredSide) {
+        var parentMenuRect = parentMenuEl.getBoundingClientRect();
+        var submenuWidth = submenuEl.offsetWidth || 230;
+        var submenuHeight = submenuEl.offsetHeight || 200;
+        var viewportWidth = window.innerWidth;
+        var viewportHeight = window.innerHeight;
+        var padding = 10; 
+
+        // Initial position variables
+        var x;
+        var y = parentMenuRect.top;
+
+        // Shift y if it would overflow bottom of viewport
+        if (y + submenuHeight > viewportHeight - padding) {
+            y = viewportHeight - submenuHeight - padding;
+        }
+
+        // Shift y if it would overflow top of viewport
+        if (y < padding) {
+            y = padding;
+        }
+
+        // Calculate x position based on preferred side
+        if (preferredSide === 'left') {
+            x = parentMenuRect.left - submenuWidth;
+            // Flip to right if not enough space on left
+            if (x < padding) {
+                x = parentMenuRect.right;
+                // If still not enough space, shift to fit
+                if (x + submenuWidth > viewportWidth - padding) {
+                    x = viewportWidth - submenuWidth - padding;
+                }
+            }
+        } else {
+            x = parentMenuRect.right;
+            // Flip to left if not enough space on right
+            if (x + submenuWidth > viewportWidth - padding) {
+                x = parentMenuRect.left - submenuWidth;
+                // If still not enough space, shift to fit
+                if (x < padding) {
+                    x = padding;
+                }
+            }
+        }
+
+        return { x: x, y: y };
+    }
+
+    /**
+     * Clean up the currently portaled submenu (return it to original position)
+     */
+    function cleanupPortaledSubmenus() {
+        if (currentPortaledSubmenu && currentPortaledSubmenu.isPortaled) {
+            currentPortaledSubmenu.cleanUpSubmenu();
+        }
+        currentPortaledSubmenu = null;
+    }
+
     function createMenuItem(opt) {
         var item;
 
@@ -13092,7 +13166,10 @@ RED.menu = (function() {
         }
 
         function setInitialState() {
-            var savedStateActive = RED.settings.get("menu-" + opt.id);
+            let savedStateActive;
+            if (!opt.doNotPersist) {
+                savedStateActive = RED.settings.get("menu-" + opt.id);
+            }
             if (opt.setting) {
                 // May need to migrate pre-0.17 setting
 
@@ -13125,6 +13202,7 @@ RED.menu = (function() {
             item = $('<li></li>');
             if (!opt.id) {
                 opt.id = 'red-ui-menu-item-'+(menuItemCount++)
+                opt.doNotPersist = true;
             }
             if (opt.group) {
                 item.addClass("red-ui-menu-group-"+opt.group);
@@ -13192,6 +13270,14 @@ RED.menu = (function() {
                 link.on("click", function(event) {
                     event.preventDefault();
                 });
+            } else {
+                // This is an item with a submenu. Clicking on it should not trigger the
+                // document level click handler that closes the submenu.
+                // This allows touch screen users to reliably open the submenu
+                link.on("click", function (event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                })
             }
             if (opt.options) {
                 item.addClass("red-ui-menu-dropdown-submenu"+(opt.direction!=='right'?" pull-left":""));
@@ -13209,7 +13295,7 @@ RED.menu = (function() {
                             opt.options[i].onpostselect = opt.onpostselect
                         }
                         opt.options[i].direction = opt.direction
-                        hasIcons = hasIcons || (opt.options[i].icon);
+                        hasIcons = hasIcons || opt.options[i].icon || opt.options[i].toggle;
                         hasSubmenus = hasSubmenus || (opt.options[i].options);
                     }
 
@@ -13225,6 +13311,138 @@ RED.menu = (function() {
                     submenu.addClass("red-ui-menu-dropdown-submenus")
                 }
 
+                // Setup submenu portaling for scrollable parent menus
+                (function(item, submenu, direction) {
+                    var isPortaled = false;
+                    var originalParentItem = item;
+
+                    function doesSubmenuNeedPortaling() {
+                        var parentMenu = item.closest(".red-ui-menu-dropdown");
+                        var overflowY = parentMenu.css("overflow-y");
+                        // If scroll, portal it
+                        if (overflowY === "auto" || overflowY === "scroll") {
+                            return true;
+                        }
+                        
+                        var itemRect = item[0].getBoundingClientRect();
+                        var submenuWidth = submenu.outerWidth() || 230;
+                        var viewportWidth = window.innerWidth;
+                        var padding = 10;
+
+                        // If right overflow, portal it 
+                        if (itemRect.right + submenuWidth > viewportWidth - padding) {
+                            return true;
+                        }
+                        return false;
+                    }
+
+                    function portalSubmenu() {
+                        if (!doesSubmenuNeedPortaling()) {
+                            return;
+                        }
+                        if (isPortaled) {
+                            updatePositionOfSubmenu();
+                            return;
+                        }
+
+                        isPortaled = true; 
+                        submenu.appendTo('body');
+                        submenu.addClass('red-ui-menu-dropdown-portaled');
+                        updatePositionOfSubmenu();
+                    }
+
+                    function updatePositionOfSubmenu() {
+                        if (!isPortaled) {
+                            return;
+                        }
+                        var {x, y} = getSubmenuPosition(item[0], submenu[0], direction);
+                        submenu.css({
+                            'top': y + 'px',
+                            'left': x + 'px',
+                            maxHeight: ""
+                        });
+                        const windowHeight = $(window).height();
+                        const menuHeight = submenu.outerHeight();
+                        const spaceAbove = y;
+                        const bottomOverlap = menuHeight - (windowHeight - y);
+                        if (bottomOverlap > 0) {
+                            if (spaceAbove > bottomOverlap + 5) {
+                                // There is room to move the menu up and still show it all
+                                submenu.css({
+                                    top: (menuHeight - bottomOverlap - 5) + "px"
+                                })
+                            } else {
+                                // There is not room for the whole menu.
+                                // 1. move it to the top
+                                // 2. enable overflow/scrolling
+                                submenu.css({
+                                    top: "5px",
+                                    maxHeight: (windowHeight - 25) + "px",
+                                    overflowY: "auto"
+                                });
+                            }
+                        }
+                    }
+
+                    function cleanUpSubmenu() {
+                        if (!isPortaled) {
+                            return;
+                        }
+                        isPortaled = false;
+                        submenu.removeClass('red-ui-menu-dropdown-portaled');
+                        submenu.appendTo(originalParentItem);
+
+                        if (currentPortaledSubmenu && currentPortaledSubmenu.submenu === submenu) {
+                            currentPortaledSubmenu = null;
+                        }
+                    }
+
+                    var submenuInfo = {
+                        submenu,
+                        cleanUpSubmenu
+                    };
+
+                    Object.defineProperty(submenuInfo, 'isPortaled', {
+                        get: function() { return isPortaled; }
+                    });
+
+                    item.on("mouseenter", function() {
+                        if (currentPortaledSubmenu && currentPortaledSubmenu.isPortaled && currentPortaledSubmenu.submenu !== submenu) {
+                            currentPortaledSubmenu.cleanUpSubmenu();
+                        }
+
+                        portalSubmenu();
+                  
+                        if (isPortaled) {
+                            currentPortaledSubmenu = submenuInfo;
+                        }
+                    });
+
+                    item.on("mouseleave", function(e) {
+                        if (!isPortaled) {
+                            return;
+                        }
+                        // Check if mouse moved to the submenu
+                        var related = e.relatedTarget;
+                        if (related && (submenu[0].contains(related) || submenu[0] === related)) {
+                            return;
+                        }
+                        cleanUpSubmenu();
+                    });
+
+                    submenu.on("mouseleave", function(e) {
+                        if (!isPortaled) {
+                            return;
+                        }
+                        // Check if mouse moved back to parent item
+                        var related = e.relatedTarget;
+                        if (related && (item[0].contains(related) || item[0] === related)) {
+                            return;
+                        }
+                        cleanUpSubmenu();
+                    });
+
+                })(item, submenu, opt.direction);
 
             }
             if (opt.disabled) {
@@ -13240,10 +13458,11 @@ RED.menu = (function() {
 
     }
     function createMenu(options) {
-        var topMenu = $("<ul/>",{class:"red-ui-menu red-ui-menu-dropdown pull-right"});
+        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);
@@ -13254,15 +13473,31 @@ RED.menu = (function() {
                     evt.preventDefault();
                     if (topMenu.is(":visible")) {
                         $(document).off("click.red-ui-menu");
+                        cleanupPortaledSubmenus();
                         topMenu.hide();
+                        topMenu.css({ maxHeight: "", overflowY: "" });
                     } else {
                         $(document).on("click.red-ui-menu", function(evt) {
                             $(document).off("click.red-ui-menu");
                             activeMenu = null;
+                            cleanupPortaledSubmenus();
                             topMenu.hide();
+                            topMenu.css({ maxHeight: "", overflowY: "" });
                         });
                         $(".red-ui-menu.red-ui-menu-dropdown").hide();
                         topMenu.show();
+
+                        // Enable scrolling if menu exceeds viewport
+                        var menuOffset = topMenu.offset();
+                        var menuHeight = topMenu.outerHeight();
+                        var windowHeight = $(window).height();
+                        var spaceBelow = windowHeight - menuOffset.top;
+                        if (menuHeight > spaceBelow - 10) {
+                            topMenu.css({
+                                maxHeight: (spaceBelow - 10) + "px",
+                                overflowY: "auto"
+                            });
+                        }
                     }
                 })
             }
@@ -13283,7 +13518,7 @@ RED.menu = (function() {
                 opt.direction = options.direction || 'left'
             }
             if (opt !== null || !lastAddedSeparator) {
-                hasIcons = hasIcons || (opt && opt.icon);
+                hasIcons = hasIcons || (opt && (opt.icon || opt.toggle));
                 hasSubmenus = hasSubmenus || (opt && opt.options);
                 var li = createMenuItem(opt);
                 if (li) {
@@ -14670,8 +14905,9 @@ RED.tabs = (function() {
                 })
                 menu.appendTo("body");
                 var elementPos = menuButton.offset();
+                var top = elementPos.top + menuButton.height() - 2;
                 menu.css({
-                    top: (elementPos.top+menuButton.height()-2)+"px",
+                    top: top + "px",
                     left: (elementPos.left - menu.width() + menuButton.width())+"px"
                 })
                 $(".red-ui-menu.red-ui-menu-dropdown").hide();
@@ -14681,6 +14917,17 @@ RED.tabs = (function() {
                     menu.remove();
                 });
                 menu.show();
+
+                // Enable scrolling if menu exceeds viewport
+                var menuHeight = menu.outerHeight();
+                var windowHeight = $(window).height();
+                var spaceBelow = windowHeight - top;
+                if (menuHeight > spaceBelow - 10) {
+                    menu.css({
+                        maxHeight: (spaceBelow - 10) + "px",
+                        overflowY: "auto"
+                    });
+                }
             })
         }
 
@@ -14748,20 +14995,36 @@ RED.tabs = (function() {
                         collapsibleMenu.appendTo("body");
                     }
                     var elementPos = selectButton.offset();
+                    var top = elementPos.top + selectButton.height() - 2;
                     collapsibleMenu.css({
-                        top: (elementPos.top+selectButton.height()-2)+"px",
+                        top: top + "px",
                         left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
                     })
                     if (collapsibleMenu.is(":visible")) {
                         $(document).off("click.red-ui-tabmenu");
+                        collapsibleMenu.css({ maxHeight: "", overflowY: "" });
                     } else {
                         $(".red-ui-menu.red-ui-menu-dropdown").hide();
                         $(document).on("click.red-ui-tabmenu", function(evt) {
                             $(document).off("click.red-ui-tabmenu");
                             collapsibleMenu.hide();
+                            collapsibleMenu.css({ maxHeight: "", overflowY: "" });
                         });
                     }
                     collapsibleMenu.toggle();
+
+                    // Enable scrolling if menu exceeds viewport
+                    if (collapsibleMenu.is(":visible")) {
+                        var menuHeight = collapsibleMenu.outerHeight();
+                        var windowHeight = $(window).height();
+                        var spaceBelow = windowHeight - top;
+                        if (menuHeight > spaceBelow - 10) {
+                            collapsibleMenu.css({
+                                maxHeight: (spaceBelow - 10) + "px",
+                                overflowY: "auto"
+                            });
+                        }
+                    }
                 })
             }
 
@@ -22322,6 +22585,9 @@ RED.workspaces = (function() {
         const chartSize = [ $("#red-ui-workspace-scroll-spacer").width(), $("#red-ui-workspace-scroll-spacer").height()];
         const scrollPos = [$("#red-ui-workspace-chart").scrollLeft(), $("#red-ui-workspace-chart").scrollTop()];
         const scrollRatio = [scrollPos[0]/(chartSize[0] - chartWindowSize[0]), scrollPos[1]/(chartSize[1] - chartWindowSize[1]) ];
+        const toolbar = $("#red-ui-workspace-toolbar");
+        const toolbarOffset = toolbar.is(":visible") ? toolbar.outerHeight() : 0;
+        scrollbars.v.bar.css({ top: toolbarOffset + 2 });
         const scrollbarSize = [scrollbars.h.bar.width(), scrollbars.v.bar.height()]
         // Set the height of the handles to be the same ratio of chartWindowSize to chartSize, with a minimum size to ensure they are always draggable
 
@@ -22416,7 +22682,7 @@ RED.workspaces = (function() {
             $("#red-ui-workspace-scroll-h").css({ width: workspaceTargetWidth - 15 })
 
             const paletteWidth = $("#red-ui-sidebar-left").width()
-            $("#red-ui-header-logo").width(paletteWidth - 5)
+            $("#red-ui-header-logo").width(paletteWidth - 3)
 
             // const workspacePosition = $("#red-ui-workspace").position()
             // $("#red-ui-header-tabs").css({ left: workspacePosition.left, width: workspaceTargetWidth })
@@ -23853,11 +24119,20 @@ RED.view = (function() {
                 // Regular scroll - prevent default and manually handle both axes
                 evt.preventDefault();
                 evt.stopPropagation();
-
                 // Apply scroll deltas directly to both axes
                 var deltaX = evt.originalEvent.deltaX;
                 var deltaY = evt.originalEvent.deltaY;
 
+                if (evt.shiftKey) {
+                    // Shift key pressed - this should cause a scroll on the X-axis
+                    // But - some OS/browser combinations don't flip them, so we'll do it ourselves.
+                    if (deltaX === 0 && deltaY !== 0) {
+                        // swap the deltas
+                        deltaX = deltaY
+                        deltaY = 0
+                    }
+                }
+
                 chart.scrollLeft(chart.scrollLeft() + deltaX);
                 chart.scrollTop(chart.scrollTop() + deltaY);
 
@@ -24240,10 +24515,11 @@ RED.view = (function() {
             show: function(n) { return !n.valid }
         })
 
+        setScaleFactor(1)
         if (RED.settings.get("editor.view.view-store-zoom")) {
             var  userZoomLevel = parseFloat(RED.settings.getLocal('zoom-level'))
             if (!isNaN(userZoomLevel)) {
-                scaleFactor = userZoomLevel
+                setScaleFactor(userZoomLevel)
             }
         }
 
@@ -25947,8 +26223,8 @@ RED.view = (function() {
         var boundingWidth = maxX - minX;
         var boundingHeight = maxY - minY;
 
-        // Get viewport dimensions
-        var viewportWidth = chart.width();
+        // Get viewport dimensions - accounting for the sidebar if visible
+        var viewportWidth = chart.width() - $("#red-ui-sidebar").width();
         var viewportHeight = chart.height();
 
         // Calculate zoom level that fits bounding box in viewport
@@ -26046,7 +26322,7 @@ RED.view = (function() {
             center = [(scrollPos[0] + screenSize[0]/2)/oldScaleFactor, (scrollPos[1] + screenSize[1]/2)/oldScaleFactor];
         }
 
-        scaleFactor = factor;
+        setScaleFactor(factor)
 
         // Calculate new scroll position to keep the center point at the same screen position
         if (focalPoint) {
@@ -26132,7 +26408,7 @@ RED.view = (function() {
             interpolateValue: true, // Use exponential interpolation for zoom
             onStep: function(values) {
                 var currentFactor = values.zoom;
-                scaleFactor = currentFactor;
+                setScaleFactor(currentFactor);
 
                 // Calculate new scroll position to maintain focal point
                 var currentScreenSize = [chart.width(), chart.height()];
@@ -26170,7 +26446,7 @@ RED.view = (function() {
             onEnd: function() {
                 cancelInProgressAnimation = null;
                 // Ensure scaleFactor is exactly the target to prevent precision issues
-                scaleFactor = targetFactor;
+                setScaleFactor(targetFactor);
                 // Full redraw at the end to ensure everything is correct
                 _redraw();
                 if (RED.settings.get("editor.view.view-store-zoom")) {
@@ -26181,7 +26457,7 @@ RED.view = (function() {
             onCancel: function() {
                 cancelInProgressAnimation = null;
                 // Ensure scaleFactor is set to current target on cancel
-                scaleFactor = targetFactor;
+                setScaleFactor(targetFactor)
                 _redraw();
                 RED.events.emit("view:navigate");
             }
@@ -26383,6 +26659,9 @@ RED.view = (function() {
         movingSet.clear();
         selectedLinks.clear();
         selectedGroups.clear();
+        $(".red-ui-flow-node-highlighted").removeClass("red-ui-flow-node-highlighted");
+        $(".red-ui-flow-group-highlighted").removeClass("red-ui-flow-group-highlighted");
+        cancelFlash();
     }
 
     var lastSelection = null;
@@ -26981,7 +27260,8 @@ RED.view = (function() {
         clearSuggestedFlow();
         RED.contextMenu.hide();
         evt = evt || d3.event;
-        if (evt.button !== 0) {
+
+        if (!evt.touches && evt.button !== 0) {
             return;
         }
         if (mouse_mode === RED.state.SELECTING_NODE) {
@@ -27846,7 +28126,7 @@ RED.view = (function() {
             d3.event.stopPropagation();
             return;
         }
-        if (d3.event.button !== 0) {
+        if (!d3.event.touches && d3.event.button !== 0) {
             return
         }
         mousedown_link = d;
@@ -28115,17 +28395,17 @@ RED.view = (function() {
             img.src = iconUrl;
             img.onload = function() {
                 if (!iconUrl.match(/\.svg$/)) {
-                    var largestEdge = Math.max(img.width,img.height);
-                    var scaleFactor = 1;
+                    const largestEdge = Math.max(img.width,img.height);
+                    let imgScaleFactor = 1;
                     if (largestEdge > 30) {
-                        scaleFactor = 30/largestEdge;
+                        imgScaleFactor = 30/largestEdge;
                     }
-                    var width = img.width * scaleFactor;
+                    var width = img.width * imgScaleFactor;
                     if (width > 20) {
-                        scaleFactor *= 20/width;
+                        imgScaleFactor *= 20/width;
                         width = 20;
                     }
-                    var height = img.height * scaleFactor;
+                    var height = img.height * imgScaleFactor;
                     icon.attr("width",width);
                     icon.attr("height",height);
                     icon.attr("x",15-width/2);
@@ -28156,6 +28436,7 @@ RED.view = (function() {
             // - node is disabled
             if (!showStatus || !d.status || d.d === true) {
                 nodeEl.__statusGroup__.style.display = "none";
+                d.statusHeight = 0;
             } else {
                 nodeEl.__statusGroup__.style.display = "inline";
                 let backgroundWidth = 15
@@ -28182,6 +28463,7 @@ RED.view = (function() {
                 if (backgroundWidth > 0 && textSize.width > 0) {
                     backgroundWidth += 6
                 }
+                d.statusHeight = nodeEl.__statusGroup__.getBBox().height
                 nodeEl.__statusBackground__.setAttribute('width', backgroundWidth)
             }
             delete d.dirtyStatus;
@@ -28226,7 +28508,7 @@ RED.view = (function() {
             .on("touchstart",nodeTouchStart)
             .on("touchend",nodeTouchEnd)
         nodeContents.appendChild(mainRect);
-
+        
         const port_label_group = document.createElementNS("http://www.w3.org/2000/svg","g");
         port_label_group.setAttribute("x",0);
         port_label_group.setAttribute("y",0);
@@ -28640,6 +28922,15 @@ RED.view = (function() {
 
                 nodeContents.appendChild(statusEl);
 
+                const nodeHalo = document.createElementNS("http://www.w3.org/2000/svg","rect");
+                nodeHalo.setAttribute("class", "red-ui-flow-node-highlight");
+                nodeHalo.setAttribute("rx", 5);
+                nodeHalo.setAttribute("ry", 5);
+                nodeHalo.setAttribute("x", -10)
+                nodeHalo.setAttribute("y", -10)
+                node[0][0].__halo__ = nodeHalo;
+                nodeContents.appendChild(nodeHalo);
+
                 node[0][0].appendChild(nodeContents);
 
                 if (!d.__ghost) {
@@ -28707,11 +28998,15 @@ RED.view = (function() {
                     // This might be the first redraw after a node has been click-dragged to start a move.
                     // So its selected state might have changed since the last redraw.
                     this.classList.toggle("red-ui-flow-node-selected", !!d.selected )
+                    this.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted );
                     if (mouse_mode != RED.state.MOVING_ACTIVE) {
                         this.classList.toggle("red-ui-flow-node-disabled", d.d === true);
                         this.__mainRect__.setAttribute("width", d.w)
                         this.__mainRect__.setAttribute("height", d.h)
-                        this.__mainRect__.classList.toggle("red-ui-flow-node-highlighted",!!d.highlighted );
+
+                        this.__halo__.setAttribute("width", d.w + 20)
+                        this.__halo__.setAttribute("height", d.h + 20 + (d.statusHeight || 0))
+
 
                         if (labelParts) {
                             // The label has changed
@@ -28932,6 +29227,7 @@ RED.view = (function() {
                         });
 
                         if (d._def.button) {
+                            let buttonVisible = true
                             var buttonEnabled = isButtonEnabled(d);
                             this.__buttonGroup__.classList.toggle("red-ui-flow-node-button-disabled", !buttonEnabled);
                             if (RED.runtime && RED.runtime.started !== undefined) {
@@ -28952,11 +29248,18 @@ RED.view = (function() {
                             if (typeof d._def.button.visible === "function") { // is defined and a function...
                                 if (d._def.button.visible.call(d) === false) {
                                     this.__buttonGroup__.style.display = "none";
-                                }
-                                else {
+                                    buttonVisible = false
+                                } else {
                                     this.__buttonGroup__.style.display = "inherit";
                                 }
                             }
+                            // Need to adjust the halo to encompass the button
+                            if (buttonVisible) {
+                                this.__halo__.setAttribute("width", d.w + 40)
+                                if (d._def.align !== 'right') {
+                                    this.__halo__.setAttribute("x", -30)
+                                }
+                            }
                         }
                         // thisNode.selectAll(".node_badge_group").attr("transform",function(d){return "translate("+(d.w-40)+","+(d.h+3)+")";});
                         // thisNode.selectAll("text.node_badge_label").text(function(d,i) {
@@ -29507,6 +29810,11 @@ RED.view = (function() {
                     } else {
                         selectGroup.classList.remove("red-ui-flow-group-selected")
                     }
+                    if (d.highlighted) {
+                        selectGroup.classList.add("red-ui-flow-group-highlighted")
+                    } else {
+                        selectGroup.classList.remove("red-ui-flow-group-highlighted")
+                    }
                     var selectGroupRect = selectGroup.children[0];
                     // Background
                     selectGroupRect.setAttribute("width",d.w+6)
@@ -29515,19 +29823,12 @@ RED.view = (function() {
                     selectGroupRect = selectGroup.children[1];
                     selectGroupRect.setAttribute("width",d.w+6)
                     selectGroupRect.setAttribute("height",d.h+6)
-                    selectGroupRect.style.strokeOpacity = (d.selected || d.highlighted)?0.8:0;
+                    // selectGroupRect.style.strokeOpacity = (d.selected || d.highlighted)?0.8:0;
                     // Line
                     selectGroupRect = selectGroup.children[2];
                     selectGroupRect.setAttribute("width",d.w+6)
                     selectGroupRect.setAttribute("height",d.h+6)
-                    selectGroupRect.style.strokeOpacity = (d.selected || d.highlighted)?0.8:0;
-
-                    if (d.highlighted) {
-                        selectGroup.classList.add("red-ui-flow-node-highlighted");
-                    } else {
-                        selectGroup.classList.remove("red-ui-flow-node-highlighted");
-                    }
-
+                    // selectGroupRect.style.strokeOpacity = (d.selected || d.highlighted)?0.8:0;
 
                     g.selectAll(".red-ui-flow-group-body")
                         .attr("width",d.w)
@@ -30240,33 +30541,28 @@ RED.view = (function() {
         return result;
     }
 
-
-    function flashNode(n) {
-        let node = n;
-        if(typeof node === "string") { node = RED.nodes.node(n); }
-        if(!node) { return; }
-
-        const flashingNode = flashingNodeId && RED.nodes.node(flashingNodeId);
-        if(flashingNode) {
-            //cancel current flashing node before flashing new node
-            clearInterval(flashingNode.__flashTimer);
+    function cancelFlash() {
+        const flashingNode = flashingNodeId && (RED.nodes.node(flashingNodeId) || RED.nodes.group(flashingNodeId));
+        if (flashingNode) {
+            clearTimeout(flashingNode.__flashTimer);
             delete flashingNode.__flashTimer;
             flashingNode.dirty = true;
             flashingNode.highlighted = false;
+            _redraw()
         }
-        node.__flashTimer = setInterval(function(flashEndTime, n) {
+    }
+    function flashNode(n) {
+        let node = n;
+        if (typeof node === "string") { node = RED.nodes.node(n); }
+        if (!node) { return; }
+        cancelFlash()
+        node.__flashTimer = setTimeout(function(n) {
             n.dirty = true;
-            if (flashEndTime >= Date.now()) {
-                n.highlighted = !n.highlighted;
-            } else {
-                clearInterval(n.__flashTimer);
-                delete n.__flashTimer;
-                flashingNodeId = null;
-                n.highlighted = false;
-            }
+            n.highlighted = false;
             RED.view.redraw();
-        }, 100, Date.now() + 2200, node)
+        }, 8100, node)
         flashingNodeId = node.id;
+        node.dirty = true;
         node.highlighted = true;
         RED.view.redraw();
     }
@@ -30583,6 +30879,20 @@ RED.view = (function() {
         }
     }
 
+    function setScaleFactor(sf) {
+        scaleFactor = sf;
+        if (sf <= 0.5) {
+            chart.removeClass('red-ui-workspace-zoom-level-1')
+            chart.addClass('red-ui-workspace-zoom-level-2')
+        } else if (sf <= 0.75) {
+            chart.addClass('red-ui-workspace-zoom-level-1')
+            chart.removeClass('red-ui-workspace-zoom-level-2')
+        } else {
+            chart.removeClass('red-ui-workspace-zoom-level-1')
+            chart.removeClass('red-ui-workspace-zoom-level-2')
+        }
+    }
+
     return {
         init: init,
         state:function(state) {
@@ -30706,7 +31016,7 @@ RED.view = (function() {
                         if (node.type === "group" && !node.w && !node.h) {
                             _redraw();
                         }
-                        var screenSize = [chart[0].clientWidth/scaleFactor,chart[0].clientHeight/scaleFactor];
+                        var screenSize = [(chart[0].clientWidth - $("#red-ui-sidebar").width())/scaleFactor,chart[0].clientHeight/scaleFactor];
                         var scrollPos = [chart.scrollLeft()/scaleFactor,chart.scrollTop()/scaleFactor];
                         var cx = node.x;
                         var cy = node.y;
@@ -33148,6 +33458,9 @@ RED.sidebar = (function() {
 
         if (options.toolbar) {
             targetSidebar.sections[targetSection].footer.append(options.toolbar);
+            if (!options.enableOnEdit) {
+                $('<div>',{class:"red-ui-sidebar-shade hide"}).appendTo(options.toolbar);
+            }
             $(options.toolbar).hide();
         }
         var id = options.id;
@@ -33263,6 +33576,54 @@ RED.sidebar = (function() {
 
     let draggingTabButton = false
 
+
+    function getSidebarOptions(sidebar, targetSection) {
+        const menuOptions = []
+        const active = sidebar.tabBars[targetSection].active
+        sidebar.tabBars[targetSection].container.find('button:not(.red-ui-sidebar-tab-bar-overflow-button)').each(function () {
+            const tabId = $(this).attr('data-tab-id')
+            const tabOptions = knownTabs[tabId]
+            let initialStateSet = false
+            menuOptions.push({
+                label: tabOptions.name,
+                selected: tabId === active,
+                toggle: true,
+                onselect: function(state) {
+                    if (!initialStateSet) {
+                        // This is called when showing the menu to initialise the state properly. This made
+                        // sense for other menus, but is inconvenient here. So we swallow the first call to onselect
+                        // without taking any action.
+                        initialStateSet = true
+                        return
+                    }
+                    if (state) {
+                        RED.sidebar.show(tabId)
+                    } else {
+                        // DRY: overlapping logic with the mouseup handler on the inidividual tab buttons
+                        if (!sidebar.sections[targetSection].hidden) {
+                            const otherSectionHidden = sidebar.sections[targetSection === 'top' ? 'bottom' : 'top'].hidden
+                            if (otherSectionHidden) {
+                                // Both sections are going to be hidden, so hide the sidebar first.
+                                // We do this *before* hiding the last section so that we remember which the 'last' section was and it can be
+                                // restored when the sidebar is shown again.
+                                RED.menu.setSelected(sidebar.menuToggle, false);
+                            } else {
+                                // Hiding just one section, clear its active setting
+                                sidebar.tabBars[targetSection].active = null
+                            }
+                            sidebar.hideSection(targetSection)
+                        } else {
+                            sidebar.showSection(targetSection)
+                        }
+                        exportSidebarState()
+                    }
+
+                }
+            })
+        })
+        return menuOptions
+    }
+
     function setupSidebarTabs(sidebar) {
         const tabBar = $('<div class="red-ui-sidebar-tab-bar"></div>').addClass('red-ui-sidebar-' + sidebar.direction);
         if (sidebar.direction === 'right') {
@@ -33286,6 +33647,48 @@ RED.sidebar = (function() {
         //     toggleSidebarButton.prependTo(tabBar);
         // }
 
+        sidebar.tabOverflowButton = $('<button class="red-ui-sidebar-tab-bar-overflow-button"><i class="fa fa-ellipsis-h"></i></button>');
+        sidebar.tabOverflowButton.hide()
+        sidebar.tabOverflowButton.on('click', function(evt) {
+            try {
+                const menuOptions = getSidebarOptions(sidebar, 'top')
+                const bottomMenuOptions = getSidebarOptions(sidebar, 'bottom')
+                if (menuOptions.length > 0 && bottomMenuOptions.length > 0) {
+                    menuOptions.push(null) // separator
+                }
+                menuOptions.push(...bottomMenuOptions)
+                if (menuOptions.length === 0) {
+                    return
+                }
+                const menu = RED.menu.init({ options: menuOptions });
+                menu.attr("id",sidebar.container.attr('id')+"-menu");
+                menu.css({
+                    position: "absolute"
+                })
+                menu.appendTo("body");
+                var elementPos = sidebar.tabOverflowButton.offset();
+                menu.css({
+                    top: (elementPos.top+sidebar.tabOverflowButton.height()- menu.height() - 10)+"px",
+                    left: sidebar.direction === 'left' ?  ((elementPos.left + sidebar.tabOverflowButton.width() + 3)+"px") : ((elementPos.left - menu.width() - 3)+"px")
+                })
+                $(".red-ui-menu.red-ui-menu-dropdown").hide();
+                setTimeout(() => {
+                    $(document).on("click.red-ui-sidebar-tabmenu", function(evt) {
+                        $(document).off("click.red-ui-sidebar-tabmenu");
+                        menu.remove();
+                    });
+                }, 0)
+                menu.show();
+            } catch (err) {
+                console.log(err)
+            }
+        })
+
+        if (sidebar.direction === 'right') {
+            sidebar.tabOverflowButton.appendTo(tabBar);
+        } else if (sidebar.direction === 'left') {
+            sidebar.tabOverflowButton.prependTo(tabBar);
+        }
 
 
         sidebar.tabBar = tabBar // sidebar.tabBars.top.container;
@@ -33324,51 +33727,7 @@ RED.sidebar = (function() {
     }
 
     function setupTabSection(sidebar, tabBar, position) {
-        const tabBarButtonsContainer = $('<div class="red-ui-sidebar-tab-bar-buttons"></div>').appendTo(tabBar);
-        const tabOverflowButton = $('<button class="red-ui-sidebar-tab-bar-overflow-button"><i class="fa fa-ellipsis-h"></i></button>').appendTo(tabBarButtonsContainer);
-        tabOverflowButton.hide()
-        tabOverflowButton.on('click', function(evt) {
-            try {
-                const menuOptions = []
-                tabBarButtonsContainer.find('button:not(.red-ui-sidebar-tab-bar-overflow-button)').each(function () {
-                    if ($(this).is(':visible')) {
-                        return
-                    }
-                    const tabId = $(this).attr('data-tab-id')
-                    const tabOptions = knownTabs[tabId]
-                    menuOptions.push({
-                        label: tabOptions.name,
-                        onselect: function() {
-                            RED.sidebar.show(tabId)
-                        }
-                    })
-                })
-                if (menuOptions.length === 0) {
-                    return
-                }
-                const menu = RED.menu.init({ options: menuOptions });
-                menu.attr("id",sidebar.container.attr('id')+"-menu");
-                menu.css({
-                    position: "absolute"
-                })
-                menu.appendTo("body");
-                var elementPos = tabOverflowButton.offset();
-                menu.css({
-                    top: (elementPos.top+tabOverflowButton.height()- menu.height() - 10)+"px",
-                    left: sidebar.direction === 'left' ?  ((elementPos.left + tabOverflowButton.width() + 3)+"px") : ((elementPos.left - menu.width() - 3)+"px")
-                })
-                $(".red-ui-menu.red-ui-menu-dropdown").hide();
-                setTimeout(() => {
-                    $(document).on("click.red-ui-sidebar-tabmenu", function(evt) {
-                        $(document).off("click.red-ui-sidebar-tabmenu");
-                        menu.remove();
-                    });
-                }, 0)
-                menu.show();
-            } catch (err) {
-                console.log(err)
-            }
-        })
+        const tabBarButtonsContainer = $('<div class="red-ui-sidebar-tab-bar-buttons red-ui-sidebar-tab-bar-empty"></div>').appendTo(tabBar);
         tabBarButtonsContainer.data('sidebar', sidebar.id)
         tabBarButtonsContainer.data('sidebar-position', position)
         tabBarButtonsContainer.sortable({
@@ -33418,8 +33777,9 @@ RED.sidebar = (function() {
         return {
             container: tabBarButtonsContainer,
             addButton: function(button, position) {
+                tabBarButtonsContainer.removeClass('red-ui-sidebar-tab-bar-empty');
                 if (position === undefined || position >= tabBarButtonsContainer.children().length) {
-                    button.insertBefore(tabOverflowButton);
+                    button.appendTo(tabBarButtonsContainer);
                 } else {
                     button.insertBefore(tabBarButtonsContainer.children().eq(position));
                 }
@@ -33492,7 +33852,9 @@ RED.sidebar = (function() {
                 }
                 sidebar.container.width(newSidebarWidth);
                 ui.position.left -= scaleFactor * d
-                sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
+                if (sidebar.direction === 'left') {
+                    sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
+                }
                 RED.events.emit("sidebar:resize");
             },
             stop:function(event,ui) {
@@ -33508,7 +33870,9 @@ RED.sidebar = (function() {
                 } else {
                     sidebar.width = sidebar.container.width();
                 }
-                sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
+                if (sidebar.direction === 'left') {
+                    sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
+                }
                 RED.events.emit("sidebar:resize");
             }
         });
@@ -33552,7 +33916,9 @@ RED.sidebar = (function() {
                 }
             }
             sidebar.container.width(sidebar.width || sidebar.defaultWidth)
-            sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
+            if (sidebar.direction === 'left') {
+                sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
+            }
             sidebar.separator.show()
             if (sidebar.tabBars.top.active && !sidebar.sections.top.hidden) {
                 sidebar.tabBars.top.container.find('button[data-tab-id="'+sidebar.tabBars.top.active+'"]').addClass('selected')
@@ -33624,8 +33990,8 @@ RED.sidebar = (function() {
         const sidebarHeight = $("#red-ui-main-container").height();
         sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction);
         sidebar.container.width(sidebar.defaultWidth);
-        if (sidebar.direction === 'right') {
-            $('<div>',{class:"red-ui-sidebar-shade hide"}).css("z-index", 0).appendTo(sidebar.container);
+        if (sidebar.direction === 'left') {
+            // $('<div>',{class:"red-ui-sidebar-shade hide"}).css("z-index", 0).appendTo(sidebar.container);
         }
         sidebar.sections = {};
         sidebar.sections.top = {}
@@ -33689,9 +34055,37 @@ RED.sidebar = (function() {
                 }
             }
             // Trigger a resize of the tab bars to handle overflow
-            sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
+            if (sidebar.direction === 'left') {
+                sidebar.tabBar.css('min-width', sidebar.container.width() - 5)
+            }
             RED.events.emit("sidebar:resize");
 
+            if (sidebar.direction === 'right') {
+                const windowWidth = $("#red-ui-editor").width();
+                if (sidebar.tabOverflowButtonShown) {
+                    // Check if there's space to show the tab bar again
+                    if ($(window).width() - (sidebars.secondary.tabBar.width() + sidebar.tabOverflowButtonStatusBarWidth + sidebar.tabOverflowButtonSpace) > 0) {
+                        sidebar.tabOverflowButtonShown = false
+                        sidebar.tabOverflowButton.hide()
+                        sidebar.tabBars.top.container.show()
+                        sidebar.tabBars.bottom.container.show()
+
+                    }
+                }
+                if (!sidebar.tabOverflowButtonShown) {
+                    const tabBarWidth = sidebar.tabBar.width()
+                    const tabBarPosition = sidebar.tabBar.position()
+                    if (tabBarWidth + tabBarPosition.left > windowWidth) {
+                        sidebar.tabOverflowButtonStatusBarWidth = $("#red-ui-statusbar").width()
+                        sidebar.tabOverflowButtonSpace = tabBarWidth
+                        sidebar.tabOverflowButtonShown = true
+                        sidebar.tabOverflowButton.show()
+                        sidebar.tabBars.top.container.hide()
+                        sidebar.tabBars.bottom.container.hide()
+                    }
+                }
+            }
+
         }
         $(window).on("resize", sidebar.resizeSidebar)
 
@@ -35381,10 +35775,10 @@ RED.sidebar.info = (function() {
 
     function build() {
         var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '100%'});
-        var toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(container);
+        var toolbar = $("<div>", {class:"red-ui-info-toolbar red-ui-palette-search"}).appendTo(container);
 
         searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
-            style: "compact",
+            // style: "compact",
             delay: 500,
             change: function() {
                 var val = $(this).val();
@@ -35439,8 +35833,6 @@ RED.sidebar.info = (function() {
                 // } else {
                 //     // RED.view.select({nodes:[]})
                 // }
-            } else {
-                RED.sidebar.info.refresh(null);
             }
         })
         treeList.on('treelistconfirm', function(e,item) {
@@ -35738,6 +36130,7 @@ RED.sidebar.info = (function() {
                 config: true,
                 flow: parent,
                 types: {},
+                expandOnLabel: true,
                 label: RED._("menu.label.displayConfig"),
                 children: []
             }
@@ -35748,6 +36141,7 @@ RED.sidebar.info = (function() {
             configNodeTypes[parent].types[type] = {
                 config: true,
                 label: type,
+                expandOnLabel: true,
                 children: []
             }
             configNodeTypes[parent].treeList.addChild(configNodeTypes[parent].types[type]);
@@ -36788,24 +37182,16 @@ RED.sidebar.config = (function() {
             //cancel current flashing node before flashing new node
             clearInterval(flashingConfigNodeTimer);
             flashingConfigNodeTimer = null;
-            flashingConfigNode.children("div").removeClass('highlighted');
+            flashingConfigNode.children("div").removeClass('red-ui-flow-node-highlighted');
             flashingConfigNode = null;
         }
         if(!el || !el.children("div").length) { return; }
 
-        flashingConfigNodeTimer = setInterval(function(flashEndTime) {
-            if (flashEndTime >= Date.now()) {
-                const highlighted = el.children("div").hasClass("highlighted");
-                el.children("div").toggleClass('highlighted', !highlighted)
-            } else {
-                clearInterval(flashingConfigNodeTimer);
-                flashingConfigNodeTimer = null;
-                flashingConfigNode = null;
-                el.children("div").removeClass('highlighted');
-            }
-        }, 100, Date.now() + 2200);
+        flashingConfigNodeTimer = setTimeout(function() {
+            flashingConfigNode.children("div").removeClass('red-ui-flow-node-highlighted');
+        }, 8100)
         flashingConfigNode = el;
-        el.children("div").addClass('highlighted');
+        flashingConfigNode.children("div").addClass('red-ui-flow-node-highlighted');
     }
 
     function show(id) {
@@ -36880,8 +37266,6 @@ RED.sidebar.context = (function() {
         content = $("<div>").css({"position":"relative","height":"100%"});
         content.className = "red-ui-sidebar-context"
 
-        var footerToolbar = $('<div></div>');
-
         var stackContainer = $("<div>",{class:"red-ui-sidebar-context-stack"}).appendTo(content);
         sections = RED.stack.create({
             container: stackContainer
@@ -36978,7 +37362,6 @@ RED.sidebar.context = (function() {
             name: RED._("sidebar.context.name"),
             iconClass: "fa fa-database",
             content: content,
-            toolbar: footerToolbar,
             // pinned: true,
             enableOnEdit: true,
             action: "core:show-context-tab"
@@ -41445,7 +41828,6 @@ RED.editor = (function() {
     }
     return {
         init: function() {
-            if(window.ace) { window.ace.config.set('basePath', 'vendor/ace'); }
             RED.tray.init();
             RED.actions.add("core:confirm-edit-tray", function() {
                 $(document.activeElement).blur();
@@ -41457,7 +41839,6 @@ RED.editor = (function() {
                 $("#node-dialog-cancel").trigger("click");
                 $("#node-config-dialog-cancel").trigger("click");
             });
-            RED.editor.codeEditor.init();
         },
         generateViewStateId: generateViewStateId,
         edit: showEditDialog,
@@ -42921,7 +43302,7 @@ RED.editor = (function() {
  * @namespace RED.editor.codeEditor
  */
  RED.editor.codeEditor = (function() {
-
+    const BASIC = "basic";
     const MONACO = "monaco";
     const ACE = "ace";
     const defaultEditor = MONACO;
@@ -42931,22 +43312,30 @@ RED.editor = (function() {
 
     function init() {
         var codeEditorSettings = RED.editor.codeEditor.settings;
-        var editorChoice = codeEditorSettings.lib === MONACO ? MONACO : ACE;
+        var editorChoice = codeEditorSettings.lib || defaultEditor;
+        if (![MONACO, ACE, BASIC].includes(editorChoice)) {
+            console.warn("Invalid code editor specified in settings - '" + editorChoice + "'. Falling back to basic editor.")
+            editorChoice = BASIC;
+        }
         try {
-            var browser = RED.utils.getBrowserInfo();
             selectedCodeEditor = RED.editor.codeEditor[editorChoice];
-            //fall back to default code editor if there are any issues
-            if (!selectedCodeEditor || (editorChoice === MONACO && (browser.ie || !window.monaco))) {
-                selectedCodeEditor = RED.editor.codeEditor[defaultEditor];
+            // On first uncached load, editor may not yet be downloaded and in the DOM, so we check for the presence in `window` and defer
+            // initialization until the editor is actually loaded. Not relevant for basic editor as it is always present.
+            if (editorChoice === MONACO && !window.monaco) {
+                console.debug("Monaco editor is not yet loaded, delaying initialization");
+                return
+            } else if (editorChoice === ACE && !window.ace) {
+                console.debug("ACE editor is not yet loaded, delaying initialization");
+                return
             }
-            initialised = selectedCodeEditor.init();
+            initialised = selectedCodeEditor && selectedCodeEditor.init();
         } catch (error) {
             selectedCodeEditor = null;
             console.warn("Problem initialising '" + editorChoice + "' code editor", error);
         }
         if(!initialised) {
             selectedCodeEditor = RED.editor.codeEditor[defaultEditor];
-            initialised = selectedCodeEditor.init();
+            initialised = selectedCodeEditor && selectedCodeEditor.init();
         }
 
         $('<div id="red-ui-drop-target-markdown-editor"><div><i class="fa fa-download"></i><br></div></div>').appendTo('#red-ui-editor');
@@ -42954,16 +43343,13 @@ RED.editor = (function() {
     }
 
     function create(options) {
-        //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
-        // 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.
-        // 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.
-        // IMO, we should warn and exit as it is a coding error by the contrib author.
+        if(!initialised) {
+            RED.editor.codeEditor.init(); // try to initialize again in case ace/monaco have loaded since the first attempt
+            if(!initialised) {
+                console.debug("Preferred code editor is not initialised, falling back to basic code editor until it is loaded");
+                return RED.editor.codeEditor.basic.create(options); // fallback to basic editor
+            }
+        }
 
         if (!options) {
             console.warn("createEditor() options are missing");
@@ -45663,6 +46049,7 @@ RED.editor.codeEditor.ace = (function() {
     var initOptions = {};
 
     function init(options) {
+        window.ace.config.set('basePath', 'vendor/ace');
         initOptions = options || {}; 
         initialised = true;
         return initialised;
@@ -45843,7 +46230,404 @@ RED.editor.codeEditor.ace = (function() {
           */
          create: create
     }
-})();;/*
+})();;
+/**
+ * @namespace RED.editor.codeEditor.basic
+*/
+
+/*
+    The code editor currenlty supports 2 functions init and create.
+    * Init() - setup the editor / must return true
+    * Create() - create an editor instance / returns an editor as generated by the editor lib
+    * To be compatable with the original ace lib (for contrib nodes using it), the object returned by create() must (at minimum) support the following...
+        property .selection = {};
+        function .selection.getRange();
+        property .session //the editor object
+        function .session.insert = function(position, text)
+        function .setReadOnly(readOnly)
+        property .renderer = {};
+        function .renderer.updateFull()
+        function setMode(mode, cb)
+        function getRange();
+        function replace(range, text)
+        function selectAll
+        function clearSelection
+        function getSelectedText()
+        function destroy()
+        function resize()
+        function getSession()
+        function getLength()
+        function scrollToLine(lineNumber, scrollType)
+        function moveCursorTo(lineNumber, colNumber)
+        function getAnnotations()
+        function gotoLine(row, col)
+        function getCursorPosition()
+        function setTheme(name)
+        function setFontSize(size:Number) //Set a new font size (in pixels) for the editor text.
+        function on(name, cb)
+        function getUndoManager()
+
+*/
+
+RED.editor.codeEditor.basic = (function() {
+    var initialised = false;
+    const type = "basic";
+
+
+    function init(options) {
+        options = options || {};
+        initialised = true;
+        return initialised;
+    }
+
+    function create(options) {
+        const editorSettings = RED.editor.codeEditor.settings || {};
+        if(!options.stateId && options.stateId !== false) {
+            options.stateId = RED.editor.generateViewStateId("basic", options, (options.mode || options.title || "").split("/").pop());
+        }
+        let el = options.element || $("#"+options.id)[0];
+        const toolbarRow = $("<div>").appendTo(el);
+        el = $("<div>").appendTo(el).addClass("red-ui-editor-text-container")[0];
+        const textarea = $("<textarea>").appendTo(el)
+        textarea.attr("id", options.id + "_editor");
+        textarea.css({ width: "100%", height: "100%" });
+        textarea.addClass("red-ui-editor-text-basic");
+
+        /** @type {HTMLTextAreaElement} */
+        const textareaEl = textarea[0];
+        const editorOptions = $.extend({}, editorSettings.options, options);
+        editorOptions.language = options.mode;
+        editorOptions.value = options.value || "";
+        textarea.val(editorOptions.value);
+
+        /*********** Create the basic editor ***************/
+        const ed = {
+            selection: {},
+            session: {},
+            renderer: {},
+        }
+
+        // #region "ACE compatability"
+        ed.setMode = function(mode, cb) {
+            editorOptions.language = mode;
+            if (cb && typeof cb == "function") {
+                cb();
+            }
+        }
+
+        ed.getRange = function getRange(){
+            const value = textareaEl.value;
+            const range = { start: { row: 0, column: 0 }, end: { row: 0, column: 0 } };
+            range.start.row = value.substring(0, textareaEl.selectionStart).split("\n").length - 1;
+            range.start.column = textareaEl.selectionStart - value.lastIndexOf("\n", textareaEl.selectionStart - 1) - 1;
+            range.end.row = value.substring(0, textareaEl.selectionEnd).split("\n").length - 1;
+            range.end.column = textareaEl.selectionEnd - value.lastIndexOf("\n", textareaEl.selectionEnd - 1) - 1;
+            return range;
+        }
+
+        ed.selection.getRange = ed.getRange;
+
+        ed.session.insert = function insert(position, text) {
+            //position is zero based
+            const col = position.column || 0;
+            const row = position.row || 0;
+            // calculate selectionStart and selectionEnd based on row and column
+            const value = textareaEl.value;
+            const lines = value.split("\n");
+            let selectionStart = 0;
+            for (let i = 0; i < row; i++) {
+                selectionStart += lines[i].length + 1; // +1 for the newline character
+            }
+            selectionStart += col;
+            const selectionEnd = selectionStart;
+            textareaEl.focus();
+            textareaEl.setSelectionRange(selectionStart, selectionEnd);
+            textareaEl.setRangeText(text)
+        }
+
+        ed.setReadOnly = function setReadOnly(readOnly) {
+            textareaEl.readOnly = readOnly;
+        }
+
+        ed.session.replace = function replace(range, text) {
+            const value = textareaEl.value;
+            const lines = value.split("\n");
+            let selectionStart = 0;
+            for (let i = 0; i < (range.start.row || 0); i++) {
+                selectionStart += lines[i].length + 1; // +1 for the newline character
+            }
+            selectionStart += (range.start.column || 0);
+            let selectionEnd = 0;
+            for (let i = 0; i < (range.end.row || 0); i++) {
+                selectionEnd += lines[i].length + 1; // +1 for the newline character
+            }
+            selectionEnd += (range.end.column || 0);
+            textareaEl.focus();
+            textareaEl.setSelectionRange(selectionStart, selectionEnd);
+            textareaEl.setRangeText(text)
+        }
+
+        ed.getValue = function getValue() {
+            return textareaEl.value;
+        }
+
+        ed.setValue = function setValue(value, cursorPos) {
+            textareaEl.value = value;
+            if (cursorPos === -1) {
+                ed.clearSelection();
+            } else if (cursorPos) {
+                textareaEl.setSelectionRange(cursorPos, cursorPos);
+            }
+        }
+
+        ed.renderer.updateFull = function updateFull() {
+            // no need to do anything as the textarea will handle this
+        }
+
+        ed.selectAll =  function selectAll() {
+            textareaEl.focus();
+            textareaEl.select();
+        }
+
+        ed.clearSelection = function clearSelection() {
+            textareaEl.focus();
+            const selectionStart = textareaEl.selectionDirection == "backward" ? textareaEl.selectionEnd : textareaEl.selectionStart;
+            textareaEl.setSelectionRange(selectionStart, selectionStart);
+        }
+
+        ed.getSelectedText = function getSelectedText() {
+            return textareaEl.value.substring(textareaEl.selectionStart, textareaEl.selectionEnd);
+        }
+
+        ed.on = function (name, cb) {
+            textareaEl.addEventListener(name, cb)
+        }
+
+        ed.off = function (name, cb) {
+            textarea.on(name, cb)
+        }
+
+        ed.destroy = function destroy() {
+            try {
+                ed.saveView();
+                ed._initState = null;
+                textarea.off()
+            } catch (e) { }
+            $(textareaEl).remove();
+            $(toolbarRow).remove();
+        }
+        ed.on("blur", function () {
+            ed.focusMemory = false;
+            ed.saveView();
+        })
+        ed.on("focus", function () {
+            if (ed._initState) {
+                ed.restoreView(ed._initState);
+                ed._initState = null;
+            }
+        })
+
+        ed.focus = function focus() {
+            textareaEl.focus();
+        }
+
+        ed.resize = function resize() {
+            // not needed as the textarea will handle this
+        }
+
+        ed.getSession = function getSession() {
+            return ed;
+        }
+
+        ed.getLength = function getLength() {
+            return textareaEl.value.length;
+        }
+
+        /**
+         * Scroll vertically as necessary and reveal a line.
+         * @param {Number} lineNumber
+         * @param {ScrollType|Number} [scrollType] Immediate: = 1, Smooth: = 0
+         */
+        ed.scrollToLine = function scrollToLine(lineNumber, scrollType) {
+            const computedStyle = getComputedStyle(textareaEl);
+            let lineHeight = parseFloat(computedStyle.lineHeight);
+            if (isNaN(lineHeight)) { lineHeight = parseFloat(computedStyle.fontSize) }
+            if (isNaN(lineHeight)) { lineHeight = 12 }
+            const scrollTop = (lineNumber - 1) * lineHeight;
+            if (scrollType === 0) {
+                textareaEl.scrollTo({
+                    top: scrollTop,
+                    behavior: "smooth"
+                });
+            } else {
+                textareaEl.scrollTop = scrollTop;
+            }
+        }
+
+        ed.moveCursorTo = function moveCursorTo(lineNumber, colNumber) {
+            const value = textareaEl.value;
+            const lines = value.split("\n");
+            let selectionStart = 0;
+            for (let i = 0; i < lineNumber - 1; i++) {
+                selectionStart += lines[i].length + 1; // +1 for the newline character
+            }
+            selectionStart += colNumber - 1;
+            textareaEl.focus();
+            textareaEl.setSelectionRange(selectionStart, selectionStart);
+        }
+
+        ed.getAnnotations = function getAnnotations() {
+            return []
+        }
+
+        //ACE row and col are zero based
+        ed.gotoLine = function gotoLine(row, col) {
+            ed.moveCursorTo(row, col);
+            ed.scrollToLine(row);
+        }
+        //ACE row and col are zero based
+        ed.getCursorPosition = function getCursorPosition() {
+            const value = textareaEl.value;
+            const lineNumber = value.substring(0, textareaEl.selectionStart).split("\n").length;
+            const column = textareaEl.selectionStart - value.lastIndexOf("\n", textareaEl.selectionStart - 1);
+            return { row: lineNumber-1, column: column-1 };
+        }
+
+        ed.setTheme = function(theme) {
+            const oldTheme = userSelectedTheme || editorSettings.options.theme || "light";
+            userSelectedTheme = theme;//remember users choice for this session
+            if (oldTheme) { el.classList.remove(oldTheme) }
+            el.classList.add(theme)
+        }
+
+        ed.on = function (name, cb) {
+            textareaEl.addEventListener(name, cb)
+        }
+        ed.getUndoManager = function getUndoManager() {
+            console.warn("Node-RED basic code editor does not support getUndoManager. Consider switching to Monaco or ACE editor.");
+            return null
+        }
+        ed.setFontSize = function setFontSize(size) {
+            textareaEl.style.fontSize = size + "px"
+        }
+        //#endregion "ACE compatability"
+
+        //final setup
+        ed.focusMemory = options.focus
+        ed.mode = editorOptions.language
+
+        if (editorOptions.language === 'markdown' || options.mode === "ace/mode/markdown") {
+            $(el).addClass("red-ui-editor-text-container-toolbar");
+            ed.toolbar = RED.editor.customEditTypes['_markdown'].buildToolbar(toolbarRow, ed);
+            if (options.expandable !== false) {
+                var expandButton = $('<button type="button" class="red-ui-button" style="float: right;"><i class="fa fa-expand"></i></button>').appendTo(ed.toolbar);
+                RED.popover.tooltip(expandButton, RED._("markdownEditor.expand"));
+                expandButton.on("click", function (e) {
+                    e.preventDefault();
+                    var value = textareaEl.value;
+                    RED.editor.editMarkdown({
+                        value: value,
+                        width: "Infinity",
+                        stateId: options.stateId,
+                        cancel: function () {
+                            ed.focus();
+                        },
+                        complete: function (v, cursor) {
+                            textareaEl.value = v;
+                            setTimeout(function () {
+                                ed.focus();
+                                // ed.restoreView();
+                            }, 300);
+                        }
+                    })
+                });
+            }
+            var helpButton = $('<button type="button" class="red-ui-editor-text-help red-ui-button red-ui-button-small"><i class="fa fa-question"></i></button>').appendTo($(el).parent());
+            RED.popover.create({
+                target: helpButton,
+                trigger: 'click',
+                size: "small",
+                direction: "left",
+                content: RED._("markdownEditor.format"),
+                autoClose: 50
+            });
+        }
+        ed.getView = function () {
+            const selection = {
+                selectionStart: textareaEl.selectionStart,
+                selectionEnd: textareaEl.selectionEnd,
+                selectionDirection: textareaEl.selectionDirection
+            }
+            const scroll = {
+                scrollTop: textareaEl.scrollTop,
+                scrollLeft: textareaEl.scrollLeft
+            }
+            return {
+                selection: selection,
+                scroll: scroll
+            }
+        }
+        ed.saveView = function () {
+            if (!options.stateId) { return; } // only possible if created with a unique stateId
+            window._editorStateBasic = window._editorStateBasic || {};
+            const state = ed.getView();
+            window._editorStateBasic[options.stateId] = state;
+            return state;
+        }
+        ed.restoreView = function (state) {
+            if (!window._editorStateBasic) { return; }
+            var _state = state || window._editorStateBasic[options.stateId];
+            if (_state) {
+                try {
+                    const selection = _state.selection || {};
+                    const scroll = _state.scroll || {};
+                    textareaEl.setSelectionRange(selection.selectionStart, selection.selectionEnd, selection.selectionDirection);
+                    textareaEl.scrollTop = scroll.scrollTop;
+                    textareaEl.scrollLeft = scroll.scrollLeft;
+                    ed._initState = _state;
+                } catch (error) {
+                    delete window._editorStateBasic[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;
+    }
+
+    return {
+        /**
+         * Editor type
+         * @memberof RED.editor.codeEditor.basic
+         */
+         get type() { return type; },
+         /**
+          * Editor initialised
+         * @memberof RED.editor.codeEditor.basic
+         */
+        get initialised() { return initialised; },
+        /**
+         * Initialise code editor
+         * @param {object} options - initialisation options
+         * @memberof RED.editor.codeEditor.basic
+         */
+        init: init,
+        /**
+         * Create a code editor
+         * @param {object} options - the editor options
+         * @memberof RED.editor.codeEditor.basic
+         */
+        create: create
+    }
+})();
+;/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
@@ -47711,6 +48495,14 @@ RED.eventLog = (function() {
             editorStack = $("#red-ui-editor-stack");
             $(window).on("resize", handleWindowResize);
             RED.events.on("sidebar:resize",handleWindowResize);
+            $("#red-ui-editor-shade").on("click", function() {
+                if (!openingTray) {
+                    var tray = stack[stack.length-1];
+                    if (tray && tray.primaryButton) {
+                        tray.primaryButton.click();
+                    }
+                }
+            });
         },
         show: function show(options) {
             lowerTrayZ();
@@ -51343,17 +52135,11 @@ if (typeof module !== "undefined" && module.exports) {
         })
         menu.appendTo("body");
 
-        // TODO: prevent the menu from overflowing the window.
-
         var top = options.y
         var left = options.x
+        var windowHeight = $(window).height();
+        var windowWidth = $(window).width();
 
-        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"
@@ -51366,6 +52152,36 @@ if (typeof module !== "undefined" && module.exports) {
             disposeMenu()
         });
         menu.show();
+
+        const menuHeight = menu.outerHeight();
+        const menuWidth = menu.outerWidth();
+        const spaceAbove = top;
+        const bottomOverlap = menuHeight - (windowHeight - top);
+
+        // Adjust horizontal position if menu would overflow right edge
+        if (left + menuWidth > windowWidth - 10) {
+            left = windowWidth - menuWidth - 10;
+            menu.css({ left: left + "px" });
+        }
+
+        // Check if menu overflows below viewport
+        if (bottomOverlap > 0) {
+            if (spaceAbove > bottomOverlap + 5) {
+                // There is room to move the menu up and still show it all
+                menu.css({
+                    top: (top - bottomOverlap - 5) + "px"
+                })
+            } else {
+                // There is not room for the whole menu.
+                // 1. move it to the top
+                // 2. enable overflow/scrolling
+                menu.css({
+                    top: "5px",
+                    maxHeight: (windowHeight - 25) + "px",
+                    overflowY: "auto"
+                });
+            }
+        }
         // set focus to first item so that pressing escape key closes the menu
         $("#red-ui-workspace-context-menu :first(ul) > a").trigger("focus")