Seamlessly switch for the RichTextEditor based message composer to the… (#2753)

* Seemlesly switch for the RichTextEditor based message composer to the plain one depending on whether formatting options are enabled or not.

* Address PR comments

* Fixes #2803 - Add extra padding at the bottom of the composer suggestions list

* Update preview test snapshots

* Update UI test snapshots

ElementX/Sources/Application/AppSettings.swift

@@ -36,7 +36,6 @@ final class AppSettings {
         case pusherProfileTag
         case logLevel
         case viewSourceEnabled
-        case richTextEditorEnabled
         case appAppearance
         case sharePresence
         case hideUnreadMessagesBadge
@@ -234,9 +233,6 @@ final class AppSettings {
     @UserPreference(key: UserDefaultsKeys.viewSourceEnabled, defaultValue: false, storageType: .userDefaults(store))
     var viewSourceEnabled
 
-    @UserPreference(key: UserDefaultsKeys.richTextEditorEnabled, defaultValue: true, storageType: .userDefaults(store))
-    var richTextEditorEnabled
-    
     // MARK: - Element Call
     
     @UserPreference(key: UserDefaultsKeys.elementCallBaseURL, defaultValue: "https://call.element.io", storageType: .userDefaults(store))

ElementX/Sources/Screens/RoomScreen/ComposerToolbar/ComposerToolbarModels.swift

@@ -60,6 +60,7 @@ enum ComposerToolbarViewAction {
     case voiceMessage(ComposerToolbarVoiceMessageAction)
     
     case plainComposerTextChanged
+    case didToggleFormattingOptions
 }
 
 enum ComposerAttachmentType {
@@ -95,7 +96,7 @@ struct ComposerToolbarViewState: BindableState {
         case .previewVoiceMessage:
             return true
         default:
-            if ServiceLocator.shared.settings.richTextEditorEnabled {
+            if bindings.composerFormattingEnabled {
                 return !composerEmpty
             } else {
                 return !bindings.plainComposerText.string.isEmpty
@@ -108,7 +109,7 @@ struct ComposerToolbarViewState: BindableState {
             return false
         }
         
-        if ServiceLocator.shared.settings.richTextEditorEnabled {
+        if bindings.composerFormattingEnabled {
             return composerEmpty
         } else {
             return bindings.plainComposerText.string.isEmpty
@@ -128,7 +129,7 @@ struct ComposerToolbarViewState: BindableState {
 struct ComposerToolbarViewStateBindings {
     var plainComposerText: NSAttributedString = .init(string: "")
     var composerFocused = false
-    var composerActionsEnabled = false
+    var composerFormattingEnabled = false
     var composerExpanded = false
     var formatItems: [FormatItem] = .init()
     var alertInfo: AlertInfo<UUID>?

ElementX/Sources/Screens/RoomScreen/ComposerToolbar/ComposerToolbarViewModel.swift

@@ -125,10 +125,9 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
             case .previewVoiceMessage:
                 actionsSubject.send(.voiceMessage(.send))
             default:
-                if ServiceLocator.shared.settings.richTextEditorEnabled {
+                if context.composerFormattingEnabled {
-                    let sendHTML = appSettings.richTextEditorEnabled
                     actionsSubject.send(.sendMessage(plain: wysiwygViewModel.content.markdown,
-                                                     html: sendHTML ? wysiwygViewModel.content.html : nil,
+                                                     html: wysiwygViewModel.content.html,
                                                      mode: state.composerMode,
                                                      intentionalMentions: wysiwygViewModel.getMentionsState().toIntentionalMentions()))
                 } else {
@@ -148,7 +147,7 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
         case .handlePasteOrDrop(let provider):
             actionsSubject.send(.handlePasteOrDrop(provider: provider))
         case .enableTextFormatting:
-            state.bindings.composerActionsEnabled = true
+            state.bindings.composerFormattingEnabled = true
             state.bindings.composerFocused = true
         case .composerAction(let action):
             if action == .link {
@@ -162,6 +161,15 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
             processVoiceMessageAction(voiceMessageAction)
         case .plainComposerTextChanged:
             completionSuggestionService.processTextMessage(state.bindings.plainComposerText.string)
+        case .didToggleFormattingOptions:
+            if context.composerFormattingEnabled {
+                DispatchQueue.main.async {
+                    self.wysiwygViewModel.textView.flushPills()
+                    self.wysiwygViewModel.setMarkdownContent(self.context.plainComposerText.string)
+                }
+            } else {
+                context.plainComposerText = NSAttributedString(string: wysiwygViewModel.attributedContent.text.string)
+            }
         }
     }
 
@@ -244,7 +252,7 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
     private func processVoiceMessageAction(_ action: ComposerToolbarVoiceMessageAction) {
         switch action {
         case .startRecording:
-            state.bindings.composerActionsEnabled = false
+            state.bindings.composerFormattingEnabled = false
             actionsSubject.send(.voiceMessage(.startRecording))
         case .stopRecording:
             actionsSubject.send(.voiceMessage(.stopRecording))
@@ -297,7 +305,7 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
                 return
             }
             
-            if appSettings.richTextEditorEnabled {
+            if context.composerFormattingEnabled {
                 wysiwygViewModel.setMention(url: url.absoluteString, name: item.displayName ?? item.id, mentionType: .user)
             } else {
                 let attributedString = NSMutableAttributedString(attributedString: state.bindings.plainComposerText)
@@ -305,7 +313,7 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
                 state.bindings.plainComposerText = attributedString
             }
         case .allUsers:
-            if appSettings.richTextEditorEnabled {
+            if context.composerFormattingEnabled {
                 wysiwygViewModel.setAtRoomMention()
             } else {
                 let attributedString = NSMutableAttributedString(attributedString: state.bindings.plainComposerText)
@@ -333,7 +341,7 @@ final class ComposerToolbarViewModel: ComposerToolbarViewModelType, ComposerTool
     }
 
     private func set(text: String) {
-        if ServiceLocator.shared.settings.richTextEditorEnabled {
+        if context.composerFormattingEnabled {
             wysiwygViewModel.textView.flushPills()
             
             wysiwygViewModel.setHtmlContent(text)

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

@@ -52,6 +52,7 @@ struct CompletionSuggestionView: View {
                     list()
                 }
             }
+            .padding(.bottom, Constants.listItemPadding)
         }
     }
 

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

@@ -34,7 +34,7 @@ struct ComposerToolbar: View {
         VStack(spacing: 8) {
             topBar
             
-            if context.composerActionsEnabled {
+            if context.composerFormattingEnabled {
                 if verticalSizeClass != .compact,
                    context.composerExpanded {
                     suggestionView
@@ -68,7 +68,7 @@ struct ComposerToolbar: View {
         topBarLayout {
             mainTopBarContent
             
-            if !context.composerActionsEnabled {
+            if !context.composerFormattingEnabled {
                 if context.viewState.isUploading {
                     ProgressView()
                         .scaledFrame(size: 44, relativeTo: .title)
@@ -106,7 +106,7 @@ struct ComposerToolbar: View {
     private var mainTopBarContent: some View {
         ZStack(alignment: .bottom) {
             topBarLayout {
-                if !context.composerActionsEnabled {
+                if !context.composerFormattingEnabled {
                     RoomAttachmentPicker(context: context)
                 }
                 messageComposer
@@ -122,7 +122,7 @@ struct ComposerToolbar: View {
     
     private var closeRTEButton: some View {
         Button {
-            context.composerActionsEnabled = false
+            context.composerFormattingEnabled = false
             context.composerExpanded = false
         } label: {
             Image(Asset.Images.closeRte.name)
@@ -158,7 +158,8 @@ struct ComposerToolbar: View {
         MessageComposer(plainComposerText: $context.plainComposerText,
                         composerView: composerView,
                         mode: context.viewState.composerMode,
-                        showResizeGrabber: context.viewState.bindings.composerActionsEnabled,
+                        composerFormattingEnabled: context.composerFormattingEnabled,
+                        showResizeGrabber: context.composerFormattingEnabled,
                         isExpanded: $context.composerExpanded) {
             context.send(viewAction: .sendMessage)
         } editAction: {
@@ -179,8 +180,8 @@ struct ComposerToolbar: View {
         }
         .environmentObject(context)
         .focused($composerFocused)
-        .padding(.leading, context.composerActionsEnabled ? 7 : 0)
+        .padding(.leading, context.composerFormattingEnabled ? 7 : 0)
-        .padding(.trailing, context.composerActionsEnabled ? 4 : 0)
+        .padding(.trailing, context.composerFormattingEnabled ? 4 : 0)
         .onTapGesture {
             guard !composerFocused else { return }
             composerFocused = true
@@ -196,6 +197,9 @@ struct ComposerToolbar: View {
         .onChange(of: context.plainComposerText) { _ in
             context.send(viewAction: .plainComposerTextChanged)
         }
+        .onChange(of: context.composerFormattingEnabled) { _ in
+            context.send(viewAction: .didToggleFormattingOptions)
+        }
         .onAppear {
             composerFocused = context.composerFocused
         }

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

@@ -25,6 +25,7 @@ struct MessageComposer: View {
     @Binding var plainComposerText: NSAttributedString
     let composerView: WysiwygComposerView
     let mode: RoomScreenComposerMode
+    let composerFormattingEnabled: Bool
     let showResizeGrabber: Bool
     @Binding var isExpanded: Bool
     let sendAction: () -> Void
@@ -68,7 +69,7 @@ struct MessageComposer: View {
         VStack(alignment: .leading, spacing: -6) {
             header
             
-            if ServiceLocator.shared.settings.richTextEditorEnabled {
+            if composerFormattingEnabled {
                 Color.clear
                     .overlay(alignment: .top) {
                         composerView
@@ -254,6 +255,7 @@ struct MessageComposer_Previews: PreviewProvider, TestablePreview {
         return MessageComposer(plainComposerText: .constant(content),
                                composerView: composerView,
                                mode: mode,
+                               composerFormattingEnabled: false,
                                showResizeGrabber: false,
                                isExpanded: .constant(false),
                                sendAction: { },

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

@@ -36,7 +36,8 @@ struct MessageComposerTextField: View {
     private var placeholderView: some View {
         if text.string.isEmpty {
             Text(placeholder)
-                .foregroundColor(.compound.textPlaceholder)
+                .font(Font(UIFont.preferredFont(forTextStyle: .body)))
+                .foregroundColor(.compound.textSecondary)
                 .accessibilityHidden(true)
         }
     }

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

@@ -37,15 +37,13 @@ struct RoomAttachmentPicker: View {
     
     var menuContent: some View {
         VStack(alignment: .leading, spacing: 0.0) {
-            if ServiceLocator.shared.settings.richTextEditorEnabled {
+            Button {
-                Button {
+                context.send(viewAction: .enableTextFormatting)
-                    context.send(viewAction: .enableTextFormatting)
+            } label: {
-                } label: {
+                Label(L10n.screenRoomAttachmentTextFormatting, icon: \.textFormatting)
-                    Label(L10n.screenRoomAttachmentTextFormatting, icon: \.textFormatting)
+                    .labelStyle(.menuSheet)
-                        .labelStyle(.menuSheet)
-                }
-                .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerTextFormatting)
             }
+            .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerTextFormatting)
             
             Button {
                 context.send(viewAction: .attach(.poll))

ElementX/Sources/Screens/RoomScreen/RoomScreenInteractionHandler.swift

@@ -272,18 +272,10 @@ class RoomScreenInteractionHandler {
     private func processEditMessageEvent(_ messageTimelineItem: EventBasedMessageTimelineItemProtocol) {
         let text: String
         switch messageTimelineItem.contentType {
-        case .text(let textItem):
+        case .text:
-            if ServiceLocator.shared.settings.richTextEditorEnabled, let formattedBodyHTMLString = textItem.formattedBodyHTMLString {
+            text = messageTimelineItem.body
-                text = formattedBodyHTMLString
+        case .emote:
-            } else {
+            text = "/me " + messageTimelineItem.body
-                text = messageTimelineItem.body
-            }
-        case .emote(let emoteItem):
-            if ServiceLocator.shared.settings.richTextEditorEnabled, let formattedBodyHTMLString = emoteItem.formattedBodyHTMLString {
-                text = "/me " + formattedBodyHTMLString
-            } else {
-                text = "/me " + messageTimelineItem.body
-            }
         default:
             text = messageTimelineItem.body
         }

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -35,9 +35,9 @@ struct RoomScreen: View {
             .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
             .safeAreaInset(edge: .bottom, spacing: 0) {
                 composerToolbar
-                    .padding(.bottom, composerToolbarContext.composerActionsEnabled ? 8 : 12)
+                    .padding(.bottom, composerToolbarContext.composerFormattingEnabled ? 8 : 12)
                     .background {
-                        if composerToolbarContext.composerActionsEnabled {
+                        if composerToolbarContext.composerFormattingEnabled {
                             RoundedRectangle(cornerRadius: 20)
                                 .stroke(Color.compound.borderInteractiveSecondary, lineWidth: 0.5)
                                 .ignoresSafeArea()
@@ -186,7 +186,7 @@ struct RoomScreen: View {
     }
     
     private var isNavigationBarHidden: Bool {
-        composerToolbarContext.composerActionsEnabled && composerToolbarContext.composerExpanded && UIDevice.current.userInterfaceIdiom == .pad
+        composerToolbarContext.composerFormattingEnabled && composerToolbarContext.composerExpanded && UIDevice.current.userInterfaceIdiom == .pad
     }
 }
 

ElementX/Sources/Screens/Settings/AvancedOptionsScreen/AdvancedSettingsScreenModels.swift

@@ -40,7 +40,6 @@ enum AdvancedSettingsScreenViewAction { }
 protocol AdvancedSettingsProtocol: AnyObject {
     var timelineStyle: TimelineStyle { get set }
     var viewSourceEnabled: Bool { get set }
-    var richTextEditorEnabled: Bool { get set }
     var appAppearance: AppAppearance { get set }
     var sharePresence: Bool { get set }
 }

ElementX/Sources/Screens/Settings/AvancedOptionsScreen/View/AdvancedSettingsScreen.swift

@@ -31,9 +31,6 @@ struct AdvancedSettingsScreen: View {
                         kind: .picker(selection: $context.timelineStyle,
                                       items: TimelineStyle.allCases.map { (title: $0.name, tag: $0) }))
                 
-                ListRow(label: .plain(title: L10n.commonRichTextEditor),
-                        kind: .toggle($context.richTextEditorEnabled))
-                
                 ListRow(label: .plain(title: L10n.actionViewSource),
                         kind: .toggle($context.viewSourceEnabled))
                 

ElementX/Sources/UITests/UITestsAppCoordinator.swift

@@ -487,9 +487,8 @@ class MockScreen: Identifiable {
             var sessionVerificationControllerProxy = SessionVerificationControllerProxyMock.configureMock(requestDelay: .seconds(5))
             let parameters = SessionVerificationScreenCoordinatorParameters(sessionVerificationControllerProxy: sessionVerificationControllerProxy)
             return SessionVerificationScreenCoordinator(parameters: parameters)
-        case .userSessionScreen, .userSessionScreenReply, .userSessionScreenRTE:
+        case .userSessionScreen, .userSessionScreenReply:
             let appSettings: AppSettings = ServiceLocator.shared.settings
-            appSettings.richTextEditorEnabled = id == .userSessionScreenRTE
             appSettings.hasRunIdentityConfirmationOnboarding = true
             appSettings.hasRunNotificationPermissionsOnboarding = true
             appSettings.analyticsConsentState = .optedOut

ElementX/Sources/UITests/UITestsScreenIdentifier.swift

@@ -53,7 +53,6 @@ enum UITestsScreenIdentifier: String {
     case templateScreen
     case userSessionScreen
     case userSessionScreenReply
-    case userSessionScreenRTE
 }
 
 extension UITestsScreenIdentifier: CustomStringConvertible {

UITests/Sources/UserSessionScreenTests.swift

@@ -45,20 +45,6 @@ class UserSessionScreenTests: XCTestCase {
         try await app.assertScreenshot(.userSessionScreenReply)
     }
 
-    func testUserSessionRTE() async throws {
-        let app = Application.launch(.userSessionScreenRTE)
-
-        app.buttons[A11yIdentifiers.homeScreen.roomName(firstRoomName)].tap()
-        XCTAssert(app.staticTexts[firstRoomName].waitForExistence(timeout: 5.0))
-        try await Task.sleep(for: .seconds(1))
-
-        app.buttons[A11yIdentifiers.roomScreen.composerToolbar.openComposeOptions].forceTap()
-        try await app.assertScreenshot(.userSessionScreenRTE, step: 1)
-
-        app.buttons[A11yIdentifiers.roomScreen.attachmentPickerTextFormatting].tap()
-        try await app.assertScreenshot(.userSessionScreenRTE, step: 2)
-    }
-    
     func testElementCall() async throws {
         let app = Application.launch(.userSessionScreen)
 

UnitTests/Sources/ComposerToolbarViewModelTests.swift

@@ -30,7 +30,6 @@ class ComposerToolbarViewModelTests: XCTestCase {
     override func setUp() {
         AppSettings.resetAllSettings()
         appSettings = AppSettings()
-        appSettings.richTextEditorEnabled = true
         ServiceLocator.shared.register(appSettings: appSettings)
         wysiwygViewModel = WysiwygComposerViewModel()
         completionSuggestionServiceMock = CompletionSuggestionServiceMock(configuration: .init())
@@ -39,6 +38,8 @@ class ComposerToolbarViewModelTests: XCTestCase {
                                              mediaProvider: MockMediaProvider(),
                                              appSettings: appSettings,
                                              mentionDisplayHelper: ComposerMentionDisplayHelper.mock)
+        
+        viewModel.context.composerFormattingEnabled = true
     }
     
     override func tearDown() {
@@ -94,7 +95,7 @@ class ComposerToolbarViewModelTests: XCTestCase {
         XCTAssertTrue(viewModel.state.bindings.composerFocused)
         viewModel.state.composerEmpty = false
         viewModel.process(viewAction: .sendMessage)
-        XCTAssertTrue(viewModel.state.bindings.composerActionsEnabled)
+        XCTAssertTrue(viewModel.state.bindings.composerFormattingEnabled)
     }
 
     func testAlertIsShownAfterLinkAction() {