TF-912: Support rich text for signature htmlBody of identity

lib/features/composer/presentation/composer_view.dart

@@ -291,6 +291,7 @@ class ComposerView extends GetWidget<ComposerController>
       onFocusChange: (focus) {
         if(focus) {
           controller.htmlEditorApi?.unfocus();
+          controller.keyboardRichTextController.hideRichTextView();
         }
       },
       child: Column(
@@ -362,7 +363,14 @@ class ComposerView extends GetWidget<ComposerController>
   }
 
   Widget _buildSubjectEmail(BuildContext context) {
-    return Row(
+    return Focus(
+      onFocusChange: (focus) {
+        if(focus) {
+          controller.htmlEditorApi?.unfocus();
+          controller.keyboardRichTextController.hideRichTextView();
+        }
+      },
+      child: Row(
           children: [
             Padding(
                 padding: const EdgeInsets.only(right: 8),
@@ -384,6 +392,7 @@ class ComposerView extends GetWidget<ComposerController>
                 ))
             )
           ]
+      ),
     );
   }
 

lib/features/identity_creator/presentation/identity_creator_controller.dart

@@ -11,6 +11,7 @@ import 'package:jmap_dart_client/jmap/core/properties/properties.dart';
 import 'package:jmap_dart_client/jmap/identities/identity.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:model/model.dart';
+import 'package:rich_text_composer/richtext_controller.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/identity_creator/presentation/model/signature_type.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/email_address_validator.dart';
@@ -46,6 +47,8 @@ class IdentityCreatorController extends BaseController {
   final _identitiesController = Get.find<IdentitiesController>();
   final _accountDashBoardController = Get.find<ManageAccountDashBoardController>();
 
+  final RichTextController keyboardRichTextController = RichTextController();
+
   final HtmlEditorController signatureHtmlEditorController = HtmlEditorController(processNewLineAsBr: true);
   final TextEditingController signaturePlainEditorController = TextEditingController();
   final TextEditingController inputNameIdentityController = TextEditingController();
@@ -102,6 +105,7 @@ class IdentityCreatorController extends BaseController {
     inputNameIdentityController.dispose();
     inputBccIdentityController.dispose();
     identityCreatorIsActiveWorker.dispose();
+    keyboardRichTextController.dispose();
     super.onClose();
   }
 

lib/features/identity_creator/presentation/identity_creator_view.dart

@@ -5,6 +5,8 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:html_editor_enhanced/html_editor.dart' as html_editor_browser;
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
+import 'package:rich_text_composer/views/keyboard_richtext.dart';
+import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
 import 'package:tmail_ui_user/features/identity_creator/presentation/identity_creator_controller.dart';
 import 'package:tmail_ui_user/features/identity_creator/presentation/model/signature_type.dart';
 import 'package:tmail_ui_user/features/identity_creator/presentation/widgets/identity_drop_list_field_builder.dart';
@@ -279,7 +281,8 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
                       : AppLocalizations.of(context).edit_identity.inCaps,
                     style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 21, color: Colors.black))),
             const SizedBox(height: 8),
-            Expanded(child: SingleChildScrollView(
+            Expanded(child: KeyboardRichText(
+              child: SingleChildScrollView(
                 physics: const ClampingScrollPhysics(),
                 reverse: true,
                 child: Padding(
@@ -346,7 +349,9 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
                     style: const TextStyle(
                       fontWeight: FontWeight.normal,
                       fontSize: 14,
-                          color: AppColor.colorContentEmail)),
+                      color: AppColor.colorContentEmail,
+                    ),
+                  ),
                   const SizedBox(height: 8),
                   Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                     Obx(() => _buildSignatureButton(context, SignatureType.plainText)),
@@ -358,7 +363,8 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(10),
                       border: Border.all(color: AppColor.colorInputBorderCreateMailbox),
-                        color: Colors.white),
+                      color: Colors.white,
+                    ),
                     padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
                     child: Stack(
                       children: [
@@ -381,12 +387,14 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
                             textStyle: const TextStyle(
                               fontWeight: FontWeight.w500,
                               fontSize: 17,
-                                    color: AppColor.colorTextButton),
+                              color: AppColor.colorTextButton,
+                            ),
                             backgroundColor: AppColor.emailAddressChipColor,
                             width: 128,
                             height: 44,
                             radius: 10,
-                                onTap: () => controller.closeView(context)),
+                            onTap: () => controller.closeView(context),
+                          ),
                         ),
                         const SizedBox(width: 12),
                         Expanded(
@@ -404,6 +412,17 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
                   )
         ]),
       ),
+    ),
+              richTextController: controller.keyboardRichTextController,
+              backgroundKeyboardToolBarColor: AppColor.colorBackgroundKeyboard,
+              keyBroadToolbar: RichTextKeyboardToolBar(
+                isLandScapeMode: _responsiveUtils.isLandscapeMobile(context),
+                richTextController: controller.keyboardRichTextController,
+                titleQuickStyleBottomSheet: AppLocalizations.of(context).titleQuickStyles,
+                titleBackgroundBottomSheet: AppLocalizations.of(context).titleBackground,
+                titleForegroundBottomSheet: AppLocalizations.of(context).titleForeground,
+                titleFormatBottomSheet: AppLocalizations.of(context).titleFormat,
+              ),
             )),
           ]),
           Positioned(top: 8, right: 8,
@@ -492,7 +511,10 @@ class IdentityCreatorView extends GetWidget<IdentityCreatorController> {
       return html_editor_mobile.HtmlEditor(
         key: const Key('signature_html_editor_mobile'),
         minHeight: 230,
-        onCreated: (htmlEditorController) => controller.signatureHtmlEditorMobileController = htmlEditorController,
+        onCreated: (htmlEditorController) {
+          controller.keyboardRichTextController.onCreateHTMLEditor(htmlEditorController);
+          controller.signatureHtmlEditorMobileController = htmlEditorController;
+        },
         initialContent: controller.contentHtmlEditor ?? '',
       );
     }

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-09-30T16:41:42.005040",
+  "@@last_modified": "2022-09-30T17:54:08.425416",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -2221,5 +2221,29 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "titleFormat": "Format",
+  "@titleFormat": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "titleQuickStyles": "Quick styles",
+  "@titleQuickStyles": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "titleBackground": "Background",
+  "@titleBackground": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "titleForeground": "Foreground",
+  "@titleForeground": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

pubspec.yaml

@@ -45,7 +45,7 @@ dependencies:
   rich_text_composer:
     git:
       url: https://github.com/linagora/rich-text-composer.git
-      ref: apply_rich_text_bottom_sheet
+      ref: master
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
@@ -143,11 +143,6 @@ dependencies:
       url: https://github.com/linagora/html-editor-enhanced.git
       ref: email_supported
 
-  rich_text_composer:
-    git:
-      url: https://github.com/linagora/rich-text-composer.git
-      ref: master
-
   # fk_user_agent
   fk_user_agent: 2.1.0