feat: divider toolbar item in mobile (AppFlowy-IO#281)

Author: hyj1204

example/lib/pages/simple_editor.dart

@@ -75,8 +75,8 @@ class SimpleEditor extends StatelessWidget {
                     listMobileToolbarItem,
                     linkMobileToolbarItem,
                     quoteMobileToolbarItem,
+                    dividerMobileToolbarItem,
                     codeMobileToolbarItem,
-                    // dividerMobileToolbarItem,
                   ],
                   textColorOptions: [
                     ColorOption(

lib/src/editor/toolbar/mobile/toolbar_items/divider_mobile_toolbar_item.dart

@@ -3,6 +3,22 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 final dividerMobileToolbarItem = MobileToolbarItem.action(
   itemIcon: const AFMobileIcon(afMobileIcons: AFMobileIcons.divider),
   actionHandler: ((editorState, selection) {
-    // TODO(yijing): Implement the divider toolbar item.
+    // same as the [handler] of [dividerMenuItem] in Desktop
+    final selection = editorState.selection;
+    if (selection == null || !selection.isCollapsed) {
+      return;
+    }
+    final path = selection.end.path;
+    final node = editorState.getNodeAtPath(path);
+    final delta = node?.delta;
+    if (node == null || delta == null) {
+      return;
+    }
+    final insertedPath = delta.isEmpty ? path : path.next;
+    final transaction = editorState.transaction
+      ..insertNode(insertedPath, dividerNode())
+      ..insertNode(insertedPath, paragraphNode())
+      ..afterSelection = Selection.collapse(insertedPath.next, 0);
+    editorState.apply(transaction);
   }),
 );

test/mobile/toolbar/mobile/toolbar_items/divider_mobile_toolbar_item_test.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import '../../../../new/infra/testable_editor.dart';
+import '../test_helpers/mobile_app_with_toolbar_widget.dart';
+
+void main() {
+  group('dividerMobileToolbarItem\n', () {
+    testWidgets(
+        'If the user tries to insert a divider while some text is selected, no action should be taken',
+        (WidgetTester tester) async {
+      const text = 'Welcome to Appflowy 😁';
+      final editor = tester.editor..addParagraphs(3, initialText: text);
+      await editor.startTesting();
+
+      var selection = Selection.single(
+        path: [1],
+        startOffset: 2,
+        endOffset: text.length - 2,
+      );
+
+      await editor.updateSelection(selection);
+      await tester.pumpWidget(
+        Material(
+          child: MobileAppWithToolbarWidget(
+            editorState: editor.editorState,
+            toolbarItems: [
+              dividerMobileToolbarItem,
+            ],
+          ),
+        ),
+      );
+
+      // Tap divider toolbar item
+      final dividerBtn = find.byType(IconButton).first;
+      await tester.tap(dividerBtn);
+      await tester.pumpAndSettle(const Duration(milliseconds: 500));
+      // Check if the text becomes quote node
+      final node = editor.editorState.getNodeAtPath([1]);
+      expect(
+        node?.type == ParagraphBlockKeys.type,
+        true,
+      );
+    });
+    testWidgets(
+        'Insert a divider if nothing is selected(selection is collapsed)',
+        (WidgetTester tester) async {
+      const text = 'Welcome to Appflowy 😁';
+      final editor = tester.editor..addParagraphs(3, initialText: text);
+      await editor.startTesting();
+
+      const originalPath = 1;
+
+      var selection =
+          Selection.collapsed(Position(path: [originalPath], offset: 2));
+
+      await editor.updateSelection(selection);
+      await tester.pumpWidget(
+        Material(
+          child: MobileAppWithToolbarWidget(
+            editorState: editor.editorState,
+            toolbarItems: [
+              dividerMobileToolbarItem,
+            ],
+          ),
+        ),
+      );
+
+      // Tap divider toolbar item
+      final dividerBtn = find.byType(IconButton).first;
+      await tester.tap(dividerBtn);
+      await tester.pumpAndSettle(const Duration(milliseconds: 500));
+      // Check if the node in the next path become a divider node
+      final node = editor.editorState.getNodeAtPath([originalPath + 1]);
+      expect(
+        node?.type == DividerBlockKeys.type,
+        true,
+      );
+    });
+  });
+}