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))
+    }
 }

UnitTests/__Snapshots__/PreviewTests/test_textRoomTimelineView.1.png

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

UnitTests/__Snapshots__/PreviewTests/test_textRoomTimelineView.2.png

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

UnitTests/__Snapshots__/PreviewTests/test_textRoomTimelineView.Bubble-RTL.png

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

UnitTests/__Snapshots__/PreviewTests/test_textRoomTimelineView.Bubble.png

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

UnitTests/__Snapshots__/PreviewTests/test_textRoomTimelineView.Plain-RTL.png

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

UnitTests/__Snapshots__/PreviewTests/test_textRoomTimelineView.Plain.png

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

changelog.d/1915.bugfix

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