Render pills in RTE (#1874)

* for now this can only work locally

* works

* added a test

* updated RTE

* revert package

* pr suggestion

* reverting package versions

* better naming

ElementX/Sources/Other/HTMLParsing/AttributedStringBuilder.swift

@@ -220,15 +220,15 @@ struct AttributedStringBuilder: AttributedStringBuilderProtocol {
         }
     }
     
-    private func addAllUsersMention(_ attributedString: NSMutableAttributedString) {
+    func addAllUsersMention(_ attributedString: NSMutableAttributedString) {
         MatrixEntityRegex.allUsersRegex.matches(in: attributedString.string, options: []).forEach { match in
-            if attributedString.attribute(.link, at: 0, longestEffectiveRange: nil, in: match.range) == nil {
+            if attributedString.attribute(.link, at: 0, longestEffectiveRange: nil, in: match.range) as? URL == nil {
                 attributedString.addAttribute(.MatrixAllUsersMention, value: true, range: match.range)
             }
         }
     }
     
-    private func detectPermalinks(_ attributedString: NSMutableAttributedString) {
+    func detectPermalinks(_ attributedString: NSMutableAttributedString) {
         attributedString.enumerateAttribute(.link, in: .init(location: 0, length: attributedString.length), options: []) { value, range, _ in
             if value != nil {
                 if let url = value as? URL {

ElementX/Sources/Other/Pills/MentionBuilder.swift

@@ -37,7 +37,7 @@ struct MentionBuilder: MentionBuilderProtocol {
             return
         }
         
-        var attachmentAttributes: [NSAttributedString.Key: Any] = [.link: url, .MatrixUserID: userID]
+        var attachmentAttributes: [NSAttributedString.Key: Any] = [.link: url, .MatrixUserID: userID, .font: font]
         if let blockquote {
             // mentions can be in blockquotes, so if the replaced string was in one, we keep the attribute
             attachmentAttributes[.MatrixBlockquote] = blockquote
@@ -61,7 +61,7 @@ struct MentionBuilder: MentionBuilderProtocol {
             return
         }
         
-        var attachmentAttributes: [NSAttributedString.Key: Any] = [:]
+        var attachmentAttributes: [NSAttributedString.Key: Any] = [.font: font]
         if let blockquote {
             // mentions can be in blockquotes, so if the replaced string was in one, we keep the attribute
             attachmentAttributes[.MatrixBlockquote] = blockquote

ElementX/Sources/Other/Pills/MessageText.swift

@@ -16,7 +16,7 @@
 
 import SwiftUI
 
-final class MessageTextView: UITextView {
+final class MessageTextView: UITextView, PillAttachmentViewProviderDelegate {
     var roomContext: RoomScreenViewModel.Context?
     var updateClosure: (() -> Void)?
     
@@ -44,6 +44,10 @@ final class MessageTextView: UITextView {
         invalidateTextAttachmentsDisplay(update: false)
         super.layoutSubviews()
     }
+    
+    func registerPillView(_ pillView: UIView) {
+        // No need to be implemented in this view
+    }
 }
 
 struct MessageText: UIViewRepresentable {

ElementX/Sources/Other/Pills/PillAttachmentViewProvider.swift

@@ -18,8 +18,17 @@ import SwiftUI
 import SwiftUIIntrospect
 import UIKit
 
+import WysiwygComposer
+
+protocol PillAttachmentViewProviderDelegate: AnyObject {
+    var roomContext: RoomScreenViewModel.Context? { get }
+    
+    func registerPillView(_ pillView: UIView)
+    func invalidateTextAttachmentsDisplay(update: Bool)
+}
+
 final class PillAttachmentViewProvider: NSTextAttachmentViewProvider {
-    private weak var messageTextView: MessageTextView?
+    private weak var delegate: PillAttachmentViewProviderDelegate?
     
     // MARK: - Override
     
@@ -27,7 +36,7 @@ final class PillAttachmentViewProvider: NSTextAttachmentViewProvider {
         super.init(textAttachment: textAttachment, parentView: parentView, textLayoutManager: textLayoutManager, location: location)
 
         // Keep a reference to the parent text view for size adjustments and pills flushing.
-        messageTextView = parentView?.superview as? MessageTextView
+        delegate = parentView?.superview as? PillAttachmentViewProviderDelegate
         tracksTextAttachmentViewBounds = true
     }
     
@@ -46,7 +55,7 @@ final class PillAttachmentViewProvider: NSTextAttachmentViewProvider {
             // The mock viewModel simulates the loading logic for testing purposes
             context = PillContext.mock(type: .loadUser(isOwn: false))
             imageProvider = MockMediaProvider()
-        } else if let roomContext = messageTextView?.roomContext {
+        } else if let roomContext = delegate?.roomContext {
             context = PillContext(roomContext: roomContext, data: textAttachmentData)
             imageProvider = roomContext.imageProvider
         } else {
@@ -55,12 +64,34 @@ final class PillAttachmentViewProvider: NSTextAttachmentViewProvider {
         }
         
         let view = PillView(imageProvider: imageProvider, context: context) { [weak self] in
-            self?.messageTextView?.invalidateTextAttachmentsDisplay(update: true)
+            self?.delegate?.invalidateTextAttachmentsDisplay(update: true)
         }
         let controller = UIHostingController(rootView: view)
         controller.view.backgroundColor = .clear
         // This allows the text view to handle it as a link
         controller.view.isUserInteractionEnabled = false
         self.view = controller.view
+        delegate?.registerPillView(controller.view)
     }
 }
+
+final class ComposerMentionDisplayHelper: MentionDisplayHelper {
+    weak var roomContext: RoomScreenViewModel.Context?
+
+    init(roomContext: RoomScreenViewModel.Context) {
+        self.roomContext = roomContext
+    }
+    
+    @MainActor
+    static var mock: Self {
+        Self(roomContext: RoomScreenViewModel.mock.context)
+    }
+}
+
+extension WysiwygTextView: PillAttachmentViewProviderDelegate {
+    var roomContext: RoomScreenViewModel.Context? {
+        (mentionDisplayHelper as? ComposerMentionDisplayHelper)?.roomContext
+    }
+    
+    func invalidateTextAttachmentsDisplay(update: Bool) { }
+}

ElementX/Sources/Other/Pills/PillTextAttachmentData.swift

@@ -17,7 +17,7 @@
 import Foundation
 import UIKit
 
-enum PillType: Codable {
+enum PillType: Codable, Equatable {
     /// A pill that mentions a user
     case user(userID: String)
     /// A pill that mentions all users in a room
@@ -29,7 +29,7 @@ struct PillTextAttachmentData {
 
     /// Pill type
     let type: PillType
-
+    
     /// Font for the display name
     let font: UIFont
 }

ElementX/Sources/Screens/ComposerToolbar/ComposerToolbarViewModel.swift

@@ -40,11 +40,11 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
 
     private var currentLinkData: WysiwygLinkData?
 
-    init(wysiwygViewModel: WysiwygComposerViewModel, completionSuggestionService: CompletionSuggestionServiceProtocol, mediaProvider: MediaProviderProtocol, appSettings: AppSettings) {
+    init(wysiwygViewModel: WysiwygComposerViewModel, completionSuggestionService: CompletionSuggestionServiceProtocol, mediaProvider: MediaProviderProtocol, appSettings: AppSettings, mentionDisplayHelper: MentionDisplayHelper) {
         self.wysiwygViewModel = wysiwygViewModel
         self.completionSuggestionService = completionSuggestionService
         self.appSettings = appSettings
-
+        
         super.init(initialViewState: ComposerToolbarViewState(areSuggestionsEnabled: completionSuggestionService.areSuggestionsEnabled, bindings: .init()), imageProvider: mediaProvider)
 
         context.$viewState
@@ -84,6 +84,10 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
         completionSuggestionService.suggestionsPublisher
             .weakAssign(to: \.state.suggestions, on: self)
             .store(in: &cancellables)
+        
+        if appSettings.mentionsEnabled {
+            setupMentionsHandling(mentionDisplayHelper: mentionDisplayHelper)
+        }
     }
 
     // MARK: - Public
@@ -155,6 +159,27 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
 
     // MARK: - Private
     
+    private func setupMentionsHandling(mentionDisplayHelper: MentionDisplayHelper) {
+        wysiwygViewModel.textView.mentionDisplayHelper = mentionDisplayHelper
+        
+        let attributedStringBuilder = AttributedStringBuilder(cacheKey: "Composer", permalinkBaseURL: appSettings.permalinkBaseURL, mentionBuilder: MentionBuilder(mentionsEnabled: appSettings.mentionsEnabled))
+        
+        wysiwygViewModel.mentionReplacer = ComposerMentionReplacer { urlString, string in
+            let attributedString: NSMutableAttributedString
+            // This is the all room mention case
+            if urlString == "#" {
+                attributedString = NSMutableAttributedString(string: string, attributes: [.MatrixAllUsersMention: true])
+            } else {
+                attributedString = NSMutableAttributedString(string: string, attributes: [.link: URL(string: urlString) as Any])
+            }
+            attributedStringBuilder.detectPermalinks(attributedString)
+            
+            // In RTE mentions don't need to be handled as links
+            attributedString.removeAttribute(.link, range: NSRange(location: 0, length: attributedString.length))
+            return attributedString
+        }
+    }
+    
     private func handleSuggestion(_ suggestion: SuggestionItem) {
         switch suggestion {
         case let .user(item):
@@ -177,6 +202,7 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
     }
 
     private func set(text: String) {
+        wysiwygViewModel.textView.flushPills()
         wysiwygViewModel.setHtmlContent(text)
     }
 
@@ -293,3 +319,25 @@ private extension LinkAction {
         return url
     }
 }
+
+private final class ComposerMentionReplacer: MentionReplacer {
+    let replacementForMentionClosure: (_ urlString: String, _ text: String) -> (NSAttributedString?)
+    
+    init(replacementForMentionClosure: @escaping (String, String) -> (NSAttributedString?)) {
+        self.replacementForMentionClosure = replacementForMentionClosure
+    }
+    
+    // There is no internal Markdown to RTE switch implemented yet in the room so this one is never called
+    func postProcessMarkdown(in attributedString: NSAttributedString) -> NSAttributedString {
+        attributedString
+    }
+    
+    // There is no internal RTE to Markdown switch implemented yet in the room so this one is never called
+    func restoreMarkdown(in attributedString: NSAttributedString) -> String {
+        attributedString.string
+    }
+    
+    func replacementForMention(_ url: String, text: String) -> NSAttributedString? {
+        replacementForMentionClosure(url, text)
+    }
+}

ElementX/Sources/Screens/ComposerToolbar/View/ComposerToolbar.swift

@@ -197,7 +197,8 @@ struct ComposerToolbar_Previews: PreviewProvider, TestablePreview {
     static let composerViewModel = ComposerToolbarViewModel(wysiwygViewModel: wysiwygViewModel,
                                                             completionSuggestionService: CompletionSuggestionServiceMock(configuration: .init(suggestions: suggestions)),
                                                             mediaProvider: MockMediaProvider(),
-                                                            appSettings: ServiceLocator.shared.settings)
+                                                            appSettings: ServiceLocator.shared.settings,
+                                                            mentionDisplayHelper: ComposerMentionDisplayHelper.mock)
     static let suggestions: [SuggestionItem] = [.user(item: MentionSuggestionItem(id: "@user_mention_1:matrix.org", displayName: "User 1", avatarURL: nil)),
                                                 .user(item: MentionSuggestionItem(id: "@user_mention_2:matrix.org", displayName: "User 2", avatarURL: URL.documentsDirectory))]
     
@@ -223,7 +224,8 @@ extension ComposerToolbar {
         let composerViewModel = ComposerToolbarViewModel(wysiwygViewModel: wysiwygViewModel,
                                                          completionSuggestionService: CompletionSuggestionServiceMock(configuration: .init()),
                                                          mediaProvider: MockMediaProvider(),
-                                                         appSettings: ServiceLocator.shared.settings)
+                                                         appSettings: ServiceLocator.shared.settings,
+                                                         mentionDisplayHelper: ComposerMentionDisplayHelper.mock)
         return ComposerToolbar(context: composerViewModel.context,
                                wysiwygViewModel: wysiwygViewModel,
                                keyCommandHandler: { _ in false })

ElementX/Sources/Screens/ComposerToolbar/View/RoomAttachmentPicker.swift

@@ -118,7 +118,8 @@ struct RoomAttachmentPicker_Previews: PreviewProvider, TestablePreview {
     static let viewModel = ComposerToolbarViewModel(wysiwygViewModel: WysiwygComposerViewModel(),
                                                     completionSuggestionService: CompletionSuggestionServiceMock(configuration: .init()),
                                                     mediaProvider: MockMediaProvider(),
-                                                    appSettings: ServiceLocator.shared.settings)
+                                                    appSettings: ServiceLocator.shared.settings,
+                                                    mentionDisplayHelper: ComposerMentionDisplayHelper.mock)
 
     static var previews: some View {
         RoomAttachmentPicker(context: viewModel.context)

ElementX/Sources/Screens/RoomScreen/RoomScreenCoordinator.swift

@@ -71,7 +71,8 @@ final class RoomScreenCoordinator: CoordinatorProtocol {
         composerViewModel = ComposerToolbarViewModel(wysiwygViewModel: wysiwygViewModel,
                                                      completionSuggestionService: parameters.completionSuggestionService,
                                                      mediaProvider: parameters.mediaProvider,
-                                                     appSettings: parameters.appSettings)
+                                                     appSettings: parameters.appSettings,
+                                                     mentionDisplayHelper: ComposerMentionDisplayHelper(roomContext: viewModel.context))
     }
     
     // MARK: - Public