feat: shrinkWrap option for AppFlowyEditor (#20)

* feat: shrinkWrap option for AppFlowyEditor

Relates: #19

* test: add autoFocus tests for editor service

* chore: Update lib/src/core/transform/operation.dart

Co-authored-by: Mathias Mogensen <42929161+Xazin@users.noreply.github.com>

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

Author: Xazin

lib/src/core/transform/operation.dart

@@ -235,28 +235,30 @@ class UpdateTextOperation extends Operation {
 
 // TODO(Lucas.Xu): refactor this part
 Path transformPath(Path preInsertPath, Path b, [int delta = 1]) {
-  if (preInsertPath.length > b.length) {
-    return b;
-  }
-  if (preInsertPath.isEmpty || b.isEmpty) {
+  if (preInsertPath.length > b.length || preInsertPath.isEmpty || b.isEmpty) {
     return b;
   }
+
   // check the prefix
   for (var i = 0; i < preInsertPath.length - 1; i++) {
     if (preInsertPath[i] != b[i]) {
       return b;
     }
   }
+
   final prefix = preInsertPath.sublist(0, preInsertPath.length - 1);
   final suffix = b.sublist(preInsertPath.length);
+
   final preInsertLast = preInsertPath.last;
   final bAtIndex = b[preInsertPath.length - 1];
   if (preInsertLast <= bAtIndex) {
     prefix.add(bAtIndex + delta);
   } else {
     prefix.add(bAtIndex);
   }
+
   prefix.addAll(suffix);
+
   return prefix;
 }
 

lib/src/service/editor_service.dart

@@ -34,6 +34,7 @@ class AppFlowyEditor extends StatefulWidget {
     this.autoFocus = false,
     this.focusedSelection,
     this.customActionMenuBuilder,
+    this.shrinkWrap = false,
     ThemeData? themeData,
   }) : super(key: key) {
     this.themeData = themeData ??
@@ -55,17 +56,21 @@ class AppFlowyEditor extends StatefulWidget {
 
   final List<ToolbarItem> toolbarItems;
 
-  late final ThemeData themeData;
-
   final bool editable;
 
   /// Set the value to true to focus the editor on the start of the document.
   final bool autoFocus;
+
   final Selection? focusedSelection;
 
   final Positioned Function(BuildContext context, List<ActionMenuItem> items)?
       customActionMenuBuilder;
 
+  /// If false the Editor is inside an [AppFlowyScroll]
+  final bool shrinkWrap;
+
+  late final ThemeData themeData;
+
   @override
   State<AppFlowyEditor> createState() => _AppFlowyEditorState();
 }
@@ -116,6 +121,7 @@ class _AppFlowyEditorState extends State<AppFlowyEditor> {
   @override
   Widget build(BuildContext context) {
     services ??= _buildServices(context);
+
     return Overlay(
       initialEntries: [
         OverlayEntry(
@@ -125,11 +131,21 @@ class _AppFlowyEditorState extends State<AppFlowyEditor> {
     );
   }
 
+  Widget _buildScroll({required Widget child}) {
+    if (widget.shrinkWrap) {
+      return child;
+    }
+
+    return AppFlowyScroll(
+      key: editorState.service.scrollServiceKey,
+      child: child,
+    );
+  }
+
   Widget _buildServices(BuildContext context) {
     return Theme(
       data: widget.themeData,
-      child: AppFlowyScroll(
-        key: editorState.service.scrollServiceKey,
+      child: _buildScroll(
         child: Container(
           color: editorStyle.backgroundColor,
           padding: editorStyle.padding!,

lib/src/service/selection_service.dart

@@ -337,8 +337,7 @@ class _AppFlowySelectionState extends State<AppFlowySelection>
     // try to select the word.
     final selection = currentSelection.value;
     if (selection == null ||
-        (selection.isCollapsed == true &&
-            currentSelectedNodes.first is TextNode)) {
+        (selection.isCollapsed && currentSelectedNodes.first is TextNode)) {
       _onDoubleTapDown(details);
     }
 

test/infra/test_editor.dart

@@ -26,6 +26,8 @@ class EditorWidgetTester {
 
   Future<EditorWidgetTester> startTesting({
     Locale locale = const Locale('en'),
+    bool shrinkWrap = false,
+    bool autoFocus = false,
   }) async {
     final app = MaterialApp(
       localizationsDelegates: const [
@@ -39,6 +41,8 @@ class EditorWidgetTester {
       home: Scaffold(
         body: AppFlowyEditor(
           editorState: _editorState,
+          shrinkWrap: shrinkWrap,
+          autoFocus: autoFocus,
         ),
       ),
     );

test/render/rich_text/toolbar_rich_text_test.dart

@@ -238,9 +238,7 @@ void main() async {
         node.allSatisfyInSelection(
           code,
           BuiltInAttributeKey.code,
-          (value) {
-            return value == true;
-          },
+          (value) => value == true,
         ),
         true,
       );

test/service/editor_service_test.dart

@@ -0,0 +1,42 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import '../infra/test_editor.dart';
+
+void main() {
+  group('AppFlowyEditor tests', () {
+    testWidgets('shrinkWrap is false', (tester) async {
+      final editor = tester.editor;
+      await editor.startTesting();
+
+      expect(find.byType(AppFlowyScroll), findsOneWidget);
+    });
+
+    testWidgets('shrinkWrap is true', (tester) async {
+      final editor = tester.editor;
+      await editor.startTesting(shrinkWrap: true);
+
+      expect(find.byType(AppFlowyScroll), findsNothing);
+    });
+
+    testWidgets('without autoFocus', (tester) async {
+      final editor = tester.editor..insertTextNode('Hello');
+      await editor.startTesting(shrinkWrap: true, autoFocus: false);
+
+      final selectedNodes =
+          editor.editorState.service.selectionService.currentSelectedNodes;
+
+      expect(selectedNodes.isEmpty, true);
+    });
+
+    testWidgets('with autoFocus', (tester) async {
+      final editor = tester.editor..insertTextNode('Hello');
+      await editor.startTesting(shrinkWrap: true, autoFocus: true);
+
+      final selectedNodes =
+          editor.editorState.service.selectionService.currentSelectedNodes;
+
+      expect(selectedNodes.isEmpty, false);
+    });
+  });
+}