feat: add reset to default text color and improve text (#5)

assets/images/clear_highlight_color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M757 780 316 339l164-163 225 222q44 44 69.5 101T800 622q0 39-12 81t-31 77Zm49 220L676 870q-38 31-90 48.5T480 936q-132 0-226-91.5T160 621q0-57 17-106t53-91L57 251l43-43 749 749-43 43Z" fill="white"/></svg>

assets/images/reset_text_color.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"/></svg>

lib/src/editor/toolbar/items/color/color_menu.dart

@@ -55,24 +55,11 @@ void _formatHighlightColor(EditorState editorState, String color) {
 
 void _formatFontColor(EditorState editorState, String color) {
   final selection = editorState.selection!;
-  //Since there is no additional color for the text, remove the 'textColor' attribute, so that the textColor item on the toolbar won't be highlighted
+  editorState.formatDelta(selection, {'textColor': color});
-  //'0xff000000' is the deault color when developer doesn't set.
-  if (color == editorState.editorStyle.textStyle?.color?.toHex() ||
-      color == '0xff000000') {
-    editorState.formatDelta(selection, {'textColor': null});
-  } else {
-    editorState.formatDelta(selection, {'textColor': color});
-  }
 }
 
 List<ColorOption> _generateTextColorOptions(EditorState editorState) {
-  final defaultColor = editorState.editorStyle.textStyle?.color ??
-      Colors.black; // the deault text color when developer doesn't set
   return [
-    ColorOption(
-      colorHex: defaultColor.toHex(),
-      name: AppFlowyEditorLocalizations.current.fontColorDefault,
-    ),
     ColorOption(
       colorHex: Colors.grey.toHex(),
       name: AppFlowyEditorLocalizations.current.fontColorGray,
@@ -109,13 +96,7 @@ List<ColorOption> _generateTextColorOptions(EditorState editorState) {
 }
 
 List<ColorOption> _generateHighlightColorOptions(EditorState editorState) {
-  final defaultBackgroundColorHex = editorState.editorStyle.highlightColorHex ??
-      '0x6000BCF0'; // the deault highlight color when developer doesn't set
   return [
-    ColorOption(
-      colorHex: defaultBackgroundColorHex,
-      name: AppFlowyEditorLocalizations.current.backgroundColorDefault,
-    ),
     ColorOption(
       colorHex: Colors.grey.withOpacity(0.3).toHex(),
       name: AppFlowyEditorLocalizations.current.backgroundColorGray,

lib/src/editor/toolbar/items/color/color_picker.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy_editor/src/core/legacy/built_in_attribute_keys.dart';
 import 'package:appflowy_editor/src/editor/command/text_commands.dart';
 import 'package:appflowy_editor/src/editor_state.dart';
 import 'package:appflowy_editor/src/infra/flowy_svg.dart';
@@ -79,6 +80,13 @@ class _ColorPickerState extends State<ColorPicker> {
                       dismissOverlay: widget.onDismiss,
                     )
                   : const SizedBox.shrink(),
+              // set text color back to null(default text color)
+              widget.isTextColor == true && widget.selectedColorHex != null
+                  ? ResetTextColorButton(
+                      editorState: widget.editorState,
+                      dismissOverlay: widget.onDismiss,
+                    )
+                  : const SizedBox.shrink(),
               CustomColorItem(
                 colorController: _colorHexController,
                 opacityController: _colorOpacityController,
@@ -160,6 +168,57 @@ class _ColorPickerState extends State<ColorPicker> {
   }
 }
 
+class ResetTextColorButton extends StatelessWidget {
+  const ResetTextColorButton({
+    super.key,
+    required this.editorState,
+    required this.dismissOverlay,
+  });
+
+  final EditorState editorState;
+  final Function() dismissOverlay;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: double.infinity,
+      height: 32,
+      child: TextButton.icon(
+        onPressed: () {
+          final selection = editorState.selection!;
+          editorState
+              .formatDelta(selection, {BuiltInAttributeKey.textColor: null});
+          dismissOverlay();
+        },
+        icon: FlowySvg(
+          name: 'reset_text_color',
+          width: 13,
+          height: 13,
+          color: Theme.of(context).iconTheme.color,
+        ),
+        label: Text(
+          AppFlowyEditorLocalizations.current.resetToDefaultColor,
+          style: TextStyle(
+            color: Theme.of(context).hintColor,
+          ),
+          textAlign: TextAlign.left,
+        ),
+        style: ButtonStyle(
+          backgroundColor: MaterialStateProperty.resolveWith<Color>(
+            (Set<MaterialState> states) {
+              if (states.contains(MaterialState.hovered)) {
+                return Theme.of(context).hoverColor;
+              }
+              return Colors.transparent;
+            },
+          ),
+          alignment: Alignment.centerLeft,
+        ),
+      ),
+    );
+  }
+}
+
 class ClearHighlightColorButton extends StatelessWidget {
   const ClearHighlightColorButton({
     super.key,
@@ -178,11 +237,14 @@ class ClearHighlightColorButton extends StatelessWidget {
       child: TextButton.icon(
         onPressed: () {
           final selection = editorState.selection!;
-          editorState.formatDelta(selection, {'highlightColor': null});
+          editorState.formatDelta(
+            selection,
+            {BuiltInAttributeKey.highlightColor: null},
+          );
           dismissOverlay();
         },
         icon: FlowySvg(
-          name: 'toolbar/clear_highlight_color',
+          name: 'clear_highlight_color',
           width: 13,
           height: 13,
           color: Theme.of(context).iconTheme.color,

lib/src/l10n/l10n.dart

@@ -221,16 +221,6 @@ class AppFlowyEditorLocalizations {
     );
   }
 
-  /// `Default`
-  String get fontColorDefault {
-    return Intl.message(
-      'Default',
-      name: 'fontColorDefault',
-      desc: '',
-      args: [],
-    );
-  }
-
   /// `Gray`
   String get fontColorGray {
     return Intl.message(
@@ -321,16 +311,6 @@ class AppFlowyEditorLocalizations {
     );
   }
 
-  /// `Default background`
-  String get backgroundColorDefault {
-    return Intl.message(
-      'Default background',
-      name: 'backgroundColorDefault',
-      desc: '',
-      args: [],
-    );
-  }
-
   /// `Gray background`
   String get backgroundColorGray {
     return Intl.message(
@@ -601,101 +581,111 @@ class AppFlowyEditorLocalizations {
     );
   }
 
-  /// `text color`
+  /// `Text color`
   String get textColor {
     return Intl.message(
-      'text color',
+      'Text color',
       name: 'textColor',
       desc: '',
       args: [],
     );
   }
 
-  /// `add your link`
+  /// `Reset to default color`
+  String get resetToDefaultColor {
+    return Intl.message(
+      'Reset to default color',
+      name: 'resetToDefaultColor ',
+      desc: '',
+      args: [],
+    );
+  }
+
+  /// `Add your link`
   String get addYourLink {
     return Intl.message(
-      'add your link',
+      'Add your link',
       name: 'addYourLink',
       desc: '',
       args: [],
     );
   }
 
-  /// `open link`
+  /// `Open link`
   String get openLink {
     return Intl.message(
-      'open link',
+      'Open link',
       name: 'openLink',
       desc: '',
       args: [],
     );
   }
 
-  /// `copy link`
+  /// `Copy link`
   String get copyLink {
     return Intl.message(
-      'copy link',
+      'Copy link',
       name: 'copyLink',
       desc: '',
       args: [],
     );
   }
 
-  /// `remove link`
+  /// `Remove link`
   String get removeLink {
     return Intl.message(
-      'remove link',
+      'Remove link',
       name: 'removeLink',
       desc: '',
       args: [],
     );
   }
 
-  /// `highlight color`
+  /// `Highlight color`
   String get highlightColor {
     return Intl.message(
-      'highlight color',
+      'Highlight color',
       name: 'highlightColor',
       desc: '',
       args: [],
     );
   }
 
-  /// `clear highlight color`
+  /// `Clear highlight color`
   String get clearHighlightColor {
     return Intl.message(
-      'clear highlight color',
+      'Clear highlight color',
       name: 'clearHighlightColor',
       desc: '',
       args: [],
     );
   }
 
-  /// `custom color`
+  /// `Custom color`
   String get customColor {
     return Intl.message(
-      'custom color',
+      'Custom color',
       name: 'customColor',
       desc: '',
       args: [],
     );
   }
 
-  /// `hex value`
+  /// `Hex value`
   String get hexValue {
     return Intl.message(
-      'hex value',
+      'Hex value',
       name: 'hexValue',
       desc: '',
       args: [],
     );
   }
 
-  /// `opacity`
+  /// `Opacity`
   String get opacity {
     return Intl.message(
-      'opacity',
+      'Opacity',
-      name: 'opacity',
+      name: 'Opacity',
       desc: '',
       args: [],
     );