[SuperEditor] - Fix editor overlays obscures everything beneath it when Dev Tools paints layout bounds (Resolves #2610) (#2618)

Author: rutvik110

super_editor/lib/src/default_editor/document_caret_overlay.dart

@@ -4,6 +4,7 @@ import 'package:flutter/scheduler.dart';
 import 'package:super_editor/src/core/document_composer.dart';
 import 'package:super_editor/src/core/document_layout.dart';
 import 'package:super_editor/src/infrastructure/documents/document_layers.dart';
+import 'package:super_editor/src/infrastructure/flutter/empty_box.dart';
 import 'package:super_editor/src/infrastructure/platforms/mobile_documents.dart';
 import 'package:super_text_layout/super_text_layout.dart';
 
@@ -191,11 +192,11 @@ class CaretDocumentOverlayState extends DocumentLayoutLayerState<CaretDocumentOv
     // `displayOnAllPlatforms` to true.
     final platform = widget.platformOverride ?? defaultTargetPlatform;
     if (!widget.displayOnAllPlatforms && (platform == TargetPlatform.android || platform == TargetPlatform.iOS)) {
-      return const SizedBox();
+      return const EmptyBox();
     }
 
     if (_shouldHideCaretForExpandedSelection) {
-      return const SizedBox();
+      return const EmptyBox();
     }
 
     // Use a RepaintBoundary so that caret flashing doesn't invalidate our

super_editor/lib/src/default_editor/document_gestures_touch_android.dart

@@ -19,6 +19,7 @@ import 'package:super_editor/src/document_operations/selection_operations.dart';
 import 'package:super_editor/src/infrastructure/_logging.dart';
 import 'package:super_editor/src/infrastructure/content_layers.dart';
 import 'package:super_editor/src/infrastructure/flutter/build_context.dart';
+import 'package:super_editor/src/infrastructure/flutter/empty_box.dart';
 import 'package:super_editor/src/infrastructure/flutter/eager_pan_gesture_recognizer.dart';
 import 'package:super_editor/src/infrastructure/flutter/flutter_scheduler.dart';
 import 'package:super_editor/src/infrastructure/multi_tap_gesture.dart';
@@ -366,7 +367,7 @@ class SuperEditorAndroidToolbarFocalPointDocumentLayerBuilder implements SuperEd
         SuperEditorAndroidControlsScope.maybeNearestOf(context) == null) {
       // There's no controls scope. This probably means SuperEditor is configured with
       // a non-Android gesture mode. Build nothing.
-      return const ContentLayerProxyWidget(child: SizedBox());
+      return const ContentLayerProxyWidget(child: EmptyBox());
     }
 
     return AndroidToolbarFocalPointDocumentLayer(
@@ -399,7 +400,7 @@ class SuperEditorAndroidHandlesDocumentLayerBuilder implements SuperEditorLayerB
         SuperEditorAndroidControlsScope.maybeNearestOf(context) == null) {
       // There's no controls scope. This probably means SuperEditor is configured with
       // a non-Android gesture mode. Build nothing.
-      return const ContentLayerProxyWidget(child: SizedBox());
+      return const ContentLayerProxyWidget(child: EmptyBox());
     }
 
     return AndroidHandlesDocumentLayer(

super_editor/lib/src/default_editor/document_gestures_touch_ios.dart

@@ -17,6 +17,7 @@ import 'package:super_editor/src/default_editor/text_tools.dart';
 import 'package:super_editor/src/document_operations/selection_operations.dart';
 import 'package:super_editor/src/infrastructure/_logging.dart';
 import 'package:super_editor/src/infrastructure/content_layers.dart';
+import 'package:super_editor/src/infrastructure/flutter/empty_box.dart';
 import 'package:super_editor/src/infrastructure/flutter/eager_pan_gesture_recognizer.dart';
 import 'package:super_editor/src/infrastructure/flutter/build_context.dart';
 import 'package:super_editor/src/infrastructure/flutter/flutter_scheduler.dart';
@@ -1952,7 +1953,7 @@ class SuperEditorIosToolbarFocalPointDocumentLayerBuilder implements SuperEditor
     if (defaultTargetPlatform != TargetPlatform.iOS || SuperEditorIosControlsScope.maybeNearestOf(context) == null) {
       // There's no controls scope. This probably means SuperEditor is configured with
       // a non-iOS gesture mode. Build nothing.
-      return const ContentLayerProxyWidget(child: SizedBox());
+      return const ContentLayerProxyWidget(child: EmptyBox());
     }
 
     return IosToolbarFocalPointDocumentLayer(
@@ -1985,7 +1986,7 @@ class SuperEditorIosHandlesDocumentLayerBuilder implements SuperEditorLayerBuild
     if (defaultTargetPlatform != TargetPlatform.iOS || SuperEditorIosControlsScope.maybeNearestOf(context) == null) {
       // There's no controls scope. This probably means SuperEditor is configured with
       // a non-iOS gesture mode. Build nothing.
-      return const ContentLayerProxyWidget(child: SizedBox());
+      return const ContentLayerProxyWidget(child: EmptyBox());
     }
 
     final controlsController = SuperEditorIosControlsScope.rootOf(context);

super_editor/lib/src/infrastructure/flutter/empty_box.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+
+/// A widget that takes up all available space, but unlike `SizedBox`, this widget
+/// doesn't paint anything in debug mode.
+///
+/// Typically, when a Flutter app wants to take up space with a widget without
+/// painting anything, a `SizedBox` used. However, when using Flutter debug
+/// tools to see layout boundaries, every `SizedBox` paints itself with a gray
+/// color. This is especially a problem when a `SizedBox` is displayed in an
+/// overlay. To solve that problem, `EmptyBox` takes up space where a
+/// `SizedBox` may have been used, but paints nothing in debug mode, allowing
+/// users to see the content beneath the overlay.
+class EmptyBox extends LeafRenderObjectWidget {
+  const EmptyBox();
+
+  @override
+  RenderEmptyBox createRenderObject(BuildContext context) {
+    return RenderEmptyBox();
+  }
+}
+
+class RenderEmptyBox extends RenderProxyBox {}