From 3a27a756ccf71e750a6ba5d716888fc7c1df60c2 Mon Sep 17 00:00:00 2001
From: GogoVega <92022724+GogoVega@users.noreply.github.com>
Date: Thu, 7 Nov 2024 10:36:54 +0100
Subject: [PATCH] Replace the CSS solution with a coded one for the msg string

---
 .../editor-client/src/js/ui/utils.js          | 20 +++++++++++++++++--
 .../editor-client/src/sass/debug.scss         |  5 +----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
index cfc7f65de..93baaa2df 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js
@@ -128,10 +128,22 @@ RED.utils = (function() {
     function formatString(str) {
         return str.replace(/\r?\n/g,"&crarr;").replace(/\t/g,"&rarr;");
     }
+
     function sanitize(m) {
         return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
     }
 
+    /**
+     * Truncates a string to a specified maximum length, adding ellipsis if truncated.
+     *
+     * @param {string} str - The string to be truncated.
+     * @param {number} maxLength - The maximum length of the truncated string. Default `120`.
+     * @returns {string} The truncated string with ellipsis if it exceeds the maximum length.
+     */
+    function truncateString(str, maxLength = 120) {
+        return str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
+    }
+
     function buildMessageSummaryValue(value) {
         var result;
         if (Array.isArray(value)) {
@@ -376,6 +388,9 @@ RED.utils = (function() {
         }
     }
 
+    // Max string length before truncating
+    const MAX_STRING_LENGTH = 80;
+
     /**
      * Create a DOM element representation of obj - as used by Debug sidebar etc
      *
@@ -469,7 +484,7 @@ RED.utils = (function() {
         } else if (typeHint === "internal" || (obj.__enc__ && obj.type === 'internal')) {
             e = $('<span class="red-ui-debug-msg-type-meta red-ui-debug-msg-object-header"></span>').text("[internal]").appendTo(entryObj);
         } else if (typeof obj === 'string') {
-            if (/[\t\n\r]/.test(obj)) {
+            if (/[\t\n\r]/.test(obj) || obj.length > MAX_STRING_LENGTH) {
                 element.addClass('collapsed');
                 $('<i class="fa fa-caret-right red-ui-debug-msg-object-handle"></i> ').prependTo(header);
                 makeExpandable(header, function() {
@@ -478,7 +493,7 @@ RED.utils = (function() {
                     $('<pre class="red-ui-debug-msg-type-string"></pre>').text(obj).appendTo(row);
                 },function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey,expandPaths));
             }
-            e = $('<span class="red-ui-debug-msg-type-string red-ui-debug-msg-object-header"></span>').html('"'+formatString(sanitize(obj))+'"').appendTo(entryObj);
+            e = $('<span class="red-ui-debug-msg-type-string red-ui-debug-msg-object-header"></span>').html('"'+formatString(sanitize(truncateString(obj, MAX_STRING_LENGTH)))+'"').appendTo(entryObj);
             if (/^#[0-9a-f]{6}$/i.test(obj)) {
                 $('<span class="red-ui-debug-msg-type-string-swatch"></span>').css('backgroundColor',obj).appendTo(e);
             }
@@ -1503,6 +1518,7 @@ RED.utils = (function() {
         parseContextKey: parseContextKey,
         createIconElement: createIconElement,
         sanitize: sanitize,
+        truncateString: truncateString,
         renderMarkdown: renderMarkdown,
         createNodeIcon: createNodeIcon,
         getDarkerColor: getDarkerColor,
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
index c92df8f99..8e8803f9d 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss
@@ -237,10 +237,7 @@
 .red-ui-debug-msg-type-number-toggle { cursor: pointer;}
 
 .red-ui-debug-msg-type-string {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    white-space: pre-wrap;
 }
 
 .red-ui-debug-msg-row {