[iOS] Add spell check suggestions toolbar on tap (flutter#119189)

camsim99 · web-flow · commit 52cacd9d1ddc · 2023-03-31T19:47:22.000Z
[iOS] Add spell check suggestions toolbar on tap
diff --git a/packages/flutter/lib/cupertino.dart b/packages/flutter/lib/cupertino.dart
@@ -58,6 +58,7 @@ export 'src/cupertino/search_field.dart';
 export 'src/cupertino/segmented_control.dart';
 export 'src/cupertino/slider.dart';
 export 'src/cupertino/sliding_segmented_control.dart';
+export 'src/cupertino/spell_check_suggestions_toolbar.dart';
 export 'src/cupertino/switch.dart';
 export 'src/cupertino/tab_scaffold.dart';
 export 'src/cupertino/tab_view.dart';
diff --git a/packages/flutter/lib/src/cupertino/spell_check_suggestions_toolbar.dart b/packages/flutter/lib/src/cupertino/spell_check_suggestions_toolbar.dart
@@ -0,0 +1,131 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/scheduler.dart';
+import 'package:flutter/services.dart' show SelectionChangedCause, SuggestionSpan;
+import 'package:flutter/widgets.dart';
+
+import 'text_selection_toolbar.dart';
+import 'text_selection_toolbar_button.dart';
+
+/// iOS only shows 3 spell check suggestions in the toolbar.
+const int _maxSuggestions = 3;
+
+/// The default spell check suggestions toolbar for iOS.
+///
+/// Tries to position itself below the [anchors], but if it doesn't fit, then it
+/// readjusts to fit above bottom view insets.
+class CupertinoSpellCheckSuggestionsToolbar extends StatelessWidget {
+  /// Constructs a [CupertinoSpellCheckSuggestionsToolbar].
+  const CupertinoSpellCheckSuggestionsToolbar({
+    super.key,
+    required this.anchors,
+    required this.buttonItems,
+  });
+
+  /// The location on which to anchor the menu.
+  final TextSelectionToolbarAnchors anchors;
+
+  /// The [ContextMenuButtonItem]s that will be turned into the correct button
+  /// widgets and displayed in the spell check suggestions toolbar.
+  ///
+  /// See also:
+  ///
+  ///  * [AdaptiveTextSelectionToolbar.buttonItems], the list of
+  ///    [ContextMenuButtonItem]s that are used to build the buttons of the
+  ///    text selection toolbar.
+  ///  * [SpellCheckSuggestionsToolbar.buttonItems], the list of
+  ///    [ContextMenuButtonItem]s used to build the Material style spell check
+  ///    suggestions toolbar.
+  final List<ContextMenuButtonItem> buttonItems;
+
+  /// Builds the button items for the toolbar based on the available
+  /// spell check suggestions.
+  static List<ContextMenuButtonItem>? buildButtonItems(
+    BuildContext context,
+    EditableTextState editableTextState,
+  ) {
+    // Determine if composing region is misspelled.
+    final SuggestionSpan? spanAtCursorIndex =
+      editableTextState.findSuggestionSpanAtCursorIndex(
+        editableTextState.currentTextEditingValue.selection.baseOffset,
+      );
+
+    if (spanAtCursorIndex == null) {
+      return null;
+    }
+    if (spanAtCursorIndex.suggestions.isEmpty) {
+      return <ContextMenuButtonItem>[
+        ContextMenuButtonItem(
+          onPressed: () {},
+          label: 'No Replacements Found',
+        )
+      ];
+    }
+
+    final List<ContextMenuButtonItem> buttonItems = <ContextMenuButtonItem>[];
+
+    // Build suggestion buttons.
+    int suggestionCount = 0;
+    for (final String suggestion in spanAtCursorIndex.suggestions) {
+      if (suggestionCount >= _maxSuggestions) {
+        break;
+      }
+      buttonItems.add(ContextMenuButtonItem(
+        onPressed: () {
+          if (!editableTextState.mounted) {
+            return;
+          }
+          _replaceText(
+            editableTextState,
+            suggestion,
+            spanAtCursorIndex.range,
+          );
+        },
+        label: suggestion,
+      ));
+      suggestionCount += 1;
+    }
+    return buttonItems;
+  }
+
+  static void _replaceText(EditableTextState editableTextState, String text, TextRange replacementRange) {
+    // Replacement cannot be performed if the text is read only or obscured.
+    assert(!editableTextState.widget.readOnly && !editableTextState.widget.obscureText);
+
+    final TextEditingValue newValue = editableTextState.textEditingValue.replaced(
+      replacementRange,
+      text,
+    );
+    editableTextState.userUpdateTextEditingValue(newValue,SelectionChangedCause.toolbar);
+
+    // Schedule a call to bringIntoView() after renderEditable updates.
+    SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
+      if (editableTextState.mounted) {
+        editableTextState.bringIntoView(editableTextState.textEditingValue.selection.extent);
+      }
+    });
+    editableTextState.hideToolbar();
+    editableTextState.renderEditable.selectWordEdge(cause: SelectionChangedCause.toolbar);
+  }
+
+  /// Builds the toolbar buttons based on the [buttonItems].
+  List<Widget> _buildToolbarButtons(BuildContext context) {
+    return buttonItems.map((ContextMenuButtonItem buttonItem) {
+      return CupertinoTextSelectionToolbarButton.buttonItem(
+        buttonItem: buttonItem,
+      );
+    }).toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final List<Widget> children = _buildToolbarButtons(context);
+    return CupertinoTextSelectionToolbar(
+      anchorAbove: anchors.primaryAnchor,
+      anchorBelow: anchors.secondaryAnchor == null ? anchors.primaryAnchor : anchors.secondaryAnchor!,
+      children: children,
+    );
+  }
+}
diff --git a/packages/flutter/lib/src/cupertino/text_field.dart b/packages/flutter/lib/src/cupertino/text_field.dart
@@ -15,6 +15,7 @@ import 'colors.dart';
 import 'desktop_text_selection.dart';
 import 'icons.dart';
 import 'magnifier.dart';
