feat: support clicking the selection area to disable floating toolbar (…

…#632)
AppFlowy-IO · Dec 26, 2023 · ace40a9 · ace40a9
1 parent 92e4260
commit ace40a9
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 1 deletion.
diff --git a/lib/src/editor/command/text_commands.dart b/lib/src/editor/command/text_commands.dart
@@ -184,6 +184,7 @@ extension TextTransforms on EditorState {
   Future<void> toggleAttribute(
     String key, {
     Selection? selection,
+    Map? selectionExtraInfo,
   }) async {
     selection ??= this.selection;
     if (selection == null) {
@@ -222,6 +223,7 @@ extension TextTransforms on EditorState {
         {
           key: !isHighlight,
         },
+        selectionExtraInfo: selectionExtraInfo,
       );
     }
   }

diff --git a/lib/src/editor/editor_component/service/selection/mobile_selection_service.dart b/lib/src/editor/editor_component/service/selection/mobile_selection_service.dart
@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/editor_component/service/selection/mobile_magnifiter.dart';
 import 'package:appflowy_editor/src/flutter/overlay.dart';
@@ -6,6 +8,12 @@ import 'package:appflowy_editor/src/service/selection/mobile_selection_gesture.d
 import 'package:flutter/material.dart' hide Overlay, OverlayEntry;
 import 'package:provider/provider.dart';
 
+/// only used in mobile
+///
+/// this will notify the developers when the selection is not collapsed.
+StreamController<int> appFlowyEditorOnTapSelectionArea =
+    StreamController<int>.broadcast();
+
 enum MobileSelectionDragMode {
   none,
   leftSelectionHandler,
@@ -514,6 +522,7 @@ class _MobileSelectionServiceWidgetState
             handlerWidth: editorState.editorStyle.mobileDragHandleWidth,
             handlerBallWidth:
                 editorState.editorStyle.mobileDragHandleBallSize.width,
+            onTapUp: () => appFlowyEditorOnTapSelectionArea.add(0),
           ),
         );
         _selectionAreas.add(overlay);

diff --git a/lib/src/editor/toolbar/mobile/mobile_floating_toolbar/mobile_floating_toolbar.dart b/lib/src/editor/toolbar/mobile/mobile_floating_toolbar/mobile_floating_toolbar.dart
@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/editor_component/service/selection/mobile_selection_service.dart';
 import 'package:flutter/material.dart';
@@ -48,6 +50,8 @@ class _MobileFloatingToolbarState extends State<MobileFloatingToolbar>
   // use for skipping the first build for the toolbar when the selection is collapsed.
   Selection? prevSelection;
 
+  late final StreamSubscription _onTapSelectionAreaSubscription;
+
   @override
   void initState() {
     super.initState();
@@ -57,6 +61,10 @@ class _MobileFloatingToolbarState extends State<MobileFloatingToolbar>
     widget.editorScrollController.offsetNotifier.addListener(
       _onScrollPositionChanged,
     );
+    _onTapSelectionAreaSubscription =
+        appFlowyEditorOnTapSelectionArea.stream.listen((event) {
+      _isToolbarVisible ? _clear() : _showAfterDelay();
+    });
   }
 
   @override
@@ -74,6 +82,7 @@ class _MobileFloatingToolbarState extends State<MobileFloatingToolbar>
     widget.editorScrollController.offsetNotifier.removeListener(
       _onScrollPositionChanged,
     );
+    _onTapSelectionAreaSubscription.cancel();
     WidgetsBinding.instance.removeObserver(this);
 
     _clear();

diff --git a/lib/src/render/selection/mobile_selection_widget.dart b/lib/src/render/selection/mobile_selection_widget.dart
@@ -12,6 +12,7 @@ class MobileSelectionWidget extends StatelessWidget {
     this.handlerColor = Colors.black,
     this.handlerBallWidth = 6.0,
     this.handlerWidth = 2.0,
+    required this.onTapUp,
   });
 
   final Color color;
@@ -23,6 +24,7 @@ class MobileSelectionWidget extends StatelessWidget {
   final Color handlerColor;
   final double handlerWidth;
   final double handlerBallWidth;
+  final VoidCallback onTapUp;
 
   @override
   Widget build(BuildContext context) {
@@ -46,7 +48,8 @@ class MobileSelectionWidget extends StatelessWidget {
         showWhenUnlinked: false,
         // Ignore the gestures in selection overlays
         //  to solve the problem that selection areas cannot overlap.
-        child: IgnorePointer(
+        child: GestureDetector(
+          onTapUp: (details) => onTapUp(),
           child: MobileSelectionWithHandler(
             color: color,
             decoration: decoration,

diff --git a/test/render/selection/mobile_selection_widget_test.dart b/test/render/selection/mobile_selection_widget_test.dart
@@ -14,6 +14,7 @@ void main() {
         Stack(
           children: [
             MobileSelectionWidget(
+              onTapUp: () {},
               showLeftHandler: true,
               showRightHandler: true,
               layerLink: node.layerLink,