Fix rendering of inline elements in list items in messages (#1091)

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

changelog.d/1090.bugfix

@@ -0,0 +1 @@
+Fix rendering of inline elements in list items.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/html/DocumentProvider.kt

@@ -50,5 +50,7 @@ open class DocumentProvider : PreviewParameterProvider<Document> {
             // "<pre>pre</pre>",
             "<mx-reply><blockquote><a href=\\\"https://matrix.to/#/!roomId/\$eventId?via=matrix.org\\\">In reply to</a> " +
                 "<a href=\\\"https://matrix.to/#/@alice:matrix.org\\\">@alice:matrix.org</a><br>original message</blockquote></mx-reply>reply",
+            "<ol><li>Testing <a href='#'>link</a> item.</li><li>And <a href='#'>another</a> item.</li></ol>",
+            "<ul><li>Testing <a href='#'>link</a> item.</li><li>And <a href='#'>another</a> item.</li></ul>",
         ).map { Jsoup.parse(it) }
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/html/HtmlDocument.kt

@@ -400,22 +400,14 @@ private fun HtmlOrderedList(
     onTextClicked: () -> Unit = {},
     onTextLongClicked: () -> Unit = {},
 ) {
-    var number = 1
     val delimiter = "."
     HtmlListItems(
         list = orderedList,
+        marker = { index -> "$index$delimiter"},
         modifier = modifier,
         onTextClicked = onTextClicked, onTextLongClicked = onTextLongClicked,
         interactionSource = interactionSource
-    ) {
+    )
-        val text = buildAnnotatedString {
-            append("${number++}$delimiter ${it.text()}")
-        }
-        HtmlText(
-            text = text, onClick = onTextClicked,
-            onLongClick = onTextLongClicked, interactionSource = interactionSource
-        )
-    }
 }
 
 @Composable
@@ -429,42 +421,52 @@ private fun HtmlUnorderedList(
     val marker = "・"
     HtmlListItems(
         list = unorderedList,
+        marker = { marker },
         modifier = modifier,
         onTextClicked = onTextClicked, onTextLongClicked = onTextLongClicked,
         interactionSource = interactionSource
-    ) {
+    )
-        val text = buildAnnotatedString {
-            append("$marker ${it.text()}")
-        }
-        HtmlText(
-            text = text, onClick = onTextClicked,
-            onLongClick = onTextLongClicked, interactionSource = interactionSource
-        )
-    }
 }
 
 @Composable
 private fun HtmlListItems(
     list: Element,
+    marker: (Int) -> String,
     interactionSource: MutableInteractionSource,
     modifier: Modifier = Modifier,
     onTextClicked: () -> Unit = {},
     onTextLongClicked: () -> Unit = {},
-    content: @Composable (node: TextNode) -> Unit = {}
 ) {
     Column(modifier = modifier) {
-        for (node in list.children()) {
+        for ((index, node) in list.children().withIndex()) {
-            for (innerNode in node.childNodes()) {
+            val areAllChildrenInline = node.childNodes().all { it is TextNode || it is Element && it.isInline() }
-                when (innerNode) {
+            if (areAllChildrenInline) {
-                    is TextNode -> {
+                val text = buildAnnotatedString {
-                        if (!innerNode.isBlank) content(innerNode)
+                    append("${marker(index + 1)} ")
+                    appendInlineChildrenElements(node.childNodes(), MaterialTheme.colorScheme)
+                }
+                HtmlText(text = text, interactionSource = remember { MutableInteractionSource() })
+            } else {
+                for (innerNode in node.childNodes()) {
+                    when (innerNode) {
+                        is TextNode -> {
+                            if (!innerNode.isBlank) {
+                                val text = buildAnnotatedString {
+                                    append("${marker(index + 1)} ")
+                                }
+                                HtmlText(
+                                    text = text, onClick = onTextClicked,
+                                    onLongClick = onTextLongClicked, interactionSource = interactionSource
+                                )
+                            }
+                        }
+                        is Element -> HtmlBlock(
+                            element = innerNode,
+                            modifier = Modifier.padding(start = 4.dp),
+                            onTextClicked = onTextClicked, onTextLongClicked = onTextLongClicked,
+                            interactionSource = interactionSource
+                        )
                     }
-                    is Element -> HtmlBlock(
-                        element = innerNode,
-                        modifier = Modifier.padding(start = 4.dp),
-                        onTextClicked = onTextClicked, onTextLongClicked = onTextLongClicked,
-                        interactionSource = interactionSource
-                    )
                 }
             }
         }

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.html_null_HtmlDocumentDark_0_null_16,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb0d3bfcfd75cbd75fd9270ff1dc27090e5dbac79ca8db8a46d91a4c12bc966b
+oid sha256:41d154cec3a16351c3c071ec8a198d36ed3d7745f8500f641fd765ad22f693df
-size 4457
+size 10877

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.html_null_HtmlDocumentDark_0_null_20,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ce52e4fba5279920db75565f4cdcf1ca761a8aad7b09ad9428e490c396527294
+size 11600

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.html_null_HtmlDocumentDark_0_null_21,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8c24f6dd8748dc3d262f5590a281ac1caee261046943ade6170ac7fcadb6d4fa
+size 11516

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.html_null_HtmlDocumentLight_0_null_16,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb0d3bfcfd75cbd75fd9270ff1dc27090e5dbac79ca8db8a46d91a4c12bc966b
+oid sha256:7240b9666592f3627bb2e944cc83ab31eface8139c5c98dcc6c1ad9e7ca9b8b6
-size 4457
+size 11285

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.html_null_HtmlDocumentLight_0_null_20,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4c0a959f003d8eedf2a4b9284f63ea77a608e272d0dd8e564bbbbf3686c88758
+size 11572

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.html_null_HtmlDocumentLight_0_null_21,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d3a3ffdc5062cea8c3226df50b0876a3ca02045a19e05974b95e5ac83b813f39
+size 11502