TF-1301 Handle select font size while compose email

Signed-off-by: dab246 <tdvu@linagora.com>

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit 194ccd3a0cf1da161607daf2506bdf524daaf305)

lib/features/composer/presentation/composer_view_web.dart

@@ -1,7 +1,6 @@
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/responsive/responsive_widget.dart';
-import 'package:core/utils/app_logger.dart';
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
@@ -150,7 +149,6 @@ class ComposerView extends GetWidget<ComposerController> {
               ),
               Expanded(
                 child: LayoutBuilder(builder: (context, constraints) {
-                  log('ComposerView::build:mobile:constraints: $constraints');
                   return Stack(
                     children: [
                       Padding(
@@ -175,6 +173,7 @@ class ComposerView extends GetWidget<ComposerController> {
                               base64Str: base64Str,
                             );
                           },
+                          onEditorTextSizeChanged: controller.richTextWebController.onEditorTextSizeChanged,
                           width: constraints.maxWidth,
                           height: constraints.maxHeight,
                         )),
@@ -330,7 +329,6 @@ class ComposerView extends GetWidget<ComposerController> {
                   color: ComposerStyle.backgroundEditorColor
                 ),
                 child: LayoutBuilder(builder: (context, constraints) {
-                  log('ComposerView::build:desktop:constraints: $constraints');
                   return Stack(
                     children: [
                       Column(
@@ -361,6 +359,7 @@ class ComposerView extends GetWidget<ComposerController> {
                                           base64Str: base64Str,
                                         );
                                       },
+                                      onEditorTextSizeChanged: controller.richTextWebController.onEditorTextSizeChanged,
                                       width: constraints.maxWidth,
                                       height: constraints.maxHeight,
                                     ),
@@ -551,7 +550,6 @@ class ComposerView extends GetWidget<ComposerController> {
                   color: ComposerStyle.backgroundEditorColor
                 ),
                 child: LayoutBuilder(builder: (context, constraints) {
-                  log('ComposerView::build:tablet:constraints: $constraints');
                   return Stack(
                     children: [
                       Column(
@@ -579,6 +577,7 @@ class ComposerView extends GetWidget<ComposerController> {
                                     base64Str: base64Str,
                                   );
                                 },
+                                onEditorTextSizeChanged: controller.richTextWebController.onEditorTextSizeChanged,
                                 width: constraints.maxWidth,
                                 height: constraints.maxHeight,
                               )),

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

@@ -23,12 +23,16 @@ import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 
 class RichTextWebController extends BaseRichTextController {
 
+  static const List<int> fontSizeList = [10, 12, 14, 15, 16, 18, 24, 36, 48, 64];
+  static const int fontSizeDefault = 16;
+
   final editorController = HtmlEditorController();
 
   final listTextStyleApply = RxList<RichTextStyleType>();
   final selectedTextColor = Colors.black.obs;
   final selectedTextBackgroundColor = Colors.white.obs;
   final selectedFontName = FontNameType.sansSerif.obs;
+  final selectedFontSize = RxInt(fontSizeDefault);
   final codeViewState = CodeViewState.disabled.obs;
   final selectedParagraph = ParagraphType.alignLeft.obs;
   final selectedOrderList = OrderListType.bulletedList.obs;
@@ -61,6 +65,10 @@ class RichTextWebController extends BaseRichTextController {
     _updateParagraph(settings);
   }
 
+  void onEditorTextSizeChanged(int? size) {
+    _updateFontSize(size);
+  }
+
   void _updateTextStyle(EditorSettings settings) {
     listTextStyleApply.clear();
 
@@ -92,11 +100,20 @@ class RichTextWebController extends BaseRichTextController {
     }
   }
 
+  void _updateFontSize(int? size) {
+    log('RichTextWebController::_updateFontSize():size: $size');
+    if (size != null && fontSizeList.contains(size)) {
+      selectedFontSize.value = size;
+    }
+  }
+
   void _updateTextColor(EditorSettings settings) {
+    log('RichTextWebController::_updateTextColor():foregroundColor: ${settings.foregroundColor}');
     selectedTextColor.value = settings.foregroundColor;
   }
 
   void _updateBackgroundTextColor(EditorSettings settings) {
+    log('RichTextWebController::_updateBackgroundTextColor():backgroundColor: ${settings.backgroundColor}');
     selectedTextBackgroundColor.value = settings.backgroundColor;
   }
 
@@ -199,6 +216,11 @@ class RichTextWebController extends BaseRichTextController {
       value: fontSelected.value);
   }
 
+  void applyNewFontSize(int? newSize) {
+    selectedFontSize.value = newSize ?? fontSizeDefault;
+    editorController.setFontSize(newSize ?? fontSizeDefault);
+  }
+
   bool get isMenuFontOpen => menuFontStatus.value == DropdownMenuFontStatus.open;
 
   bool get isMenuHeaderStyleOpen => menuHeaderStyleStatus.value == DropdownMenuFontStatus.open;

lib/features/composer/presentation/styles/web/toolbar_rich_text_builder_style.dart

@@ -0,0 +1,9 @@
+
+import 'package:flutter/material.dart';
+
+class ToolbarRichTextBuilderStyle {
+  static const double itemHorizontalSpace = 8.0;
+  static const double itemVerticalSpace = 8.0;
+
+  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 20, top: 8, bottom: 8);
+}

lib/features/composer/presentation/view/web/web_editor_view.dart

@@ -28,6 +28,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
   final OnEditorSettingsChange? onEditorSettings;
   final OnImageUploadSuccessAction? onImageUploadSuccessAction;
   final OnImageUploadFailureAction? onImageUploadFailureAction;
+  final OnEditorTextSizeChanged? onEditorTextSizeChanged;
   final double? width;
   final double? height;
 
@@ -45,6 +46,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
     this.onEditorSettings,
     this.onImageUploadSuccessAction,
     this.onImageUploadFailureAction,
+    this.onEditorTextSizeChanged,
     this.width,
     this.height,
   });
@@ -71,6 +73,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
           onEditorSettings: onEditorSettings,
           onImageUploadSuccessAction: onImageUploadSuccessAction,
           onImageUploadFailureAction: onImageUploadFailureAction,
+          onEditorTextSizeChanged: onEditorTextSizeChanged,
           width: width,
           height: height,
         );
@@ -94,6 +97,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
             onEditorSettings: onEditorSettings,
             onImageUploadSuccessAction: onImageUploadSuccessAction,
             onImageUploadFailureAction: onImageUploadFailureAction,
+            onEditorTextSizeChanged: onEditorTextSizeChanged,
             width: width,
             height: height,
           ),
@@ -119,6 +123,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
                 onEditorSettings: onEditorSettings,
                 onImageUploadSuccessAction: onImageUploadSuccessAction,
                 onImageUploadFailureAction: onImageUploadFailureAction,
+                onEditorTextSizeChanged: onEditorTextSizeChanged,
                 width: width,
                 height: height,
               );
@@ -151,6 +156,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
               onEditorSettings: onEditorSettings,
               onImageUploadSuccessAction: onImageUploadSuccessAction,
               onImageUploadFailureAction: onImageUploadFailureAction,
+              onEditorTextSizeChanged: onEditorTextSizeChanged,
               width: width,
               height: height,
             );
@@ -179,6 +185,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
                 onEditorSettings: onEditorSettings,
                 onImageUploadSuccessAction: onImageUploadSuccessAction,
                 onImageUploadFailureAction: onImageUploadFailureAction,
+                onEditorTextSizeChanged: onEditorTextSizeChanged,
                 width: width,
                 height: height,
               );
