Overhaul the FormattedBodyText previews

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

@@ -142,27 +142,45 @@ struct FormattedBodyText_Previews: PreviewProvider, TestablePreview {
     }
     
     @ViewBuilder
+    // swiftlint:disable:next function_body_length
     static func body(_ attributedStringBuilder: AttributedStringBuilderProtocol) -> some View {
         let htmlStrings = [
             """
-            Plain text
+            Nothing is as permanent as a temporary solution that works. 
-            <br>
+            Experience is the name everyone gives to their mistakes. 
-            !room:matrix.org
+            If debugging is the process of removing bugs, then programming must be the process of putting them in.
-            <br>
-            https://www.matrix.org
-            <br>
-            www.matrix.org
-            <br>
-            matrix.org
-            <br>
-            what's <sup>sup</sup> dude?
-            <br>
-            thumbs if you liked it, <sub>sub</sub> if you loved it
             """,
             """
-            Text before blockquote
+            <h1>H1 Header</h1></br>
-            <blockquote><b>bold</b> <i>italic</i></blockquote>
+            <h2>H2 Header</h2></br>
-            Text after blockquote
+            <h3>H3 Header</h3></br>
+            <h4>H4 Header</h4></br>
+            <h5>H5 Header</h5></br>
+            <h6>H6 Header</h6>
+            """,
+            """
+            <p>This is a paragraph.</p><p>And this is another one.</p>
+            <div>And this is a division.</div>
+            New lines are ignored.\n\nLike so.</br>
+            But this line comes after a line break.</br>
+            """,
+            """
+            We expect various identifiers to be (partially) detected:</br>
+            !room:matrix.org, #room:matrix.org, $event:matrix.org, @user:matrix.org</br>
+            matrix://roomid/room:matrix.org, matrix://r/room:matrix.org, matrix://roomid/room:matrix.org/e/event:matrix.org, matrix://roomid/room:matrix.org/u/user:matrix.org</br>
+            """,
+            """
+            Links too:</br><a href=\"https://www.matrix.org/\">Matrix rules! 🤘</a>, matrix.org, www.matrix.org, http://matrix.org
+            """,
+            """
+            <b>Text</b> <i>formatting</i> <u>should</u> <s>work</s> properly.</br>
+            <strong>Text</strong> <em>formatting</em> does <del>work!</del>.</br>
+            <b>And <i>mixed</i></b> <em><s>formatting</s></em> <del><strong>works</strong></del> <u><b>too!!1!</b></u>.
+            <br>
+            <sup>Thumbs</sup> if you liked it, <sub>sub</sub> if you loved it!
+            """,
+            """
+            Text before blockquote<blockquote><b>Nothing</b> <i>is</i> as permanent as a <u>temporary<u> solution that <a href=\"https://www.matrix.org/\">works.</blockquote>Text after blockquote
             """,
             """
             <blockquote>First blockquote with a <a href=\"https://www.matrix.org/\">link</a> in it</blockquote>
@@ -170,13 +188,12 @@ struct FormattedBodyText_Previews: PreviewProvider, TestablePreview {
             <blockquote>Third blockquote with a <a href=\"https://www.matrix.org/\">link</a> in it</blockquote>
             """,
             """
-            <blockquote>A blockquote that is long and goes onto multiple lines as the first item in the message</blockquote>
+            <blockquote>A blockquote that is long and goes onto multiple lines </blockquote>
-            <p>Then another line of text here to reply to the blockquote, which is also a multiline component.</p>
+            <p>Then another line of text to reply to the blockquote, also multiline.</p>
-            <blockquote>Short line here.</blockquote>
+            <blockquote>Then a short blockquote.</blockquote><p>Followed by another short sentence.</p>
-            <p>And a simple reply here.</p>
             """,
             """
-            <pre><code>struct ContentView: View {
+            <pre>A preformatted code block<code>struct ContentView: View {
                 var body: some View {
                     VStack {
                         Text("Knock, knock!")
@@ -186,44 +203,61 @@ struct FormattedBodyText_Previews: PreviewProvider, TestablePreview {
                     }
                     .padding()
                 }
-            }
+            }</code></pre></br>
-            </code>
+            Followed by some plain code blocks</br>
-            </pre>
+            <code>Hello, world!</code>
+            <code><b>Hello</b>, <i>world!</i></code>
+            <code><b>Hello</b>, <a href="https://www.matrix.org">world!</a></code>
             """,
             """
-            <code>Hello world</code>
+            This is an unordered list
-            <p>Text</p>
+            <ul>
-            <code><b>Hello</b> <i>world</i></code>
+            <li>Jones’ <b>Crumpets</b></li>
-            <p>Text</p>
+            <li><i>Crumpetorium<i></li>
-            <code>Hello world</code>
+            <li>Village <u>Bakery</u></li>
-            <p>Text</p>
+            </ul>
-            <code><a href="https://www.matrix.org">matrix.org</a> https://www.matrix.org</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",
+            """
-            "<ul><li>First item</li><li>Second item</li><li>Third item</li></ul>",
+            This is an ordered list
-            "<p>test</p>\n<p>test</p>"
+            <ol>
+            <li>Jelly Belly</li>
+            <li>Starburst</li>
+            <li>Skittles</li>
+            </ol>
+            """
         ]
         
         ScrollView {
-            VStack(alignment: .leading, spacing: 24.0) {
+            VStack(alignment: .leading, spacing: 4.0) {
                 ForEach(htmlStrings, id: \.self) { htmlString in
-                    if let attributedString = attributedStringBuilder.fromHTML(htmlString) {
+                    HStack(alignment: .top, spacing: 0) {
-                        FormattedBodyText(attributedString: attributedString)
+                        Text(htmlString)
-                            .bubbleBackground()
+                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
+                            .padding(4.0)
+                        
+                        Divider()
+                            .background(.black)
+                        
+                        if let attributedString = attributedStringBuilder.fromHTML(htmlString) {
+                            FormattedBodyText(attributedString: attributedString)
+                                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
+                                .bubbleBackground()
+                                .padding(4.0)
+                        }
                     }
+                    .border(.black)
                 }
+                
                 FormattedBodyText(attributedString: AttributedString("Some plain text wrapped in an AttributedString."))
                     .bubbleBackground()
+                
                 FormattedBodyText(text: "Some plain text that's not an attributed component.")
                     .bubbleBackground()
-                FormattedBodyText(text: "Some plain text that's not an attributed component. This one is really long.")
-                    .bubbleBackground()
                 
                 FormattedBodyText(text: "❤️", boostFontSize: true)
                     .bubbleBackground()
             }
             .padding()
         }
-        .previewLayout(.sizeThatFits)
     }
 }

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.iPad-en-GB-0.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:934392ab4fdab8bd7bdb73ec3fde03c80ec86c045af86c7af0d43f2b9c973307
+oid sha256:0afe442ef495ebf79cfb765870127fd522e5634d9fcaf97ad7f18d2e6d61ff16
-size 431642
+size 1144762

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.iPad-en-GB-1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:555d7ae30575387972f64caa2d324bcb5511c27aad11b80a0d74daafe0a80651
+oid sha256:eeff85fc90e7c67e1812d308516d642ed5e534675384a9acbd7f1a112bb904f3
-size 403362
+size 1106059

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.iPad-pseudo-0.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:934392ab4fdab8bd7bdb73ec3fde03c80ec86c045af86c7af0d43f2b9c973307
+oid sha256:0afe442ef495ebf79cfb765870127fd522e5634d9fcaf97ad7f18d2e6d61ff16
-size 431642
+size 1144762

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.iPad-pseudo-1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:555d7ae30575387972f64caa2d324bcb5511c27aad11b80a0d74daafe0a80651
+oid sha256:eeff85fc90e7c67e1812d308516d642ed5e534675384a9acbd7f1a112bb904f3
-size 403362
+size 1106059

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.iPhone-16-en-GB-0.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c32002366537dbb2498693c6404bbb7f04c8e2b6d4276c27cf8e7b6da726c41d
+oid sha256:1c1d75edcce4fd949e15c41cf00a0ee5cb2974a5573ac079e9bbeef230008170
-size 327007
+size 1323823

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.iPhone-16-en-GB-1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:070581019f6b97ffdad6ebb5b895211e1359c3f77f05b34c9addfafc3fe4b7aa
+oid sha256:71608e9218a46fa9f22b59e90352d6a463597bb9b2dbff95d063d334085bd8a5
-size 302644
+size 1303346

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.iPhone-16-pseudo-0.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c32002366537dbb2498693c6404bbb7f04c8e2b6d4276c27cf8e7b6da726c41d
+oid sha256:1c1d75edcce4fd949e15c41cf00a0ee5cb2974a5573ac079e9bbeef230008170
-size 327007
+size 1323823

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.iPhone-16-pseudo-1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:070581019f6b97ffdad6ebb5b895211e1359c3f77f05b34c9addfafc3fe4b7aa
+oid sha256:71608e9218a46fa9f22b59e90352d6a463597bb9b2dbff95d063d334085bd8a5
-size 302644
+size 1303346