TF-858 Apply rich text keyboard button for mobile on vacation

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

@@ -2,6 +2,7 @@ import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/vacation/vacation_response.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/composer/presentation/controller/rich_text_web_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/empty_name_validator.dart';
@@ -42,6 +43,7 @@ class VacationController extends BaseController {
 
   final messageTextController = TextEditingController();
   final subjectTextController = TextEditingController();
+  final richTextControllerForMobile = RichTextController();
 
   VacationResponse? currentVacation;
   String? _vacationMessageHtmlText;
@@ -121,7 +123,11 @@ class VacationController extends BaseController {
     messageTextController.text = newVacation.messagePlainText ?? '';
     subjectTextController.text = newVacation.subject ?? '';
     updateMessageHtmlText(newVacation.messageHtmlText ?? '');
-    _richTextControllerForWeb.editorController.setText(newVacation.messageHtmlText ?? '');
+    if (BuildUtils.isWeb) {
+      _richTextControllerForWeb.editorController.setText(newVacation.messageHtmlText ?? '');
+    } else {
+      richTextControllerForMobile.htmlEditorApi?.setText(newVacation.messageHtmlText ?? '');
+    }
   }
 
   bool get isVacationDeactivated => !vacationPresentation.value.isEnabled;
@@ -235,7 +241,7 @@ class VacationController extends BaseController {
     errorMessageBody.value = _getErrorStringByInputValue(context, value);
   }
 
-  void saveVacation(BuildContext context) {
+  void saveVacation(BuildContext context) async {
     FocusScope.of(context).unfocus();
 
     if (vacationPresentation.value.isEnabled) {
@@ -261,7 +267,7 @@ class VacationController extends BaseController {
       }
 
       final messagePlainText = messageTextController.text;
-      final messageHtmlText = _vacationMessageHtmlText ?? '';
+      final messageHtmlText = (BuildUtils.isWeb ? _vacationMessageHtmlText : await _getMessageHtmlText()) ?? '';
       if (messagePlainText.isEmpty && messageHtmlText.isEmpty) {
         _appToast.showToastWithIcon(
             context,
@@ -319,24 +325,36 @@ class VacationController extends BaseController {
 
   void updateMessageHtmlText(String? text) => _vacationMessageHtmlText = text;
 
-  Future<String?> _getMessageHtmlText() {
+  Future<String>? _getMessageHtmlText() {
-    return _richTextControllerForWeb.editorController.getText();
+    if (BuildUtils.isWeb) {
+      return _richTextControllerForWeb.editorController.getText();
+    } else {
+      return richTextControllerForMobile.htmlEditorApi?.getText();
+    }
   }
 
-  void selectVacationMessageType(BuildContext context, VacationMessageType newMessageType) async {
+  void selectVacationMessageType(BuildContext context, VacationMessageType newMessageType) {
     if (newMessageType == VacationMessageType.plainText && !BuildUtils.isWeb) {
-      final messageHtml = await _getMessageHtmlText();
+      _storeMessageHtmlTextOnMobile();
-      updateMessageHtmlText(messageHtml);
     }
     clearFocusEditor(context);
     vacationMessageType.value = newMessageType;
   }
 
+  void _storeMessageHtmlTextOnMobile() async {
+    final messageHtml = await _getMessageHtmlText();
+    updateMessageHtmlText(messageHtml);
+  }
+
   void clearFocusEditor(BuildContext context) {
+    if (!BuildUtils.isWeb) {
+      richTextControllerForMobile.htmlEditorApi?.unfocus();
+    }
     FocusScope.of(context).unfocus();
   }
 
-  void backToUniversalSettings() {
+  void backToUniversalSettings(BuildContext context) {
+    clearFocusEditor(context);
     _settingController.backToUniversalSettings();
   }
 
@@ -344,6 +362,7 @@ class VacationController extends BaseController {
   void onClose() {
     messageTextController.dispose();
     subjectTextController.dispose();
+    richTextControllerForMobile.dispose();
     vacationWorker.dispose();
     VacationControllerBindings().dispose();
     super.onClose();

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

@@ -1,9 +1,12 @@
 
 import 'package:core/core.dart';
+import 'package:enough_html_editor/enough_html_editor.dart' as html_editor_mobile;
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
+import 'package:rich_text_composer/rich_text_composer.dart';
+import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
 import 'package:tmail_ui_user/features/base/widget/border_button_field.dart';
 import 'package:tmail_ui_user/features/base/widget/text_input_decoration_builder.dart';
 import 'package:tmail_ui_user/features/base/widget/text_input_field_builder.dart';
@@ -32,77 +35,112 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
           : Colors.white,
       body: GestureDetector(
         onTap: () => FocusScope.of(context).unfocus(),
-        child: Container(
+        child: KeyboardRichText(
-          width: double.infinity,
+          richTextController: controller.richTextControllerForMobile,
-          height: double.infinity,
+          backgroundKeyboardToolBarColor: Colors.grey,
-          margin: _responsiveUtils.isWebDesktop(context)
+          keyBroadToolbar: RichTextKeyboardToolBar(
-              ? const EdgeInsets.all(24)
+            titleFormatBottomSheet: AppLocalizations.of(context).format,
-              : EdgeInsets.zero,
+            richTextController: controller.richTextControllerForMobile,
-          decoration: _responsiveUtils.isWebDesktop(context)
+            insertImage: () {},
-              ? BoxDecoration(
+            insertAttachment: () {},
-                  borderRadius: BorderRadius.circular(20),
+            titleQuickStyleBottomSheet: AppLocalizations.of(context).quickStyles,
-                  border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
+            titleBackgroundBottomSheet: AppLocalizations.of(context).background,
-                  color: Colors.white)
+            titleForegroundBottomSheet: AppLocalizations.of(context).foreground,
-              : null,
+          ),
-          padding: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils),
+          child: Container(
-          child: SingleChildScrollView(
+            width: double.infinity,
-            child: Column(
+            height: double.infinity,
-                crossAxisAlignment: CrossAxisAlignment.start,
+            margin: _responsiveUtils.isWebDesktop(context)
-                children: [
+                ? const EdgeInsets.all(24)
-                  if (_responsiveUtils.isWebDesktop(context))
+                : EdgeInsets.zero,
-                   ...[
+            decoration: _responsiveUtils.isWebDesktop(context)
-                     Text(AppLocalizations.of(context).vacation,
+                ? BoxDecoration(
-                         style: const TextStyle(
+                    borderRadius: BorderRadius.circular(20),
-                             fontSize: 20,
+                    border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
-                             fontWeight: FontWeight.w500,
+                    color: Colors.white)
-                             color: Colors.black)),
+                : null,
-                     const SizedBox(height: 8)
+            padding: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils),
-                   ],
+            child: SingleChildScrollView(
-                  Text(AppLocalizations.of(context).vacationSettingExplanation,
+              child: Column(
-                      style: const TextStyle(
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                          fontSize: 16,
+                  children: [
-                          fontWeight: FontWeight.normal,
+                    if (_responsiveUtils.isWebDesktop(context))
-                          color: AppColor.colorVacationSettingExplanation)),
+                     ...[
-                  const SizedBox(height: 24),
+                       Text(AppLocalizations.of(context).vacation,
-                  Row(children: [
+                           style: const TextStyle(
-                    Obx(() {
+                               fontSize: 20,
-                      return InkWell(
+                               fontWeight: FontWeight.w500,
-                          onTap: () {
+                               color: Colors.black)),
-                            final newStatus = controller.isVacationDeactivated
+                       const SizedBox(height: 8)
-                                ? VacationResponderStatus.activated
+                     ],
-                                : VacationResponderStatus.deactivated;
+                    Text(AppLocalizations.of(context).vacationSettingExplanation,
-                            controller.updateVacationPresentation(newStatus: newStatus);
+                        style: const TextStyle(
-                          },
+                            fontSize: 16,
-                          child: SvgPicture.asset(
+                            fontWeight: FontWeight.normal,
-                              controller.isVacationDeactivated
+                            color: AppColor.colorVacationSettingExplanation)),
-                                  ? _imagePaths.icSwitchOff
+                    const SizedBox(height: 24),
-                                  : _imagePaths.icSwitchOn,
+                    Row(children: [
-                              fit: BoxFit.fill,
+                      Obx(() {
-                              width: 24,
+                        return InkWell(
-                              height: 24)
+                            onTap: () {
-                      );
+                              final newStatus = controller.isVacationDeactivated
-                    }),
+                                  ? VacationResponderStatus.activated
-                    const SizedBox(width: 16),
+                                  : VacationResponderStatus.deactivated;
-                    Expanded(
+                              controller.updateVacationPresentation(newStatus: newStatus);
-                      child: Text(AppLocalizations.of(context).vacationSettingToggleButtonAutoReply,
+                            },
-                          style: const TextStyle(
+                            child: SvgPicture.asset(
-                              fontSize: 16,
+                                controller.isVacationDeactivated
-                              fontWeight: FontWeight.normal,
+                                    ? _imagePaths.icSwitchOff
-                              color: Colors.black)
+                                    : _imagePaths.icSwitchOn,
-                      ),
+                                fit: BoxFit.fill,
-                    )
+                                width: 24,
-                  ]),
+                                height: 24)
-                  const SizedBox(height: 28),
+                        );
-                  Padding(
+                      }),
-                    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+                      const SizedBox(width: 16),
-                    child: Column(children: [
+                      Expanded(
-                      Obx(() => AbsorbPointer(
+                        child: Text(AppLocalizations.of(context).vacationSettingToggleButtonAutoReply,
-                        absorbing: controller.isVacationDeactivated,
+                            style: const TextStyle(
-                        child: Opacity(
+                                fontSize: 16,
-                          opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                                fontWeight: FontWeight.normal,
-                          child: _responsiveUtils.isPortraitMobile(context)
+                                color: Colors.black)
-                            ? Column(children: [
+                        ),
-                                BorderButtonField<DateTime>(
+                      )
+                    ]),
+                    const SizedBox(height: 28),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+                      child: Column(children: [
+                        Obx(() => AbsorbPointer(
+                          absorbing: controller.isVacationDeactivated,
+                          child: Opacity(
+                            opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                            child: _responsiveUtils.isPortraitMobile(context)
+                              ? Column(children: [
+                                  BorderButtonField<DateTime>(
+                                      label: AppLocalizations.of(context).startDate,
+                                      value: controller.vacationPresentation.value.startDate,
+                                      mouseCursor: SystemMouseCursors.text,
+                                      backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                                      isEmpty: !controller.isVacationDeactivated &&
+                                          controller.vacationPresentation.value.startDateIsNull,
+                                      hintText: AppLocalizations.of(context).startDate,
+                                      tapActionCallback: (value) =>
+                                          controller.selectDate(context, DateType.start, value)),
+                                  const SizedBox(height: 18),
+                                  BorderButtonField<TimeOfDay>(
+                                      label: AppLocalizations.of(context).startTime,
+                                      value: controller.vacationPresentation.value.startTime,
+                                      mouseCursor: SystemMouseCursors.text,
+                                      backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                                      isEmpty: !controller.isVacationDeactivated &&
+                                          controller.vacationPresentation.value.starTimeIsNull,
+                                      hintText: AppLocalizations.of(context).noStartTime,
+                                      tapActionCallback: (value) =>
+                                          controller.selectTime(context, DateType.start, value)),
+                                ])
+                            : Row(children: [
+                                Expanded(child: BorderButtonField<DateTime>(
                                     label: AppLocalizations.of(context).startDate,
                                     value: controller.vacationPresentation.value.startDate,
                                     mouseCursor: SystemMouseCursors.text,
@@ -111,9 +149,9 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                                         controller.vacationPresentation.value.startDateIsNull,
                                     hintText: AppLocalizations.of(context).startDate,
                                     tapActionCallback: (value) =>
-                                        controller.selectDate(context, DateType.start, value)),
+                                        controller.selectDate(context, DateType.start, value))),
-                                const SizedBox(height: 18),
+                                const SizedBox(width: 24),
-                                BorderButtonField<TimeOfDay>(
+                                Expanded(child: BorderButtonField<TimeOfDay>(
                                     label: AppLocalizations.of(context).startTime,
                                     value: controller.vacationPresentation.value.startTime,
                                     mouseCursor: SystemMouseCursors.text,
@@ -122,155 +160,133 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                                         controller.vacationPresentation.value.starTimeIsNull,
                                     hintText: AppLocalizations.of(context).noStartTime,
                                     tapActionCallback: (value) =>
-                                        controller.selectTime(context, DateType.start, value)),
+                                        controller.selectTime(context, DateType.start, value))),
-                              ])
+                              ]),
-                          : Row(children: [
+                          ),
-                              Expanded(child: BorderButtonField<DateTime>(
+                        )),
-                                  label: AppLocalizations.of(context).startDate,
+                        const SizedBox(height: 24),
-                                  value: controller.vacationPresentation.value.startDate,
+                        Obx(() => AbsorbPointer(
-                                  mouseCursor: SystemMouseCursors.text,
+                            absorbing: controller.isVacationDeactivated,
-                                  backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                            child: Opacity(
-                                  isEmpty: !controller.isVacationDeactivated &&
+                              opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                                      controller.vacationPresentation.value.startDateIsNull,
+                              child: Row(children: [
-                                  hintText: AppLocalizations.of(context).startDate,
+                                Obx(() => InkWell(
-                                  tapActionCallback: (value) =>
+                                    onTap: () {
-                                      controller.selectDate(context, DateType.start, value))),
+                                      final value = !controller.vacationPresentation.value.vacationStopEnabled;
-                              const SizedBox(width: 24),
+                                      controller.updateVacationPresentation(vacationStopEnabled: value);
-                              Expanded(child: BorderButtonField<TimeOfDay>(
+                                    },
-                                  label: AppLocalizations.of(context).startTime,
+                                    child: SvgPicture.asset(
-                                  value: controller.vacationPresentation.value.startTime,
+                                        controller.vacationPresentation.value.vacationStopEnabled
-                                  mouseCursor: SystemMouseCursors.text,
+                                            ? _imagePaths.icSwitchOn
-                                  backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                                            : _imagePaths.icSwitchOff,
-                                  isEmpty: !controller.isVacationDeactivated &&
+                                        fit: BoxFit.fill,
-                                      controller.vacationPresentation.value.starTimeIsNull,
+                                        width: 24,
-                                  hintText: AppLocalizations.of(context).noStartTime,
+                                        height: 24)
-                                  tapActionCallback: (value) =>
+                                )
-                                      controller.selectTime(context, DateType.start, value))),
+                                ),
-                            ]),
+                                const SizedBox(width: 16),
-                        ),
+                                Expanded(
-                      )),
+                                  child: Text(AppLocalizations.of(context).vacationStopsAt,
-                      const SizedBox(height: 24),
+                                      style: const TextStyle(
-                      Obx(() => AbsorbPointer(
+                                          fontSize: 16,
+                                          fontWeight: FontWeight.normal,
+                                          color: Colors.black)
+                                  ),
+                                )
+                              ]),
+                            )
+                        )),
+                        const SizedBox(height: 24),
+                        Obx(() => AbsorbPointer(
+                            absorbing: !controller.canChangeEndDate,
+                            child: Opacity(
+                              opacity: !controller.canChangeEndDate ? 0.3 : 1.0,
+                              child: _responsiveUtils.isPortraitMobile(context)
+                                ? Column(children: [
+                                    BorderButtonField<DateTime>(
+                                        label: AppLocalizations.of(context).endDate,
+                                        value: controller.vacationPresentation.value.endDate,
+                                        mouseCursor: SystemMouseCursors.text,
+                                        backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                                        isEmpty: controller.canChangeEndDate &&
+                                            controller.vacationPresentation.value.endDateIsNull,
+                                        hintText: AppLocalizations.of(context).noEndDate,
+                                        tapActionCallback: (value) =>
+                                            controller.selectDate(context, DateType.end, value)),
+                                    const SizedBox(height: 18),
+                                    BorderButtonField<TimeOfDay>(
+                                        label: AppLocalizations.of(context).endTime,
+                                        value: controller.vacationPresentation.value.endTime,
+                                        mouseCursor: SystemMouseCursors.text,
+                                        backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                                        isEmpty: controller.canChangeEndDate &&
+                                            controller.vacationPresentation.value.endTimeIsNull,
+                                        hintText: AppLocalizations.of(context).noEndTime,
+                                        tapActionCallback: (value) =>
+                                            controller.selectTime(context, DateType.end, value)),
+                                  ])
+                                : Row(children: [
+                                    Expanded(child: BorderButtonField<DateTime>(
+                                        label: AppLocalizations.of(context).endDate,
+                                        value: controller.vacationPresentation.value.endDate,
+                                        mouseCursor: SystemMouseCursors.text,
+                                        backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                                        isEmpty: controller.canChangeEndDate &&
+                                            controller.vacationPresentation.value.endDateIsNull,
+                                        hintText: AppLocalizations.of(context).noEndDate,
+                                        tapActionCallback: (value) =>
+                                            controller.selectDate(context, DateType.end, value))),
+                                    const SizedBox(width: 24),
+                                    Expanded(child: BorderButtonField<TimeOfDay>(
+                                        label: AppLocalizations.of(context).endTime,
+                                        value: controller.vacationPresentation.value.endTime,
+                                        mouseCursor: SystemMouseCursors.text,
+                                        backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                                        isEmpty: controller.canChangeEndDate &&
+                                            controller.vacationPresentation.value.endTimeIsNull,
+                                        hintText: AppLocalizations.of(context).noEndTime,
+                                        tapActionCallback: (value) =>
+                                            controller.selectTime(context, DateType.end, value))),
+                                  ]),
+                            )
+                        )),
+                        const SizedBox(height: 24),
+                        Obx(() => AbsorbPointer(
+                            absorbing: controller.isVacationDeactivated,
+                            child: _responsiveUtils.isPortraitMobile(context)
+                                ? Opacity(
+                                    opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                                    child: TextInputFieldBuilder(
+                                    label: AppLocalizations.of(context).subject,
+                                    hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
+                                    editingController: controller.subjectTextController),
+                                  )
+                                : Row(children: [
+                                    Expanded(child: Opacity(
+                                      opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                                      child: TextInputFieldBuilder(
+                                          label: AppLocalizations.of(context).subject,
+                                          hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
+                                          editingController: controller.subjectTextController),
+                                    )),
+                                    const SizedBox(width: 24),
+                                    const Expanded(child: SizedBox.shrink())
+                                  ])
+                        )),
+                        const SizedBox(height: 24),
+                        Obx(() => AbsorbPointer(
                           absorbing: controller.isVacationDeactivated,
                           child: Opacity(
                             opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                            child: Row(children: [
+                            child: _buildVacationMessage(context),
-                              Obx(() => InkWell(
+                          ),
-                                  onTap: () {
+                        )),
-                                    final value = !controller.vacationPresentation.value.vacationStopEnabled;
+                        const SizedBox(height: 24),
-                                    controller.updateVacationPresentation(vacationStopEnabled: value);
+                        _buildListButtonAction(context)
-                                  },
+                      ]),
-                                  child: SvgPicture.asset(
+                    )
-                                      controller.vacationPresentation.value.vacationStopEnabled
+                  ]
-                                          ? _imagePaths.icSwitchOn
+              ),
-                                          : _imagePaths.icSwitchOff,
-                                      fit: BoxFit.fill,
-                                      width: 24,
-                                      height: 24)
-                              )
-                              ),
-                              const SizedBox(width: 16),
-                              Expanded(
-                                child: Text(AppLocalizations.of(context).vacationStopsAt,
-                                    style: const TextStyle(
-                                        fontSize: 16,
-                                        fontWeight: FontWeight.normal,
-                                        color: Colors.black)
-                                ),
-                              )
-                            ]),
-                          )
-                      )),
-                      const SizedBox(height: 24),
-                      Obx(() => AbsorbPointer(
-                          absorbing: !controller.canChangeEndDate,
-                          child: Opacity(
-                            opacity: !controller.canChangeEndDate ? 0.3 : 1.0,
-                            child: _responsiveUtils.isPortraitMobile(context)
-                              ? Column(children: [
-                                  BorderButtonField<DateTime>(
-                                      label: AppLocalizations.of(context).endDate,
-                                      value: controller.vacationPresentation.value.endDate,
-                                      mouseCursor: SystemMouseCursors.text,
-                                      backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                      isEmpty: controller.canChangeEndDate &&
-                                          controller.vacationPresentation.value.endDateIsNull,
-                                      hintText: AppLocalizations.of(context).noEndDate,
-                                      tapActionCallback: (value) =>
-                                          controller.selectDate(context, DateType.end, value)),
-                                  const SizedBox(height: 18),
-                                  BorderButtonField<TimeOfDay>(
-                                      label: AppLocalizations.of(context).endTime,
-                                      value: controller.vacationPresentation.value.endTime,
-                                      mouseCursor: SystemMouseCursors.text,
-                                      backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                      isEmpty: controller.canChangeEndDate &&
-                                          controller.vacationPresentation.value.endTimeIsNull,
-                                      hintText: AppLocalizations.of(context).noEndTime,
-                                      tapActionCallback: (value) =>
-                                          controller.selectTime(context, DateType.end, value)),
-                                ])
-                              : Row(children: [
-                                  Expanded(child: BorderButtonField<DateTime>(
-                                      label: AppLocalizations.of(context).endDate,
-                                      value: controller.vacationPresentation.value.endDate,
-                                      mouseCursor: SystemMouseCursors.text,
-                                      backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                      isEmpty: controller.canChangeEndDate &&
-                                          controller.vacationPresentation.value.endDateIsNull,
-                                      hintText: AppLocalizations.of(context).noEndDate,
-                                      tapActionCallback: (value) =>
-                                          controller.selectDate(context, DateType.end, value))),
-                                  const SizedBox(width: 24),
-                                  Expanded(child: BorderButtonField<TimeOfDay>(
-                                      label: AppLocalizations.of(context).endTime,
-                                      value: controller.vacationPresentation.value.endTime,
-                                      mouseCursor: SystemMouseCursors.text,
-                                      backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                      isEmpty: controller.canChangeEndDate &&
-                                          controller.vacationPresentation.value.endTimeIsNull,
-                                      hintText: AppLocalizations.of(context).noEndTime,
-                                      tapActionCallback: (value) =>
-                                          controller.selectTime(context, DateType.end, value))),
-                                ]),
-                          )
-                      )),
-                      const SizedBox(height: 24),
-                      Obx(() => AbsorbPointer(
-                          absorbing: controller.isVacationDeactivated,
-                          child: _responsiveUtils.isPortraitMobile(context)
-                              ? Opacity(
-                                  opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                                  child: TextInputFieldBuilder(
-                                  label: AppLocalizations.of(context).subject,
-                                  hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
-                                  editingController: controller.subjectTextController),
-                                )
-                              : Row(children: [
-                                  Expanded(child: Opacity(
-                                    opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                                    child: TextInputFieldBuilder(
-                                        label: AppLocalizations.of(context).subject,
-                                        hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
-                                        editingController: controller.subjectTextController),
-                                  )),
-                                  const SizedBox(width: 24),
-                                  const Expanded(child: SizedBox.shrink())
-                                ])
-                      )),
-                      const SizedBox(height: 24),
-                      Obx(() => AbsorbPointer(
-                        absorbing: controller.isVacationDeactivated,
-                        child: Opacity(
-                          opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                          child: _buildVacationMessage(context),
-                        ),
-                      )),
-                      const SizedBox(height: 24),
-                      _buildListButtonAction(context)
-                    ]),
-                  )
-                ]
             ),
           ),
         ),
@@ -308,7 +324,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
                 width: 156,
                 height: 44,
                 radius: 10,
-                onTap: () => controller.backToUniversalSettings()),
+                onTap: () => controller.backToUniversalSettings(context)),
           ),
           const SizedBox(width: 12),
           Expanded(
@@ -338,7 +354,7 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
               width: 156,
               height: 44,
               radius: 10,
-              onTap: () => controller.backToUniversalSettings()),
+              onTap: () => controller.backToUniversalSettings(context)),
           const SizedBox(width: 12),
           buildTextButton(
               AppLocalizations.of(context).saveChanges,
@@ -385,14 +401,15 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
           padding: const EdgeInsets.only(left: 12, right: 12, top: 12),
           child: Column(children: [
             _buildMessageHtmlTextEditor(context),
-            Center(child: Obx(() {
+            if (BuildUtils.isWeb)
-              return PointerInterceptor(
+              Center(child: Obx(() {
-                child: buildToolbarRichTextForWeb(
+                return PointerInterceptor(
-                    context,
+                  child: buildToolbarRichTextForWeb(
-                    controller.richTextControllerForWeb,
+                      context,
-                    layoutType: ButtonLayoutType.scrollHorizontal),
+                      controller.richTextControllerForWeb,
-              );
+                      layoutType: ButtonLayoutType.scrollHorizontal),
-            }))
+                );
+              }))
           ]),
         );
       }
@@ -450,7 +467,13 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
         ),
       );
     } else {
-      return const SizedBox.shrink();
+      return html_editor_mobile.HtmlEditor(
+          key: const Key('vacation_message_html_text_editor_mobile'),
+          minHeight: 150,
+          addDefaultSelectionMenuItems: false,
+          initialContent: controller.vacationMessageHtmlText ?? '',
+          onCreated: controller.richTextControllerForMobile.onCreateHTMLEditor
+      );
     }
   }
 

lib/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart

@@ -106,7 +106,7 @@ class VacationNotificationMessageWidget extends StatelessWidget {
         if (leadingIcon != null) leadingIcon!,
         Expanded(
             child: Padding(
-              padding: const EdgeInsets.only(top: 8, right: 12),
+              padding: const EdgeInsets.only(right: 12),
               child: Center(
                 child: Text(
                     vacationResponse.getNotificationMessage(context),

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-09-20T13:44:48.613115",
+  "@@last_modified": "2022-09-30T16:41:42.005040",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -2197,5 +2197,29 @@
     "type": "text",
     "placeholders_order": [],
     "placeholders": {}
+  },
+  "quickStyles": "Quick styles",
+  "@quickStyles": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "format": "Format",
+  "@format": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "background": "Background",
+  "@background": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "foreground": "Foreground",
+  "@foreground": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -2271,4 +2271,32 @@ class AppLocalizations {
         name: 'hintSearchInputContact'
     );
   }
+
+  String get quickStyles {
+    return Intl.message(
+        'Quick styles',
+        name: 'quickStyles'
+    );
+  }
+
+  String get format {
+    return Intl.message(
+        'Format',
+        name: 'format'
+    );
+  }
+
+  String get background {
+    return Intl.message(
+        'Background',
+        name: 'background'
+    );
+  }
+
+  String get foreground {
+    return Intl.message(
+        'Foreground',
+        name: 'foreground'
+    );
+  }
 }

pubspec.lock

@@ -1083,6 +1083,15 @@ packages:
       url: "https://github.com/KasemJaffer/receive_sharing_intent.git"
     source: git
     version: "1.4.5"
+  rich_text_composer:
+    dependency: "direct main"
+    description:
+      path: "."
+      ref: master
+      resolved-ref: "85fe10cd4d3b29bbf803ac796ebe722710fa1d36"
+      url: "https://github.com/linagora/rich-text-composer.git"
+    source: git
+    version: "0.0.1"
   rule_filter:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -139,6 +139,11 @@ 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