Add linkification to the new timeline renderer (#7731)

* Add linkification to the new timeline renderer

Reuse `AnnotatedString.linkify` for now, even though it creates `Spannable` instances for that: it's the closest one to what we already had.

Also, make sure we use the same URL annotation identifier in the renderer and the linkificator.

* Update screenshots

---------

Co-authored-by: ElementBot <android@element.io>

libraries/htmlrenderer/api/src/main/kotlin/io/element/android/libraries/htmlrenderer/api/HtmlMessageParser.kt

@@ -7,6 +7,7 @@
 
 package io.element.android.libraries.htmlrenderer.api
 
+import io.element.android.libraries.designsystem.components.LINK_TAG
 import org.jsoup.nodes.Document
 
 /**
@@ -28,7 +29,7 @@ interface HtmlMessageParser {
          * Tag used for the string annotation attached to link (`<a href>`) text ranges in a
          * [ParagraphNode.text]. The annotation value is the link target URL.
          */
-        const val LINK_ANNOTATION_TAG = "url"
+        const val LINK_ANNOTATION_TAG = LINK_TAG
 
         /**
          * Tag used for the string annotation attached to inline code (`<code>`) text ranges in a

libraries/htmlrenderer/api/src/main/kotlin/io/element/android/libraries/htmlrenderer/api/ui/HtmlMessageContent.kt

@@ -70,6 +70,7 @@ import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.components.linkify
 import io.element.android.libraries.designsystem.text.toPx
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.htmlrenderer.api.BlockNode
@@ -204,7 +205,9 @@ private fun ParagraphView(
     val codeBackgroundColor = ElementTheme.colors.bgSubtleSecondary
     val codeBorderColor = ElementTheme.colors.borderInteractiveSecondary
     val styledText = remember(node.text, linkColor) {
-        node.text.applyLinkStyles(linkColor = linkColor)
+        node.text
+            .linkify(SpanStyle(color = linkColor))
+            .applyLinkStyles(linkColor = linkColor)
     }
     val inlineContent = rememberMentionInlineContent(node.inlineContent, context)
     val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
@@ -411,7 +414,13 @@ private fun AnnotatedString.applyLinkStyles(linkColor: Color): AnnotatedString {
     if (linkRanges.isEmpty()) return this
     return buildAnnotatedString {
         append(this@applyLinkStyles)
-        linkRanges.forEach { addStyle(SpanStyle(color = linkColor), it.start, it.end) }
+        linkRanges.forEach { linkRange ->
+            val containsColorSpan =
+                spanStyles.any { colorRange -> colorRange.start == linkRange.start && colorRange.end == linkRange.end && colorRange.item.color == linkColor }
+            if (!containsColorSpan) {
+                addStyle(SpanStyle(color = linkColor), linkRange.start, linkRange.end)
+            }
+        }
     }
 }
 

libraries/htmlrenderer/api/src/main/kotlin/io/element/android/libraries/htmlrenderer/api/ui/HtmlMessageContentPreview.kt

@@ -16,6 +16,7 @@ import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.withAnnotation
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
@@ -65,6 +66,7 @@ internal class HtmlMessageContentPreviewParam : PreviewParameterProvider<Documen
             mentionOwn(),
             nestedList(),
             nestedListWithComplexContents(),
+            linkifiedParagraph(),
         )
 
     private fun richParagraph() = document(
@@ -82,6 +84,28 @@ internal class HtmlMessageContentPreviewParam : PreviewParameterProvider<Documen
         ),
     )
 
+    private fun linkifiedParagraph() = document(
+        paragraph(
+            buildAnnotatedString {
+                append("Hello me@matrix.org, check out element.io and and call +1 234 567 8900, then get in touch with ")
+                appendInlineContent(MENTION_ID, "@alice:example.org")
+                append(".\n\n")
+                append("Also, ignore this link: ")
+                val start = length
+                append("https://matrix.org")
+                addStringAnnotation(LINK_ANNOTATION_TAG, "https://matrix.org", start, length)
+                append(" and this one: ")
+                withAnnotation(INLINE_CODE_ANNOTATION_TAG, "") {
+                    append("https://element.io")
+                }
+                append(".")
+            },
+            inlineContent = persistentMapOf(
+                MENTION_ID to MentionNodeContent.User(displayText = "@alice", userId = UserId("@alice:example.org")),
+            ),
+        ),
+    )
+
     private fun inlineCode() = document(
         paragraph(
             buildAnnotatedString {