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(context),
-      onFocus: _onEditorFocusOnMobile,
       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,
+        formatLabel: AppLocalizations.of(context).titleFormat,
-        titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
+        quickStyleLabel: AppLocalizations.of(context).titleQuickStyles,
-        titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
+        foregroundLabel: AppLocalizations.of(context).titleForeground,
-        titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
+        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(
+      child: Portal(
-        onTap: onClearFocusAction,
+        child: GestureDetector(
-        child: Scaffold(
+          onTap: onClearFocusAction,
-          backgroundColor: TabletContainerViewStyle.outSideBackgroundColor,
+          child: Scaffold(
-          body: LayoutBuilder(builder: (context, constraints) {
+            backgroundColor: TabletContainerViewStyle.outSideBackgroundColor,
-              return KeyboardRichText(
+            body: SafeArea(
-                richTextController: keyboardRichTextController,
+              child: LayoutBuilder(builder: (context, constraints) {
-                keyBroadToolbar: RichTextKeyboardToolBar(
+                return KeyboardRichText(
-                  backgroundKeyboardToolBarColor: TabletContainerViewStyle.keyboardToolbarBackgroundColor,
-                  isLandScapeMode: _responsiveUtils.isLandscapeMobile(context),
-                  insertAttachment: onAttachFileAction,
-                  insertImage: onInsertImageAction != null
-                    ? () => onInsertImageAction!(constraints)
-                    : null,
                   richTextController: keyboardRichTextController,
-                  titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
+                  keyBroadToolbar: RichTextKeyboardToolBar(
-                  titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
+                    rootContext: context,
-                  titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
+                    backgroundKeyboardToolBarColor: TabletContainerViewStyle.keyboardToolbarBackgroundColor,
-                  titleFormatBottomSheet: AppLocalizations.of(context).titleFormat,
+                    insertAttachment: onAttachFileAction,
-                  titleBack: AppLocalizations.of(context).format,
+                    insertImage: onInsertImageAction != null
-                ),
+                        ? () => onInsertImageAction!(constraints)
-                paddingChild: EdgeInsets.zero,
+                      : null,
-                child: Center(
+                    richTextController: keyboardRichTextController,
-                  child: Card(
+                    quickStyleLabel: AppLocalizations.of(context).titleQuickStyles,
-                    elevation: TabletContainerViewStyle.elevation,
+                    backgroundLabel: AppLocalizations.of(context).titleBackground,
-                    margin: TabletContainerViewStyle.getMargin(context, _responsiveUtils),
+                    foregroundLabel: AppLocalizations.of(context).titleForeground,
-                    shape: const RoundedRectangleBorder(
+                    formatLabel: AppLocalizations.of(context).titleFormat,
-                      borderRadius: BorderRadius.all(Radius.circular(TabletContainerViewStyle.radius))
+                    titleBack: AppLocalizations.of(context).format,
-                    ),
+                  ),
-                    clipBehavior: Clip.antiAlias,
+                  child: Center(
-                    child: Container(
+                    child: Card(
-                      color: TabletContainerViewStyle.backgroundColor,
+                      elevation: TabletContainerViewStyle.elevation,
-                      width: TabletContainerViewStyle.getWidth(context, _responsiveUtils),
+                      margin: TabletContainerViewStyle.getMargin(context, _responsiveUtils),
-                      child: childBuilder.call(context, constraints)
+                      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)
+                      ),
                     ),
                   ),
-                ),
+                );
-              );
+              }),
-          })
+            )
+          ),
         ),
       )
     );

lib/features/identity_creator/presentation/identity_creator_controller.dart

@@ -25,6 +25,7 @@ import 'package:model/extensions/identity_extension.dart';
 import 'package:model/extensions/session_extension.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:rich_text_composer/rich_text_composer.dart';
+import 'package:rich_text_composer/views/commons/constants.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_mobile_tablet_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_controller.dart';
@@ -449,7 +450,6 @@ class IdentityCreatorController extends BaseController {
       editorApi,
       onEnterKeyDown: _onEnterKeyDownOnMobile,
       onFocus: _onFocusHTMLEditorOnMobile,
-      context: context
     );
     richTextMobileTabletController?.htmlEditorApi?.onFocusOut = () {
       richTextMobileTabletController?.richTextController.hideRichTextView();

lib/features/identity_creator/presentation/identity_creator_view.dart

@@ -146,16 +146,15 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController>
           backgroundKeyboardToolBarColor: PlatformInfo.isIOS
             ? AppColor.colorBackgroundKeyboard
             : AppColor.colorBackgroundKeyboardAndroid,
-          isLandScapeMode: controller.responsiveUtils.isLandscapeMobile(context),
           richTextController: controller.richTextMobileTabletController!.richTextController,
-          titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
+          quickStyleLabel: AppLocalizations.of(context).titleQuickStyles,
-          titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
+          backgroundLabel: AppLocalizations.of(context).titleBackground,
-          titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
+          foregroundLabel: AppLocalizations.of(context).titleForeground,
-          titleFormatBottomSheet: AppLocalizations.of(context).titleFormat,
+          formatLabel: AppLocalizations.of(context).titleFormat,
           insertImage: () => controller.pickImage(context),
+          rootContext: context,
         ),
         richTextController: controller.richTextMobileTabletController!.richTextController,
-        paddingChild: EdgeInsets.zero,
         child: responsiveWidget
       );
     }

lib/features/manage_account/presentation/vacation/vacation_controller.dart

@@ -4,7 +4,8 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/vacation/vacation_response.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
-import 'package:rich_text_composer/richtext_controller.dart';
+import 'package:rich_text_composer/rich_text_controller.dart';
+import 'package:rich_text_composer/views/commons/constants.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/composer/presentation/controller/rich_text_web_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/empty_name_validator.dart';

lib/features/manage_account/presentation/vacation/vacation_view.dart

@@ -39,11 +39,12 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
           backgroundKeyboardToolBarColor: PlatformInfo.isIOS
             ? AppColor.colorBackgroundKeyboard
             : AppColor.colorBackgroundKeyboardAndroid,
-          titleFormatBottomSheet: AppLocalizations.of(context).format,
           richTextController: controller.richTextControllerForMobile,
-          titleQuickStyleBottomSheet: AppLocalizations.of(context).quickStyles,
+          quickStyleLabel: AppLocalizations.of(context).titleQuickStyles,
-          titleBackgroundBottomSheet: AppLocalizations.of(context).background,
+          backgroundLabel: AppLocalizations.of(context).titleBackground,
-          titleForegroundBottomSheet: AppLocalizations.of(context).foreground,
+          foregroundLabel: AppLocalizations.of(context).titleForeground,
+          formatLabel: AppLocalizations.of(context).titleFormat,
+          rootContext: context,
         ),
         child: _buildVacationFormView(context)
       );
@@ -448,7 +449,6 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
               htmlApi,
               onFocus: controller.onFocusHTMLEditor,
               onEnterKeyDown: controller.onEnterKeyDown,
-              context: context,
             );
           }
       );

pubspec.lock

@@ -437,7 +437,7 @@ packages:
     description:
       path: "."
       ref: cherry-pick-fix-rich-text-format-style
-      resolved-ref: "8eb30137b11b1008ccd4330191b4ee5e6ac2e879"
+      resolved-ref: "7041e5822707ab57fcf36964c38556e2d27b06e2"
       url: "https://github.com/linagora/enough_html_editor.git"
     source: git
     version: "0.0.5"