+import 'spell_check_suggestions_toolbar.dart';
 import 'text_selection.dart';
 import 'theme.dart';
 
@@ -787,6 +788,32 @@ class CupertinoTextField extends StatefulWidget {
       decorationStyle: TextDecorationStyle.dotted,
   );
 
+  /// Default builder for the spell check suggestions toolbar in the Cupertino
+  /// style.
+  ///
+  /// See also:
+  ///  * [SpellCheckConfiguration.spellCheckSuggestionsToolbarBuilder], the
+  ///     builder configured to show a spell check suggestions toolbar.
+  ///  * [TextField.defaultSpellCheckSuggestionsToolbarBuilder], the builder
+  ///    configured to show the Material style spell check suggestions toolbar.
+  @visibleForTesting
+  static Widget defaultSpellCheckSuggestionsToolbarBuilder(
+    BuildContext context,
+    EditableTextState editableTextState,
+  ) {
+    final List<ContextMenuButtonItem>? buttonItems =
+      CupertinoSpellCheckSuggestionsToolbar.buildButtonItems(context, editableTextState);
+
+    if (buttonItems == null || buttonItems.isEmpty){
+      return const SizedBox.shrink();
+    }
+
+    return CupertinoSpellCheckSuggestionsToolbar(
+      anchors: editableTextState.contextMenuAnchors,
+      buttonItems: buttonItems,
+    );
+  }
+
   /// {@macro flutter.widgets.undoHistory.controller}
   final UndoHistoryController? undoController;
 
