diff --git a/lib/src/editor/block_component/rich_text/appflowy_rich_text.dart b/lib/src/editor/block_component/rich_text/appflowy_rich_text.dart
index f4485d488..89cd24700 100644
--- a/lib/src/editor/block_component/rich_text/appflowy_rich_text.dart
+++ b/lib/src/editor/block_component/rich_text/appflowy_rich_text.dart
@@ -469,7 +469,8 @@ extension AppFlowyRichTextAttributes on Attributes {
   }
 
   Color? get backgroundColor {
-    final highlightColor = this[AppFlowyRichTextKeys.highlightColor] as String?;
+    final highlightColor =
+        this[AppFlowyRichTextKeys.backgroundColor] as String?;
     return highlightColor?.tryToColor();
   }
 
diff --git a/lib/src/editor/block_component/rich_text/appflowy_rich_text_keys.dart b/lib/src/editor/block_component/rich_text/appflowy_rich_text_keys.dart
index bda584a88..413fa5254 100644
--- a/lib/src/editor/block_component/rich_text/appflowy_rich_text_keys.dart
+++ b/lib/src/editor/block_component/rich_text/appflowy_rich_text_keys.dart
@@ -4,7 +4,7 @@ class AppFlowyRichTextKeys {
   static String underline = 'underline';
   static String strikethrough = 'strikethrough';
   static String textColor = 'font_color';
-  static String highlightColor = 'bg_color';
+  static String backgroundColor = 'bg_color';
   static String findBackgroundColor = 'find_bg_color';
   static String code = 'code';
   static String href = 'href';
@@ -17,7 +17,7 @@ class AppFlowyRichTextKeys {
     underline,
     strikethrough,
     textColor,
-    highlightColor,
+    backgroundColor,
   ];
 
   // The values supported toggled even if the selection is collapsed.
@@ -27,5 +27,8 @@ class AppFlowyRichTextKeys {
     underline,
     strikethrough,
     code,
+    fontFamily,
+    textColor,
+    backgroundColor,
   ];
 }
diff --git a/lib/src/editor/editor_component/service/ime/delta_input_on_insert_impl.dart b/lib/src/editor/editor_component/service/ime/delta_input_on_insert_impl.dart
index f1ce846ca..ef31dc24c 100644
--- a/lib/src/editor/editor_component/service/ime/delta_input_on_insert_impl.dart
+++ b/lib/src/editor/editor_component/service/ime/delta_input_on_insert_impl.dart
@@ -82,7 +82,7 @@ Future<void> onInsert(
     );
   }
 
