Jetpack compose create list of ClickableText in one filed

Question

I have code with implementation of ClickableText with underline text.

Row(
   modifier = Modifier
         .fillMaxWidth()
         .height(IntrinsicSize.Min)
         .padding(5.dp),
            verticalAlignment = Alignment.CenterVertically
   ) {
          Text(
                text = "From",
                fontWeight = FontWeight.Black
          )
          ClickableAddress(emailAddress = addressesFrom)
}

@Composable
fun ClickableAddress(
    emailAddress: Array<EmailAddress?>
) {
    for (address in emailAddress) {
        address?.let { CreateUnderlineEmail(it) }?.let {
            ClickableText(
                text = it,
                onClick = {
                    /*TODO*/
                }
            )
        }
    }
}

@Composable
private fun CreateUnderlineEmail(address: EmailAddress): AnnotatedString {
    return buildAnnotatedString {
        if (address != null) {
            append(address.name + " <")
            withStyle(
                style = SpanStyle(
                    textDecoration = TextDecoration.Underline
                ),
            ) {
                append(address.address)
            }
            append("> ")
        }
    }
}

How can I implement Text filed with list of EmailAddress and every email must be clickable?

My code creates ClickableText not like row, but as separate fields.

Answer 1

Found such solution via addStringAnnotation

@Composable
fun ClickableAddress(
    emailAddress: Array<EmailAddress?>
) {
    val underlineTExt = CreateUnderlineEmail(address = emailAddress)
    ClickableText(
        text = underlineTExt,
        onClick = {

            underlineTExt.getStringAnnotations("address", it, it)
                .firstOrNull()?.let { stringAnnotation ->
                    /*TODO*/
                }
        }
    )
}

@Composable
private fun CreateUnderlineEmail(address: Array<EmailAddress?>): AnnotatedString {
    return buildAnnotatedString {
        for (address in address) {
            if (address != null) {
                addStringAnnotation(
                    tag = "address",
                    annotation = address.address,
                    start = this.toString().indexOf(address.address), // something like
                    end = this.toString().indexOf(address.address),
                )
                append(address.personal + " <")
                withStyle(
                    style = SpanStyle(
                        textDecoration = TextDecoration.Underline
                    ),
                ) {
                    append(address.address)
                }
                append("> ")
            }

        }
    }
}