Let \n (newline) in strings passed to ui elements (e.g. label) be automatically translated to </br>

[whoamiafterall]

I noticed that passing \n to e.g. a ui.label() would not be translated to a newline in the resulting html.

It would make the feeling a bit more pythonic if that was possible. Also Because IDE's don't warn you about it.

Example Use Case (Don't Judge please) 🥹

  except FileNotFoundError:
      ui.label(f"{key}:\n path:{path.name} (specified in config) does not exist."
               f"\nPlease review your config, read the logs and check /files."
               f"\nIf you just started the program i may have fetched the page from your cloud by now."
               f"\nIn that case a page reload will also fix the problem.")

(If you're wondering, i'm letting the user write some .md files in their nextcloud and i cache them on the server)

[evnchn]

Hello @whoamiafterall

Sorry that will NOT be implemented because that could also mean other HTML will be honored, which is all sorts of dangerous (think <script> tags in the label text)

But then we have CSS+Tailwind to the rescue: .classes('whitespace-pre-line') can do exactly what you want:

CSS explaination: https://dev.to/cassidoo/make-line-breaks-work-when-you-render-text-in-a-react-or-vue-component-4m0n

Tailwind style explanation: https://tailwindcss.com/docs/white-space#pre-line

Shown in action:

ui.label('Multiline\nLabel\nExample').classes('whitespace-pre-line')

Hope this helps!

[evnchn]

Finally: While Pythonic and IDE warning is a fair point, I think we should also respect the web nature of NiceGUI, so I would not recommend any library-side adjustments.

While whitespace pre-wrap is like the second result on Google on respecting \n, I think we can also do better in our docs, since multiline label is likely a frequent demand.

[falkoschindler]

that could also mean other HTML will be honored

I don't think replacing "\n" with "<br />" would be a security risk. The user would only be able to add line breaks, nothing else.

But I also don't think we should change the behavior of a plain ui.label because it might break existing apps. Even if we wait for NiceGUI 4.0, it is hard to spot and might surprise some users. And there is a simple workaround using CSS or Tailwind classes (or using ui.html or ui.markdown for more control).

[evnchn]

The user would only be able to add line breaks, nothing else.

The issue is that the browser does not (afaik) have a "mode" where it only honors <br> but not the rest of the HTML dangers like <script> and stuff.

Hence why I think replacing \n with <br> is futile (albeit easy, I actually was about to PR-in before I wait and thought "boy is this a BAD idea") because we have no way of safely displaying whatever we just replaced.

---

Totally agree on not changing the behaviour of ui.label though. I recommend CSS as always.

[evnchn]

The "BAD idea" in question:

In nicegui.js, change the following

        //children.unshift(element.text.replace(/\n/g, "<br>"));
        children.unshift(Vue.h("div", { innerHTML: element.text.replace(/\n/g, "<br>") }));

Instant XSS vulnerability if implemented this way!

[falkoschindler]

Oh, now I get it. I was thinking this was possible:

def _text_to_model_text(self, text: str) -> None:
    self._text = text.replace('\n', '<br>')

But it doesn't work because _text controls the textContent of the HTML element, which doesn't render HTML at all. And changing this fact would open all sorts of attack vectors.

[evnchn]

Yeah I was 3 steps ahead of you 🤣

[whoamiafterall]

Sorry that will NOT be implemented because that could also mean other HTML will be honored, which is all sorts of dangerous (think <script> tags in the label text)

Hey, thank you for pointing that out.
I was not aware of that.

ui.label('Multiline\nLabel\nExample').classes('whitespace-pre-line')

Also the tailwind class is an interesting solution. I ended up using ui.markdown however, as you said.