fix: slash menu background color (#2616)

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

@@ -63,13 +63,19 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     // code block
     ...codeBlockCharacterEvents,
 
+    // toggle list
+    // formatGreaterToToggleList,
+
+    // customize the slash menu command
+    customSlashCommand(
+      slashMenuItems,
+      style: styleCustomizer.selectionMenuStyleBuilder(),
+    ),
+
     ...standardCharacterShortcutEvents
       ..removeWhere(
         (element) => element == slashCommand,
       ), // remove the default slash command.
-    customSlashCommand(slashMenuItems),
-
-    // formatGreaterToToggleList,
   ];
 
   late final showSlashMenu = customSlashCommand(
@@ -189,7 +195,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       ),
       AutoCompletionBlockKeys.type: AutoCompletionBlockComponentBuilder(),
       SmartEditBlockKeys.type: SmartEditBlockComponentBuilder(),
-      // ToggleListBlockKeys.type: ToggleListBlockComponentBuilder(),
+      ToggleListBlockKeys.type: ToggleListBlockComponentBuilder(),
     };
 
     final builders = {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flutter/material.dart';
 
@@ -6,20 +7,21 @@ class SelectableSvgWidget extends StatelessWidget {
     super.key,
     required this.name,
     required this.isSelected,
+    required this.style,
   });
 
   final String name;
   final bool isSelected;
+  final SelectionMenuStyle style;
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
     return svgWidget(
       name,
       size: const Size.square(18.0),
       color: isSelected
-          ? theme.colorScheme.onSurface
+          ? style.selectionMenuItemSelectedIconColor
-          : theme.colorScheme.onBackground,
+          : style.selectionMenuItemIconColor,
     );
   }
 }
@@ -29,20 +31,21 @@ class SelectableIconWidget extends StatelessWidget {
     super.key,
     required this.icon,
     required this.isSelected,
+    required this.style,
   });
 
   final IconData icon;
   final bool isSelected;
+  final SelectionMenuStyle style;
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
     return Icon(
       icon,
       size: 18.0,
       color: isSelected
-          ? theme.colorScheme.onSurface
+          ? style.selectionMenuItemSelectedIconColor
-          : theme.colorScheme.onBackground,
+          : style.selectionMenuItemIconColor,
     );
   }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_menu_item.dart

