How to have Text with html tags like <br>, <b>, etc... in Compose? I see that there is a...

# compose

[Pablo]

How to have Text with html tags like <br>, <b>, etc... in Compose? I see that there is a function that seems to do it:

text.parseAsHtml()

But it returns a Spannable and Text composable requires a String

[annsofi]

You probably want this one that returns an AnnotatedString instead of a Spannable: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/AnnotatedString.Companion#(androidx.compose.ui.te[…]LinkInteractionListener)

[Pablo]

can you elaborate your answer with a sample code of how to make that work?

[annsofi]

There's a sample in the link:

import androidx.compose.foundation.text.BasicText
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.fromHtml

// First, download a string as a plain text using one of the resources' methods. At this stage
// you will be handling plurals and formatted strings in needed. Moreover, the string will be
// resolved with respect to the current locale and available translations.
val string = stringResource(id = R.string.example)

// Next, convert a string marked with HTML tags into AnnotatedString to be displayed by Text
val styledAnnotatedString = AnnotatedString.fromHtml(htmlString = string)

BasicText(styledAnnotatedString)

If you're not on the pre-release versions of Compose it looks like it might be used like this instead: "text with <b>markup</b>".parseAsHtml

That's based on these release notes: https://developer.android.com/jetpack/androidx/releases/compose-ui#1.7.0-alpha07

[Pablo]

thank you, I'm gonna try it

[Pablo]

it doesn't exist the function fromHtml

[sindrenm]

It exists (on Android) from Compose 1.7.0-alpha07, as mentioned above.

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]droidx/compose/ui/text/Html.android.kt;l=82-92?q=html.android

[mohamed rejeb]

You can check this library , it supports both RichText and RichTextEditor composables and supports multiplatform.