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/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 {
-                    let sendHTML = appSettings.richTextEditorEnabled
+                if context.composerFormattingEnabled {
                     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(.trailing, context.composerActionsEnabled ? 4 : 0)
+        .padding(.leading, context.composerFormattingEnabled ? 7 : 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 {
-                    context.send(viewAction: .enableTextFormatting)
-                } label: {
-                    Label(L10n.screenRoomAttachmentTextFormatting, icon: \.textFormatting)
-                        .labelStyle(.menuSheet)
-                }
-                .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerTextFormatting)
+            Button {
+                context.send(viewAction: .enableTextFormatting)
+            } label: {
+                Label(L10n.screenRoomAttachmentTextFormatting, icon: \.textFormatting)
+                    .labelStyle(.menuSheet)
             }
+            .accessibilityIdentifier(A11yIdentifiers.roomScreen.attachmentPickerTextFormatting)
             
             Button {
                 context.send(viewAction: .attach(.poll))