-// delete the '\' character if the shortcut event is ignored.
+  // delete the '\' character if the shortcut event is ignored.
   if (backSlashLocation > 0) {
     final transaction = editorState.transaction
       ..deleteText(
diff --git a/lib/src/editor/editor_component/service/shortcuts/command/toggle_colors_command.dart b/lib/src/editor/editor_component/service/shortcuts/command/toggle_colors_command.dart
index f1d92c778..17b15c88f 100644
--- a/lib/src/editor/editor_component/service/shortcuts/command/toggle_colors_command.dart
+++ b/lib/src/editor/editor_component/service/shortcuts/command/toggle_colors_command.dart
@@ -66,14 +66,14 @@ KeyEventResult _toggleHighlight(
   final nodes = editorState.getNodesInSelection(selection);
   final isHighlighted = nodes.allSatisfyInSelection(selection, (delta) {
     return delta.everyAttributes(
-      (attributes) => attributes[AppFlowyRichTextKeys.highlightColor] != null,
+      (attributes) => attributes[AppFlowyRichTextKeys.backgroundColor] != null,
     );
   });
 
   editorState.formatDelta(
     selection,
     {
-      AppFlowyRichTextKeys.highlightColor:
+      AppFlowyRichTextKeys.backgroundColor:
           isHighlighted ? null : style.highlightColor.toHex(),
     },
   );
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 f9f00253b..4f109742a 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,7 +12,7 @@ ToolbarItem buildHighlightColorItem({List<ColorOption>? colorOptions}) {
       final nodes = editorState.getNodesInSelection(selection);
       final isHighlight = nodes.allSatisfyInSelection(selection, (delta) {
         return delta.everyAttributes((attributes) {
-          highlightColorHex = attributes[AppFlowyRichTextKeys.highlightColor];
+          highlightColorHex = attributes[AppFlowyRichTextKeys.backgroundColor];
           return highlightColorHex != null;
         });
       });
@@ -29,7 +29,7 @@ ToolbarItem buildHighlightColorItem({List<ColorOption>? colorOptions}) {
               showClearButton = delta.whereType<TextInsert>().any(
                 (element) {
                   return element
-                          .attributes?[AppFlowyRichTextKeys.highlightColor] !=
+                          .attributes?[AppFlowyRichTextKeys.backgroundColor] !=
                       null;
                 },
               );
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 9a4f30668..4e3a8073a 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
@@ -29,7 +29,8 @@ class _BackgroundColorOptionsWidgetsState
     final nodes = widget.editorState.getNodesInSelection(selection);
     final hasTextColor = nodes.allSatisfyInSelection(selection, (delta) {
       return delta.everyAttributes(
-        (attributes) => attributes[AppFlowyRichTextKeys.highlightColor] != null,
+        (attributes) =>
+            attributes[AppFlowyRichTextKeys.backgroundColor] != null,
       );
     });
 
@@ -48,7 +49,7 @@ class _BackgroundColorOptionsWidgetsState
                 setState(() {
                   widget.editorState.formatDelta(
                     selection,
-                    {AppFlowyRichTextKeys.highlightColor: null},
+                    {AppFlowyRichTextKeys.backgroundColor: null},
                   );
                 });
               }
@@ -60,7 +61,7 @@ class _BackgroundColorOptionsWidgetsState
             final isSelected = nodes.allSatisfyInSelection(selection, (delta) {
               return delta.everyAttributes(
                 (attributes) =>
-                    attributes[AppFlowyRichTextKeys.highlightColor] ==
+                    attributes[AppFlowyRichTextKeys.backgroundColor] ==
                     e.colorHex,
               );
             });
diff --git a/lib/src/editor/toolbar/utils/format_color.dart b/lib/src/editor/toolbar/utils/format_color.dart
index 9f55d58e5..427e9116a 100644
--- a/lib/src/editor/toolbar/utils/format_color.dart
+++ b/lib/src/editor/toolbar/utils/format_color.dart
@@ -8,7 +8,7 @@ void formatHighlightColor(
 }) {
   editorState.formatDelta(
     selection,
-    {AppFlowyRichTextKeys.highlightColor: color},
+    {AppFlowyRichTextKeys.backgroundColor: color},
     withUpdateSelection: withUpdateSelection,
   );
 }
diff --git a/lib/src/editor_state.dart b/lib/src/editor_state.dart
index b72f15a6c..1718d4fbf 100644
--- a/lib/src/editor_state.dart
+++ b/lib/src/editor_state.dart
@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:collection';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/editor_component/service/scroll/auto_scroller.dart';
@@ -107,7 +108,9 @@ class EditorState {
   /// Sets the selection of the editor.
   set selection(Selection? value) {
     // clear the toggled style when the selection is changed.
-    toggledStyle.clear();
+    if (selectionNotifier.value != value) {
+      _toggledStyle.clear();
+    }
 
     selectionNotifier.value = value;
   }
@@ -159,13 +162,14 @@ class EditorState {
   ///
   /// NOTES: It only works once;
   ///   after the selection is changed, the toggled style will be cleared.
-  final toggledStyle = <String, bool>{};
-  late final toggledStyleNotifier =
-      ValueNotifier<Map<String, bool>>(toggledStyle);
-
-  void updateToggledStyle(String key, bool value) {
-    toggledStyle[key] = value;
-    toggledStyleNotifier.value = {...toggledStyle};
+  UnmodifiableMapView<String, dynamic> get toggledStyle =>
+      UnmodifiableMapView<String, dynamic>(_toggledStyle);
+  final _toggledStyle = Attributes();
+  late final toggledStyleNotifier = ValueNotifier<Attributes>(toggledStyle);
+
+  void updateToggledStyle(String key, dynamic value) {
+    _toggledStyle[key] = value;
+    toggledStyleNotifier.value = {..._toggledStyle};
   }
 
   final UndoManager undoManager = UndoManager();
diff --git a/lib/src/plugins/html/html_document_decoder.dart b/lib/src/plugins/html/html_document_decoder.dart
index 9820fd63a..4ab08e896 100644
--- a/lib/src/plugins/html/html_document_decoder.dart
+++ b/lib/src/plugins/html/html_document_decoder.dart
@@ -421,7 +421,7 @@ class DocumentHTMLDecoder extends Converter<String, Document> {
     if (backgroundColor != null) {
       final highlightColor = backgroundColor.tryToColor()?.toHex();
       if (highlightColor != null) {
-        attributes[AppFlowyRichTextKeys.highlightColor] = highlightColor;
+        attributes[AppFlowyRichTextKeys.backgroundColor] = highlightColor;
       }
     }
 
@@ -430,7 +430,7 @@ class DocumentHTMLDecoder extends Converter<String, Document> {
     if (background != null) {
       final highlightColor = background.tryToColor()?.toHex();
       if (highlightColor != null) {
-        attributes[AppFlowyRichTextKeys.highlightColor] = highlightColor;
+        attributes[AppFlowyRichTextKeys.backgroundColor] = highlightColor;
       }
     }
 
diff --git a/lib/src/plugins/quill_delta/quill_delta_encoder.dart b/lib/src/plugins/quill_delta/quill_delta_encoder.dart
index cad888ee1..6bbd4c583 100644
--- a/lib/src/plugins/quill_delta/quill_delta_encoder.dart
+++ b/lib/src/plugins/quill_delta/quill_delta_encoder.dart
@@ -96,7 +96,7 @@ class QuillDeltaEncoder extends Converter<Delta, Document> {
     final backgroundColor = attributes?['background'] as String?;
     final backgroundHex = _convertColorToHexString(backgroundColor);
     if (backgroundHex != null) {
-      attrs[AppFlowyRichTextKeys.highlightColor] = backgroundHex;
+      attrs[AppFlowyRichTextKeys.backgroundColor] = backgroundHex;
     }
     node.updateAttributes({
       'delta': (node.delta?..insert(text, attributes: attrs))?.toJson(),
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 ba70f0885..ff1a9518d 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
@@ -93,7 +93,7 @@ void main() {
       node?.allSatisfyInSelection(selection, (delta) {
         return delta.whereType<TextInsert>().every(
               (element) =>
-                  element.attributes?[AppFlowyRichTextKeys.highlightColor] ==
+                  element.attributes?[AppFlowyRichTextKeys.backgroundColor] ==
                   Colors.red.withOpacity(0.3).toHex(),
             );
       }),
@@ -106,7 +106,7 @@ void main() {
       node?.allSatisfyInSelection(selection, (delta) {
         return delta.whereType<TextInsert>().every(
               (element) =>
-                  element.attributes?[AppFlowyRichTextKeys.highlightColor] ==
+                  element.attributes?[AppFlowyRichTextKeys.backgroundColor] ==
                   null,
             );
       }),
diff --git a/test/new/service/shortcuts/command_shortcut_events/toggle_color_commands_test.dart b/test/new/service/shortcuts/command_shortcut_events/toggle_color_commands_test.dart
index b9bcd70f3..f849caac3 100644
--- a/test/new/service/shortcuts/command_shortcut_events/toggle_color_commands_test.dart
+++ b/test/new/service/shortcuts/command_shortcut_events/toggle_color_commands_test.dart
@@ -16,7 +16,7 @@ void main() async {
         (tester) async {
       await _testUpdateTextColorByCommandX(
         tester,
-        AppFlowyRichTextKeys.highlightColor,
+        AppFlowyRichTextKeys.backgroundColor,
         LogicalKeyboardKey.keyH,
       );
     });