[feature] : quill add magnifier

lib/src/models/config/raw_editor/raw_editor_configurations.dart

@@ -1,4 +1,5 @@
 import 'package:equatable/equatable.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart' show Brightness, Uint8List;
 import 'package:flutter/material.dart'
     show
@@ -86,6 +87,7 @@ class QuillRawEditorConfigurations extends Equatable {
     this.onScribbleActivated,
     this.scribbleAreaInsets,
     this.readOnlyMouseCursor = SystemMouseCursors.text,
+    this.magnifierConfiguration,
   });
 
   /// Controls the document being edited.
@@ -334,6 +336,8 @@ class QuillRawEditorConfigurations extends Equatable {
   /// Optional insets for the scribble area.
   final EdgeInsets? scribbleAreaInsets;
 
+  final TextMagnifierConfiguration? magnifierConfiguration;
+
   @override
   List<Object?> get props => [
         readOnly,

lib/src/widgets/editor/editor.dart

@@ -292,6 +292,7 @@ class QuillEditorState extends State<QuillEditor>
               onScribbleActivated: configurations.onScribbleActivated,
               scribbleAreaInsets: configurations.scribbleAreaInsets,
               readOnlyMouseCursor: configurations.readOnlyMouseCursor,
+              magnifierConfiguration: configurations.magnifierConfiguration,
             ),
           ),
         ),
@@ -418,6 +419,7 @@ class _QuillEditorSelectionGestureDetectorBuilder
         SelectionChangedCause.longPress,
       );
     }
+    editor?.updateMagnifier(details.globalPosition);
   }
 
   bool _isPositionSelected(TapUpDetails details) {
@@ -557,6 +559,7 @@ class _QuillEditorSelectionGestureDetectorBuilder
         Feedback.forLongPress(_state.context);
       }
     }
+    editor?.showMagnifier(details.globalPosition);
   }
 
   @override
@@ -575,6 +578,7 @@ class _QuillEditorSelectionGestureDetectorBuilder
         }
       }
     }
+    editor?.hideMagnifier();
     super.onSingleLongTapEnd(details);
   }
 }

lib/src/widgets/others/text_selection.dart

