What are some of the best ways to deal with `<b...

# kobweb

[Christiano]

What are some of the best ways to deal with <br/> in texts in kobweb?

I noticed you can use the innerHtml of an Element to inject text which has some <br/>. But doing something like SpanText(text = "Hello, this is a longer text with a line break.\nHere is the new line.") does not work out of the box...

Otherwise, adding markdown support also works, but makes it more bloated when it's only for 1 part of the content... 🤔 😅

[David Herman]

I just use Br(), is that not available for your case?

[David Herman]

You can also use a runtime markdown library

[David Herman]

I am pretty sure I've added extension methods in my projects that convert a string to Text and Br calls, let me search ...

[S.]

You can also use a Column around multiple SpanText

[Christiano]

Hmm, that is also a possibility! But that only works for static text that does not come from the backend.

Ooh serious? Haven't found that extension method yet 😮

[David Herman]

I didn't put the extension method in kobweb, it's probably a bit too one off

[David Herman]

str.split("\n").forEach { line -> if (line.isNotEmpty()) SpanText(line) else Br()

Something like that should work

[David Herman]

(Although maybe not! That code is only called as the children to a Column in my code, you'll have to treat it a bit differently if your text just lives in a normal Div )

[S.]

but are you sure that \n doesn't work? maybe you're just missing a pre-wrap style or something

[David Herman]

You want to convert "Hello\nWorld" to Text("Hello"); Br(); Text("World")

[S.]

<string name="why_classrooms_headline">More Time Teaching,\nLess Time Managing</string>

H1(Modifier.whiteSpace(WhiteSpace.PreWrap).textAlign(TextAlign.Center).toAttrs()) {
                Text(Res.strings.why_classrooms_headline)
            }

[David Herman]

I mean if you control the string, just put a <br> in it instead of a "\n"?

[David Herman]

Actually nevermind, that won't work in a Text call

[S.]

string isn't hardcoded as I understand it

[Christiano]

My god, the preWrap indeed works as well... wow... 😅

[Christiano]

Those options you mentioned were nice to know as well @David Herman!

Didn't think of using the .split like that!!

[David Herman]

I would do something like

Res.strings.why_classrooms_headline.addTextElements()

where

@Composable
fun String.addTextElements() {
   val lines = this.split("\n")
   lines.forEachIndexed { i, line ->
      Text(line)
      if (i < lines.lastIndex) Br()
   }
}

[David Herman]

(Wrote off the top of my head so it might not work without tweaks!)