frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace the CSS solution with a coded one for the msg string

Browse Source
This commit is contained in:
GogoVega 2024-11-07 10:36:54 +01:00
parent 702bf3d547
commit 3a27a756cc
No known key found for this signature in database
GPG Key ID: E1E048B63AC5AC2B
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/node_modules/@node-red/editor-client/src/js/ui/utils.js vendored
View File

@ -128,10 +128,22 @@ RED.utils = (function() {
function formatString(str) { function formatString(str) {
return str.replace(/\r?\n/g,"↵").replace(/\t/g,"→"); return str.replace(/\r?\n/g,"↵").replace(/\t/g,"→");
} }
function sanitize(m) { function sanitize(m) {
return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); 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) { function buildMessageSummaryValue(value) {
var result; var result;
if (Array.isArray(value)) { 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 * 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')) { } 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); 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') { } 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'); element.addClass('collapsed');
$('<i class="fa fa-caret-right red-ui-debug-msg-object-handle"></i> ').prependTo(header); $('<i class="fa fa-caret-right red-ui-debug-msg-object-handle"></i> ').prependTo(header);
makeExpandable(header, function() { makeExpandable(header, function() {
@ -478,7 +493,7 @@ RED.utils = (function() {
$('<pre class="red-ui-debug-msg-type-string"></pre>').text(obj).appendTo(row); $('<pre class="red-ui-debug-msg-type-string"></pre>').text(obj).appendTo(row);
},function(state) {if (ontoggle) { ontoggle(path,state);}}, checkExpanded(strippedKey,expandPaths)); },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)) { if (/^#[0-9a-f]{6}$/i.test(obj)) {
$('<span class="red-ui-debug-msg-type-string-swatch"></span>').css('backgroundColor',obj).appendTo(e); $('<span class="red-ui-debug-msg-type-string-swatch"></span>').css('backgroundColor',obj).appendTo(e);
} }
@ -1503,6 +1518,7 @@ RED.utils = (function() {
parseContextKey: parseContextKey, parseContextKey: parseContextKey,
createIconElement: createIconElement, createIconElement: createIconElement,
sanitize: sanitize, sanitize: sanitize,
truncateString: truncateString,
renderMarkdown: renderMarkdown, renderMarkdown: renderMarkdown,
createNodeIcon: createNodeIcon, createNodeIcon: createNodeIcon,
getDarkerColor: getDarkerColor, getDarkerColor: getDarkerColor,

5
packages/node_modules/@node-red/editor-client/src/sass/debug.scss vendored
View File

@ -237,10 +237,7 @@
.red-ui-debug-msg-type-number-toggle { cursor: pointer;} .red-ui-debug-msg-type-number-toggle { cursor: pointer;}
.red-ui-debug-msg-type-string { .red-ui-debug-msg-type-string {
display: block; white-space: pre-wrap;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.red-ui-debug-msg-row { .red-ui-debug-msg-row {