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/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))