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,35 +421,44 @@ 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()) {
+            val areAllChildrenInline = node.childNodes().all { it is TextNode || it is Element && it.isInline() }
+            if (areAllChildrenInline) {
+                val text = buildAnnotatedString {
+                    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) content(innerNode)
+                            if (!innerNode.isBlank) {
+                                val text = buildAnnotatedString {
+                                    append("${marker(index + 1)} ")
+                                }
+                                HtmlText(
+                                    text = text, onClick = onTextClicked,
+                                    onLongClick = onTextLongClicked, interactionSource = interactionSource
+                                )
+                            }
                         }
                         is Element -> HtmlBlock(
                             element = innerNode,
@@ -469,6 +470,7 @@ private fun HtmlListItems(
                 }
             }
         }
+    }
 }
 
 private fun ColorScheme.codeBackground(): Color {