Update SuperEditor and SuperReader layer system to provide app-level composition (iOS)(Relates to #424, #893, #1166)(Resolves #1508)

super_editor/example/lib/demos/editor_configs/demo_mobile_editing_ios.dart

@@ -2,6 +2,7 @@ import 'dart:io';
 
 import 'package:example/demos/editor_configs/keyboard_overlay_clipper.dart';
 import 'package:flutter/material.dart';
+import 'package:follow_the_leader/follow_the_leader.dart';
 import 'package:super_editor/super_editor.dart';
 
 /// Mobile iOS document editing demo.
@@ -21,10 +22,15 @@ class _MobileEditingIOSDemoState extends State<MobileEditingIOSDemo> {
   late MutableDocumentComposer _composer;
   late Editor _docEditor;
   late CommonEditorOperations _docOps;
-  late MagnifierAndToolbarController _overlayController;
 
   FocusNode? _editorFocusNode;
 
+  final _selectionLayerLinks = SelectionLayerLinks();
+
+  // TODO: get rid of overlay controller once Android is refactored to use a control scope (as follow up to: https://github.com/superlistapp/super_editor/pull/1470)
+  late MagnifierAndToolbarController _overlayController;
+  late final SuperEditorIosControlsController _iosEditorControlsController;
+
   @override
   void initState() {
     super.initState();
@@ -38,11 +44,19 @@ class _MobileEditingIOSDemoState extends State<MobileEditingIOSDemo> {
       documentLayoutResolver: () => _docLayoutKey.currentState as DocumentLayout,
     );
     _editorFocusNode = FocusNode();
+
+    // TODO: get rid of the overlay controller
     _overlayController = MagnifierAndToolbarController();
+    _iosEditorControlsController = SuperEditorIosControlsController(
+      toolbarBuilder: _buildIosToolbar,
+      magnifierBuilder: _buildIosMagnifier,
+    );
   }
 
   @override
   void dispose() {
+    _iosEditorControlsController.dispose();
+
     _editorFocusNode!.dispose();
     _composer.dispose();
     _doc.removeListener(_onDocumentChange);
@@ -53,17 +67,23 @@ class _MobileEditingIOSDemoState extends State<MobileEditingIOSDemo> {
 
   void _cut() {
     _docOps.cut();
+    // TODO: get rid of overlay controller once Android is refactored to use a control scope (as follow up to: https://github.com/superlistapp/super_editor/pull/1470)
     _overlayController.hideToolbar();
+    _iosEditorControlsController.shouldShowToolbar.value = false;
   }
 
   void _copy() {
     _docOps.copy();
+    // TODO: get rid of overlay controller once Android is refactored to use a control scope (as follow up to: https://github.com/superlistapp/super_editor/pull/1470)
     _overlayController.hideToolbar();
+    _iosEditorControlsController.shouldShowToolbar.value = false;
   }
 
   void _paste() {
     _docOps.paste();
+    // TODO: get rid of overlay controller once Android is refactored to use a control scope (as follow up to: https://github.com/superlistapp/super_editor/pull/1470)
     _overlayController.hideToolbar();
+    _iosEditorControlsController.shouldShowToolbar.value = false;
   }
 
   @override
@@ -72,25 +92,23 @@ class _MobileEditingIOSDemoState extends State<MobileEditingIOSDemo> {
       child: Column(
         children: [
           Expanded(
-            child: SuperEditor(
-              focusNode: _editorFocusNode,
-              documentLayoutKey: _docLayoutKey,
-              editor: _docEditor,
-              document: _doc,
-              composer: _composer,
-              overlayController: _overlayController,
-              gestureMode: DocumentGestureMode.iOS,
-              inputSource: TextInputSource.ime,
-              iOSToolbarBuilder: (_) => IOSTextEditingFloatingToolbar(
-                onCutPressed: _cut,
-                onCopyPressed: _copy,
-                onPastePressed: _paste,
-                focalPoint: _overlayController.toolbarTopAnchor!,
-              ),
-              stylesheet: defaultStylesheet.copyWith(
-                documentPadding: const EdgeInsets.all(16),
+            child: SuperEditorIosControlsScope(
+              controller: _iosEditorControlsController,
+              child: SuperEditor(
+                focusNode: _editorFocusNode,
+                documentLayoutKey: _docLayoutKey,
+                editor: _docEditor,
+                document: _doc,
+                composer: _composer,
+                gestureMode: DocumentGestureMode.iOS,
+                inputSource: TextInputSource.ime,
+                selectionLayerLinks: _selectionLayerLinks,
+                stylesheet: defaultStylesheet.copyWith(
+                  documentPadding: const EdgeInsets.all(16),
+                ),
+                overlayController: _overlayController,
+                createOverlayControlsClipper: (_) => const KeyboardToolbarClipper(),
               ),
-              createOverlayControlsClipper: (_) => const KeyboardToolbarClipper(),
             ),
           ),
           MultiListenableBuilder(
@@ -105,6 +123,26 @@ class _MobileEditingIOSDemoState extends State<MobileEditingIOSDemo> {
     );
   }
 
+  Widget _buildIosToolbar(BuildContext context, Key mobileToolbarKey, LeaderLink focalPoint) {
+    return IOSTextEditingFloatingToolbar(
+      key: mobileToolbarKey,
+      focalPoint: focalPoint,
+      onCutPressed: _cut,
+      onCopyPressed: _copy,
+      onPastePressed: _paste,
+    );
+  }
+
+  Widget _buildIosMagnifier(BuildContext context, Key magnifierKey, LeaderLink focalPoint) {
+    return Center(
+      child: IOSFollowingMagnifier.roundedRectangle(
+        magnifierKey: magnifierKey,
+        leaderLink: focalPoint,
+        offsetFromFocalPoint: const Offset(0, -72),
+      ),
+    );
+  }
+
   Widget _buildMountedToolbar() {
     final selection = _composer.selection;
 

super_editor/example/lib/demos/example_editor/example_editor.dart

@@ -43,9 +43,12 @@ class _ExampleEditorState extends State<ExampleEditor> {
   OverlayEntry? _imageFormatBarOverlayEntry;
   final _imageSelectionAnchor = ValueNotifier<Offset?>(null);
 
+  // TODO: get rid of overlay controller once Android is refactored to use a control scope (as follow up to: https://github.com/superlistapp/super_editor/pull/1470)
   final _overlayController = MagnifierAndToolbarController() //
     ..screenPadding = const EdgeInsets.all(20.0);
 
+  late final SuperEditorIosControlsController _iosControlsController;
+
   @override
   void initState() {
     super.initState();
@@ -61,6 +64,8 @@ class _ExampleEditorState extends State<ExampleEditor> {
     );
     _editorFocusNode = FocusNode();
     _scrollController = ScrollController()..addListener(_hideOrShowToolbar);
+
+    _iosControlsController = SuperEditorIosControlsController();
   }
 
   @override
@@ -69,6 +74,8 @@ class _ExampleEditorState extends State<ExampleEditor> {
       _textFormatBarOverlayEntry!.remove();
     }
 
+    _iosControlsController.dispose();
+
     _scrollController.dispose();
     _editorFocusNode.dispose();
     _composer.dispose();
@@ -233,17 +240,23 @@ class _ExampleEditorState extends State<ExampleEditor> {
 
   void _cut() {
     _docOps.cut();
+    // TODO: get rid of overlay controller once Android is refactored to use a control scope (as follow up to: https://github.com/superlistapp/super_editor/pull/1470)
     _overlayController.hideToolbar();
+    _iosControlsController.shouldShowToolbar.value = false;
   }
 
   void _copy() {
     _docOps.copy();
+    // TODO: get rid of overlay controller once Android is refactored to use a control scope (as follow up to: https://github.com/superlistapp/super_editor/pull/1470)
     _overlayController.hideToolbar();
+    _iosControlsController.shouldShowToolbar.value = false;
   }
 
   void _paste() {
     _docOps.paste();
+    // TODO: get rid of overlay controller once Android is refactored to use a control scope (as follow up to: https://github.com/superlistapp/super_editor/pull/1470)
     _overlayController.hideToolbar();
+    _iosControlsController.shouldShowToolbar.value = false;
   }
 
   void _selectAll() => _docOps.selectAll();
@@ -333,7 +346,16 @@ class _ExampleEditorState extends State<ExampleEditor> {
                   ),
                   Align(
                     alignment: Alignment.bottomRight,
-                    child: _buildCornerFabs(),
+                    child: ListenableBuilder(
+                      listenable: _composer.selectionNotifier,
+                      builder: (context, child) {
+                        return Padding(
+                          padding: EdgeInsets.only(bottom: _isMobile && _composer.selection != null ? 48 : 0),
+                          child: child,
+                        );
+                      },
+                      child: _buildCornerFabs(),
+                    ),
                   ),
                 ],
               );
@@ -407,72 +429,67 @@ class _ExampleEditorState extends State<ExampleEditor> {
         config: _debugConfig ?? const SuperEditorDebugVisualsConfig(),
         child: KeyedSubtree(
           key: _viewportKey,
-          child: SuperEditor(
-            editor: _docEditor,
-            document: _doc,
-            composer: _composer,
-            focusNode: _editorFocusNode,
-            scrollController: _scrollController,
-            documentLayoutKey: _docLayoutKey,
-            documentOverlayBuilders: [
-              DefaultCaretOverlayBuilder(
-                caretStyle: const CaretStyle().copyWith(color: isLight ? Colors.black : Colors.redAccent),
+          child: SuperEditorIosControlsScope(
+            controller: _iosControlsController,
+            child: SuperEditor(
+              editor: _docEditor,
+              document: _doc,
+              composer: _composer,
+              focusNode: _editorFocusNode,
+              scrollController: _scrollController,
+              documentLayoutKey: _docLayoutKey,
+              documentOverlayBuilders: [
+                DefaultCaretOverlayBuilder(
+                  caretStyle: const CaretStyle().copyWith(color: isLight ? Colors.black : Colors.redAccent),
+                ),
+                SuperEditorIosToolbarFocalPointDocumentLayerBuilder(),
+                SuperEditorIosControlsDocumentLayerBuilder(),
+              ],
+              selectionLayerLinks: _selectionLayerLinks,
+              selectionStyle: isLight
+                  ? defaultSelectionStyle
+                  : SelectionStyles(
+                      selectionColor: Colors.red.withOpacity(0.3),
+                    ),
+              stylesheet: defaultStylesheet.copyWith(
+                addRulesAfter: [
+                  if (!isLight) ..._darkModeStyles,
+                  taskStyles,
+                ],
               ),
-            ],
-            selectionLayerLinks: _selectionLayerLinks,
-            selectionStyle: isLight
-                ? defaultSelectionStyle
-                : SelectionStyles(
-                    selectionColor: Colors.red.withOpacity(0.3),
-                  ),
-            stylesheet: defaultStylesheet.copyWith(
-              addRulesAfter: [
-                if (!isLight) ..._darkModeStyles,
-                taskStyles,
+              componentBuilders: [
+                TaskComponentBuilder(_docEditor),
+                ...defaultComponentBuilders,
               ],
+              gestureMode: _gestureMode,
+              inputSource: _inputSource,
+              keyboardActions: _inputSource == TextInputSource.ime ? defaultImeKeyboardActions : defaultKeyboardActions,
+              androidToolbarBuilder: (_) => _buildAndroidFloatingToolbar(),
+              overlayController: _overlayController,
             ),
-            componentBuilders: [
-              TaskComponentBuilder(_docEditor),
-              ...defaultComponentBuilders,
-            ],
-            gestureMode: _gestureMode,
-            inputSource: _inputSource,
-            keyboardActions: _inputSource == TextInputSource.ime ? defaultImeKeyboardActions : defaultKeyboardActions,
-            androidToolbarBuilder: (_) => ListenableBuilder(
-              listenable: _brightness,
-              builder: (context, _) {
-                return Theme(
-                  data: ThemeData(brightness: _brightness.value),
-                  child: AndroidTextEditingFloatingToolbar(
-                    onCutPressed: _cut,
-                    onCopyPressed: _copy,
-                    onPastePressed: _paste,
-                    onSelectAllPressed: _selectAll,
-                  ),
-                );
-              },
-            ),
-            iOSToolbarBuilder: (_) => ListenableBuilder(
-              listenable: _brightness,
-              builder: (context, _) {
-                return Theme(
-                  data: ThemeData(brightness: _brightness.value),
-                  child: IOSTextEditingFloatingToolbar(
-                    onCutPressed: _cut,
-                    onCopyPressed: _copy,
-                    onPastePressed: _paste,
-                    focalPoint: _overlayController.toolbarTopAnchor!,
-                  ),
-                );
-              },
-            ),
-            overlayController: _overlayController,
           ),
         ),
       ),
     );
   }
 
+  Widget _buildAndroidFloatingToolbar() {
+    return ListenableBuilder(
+      listenable: _brightness,
+      builder: (context, _) {
+        return Theme(
+          data: ThemeData(brightness: _brightness.value),
+          child: AndroidTextEditingFloatingToolbar(
+            onCutPressed: _cut,
+            onCopyPressed: _copy,
+            onPastePressed: _paste,
+            onSelectAllPressed: _selectAll,
+          ),
+        );
+      },
+    );
+  }
+
   Widget _buildMountedToolbar() {
     return MultiListenableBuilder(
       listenables: <Listenable>{