@@ -1274,7 +1301,11 @@ class _CupertinoTextFieldState extends State<CupertinoTextField> with Restoratio
       widget.spellCheckConfiguration != const SpellCheckConfiguration.disabled()
         ? widget.spellCheckConfiguration!.copyWith(
             misspelledTextStyle: widget.spellCheckConfiguration!.misspelledTextStyle
-              ?? CupertinoTextField.cupertinoMisspelledTextStyle)
+              ?? CupertinoTextField.cupertinoMisspelledTextStyle,
+            spellCheckSuggestionsToolbarBuilder:
+              widget.spellCheckConfiguration!.spellCheckSuggestionsToolbarBuilder
+                ?? CupertinoTextField.defaultSpellCheckSuggestionsToolbarBuilder,
+          )
         : const SpellCheckConfiguration.disabled();
 
     final Widget paddedEditable = Padding(
diff --git a/packages/flutter/lib/src/material/spell_check_suggestions_toolbar.dart b/packages/flutter/lib/src/material/spell_check_suggestions_toolbar.dart
@@ -3,7 +3,8 @@
 // found in the LICENSE file.
 
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/services.dart' show SuggestionSpan;
+import 'package:flutter/scheduler.dart';
+import 'package:flutter/services.dart' show SelectionChangedCause, SuggestionSpan;
 
 import 'adaptive_text_selection_toolbar.dart';
 import 'colors.dart';
@@ -42,6 +43,9 @@ class SpellCheckSuggestionsToolbar extends StatelessWidget {
   ///  * [AdaptiveTextSelectionToolbar.buttonItems], the list of
   ///    [ContextMenuButtonItem]s that are used to build the buttons of the
   ///    text selection toolbar.
+  ///  * [CupertinoSpellCheckSuggestionsToolbar.buttonItems], the list of
+  ///    [ContextMenuButtonItem]s used to build the Cupertino style spell check
+  ///    suggestions toolbar.
   final List<ContextMenuButtonItem> buttonItems;
 
   /// Padding between the toolbar and the anchor. Eyeballed on Pixel 4 emulator
@@ -77,10 +81,13 @@ class SpellCheckSuggestionsToolbar extends StatelessWidget {
     for (final String suggestion in spanAtCursorIndex.suggestions) {
       buttonItems.add(ContextMenuButtonItem(
         onPressed: () {
-          editableTextState
-            .replaceComposingRegion(
-              SelectionChangedCause.toolbar,
-              suggestion,
+          if (!editableTextState.mounted) {
+            return;
+          }
+          _replaceText(
+            editableTextState,
+            suggestion,
+            spanAtCursorIndex.range,
           );
         },
         label: suggestion,
@@ -91,9 +98,13 @@ class SpellCheckSuggestionsToolbar extends StatelessWidget {
     final ContextMenuButtonItem deleteButton =
       ContextMenuButtonItem(
         onPressed: () {
-          editableTextState.replaceComposingRegion(
-            SelectionChangedCause.toolbar,
+          if (!editableTextState.mounted) {
+            return;
+          }
+          _replaceText(
+            editableTextState,
             '',
+            editableTextState.currentTextEditingValue.composing,
           );
         },
         type: ContextMenuButtonType.delete,
@@ -103,6 +114,25 @@ class SpellCheckSuggestionsToolbar extends StatelessWidget {
     return buttonItems;
   }
 
+  static void _replaceText(EditableTextState editableTextState, String text, TextRange replacementRange) {
+    // Replacement cannot be performed if the text is read only or obscured.
+    assert(!editableTextState.widget.readOnly && !editableTextState.widget.obscureText);
+
+    final TextEditingValue newValue = editableTextState.textEditingValue.replaced(
+      replacementRange,
+      text,
+    );
+    editableTextState.userUpdateTextEditingValue(newValue,  SelectionChangedCause.toolbar);
+
+    // Schedule a call to bringIntoView() after renderEditable updates.
+    SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
+      if (editableTextState.mounted) {
+        editableTextState.bringIntoView(editableTextState.textEditingValue.selection.extent);
+      }
+    });
+    editableTextState.hideToolbar();
+  }
+
   /// Determines the Offset that the toolbar will be anchored to.
   static Offset getToolbarAnchor(TextSelectionToolbarAnchors anchors) {
     return anchors.secondaryAnchor == null ? anchors.primaryAnchor : anchors.secondaryAnchor!;
diff --git a/packages/flutter/lib/src/material/text_field.dart b/packages/flutter/lib/src/material/text_field.dart
@@ -805,7 +805,9 @@ class TextField extends StatefulWidget {
   ///
   /// See also:
   ///  * [SpellCheckConfiguration.spellCheckSuggestionsToolbarBuilder], the
-  //     builder configured to show a spell check suggestions toolbar.
+  ///    builder configured to show a spell check suggestions toolbar.
+  ///  * [CupertinoTextField.defaultSpellCheckSuggestionsToolbarBuilder], the builder
+  ///    configured to show the Material style spell check suggestions toolbar.
   @visibleForTesting
   static Widget defaultSpellCheckSuggestionsToolbarBuilder(
     BuildContext context,
@@ -1239,7 +1241,7 @@ class _TextFieldState extends State<TextField> with RestorationMixin implements
               ?? TextField.materialMisspelledTextStyle,
             spellCheckSuggestionsToolbarBuilder:
               widget.spellCheckConfiguration!.spellCheckSuggestionsToolbarBuilder
-                ?? TextField.defaultSpellCheckSuggestionsToolbarBuilder
+                ?? TextField.defaultSpellCheckSuggestionsToolbarBuilder,
           )
         : const SpellCheckConfiguration.disabled();
 
diff --git a/packages/flutter/lib/src/services/spell_check.dart b/packages/flutter/lib/src/services/spell_check.dart
@@ -15,9 +15,9 @@ import 'system_channels.dart';
 /// to "Hello, wrold!" may be:
 /// ```dart
 /// SuggestionSpan suggestionSpan =
-///   SuggestionSpan(
-///     const TextRange(start: 7, end: 12),
-///     List<String>.of(<String>['word', 'world', 'old']),
+///   const SuggestionSpan(
+///     TextRange(start: 7, end: 12),
+///     <String>['word', 'world', 'old'],
 /// );
 /// ```
 @immutable
diff --git a/packages/flutter/lib/src/widgets/editable_text.dart b/packages/flutter/lib/src/widgets/editable_text.dart
@@ -2347,24 +2347,6 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
     }
   }
 
-  /// Replace composing region with specified text.
-  void replaceComposingRegion(SelectionChangedCause cause, String text) {
-    // Replacement cannot be performed if the text is read only or obscured.
-    assert(!widget.readOnly && !widget.obscureText);
-
-    _replaceText(ReplaceTextIntent(textEditingValue, text, textEditingValue.composing, cause));
-
-    if (cause == SelectionChangedCause.toolbar) {
-      // Schedule a call to bringIntoView() after renderEditable updates.
-      SchedulerBinding.instance.addPostFrameCallback((_) {
-        if (mounted) {
-          bringIntoView(textEditingValue.selection.extent);
-        }
-      });
-      hideToolbar();
-    }
-  }
-
   /// Finds specified [SuggestionSpan] that matches the provided index using
   /// binary search.
   ///
@@ -3980,7 +3962,13 @@ class EditableTextState extends State<EditableText> with AutomaticKeepAliveClien
   /// Shows toolbar with spell check suggestions of misspelled words that are
   /// available for click-and-replace.
   bool showSpellCheckSuggestionsToolbar() {
+    // Spell check suggestions toolbars are intended to be shown on non-web
+    // platforms. Additionally, the Cupertino style toolbar can't be drawn on
+    // the web with the HTML renderer due to
+    // https://github.com/flutter/flutter/issues/123560.
+    final bool platformNotSupported = kIsWeb && BrowserContextMenu.enabled;
     if (!spellCheckEnabled
+        || platformNotSupported
         || widget.readOnly
         || _selectionOverlay == null
         || !_spellCheckResultsReceived) {
diff --git a/packages/flutter/lib/src/widgets/text_selection.dart b/packages/flutter/lib/src/widgets/text_selection.dart
@@ -2187,10 +2187,17 @@ class TextSelectionGestureDetectorBuilder {
             case PointerDeviceKind.trackpad:
             case PointerDeviceKind.stylus:
             case PointerDeviceKind.invertedStylus:
-              // Precise devices should place the cursor at a precise position.
+              // TODO(camsim99): Determine spell check toolbar behavior in these cases:
+              // https://github.com/flutter/flutter/issues/119573.
+              // Precise devices should place the cursor at a precise position if the
+              // word at the text position is not misspelled.
               renderEditable.selectPosition(cause: SelectionChangedCause.tap);
             case PointerDeviceKind.touch:
             case PointerDeviceKind.unknown:
+              // If the word that was tapped is misspelled, select the word and show the spell check suggestions
+              // toolbar once. If additional taps are made on a misspelled word, toggle the toolbar. If the word
+              // is not misspelled, default to the following behavior:
+              //
               // Toggle the toolbar if the `previousSelection` is collapsed, the tap is on the selection, the
               // TextAffinity remains the same, and the editable is focused. The TextAffinity is important when the
               // cursor is on the boundary of a line wrap, if the affinity is different (i.e. it is downstream), the
@@ -2205,9 +2212,17 @@ class TextSelectionGestureDetectorBuilder {
               final TextSelection previousSelection = renderEditable.selection ?? editableText.textEditingValue.selection;
               final TextPosition textPosition = renderEditable.getPositionForPoint(details.globalPosition);
               final bool isAffinityTheSame = textPosition.affinity == previousSelection.affinity;
-              if (((_positionWasOnSelectionExclusive(textPosition) && !previousSelection.isCollapsed)
-                  || (_positionWasOnSelectionInclusive(textPosition) && previousSelection.isCollapsed && isAffinityTheSame))
-                  && renderEditable.hasFocus) {
+              final bool wordAtCursorIndexIsMisspelled = editableText.findSuggestionSpanAtCursorIndex(textPosition.offset) != null;
+
+              if (wordAtCursorIndexIsMisspelled) {
+                renderEditable.selectWord(cause: SelectionChangedCause.tap);
+                if (previousSelection != editableText.textEditingValue.selection) {
+                  editableText.showSpellCheckSuggestionsToolbar();
+                } else {
+                  editableText.toggleToolbar(false);
+                }
+              }
+              else if (((_positionWasOnSelectionExclusive(textPosition) && !previousSelection.isCollapsed) || (_positionWasOnSelectionInclusive(textPosition) && previousSelection.isCollapsed && isAffinityTheSame)) && renderEditable.hasFocus) {
                 editableText.toggleToolbar(false);
               } else {
                 renderEditable.selectWordEdge(cause: SelectionChangedCause.tap);
diff --git a/packages/flutter/test/widgets/editable_text_test.dart b/packages/flutter/test/widgets/editable_text_test.dart
diff --git a/packages/flutter/test/widgets/text_selection_test.dart b/packages/flutter/test/widgets/text_selection_test.dart
