Cherry Pick: [SuperEditor][Mobile] Fix downstream image caret position (

Resolves superlistapp#1959) (superlistapp#1995)

[SuperEditor][Mobile] Fix downstream image caret position (Resolves superlistapp#1959) (superlistapp#1967)

Co-authored-by: Angelo Silvestre <angelosilvestre.ccp@gmail.com>

super_editor/lib/src/infrastructure/platforms/android/android_document_controls.dart

@@ -313,8 +313,26 @@ class AndroidControlsDocumentLayerState
     }
 
     if (selection.isCollapsed && !_controlsController!.shouldShowExpandedHandles.value) {
+      Rect caretRect = documentLayout.getEdgeForPosition(selection.extent)!;
+
+      // Default caret width used by the Android caret.
+      const caretWidth = 2;
+
+      final layerBox = context.findRenderObject() as RenderBox?;
+      if (layerBox != null && layerBox.hasSize && caretRect.left + caretWidth >= layerBox.size.width) {
+        // Ajust the caret position to make it entirely visible because it's currently placed
+        // partially or entirely outside of the layers' bounds. This can happen for downstream selections
+        // of block components that take all the available width.
+        caretRect = Rect.fromLTWH(
+          layerBox.size.width - caretWidth,
+          caretRect.top,
+          caretRect.width,
+          caretRect.height,
+        );
+      }
+
       return DocumentSelectionLayout(
-        caret: documentLayout.getRectForPosition(selection.extent)!,
+        caret: caretRect,
       );
     } else {
       return DocumentSelectionLayout(

super_editor/lib/src/infrastructure/platforms/ios/ios_document_controls.dart

@@ -675,8 +675,26 @@ class IosControlsDocumentLayerState extends DocumentLayoutLayerState<IosHandlesD
     }
 
     if (selection.isCollapsed) {
+      Rect caretRect = documentLayout.getEdgeForPosition(selection.extent)!;
+
+      // Default caret width used by IOSCollapsedHandle.
+      const caretWidth = 2;
+
+      final layerBox = context.findRenderObject() as RenderBox?;
+      if (layerBox != null && layerBox.hasSize && caretRect.left + caretWidth >= layerBox.size.width) {
+        // Ajust the caret position to make it entirely visible because it's currently placed
+        // partially or entirely outside of the layers' bounds. This can happen for downstream selections
+        // of block components that take all the available width.
+        caretRect = Rect.fromLTWH(
+          layerBox.size.width - caretWidth,
+          caretRect.top,
+          caretRect.width,
+          caretRect.height,
+        );
+      }
+
       return DocumentSelectionLayout(
-        caret: documentLayout.getRectForPosition(selection.extent)!,
+        caret: caretRect,
       );
     } else {
       return DocumentSelectionLayout(

super_editor/pubspec.yaml

@@ -24,7 +24,7 @@ dependencies:
   attributed_text: ^0.3.0
   characters: ^1.2.0
   collection: ^1.15.0
-  follow_the_leader: ^0.0.4+7
+  follow_the_leader: ^0.0.4+8
   http: ">=0.13.1 <2.0.0"
   linkify: ^5.0.0
   logging: ^1.0.1

super_editor/test_goldens/editor/supereditor_caret_test.dart

@@ -18,9 +18,40 @@ void main() {
       );
       await tester.pump();
 
-      await screenMatchesGolden(tester, 'super-editor-image-caret-downstream');
+      await screenMatchesGolden(tester, 'super-editor-image-caret-downstream-mac');
     });
 
+    testGoldensOniOS('shows caret at right side of an image', (tester) async {
+      await _pumpCaretTestApp(tester);
+
+      // Tap close to the right edge of the editor to place the caret
+      // downstream on the image.
+      await tester.tapAt(
+        tester.getTopRight(find.byType(SuperEditor)) + const Offset(-20, 20),
+      );
+      await tester.pump();
+
+      await screenMatchesGolden(tester, 'super-editor-image-caret-downstream-ios');
+    });
+
+    testGoldensOnAndroid(
+      'shows caret at right side of an image',
+      (tester) async {
+        await _pumpCaretTestApp(tester);
+
+        // Tap close to the right edge of the editor to place the caret
+        // downstream on the image.
+        await tester.tapAt(
+          tester.getTopRight(find.byType(SuperEditor)) + const Offset(-20, 20),
+        );
+        await tester.pumpAndSettle();
+
+        await screenMatchesGolden(tester, 'super-editor-image-caret-downstream-android');
+      },
+      // TODO: find out why this test fails on CI only.
+      skip: true,
+    );
+
     testGoldensOnMac('shows caret at left side of an image', (tester) async {
       await _pumpCaretTestApp(tester);
 
@@ -31,8 +62,39 @@ void main() {
       );
       await tester.pump();
 
-      await screenMatchesGolden(tester, 'super-editor-image-caret-upstream');
+      await screenMatchesGolden(tester, 'super-editor-image-caret-upstream-mac');
     });
+
+    testGoldensOniOS('shows caret at left side of an image', (tester) async {
+      await _pumpCaretTestApp(tester);
+
+      // Tap close to the left edge of the editor to place the caret upstream
+      // on the image.
+      await tester.tapAt(
+        tester.getTopLeft(find.byType(SuperEditor)) + const Offset(20, 20),
+      );
+      await tester.pump();
+
+      await screenMatchesGolden(tester, 'super-editor-image-caret-upstream-ios');
+    });
+
+    testGoldensOnAndroid(
+      'shows caret at left side of an image',
+      (tester) async {
+        await _pumpCaretTestApp(tester);
+
+        // Tap close to the left edge of the editor to place the caret upstream
+        // on the image.
+        await tester.tapAt(
+          tester.getTopLeft(find.byType(SuperEditor)) + const Offset(20, 20),
+        );
+        await tester.pump();
+
+        await screenMatchesGolden(tester, 'super-editor-image-caret-upstream-android');
+      },
+      // TODO: find out why this test fails on CI only.
+      skip: true,
+    );
   });
 }