feat: add reset font button in toolbar

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -137,6 +137,9 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     convertibleBlockTypes.add(ToggleListBlockKeys.type);
     slashMenuItems = _customSlashMenuItems();
     effectiveScrollController = widget.scrollController ?? ScrollController();
+
+    // keep the previous font style when typing new text.
+    AppFlowyRichTextKeys.supportSliced.add(AppFlowyRichTextKeys.fontFamily);
   }
 
   @override

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/font/customize_font_toolbar_item.dart

@@ -20,6 +20,7 @@ final customizeFontToolbarItem = ToolbarItem(
         popoverController: popoverController,
         onOpen: () => keepEditorFocusNotifier.value += 1,
         onClose: () => keepEditorFocusNotifier.value -= 1,
+        showResetButton: true,
         onFontFamilyChanged: (fontFamily) async {
           await popoverController.close();
           try {
@@ -30,6 +31,9 @@ final customizeFontToolbarItem = ToolbarItem(
             Log.error('Failed to set font family: $e');
           }
         },
+        onResetFont: () async => await editorState.formatDelta(selection, {
+          AppFlowyRichTextKeys.fontFamily: null,
+        }),
         child: const Padding(
           padding: EdgeInsets.symmetric(horizontal: 4.0),
           child: FlowySvg(

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_appearance/font_family_setting.dart

@@ -61,6 +61,8 @@ class FontFamilyDropDown extends StatefulWidget {
     this.child,
     this.popoverController,
     this.offset,
+    this.showResetButton = false,
+    this.onResetFont,
   });
 
   final String currentFontFamily;
@@ -70,6 +72,8 @@ class FontFamilyDropDown extends StatefulWidget {
   final Widget? child;
   final PopoverController? popoverController;
   final Offset? offset;
+  final bool showResetButton;
+  final VoidCallback? onResetFont;
 
   @override
   State<FontFamilyDropDown> createState() => _FontFamilyDropDownState();
@@ -96,6 +100,13 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> {
         return CustomScrollView(
           shrinkWrap: true,
           slivers: [
+            if (widget.showResetButton)
+              SliverPersistentHeader(
+                delegate: _ResetFontButton(
+                  onPressed: widget.onResetFont,
+                ),
+                pinned: true,
+              ),
             SliverPadding(
               padding: const EdgeInsets.only(right: 8),
               sliver: SliverToBoxAdapter(
@@ -191,3 +202,36 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> {
     );
   }
 }
+
+class _ResetFontButton extends SliverPersistentHeaderDelegate {
+  _ResetFontButton({
+    this.onPressed,
+  });
+
+  final VoidCallback? onPressed;
+
+  @override
+  Widget build(
+    BuildContext context,
+    double shrinkOffset,
+    bool overlapsContent,
+  ) {
+    return Padding(
+      padding: const EdgeInsets.only(right: 8, bottom: 8.0),
+      child: FlowyTextButton(
+        LocaleKeys.document_toolbar_resetToDefaultFont.tr(),
+        onPressed: onPressed,
+      ),
+    );
+  }
+
+  @override
+  double get maxExtent => 35;
+
+  @override
+  double get minExtent => 35;
+
+  @override
+  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
+      true;
+}

frontend/resources/translations/en.json

@@ -647,6 +647,9 @@
         "label": "Link to page",
         "tooltip": "Click to open page"
       }
+    },
+    "toolbar": {
+      "resetToDefaultFont": "Reset to default"
     }
   },
   "board": {