Display Emote/Image/Emoji in multiline text in Compose

350 views Asked by At

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:

enter image description here

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: enter image description here

0

There are 0 answers