Fix a rendering issue when a message starts with a list (#1915) (#2152)

ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift

@@ -33,7 +33,12 @@ struct FormattedBodyText: View {
     }()
         
     private var attributedComponents: [AttributedStringBuilderComponent] {
-        var adjustedAttributedString = AttributedString(layoutDirection.isolateLayoutUnicodeString) + attributedString + AttributedString(additionalWhitespacesSuffix)
+        var adjustedAttributedString = attributedString + AttributedString(additionalWhitespacesSuffix)
+        
+        // If this is not a list, force the writing direction by adding the correct unicode character.
+        if !String(attributedString.characters).starts(with: "\t") {
+            adjustedAttributedString = AttributedString(layoutDirection.isolateLayoutUnicodeString) + adjustedAttributedString
+        }
         
         // Required to allow the underlying TextView to use  body font when no font is specifie in the AttributedString.
         adjustedAttributedString.mergeAttributes(defaultAttributesContainer, mergePolicy: .keepCurrent)
@@ -198,7 +203,8 @@ struct FormattedBodyText_Previews: PreviewProvider, TestablePreview {
             <p>Text</p>
             <code>Hello world</code>
             """,
-            "<p>This is a list</p>\n<ul>\n<li>One</li>\n<li>Two</li>\n<li>And number 3</li>\n</ul>\n"
+            "<p>This is a list</p>\n<ul>\n<li>One</li>\n<li>Two</li>\n<li>And number 3</li>\n</ul>\n",
+            "<ul><li>First item</li><li>Second item</li><li>Third item</li></ul>"
         ]
         
         let attributedStringBuilder = AttributedStringBuilder(permalinkBaseURL: ServiceLocator.shared.settings.permalinkBaseURL, mentionBuilder: MentionBuilder())

ElementX/Sources/Screens/RoomScreen/View/Timeline/TextRoomTimelineView.swift

@@ -41,32 +41,60 @@ struct TextRoomTimelineView_Previews: PreviewProvider, TestablePreview {
     
     static var previews: some View {
         body.environmentObject(viewModel.context)
+            .previewDisplayName("Bubble")
         body
             .environment(\.timelineStyle, .plain)
             .environmentObject(viewModel.context)
+            .previewDisplayName("Plain")
+        body
+            .environmentObject(viewModel.context)
+            .environment(\.layoutDirection, .rightToLeft)
+            .previewDisplayName("Bubble RTL")
+        body
+            .environment(\.timelineStyle, .plain)
+            .environmentObject(viewModel.context)
+            .environment(\.layoutDirection, .rightToLeft)
+            .previewDisplayName("Plain RTL")
     }
     
     static var body: some View {
-        VStack(alignment: .leading, spacing: 20.0) {
-            TextRoomTimelineView(timelineItem: itemWith(text: "Short loin ground round tongue hamburger, fatback salami shoulder. Beef turkey sausage kielbasa strip steak. Alcatra capicola pig tail pancetta chislic.",
-                                                        timestamp: "Now",
-                                                        isOutgoing: false,
-                                                        senderId: "Bob"))
-
-            TextRoomTimelineView(timelineItem: itemWith(text: "Some other text",
-                                                        timestamp: "Later",
-                                                        isOutgoing: true,
-                                                        senderId: "Anne"))
-
-            TextRoomTimelineView(timelineItem: itemWith(text: "Short loin ground round tongue hamburger, fatback salami shoulder. Beef turkey sausage kielbasa strip steak. Alcatra capicola pig tail pancetta chislic.",
-                                                        timestamp: "Now",
-                                                        isOutgoing: false,
-                                                        senderId: "Bob"))
-
-            TextRoomTimelineView(timelineItem: itemWith(text: "Some other text",
-                                                        timestamp: "Later",
-                                                        isOutgoing: true,
-                                                        senderId: "Anne"))
+        ScrollView {
+            VStack(alignment: .leading, spacing: 20.0) {
+                TextRoomTimelineView(timelineItem: itemWith(text: "Short loin ground round tongue hamburger, fatback salami shoulder. Beef turkey sausage kielbasa strip steak. Alcatra capicola pig tail pancetta chislic.",
+                                                            timestamp: "Now",
+                                                            isOutgoing: false,
+                                                            senderId: "Bob"))
+                
+                TextRoomTimelineView(timelineItem: itemWith(text: "Some other text",
+                                                            timestamp: "Later",
+                                                            isOutgoing: true,
+                                                            senderId: "Anne"))
+                
+                TextRoomTimelineView(timelineItem: itemWith(text: "Short loin ground round tongue hamburger, fatback salami shoulder. Beef turkey sausage kielbasa strip steak. Alcatra capicola pig tail pancetta chislic.",
+                                                            timestamp: "Now",
+                                                            isOutgoing: false,
+                                                            senderId: "Bob"))
+                
+                TextRoomTimelineView(timelineItem: itemWith(text: "Some other text",
+                                                            timestamp: "Later",
+                                                            isOutgoing: true,
+                                                            senderId: "Anne"))
+                
+                TextRoomTimelineView(timelineItem: itemWith(text: "טקסט אחר",
+                                                            timestamp: "Later",
+                                                            isOutgoing: true,
+                                                            senderId: "Anne"))
+                
+                TextRoomTimelineView(timelineItem: itemWith(html: "<ol><li>First item</li><li>Second item</li><li>Third item</li></ol>",
+                                                            timestamp: "Later",
+                                                            isOutgoing: true,
+                                                            senderId: "Anne"))
+                
+                TextRoomTimelineView(timelineItem: itemWith(html: "<ol><li>פריט ראשון</li><li>הפריט השני</li><li>פריט שלישי</li></ol>",
+                                                            timestamp: "Later",
+                                                            isOutgoing: true,
+                                                            senderId: "Anne"))
+            }
         }
     }
     
@@ -80,4 +108,18 @@ struct TextRoomTimelineView_Previews: PreviewProvider, TestablePreview {
                              sender: .init(id: senderId),
                              content: .init(body: text))
     }
+    
+    private static func itemWith(html: String, timestamp: String, isOutgoing: Bool, senderId: String) -> TextRoomTimelineItem {
+        let builder = AttributedStringBuilder(cacheKey: "preview", permalinkBaseURL: ServiceLocator.shared.settings.permalinkBaseURL, mentionBuilder: MentionBuilder())
+        let attributedString = builder.fromHTML(html)
+        
+        return TextRoomTimelineItem(id: .random,
+                                    timestamp: timestamp,
+                                    isOutgoing: isOutgoing,
+                                    isEditable: isOutgoing,
+                                    canBeRepliedTo: true,
+                                    isThreaded: false,
+                                    sender: .init(id: senderId),
+                                    content: .init(body: "", formattedBody: attributedString))
+    }
 }

changelog.d/1915.bugfix

@@ -0,0 +1 @@
+Lists at the beginning of messages were displayed incorrectly.