[info-sidebar] Handle node/group/flows with \\n in their name

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

@@ -69,6 +69,10 @@ RED.sidebar.info.outliner = (function() {
                 console.log("Definition error: "+type+".label",err);
             }
         }
+        var newlineIndex = label.indexOf("\\n");
+        if (newlineIndex > -1) {
+            label = label.substring(0,newlineIndex)+"...";
+        }
         return label;
     }
 
@@ -92,7 +96,12 @@ RED.sidebar.info.outliner = (function() {
     function getFlowLabel(n) {
         var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
         var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
-        contentDiv.text(typeof n === "string"? n : n.label);
+        var label = (typeof n === "string")? n : n.label;
+        var newlineIndex = label.indexOf("\\n");
+        if (newlineIndex > -1) {
+            label = label.substring(0,newlineIndex)+"...";
+        }
+        contentDiv.text(label);
         addControls(n, div);
         return div;
     }
@@ -292,7 +301,13 @@ RED.sidebar.info.outliner = (function() {
     }
     function onFlowChange(n) {
         var existingObject = objects[n.id];
-        existingObject.element.find(".red-ui-info-outline-item-label").text(n.label || n.id);
+
+        var label = n.label || n.id;
+        var newlineIndex = label.indexOf("\\n");
+        if (newlineIndex > -1) {
+            label = label.substring(0,newlineIndex)+"...";
+        }
+        existingObject.element.find(".red-ui-info-outline-item-label").text(label);
         existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
         existingObject.treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
     }

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

@@ -251,7 +251,12 @@ RED.sidebar.info = (function() {
 
             propertiesPanelHeaderIcon.empty();
             RED.utils.createNodeIcon(node).appendTo(propertiesPanelHeaderIcon);
-            propertiesPanelHeaderLabel.text(RED.utils.getNodeLabel(node, node.type+": "+node.id));
+            var objectLabel = RED.utils.getNodeLabel(node, node.type+": "+node.id)
+            var newlineIndex = objectLabel.indexOf("\\n");
+            if (newlineIndex > -1) {
+                objectLabel = objectLabel.substring(0,newlineIndex)+"...";
+            }
+            propertiesPanelHeaderLabel.text(objectLabel);
             propertiesPanelHeaderReveal.show();
             selectedObject = node;
 

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

@@ -2186,7 +2186,7 @@ if (DEBUG_EVENTS) { console.warn("clearSelection", mouse_mode); }
                     result_temp += str.charAt(i);
                     i++;
                 } else if (str.charAt(i+1) == 'n') {
-                    result.push(result_temp);
+                    result.push(result_temp.trim());
                     if (i+1 == str.length-1) {
                         result.push('');
                     }
@@ -2201,7 +2201,7 @@ if (DEBUG_EVENTS) { console.warn("clearSelection", mouse_mode); }
             }
         }
         if (count == 0 || count < str.length) {
-            result.push(result_temp);
+            result.push(result_temp.trim());
         }
         separateTextByLineBreak = result;
         return result;
@@ -2503,6 +2503,12 @@ if (DEBUG_EVENTS) { console.warn("portMouseUp", mouse_mode,d); }
             .attr("transform","translate("+x+","+y+")")
             .attr("class","red-ui-flow-port-tooltip");
 
+        // First check for a user-provided newline - "\\n"
+        var newContent = content.split(/\\n/,1)[0];
+        if (newContent.length !== content.length) {
+            content = newContent+"...";
+        }
+
         var lines = content.split("\n");
         var labelWidth = 6;
         var labelHeight = 12;
@@ -4214,7 +4220,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
                     }
                     d.w = Math.max(d.minWidth,d.w);
                     if (d.style.label && d.labels) {
-                        var h = (d.labels.length -1) *15;
+                        var h = (d.labels.length -1) * 16;
                         var labelPos = d.style["label-position"] || "nw";
                         d.h += h;
                         if (labelPos[0] === "n") {
@@ -4271,7 +4277,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
                         if (labelPos[0] === 'n') {
                             labelY = 0+15; // Allow for font-height
                         } else {
-                            labelY = d.h - 5 -(d.labels.length -1) *15;
+                            labelY = d.h - 5 -(d.labels.length -1) * 16;
                         }
                         if (labelPos[1] === 'w') {
                             labelX = 5;
@@ -4296,7 +4302,7 @@ if (DEBUG_EVENTS) { console.warn("nodeMouseDown", mouse_mode,d); }
                                     .text(name)
                                     .attr("x", 0)
                                     .attr("y", ypos);
-                                ypos += 15;
+                                ypos += 16;
                             });
                         }
                     }