From 7855e5403ceeee9a434c4ff11079fbc38dceb092 Mon Sep 17 00:00:00 2001
From: "Lucas.Xu" <lucas.xu@appflowy.io>
Date: Mon, 8 Aug 2022 13:59:38 +0800
Subject: [PATCH] feat: convert text to bulleted list style when inputing '* '
 or '- '

---
 .../lib/service/editor_service.dart           |  2 +
 .../delete_text_handler.dart                  | 18 +++++--
 .../whitespace_handler.dart                   | 51 +++++++++++++++++++
 3 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/whitespace_handler.dart

diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart
index 5c088b46d6..ba3d883c77 100644
--- a/frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart
+++ b/frontend/app_flowy/packages/flowy_editor/lib/service/editor_service.dart
@@ -16,6 +16,7 @@ import 'package:flowy_editor/service/internal_key_event_handlers/delete_text_han
 import 'package:flowy_editor/service/internal_key_event_handlers/enter_in_edge_of_text_node_handler.dart';
 import 'package:flowy_editor/service/internal_key_event_handlers/slash_handler.dart';
 import 'package:flowy_editor/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart';
+import 'package:flowy_editor/service/internal_key_event_handlers/whitespace_handler.dart';
 import 'package:flowy_editor/service/keyboard_service.dart';
 import 'package:flowy_editor/service/render_plugin_service.dart';
 import 'package:flowy_editor/service/scroll_service.dart';
@@ -40,6 +41,7 @@ List<FlowyKeyEventHandler> defaultKeyEventHandler = [
   copyPasteKeysHandler,
   enterInEdgeOfTextNodeHandler,
   updateTextStyleByCommandXHandler,
+  whiteSpaceHandler,
 ];
 
 class FlowyEditor extends StatefulWidget {
diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/delete_text_handler.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/delete_text_handler.dart
index 5f59f4266d..861449c0ab 100644
--- a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/delete_text_handler.dart
+++ b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/delete_text_handler.dart
@@ -1,8 +1,9 @@
-import 'package:flowy_editor/flowy_editor.dart';
-import 'package:flowy_editor/service/keyboard_service.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+import 'package:flowy_editor/flowy_editor.dart';
+import 'package:flowy_editor/service/keyboard_service.dart';
+
 // Handle delete text.
 FlowyKeyEventHandler deleteTextHandler = (editorState, event) {
   if (event.logicalKey != LogicalKeyboardKey.backspace) {
@@ -28,9 +29,16 @@ FlowyKeyEventHandler deleteTextHandler = (editorState, event) {
     if (index < 0) {
       // 1. style
       if (textNode.subtype != null) {
-        transactionBuilder.updateNode(textNode, {
-          'subtype': null,
-        });
+        transactionBuilder
+          ..updateNode(textNode, {
+            'subtype': null,
+          })
+          ..afterSelection = Selection.collapsed(
+            Position(
+              path: textNode.path,
+              offset: 0,
+            ),
+          );
       } else {
         // 2. non-style
         // find previous text node.
diff --git a/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/whitespace_handler.dart b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/whitespace_handler.dart
new file mode 100644
index 0000000000..59641bcf8a
--- /dev/null
+++ b/frontend/app_flowy/packages/flowy_editor/lib/service/internal_key_event_handlers/whitespace_handler.dart
@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import 'package:flowy_editor/document/node.dart';
+import 'package:flowy_editor/document/position.dart';
+import 'package:flowy_editor/document/selection.dart';
+import 'package:flowy_editor/operation/transaction_builder.dart';
+import 'package:flowy_editor/render/rich_text/rich_text_style.dart';
+import 'package:flowy_editor/service/keyboard_service.dart';
+
+FlowyKeyEventHandler whiteSpaceHandler = (editorState, event) {
+  if (event.logicalKey != LogicalKeyboardKey.space) {
+    return KeyEventResult.ignored;
+  }
+
+  /// Process markdown input style.
+  ///
+  /// like, #, *, -, 1., -[],
+
+  final selection = editorState.service.selectionService.currentSelection.value;
+  if (selection == null || !selection.isCollapsed) {
+    return KeyEventResult.ignored;
+  }
+
+  final textNodes = editorState.service.selectionService.currentSelectedNodes
+      .whereType<TextNode>();
+  if (textNodes.length != 1) {
+    return KeyEventResult.ignored;
+  }
+
+  final builder = TransactionBuilder(editorState);
+  final textNode = textNodes.first;
+  final text = textNode.toRawString();
+  if (text == '*' || text == '-') {
+    builder
+      ..deleteText(textNode, 0, 1)
+      ..updateNode(textNode, {
+        StyleKey.subtype: StyleKey.bulletedList,
+      })
+      ..afterSelection = Selection.collapsed(
+        Position(
+          path: textNode.path,
+          offset: 0,
+        ),
+      )
+      ..commit();
+    return KeyEventResult.handled;
+  }
+
+  return KeyEventResult.ignored;
+};