TF-2475 Handle format style rich text in composer

lib/features/composer/presentation/composer_controller.dart

@@ -454,8 +454,7 @@ class ComposerController extends BaseController with DragDropFileMixin {
     richTextMobileTabletController?.richTextController.onCreateHTMLEditor(
       editorApi,
       onEnterKeyDown: _onEnterKeyDown,
-      context: context,
-      onFocus: _onEditorFocusOnMobile,
+      onFocus: () => _onEditorFocusOnMobile(context),
       onChangeCursor: (coordinates) {
         _onChangeCursorOnMobile(coordinates, context);
       },
@@ -1319,7 +1318,6 @@ class ComposerController extends BaseController with DragDropFileMixin {
     log('ComposerController::clearFocus:');
     if (PlatformInfo.isMobile) {
       htmlEditorApi?.unfocus();
-      KeyboardUtils.hideSystemKeyboardMobile();
     }
     FocusScope.of(context).unfocus();
   }
@@ -1508,7 +1506,7 @@ class ComposerController extends BaseController with DragDropFileMixin {
       }
       _closeSuggestionBox();
       if (PlatformInfo.isMobile) {
-        htmlEditorApi?.unfocus();
+        richTextMobileTabletController?.richTextController.hideRichTextView();
       }
     } else {
       switch(prefixEmailAddress) {
@@ -1647,7 +1645,13 @@ class ComposerController extends BaseController with DragDropFileMixin {
     _closeComposerAction();
   }
 
-  void _onEditorFocusOnMobile() {
+  Future<void> _onEditorFocusOnMobile(BuildContext context) async {
+    if (PlatformInfo.isAndroid) {
+      FocusScope.of(context).unfocus();
+      await Future.delayed(
+        const Duration(milliseconds: 300),
+        richTextMobileTabletController?.richTextController.showDeviceKeyboard);
+    }
     _collapseAllRecipient();
     _autoCreateEmailTag();
   }

lib/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart

@@ -61,12 +61,12 @@ class RichTextMobileTabletController extends BaseRichTextController {
     }
 
     if (context.mounted) {
-      richTextController?.showRichTextBottomSheet(
+      richTextController?.showFormatOptionBottomSheet(
         context: context,
-        titleFormatBottomSheet: AppLocalizations.of(context).titleFormat,
-        titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
-        titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
-        titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
+        formatLabel: AppLocalizations.of(context).titleFormat,
+        quickStyleLabel: AppLocalizations.of(context).titleQuickStyles,
+        foregroundLabel: AppLocalizations.of(context).titleForeground,
+        backgroundLabel: AppLocalizations.of(context).titleBackground,
       );
     }
   }

lib/features/composer/presentation/view/mobile/tablet_container_view.dart

@@ -1,6 +1,7 @@
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_portal/flutter_portal.dart';
 import 'package:get/get.dart';
 import 'package:rich_text_composer/rich_text_composer.dart';
 import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
@@ -40,45 +41,48 @@ class TabletContainerView extends StatelessWidget {
         }
       },
       canPop: false,
-      child: GestureDetector(
-        onTap: onClearFocusAction,
-        child: Scaffold(
-          backgroundColor: TabletContainerViewStyle.outSideBackgroundColor,
-          body: LayoutBuilder(builder: (context, constraints) {
-              return KeyboardRichText(
-                richTextController: keyboardRichTextController,
-                keyBroadToolbar: RichTextKeyboardToolBar(
-                  backgroundKeyboardToolBarColor: TabletContainerViewStyle.keyboardToolbarBackgroundColor,
-                  isLandScapeMode: _responsiveUtils.isLandscapeMobile(context),
-                  insertAttachment: onAttachFileAction,
-                  insertImage: onInsertImageAction != null
-                    ? () => onInsertImageAction!(constraints)
-                    : null,
+      child: Portal(
+        child: GestureDetector(
+          onTap: onClearFocusAction,
+          child: Scaffold(
+            backgroundColor: TabletContainerViewStyle.outSideBackgroundColor,
+            body: SafeArea(
+              child: LayoutBuilder(builder: (context, constraints) {
+                return KeyboardRichText(
                   richTextController: keyboardRichTextController,
-                  titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
-                  titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
-                  titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
-                  titleFormatBottomSheet: AppLocalizations.of(context).titleFormat,
-                  titleBack: AppLocalizations.of(context).format,
-                ),
-                paddingChild: EdgeInsets.zero,
-                child: Center(
-                  child: Card(
-                    elevation: TabletContainerViewStyle.elevation,
-                    margin: TabletContainerViewStyle.getMargin(context, _responsiveUtils),
-                    shape: const RoundedRectangleBorder(
-                      borderRadius: BorderRadius.all(Radius.circular(TabletContainerViewStyle.radius))
-                    ),
-                    clipBehavior: Clip.antiAlias,
-                    child: Container(
-                      color: TabletContainerViewStyle.backgroundColor,
-                      width: TabletContainerViewStyle.getWidth(context, _responsiveUtils),
-                      child: childBuilder.call(context, constraints)
+                  keyBroadToolbar: RichTextKeyboardToolBar(
+                    rootContext: context,
+                    backgroundKeyboardToolBarColor: TabletContainerViewStyle.keyboardToolbarBackgroundColor,
+                    insertAttachment: onAttachFileAction,
+                    insertImage: onInsertImageAction != null
+                        ? () => onInsertImageAction!(constraints)
+                      : null,
+                    richTextController: keyboardRichTextController,
+                    quickStyleLabel: AppLocalizations.of(context).titleQuickStyles,
+                    backgroundLabel: AppLocalizations.of(context).titleBackground,
+                    foregroundLabel: AppLocalizations.of(context).titleForeground,
+                    formatLabel: AppLocalizations.of(context).titleFormat,
+                    titleBack: AppLocalizations.of(context).format,
+                  ),
+                  child: Center(
+                    child: Card(
+                      elevation: TabletContainerViewStyle.elevation,
+                      margin: TabletContainerViewStyle.getMargin(context, _responsiveUtils),
+                      shape: const RoundedRectangleBorder(
+                        borderRadius: BorderRadius.all(Radius.circular(TabletContainerViewStyle.radius))
+                      ),
+                      clipBehavior: Clip.antiAlias,
+                      child: Container(
+                        color: TabletContainerViewStyle.backgroundColor,
+                        width: TabletContainerViewStyle.getWidth(context, _responsiveUtils),
+                        child: childBuilder.call(context, constraints)
+                      ),
                     ),
                   ),
-                ),
-              );
-          })
+                );
+              }),
+            )
+          ),
         ),
       )
     );