fix: toolbar and link hover menu will not display together

asjqkkkk · asjqkkkk · commit b9b673371628 · 2025-03-28T12:14:21.000+08:00
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart
@@ -1,10 +1,9 @@
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/toolbar_extension.dart';
+import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'toolbar_animation.dart';
-import 'toolbar_cubit.dart';
 
 class DesktopFloatingToolbar extends StatefulWidget {
   const DesktopFloatingToolbar({
@@ -39,24 +38,32 @@ class _DesktopFloatingToolbarState extends State<DesktopFloatingToolbar> {
     final selectionRect = editorState.selectionRects();
     if (selectionRect.isEmpty) return;
     position = calculateSelectionMenuOffset(selectionRect.first);
+    getIt<FloatingToolbarController>()._addCallback(dismiss);
+  }
+
+  @override
+  void dispose() {
+    getIt<FloatingToolbarController>()._removeCallback(dismiss);
+    super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
     if (position == null) return Container();
-    return BlocProvider<ToolbarCubit>(
-      create: (_) => ToolbarCubit(widget.onDismiss),
-      child: Positioned(
-        left: position!.left,
-        top: position!.top,
-        right: position!.right,
-        child: widget.enableAnimation
-            ? ToolbarAnimationWidget(child: widget.child)
-            : widget.child,
-      ),
+    return Positioned(
+      left: position!.left,
+      top: position!.top,
+      right: position!.right,
+      child: widget.enableAnimation
+          ? ToolbarAnimationWidget(child: widget.child)
+          : widget.child,
     );
   }
 
+  void dismiss() {
+    widget.onDismiss.call();
+  }
+
   _Position calculateSelectionMenuOffset(
     Rect rect,
   ) {
@@ -92,3 +99,33 @@ class _Position {
   final double? top;
   final double? right;
 }
+
+class FloatingToolbarController {
+  final Set<VoidCallback> _dismissCallbacks = {};
+  final Set<VoidCallback> _displayListeners = {};
+
+  void _addCallback(VoidCallback callback) {
+    _dismissCallbacks.add(callback);
+    for (final listener in Set.of(_displayListeners)) {
+      listener.call();
+    }
+  }
+
+  void _removeCallback(VoidCallback callback) =>
+      _dismissCallbacks.remove(callback);
+
+  bool get isToolbarShowing => _dismissCallbacks.isNotEmpty;
+
+  void addDisplayListener(VoidCallback listener) =>
+      _displayListeners.add(listener);
+
+  void removeDisplayListener(VoidCallback listener) =>
+      _displayListeners.remove(listener);
+
+  void hideToolbar() {
+    if (_dismissCallbacks.isEmpty) return;
+    for (final callback in _dismissCallbacks) {
+      callback.call();
+    }
+  }
+}
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_hover_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_hover_menu.dart
@@ -4,6 +4,7 @@ import 'package:appflowy/core/helpers/url_launcher.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/copy_and_paste/clipboard_service.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/toolbar_item/custom_link_toolbar_item.dart';
@@ -50,6 +51,7 @@ class LinkHoverTrigger extends StatefulWidget {
 class _LinkHoverTriggerState extends State<LinkHoverTrigger> {
   final hoverMenuController = PopoverController();
   final editMenuController = PopoverController();
+  final toolbarController = getIt<FloatingToolbarController>();
   bool isHoverMenuShowing = false;
   bool isHoverMenuHovering = false;
   bool isHoverTriggerHovering = false;
@@ -68,13 +70,15 @@ class _LinkHoverTriggerState extends State<LinkHoverTrigger> {
   void initState() {
     super.initState();
     getIt<LinkHoverTriggers>()._add(triggerKey, showLinkHoverMenu);
+    toolbarController.addDisplayListener(onToolbarShow);
   }
 
   @override
   void dispose() {
     hoverMenuController.close();
     editMenuController.close();
     getIt<LinkHoverTriggers>()._remove(triggerKey, showLinkHoverMenu);
+    toolbarController.removeDisplayListener(onToolbarShow);
     super.dispose();
   }
 
@@ -184,8 +188,10 @@ class _LinkHoverTriggerState extends State<LinkHoverTrigger> {
     );
   }
 
+  void onToolbarShow() => hoverMenuController.close();
+
   void showLinkHoverMenu() {
-    if (isHoverMenuShowing) return;
+    if (isHoverMenuShowing || toolbarController.isToolbarShowing) return;
     keepEditorFocusNotifier.increase();
     hoverMenuController.show();
   }
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/toolbar_cubit.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/toolbar_cubit.dart
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_link_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_link_toolbar_item.dart
@@ -1,17 +1,15 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/toolbar_extension.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_create_menu.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_hover_menu.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/toolbar_cubit.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra/theme_extension_v2.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-
 import 'toolbar_id_enum.dart';
 
 const kIsPageLink = 'is_page_link';
@@ -34,7 +32,6 @@ final customLinkItem = ToolbarItem(
     final hoverColor = isHref
         ? highlightColor
         : EditorStyleCustomizer.toolbarHoverColor(context);
-    final toolbarCubit = context.read<ToolbarCubit?>();
 
     final child = FlowyIconButton(
       width: 36,
@@ -45,11 +42,11 @@ final customLinkItem = ToolbarItem(
         FlowySvgs.toolbar_link_m,
         size: Size.square(20.0),
         color: (isDark && isHref)
-                    ? Color(0xFF282E3A)
-                    : AFThemeExtensionV2.of(context).icon_primary,
+            ? Color(0xFF282E3A)
+            : AFThemeExtensionV2.of(context).icon_primary,
       ),
       onPressed: () {
-        toolbarCubit?.dismiss();
+        getIt<FloatingToolbarController>().hideToolbar();
         if (isHref) {
           getIt<LinkHoverTriggers>().call(
             HoverTriggerKey(nodes.first.id, selection),
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/more_option_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/more_option_toolbar_item.dart
@@ -1,9 +1,9 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_page.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_create_menu.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_hover_menu.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/toolbar_cubit.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy/startup/startup.dart';
@@ -14,7 +14,6 @@ import 'package:appflowy_editor/src/editor/toolbar/desktop/items/utils/tooltip_u
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'custom_text_align_toolbar_item.dart';
 import 'text_suggestions_toolbar_item.dart';
@@ -288,7 +287,7 @@ class _MoreOptionActionListState extends State<MoreOptionActionList> {
       popoverController: suggestionsPopoverController,
       popoverDirection: PopoverDirection.leftWithTopAligned,
       showOffset: Offset(-8, height),
-      onSelect: () => context.read<ToolbarCubit?>()?.dismiss(),
+      onSelect: () => getIt<FloatingToolbarController>().hideToolbar(),
       child: buildCommandItem(
         MoreOptionCommand.suggestions,
         rightIcon: FlowySvg(FlowySvgs.toolbar_arrow_right_m),
@@ -308,7 +307,7 @@ class _MoreOptionActionListState extends State<MoreOptionActionList> {
       popoverController: textAlignPopoverController,
       popoverDirection: PopoverDirection.leftWithTopAligned,
       showOffset: Offset(-8, 0),
-      onSelect: () => context.read<ToolbarCubit?>()?.dismiss(),
+      onSelect: () => getIt<FloatingToolbarController>().hideToolbar(),
       highlightColor: highlightColor,
       child: buildCommandItem(
         MoreOptionCommand.textAlign,
@@ -379,7 +378,7 @@ enum MoreOptionCommand {
           (attributes) => attributes[AppFlowyRichTextKeys.href] != null,
         );
       });
-      context.read<ToolbarCubit?>()?.dismiss();
+      getIt<FloatingToolbarController>().hideToolbar();
       if (isHref) {
         getIt<LinkHoverTriggers>().call(
           HoverTriggerKey(nodes.first.id, selection),
diff --git a/frontend/appflowy_flutter/lib/startup/startup.dart b/frontend/appflowy_flutter/lib/startup/startup.dart
@@ -2,6 +2,7 @@ import 'dart:async';
 import 'dart:io';
 
 import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_hover_menu.dart';
 import 'package:appflowy/util/expand_views.dart';
 import 'package:appflowy/workspace/application/settings/prelude.dart';
@@ -187,6 +188,9 @@ Future<void> initGetIt(
   getIt.registerSingleton<PluginSandbox>(PluginSandbox());
   getIt.registerSingleton<ViewExpanderRegistry>(ViewExpanderRegistry());
   getIt.registerSingleton<LinkHoverTriggers>(LinkHoverTriggers());
+  getIt.registerSingleton<FloatingToolbarController>(
+    FloatingToolbarController(),
+  );
 
   await DependencyResolver.resolve(getIt, mode);
 }
diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension_v2.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension_v2.dart
@@ -41,8 +41,9 @@ class AFThemeExtensionV2 extends ThemeExtension<AFThemeExtensionV2> {
         border_grey_quaternary:
             border_grey_quaternary ?? this.border_grey_quaternary,
         fill_theme_select: fill_theme_select ?? this.fill_theme_select,
-        fill_grey_thick_alpha_1:fill_grey_thick_alpha_1 ?? this.fill_grey_thick_alpha_1,
-        shadow_medium:shadow_medium ?? this.shadow_medium,
+        fill_grey_thick_alpha_1:
+            fill_grey_thick_alpha_1 ?? this.fill_grey_thick_alpha_1,
+        shadow_medium: shadow_medium ?? this.shadow_medium,
       );
 
   @override
@@ -65,9 +66,8 @@ class AFThemeExtensionV2 extends ThemeExtension<AFThemeExtensionV2> {
       fill_grey_thick_alpha_1: Color.lerp(
               fill_grey_thick_alpha_1, other.fill_grey_thick_alpha_1, t) ??
           fill_grey_thick_alpha_1,
-      shadow_medium: Color.lerp(
-              shadow_medium, other.shadow_medium, t) ??
-          shadow_medium,
+      shadow_medium:
+          Color.lerp(shadow_medium, other.shadow_medium, t) ?? shadow_medium,
     );
   }
 }