@@ -198,6 +205,7 @@ class WebEditorView extends StatelessWidget with EditorViewMixin {
           onEditorSettings: onEditorSettings,
           onImageUploadSuccessAction: onImageUploadSuccessAction,
           onImageUploadFailureAction: onImageUploadFailureAction,
+          onEditorTextSizeChanged: onEditorTextSizeChanged,
           width: width,
           height: height,
         );

lib/features/composer/presentation/widgets/web/toolbar_rich_text_builder.dart

@@ -1,6 +1,5 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/utils/app_logger.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -15,7 +14,9 @@ import 'package:tmail_ui_user/features/composer/presentation/model/header_style_
 import 'package:tmail_ui_user/features/composer/presentation/model/order_list_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/paragraph_type.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/rich_text_style_type.dart';
+import 'package:tmail_ui_user/features/composer/presentation/styles/web/toolbar_rich_text_builder_style.dart';
 import 'package:tmail_ui_user/features/composer/presentation/widgets/drop_down_menu_header_style_widget.dart';
+import 'package:tmail_ui_user/features/composer/presentation/widgets/web/dropdown_menu_font_size_widget.dart';
 
 class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin {
 
@@ -43,12 +44,13 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
 
       return PointerInterceptor(
         child: Container(
-          padding: padding ?? const EdgeInsetsDirectional.only(start: 20, top: 8, bottom: 8),
+          padding: padding ?? ToolbarRichTextBuilderStyle.padding,
           decoration: decoration,
           width: double.infinity,
           child: Wrap(
             crossAxisAlignment: WrapCrossAlignment.center,
-              runSpacing: 8,
+            runSpacing: ToolbarRichTextBuilderStyle.itemVerticalSpace,
+            spacing: ToolbarRichTextBuilderStyle.itemHorizontalSpace,
             children: [
               if (extendedOption?.isNotEmpty == true)
                 ...extendedOption!,
@@ -60,31 +62,37 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                     icon: SvgPicture.asset(
                       RichTextStyleType.headerStyle.getIcon(_imagePaths),
                       colorFilter: AppColor.colorDefaultRichTextButton.withOpacity(opacity).asFilter(),
-                            fit: BoxFit.fill),
+                      fit: BoxFit.fill
+                    ),
                     padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
                     tooltip: RichTextStyleType.headerStyle.getTooltipButton(context)
                   ),
                   items: HeaderStyleType.values,
                   onMenuStateChange: (isOpen) {
-                        log('ComposerView::_buildToolbarRichTextWidget(): MenuHeaderStyleStatus: $isOpen');
                     final newStatus = isOpen
                       ? DropdownMenuFontStatus.open
                       : DropdownMenuFontStatus.closed;
                     richTextWebController.menuHeaderStyleStatus.value = newStatus;
                   },
-                      onChanged: (newStyle) => richTextWebController.applyHeaderStyle(newStyle)),
+                  onChanged: richTextWebController.applyHeaderStyle
+                ),
               ),
               AbsorbPointer(
                 absorbing: codeViewEnabled,
-                  child: Container(
+                child: DropdownMenuFontSizeWidget(
+                  onChanged: richTextWebController.applyNewFontSize,
+                  selectedFontSize: richTextWebController.selectedFontSize.value
+                ),
+              ),
+              AbsorbPointer(
+                absorbing: codeViewEnabled,
+                child: SizedBox(
                   width: 130,
-                      padding: const EdgeInsets.only(left: 4.0, right: 4.0),
                   child: DropDownButtonWidget<FontNameType>(
                     items: FontNameType.values,
                     itemSelected: richTextWebController.selectedFontName.value,
                     onChanged: (newFont) => richTextWebController.applyNewFontStyle(newFont),
                     onMenuStateChange: (isOpen) {
-                            log('ComposerView::_buildToolbarRichTextWidget(): MenuFontStatus: $isOpen');
                       final newStatus = isOpen
                         ? DropdownMenuFontStatus.open
                         : DropdownMenuFontStatus.closed;
@@ -100,24 +108,26 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                       : Colors.white,
                     iconArrowDown: SvgPicture.asset(_imagePaths.icStyleArrowDown),
                     tooltip: RichTextStyleType.fontName.getTooltipButton(context),
-                          supportSelectionIcon: true)),
+                    supportSelectionIcon: true
+                  )
                 ),
-                Padding(
+              ),
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
+              AbsorbPointer(
-                  child: AbsorbPointer(
                 absorbing: codeViewEnabled,
                 child: buildWrapIconStyleText(
                   icon: buildIconWithTooltip(
                     path: RichTextStyleType.textColor.getIcon(_imagePaths),
                     color: richTextWebController.selectedTextColor.value,
                     tooltip: RichTextStyleType.textColor.getTooltipButton(context),
-                            opacity: opacity),
+                    opacity: opacity
-                        onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.textColor)),
+                  ),
+                  onTap: () => richTextWebController.applyRichTextStyle(
+                    context,
+                    RichTextStyleType.textColor
+                  )
                 ),
               ),
-                Padding(
+              AbsorbPointer(
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
-                  child: AbsorbPointer(
                 absorbing: codeViewEnabled,
                 child: buildWrapIconStyleText(
                   padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 7),
@@ -126,13 +136,15 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                     iconData: RichTextStyleType.textBackgroundColor.getIconData(),
                     colorSelected: richTextWebController.selectedTextBackgroundColor.value,
                     tooltip: RichTextStyleType.textBackgroundColor.getTooltipButton(context),
-                            opacity: opacity),
+                    opacity: opacity
-                        onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.textBackgroundColor)),
+                  ),
+                  onTap: () => richTextWebController.applyRichTextStyle(
+                    context,
+                    RichTextStyleType.textBackgroundColor
+                  )
                 ),
               ),
-                Padding(
+              buildWrapIconStyleText(
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
-                  child: buildWrapIconStyleText(
                 hasDropdown: false,
                 padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
                 icon: Wrap(children: [
@@ -143,7 +155,11 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                       isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.bold),
                       tooltip: RichTextStyleType.bold.getTooltipButton(context),
                       opacity: opacity,
-                              onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.bold)),
+                      onTap: () => richTextWebController.applyRichTextStyle(
+                        context,
+                        RichTextStyleType.bold
+                      )
+                    ),
                   ),
                   AbsorbPointer(
                     absorbing: codeViewEnabled,
@@ -152,7 +168,11 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                       isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.italic),
                       tooltip: RichTextStyleType.italic.getTooltipButton(context),
                       opacity: opacity,
