Add support for <details> and <summary> tags (#6077)

ElementX/Sources/Other/Extensions/AttributedString.swift

@@ -17,10 +17,11 @@ nonisolated extension AttributedString {
     var formattedComponents: [AttributedStringBuilderComponent] {
         var components = [AttributedStringBuilderComponent]()
         
-        for run in runs[\.blockquote, \.codeBlock] {
+        for run in runs[\.blockquote, \.codeBlock, \.details] {
             let isBlockquote = run.0 != nil
             let isCodeBlock = run.1 != nil
-            var attributedString = AttributedString(self[run.2])
+            let details = run.2
+            var attributedString = AttributedString(self[run.3])
             
             // Remove trailing new lines if any
             if attributedString.characters.last?.isNewline ?? false,
@@ -28,12 +29,14 @@ nonisolated extension AttributedString {
                 attributedString.removeSubrange(range)
             }
             
-            let componentType: AttributedStringBuilderComponent.ComponentType = switch (isBlockquote, isCodeBlock) {
+            let componentType: AttributedStringBuilderComponent.ComponentType = switch (details, isBlockquote, isCodeBlock) {
-            case (true, _):
+            case (.some(let summary), _, _):
+                .details(summary: summary)
+            case (_, true, _):
                 .blockquote
-            case (false, true):
+            case (_, false, true):
                 .codeBlock
-            case (false, false):
+            case (_, false, false):
                 .plainText
             }
             

ElementX/Sources/Other/HTMLParsing/AttributedStringBuilder.swift

@@ -24,6 +24,7 @@ nonisolated protocol MentionBuilderProtocol: Sendable {
 
 nonisolated extension NSAttributedString.Key {
     static let MatrixBlockquote: NSAttributedString.Key = .init(rawValue: BlockquoteAttribute.name)
+    static let MatrixDetails: NSAttributedString.Key = .init(rawValue: DetailsAttribute.name)
     static let MatrixUserID: NSAttributedString.Key = .init(rawValue: UserIDAttribute.name)
     static let MatrixUserDisplayName: NSAttributedString.Key = .init(rawValue: UserDisplayNameAttribute.name)
     static let MatrixRoomDisplayName: NSAttributedString.Key = .init(rawValue: RoomDisplayNameAttribute.name)
@@ -203,6 +204,22 @@ nonisolated struct AttributedStringBuilder: AttributedStringBuilderProtocol {
                 content = attributedString(element: childElement, documentBody: documentBody, preserveFormatting: preserveFormatting, listTag: listTag, listIndex: &childIndex, indentLevel: indentLevel)
                 content.addAttribute(.MatrixBlockquote, value: true, range: NSRange(location: 0, length: content.length))
                 
+            case "details":
+                // Pull the summary out of the tree so that it isn't rendered inline with the content,
+                // it is used as the title of the collapsed component instead.
+                let summaryElement = childElement.getChildNodes()
+                    .lazy
+                    .compactMap { $0 as? Element }
+                    .first { $0.tagName().lowercased() == "summary" }
+                let summary = summaryElement.flatMap { try? $0.text() } ?? ""
+                try? summaryElement?.remove()
+                
+                content = attributedString(element: childElement, documentBody: documentBody, preserveFormatting: preserveFormatting, listTag: listTag, listIndex: &childIndex, indentLevel: indentLevel)
+                
+                // Browsers fall back to a default title when the summary is missing, match them.
+                let title = summary.isEmpty ? L10n.a11yViewDetails : summary
+                content.addAttribute(.MatrixDetails, value: title, range: NSRange(location: 0, length: content.length))
+                
             case "code", "pre":
                 let isCodeBlock = tag == "pre"
                 

ElementX/Sources/Other/HTMLParsing/AttributedStringBuilderProtocol.swift

@@ -9,10 +9,11 @@
 import Foundation
 
 nonisolated struct AttributedStringBuilderComponent: Hashable, Identifiable {
-    enum ComponentType {
+    enum ComponentType: Hashable {
         case plainText
         case blockquote
         case codeBlock
+        case details(summary: String)
     }
     
     /// Identifier for the `Identifiable` conformance, allows edits to the `FormattedBodyText` to animate seamlessly

ElementX/Sources/Other/HTMLParsing/ElementXAttributeScope.swift

@@ -8,11 +8,6 @@
 
 import Foundation
 
-enum BlockquoteAttribute: AttributedStringKey {
-    typealias Value = Bool
-    static let name = "MXBlockquoteAttribute"
-}
-
 enum UserIDAttribute: AttributedStringKey {
     typealias Value = String
     static let name = "MXUserIDAttribute"
@@ -65,6 +60,17 @@ enum AllUsersMentionAttribute: AttributedStringKey {
     static let name = "MXAllUsersMentionAttribute"
 }
 
+enum BlockquoteAttribute: AttributedStringKey {
+    typealias Value = Bool
+    static let name = "MXBlockquoteAttribute"
+}
+
+/// Marks the content of a `<details>` element, carrying its `<summary>` as the value.
+enum DetailsAttribute: AttributedStringKey {
+    typealias Value = String
+    static let name = "MXDetailsAttribute"
+}
+
 enum CodeBlockAttribute: AttributedStringKey {
     typealias Value = Bool
     static let name = "MXCodeBlockAttribute"
@@ -78,6 +84,7 @@ enum InlineCodeAttribute: AttributedStringKey {
 nonisolated extension AttributeScopes {
     struct ElementXAttributes: AttributeScope {
         let blockquote: BlockquoteAttribute
+        let details: DetailsAttribute
         
         let userID: UserIDAttribute
         // periphery:ignore - required to make NSAttributedString to AttributedString conversion even if not used directly

ElementX/Sources/Other/HTMLParsing/HTMLFixtures.swift

@@ -19,6 +19,7 @@ nonisolated enum HTMLFixtures: String, CaseIterable {
     case wideCodeBlock
     case unorderedList
     case orderedList
+    case details
     
     var rawValue: String {
         switch self {
@@ -123,6 +124,13 @@ nonisolated enum HTMLFixtures: String, CaseIterable {
             <li>Skittles</li>
             </ol>
             """
+        case .details:
+            """
+            Text before the details\
+            <details><summary>Expand me</summary><p>Hidden <b>content</b> with a <a href="https://www.matrix.org">link</a> in it.</p></details>\
+            <details><p>These details have no summary.</p></details>\
+            Text after the details
+            """
         }
     }
 }

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

@@ -6,6 +6,7 @@
 // Please see LICENSE files in the repository root for full details.
 //
 
+import Compound
 import SwiftUI
 
 struct FormattedBodyText: View {
@@ -50,10 +51,15 @@ struct FormattedBodyText: View {
                   boostFontSize: boostFontSize)
     }
     
+    /// Details components contain a control that VoiceOver needs to reach, so their children can't be merged away.
+    private var containsDetails: Bool {
+        attributedString.runs[\.details].contains { $0.0 != nil }
+    }
+    
     var body: some View {
         layout
             .tint(.compound.textLinkExternal)
-            .accessibilityElement(children: .ignore)
+            .accessibilityElement(children: containsDetails ? .contain : .ignore)
             .accessibilityLabel(Text(attributedString))
     }
     
@@ -90,6 +96,10 @@ struct FormattedBodyText: View {
                                 UIPasteboard.general.string = component.attributedString.string
                             }
                         }
+                case .details(let summary):
+                    DetailsView(summary: summary, attributedString: component.attributedString)
+                        .padding(.horizontal, 4)
+                        .timelineBubbleLayoutSize(.natural)
                 case .plainText:
                     MessageText(attributedString: component.attributedString,
                                 trailingReservedSize: index == lastPlainTextIndex ? trailingReservedSize : .zero)
@@ -111,7 +121,7 @@ struct FormattedBodyText: View {
                     CodeBlockView(attributedString: component.attributedString, mode: .layout)
                         .timelineBubbleLayoutSize(.bubbleWidth(mode: .layout))
                         .hidden()
-                case .plainText:
+                case .details, .plainText:
                     EmptyView()
                 }
             }
@@ -157,6 +167,34 @@ struct FormattedBodyText: View {
         }
     }
     
+    /// The view used to render a `<details>` component, collapsing its content behind its `<summary>`.
+    private struct DetailsView: View {
+        let summary: String
+        let attributedString: AttributedString
+        
+        @State private var isExpanded = false
+        
+        var body: some View {
+            VStack(alignment: .leading, spacing: 4) {
+                Button { isExpanded.toggle() } label: {
+                    HStack(alignment: .center, spacing: 4) {
+                        CompoundIcon(\.chevronRight, size: .xSmall, relativeTo: .compound.bodyLG)
+                            .rotationEffect(.degrees(isExpanded ? 90 : 0))
+                        Text(summary)
+                    }
+                    .font(.compound.bodyLGSemibold)
+                    .foregroundStyle(.compound.textPrimary)
+                }
+                .buttonStyle(.plain)
+                
+                if isExpanded {
+                    MessageText(attributedString: attributedString)
+                        .fixedSize(horizontal: false, vertical: true)
+                }
+            }
+        }
+    }
+    
     /// The view used to render a code block component. It can be configured in one of 2 modes:
     /// - `.layout`: The view is given it's natural size to be used for layout calculations.
     /// - `.rendering`: The view has a greedy width that, in combination with the custom layout,
@@ -221,6 +259,7 @@ struct FormattedBodyText_Previews: PreviewProvider, TestablePreview {
         <blockquote>A</blockquote>
         <pre><code>B</code></pre>
         <p>C</p>
+        <details><summary>D</summary><p>E</p></details>
         """
         
         if let attributedString = attributedStringBuilder.fromHTML(html) {

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

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

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

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

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.details-iPhone-en-GB.png

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

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.details-iPhone-pseudo.png

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

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

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2eb1583f31787e8d2384774a587c316f5192c5992e77063603f503441326e791
+oid sha256:aab3c9f39d91466df6b84cffc9f2086eeac62173ecc09783d2a18d35a7f7c757
-size 16598
+size 20261

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

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2eb1583f31787e8d2384774a587c316f5192c5992e77063603f503441326e791
+oid sha256:aab3c9f39d91466df6b84cffc9f2086eeac62173ecc09783d2a18d35a7f7c757
-size 16598
+size 20261

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.singleColumnComponents-iPhone-en-GB.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:18dc7d51d592ac2578889091dd0fca2f8058e43557834092e8591994519d85b3
+oid sha256:cc3f47134da1c0cd92311fd9949189c1388403eaf747f1e23af32dfa0ea389fa
-size 9669
+size 11667

PreviewTests/Sources/__Snapshots__/PreviewTests/formattedBodyText.singleColumnComponents-iPhone-pseudo.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:18dc7d51d592ac2578889091dd0fca2f8058e43557834092e8591994519d85b3
+oid sha256:cc3f47134da1c0cd92311fd9949189c1388403eaf747f1e23af32dfa0ea389fa
-size 9669
+size 11667

UnitTests/Sources/AttributedStringBuilderTests.swift

@@ -242,6 +242,31 @@ struct AttributedStringBuilderTests {
         #expect(foundLink)
     }
     
+    @Test
+    func detailsAndSummary() throws {
+        let htmlString = "Before<details><summary>Expand me</summary><p>Hidden content</p></details>After"
+        
+        let attributedString = try #require(attributedStringBuilder.fromHTML(htmlString), "Could not build the attributed string")
+        
+        #expect(String(attributedString.characters) == "BeforeHidden content\nAfter")
+        
+        let components = attributedString.formattedComponents
+        
+        #expect(components.count == 3)
+        #expect(components.map(\.type) == [.plainText, .details(summary: "Expand me"), .plainText])
+        #expect(components[1].attributedString.string == "Hidden content")
+    }
+    
+    @Test
+    func detailsWithoutSummary() throws {
+        let htmlString = "<details><p>Content</p></details>"
+        
+        let attributedString = try #require(attributedStringBuilder.fromHTML(htmlString), "Could not build the attributed string")
+        
+        #expect(String(attributedString.characters) == "Content")
+        #expect(attributedString.formattedComponents.map(\.type) == [.details(summary: L10n.a11yViewDetails)])
+    }
+    
     @Test
     func singleBlockquote() throws {
         let htmlString = "<blockquote>Blockquote</blockquote><p>Another paragraph</p>"