I am trying to do a chat with emotes. I've discovered that there was InlineTextContent we can use in AnnotedString as an equivalence to SpannableString in XML.
inlineContentMap["dragon"] = InlineTextContent(
Placeholder(32.sp, 32.sp, PlaceholderVerticalAlign.TextCenter) {
AsyncImage(
model = dragonUrl,
contentDescription = null,
modifier = Modifier.size(32.dp),
contentScale = ContentScale.Crop
)
}
)
var annotedString = buildAnnotatedString {
append("a test with multiline text and an emote"
appendInlineContent(id = "dragon")
}
Text(
text = annotatedString,
inlineContent = inlineContentMap,
fontSize = 16.sp
)
It works pretty well for a single line text or for a multiline text as long as the Image inserted is not bigger than the text size. In this case there is a difference between SpannableString and InlineTextContent, in SpannableString the lineHeight of the line where the image is inserted will adapt to the image size, while for compose, it currently doesn't:
I tried then to use the :
addStyle(ParagraphStyle(lineHeight = 32.sp), start = 35, end = annotedString.lenght
Idea was to change the line where the emote is located to a paragraph with a different lineHeight but it appears that every time i set a paragraphStyle to a line containing an InlineTextContent, it crashes saying i'm over the boundary. While it doesn't if i focus a line when there is not.
FATAL EXCEPTION: main
Process: video.joinbits.beta, PID: 21884
java.lang.IllegalArgumentException: ParagraphStyle range [40, 46) is out of boundary
at androidx.compose.ui.text.AnnotatedString.<init>(AnnotatedString.kt:70)
at androidx.compose.ui.text.AnnotatedString$Builder.toAnnotatedString(AnnotatedString.kt:519)
I didn't find any mention of this issue, and runs out of idea on how to make it work, any help would be appreciate !
My goal is to have a message displayed like with SpannableString in XML:

