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,187 +44,211 @@ 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,
+            crossAxisAlignment: WrapCrossAlignment.center,
-              runSpacing: 8,
+            runSpacing: ToolbarRichTextBuilderStyle.itemVerticalSpace,
-              children: [
+            spacing: ToolbarRichTextBuilderStyle.itemHorizontalSpace,
-                if (extendedOption?.isNotEmpty == true)
+            children: [
-                  ...extendedOption!,
+              if (extendedOption?.isNotEmpty == true)
-                AbsorbPointer(
+                ...extendedOption!,
-                  absorbing: codeViewEnabled,
+              AbsorbPointer(
-                  child: DropDownMenuHeaderStyleWidget(
+                absorbing: codeViewEnabled,
-                      icon: buildWrapIconStyleText(
+                child: DropDownMenuHeaderStyleWidget(
-                          isSelected: richTextWebController.isMenuHeaderStyleOpen,
+                  icon: buildWrapIconStyleText(
-                          icon: SvgPicture.asset(
+                    isSelected: richTextWebController.isMenuHeaderStyleOpen,
-                            RichTextStyleType.headerStyle.getIcon(_imagePaths),
+                    icon: SvgPicture.asset(
-                            colorFilter: AppColor.colorDefaultRichTextButton.withOpacity(opacity).asFilter(),
+                      RichTextStyleType.headerStyle.getIcon(_imagePaths),
-                            fit: BoxFit.fill),
+                      colorFilter: AppColor.colorDefaultRichTextButton.withOpacity(opacity).asFilter(),
-                          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
+                      fit: BoxFit.fill
-                          tooltip: RichTextStyleType.headerStyle.getTooltipButton(context)
+                    ),
-                      ),
+                    padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
-                      items: HeaderStyleType.values,
+                    tooltip: RichTextStyleType.headerStyle.getTooltipButton(context)
-                      onMenuStateChange: (isOpen) {
-                        log('ComposerView::_buildToolbarRichTextWidget(): MenuHeaderStyleStatus: $isOpen');
-                        final newStatus = isOpen
-                            ? DropdownMenuFontStatus.open
-                            : DropdownMenuFontStatus.closed;
-                        richTextWebController.menuHeaderStyleStatus.value = newStatus;
-                      },
-                      onChanged: (newStyle) => richTextWebController.applyHeaderStyle(newStyle)),
-                ),
-                AbsorbPointer(
-                  absorbing: codeViewEnabled,
-                  child: Container(
-                      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;
-                            richTextWebController.menuFontStatus.value = newStatus;
-                          },
-                          heightItem: 40,
-                          sizeIconChecked: 16,
-                          radiusButton: 8,
-                          opacity: opacity,
-                          dropdownWidth: 200,
-                          colorButton: richTextWebController.isMenuFontOpen
-                              ? AppColor.colorBackgroundWrapIconStyleCode
-                              : Colors.white,
-                          iconArrowDown: SvgPicture.asset(_imagePaths.icStyleArrowDown),
-                          tooltip: RichTextStyleType.fontName.getTooltipButton(context),
-                          supportSelectionIcon: true)),
-                ),
-                Padding(
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
-                  child: AbsorbPointer(
-                    absorbing: codeViewEnabled,
-                    child: buildWrapIconStyleText(
-                        icon: buildIconWithTooltip(
-                            path: RichTextStyleType.textColor.getIcon(_imagePaths),
-                            color: richTextWebController.selectedTextColor.value,
-                            tooltip: RichTextStyleType.textColor.getTooltipButton(context),
-                            opacity: opacity),
-                        onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.textColor)),
                   ),
+                  items: HeaderStyleType.values,
+                  onMenuStateChange: (isOpen) {
+                    final newStatus = isOpen
+                      ? DropdownMenuFontStatus.open
+                      : DropdownMenuFontStatus.closed;
+                    richTextWebController.menuHeaderStyleStatus.value = newStatus;
+                  },
+                  onChanged: richTextWebController.applyHeaderStyle
                 ),
-                Padding(
+              ),
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
+              AbsorbPointer(
-                  child: AbsorbPointer(
+                absorbing: codeViewEnabled,
-                    absorbing: codeViewEnabled,
+                child: DropdownMenuFontSizeWidget(
-                    child: buildWrapIconStyleText(
+                  onChanged: richTextWebController.applyNewFontSize,
-                        padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 7),
+                  selectedFontSize: richTextWebController.selectedFontSize.value
-                        spacing: 3,
+                ),
-                        icon: buildIconColorBackgroundText(
+              ),
-                            iconData: RichTextStyleType.textBackgroundColor.getIconData(),
+              AbsorbPointer(
-                            colorSelected: richTextWebController.selectedTextBackgroundColor.value,
+                absorbing: codeViewEnabled,
-                            tooltip: RichTextStyleType.textBackgroundColor.getTooltipButton(context),
+                child: SizedBox(
-                            opacity: opacity),
+                  width: 130,
-                        onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.textBackgroundColor)),
+                  child: DropDownButtonWidget<FontNameType>(
+                    items: FontNameType.values,
+                    itemSelected: richTextWebController.selectedFontName.value,
+                    onChanged: (newFont) => richTextWebController.applyNewFontStyle(newFont),
+                    onMenuStateChange: (isOpen) {
+                      final newStatus = isOpen
+                        ? DropdownMenuFontStatus.open
+                        : DropdownMenuFontStatus.closed;
+                      richTextWebController.menuFontStatus.value = newStatus;
+                    },
+                    heightItem: 40,
+                    sizeIconChecked: 16,
+                    radiusButton: 8,
+                    opacity: opacity,
+                    dropdownWidth: 200,
+                    colorButton: richTextWebController.isMenuFontOpen
+                      ? AppColor.colorBackgroundWrapIconStyleCode
+                      : Colors.white,
+                    iconArrowDown: SvgPicture.asset(_imagePaths.icStyleArrowDown),
+                    tooltip: RichTextStyleType.fontName.getTooltipButton(context),
+                    supportSelectionIcon: true
+                  )
+                ),
+              ),
+              AbsorbPointer(
+                absorbing: codeViewEnabled,
+                child: buildWrapIconStyleText(
+                  icon: buildIconWithTooltip(
+                    path: RichTextStyleType.textColor.getIcon(_imagePaths),
+                    color: richTextWebController.selectedTextColor.value,
+                    tooltip: RichTextStyleType.textColor.getTooltipButton(context),
+                    opacity: opacity
                   ),
+                  onTap: () => richTextWebController.applyRichTextStyle(
+                    context,
+                    RichTextStyleType.textColor
+                  )
                 ),
-                Padding(
+              ),
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
+              AbsorbPointer(
-                  child: buildWrapIconStyleText(
+                absorbing: codeViewEnabled,
-                      hasDropdown: false,
+                child: buildWrapIconStyleText(
-                      padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
+                  padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 7),
-                      icon: Wrap(children: [
+                  spacing: 3,
-                        AbsorbPointer(
+                  icon: buildIconColorBackgroundText(
-                          absorbing: codeViewEnabled,
+                    iconData: RichTextStyleType.textBackgroundColor.getIconData(),
-                          child: buildIconStyleText(
+                    colorSelected: richTextWebController.selectedTextBackgroundColor.value,
-                              path: RichTextStyleType.bold.getIcon(_imagePaths),
+                    tooltip: RichTextStyleType.textBackgroundColor.getTooltipButton(context),
-                              isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.bold),
+                    opacity: opacity
-                              tooltip: RichTextStyleType.bold.getTooltipButton(context),
+                  ),
-                              opacity: opacity,
+                  onTap: () => richTextWebController.applyRichTextStyle(
-                              onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.bold)),
+                    context,
-                        ),
+                    RichTextStyleType.textBackgroundColor
-                        AbsorbPointer(
+                  )
-                          absorbing: codeViewEnabled,
-                          child: buildIconStyleText(
-                              path: RichTextStyleType.italic.getIcon(_imagePaths),
-                              isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.italic),
-                              tooltip: RichTextStyleType.italic.getTooltipButton(context),
-                              opacity: opacity,
-                              onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.italic)),
-                        ),
-                        AbsorbPointer(
-                          absorbing: codeViewEnabled,
-                          child: buildIconStyleText(
-                              path: RichTextStyleType.underline.getIcon(_imagePaths),
-                              isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.underline),
-                              tooltip: RichTextStyleType.underline.getTooltipButton(context),
-                              opacity: opacity,
-                              onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.underline)),
-                        ),
-                        AbsorbPointer(
-                          absorbing: codeViewEnabled,
-                          child: buildIconStyleText(
-                              path: RichTextStyleType.strikeThrough.getIcon(_imagePaths),
-                              isSelected: richTextWebController.isTextStyleTypeSelected(
-                                  RichTextStyleType.strikeThrough),
-                              tooltip: RichTextStyleType.strikeThrough.getTooltipButton(context),
-                              opacity: opacity,
-                              onTap: () => richTextWebController.applyRichTextStyle(context, RichTextStyleType.strikeThrough)),
-                        )
-                      ])),
                 ),
-                Padding(
+              ),
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
+              buildWrapIconStyleText(
-                  child: AbsorbPointer(
+                hasDropdown: false,
+                padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 5),
+                icon: Wrap(children: [
+                  AbsorbPointer(
                     absorbing: codeViewEnabled,
-                    child: PopupMenuOverlayWidget(
+                    child: buildIconStyleText(
-                      controller: richTextWebController.menuParagraphController,
+                      path: RichTextStyleType.bold.getIcon(_imagePaths),
-                      listButtonAction: ParagraphType.values
+                      isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.bold),
-                        .map((paragraph) => paragraph.buildButtonWidget(
+                      tooltip: RichTextStyleType.bold.getTooltipButton(context),
-                            context,
+                      opacity: opacity,
-                            _imagePaths,
+                      onTap: () => richTextWebController.applyRichTextStyle(
-                            (paragraph) => richTextWebController.applyParagraphType(paragraph)))
+                        context,
-                        .toList(),
+                        RichTextStyleType.bold
-                      iconButton: buildWrapIconStyleText(
+                      )
-                          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
-                          spacing: 3,
-                          isSelected: richTextWebController.focusMenuParagraph.value,
-                          icon: buildIconWithTooltip(
-                            path: richTextWebController.selectedParagraph.value.getIcon(_imagePaths),
-                            color: AppColor.colorDefaultRichTextButton,
-                            opacity: opacity,
-                            tooltip: RichTextStyleType.paragraph.getTooltipButton(context))),
                     ),
                   ),
-                ),
+                  AbsorbPointer(
-                Padding(
-                  padding: const EdgeInsetsDirectional.only(end: 4.0),
-                  child: AbsorbPointer(
                     absorbing: codeViewEnabled,
-                    child: PopupMenuOverlayWidget(
+                    child: buildIconStyleText(
-                      controller: richTextWebController.menuOrderListController,
+                      path: RichTextStyleType.italic.getIcon(_imagePaths),
-                      listButtonAction: OrderListType.values
+                      isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.italic),
-                        .map((orderType) => orderType.buildButtonWidget(
+                      tooltip: RichTextStyleType.italic.getTooltipButton(context),
-                          context,
+                      opacity: opacity,
-                          _imagePaths,
+                      onTap: () => richTextWebController.applyRichTextStyle(
-                          (orderType) => richTextWebController.applyOrderListType(orderType)))
+                        context,
-                        .toList(),
+                        RichTextStyleType.italic
-                      iconButton: buildWrapIconStyleText(
+                      )
-                        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
-                        spacing: 3,
-                        isSelected: richTextWebController.focusMenuOrderList.value,
-                        icon: buildIconWithTooltip(
-                          path: richTextWebController.selectedOrderList.value.getIcon(_imagePaths),
-                          color: AppColor.colorDefaultRichTextButton,
-                          opacity: opacity,
-                          tooltip: RichTextStyleType.orderList.getTooltipButton(context))),
                     ),
                   ),
-                )
+                  AbsorbPointer(
-              ]
+                    absorbing: codeViewEnabled,
+                    child: buildIconStyleText(
+                      path: RichTextStyleType.underline.getIcon(_imagePaths),
+                      isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.underline),
+                      tooltip: RichTextStyleType.underline.getTooltipButton(context),
+                      opacity: opacity,
+                      onTap: () => richTextWebController.applyRichTextStyle(
+                        context,
+                        RichTextStyleType.underline
+                      )
+                    ),
+                  ),
+                  AbsorbPointer(
+                    absorbing: codeViewEnabled,
+                    child: buildIconStyleText(
+                      path: RichTextStyleType.strikeThrough.getIcon(_imagePaths),
+                      isSelected: richTextWebController.isTextStyleTypeSelected(RichTextStyleType.strikeThrough),
+                      tooltip: RichTextStyleType.strikeThrough.getTooltipButton(context),
+                      opacity: opacity,
+                      onTap: () => richTextWebController.applyRichTextStyle(
+                        context,
+                        RichTextStyleType.strikeThrough
+                      )
+                    ),
+                  )
+                ])
+              ),
+              AbsorbPointer(
+                absorbing: codeViewEnabled,
+                child: PopupMenuOverlayWidget(
+                  controller: richTextWebController.menuParagraphController,
+                  listButtonAction: ParagraphType.values
+                    .map((paragraph) => paragraph.buildButtonWidget(
+                      context,
+                      _imagePaths,
+                      (paragraph) => richTextWebController.applyParagraphType(paragraph)))
+                    .toList(),
+                  iconButton: buildWrapIconStyleText(
+                    padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
+                    spacing: 3,
+                    isSelected: richTextWebController.focusMenuParagraph.value,
+                    icon: buildIconWithTooltip(
+                      path: richTextWebController.selectedParagraph.value.getIcon(_imagePaths),
+                      color: AppColor.colorDefaultRichTextButton,
+                      opacity: opacity,
+                      tooltip: RichTextStyleType.paragraph.getTooltipButton(context)
+                    )
+                  ),
+                ),
+              ),
+              AbsorbPointer(
+                absorbing: codeViewEnabled,
+                child: PopupMenuOverlayWidget(
+                  controller: richTextWebController.menuOrderListController,
+                  listButtonAction: OrderListType.values
+                    .map((orderType) => orderType.buildButtonWidget(
+                      context,
+                      _imagePaths,
+                      (orderType) => richTextWebController.applyOrderListType(orderType)))
+                    .toList(),
+                  iconButton: buildWrapIconStyleText(
+                    padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
+                    spacing: 3,
+                    isSelected: richTextWebController.focusMenuOrderList.value,
+                    icon: buildIconWithTooltip(
+                      path: richTextWebController.selectedOrderList.value.getIcon(_imagePaths),
+                      color: AppColor.colorDefaultRichTextButton,
+                      opacity: opacity,
+                      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"