@@ -8,9 +8,10 @@ import 'package:flutter/material.dart';
 
 SelectionMenuItem boardMenuItem = SelectionMenuItem(
   name: LocaleKeys.document_plugins_referencedBoard.tr(),
-  icon: (editorState, onSelected) => SelectableSvgWidget(
+  icon: (editorState, onSelected, style) => SelectableSvgWidget(
     name: 'editor/board',
     isSelected: onSelected,
+    style: style,
   ),
   keywords: ['referenced', 'board', 'kanban'],
   handler: (editorState, menuService, context) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/board/board_view_menu_item.dart

@@ -10,9 +10,10 @@ import 'package:easy_localization/easy_localization.dart';
 SelectionMenuItem boardViewMenuItem(DocumentBloc documentBloc) =>
     SelectionMenuItem(
       name: LocaleKeys.document_slashMenu_board_createANewBoard.tr(),
-      icon: (editorState, onSelected) => SelectableSvgWidget(
+      icon: (editorState, onSelected, style) => SelectableSvgWidget(
         name: 'editor/board',
         isSelected: onSelected,
+        style: style,
       ),
       keywords: ['board', 'kanban'],
       handler: (editorState, menuService, context) async {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/divider/divider_character_shortcut_event.dart

@@ -1,3 +1,4 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/base/selectable_svg_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/divider/divider_node_widget.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
@@ -41,9 +42,10 @@ CharacterShortcutEventHandler _convertMinusesToDividerHandler =
 
 SelectionMenuItem dividerMenuItem = SelectionMenuItem(
   name: 'Divider',
-  icon: (editorState, onSelected) => const Icon(
+  icon: (editorState, onSelected, style) => SelectableIconWidget(
-    Icons.horizontal_rule,
+    icon: Icons.horizontal_rule,
-    size: 18.0,
+    isSelected: onSelected,
+    style: style,
   ),
   keywords: ['horizontal rule', 'divider'],
   handler: (editorState, _, __) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/emoji_picker/emoji_menu_item.dart

@@ -7,9 +7,10 @@ import 'emoji_picker.dart';
 
 SelectionMenuItem emojiMenuItem = SelectionMenuItem(
   name: 'Emoji',
-  icon: (editorState, onSelected) => SelectableIconWidget(
+  icon: (editorState, onSelected, style) => SelectableIconWidget(
     icon: Icons.emoji_emotions_outlined,
     isSelected: onSelected,
+    style: style,
   ),
   keywords: ['emoji'],
   handler: (editorState, menuService, context) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_menu_item.dart

@@ -8,9 +8,10 @@ import 'package:flutter/material.dart';
 
 SelectionMenuItem gridMenuItem = SelectionMenuItem(
   name: LocaleKeys.document_plugins_referencedGrid.tr(),
-  icon: (editorState, onSelected) => SelectableSvgWidget(
+  icon: (editorState, onSelected, style) => SelectableSvgWidget(
     name: 'editor/board',
     isSelected: onSelected,
+    style: style,
   ),
   keywords: ['referenced', 'grid'],
   handler: (editorState, menuService, context) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/grid/grid_view_menu_item.dart

@@ -10,9 +10,10 @@ import 'package:easy_localization/easy_localization.dart';
 SelectionMenuItem gridViewMenuItem(DocumentBloc documentBloc) =>
     SelectionMenuItem(
       name: LocaleKeys.document_slashMenu_grid_createANewGrid.tr(),
-      icon: (editorState, onSelected) => SelectableSvgWidget(
+      icon: (editorState, onSelected, style) => SelectableSvgWidget(
         name: 'editor/grid',
         isSelected: onSelected,
+        style: style,
       ),
       keywords: ['grid'],
       handler: (editorState, menuService, context) async {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart

@@ -126,7 +126,7 @@ class _ToggleListBlockComponentWidgetState
 
   // build the richtext child
   Widget buildToggleListBlockComponent(BuildContext context) {
-    return Row(
+    Widget child = Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         // the emoji picker button for the note
@@ -158,6 +158,16 @@ class _ToggleListBlockComponentWidgetState
         ),
       ],
     );
+
+    if (widget.actionBuilder != null) {
+      child = BlockComponentActionWrapper(
+        node: node,
+        actionBuilder: widget.actionBuilder!,
+        child: child,
+      );
+    }
+
+    return child;
   }
 
   Future<void> onCollapsed() async {

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

@@ -124,4 +124,16 @@ class EditorStyleCustomizer {
       color: theme.colorScheme.onBackground,
     );
   }
+
+  SelectionMenuStyle selectionMenuStyleBuilder() {
+    final theme = Theme.of(context);
+    return SelectionMenuStyle(
+      selectionMenuBackgroundColor: theme.cardColor,
+      selectionMenuItemTextColor: theme.colorScheme.onBackground,
+      selectionMenuItemIconColor: theme.colorScheme.onBackground,
+      selectionMenuItemSelectedIconColor: theme.colorScheme.onSurface,
+      selectionMenuItemSelectedTextColor: theme.colorScheme.onSurface,
+      selectionMenuItemSelectedColor: theme.hoverColor,
+    );
+  }
 }

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/add_button.dart

@@ -14,6 +14,7 @@ import 'package:easy_localization/easy_localization.dart';
 class AddButton extends StatelessWidget {
   final Function(
     PluginBuilder,
+    String? name,
     List<int>? initialDataBytes,
     bool openAfterCreated,
   ) onSelected;
@@ -71,20 +72,20 @@ class AddButton extends StatelessWidget {
       },
       onSelected: (action, controller) {
         if (action is AddButtonActionWrapper) {
-          onSelected(action.pluginBuilder, null, true);
+          onSelected(action.pluginBuilder, null, null, true);
         }
         if (action is ImportActionWrapper) {
-          showImportPanel(context, (type, initialDataBytes) {
+          showImportPanel(context, (type, name, initialDataBytes) {
             if (initialDataBytes == null) {
               return;
             }
             switch (type) {
               case ImportType.historyDocument:
               case ImportType.historyDatabase:
-                onSelected(action.pluginBuilder, initialDataBytes, false);
+                onSelected(action.pluginBuilder, name, initialDataBytes, false);
                 break;
               case ImportType.markdownOrText:
-                onSelected(action.pluginBuilder, initialDataBytes, true);
+                onSelected(action.pluginBuilder, name, initialDataBytes, true);
                 break;
             }
           });

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/header.dart

@@ -108,10 +108,10 @@ class MenuAppHeader extends StatelessWidget {
     return Tooltip(
       message: LocaleKeys.menuAppHeader_addPageTooltip.tr(),
       child: AddButton(
-        onSelected: (pluginBuilder, initialDataBytes, openAfterCreated) {
+        onSelected: (pluginBuilder, name, initialDataBytes, openAfterCreated) {
           context.read<AppBloc>().add(
                 AppEvent.createView(
-                  LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
+                  name ?? LocaleKeys.menuAppHeader_defaultNewPageName.tr(),
                   pluginBuilder,
                   initialDataBytes: initialDataBytes,
                   openAfterCreated: openAfterCreated,

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/app/header/import/import_panel.dart

@@ -12,8 +12,13 @@ import 'package:flowy_infra_ui/style_widget/container.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:path/path.dart' as p;
 
-typedef ImportCallback = void Function(ImportType type, List<int>? document);
+typedef ImportCallback = void Function(
+  ImportType type,
+  String name,
+  List<int>? document,
+);
 
 Future<void> showImportPanel(
   BuildContext context,
@@ -183,7 +188,11 @@ class _ImportPanelState extends State<_ImportPanel> {
       }
       if (document != null) {
         final data = DocumentDataPBFromTo.fromDocument(document);
-        widget.importCallback(importType, data?.writeToBuffer());
+        widget.importCallback(
+          importType,
+          p.basenameWithoutExtension(path),
+          data?.writeToBuffer(),
+        );
       }
     }
   }

frontend/appflowy_flutter/pubspec.lock

@@ -53,8 +53,8 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "25eb16"
+      ref: "09e91c"
-      resolved-ref: "25eb1653252efa0c2695a49e7e7493c4030c11e4"
+      resolved-ref: "09e91c6e09f03f12aa2f499767109e70c4791535"
       url: "https://github.com/LucasXu0/appflowy-editor.git"
     source: git
     version: "0.1.12"

frontend/appflowy_flutter/pubspec.yaml

@@ -47,7 +47,7 @@ dependencies:
     # path: /Users/lucas.xu/Desktop/appflowy-editor
     git:
       url: https://github.com/LucasXu0/appflowy-editor.git
-      ref: 25eb16
+      ref: 09e91c
   appflowy_popover:
     path: packages/appflowy_popover