Fix focus indicator still display, but can not fill text in composer …

…body after change `color background`, `font name`
linagora · Oct 2, 2024 · f2566b9 · f2566b9
1 parent 2dce30e
commit f2566b9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/lib/features/composer/presentation/controller/rich_text_web_controller.dart b/lib/features/composer/presentation/controller/rich_text_web_controller.dart
@@ -25,6 +25,7 @@ class RichTextWebController extends BaseRichTextController {
 
   static const List<int> fontSizeList = [10, 12, 14, 15, 16, 18, 24, 36, 48, 64];
   static const int fontSizeDefault = 16;
+  static const int _applyStyleDelayTimeMilliseconds = 500;
 
   final editorController = HtmlEditorController();
 
@@ -151,8 +152,8 @@ class RichTextWebController extends BaseRichTextController {
         openMenuSelectColor(
           context,
           selectedTextBackgroundColor.value,
-          onResetToDefault: () => applyBackgroundColor(Colors.white),
-          onSelectColor: applyBackgroundColor
+          onResetToDefault: () => _applyBackgroundColor(Colors.white),
+          onSelectColor: _applyBackgroundColor
         );
         break;
       default:
@@ -162,24 +163,26 @@ class RichTextWebController extends BaseRichTextController {
     }
   }
 
-  void _applyForegroundColor(Color? selectedColor) {
+  Future<void> _applyForegroundColor(Color? selectedColor) async {
     final newColor = selectedColor ?? Colors.black;
     final colorAsString = newColor.toHexTriplet();
     log('RichTextWebController::_applyForegroundColor():colorAsString: $colorAsString');
     selectedTextColor.value = newColor;
     editorController.execSummernoteAPI(
       RichTextStyleType.textColor.summernoteNameAPI,
       value: colorAsString);
+    await _requestEditorFocus();
   }
 
-  void applyBackgroundColor(Color? selectedColor) {
+  Future<void> _applyBackgroundColor(Color? selectedColor) async {
     final newColor = selectedColor ?? Colors.white;
     final colorAsString = newColor.toHexTriplet();
     log('RichTextWebController::_applyBackgroundColor():colorAsString: $colorAsString');
     selectedTextBackgroundColor.value = newColor;
     editorController.execSummernoteAPI(
       RichTextStyleType.textBackgroundColor.summernoteNameAPI,
       value: colorAsString);
+    await _requestEditorFocus();
   }
 
   void _selectTextStyleType(RichTextStyleType textStyleType) {
@@ -197,17 +200,19 @@ class RichTextWebController extends BaseRichTextController {
     editorController.insertHtml("<div>${inlineImage.base64Uri ?? ''}</div><br>");
   }
 
-  void applyNewFontStyle(FontNameType? newFont) {
+  Future<void> applyNewFontStyle(FontNameType? newFont) async {
     final fontSelected = newFont ?? FontNameType.sansSerif;
     selectedFontName.value = fontSelected;
     editorController.execSummernoteAPI(
       RichTextStyleType.fontName.summernoteNameAPI,
       value: fontSelected.value);
+    await _requestEditorFocus();
   }
 
-  void applyNewFontSize(int? newSize) {
+  Future<void> applyNewFontSize(int? newSize) async {
     selectedFontSize.value = newSize ?? fontSizeDefault;
     editorController.setFontSize(newSize ?? fontSizeDefault);
+    await _requestEditorFocus();
   }
 
   bool get isMenuFontOpen => menuFontStatus.value == DropdownMenuFontStatus.open;
@@ -240,22 +245,23 @@ class RichTextWebController extends BaseRichTextController {
     editorController.toggleCodeView();
   }
 
-  void applyHeaderStyle(HeaderStyleType? newStyle) {
+  Future<void> applyHeaderStyle(HeaderStyleType? newStyle) async {
     final styleSelected = newStyle ?? HeaderStyleType.normal;
     if (styleSelected == HeaderStyleType.blockquote || styleSelected == HeaderStyleType.code) {
       editorController.execCommand(
         RichTextStyleType.headerStyle.commandAction,
         argument: styleSelected.styleValue);
-      editorController.setFocus();
     } else {
       editorController.execSummernoteAPI(styleSelected.summernoteNameAPI);
     }
+    await _requestEditorFocus();
   }
 
-  void applyParagraphType(ParagraphType newParagraph) {
+  Future<void> applyParagraphType(ParagraphType newParagraph) async {
     selectedParagraph.value = newParagraph;
     editorController.execSummernoteAPI(newParagraph.summernoteNameAPI);
     menuParagraphController.hideMenu();
+    await _requestEditorFocus();
   }
 
   void closeAllMenuPopup() {
@@ -273,10 +279,11 @@ class RichTextWebController extends BaseRichTextController {
     }
   }
 
-  void applyOrderListType(OrderListType newOrderList) {
+  Future<void> applyOrderListType(OrderListType newOrderList) async {
     selectedOrderList.value = newOrderList;
     editorController.execSummernoteAPI(newOrderList.summernoteNameAPI);
     menuOrderListController.hideMenu();
+    await _requestEditorFocus();
   }
 
   void insertImageAsBase64({required PlatformFile platformFile, int? maxWidth}) {
@@ -297,14 +304,19 @@ class RichTextWebController extends BaseRichTextController {
 
     formattingOptionsState.value = newState;
 
-    if (isFormattingOptionsEnabled) {
-      FocusManager.instance.primaryFocus?.unfocus();
-      editorController.setFocus();
-    }
+    FocusManager.instance.primaryFocus?.unfocus();
+    editorController.setFocus();
   }
 
   bool get isFormattingOptionsEnabled => formattingOptionsState.value == FormattingOptionsState.enabled;
 
+  Future<void> _requestEditorFocus() async {
+    await Future.delayed(
+      const Duration(milliseconds: _applyStyleDelayTimeMilliseconds)
+    );
+    editorController.setFocus();
+  }
+
   @override
   void onClose() {
     menuParagraphController.dispose();

diff --git a/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart b/lib/features/composer/presentation/mixin/rich_text_button_mixin.dart
@@ -242,14 +242,14 @@ mixin RichTextButtonMixin {
                 : DropdownMenuFontStatus.closed;
             richTextController.menuHeaderStyleStatus.value = newStatus;
           },
-          onChanged: (newStyle) => richTextController.applyHeaderStyle(newStyle)),
+          onChanged: richTextController.applyHeaderStyle),
       Container(
           width: 130,
           padding: const EdgeInsets.only(left: 4.0, right: 4.0),
           child: DropDownButtonWidget<FontNameType>(
               items: FontNameType.values,
               itemSelected: richTextController.selectedFontName.value,
-              onChanged: (newFont) => richTextController.applyNewFontStyle(newFont),
+              onChanged: richTextController.applyNewFontStyle,
               onMenuStateChange: (isOpen) {
                 final newStatus = isOpen
                     ? DropdownMenuFontStatus.open
@@ -325,7 +325,7 @@ mixin RichTextButtonMixin {
               .map((paragraph) => paragraph.buildButtonWidget(
                   context,
                   _imagePaths,
-                  (paragraph) => richTextController.applyParagraphType(paragraph)))
+                  richTextController.applyParagraphType))
               .toList(),
           iconButton: buildWrapIconStyleText(
               padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
@@ -346,7 +346,7 @@ mixin RichTextButtonMixin {
               .map((orderType) => orderType.buildButtonWidget(
                   context,
                   _imagePaths,
-                  (orderType) => richTextController.applyOrderListType(orderType)))
+                  richTextController.applyOrderListType))
               .toList(),
           iconButton: buildWrapIconStyleText(
               padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),

diff --git a/lib/features/composer/presentation/widgets/web/toolbar_rich_text_builder.dart b/lib/features/composer/presentation/widgets/web/toolbar_rich_text_builder.dart
@@ -91,7 +91,7 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                   child: DropDownButtonWidget<FontNameType>(
                     items: FontNameType.values,
                     itemSelected: richTextWebController.selectedFontName.value,
-                    onChanged: (newFont) => richTextWebController.applyNewFontStyle(newFont),
+                    onChanged: richTextWebController.applyNewFontStyle,
                     onMenuStateChange: (isOpen) {
                       final newStatus = isOpen
                         ? DropdownMenuFontStatus.open
@@ -211,7 +211,7 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                     .map((paragraph) => paragraph.buildButtonWidget(
                       context,
                       _imagePaths,
-                      (paragraph) => richTextWebController.applyParagraphType(paragraph)))
+                      richTextWebController.applyParagraphType))
                     .toList(),
                   iconButton: buildWrapIconStyleText(
                     padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),
@@ -235,7 +235,7 @@ class ToolbarRichTextWebBuilder extends StatelessWidget with RichTextButtonMixin
                     .map((orderType) => orderType.buildButtonWidget(
                       context,
                       _imagePaths,
-                      (orderType) => richTextWebController.applyOrderListType(orderType)))
+                      richTextWebController.applyOrderListType))
                     .toList(),
                   iconButton: buildWrapIconStyleText(
                     padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 5),