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