-                              onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.italic)),
+                      onTap: () => richTextWebController.applyRichTextStyle(
+                        context,
+                        RichTextStyleType.italic
+                      )
+                    ),
                   ),
                   AbsorbPointer(
                     absorbing: codeViewEnabled,
@@ -161,23 +181,28 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                       isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.underline),
                       tooltip: RichTextStyleType.underline.getTooltipButton(context),
                       opacity: opacity,
-                              onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.underline)),
+                      onTap: () => richTextWebController.applyRichTextStyle(
+                        context,
+                        RichTextStyleType.underline
+                      )
+                    ),
                   ),
                   AbsorbPointer(
                     absorbing: codeViewEnabled,
                     child: buildIconStyleText(
                       path: RichTextStyleType.strikeThrough.getIcon(_imagePaths),
-                              isSelected: richTextWebController.isTextStyleTypeSelected(
+                      isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.strikeThrough),
-                                  RichTextStyleType.strikeThrough),
                       tooltip: RichTextStyleType.strikeThrough.getTooltipButton(context),
                       opacity: opacity,
-                              onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.strikeThrough)),
+                      onTap: () => richTextWebController.applyRichTextStyle(
+                        context,
+                        RichTextStyleType.strikeThrough
                       )
-                      ])),
                     ),
-                Padding(
+                  )
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
+                ])
-                  child: AbsorbPointer(
+              ),
+              AbsorbPointer(
                 absorbing: codeViewEnabled,
                 child: PopupMenuOverlayWidget(
                   controller: richTextWebController.menuParagraphController,
@@ -195,13 +220,12 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                       path: richTextWebController.selectedParagraph.value.getIcon(_imagePaths),
                       color: AppColor.colorDefaultRichTextButton,
                       opacity: opacity,
-                            tooltip: RichTextStyleType.paragraph.getTooltipButton(context))),
+                      tooltip: RichTextStyleType.paragraph.getTooltipButton(context)
+                    )
                   ),
                 ),
               ),
-                Padding(
+              AbsorbPointer(
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
-                  child: AbsorbPointer(
                 absorbing: codeViewEnabled,
                 child: PopupMenuOverlayWidget(
                   controller: richTextWebController.menuOrderListController,
@@ -219,7 +243,8 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                       path: richTextWebController.selectedOrderList.value.getIcon(_imagePaths),
                       color: AppColor.colorDefaultRichTextButton,
                       opacity: opacity,
-                          tooltip: RichTextStyleType.orderList.getTooltipButton(context))),
+                      tooltip: RichTextStyleType.orderList.getTooltipButton(context)
+                    )
                   ),
                 ),
               )

lib/features/composer/presentation/widgets/web/web_editor_widget.dart

@@ -10,6 +10,7 @@ typedef OnMouseDownEditorAction = Function(BuildContext context);
 typedef OnEditorSettingsChange = Function(EditorSettings settings);
 typedef OnImageUploadSuccessAction = Function(FileUpload fileUpload);
 typedef OnImageUploadFailureAction = Function(FileUpload? fileUpload, String? base64Str, UploadError error);
+typedef OnEditorTextSizeChanged = Function(int? size);
 
 class WebEditorWidget extends StatefulWidget {
 
@@ -24,6 +25,7 @@ class WebEditorWidget extends StatefulWidget {
   final OnEditorSettingsChange? onEditorSettings;
   final OnImageUploadSuccessAction? onImageUploadSuccessAction;
   final OnImageUploadFailureAction? onImageUploadFailureAction;
+  final OnEditorTextSizeChanged? onEditorTextSizeChanged;
   final double? width;
   final double? height;
 
@@ -40,6 +42,7 @@ class WebEditorWidget extends StatefulWidget {
     this.onEditorSettings,
     this.onImageUploadSuccessAction,
     this.onImageUploadFailureAction,
+    this.onEditorTextSizeChanged,
     this.width,
     this.height,
   });
@@ -111,6 +114,7 @@ class _WebEditorState extends State<WebEditorWidget> {
         onChangeCodeview: widget.onChangeContent,
         onImageUpload: widget.onImageUploadSuccessAction,
         onImageUploadError: widget.onImageUploadFailureAction,
+        onTextFontSizeChanged: widget.onEditorTextSizeChanged,
       ),
     );
   }

pubspec.lock

@@ -922,7 +922,7 @@ packages:
     description:
       path: "."
       ref: email_supported
-      resolved-ref: f9dc6f957500ea2978fe5212512326a5028aee27
+      resolved-ref: "96c199b233c5afde583295890ffbd880ea4c7d8c"
       url: "https://github.com/linagora/html-editor-enhanced.git"
     source: git
     version: "2.5.1"