After updating compose-bom to 2024.01.00 (from 202...

# compose

[Mark]

After updating compose-bom to 2024.01.00 (from 2023.10.01), I noticed my Text with InlineTextContent are no longer laid out properly. The inline images are often large (screenshots) and are now simply overlayed on top of the text content instead of placed between preceding and following text. I’m using these Text composables in Dialogs in case that is relevant.

[Halil Ozercan]

Hey Mark. Can you provide a minimal repro for this problem? Also, have you checked that if it is reproducible outside a dialog?

[Mark]

val annotation = "my_annotation"
val text = buildAnnotatedString {
    appendLine("image below text in 2023.10.01 but covers text in 2024.01.00")
    appendLine("Note: make sure image is taller than available height of Text composable")
    append('\uffff')
    addStringAnnotation(tag = "androidx.compose.foundation.text.inlineContent", annotation, length - 1, length)
}
val bitmap = ContextCompat.getDrawable(LocalContext.current, R.drawable.screenshot)!!.toBitmap().asImageBitmap()
val placeholder = with(LocalDensity.current) {
    Placeholder(bitmap.width.toSp(), bitmap.height.toSp(), PlaceholderVerticalAlign.Center)    
}
val inlineTextContent = InlineTextContent(placeholder) {
    Image(bitmap = bitmap, contentDescription = null)
}
Text(text = text, inlineContent = mapOf(annotation to inlineTextContent))

Add a screenshot.png to drawable-nodpi and make sure it is taller than available height of Text composable

@Halil Ozercan Note: nothing to do with Dialog, this problem occurs wherever I place the Text

[Halil Ozercan]

do you have a specified LineHeight value in your theme's typography? One way to understand whether Theme effects anything at all is to pass style = TextStyle.Default to your Text composable.

[Mark]

Oh, so yes when I add that style parameter, the problem goes away. The theme I’m using is MdcTheme.

[Halil Ozercan]

My suggestion would be to disable any kind of theme styling in your text composable and adding it to your AnnotatedString

val annotation = "my_annotation"
  val paragraphStyle = LocalTextStyle.current.toParagraphStyle()
  val spanStyle = LocalTextStyle.current.toSpanStyle()
  val text = buildAnnotatedString {
    withStyle(spanStyle) {
      withStyle(paragraphStyle) {
        appendLine("image below text in 2023.10.01 but covers text in 2024.01.00")
        appendLine("Note: make sure image is taller than available height of Text composable")
      }
      withStyle(paragraphStyle.copy(lineHeight = TextUnit.Unspecified)) {
        append('\uffff')
        addStringAnnotation(tag = "androidx.compose.foundation.text.inlineContent", annotation, length - 1, length)
      }
    }
  }
  val bitmap = ContextCompat.getDrawable(LocalContext.current, R.drawable.screenshot)!!.toBitmap().asImageBitmap()
  val placeholder = with(LocalDensity.current) {
    Placeholder(bitmap.width.toSp(), bitmap.height.toSp(), PlaceholderVerticalAlign.Center)
  }
  val inlineTextContent = InlineTextContent(placeholder) {
    Image(bitmap = bitmap, contentDescription = null)
  }
  Text(text = text, inlineContent = mapOf(annotation to inlineTextContent), style = TextStyle.Default)

[Halil Ozercan]

unfortunately lineHeight is a strong constraint against inline content. Placeholders cannot grow taller than the constrained line height.

[Mark]

So was the only reason it was working before, because of a bug in the old version?

[Halil Ozercan]

I'm not sure how it was working for you before. When I tried this back to 1.4.0, lineHeight has always been an issue.

[Mark]

If I keep everything the same but switch back to 2023.10.01, it all works fine. Maybe you need to check when using MdcTheme?

[Mark]

In general though, there should be a way to include images between paragraphs. Either using the same InlineTextContent mechanism (in which case only apply lineHeight contraints for text) or have an InlineNonTextContent mechanism or something.

[Mark]

BTW, is there a more specific workaround than the one you mentioned? I tried style = _LocalTextStyle_.current.merge(lineHeight = TextUnit.Unspecified, lineHeightStyle = null) but this doesn’t work

[Halil Ozercan]

when merging, specified values will always override the unspecified version whether it's on the left or right side.

[Mark]

Ah right, of course. So style = _LocalTextStyle_.current.copy(lineHeight = TextUnit.Unspecified)

[Mark]

Out of interest, is this related: https://kotlinlang.slack.com/archives/C01D6HTPATV/p1706005056105739