From ddca659c770b9ff7060a53baaf2bfcd1ae473416 Mon Sep 17 00:00:00 2001
From: Peterson Nwoko <103382847+1AMTEDDY@users.noreply.github.com>
Date: Mon, 3 Apr 2023 06:04:01 +0100
Subject: [PATCH] feat: adding number feature to toolbar (#2077)

---
 .../lib/src/render/toolbar/toolbar_item.dart  | 16 +++++++++++
 .../format_rich_text_style.dart               |  7 +++++
 .../rich_text/toolbar_rich_text_test.dart     | 27 +++++++++++++++++++
 3 files changed, 50 insertions(+)

diff --git a/frontend/appflowy_flutter/packages/appflowy_editor/lib/src/render/toolbar/toolbar_item.dart b/frontend/appflowy_flutter/packages/appflowy_editor/lib/src/render/toolbar/toolbar_item.dart
index ebf220065d..b4df31fca3 100644
--- a/frontend/appflowy_flutter/packages/appflowy_editor/lib/src/render/toolbar/toolbar_item.dart
+++ b/frontend/appflowy_flutter/packages/appflowy_editor/lib/src/render/toolbar/toolbar_item.dart
@@ -249,6 +249,22 @@ List<ToolbarItem> defaultToolbarItems = [
     ),
     handler: (editorState, context) => formatBulletedList(editorState),
   ),
+  ToolbarItem(
+    id: 'appflowy.toolbar.number_list',
+    type: 3,
+    tooltipsMessage: AppFlowyEditorLocalizations.current.numberedList,
+    iconBuilder: (isHighlight) => FlowySvg(
+      name: 'toolbar/number_list',
+      color: isHighlight ? Colors.lightBlue : null,
+    ),
+    validator: _onlyShowInSingleTextSelection,
+    highlightCallback: (editorState) => _allSatisfy(
+      editorState,
+      BuiltInAttributeKey.subtype,
+      (value) => value == BuiltInAttributeKey.numberList,
+    ),
+    handler: (editorState, context) => formatNumberedList(editorState),
+  ),
   ToolbarItem(
     id: 'appflowy.toolbar.link',
     type: 4,
diff --git a/frontend/appflowy_flutter/packages/appflowy_editor/lib/src/service/default_text_operations/format_rich_text_style.dart b/frontend/appflowy_flutter/packages/appflowy_editor/lib/src/service/default_text_operations/format_rich_text_style.dart
index adb0e7db3d..0141637b1c 100644
--- a/frontend/appflowy_flutter/packages/appflowy_editor/lib/src/service/default_text_operations/format_rich_text_style.dart
+++ b/frontend/appflowy_flutter/packages/appflowy_editor/lib/src/service/default_text_operations/format_rich_text_style.dart
@@ -91,6 +91,13 @@ void formatBulletedList(EditorState editorState) {
   });
 }
 
+void formatNumberedList(EditorState editorState) {
+  formatTextNodes(editorState, {
+    BuiltInAttributeKey.subtype: BuiltInAttributeKey.numberList,
+    BuiltInAttributeKey.number: 1,
+  });
+}
+
 /// Format the current selection with the given attributes.
 ///
 /// If the selected nodes are not text nodes, this method will do nothing.
diff --git a/frontend/appflowy_flutter/packages/appflowy_editor/test/render/rich_text/toolbar_rich_text_test.dart b/frontend/appflowy_flutter/packages/appflowy_editor/test/render/rich_text/toolbar_rich_text_test.dart
index 54f9ed0455..f0710223c1 100644
--- a/frontend/appflowy_flutter/packages/appflowy_editor/test/render/rich_text/toolbar_rich_text_test.dart
+++ b/frontend/appflowy_flutter/packages/appflowy_editor/test/render/rich_text/toolbar_rich_text_test.dart
@@ -302,6 +302,33 @@ void main() async {
     });
   }));
 
+  group('toolbar, number list' , (() {
+    testWidgets('Select Text, Click Toolbar and set style for number list',
+    (tester) async {
+      final editor = tester.editor..insertTextNode(singleLineText);
+      await editor.startTesting();
+
+      final numberList = Selection(
+        start: Position(path: [0],offset: 0),
+        end: Position(path: [0], offset: singleLineText.length));
+
+        await editor.updateSelection(numberList);
+        await tester.pumpAndSettle(const Duration(milliseconds: 500));
+        expect(find.byType(ToolbarWidget), findsOneWidget);
+        final numberListButton = find.byWidgetPredicate((widget) {
+          if (widget is ToolbarItemWidget) {
+            return widget.item.id == 'appflowy.toolbar.number_list';
+          }
+          return false;
+        });
+        expect(numberListButton, findsOneWidget);
+        await tester.tap(numberListButton);
+        await tester.pumpAndSettle();
+        final node = editor.nodeAtPath([0]) as TextNode;
+        expect(node.subtype, 'number-list');
+      });
+  }));
+
   group('toolbar, highlight', (() {
     testWidgets('Select Text, Click Toolbar and set style for highlighted text',
         (tester) async {