@@ -75,6 +75,7 @@ class EditorTextSelectionOverlay {
     this.onSelectionHandleTapped,
     this.dragStartBehavior = DragStartBehavior.start,
     this.handlesVisible = false,
+    this.magnifierConfiguration = TextMagnifierConfiguration.disabled,
   }) {
     // Clipboard status is only checked on first instance of
     // ClipboardStatusNotifier
@@ -183,6 +184,13 @@ class EditorTextSelectionOverlay {
 
   TextSelection get _selection => value.selection;
 
+  final MagnifierController _magnifierController = MagnifierController();
+
+  final TextMagnifierConfiguration magnifierConfiguration;
+
+  final ValueNotifier<MagnifierInfo> _magnifierInfo =
+      ValueNotifier<MagnifierInfo>(MagnifierInfo.empty);
+
   void setHandlesVisible(bool visible) {
     if (handlesVisible == visible) {
       return;
@@ -237,7 +245,7 @@ class EditorTextSelectionOverlay {
       BuildContext context, _TextSelectionHandlePosition position) {
     if (_selection.isCollapsed &&
         position == _TextSelectionHandlePosition.end) {
-      return Container();
+      return const SizedBox.shrink();
     }
     return Visibility(
         visible: handlesVisible,
@@ -252,6 +260,9 @@ class EditorTextSelectionOverlay {
           selection: _selection,
           selectionControls: selectionCtrls,
           position: position,
+          onHandleDragStart: _onHandleDragStart,
+          onHandleDragUpdate: _onHandleDragUpdate,
+          onHandleDragEnd: _onHandleDragEnd,
           dragStartBehavior: dragStartBehavior,
         ));
   }
@@ -341,11 +352,12 @@ class EditorTextSelectionOverlay {
   /// Final cleanup.
   void dispose() {
     hide();
+    _magnifierInfo.dispose();
   }
 
   /// Builds the handles by inserting them into the [context]'s overlay.
   void showHandles() {
-    assert(_handles == null);
+    if (_handles != null) return;
     _handles = <OverlayEntry>[
       OverlayEntry(
           builder: (context) =>
@@ -366,8 +378,123 @@ class EditorTextSelectionOverlay {
   void updateForScroll() {
     markNeedsBuild();
   }
+
+  void _onHandleDragStart(DragStartDetails details, TextPosition position) {
+    if (defaultTargetPlatform != TargetPlatform.iOS &&
+        defaultTargetPlatform != TargetPlatform.android) return;
+    showMagnifier(position, details.globalPosition, renderObject);
+  }
+
+  void _onHandleDragUpdate(DragUpdateDetails details, TextPosition position) {
+    if (defaultTargetPlatform != TargetPlatform.iOS &&
+        defaultTargetPlatform != TargetPlatform.android) return;
+    updateMagnifier(position, details.globalPosition, renderObject);
+  }
+
+  void _onHandleDragEnd(DragEndDetails details) {
+    if (defaultTargetPlatform != TargetPlatform.iOS &&
+        defaultTargetPlatform != TargetPlatform.android) return;
+    hideMagnifier();
+  }
+
+  void showMagnifier(
+      TextPosition position, Offset offset, RenderEditor editor) {
+    _showMagnifier(
+      _buildMagnifier(
+        currentTextPosition: position,
+        globalGesturePosition: offset,
+        renderEditable: editor,
+      ),
+    );
+  }
+
+  void _showMagnifier(MagnifierInfo initialMagnifierInfo) {
+    // 隐藏toolbar
+    if (toolbar != null) {
+      hideToolbar();
+    }
+    // 更新 magnifierInfo
+    _magnifierInfo.value = initialMagnifierInfo;
+
+    final builtMagnifier = magnifierConfiguration.magnifierBuilder(
+      context,
+      _magnifierController,
+      _magnifierInfo,
+    );
+
+    if (builtMagnifier == null) return;
+
+    _magnifierController.show(
+      context: context,
+      below: magnifierConfiguration.shouldDisplayHandlesInMagnifier
+          ? null
+          : _handles![0],
+      builder: (_) => builtMagnifier,
+    );
+  }
+
+  void updateMagnifier(
+      TextPosition position, Offset offset, RenderEditor editor) {
+    _updateMagnifier(
+      _buildMagnifier(
+        currentTextPosition: position,
+        globalGesturePosition: offset,
+        renderEditable: editor,
+      ),
+    );
+  }
+
+  void _updateMagnifier(MagnifierInfo magnifierInfo) {
+    if (_magnifierController.overlayEntry == null) {
+      return;
+    }
+    _magnifierInfo.value = magnifierInfo;
+  }
+
+  void hideMagnifier() {
+    if (_magnifierController.overlayEntry == null) {
+      return;
+    }
+    _magnifierController.hide();
+  }
+
+  // build magnifier info
+  MagnifierInfo _buildMagnifier(
+      {required RenderEditor renderEditable,
+      required Offset globalGesturePosition,
+      required TextPosition currentTextPosition}) {
+    final globalRenderEditableTopLeft =
+        renderEditable.localToGlobal(Offset.zero);
+    final localCaretRect =
+        renderEditable.getLocalRectForCaret(currentTextPosition);
+
+    final lineAtOffset = renderEditable.getLineAtOffset(currentTextPosition);
+    final positionAtEndOfLine = TextPosition(
+      offset: lineAtOffset.extentOffset,
+      affinity: TextAffinity.upstream,
+    );
+
+    // Default affinity is downstream.
+    final positionAtBeginningOfLine = TextPosition(
+      offset: lineAtOffset.baseOffset,
+    );
+
+    final lineBoundaries = Rect.fromPoints(
+      renderEditable.getLocalRectForCaret(positionAtBeginningOfLine).topCenter,
+      renderEditable.getLocalRectForCaret(positionAtEndOfLine).bottomCenter,
+    );
+
+    return MagnifierInfo(
+      fieldBounds: globalRenderEditableTopLeft & renderEditable.size,
+      globalGesturePosition: globalGesturePosition,
+      caretRect: localCaretRect.shift(globalRenderEditableTopLeft),
+      currentLineBoundaries: lineBoundaries.shift(globalRenderEditableTopLeft),
+    );
+  }
 }
 
+typedef DargHandleCallback<T> = void Function(T details, TextPosition position);
+
 /// This widget represents a single draggable text selection handle.
 class _TextSelectionHandleOverlay extends StatefulWidget {
   const _TextSelectionHandleOverlay({
@@ -379,6 +506,9 @@ class _TextSelectionHandleOverlay extends StatefulWidget {
     required this.onSelectionHandleChanged,
     required this.onSelectionHandleTapped,
     required this.selectionControls,
+    required this.onHandleDragStart,
+    required this.onHandleDragUpdate,
+    required this.onHandleDragEnd,
     this.dragStartBehavior = DragStartBehavior.start,
   });
 
@@ -388,6 +518,9 @@ class _TextSelectionHandleOverlay extends StatefulWidget {
   final LayerLink endHandleLayerLink;
   final RenderEditor renderObject;
   final ValueChanged<TextSelection?> onSelectionHandleChanged;
+  final DargHandleCallback<DragStartDetails>? onHandleDragStart;
+  final DargHandleCallback<DragUpdateDetails>? onHandleDragUpdate;
+  final ValueChanged<DragEndDetails> onHandleDragEnd;
   final VoidCallback? onSelectionHandleTapped;
   final TextSelectionControls selectionControls;
   final DragStartBehavior dragStartBehavior;
@@ -453,15 +586,18 @@ class _TextSelectionHandleOverlayState
   }
 
   void _handleDragStart(DragStartDetails details) {
+    if (!widget.renderObject.attached) return;
     final textPosition = widget.position == _TextSelectionHandlePosition.start
         ? widget.selection.base
         : widget.selection.extent;
     final lineHeight = widget.renderObject.preferredLineHeight(textPosition);
     final handleSize = widget.selectionControls.getHandleSize(lineHeight);
     _dragPosition = details.globalPosition + Offset(0, -handleSize.height);
+    widget.onHandleDragStart?.call(details, textPosition);
   }
 
   void _handleDragUpdate(DragUpdateDetails details) {
+    if (!widget.renderObject.attached) return;
     _dragPosition += details.delta;
     final position =
         widget.renderObject.getPositionForOffset(details.globalPosition);
@@ -497,8 +633,17 @@ class _TextSelectionHandleOverlayState
     if (newSelection.baseOffset >= newSelection.extentOffset) {
       return; // don't allow order swapping.
     }
-
     widget.onSelectionHandleChanged(newSelection);
+    if (widget.position == _TextSelectionHandlePosition.start) {
+      widget.onHandleDragUpdate?.call(details, newSelection.base);
+    } else if (widget.position == _TextSelectionHandlePosition.end) {
+      widget.onHandleDragUpdate?.call(details, newSelection.extent);
+    }
+  }
+
+  void _handleDragEnd(DragEndDetails details) {
+    if (!widget.renderObject.attached) return;
+    widget.onHandleDragEnd.call(details);
   }
 
   void _handleTap() {
@@ -579,6 +724,7 @@ class _TextSelectionHandleOverlayState
             dragStartBehavior: widget.dragStartBehavior,
             onPanStart: _handleDragStart,
             onPanUpdate: _handleDragUpdate,
+            onPanEnd: _handleDragEnd,
             onTap: _handleTap,
             child: Padding(
               padding: EdgeInsets.only(

lib/src/widgets/raw_editor/raw_editor.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/widgets.dart'
     show
         AnimationController,
@@ -84,4 +86,10 @@ abstract class EditorState extends State<QuillRawEditor>
   bool showToolbar();
 
   void requestKeyboard();
+
+  void showMagnifier(Offset positionToShow);
+
+  void updateMagnifier(Offset positionToShow);
+
+  void hideMagnifier();
 }

lib/src/widgets/raw_editor/raw_editor_state.dart

@@ -884,7 +884,13 @@ class QuillRawEditorState extends EditorState
     final oldSelection = controller.selection;
     controller.updateSelection(selection, ChangeSource.local);
 
+    if (_selectionOverlay == null) {
+      _selectionOverlay = _createSelectionOverlay();
+    } else {
+      _selectionOverlay!.update(textEditingValue);
+    }
     _selectionOverlay?.handlesVisible = _shouldShowSelectionHandles();
+    _selectionOverlay?.showHandles();
 
     if (!_keyboardVisible) {
       // This will show the keyboard for all selection changes on the
@@ -1245,11 +1251,13 @@ class QuillRawEditorState extends EditorState
 
   @override
   void dispose() {
+    hideMagnifier();
     closeConnectionIfNeeded();
     _keyboardVisibilitySubscription?.cancel();
     HardwareKeyboard.instance.removeHandler(_hardwareKeyboardEvent);
     assert(!hasConnection);
     _selectionOverlay?.dispose();
+    print('selection overlay disposed');
     _selectionOverlay = null;
     controller.removeListener(_didChangeTextEditingValueListener);
     widget.configurations.focusNode.removeListener(_handleFocusChanged);
@@ -1340,14 +1348,18 @@ class QuillRawEditorState extends EditorState
 
   void _updateOrDisposeSelectionOverlayIfNeeded() {
     if (_selectionOverlay != null) {
-      if (!_hasFocus || textEditingValue.selection.isCollapsed) {
+      if (_hasFocus) {
-        _selectionOverlay!.dispose();
-        _selectionOverlay = null;
-      } else {
         _selectionOverlay!.update(textEditingValue);
       }
     } else if (_hasFocus) {
-      _selectionOverlay = EditorTextSelectionOverlay(
+      _selectionOverlay = _createSelectionOverlay();
+      _selectionOverlay!.handlesVisible = _shouldShowSelectionHandles();
+      _selectionOverlay!.showHandles();
+    }
+  }
+
+  EditorTextSelectionOverlay _createSelectionOverlay() {
+    return EditorTextSelectionOverlay(
       value: textEditingValue,
       context: context,
       debugRequiredFor: widget,
@@ -1361,10 +1373,9 @@ class QuillRawEditorState extends EditorState
           ? null
           : (context) =>
               widget.configurations.contextMenuBuilder!(context, this),
+      magnifierConfiguration: widget.configurations.magnifierConfiguration ??
+          TextMagnifier.adaptiveMagnifierConfiguration,
     );
-      _selectionOverlay!.handlesVisible = _shouldShowSelectionHandles();
-      _selectionOverlay!.showHandles();
-    }
   }
 
   void _handleFocusChanged() {
@@ -1734,4 +1745,24 @@ class QuillRawEditorState extends EditorState
 
   @override
   bool get shareEnabled => false;
+
+  @override
+  void hideMagnifier() {
+    if (_selectionOverlay == null) return;
+    _selectionOverlay?.hideMagnifier();
+  }
+
+  @override
+  void showMagnifier(ui.Offset positionToShow) {
+    if (_selectionOverlay == null) return;
+    final position = renderEditor.getPositionForOffset(positionToShow);
+    _selectionOverlay?.showMagnifier(position, positionToShow, renderEditor);
+  }
+
+  @override
+  void updateMagnifier(ui.Offset positionToShow) {
+    _updateOrDisposeSelectionOverlayIfNeeded();
+    final position = renderEditor.getPositionForOffset(positionToShow);
+    _selectionOverlay?.updateMagnifier(position, positionToShow, renderEditor);
+  }
 }

lib/src/widgets/toolbar/buttons/link_style2_button.dart

@@ -288,7 +288,7 @@ class _LinkStyleDialogState extends State<LinkStyleDialog> {
         ? Theme.of(context)
             .elevatedButtonTheme
             .style
-            ?.copyWith(fixedSize: WidgetStatePropertyAll(widget.buttonSize))
+            ?.copyWith(fixedSize: MaterialStatePropertyAll(widget.buttonSize))
         : widget.dialogTheme?.buttonStyle;
 
     final isWrappable = widget.dialogTheme?.isWrappable ?? false;