Skip to content

[Instruments] notify.info() / notify.update() does not render \n as a line break in toast #1022

Description

@ammaree

EEZ Studio version: 0.28.0

Summary:
When a \n character is included in the string passed to notify.info() or notify.update({ render: ... }), it is not rendered as a visible line break. The newline is collapsed and the content appears on a single line.

Root cause:
packages/eez-studio-ui/_stylesheets/app.less imports ReactToastify.css but does not override white-space on .Toastify__toast-body. The default value causes newlines to collapse in HTML rendering.

Investigation:

Approach Result
\n in render string, no CSS change Single line — newline collapsed
<br> in render string Literal text <br> printed — not rendered as HTML
DevTools: .Toastify__toast-body { white-space: pre-line } ✅ Two lines — works
document.createElement('style') injected from script sandbox ✅ Two lines — works (document is accessible)

Proposed fix (3 lines in app.less):

After the line @import "../../../node_modules/react-toastify/dist/ReactToastify.css";, add:

.Toastify__toast-body {
    white-space: pre-line;
}

pre-line collapses multiple spaces (normal behaviour) but renders \n as a visible line break.

Current workaround:
Until this is fixed upstream, instrument extensions can self-inject the CSS fix at script runtime since document is accessible in the script sandbox:

if (!document.getElementById('my-toast-fix')) {
    var _s = document.createElement('style');
    _s.id = 'my-toast-fix';
    _s.textContent = '.Toastify__toast-body{white-space:pre-line}';
    document.head.appendChild(_s);
}

Use case:
Instrument scripts that display multi-channel readouts in a persistent updating toast:

notify.update(toastId, {
    render: "CH1: 12.000V  0.1000A  ●ON  CV\nCH2:  0.000V  0.0000A  ○OFF CV",
    autoClose: false
});

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions