From f2566b9b7fcdea7a0bac73884761f47f79e3ee57 Mon Sep 17 00:00:00 2001 From: dab246 Date: Wed, 2 Oct 2024 11:55:57 +0700 Subject: [PATCH] Fix focus indicator still display, but can not fill text in composer body after change `color background`, `font name` --- .../controller/rich_text_web_controller.dart | 40 ++++++++++++------- .../mixin/rich_text_button_mixin.dart | 8 ++-- .../web/toolbar_rich_text_builder.dart | 6 +-- 3 files changed, 33 insertions(+), 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 index d4b1e61fdd..23bfa6553a 100644 --- 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 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,7 +163,7 @@ class RichTextWebController extends BaseRichTextController { } } - void _applyForegroundColor(Color? selectedColor) { + Future _applyForegroundColor(Color? selectedColor) async { final newColor = selectedColor ?? Colors.black; final colorAsString = newColor.toHexTriplet(); log('RichTextWebController::_applyForegroundColor():colorAsString: $colorAsString'); @@ -170,9 +171,10 @@ class RichTextWebController extends BaseRichTextController { editorController.execSummernoteAPI( RichTextStyleType.textColor.summernoteNameAPI, value: colorAsString); + await _requestEditorFocus(); } - void applyBackgroundColor(Color? selectedColor) { + Future _applyBackgroundColor(Color? selectedColor) async { final newColor = selectedColor ?? Colors.white; final colorAsString = newColor.toHexTriplet(); log('RichTextWebController::_applyBackgroundColor():colorAsString: $colorAsString'); @@ -180,6 +182,7 @@ class RichTextWebController extends BaseRichTextController { editorController.execSummernoteAPI( RichTextStyleType.textBackgroundColor.summernoteNameAPI, value: colorAsString); + await _requestEditorFocus(); } void _selectTextStyleType(RichTextStyleType textStyleType) { @@ -197,17 +200,19 @@ class RichTextWebController extends BaseRichTextController { editorController.insertHtml("
${inlineImage.base64Uri ?? ''}

"); } - void applyNewFontStyle(FontNameType? newFont) { + Future 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 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 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 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 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 _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 index 37e24c4378..bab9a65cf9 100644 --- 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( 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 index 61dd1e44ce..5cbb4068fa 100644 --- 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( 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),