Inline images in Skip

[dfabulich]

I need to include an inline image in my text, such that the image would wrap along with the text.

As far as I know, the only way to do that is to use an attributed string. In SwiftUI, I'd do it like this:

Text("Leading text ") + Text(Image("MyImage")) + Text(" trailing text.")

In Jetpack Compose, I'd do something similar with buildAnnotatedString.

val iconId = "inlineIcon"
val annotated = buildAnnotatedString {
    append("Leading text ")
    appendInlineContent(iconId, "[icon]")
    append(" trailing text.")
}

val inline = mapOf(
    iconId to InlineTextContent(
        placeholder = Placeholder(
            width = iconSizeEm.em,
            height = iconSizeEm.em,
            placeholderVerticalAlign = PlaceholderVerticalAlign.Center
        ),
        children = {
            Icon(
                imageVector = ImageVector.vectorResource(id = R.drawable.my_image),
                contentDescription = null,
                tint = Color.Unspecified
            )
        }
    )
)

BasicText(
    text = annotated,
    inlineContent = inline
)

Is there a way to do something like this in Skip code? Or am I just going to have to use a big #if SKIP / #else / #endif blob?

[marcprux]

For short snippets of text, you might be able to get away with using a LazyVGrid, like:

LazyVGrid(columns: [GridItem(.adaptive())]) {
    Text("Leading text ")
    Image("MyImage")
    Text(" trailing text.")
}

Other than that, I'm afraid your best bet might be to drop down to compose's annotated string builder. Better support for Swift's AttributedString is something we would very much like to have.

Alternatively, you could just stick to images that have emoji representations 😁