Merge pull request #3 from LucasXu0/feat/to_do_list_charcter_shortcut

feat: to do list character shortcut
AppFlowy-IO · Apr 29, 2023 · 0ec9f3f · 0ec9f3f
2 parents 9f8a305 + 10ccd61
commit 0ec9f3f
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 0 deletions.
diff --git a/example/lib/pages/simple_editor.dart b/example/lib/pages/simple_editor.dart
@@ -129,6 +129,14 @@ class SimpleEditor extends StatelessWidget {
         //format strikethrough, ~strikethrough~
         formatTildeToStrikethrough,
 
+        // format unchecked box, [] or -[]
+        formatEmptyBracketsToUncheckedBox,
+        formatHyphenEmptyBracketsToUncheckedBox,
+
+        // format checked box, [x] or -[x]
+        formatFilledBracketsToCheckedBox,
+        formatHyphenFilledBracketsToCheckedBox,
+
         //format bold, **bold** or __bold__
         formatDoubleAsterisksToBold,
         formatDoubleUnderscoresToBold,

diff --git a/lib/src/editor/block_component/block_component.dart b/lib/src/editor/block_component/block_component.dart
@@ -3,6 +3,7 @@ export 'text_block_component/text_block_component.dart';
 
 // to-do list
 export 'todo_list_block_component/todo_list_block_component.dart';
+export 'todo_list_block_component/todo_list_character_shortcut.dart';
 
 // bulleted list
 export 'bulleted_list_block_component/bulleted_list_block_component.dart';

diff --git a/lib/src/editor/block_component/todo_list_block_component/todo_list_character_shortcut.dart b/lib/src/editor/block_component/todo_list_block_component/todo_list_character_shortcut.dart
@@ -0,0 +1,118 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/src/editor/block_component/base_component/markdown_format_helper.dart';
+
+/// Convert '[] ' to unchecked todo list
+///
+/// - support
+///   - desktop
+///   - mobile
+///   - web
+///
+CharacterShortcutEvent formatEmptyBracketsToUncheckedBox =
+    CharacterShortcutEvent(
+  key: 'format empty square brackets to unchecked todo list',
+  character: ' ',
+  handler: (editorState) async {
+    return _formatSymbolToUncheckedBox(
+      editorState: editorState,
+      symbol: '[]',
+    );
+  },
+);
+
+/// Convert '-[] ' to unchecked todo list
+///
+/// - support
+///   - desktop
+///   - mobile
+///   - web
+///
+CharacterShortcutEvent formatHyphenEmptyBracketsToUncheckedBox =
+    CharacterShortcutEvent(
+  key: 'format hyphen and empty square brackets to unchecked todo list',
+  character: ' ',
+  handler: (editorState) async {
+    return _formatSymbolToUncheckedBox(
+      editorState: editorState,
+      symbol: '-[]',
+    );
+  },
+);
+
+/// Convert '[x] ' to checked todo list
+///
+/// - support
+///   - desktop
+///   - mobile
+///   - web
+///
+CharacterShortcutEvent formatFilledBracketsToCheckedBox =
+    CharacterShortcutEvent(
+  key: 'format filled square brackets to checked todo list',
+  character: ' ',
+  handler: (editorState) async {
+    return _formatSymbolToCheckedBox(
+      editorState: editorState,
+      symbol: '[x]',
+    );
+  },
+);
+
+/// Convert '-[x] ' to checked todo list
+///
+/// - support
+///   - desktop
+///   - mobile
+///   - web
+///
+CharacterShortcutEvent formatHyphenFilledBracketsToCheckedBox =
+    CharacterShortcutEvent(
+  key: 'format hyphen and filled square brackets to checked todo list',
+  character: ' ',
+  handler: (editorState) async {
+    return _formatSymbolToCheckedBox(
+      editorState: editorState,
+      symbol: '-[x]',
+    );
+  },
+);
+
+Future<bool> _formatSymbolToUncheckedBox({
+  required EditorState editorState,
+  required String symbol,
+}) async {
+  assert(symbol == '[]' || symbol == '-[]');
+
+  return formatMarkdownSymbol(
+    editorState,
+    (node) => node.type != 'todo_list',
+    (text, _) => text == symbol,
+    (_, node, delta) => Node(
+      type: 'todo_list',
+      attributes: {
+        'checked': false,
+        'delta': delta.compose(Delta()..delete(symbol.length)).toJson(),
+      },
+    ),
+  );
+}
+
+Future<bool> _formatSymbolToCheckedBox({
+  required EditorState editorState,
+  required String symbol,
+}) async {
+  assert(symbol == '[x]' || symbol == '-[x]');
+
+  return formatMarkdownSymbol(
+    editorState,
+    (node) => node.type != 'todo_list',
+    (text, _) => text == symbol,
+    (_, node, delta) => Node(
+      type: 'todo_list',
+      attributes: {
+        'checked': true,
+        'delta': delta.compose(Delta()..delete(symbol.length)).toJson(),
+      },
+    ),
+  );
+}
diff --git a/test/new/block_component/todo_list_block_component/todo_list_character_shortcut_test.dart b/test/new/block_component/todo_list_block_component/todo_list_character_shortcut_test.dart
@@ -0,0 +1,107 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import '../../util/util.dart';
+import '../test_character_shortcut.dart';
+
+void main() async {
+  group(
+    'todo_list_character_shortcut.dart',
+    () {
+      setUpAll(() {
+        if (kDebugMode) {
+          activateLog();
+        }
+      });
+
+      tearDownAll(
+        () {
+          if (kDebugMode) {
+            deactivateLog();
+          }
+        },
+      );
+
+      // Before
+      // []|Welcome to AppFlowy Editor 🔥!
+      // After
+      // [uncheckedbox]Welcome to AppFlowy Editor 🔥!
+      test('[] to unchecked todo list ', () async {
+        const text = 'Welcome to AppFlowy Editor 🔥!';
+        testFormatCharacterShortcut(
+          formatEmptyBracketsToUncheckedBox,
+          '[]',
+          2,
+          (result, before, after) {
+            expect(result, true);
+            expect(after.delta!.toPlainText(), text);
+            expect(after.type, 'todo_list');
+            expect(after.attributes['checked'], false);
+          },
+          text: text,
+        );
+      });
+
+      // Before
+      // -[]|Welcome to AppFlowy Editor 🔥!
+      // After
+      // [uncheckedbox]Welcome to AppFlowy Editor 🔥!
+      test('-[] to unchecked todo list ', () async {
+        const text = 'Welcome to AppFlowy Editor 🔥!';
+        testFormatCharacterShortcut(
+          formatHyphenEmptyBracketsToUncheckedBox,
+          '-[]',
+          3,
+          (result, before, after) {
+            expect(result, true);
+            expect(after.delta!.toPlainText(), text);
+            expect(after.type, 'todo_list');
+            expect(after.attributes['checked'], false);
+          },
+          text: text,
+        );
+      });
+
+      // Before
+      // [x]|Welcome to AppFlowy Editor 🔥!
+      // After
+      // [checkedbox]Welcome to AppFlowy Editor 🔥!
+      test('[x] to checked todo list ', () async {
+        const text = 'Welcome to AppFlowy Editor 🔥!';
+        testFormatCharacterShortcut(
+          formatFilledBracketsToCheckedBox,
+          '[x]',
+          3,
+          (result, before, after) {
+            expect(result, true);
+            expect(after.delta!.toPlainText(), text);
+            expect(after.type, 'todo_list');
+            expect(after.attributes['checked'], true);
+          },
+          text: text,
+        );
+      });
+
+      // Before
+      // -[x]|Welcome to AppFlowy Editor 🔥!
+      // After
+      // [checkedbox]Welcome to AppFlowy Editor 🔥!
+      test('-[x] to checked todo list ', () async {
+        const text = 'Welcome to AppFlowy Editor 🔥!';
+        testFormatCharacterShortcut(
+          formatHyphenFilledBracketsToCheckedBox,
+          '-[x]',
+          4,
+          (result, before, after) {
+            expect(result, true);
+            expect(after.delta!.toPlainText(), text);
+            expect(after.type, 'todo_list');
+            expect(after.attributes['checked'], true);
+          },
+          text: text,
+        );
+      });
+    },
+  );
+}