feat: enable debug paint size for mobile drag handle

example/lib/pages/mobile_editor.dart

@@ -43,6 +43,8 @@ class _MobileEditorState extends State<MobileEditor> {
 
     editorStyle = _buildMobileEditorStyle();
     blockComponentBuilders = _buildBlockComponentBuilders();
+
+    editorState.debugInfo.debugPaintSizeEnabled = true;
   }
 
   @override
@@ -125,7 +127,9 @@ class _MobileEditorState extends State<MobileEditor> {
       ),
       padding: const EdgeInsets.symmetric(horizontal: 24.0),
       magnifierSize: const Size(144, 96),
-      mobileDragHandleBallSize: const Size(12, 12),
+      mobileDragHandleBallSize: const Size.square(8),
+      mobileDragHandleLeftExtend: 12.0,
+      mobileDragHandleWidthExtend: 24.0,
     );
   }
 

lib/src/core/transform/transaction.dart

@@ -36,6 +36,12 @@ class Transaction {
   /// The before selection is to be recovered if needed.
   Selection? beforeSelection;
 
+  /// The custom selection type is to be applied.
+  SelectionType? customSelectionType;
+
+  /// The custom selection reason is to be applied.
+  SelectionUpdateReason? reason;
+
   Map? selectionExtraInfo;
 
   // mark needs to be composed

lib/src/editor/editor_component/service/ime/delta_input_on_non_text_update_impl.dart

@@ -59,14 +59,15 @@
     // for the another keyboards (e.g. system keyboard), they will trigger the
     // `onFloatingCursor` event instead.
     AppFlowyEditorLog.input.debug('[Android] onNonTextUpdate: $nonTextUpdate');
-    if (selection != null) {
+    if (selection != null && selection != editorState.selection) {
       editorState.updateSelectionWithReason(
         Selection.collapsed(
           Position(
             path: selection.start.path,
             offset: nonTextUpdate.selection.start,
           ),
         ),
+        reason: SelectionUpdateReason.uiEvent,
       );
     }
   } else if (PlatformExtension.isIOS) {

lib/src/editor/editor_component/service/ime/delta_input_service.dart

@@ -92,6 +92,11 @@
       ..setCaretRect(rect);
   }
 
+  @override
+  void clearComposingTextRange() {
+    composingTextRange = TextRange.empty;
+  }
+
   @override
   void connectionClosed() {}
 

lib/src/editor/editor_component/service/ime/non_delta_input_service.dart

@@ -144,6 +144,11 @@
       ..setComposingRect(rect.translate(0, rect.height));
   }
 
+  @override
+  void clearComposingTextRange() {
+    composingTextRange = TextRange.empty;
+  }
+
   @override
   void connectionClosed() {}
 

lib/src/editor/editor_component/service/ime/text_input_service.dart

