From 20d9822aa70873d86a93f26481a51e488c1aaff8 Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Thu, 29 Jun 2023 14:30:31 -0500 Subject: [PATCH 1/6] feat: make color options customized - make color options customized in Desktop - refactor mobile color options --- example/lib/pages/simple_editor.dart | 6 +- .../desktop/items/color/color_menu.dart | 6 +- .../color/highlight_color_toolbar_item.dart | 61 ++++++------ .../items/color/text_color_toolbar_item.dart | 94 +++++++++++++------ .../background_color_options_widgets.dart | 7 +- ...xt_and_background_color_tool_bar_item.dart | 28 ++++-- .../color/text_color_options_widgets.dart | 6 +- .../toolbar/utils/color_generators.dart | 14 ++- 8 files changed, 148 insertions(+), 74 deletions(-) diff --git a/example/lib/pages/simple_editor.dart b/example/lib/pages/simple_editor.dart index 49c5f5abe..8b0279ace 100644 --- a/example/lib/pages/simple_editor.dart +++ b/example/lib/pages/simple_editor.dart @@ -44,8 +44,8 @@ class SimpleEditor extends StatelessWidget { bulletedListItem, numberedListItem, linkItem, - textColorItem, - highlightColorItem + buildTextColorItem(), + buildHighlightColorItem() ], editorState: editorState, scrollController: scrollController, @@ -69,7 +69,7 @@ class SimpleEditor extends StatelessWidget { editorState: editorState, toolbarItems: [ textDecorationMobileToolbarItem, - textAndBackgroundColorMobileToolbarItem, + buildTextAndBackgroundColorMobileToolbarItem, headingMobileToolbarItem, todoListMobileToolbarItem, listMobileToolbarItem, diff --git a/lib/src/editor/toolbar/desktop/items/color/color_menu.dart b/lib/src/editor/toolbar/desktop/items/color/color_menu.dart index a1dd310c0..b739d8890 100644 --- a/lib/src/editor/toolbar/desktop/items/color/color_menu.dart +++ b/lib/src/editor/toolbar/desktop/items/color/color_menu.dart @@ -6,6 +6,8 @@ void showColorMenu( EditorState editorState, Selection selection, { String? currentColorHex, + List? textColorOptions, + List? highlightColorOptions, required bool isTextColor, }) { // Since link format is only available for single line selection, @@ -44,8 +46,8 @@ void showColorMenu( editorState: editorState, selectedColorHex: currentColorHex, colorOptions: isTextColor - ? generateTextColorOptions() - : generateHighlightColorOptions(), + ? textColorOptions ?? generateTextColorOptions() + : highlightColorOptions ?? generateHighlightColorOptions(), onSubmittedColorHex: (color) { isTextColor ? formatFontColor( diff --git a/lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart b/lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart index f89e35318..1911ab3ba 100644 --- a/lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart +++ b/lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart @@ -1,34 +1,37 @@ import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; -final highlightColorItem = ToolbarItem( - id: 'editor.highlightColor', - group: 4, - isActive: onlyShowInTextType, - builder: (context, editorState) { - String? highlightColorHex; +ToolbarItem buildHighlightColorItem({List? colorOptions}) { + return ToolbarItem( + id: 'editor.highlightColor', + group: 4, + isActive: onlyShowInTextType, + builder: (context, editorState) { + String? highlightColorHex; - final selection = editorState.selection!; - final nodes = editorState.getNodesInSelection(selection); - final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { - return delta.everyAttributes( - (attributes) => attributes[FlowyRichTextKeys.highlightColor] != null, - ); - }); - return IconItemWidget( - iconName: 'toolbar/highlight_color', - iconSize: const Size.square(14), - isHighlight: isHighlight, - tooltip: AppFlowyEditorLocalizations.current.highlightColor, - onPressed: () { - showColorMenu( - context, - editorState, - selection, - currentColorHex: highlightColorHex, - isTextColor: false, + final selection = editorState.selection!; + final nodes = editorState.getNodesInSelection(selection); + final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { + return delta.everyAttributes( + (attributes) => attributes[FlowyRichTextKeys.highlightColor] != null, ); - }, - ); - }, -); + }); + return IconItemWidget( + iconName: 'toolbar/highlight_color', + iconSize: const Size.square(14), + isHighlight: isHighlight, + tooltip: AppFlowyEditorLocalizations.current.highlightColor, + onPressed: () { + showColorMenu( + context, + editorState, + selection, + currentColorHex: highlightColorHex, + isTextColor: false, + highlightColorOptions: colorOptions, + ); + }, + ); + }, + ); +} diff --git a/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart b/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart index c3b56f129..34d8e610b 100644 --- a/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart +++ b/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart @@ -1,33 +1,69 @@ import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; -final textColorItem = ToolbarItem( - id: 'editor.textColor', - group: 4, - isActive: onlyShowInTextType, - builder: (context, editorState) { - String? textColorHex; - final selection = editorState.selection!; - final nodes = editorState.getNodesInSelection(selection); - final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { - return delta.everyAttributes( - (attributes) => attributes[FlowyRichTextKeys.textColor] != null, - ); - }); - return IconItemWidget( - iconName: 'toolbar/text_color', - isHighlight: isHighlight, - iconSize: const Size.square(14), - tooltip: AppFlowyEditorLocalizations.current.textColor, - onPressed: () { - showColorMenu( - context, - editorState, - selection, - currentColorHex: textColorHex, - isTextColor: true, +ToolbarItem buildTextColorItem({ + List? colorOptions, +}) { + return ToolbarItem( + id: 'editor.textColor', + group: 4, + isActive: onlyShowInTextType, + builder: (context, editorState) { + String? textColorHex; + final selection = editorState.selection!; + final nodes = editorState.getNodesInSelection(selection); + final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { + return delta.everyAttributes( + (attributes) => attributes[FlowyRichTextKeys.textColor] != null, ); - }, - ); - }, -); + }); + return IconItemWidget( + iconName: 'toolbar/text_color', + isHighlight: isHighlight, + iconSize: const Size.square(14), + tooltip: AppFlowyEditorLocalizations.current.textColor, + onPressed: () { + showColorMenu( + context, + editorState, + selection, + currentColorHex: textColorHex, + isTextColor: true, + textColorOptions: colorOptions, + ); + }, + ); + }, + ); +} + +// final textColorItem = ToolbarItem( +// id: 'editor.textColor', +// group: 4, +// isActive: onlyShowInTextType, +// builder: (context, editorState) { +// String? textColorHex; +// final selection = editorState.selection!; +// final nodes = editorState.getNodesInSelection(selection); +// final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { +// return delta.everyAttributes( +// (attributes) => attributes[FlowyRichTextKeys.textColor] != null, +// ); +// }); +// return IconItemWidget( +// iconName: 'toolbar/text_color', +// isHighlight: isHighlight, +// iconSize: const Size.square(14), +// tooltip: AppFlowyEditorLocalizations.current.textColor, +// onPressed: () { +// showColorMenu( +// context, +// editorState, +// selection, +// currentColorHex: textColorHex, +// isTextColor: true, +// ); +// }, +// ); +// }, +// ); diff --git a/lib/src/editor/toolbar/mobile/toolbar_items/color/background_color_options_widgets.dart b/lib/src/editor/toolbar/mobile/toolbar_items/color/background_color_options_widgets.dart index b44902d2f..1cdc24ba0 100644 --- a/lib/src/editor/toolbar/mobile/toolbar_items/color/background_color_options_widgets.dart +++ b/lib/src/editor/toolbar/mobile/toolbar_items/color/background_color_options_widgets.dart @@ -5,11 +5,13 @@ class BackgroundColorOptionsWidgets extends StatefulWidget { const BackgroundColorOptionsWidgets( this.editorState, this.selection, { + this.backgroundColorOptions, Key? key, }) : super(key: key); final Selection selection; final EditorState editorState; + final List? backgroundColorOptions; @override State createState() => @@ -21,7 +23,8 @@ class _BackgroundColorOptionsWidgetsState @override Widget build(BuildContext context) { final style = MobileToolbarStyle.of(context); - + final colorOptions = + widget.backgroundColorOptions ?? generateHighlightColorOptions(); final selection = widget.selection; final nodes = widget.editorState.getNodesInSelection(selection); final hasTextColor = nodes.allSatisfyInSelection(selection, (delta) { @@ -53,7 +56,7 @@ class _BackgroundColorOptionsWidgetsState isSelected: !hasTextColor, ), // color option buttons - ...style.backgroundColorOptions.map((e) { + ...colorOptions.map((e) { final isSelected = nodes.allSatisfyInSelection(selection, (delta) { return delta.everyAttributes( (attributes) => diff --git a/lib/src/editor/toolbar/mobile/toolbar_items/color/text_and_background_color_tool_bar_item.dart b/lib/src/editor/toolbar/mobile/toolbar_items/color/text_and_background_color_tool_bar_item.dart index 48c4baf32..7fb03c52b 100644 --- a/lib/src/editor/toolbar/mobile/toolbar_items/color/text_and_background_color_tool_bar_item.dart +++ b/lib/src/editor/toolbar/mobile/toolbar_items/color/text_and_background_color_tool_bar_item.dart @@ -1,22 +1,36 @@ import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; -final textAndBackgroundColorMobileToolbarItem = MobileToolbarItem.withMenu( - itemIcon: const AFMobileIcon(afMobileIcons: AFMobileIcons.color), - itemMenuBuilder: (editorState, selection, _) { - return _TextAndBackgroundColorMenu(editorState, selection); - }, -); +MobileToolbarItem buildTextAndBackgroundColorMobileToolbarItem({ + List? textColorOptions, + List? backgroundColorOptions, +}) { + return MobileToolbarItem.withMenu( + itemIcon: const AFMobileIcon(afMobileIcons: AFMobileIcons.color), + itemMenuBuilder: (editorState, selection, _) { + return _TextAndBackgroundColorMenu( + editorState, + selection, + textColorOptions: textColorOptions, + backgroundColorOptions: backgroundColorOptions, + ); + }, + ); +} class _TextAndBackgroundColorMenu extends StatefulWidget { const _TextAndBackgroundColorMenu( this.editorState, this.selection, { + this.textColorOptions, + this.backgroundColorOptions, Key? key, }) : super(key: key); final EditorState editorState; final Selection selection; + final List? textColorOptions; + final List? backgroundColorOptions; @override State<_TextAndBackgroundColorMenu> createState() => @@ -61,10 +75,12 @@ class _TextAndBackgroundColorMenuState TextColorOptionsWidgets( widget.editorState, widget.selection, + textColorOptions: widget.textColorOptions, ), BackgroundColorOptionsWidgets( widget.editorState, widget.selection, + backgroundColorOptions: widget.backgroundColorOptions, ), ], ), diff --git a/lib/src/editor/toolbar/mobile/toolbar_items/color/text_color_options_widgets.dart b/lib/src/editor/toolbar/mobile/toolbar_items/color/text_color_options_widgets.dart index dcd58dd14..9d1b538b9 100644 --- a/lib/src/editor/toolbar/mobile/toolbar_items/color/text_color_options_widgets.dart +++ b/lib/src/editor/toolbar/mobile/toolbar_items/color/text_color_options_widgets.dart @@ -5,11 +5,13 @@ class TextColorOptionsWidgets extends StatefulWidget { const TextColorOptionsWidgets( this.editorState, this.selection, { + this.textColorOptions, Key? key, }) : super(key: key); final Selection selection; final EditorState editorState; + final List? textColorOptions; @override State createState() => @@ -29,6 +31,8 @@ class _TextColorOptionsWidgetsState extends State { ); }); + final colorOptions = widget.textColorOptions ?? generateTextColorOptions(); + return Scrollbar( child: GridView( shrinkWrap: true, @@ -52,7 +56,7 @@ class _TextColorOptionsWidgetsState extends State { isSelected: !hasTextColor, ), // color option buttons - ...style.textColorOptions.map((e) { + ...colorOptions.map((e) { final isSelected = nodes.allSatisfyInSelection(selection, (delta) { return delta.everyAttributes( (attributes) => diff --git a/lib/src/editor/toolbar/utils/color_generators.dart b/lib/src/editor/toolbar/utils/color_generators.dart index 95b9a549e..027275dc7 100644 --- a/lib/src/editor/toolbar/utils/color_generators.dart +++ b/lib/src/editor/toolbar/utils/color_generators.dart @@ -1,8 +1,12 @@ import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; -/// Used in Desktop only. -/// Needs to refactor to enable customization +/// Default text color options when no option is provided +/// - support +/// - desktop +/// - web +/// - mobile +/// List generateTextColorOptions() { return [ ColorOption( @@ -40,6 +44,12 @@ List generateTextColorOptions() { ]; } +/// Default background color options when no option is provided +/// - support +/// - desktop +/// - web +/// - mobile +/// List generateHighlightColorOptions() { return [ ColorOption( From 25f1daf51ec46d5ed4f83a723ac4e3758d8cf715 Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Thu, 29 Jun 2023 15:06:21 -0500 Subject: [PATCH 2/6] chore: update color options in simple editor --- example/lib/pages/simple_editor.dart | 2 +- .../items/color/text_color_toolbar_item.dart | 31 -------- .../editor/toolbar/mobile/mobile_toolbar.dart | 77 +------------------ .../toolbar/mobile/mobile_toolbar_style.dart | 9 +-- 4 files changed, 3 insertions(+), 116 deletions(-) diff --git a/example/lib/pages/simple_editor.dart b/example/lib/pages/simple_editor.dart index 8b0279ace..e85a57730 100644 --- a/example/lib/pages/simple_editor.dart +++ b/example/lib/pages/simple_editor.dart @@ -69,7 +69,7 @@ class SimpleEditor extends StatelessWidget { editorState: editorState, toolbarItems: [ textDecorationMobileToolbarItem, - buildTextAndBackgroundColorMobileToolbarItem, + buildTextAndBackgroundColorMobileToolbarItem(), headingMobileToolbarItem, todoListMobileToolbarItem, listMobileToolbarItem, diff --git a/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart b/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart index 34d8e610b..8521af786 100644 --- a/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart +++ b/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart @@ -36,34 +36,3 @@ ToolbarItem buildTextColorItem({ }, ); } - -// final textColorItem = ToolbarItem( -// id: 'editor.textColor', -// group: 4, -// isActive: onlyShowInTextType, -// builder: (context, editorState) { -// String? textColorHex; -// final selection = editorState.selection!; -// final nodes = editorState.getNodesInSelection(selection); -// final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { -// return delta.everyAttributes( -// (attributes) => attributes[FlowyRichTextKeys.textColor] != null, -// ); -// }); -// return IconItemWidget( -// iconName: 'toolbar/text_color', -// isHighlight: isHighlight, -// iconSize: const Size.square(14), -// tooltip: AppFlowyEditorLocalizations.current.textColor, -// onPressed: () { -// showColorMenu( -// context, -// editorState, -// selection, -// currentColorHex: textColorHex, -// isTextColor: true, -// ); -// }, -// ); -// }, -// ); diff --git a/lib/src/editor/toolbar/mobile/mobile_toolbar.dart b/lib/src/editor/toolbar/mobile/mobile_toolbar.dart index 873283e7e..d8d5387a7 100644 --- a/lib/src/editor/toolbar/mobile/mobile_toolbar.dart +++ b/lib/src/editor/toolbar/mobile/mobile_toolbar.dart @@ -20,78 +20,7 @@ class MobileToolbar extends StatelessWidget { this.buttonSpacing = 8.0, this.buttonBorderWidth = 1.0, this.buttonSelectedBorderWidth = 2.0, - this.textColorOptions = const [ - ColorOption( - colorHex: '#808080', - name: 'Gray', - ), - ColorOption( - colorHex: '#A52A2A', - name: 'Brown', - ), - ColorOption( - colorHex: '#FFFF00', - name: 'Yellow', - ), - ColorOption( - colorHex: '#008000', - name: 'Green', - ), - ColorOption( - colorHex: '#0000FF', - name: 'Blue', - ), - ColorOption( - colorHex: '#800080', - name: 'Purple', - ), - ColorOption( - colorHex: '#FFC0CB', - name: 'Pink', - ), - ColorOption( - colorHex: '#FF0000', - name: 'Red', - ), - ], - this.backgroundColorOptions = const [ - ColorOption( - colorHex: '#4D4D4D', - name: 'Gray', - ), - ColorOption( - colorHex: '#A52A2A', - name: 'Brown', - ), - ColorOption( - colorHex: '#FFFF00', - name: 'Yellow', - ), - ColorOption( - colorHex: '#008000', - name: 'Green', - ), - ColorOption( - colorHex: '#0000FF', - name: 'Blue', - ), - ColorOption( - colorHex: '#800080', - name: 'Purple', - ), - ColorOption( - colorHex: '#FFC0CB', - name: 'Pink', - ), - ColorOption( - colorHex: '#FF0000', - name: 'Red', - ), - ], - }) : assert( - textColorOptions.length > 0 && backgroundColorOptions.length > 0, - ); - + }); final EditorState editorState; final List toolbarItems; // MobileToolbarStyle parameters @@ -108,8 +37,6 @@ class MobileToolbar extends StatelessWidget { final double buttonSpacing; final double buttonBorderWidth; final double buttonSelectedBorderWidth; - final List textColorOptions; - final List backgroundColorOptions; @override Widget build(BuildContext context) { @@ -133,8 +60,6 @@ class MobileToolbar extends StatelessWidget { buttonSpacing: buttonSpacing, buttonBorderWidth: buttonBorderWidth, buttonSelectedBorderWidth: buttonSelectedBorderWidth, - textColorOptions: textColorOptions, - backgroundColorOptions: backgroundColorOptions, child: MobileToolbarWidget( // Use selection as key to force rebuild toolbar widget when selection changed. key: ValueKey(selection), diff --git a/lib/src/editor/toolbar/mobile/mobile_toolbar_style.dart b/lib/src/editor/toolbar/mobile/mobile_toolbar_style.dart index d65cb8548..2a1b2f00e 100644 --- a/lib/src/editor/toolbar/mobile/mobile_toolbar_style.dart +++ b/lib/src/editor/toolbar/mobile/mobile_toolbar_style.dart @@ -1,4 +1,3 @@ -import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:flutter/material.dart'; /// Style for the mobile toolbar. @@ -22,8 +21,6 @@ class MobileToolbarStyle extends InheritedWidget { final double buttonSpacing; final double buttonBorderWidth; final double buttonSelectedBorderWidth; - final List textColorOptions; - final List backgroundColorOptions; const MobileToolbarStyle({ Key? key, @@ -40,8 +37,6 @@ class MobileToolbarStyle extends InheritedWidget { required this.buttonSpacing, required this.buttonBorderWidth, required this.buttonSelectedBorderWidth, - required this.textColorOptions, - required this.backgroundColorOptions, required Widget child, }) : super(key: key, child: child); @@ -67,8 +62,6 @@ class MobileToolbarStyle extends InheritedWidget { buttonHeight != oldWidget.buttonHeight || buttonSpacing != oldWidget.buttonSpacing || buttonBorderWidth != oldWidget.buttonBorderWidth || - buttonSelectedBorderWidth != oldWidget.buttonSelectedBorderWidth || - textColorOptions != oldWidget.textColorOptions || - backgroundColorOptions != oldWidget.backgroundColorOptions; + buttonSelectedBorderWidth != oldWidget.buttonSelectedBorderWidth; } } From cdad6df85815759aab0ecada5a30a148cfddb9eb Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Thu, 29 Jun 2023 15:06:40 -0500 Subject: [PATCH 3/6] chore: update tests cases --- .../mobile/mobile_toolbar_style_test.dart | 70 ------------------ .../mobile_toolbar_style_test_widget.dart | 72 ------------------- ...d_background_color_tool_bar_item_test.dart | 7 +- test/new/infra/testable_editor.dart | 4 +- .../show_link_menu_command_test.dart | 4 +- 5 files changed, 8 insertions(+), 149 deletions(-) diff --git a/test/mobile/toolbar/mobile/mobile_toolbar_style_test.dart b/test/mobile/toolbar/mobile/mobile_toolbar_style_test.dart index 40b464a96..1e0c15f99 100644 --- a/test/mobile/toolbar/mobile/mobile_toolbar_style_test.dart +++ b/test/mobile/toolbar/mobile/mobile_toolbar_style_test.dart @@ -19,74 +19,6 @@ void main() { const buttonSpacing = 8.0; const buttonBorderWidth = 1.0; const buttonSelectedBorderWidth = 2.0; - const textColorOptions = [ - ColorOption( - colorHex: '#808080', - name: 'Gray', - ), - ColorOption( - colorHex: '#A52A2A', - name: 'Brown', - ), - ColorOption( - colorHex: '#FFFF00', - name: 'Yellow', - ), - ColorOption( - colorHex: '#008000', - name: 'Green', - ), - ColorOption( - colorHex: '#0000FF', - name: 'Blue', - ), - ColorOption( - colorHex: '#800080', - name: 'Purple', - ), - ColorOption( - colorHex: '#FFC0CB', - name: 'Pink', - ), - ColorOption( - colorHex: '#FF0000', - name: 'Red', - ), - ]; - const backgroundColorOptions = [ - ColorOption( - colorHex: '#4d4d4d', - name: 'Gray', - ), - ColorOption( - colorHex: '#a52a2a', - name: 'Brown', - ), - ColorOption( - colorHex: '#ffff00', - name: 'Yellow', - ), - ColorOption( - colorHex: '#008000', - name: 'Green', - ), - ColorOption( - colorHex: '#0000ff', - name: 'Blue', - ), - ColorOption( - colorHex: '#800080', - name: 'Purple', - ), - ColorOption( - colorHex: '#ffc0cb', - name: 'Pink', - ), - ColorOption( - colorHex: '#ff0000', - name: 'Red', - ), - ]; await tester.pumpWidget( const MobileToolbarStyle( @@ -103,8 +35,6 @@ void main() { buttonSpacing: buttonSpacing, buttonBorderWidth: buttonBorderWidth, buttonSelectedBorderWidth: buttonSelectedBorderWidth, - textColorOptions: textColorOptions, - backgroundColorOptions: backgroundColorOptions, child: SizedBox(), ), ); diff --git a/test/mobile/toolbar/mobile/test_helpers/mobile_toolbar_style_test_widget.dart b/test/mobile/toolbar/mobile/test_helpers/mobile_toolbar_style_test_widget.dart index 99a6a5497..0087cd23b 100644 --- a/test/mobile/toolbar/mobile/test_helpers/mobile_toolbar_style_test_widget.dart +++ b/test/mobile/toolbar/mobile/test_helpers/mobile_toolbar_style_test_widget.dart @@ -19,74 +19,6 @@ class MobileToolbarStyleTestWidget extends StatelessWidget { this.buttonSpacing = 8, this.buttonBorderWidth = 1, this.buttonSelectedBorderWidth = 2, - this.textColorOptions = const [ - ColorOption( - colorHex: '#808080', - name: 'Gray', - ), - ColorOption( - colorHex: '#A52A2A', - name: 'Brown', - ), - ColorOption( - colorHex: '#FFFF00', - name: 'Yellow', - ), - ColorOption( - colorHex: '#008000', - name: 'Green', - ), - ColorOption( - colorHex: '#0000FF', - name: 'Blue', - ), - ColorOption( - colorHex: '#800080', - name: 'Purple', - ), - ColorOption( - colorHex: '#FFC0CB', - name: 'Pink', - ), - ColorOption( - colorHex: '#FF0000', - name: 'Red', - ), - ], - this.backgroundColorOptions = const [ - ColorOption( - colorHex: '#4d4d4d', - name: 'Gray', - ), - ColorOption( - colorHex: '#a52a2a', - name: 'Brown', - ), - ColorOption( - colorHex: '#ffff00', - name: 'Yellow', - ), - ColorOption( - colorHex: '#008000', - name: 'Green', - ), - ColorOption( - colorHex: '#0000ff', - name: 'Blue', - ), - ColorOption( - colorHex: '#800080', - name: 'Purple', - ), - ColorOption( - colorHex: '#ffc0cb', - name: 'Pink', - ), - ColorOption( - colorHex: '#ff0000', - name: 'Red', - ), - ], }); final Widget child; @@ -103,8 +35,6 @@ class MobileToolbarStyleTestWidget extends StatelessWidget { final double buttonSpacing; final double buttonBorderWidth; final double buttonSelectedBorderWidth; - final List textColorOptions; - final List backgroundColorOptions; @override Widget build(BuildContext context) { @@ -123,8 +53,6 @@ class MobileToolbarStyleTestWidget extends StatelessWidget { buttonSpacing: buttonSpacing, buttonBorderWidth: buttonBorderWidth, buttonSelectedBorderWidth: buttonSelectedBorderWidth, - textColorOptions: textColorOptions, - backgroundColorOptions: backgroundColorOptions, child: child, ), ); diff --git a/test/mobile/toolbar/mobile/toolbar_items/color/text_and_background_color_tool_bar_item_test.dart b/test/mobile/toolbar/mobile/toolbar_items/color/text_and_background_color_tool_bar_item_test.dart index fc299cd1c..30046c758 100644 --- a/test/mobile/toolbar/mobile/toolbar_items/color/text_and_background_color_tool_bar_item_test.dart +++ b/test/mobile/toolbar/mobile/toolbar_items/color/text_and_background_color_tool_bar_item_test.dart @@ -23,7 +23,7 @@ void main() { child: MobileAppWithToolbarWidget( editorState: editor.editorState, toolbarItems: [ - textAndBackgroundColorMobileToolbarItem, + buildTextAndBackgroundColorMobileToolbarItem(), ], ), ), @@ -57,7 +57,8 @@ void main() { node?.allSatisfyInSelection(selection, (delta) { return delta.whereType().every( (element) => - element.attributes?[FlowyRichTextKeys.textColor] == '#FF0000', + element.attributes?[FlowyRichTextKeys.textColor] == + Colors.red.toHex(), ); }), true, @@ -92,7 +93,7 @@ void main() { return delta.whereType().every( (element) => element.attributes?[FlowyRichTextKeys.highlightColor] == - '#FF0000', + Colors.red.withOpacity(0.3).toHex(), ); }), true, diff --git a/test/new/infra/testable_editor.dart b/test/new/infra/testable_editor.dart index f953df14c..849b44a33 100644 --- a/test/new/infra/testable_editor.dart +++ b/test/new/infra/testable_editor.dart @@ -61,8 +61,8 @@ class TestableEditor { bulletedListItem, numberedListItem, linkItem, - textColorItem, - highlightColorItem + buildTextColorItem(), + buildHighlightColorItem() ], editorState: editorState, scrollController: scrollController!, diff --git a/test/new/service/shortcuts/command_shortcut_events/show_link_menu_command_test.dart b/test/new/service/shortcuts/command_shortcut_events/show_link_menu_command_test.dart index 2fd5ed78a..1617b7d42 100644 --- a/test/new/service/shortcuts/command_shortcut_events/show_link_menu_command_test.dart +++ b/test/new/service/shortcuts/command_shortcut_events/show_link_menu_command_test.dart @@ -40,8 +40,8 @@ Future _testLinkMenuInSingleTextSelection(WidgetTester tester) async { numberedListItem, placeholderItem, linkItem, - textColorItem, - highlightColorItem, + buildTextColorItem(), + buildHighlightColorItem(), ], editorState: editor.editorState, scrollController: scrollController, From 442a57cd9f4d000a64f83bd0819068ef72ec6fdc Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Thu, 29 Jun 2023 20:00:43 -0500 Subject: [PATCH 4/6] chore: remove color options from mobile toolbar --- example/lib/pages/simple_editor.dart | 76 ---------------------------- 1 file changed, 76 deletions(-) diff --git a/example/lib/pages/simple_editor.dart b/example/lib/pages/simple_editor.dart index e85a57730..7fa10c259 100644 --- a/example/lib/pages/simple_editor.dart +++ b/example/lib/pages/simple_editor.dart @@ -78,82 +78,6 @@ class SimpleEditor extends StatelessWidget { codeMobileToolbarItem, // dividerMobileToolbarItem, ], - textColorOptions: [ - ColorOption( - colorHex: Colors.grey.toHex(), - name: AppFlowyEditorLocalizations.current.fontColorGray, - ), - ColorOption( - colorHex: Colors.brown.toHex(), - name: AppFlowyEditorLocalizations.current.fontColorBrown, - ), - ColorOption( - colorHex: Colors.yellow.toHex(), - name: AppFlowyEditorLocalizations.current.fontColorYellow, - ), - ColorOption( - colorHex: Colors.green.toHex(), - name: AppFlowyEditorLocalizations.current.fontColorGreen, - ), - ColorOption( - colorHex: Colors.blue.toHex(), - name: AppFlowyEditorLocalizations.current.fontColorBlue, - ), - ColorOption( - colorHex: Colors.purple.toHex(), - name: AppFlowyEditorLocalizations.current.fontColorPurple, - ), - ColorOption( - colorHex: Colors.pink.toHex(), - name: AppFlowyEditorLocalizations.current.fontColorPink, - ), - ColorOption( - colorHex: Colors.red.toHex(), - name: AppFlowyEditorLocalizations.current.fontColorRed, - ), - ], - backgroundColorOptions: [ - ColorOption( - colorHex: Colors.grey.withOpacity(0.3).toHex(), - name: AppFlowyEditorLocalizations - .current.backgroundColorGray, - ), - ColorOption( - colorHex: Colors.brown.withOpacity(0.3).toHex(), - name: AppFlowyEditorLocalizations - .current.backgroundColorBrown, - ), - ColorOption( - colorHex: Colors.yellow.withOpacity(0.3).toHex(), - name: AppFlowyEditorLocalizations - .current.backgroundColorYellow, - ), - ColorOption( - colorHex: Colors.green.withOpacity(0.3).toHex(), - name: AppFlowyEditorLocalizations - .current.backgroundColorGreen, - ), - ColorOption( - colorHex: Colors.blue.withOpacity(0.3).toHex(), - name: AppFlowyEditorLocalizations - .current.backgroundColorBlue, - ), - ColorOption( - colorHex: Colors.purple.withOpacity(0.3).toHex(), - name: AppFlowyEditorLocalizations - .current.backgroundColorPurple, - ), - ColorOption( - colorHex: Colors.pink.withOpacity(0.3).toHex(), - name: AppFlowyEditorLocalizations - .current.backgroundColorPink, - ), - ColorOption( - colorHex: Colors.red.withOpacity(0.3).toHex(), - name: AppFlowyEditorLocalizations - .current.backgroundColorRed, - ), - ], ), ], ); From afa0d4a95ac91989d3c61a0ae15033a25c90978e Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Mon, 3 Jul 2023 14:06:47 -0500 Subject: [PATCH 5/6] fix: fix selected color issue --- .../desktop/items/color/highlight_color_toolbar_item.dart | 7 ++++--- .../desktop/items/color/text_color_toolbar_item.dart | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart b/lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart index 1911ab3ba..b7c09e984 100644 --- a/lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart +++ b/lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart @@ -12,9 +12,10 @@ ToolbarItem buildHighlightColorItem({List? colorOptions}) { final selection = editorState.selection!; final nodes = editorState.getNodesInSelection(selection); final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { - return delta.everyAttributes( - (attributes) => attributes[FlowyRichTextKeys.highlightColor] != null, - ); + return delta.everyAttributes((attributes) { + highlightColorHex = attributes[FlowyRichTextKeys.highlightColor]; + return highlightColorHex != null; + }); }); return IconItemWidget( iconName: 'toolbar/highlight_color', diff --git a/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart b/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart index 8521af786..54dfb7e14 100644 --- a/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart +++ b/lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart @@ -13,9 +13,10 @@ ToolbarItem buildTextColorItem({ final selection = editorState.selection!; final nodes = editorState.getNodesInSelection(selection); final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { - return delta.everyAttributes( - (attributes) => attributes[FlowyRichTextKeys.textColor] != null, - ); + return delta.everyAttributes((attributes) { + textColorHex = attributes[FlowyRichTextKeys.textColor]; + return (textColorHex != null); + }); }); return IconItemWidget( iconName: 'toolbar/text_color', From e35256404bceb64cff1d60c42c49c51b1f324b26 Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Mon, 3 Jul 2023 14:11:09 -0500 Subject: [PATCH 6/6] fix: fix reset color issue --- lib/src/editor/toolbar/desktop/items/color/color_picker.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/editor/toolbar/desktop/items/color/color_picker.dart b/lib/src/editor/toolbar/desktop/items/color/color_picker.dart index ce70428cf..2ee224016 100644 --- a/lib/src/editor/toolbar/desktop/items/color/color_picker.dart +++ b/lib/src/editor/toolbar/desktop/items/color/color_picker.dart @@ -173,7 +173,7 @@ class ResetTextColorButton extends StatelessWidget { onPressed: () { final selection = editorState.selection!; editorState - .formatDelta(selection, {BuiltInAttributeKey.textColor: null}); + .formatDelta(selection, {FlowyRichTextKeys.textColor: null}); dismissOverlay(); }, icon: FlowySvg( @@ -225,7 +225,7 @@ class ClearHighlightColorButton extends StatelessWidget { final selection = editorState.selection!; editorState.formatDelta( selection, - {BuiltInAttributeKey.highlightColor: null}, + {FlowyRichTextKeys.highlightColor: null}, ); dismissOverlay(); },