hey one question, i have in my BE a content that has HTML tags like this: <h1>Veni al Seven In...

# kobweb

[Eduardo Ruesta]

hey one question, i have in my BE a content that has HTML tags like this:
<h1>Veni al Seven Interno</h1>

<h3>Este 30 de Noviembre te esperamos en el tradicional Seven Interno del Club San Luis...<br>
Si sos del Plantel Superior o de Juveniles, te esperamos. Hay muchisimos premios</h3>

And i want to use it in a SpanText adding html style. Is any way to do this?

[David Herman]

Why do you want to use a span text? You can just mimic the HTML here perfectly? You can put styles on things like h1 directly

[David Herman]

Do you want a style just for some section? Or for the whole page?

[Eduardo Ruesta]

was an example, this is what i have. I have a kobweb project that manage News. You can create news, the news has content and you can add html style on that. Then News are consumed by a Compose Multiplatform app. I want to add a preview page in the kobweb project to show how the News will look like in the apps. That why i need some way to show the content of the new with the html style. Let me know if you understand what i want

[David Herman]

I'm not sure why you want span text. That's just equivalent to <span>Text</span>

[Eduardo Ruesta]

i don't want a span text, forget that

[Eduardo Ruesta]

in by database a have News, one News has a content that content has html styles. i want to show that content with the html styles

[Eduardo Ruesta]

which component should i use the show the the content with the html stlyes?

[David Herman]

Ah I see

[David Herman]

You can grab a raw element and set its innerhtml

[David Herman]

I also just added RawHtml in the release that went out today. You can try that too.

[David Herman]

Here's how you can grab a raw element: https://github.com/varabyte/kobweb?tab=readme-ov-file#elementrefscope-and-raw-html-elements

[Eduardo Ruesta]

thanks for all this! i will take a look!!

[David Herman]

And here's the inner HTML property: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

[Eduardo Ruesta]

i did something like this:

Div(
    attrs = {
        ref { element ->
            element.innerHTML = uiState.content
            println(element.innerHTML)
            js("hljs.highlightAll()")
        }
    }
)

but the println is empty

[David Herman]

You checked that "content" was also not empty?

[David Herman]

You might also put the println inside a window.invokeLater in case it takes the browser a frame to propagate your changes

[David Herman]

Otherwise that code looks right

[David Herman]

(Also let's keep the conversation in here, please don't spam the main channel!)

[Eduardo Ruesta]

yes the uiState.content has something

[David Herman]

Try setting innerHTML to "test"

[Eduardo Ruesta]

hey again @David Herman i did the test setting innerHTML to "test" and its and if a create a local val with html tags its working too. The only issue is with the content i receive from the response.

[Eduardo Ruesta]

println(content)
        Div(attrs = {
            ref { element ->
                element.innerHTML = content
                println(content + "test")
                onDispose {}
            }
        }
        )

if i do this, this is what the console shows

[Eduardo Ruesta]

its like the ref show it first when the content has nothing

[Eduardo Ruesta]

is any way to wait that the LaunchedEffect finalize? i need to finalize to then set the content

LaunchedEffect(hasNewsIdParam) {
    if (hasNewsIdParam) {
        val newsId = context.route.params[NEWS_ID_PARAM] ?: ""
        val response = fetchSelectedNews(id = newsId)
        if (response is NewsApiResponse.Success) {
            val news = (response).data
            uiState = uiState.copy(
                id = news._id,
                title = news.title,
                subtitle = news.subtitle,
                thumbnail = news.thumbnail,
                content = news.content,
                link = news.link ?: "",
                linkTitle = news.linkTitle ?: "",
            )
        }
        
    } else {
        uiState = uiState.reset()
    }
}

[Eduardo Ruesta]

i did it!! i added a
var fetchDone by remember { mutableStateOf(false) }
to know when the fetch is done and then to the rest

[David Herman]

You can also just make uiState the mutableStateOf that you remember and initialize it to null

[Eduardo Ruesta]

Cool yes!!! Thanks for your help David