@@ -25,6 +25,8 @@ abstract class TextInputService {
   TextRange? get composingTextRange;
   bool get attached;
 
+  void clearComposingTextRange();
+
   void updateCaretPosition(Size size, Matrix4 transform, Rect rect);
 
   /// Updates the [TextEditingValue] of the text currently being edited.

lib/src/editor/editor_component/service/keyboard_service_widget.dart

@@ -1,5 +1,6 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/editor_component/service/ime/delta_input_on_floating_cursor_update.dart';
+import 'package:appflowy_editor/src/editor/util/platform_extension.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -216,6 +217,9 @@
 
   void _attachTextInputService(Selection selection) {
     final textEditingValue = _getCurrentTextEditingValue(selection);
+    AppFlowyEditorLog.editor.debug(
+      'keyboard service - attach text input service: $textEditingValue',
+    );
     if (textEditingValue != null) {
       textInputService.attach(
         textEditingValue,
@@ -244,6 +248,16 @@
         .getNodesInSelection(selection)
         .where((element) => element.delta != null);
 
+    // if the selection is inline and the selection is updated by ui event,
+    // we should clear the composing range on Android.
+    final shouldClearComposingRange =
+        editorState.selectionType == SelectionType.inline &&
+            editorState.selectionUpdateReason == SelectionUpdateReason.uiEvent;
+
+    if (PlatformExtension.isAndroid && shouldClearComposingRange) {
+      textInputService.clearComposingTextRange();
+    }
+
     // Get the composing text range.
     final composingTextRange =
         textInputService.composingTextRange ?? TextRange.empty;

lib/src/editor/editor_component/service/selection/mobile_selection_service.dart

@@ -99,6 +99,10 @@
     listen: false,
   );
 
+  bool isCollapsedHandleVisible = false;
+
+  Timer? collapsedHandleTimer;
+
   @override
   void initState() {
     super.initState();
@@ -113,6 +117,7 @@
     WidgetsBinding.instance.removeObserver(this);
     selectionNotifierAfterLayout.dispose();
     editorState.selectionNotifier.removeListener(_updateSelection);
+    collapsedHandleTimer?.cancel();
 
     super.dispose();
   }
@@ -178,13 +183,15 @@
       valueListenable: selectionNotifierAfterLayout,
       builder: (context, selection, _) {
         if (selection == null || !selection.isCollapsed) {
+          isCollapsedHandleVisible = false;
           return const SizedBox.shrink();
         }
 
-        // on iOS, the drag handle should be updated when typing text.
+        // on Android, the drag handle should be updated when typing text.
         if (PlatformExtension.isAndroid &&
             editorState.selectionUpdateReason !=
                 SelectionUpdateReason.uiEvent) {
+          isCollapsedHandleVisible = false;
           return const SizedBox.shrink();
         }
 
@@ -193,6 +200,7 @@
               MobileSelectionDragMode.leftSelectionHandle,
               MobileSelectionDragMode.rightSelectionHandle,
             ].contains(dragMode)) {
+          isCollapsedHandleVisible = false;
           return const SizedBox.shrink();
         }
 
@@ -206,9 +214,14 @@
         );
 
         if (node == null || rect == null) {
+          isCollapsedHandleVisible = false;
           return const SizedBox.shrink();
         }
 
+        isCollapsedHandleVisible = true;
+
+        _clearCollapsedHandleOnAndroid();
+
         final editorStyle = editorState.editorStyle;
         return MobileCollapsedHandle(
           layerLink: node.layerLink,
@@ -218,6 +231,14 @@
           handleBallWidth: editorStyle.mobileDragHandleBallSize.width,
           enableHapticFeedbackOnAndroid:
               editorStyle.enableHapticFeedbackOnAndroid,
+          onDragging: (isDragging) {
+            if (isDragging) {
+              collapsedHandleTimer?.cancel();
+              collapsedHandleTimer = null;
+            } else {
+              _clearCollapsedHandleOnAndroid();
+            }
+          },
         );
       },
     );
@@ -301,6 +322,25 @@
     );
   }
 
