Horizontally scrollable code blocks (#5001)

* Remove attributed string backed codeblock background color

* Add code block support to attributed string componentization

* Render code blocks within their own custom horizontal scroll view within the timeline

* Update preview test snapshots

* Introduce a attributed string component type instead of a 2 different booleans.

ElementX/Sources/Other/Extensions/AttributedString.swift

@@ -15,8 +15,12 @@ extension AttributedString {
     }
     
     var formattedComponents: [AttributedStringBuilderComponent] {
-        runs[\.blockquote].map { value, range in
-            var attributedString = AttributedString(self[range])
+        var components = [AttributedStringBuilderComponent]()
+        
+        for run in runs[\.blockquote, \.codeBlock] {
+            let isBlockquote = run.0 != nil
+            let isCodeBlock = run.1 != nil
+            var attributedString = AttributedString(self[run.2])
             
             // Remove trailing new lines if any
             if attributedString.characters.last?.isNewline ?? false,
@@ -24,10 +28,21 @@ extension AttributedString {
                 attributedString.removeSubrange(range)
             }
             
-            let isBlockquote = value != nil
-            
-            return AttributedStringBuilderComponent(id: String(attributedString.characters), attributedString: attributedString, isBlockquote: isBlockquote)
+            let componentType: AttributedStringBuilderComponent.ComponentType = switch (isBlockquote, isCodeBlock) {
+            case (true, _):
+                .blockquote
+            case (false, true):
+                .codeBlock
+            case (false, false):
+                .plainText
+            }
+                    
+            components.append(AttributedStringBuilderComponent(id: String(attributedString.characters),
+                                                               attributedString: attributedString,
+                                                               type: componentType))
         }
+        
+        return components
     }
     
     /// Replaces the specified placeholder with a string that links to the specified URL.

ElementX/Sources/Other/HTMLParsing/AttributedStringBuilder.swift

@@ -204,7 +204,6 @@ struct AttributedStringBuilder: AttributedStringBuilderProtocol {
                 content.setFontPreservingSymbolicTraits(UIFont.monospacedSystemFont(ofSize: fontPointSize, weight: .regular))
                 
                 content.addAttribute(.CodeBlock, value: true, range: NSRange(location: 0, length: content.length))
-                content.addAttribute(.backgroundColor, value: UIColor.compound._bgCodeBlock as Any, range: NSRange(location: 0, length: content.length))
                 
                 // Don't allow identifiers or links in code blocks
                 content.removeAttribute(.MatrixRoomID, range: NSRange(location: 0, length: content.length))

ElementX/Sources/Other/HTMLParsing/AttributedStringBuilderProtocol.swift

@@ -9,9 +9,15 @@
 import Foundation
 
 struct AttributedStringBuilderComponent: Hashable, Identifiable {
+    enum ComponentType {
+        case plainText
+        case blockquote
+        case codeBlock
+    }
+    
     let id: String
     let attributedString: AttributedString
-    let isBlockquote: Bool
+    let type: ComponentType
 }
 
 protocol AttributedStringBuilderProtocol {