+  // The collapsed handle will be dismissed when no user interaction is detected.
+  void _clearCollapsedHandleOnAndroid() {
+    if (!PlatformExtension.isAndroid) {
+      return;
+    }
+    collapsedHandleTimer?.cancel();
+    collapsedHandleTimer = Timer(
+      editorState.editorStyle.autoDismissCollapsedHandleDuration,
+      () {
+        if (isCollapsedHandleVisible) {
+          editorState.updateSelectionWithReason(
+            editorState.selection,
+            reason: SelectionUpdateReason.transaction,
+          );
+        }
+      },
+    );
+  }
+
   @override
   void updateSelection(Selection? selection) {
     if (currentSelection.value == selection) {

lib/src/editor/editor_component/style/editor_style.dart

@@ -22,6 +22,11 @@ class EditorStyle {
     this.enableHapticFeedbackOnAndroid = true,
     this.textScaleFactor = 1.0,
     this.maxWidth,
+    this.mobileDragHandleTopExtend,
+    this.mobileDragHandleWidthExtend,
+    this.mobileDragHandleLeftExtend,
+    this.mobileDragHandleHeightExtend,
+    this.autoDismissCollapsedHandleDuration = const Duration(seconds: 3),
   });
 
   // The padding of the editor.
@@ -69,6 +74,25 @@ class EditorStyle {
   // Only works on mobile.
   final Size mobileDragHandleBallSize;
 
+  /// The extend of the mobile drag handle.
+  ///
+  /// By default, the hit test area of drag handle is the ball size.
+  /// If you want to extend the hit test area, you can set this value.
+  ///
+  /// For example, if you set this value to 10, the hit test area of drag handle
+  /// will be the ball size + 10 * 2.
+  final double? mobileDragHandleTopExtend;
+  final double? mobileDragHandleLeftExtend;
+  final double? mobileDragHandleWidthExtend;
+  final double? mobileDragHandleHeightExtend;
+
+  /// The auto-dismiss time of the collapsed handle.
+  ///
+  /// The collapsed handle will be dismissed when no user interaction is detected.
+  ///
+  /// Only works on Android.
+  final Duration autoDismissCollapsedHandleDuration;
+
   final double mobileDragHandleWidth;
 
   // only works on android
@@ -101,7 +125,12 @@ class EditorStyle {
         mobileDragHandleBallSize = Size.zero,
         mobileDragHandleWidth = 0.0,
         enableHapticFeedbackOnAndroid = false,
-        dragHandleColor = Colors.transparent;
+        dragHandleColor = Colors.transparent,
+        mobileDragHandleTopExtend = null,
+        mobileDragHandleWidthExtend = null,
+        mobileDragHandleLeftExtend = null,
+        mobileDragHandleHeightExtend = null,
+        autoDismissCollapsedHandleDuration = const Duration(seconds: 0);
 
   const EditorStyle.mobile({
     EdgeInsets? padding,
@@ -118,6 +147,11 @@ class EditorStyle {
     this.enableHapticFeedbackOnAndroid = true,
     this.textScaleFactor = 1.0,
     this.maxWidth,
+    this.mobileDragHandleTopExtend,
+    this.mobileDragHandleWidthExtend,
+    this.mobileDragHandleLeftExtend,
+    this.mobileDragHandleHeightExtend,
+    this.autoDismissCollapsedHandleDuration = const Duration(seconds: 3),
   })  : padding = padding ?? const EdgeInsets.symmetric(horizontal: 20),
         cursorColor = cursorColor ?? const Color(0xFF00BCF0),
         dragHandleColor = dragHandleColor ?? const Color(0xFF00BCF0),
@@ -145,6 +179,11 @@ class EditorStyle {
     double? cursorWidth,
     double? textScaleFactor,
     double? maxWidth,
+    double? mobileDragHandleTopExtend,
+    double? mobileDragHandleWidthExtend,
+    double? mobileDragHandleLeftExtend,
+    double? mobileDragHandleHeightExtend,
+    Duration? autoDismissCollapsedHandleDuration,
   }) {
     return EditorStyle(
       padding: padding ?? this.padding,
@@ -165,6 +204,16 @@ class EditorStyle {
       cursorWidth: cursorWidth ?? this.cursorWidth,
       textScaleFactor: textScaleFactor ?? this.textScaleFactor,
       maxWidth: maxWidth ?? this.maxWidth,
+      mobileDragHandleTopExtend:
+          mobileDragHandleTopExtend ?? this.mobileDragHandleTopExtend,
+      mobileDragHandleWidthExtend:
+          mobileDragHandleWidthExtend ?? this.mobileDragHandleWidthExtend,
+      mobileDragHandleLeftExtend:
+          mobileDragHandleLeftExtend ?? this.mobileDragHandleLeftExtend,
+      mobileDragHandleHeightExtend:
+          mobileDragHandleHeightExtend ?? this.mobileDragHandleHeightExtend,
+      autoDismissCollapsedHandleDuration: autoDismissCollapsedHandleDuration ??
+          this.autoDismissCollapsedHandleDuration,
     );
   }
 }

lib/src/editor_state.dart

@@ -14,6 +14,17 @@ typedef EditorTransactionValue = (
   ApplyOptions options,
 );
 
+class EditorStateDebugInfo {
+  EditorStateDebugInfo({
+    this.debugPaintSizeEnabled = false,
+  });
+
+  /// Enable the debug paint size for selection handle.
+  ///
+  /// It only available on mobile.
+  bool debugPaintSizeEnabled;
+}
+
 /// the type of this value is bool.
 ///
 /// set true to this key to prevent attaching the text service when selection is changed.
@@ -166,6 +177,11 @@ class EditorState {
     service.rendererService = value;
   }
 
+  /// Customize the debug info for the editor state.
+  ///
+  /// Refer to [EditorStateDebugInfo] for more details.
+  EditorStateDebugInfo debugInfo = EditorStateDebugInfo();
+
   /// store the auto scroller instance in here temporarily.
   AutoScroller? autoScroller;
   ScrollableState? scrollableState;
@@ -360,7 +376,9 @@ class EditorState {
       _recordRedoOrUndo(options, transaction, skipHistoryDebounce);
 
       if (withUpdateSelection) {
-        _selectionUpdateReason = SelectionUpdateReason.transaction;
+        _selectionUpdateReason =
+            transaction.reason ?? SelectionUpdateReason.transaction;
+        _selectionType = transaction.customSelectionType;
         if (transaction.selectionExtraInfo != null) {
           selectionExtraInfo = transaction.selectionExtraInfo;
         }