Merge pull request #848 from LucasXu0/test/delete_handler

test: implement backspace / delete key test for styled text

frontend/app_flowy/packages/flowy_editor/example/test/widget_test.dart

@@ -5,26 +5,4 @@
 // gestures. You can also use WidgetTester to find child widgets in the widget
 // tree, read text, and verify that the values of widget properties are correct.
 
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:example/main.dart';
-
-void main() {
-  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
-    // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
-
-    // Verify that our counter starts at 0.
-    expect(find.text('0'), findsOneWidget);
-    expect(find.text('1'), findsNothing);
-
-    // Tap the '+' icon and trigger a frame.
-    await tester.tap(find.byIcon(Icons.add));
-    await tester.pump();
-
-    // Verify that our counter has incremented.
-    expect(find.text('0'), findsNothing);
-    expect(find.text('1'), findsOneWidget);
-  });
-}
+void main() {}

frontend/app_flowy/packages/flowy_editor/lib/src/service/internal_key_event_handlers/delete_text_handler.dart

@@ -72,17 +72,21 @@ KeyEventResult _handleBackspace(EditorState editorState, RawKeyEvent event) {
     _deleteNodes(transactionBuilder, textNodes, selection);
   }
 
-  transactionBuilder.commit();
+  if (transactionBuilder.operations.isNotEmpty) {
+    transactionBuilder.commit();
+  }
 
   return KeyEventResult.handled;
 }
 
 KeyEventResult _handleDelete(EditorState editorState, RawKeyEvent event) {
-  final selection = editorState.service.selectionService.currentSelection.value;
+  var selection = editorState.service.selectionService.currentSelection.value;
   if (selection == null) {
     return KeyEventResult.ignored;
   }
-  final nodes = editorState.service.selectionService.currentSelectedNodes;
+  var nodes = editorState.service.selectionService.currentSelectedNodes;
+  nodes = selection.isBackward ? nodes : nodes.reversed.toList(growable: false);
+  selection = selection.isBackward ? selection : selection.reversed;
   // make sure all nodes is [TextNode].
   final textNodes = nodes.whereType<TextNode>().toList();
   if (textNodes.length != nodes.length) {

frontend/app_flowy/packages/flowy_editor/test/infra/test_editor.dart

@@ -73,13 +73,7 @@ class EditorWidgetTester {
   }
 
   Future<void> pressLogicKey(LogicalKeyboardKey key) async {
-    late RawKeyEvent testRawKeyEventData;
-    if (key == LogicalKeyboardKey.enter) {
-      testRawKeyEventData = const TestRawKeyEventData(
-        logicalKey: LogicalKeyboardKey.enter,
-        physicalKey: PhysicalKeyboardKey.enter,
-      ).toKeyEvent;
-    }
+    final testRawKeyEventData = TestRawKeyEventData(logicalKey: key).toKeyEvent;
     _editorState.service.keyboardService!.onKey(testRawKeyEventData);
     await tester.pumpAndSettle();
   }
@@ -101,6 +95,15 @@ class EditorWidgetTester {
   }
 }
 
+extension TestString on String {
+  String safeSubString([int start = 0, int? end]) {
+    end ??= length - 1;
+    end = end.clamp(start, length - 1);
+    final sRunes = runes;
+    return String.fromCharCodes(sRunes, start, end);
+  }
+}
+
 extension TestEditorExtension on WidgetTester {
   EditorWidgetTester get editor =>
       EditorWidgetTester(tester: this)..initialize();

frontend/app_flowy/packages/flowy_editor/test/infra/test_raw_key_event.dart

@@ -7,7 +7,6 @@ class TestRawKeyEvent extends RawKeyDownEvent {
 class TestRawKeyEventData extends RawKeyEventData {
   const TestRawKeyEventData({
     required this.logicalKey,
-    required this.physicalKey,
     this.isControlPressed = false,
     this.isShiftPressed = false,
     this.isAltPressed = false,
@@ -30,7 +29,7 @@ class TestRawKeyEventData extends RawKeyEventData {
   final LogicalKeyboardKey logicalKey;
 
   @override
-  final PhysicalKeyboardKey physicalKey;
+  PhysicalKeyboardKey get physicalKey => logicalKey.toPhysicalKey;
 
   @override
   KeyboardSide? getModifierSide(ModifierKey key) {
@@ -50,3 +49,18 @@ class TestRawKeyEventData extends RawKeyEventData {
     return TestRawKeyEvent(data: this);
   }
 }
+
+extension on LogicalKeyboardKey {
+  PhysicalKeyboardKey get toPhysicalKey {
+    if (this == LogicalKeyboardKey.enter) {
+      return PhysicalKeyboardKey.enter;
+    }
+    if (this == LogicalKeyboardKey.backspace) {
+      return PhysicalKeyboardKey.backspace;
+    }
+    if (this == LogicalKeyboardKey.delete) {
+      return PhysicalKeyboardKey.delete;
+    }
+    throw UnimplementedError();
+  }
+}

frontend/app_flowy/packages/flowy_editor/test/service/internal_key_event_handlers/delete_text_handler_test.dart

@@ -0,0 +1,351 @@
+import 'package:flowy_editor/flowy_editor.dart';
+import 'package:flowy_editor/src/render/rich_text/rich_text_style.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import '../../infra/test_editor.dart';
+
+void main() async {
+  setUpAll(() {
+    TestWidgetsFlutterBinding.ensureInitialized();
+  });
+
+  group('delete_text_handler.dart', () {
+    testWidgets('Presses backspace key in empty document', (tester) async {
+      // Before
+      //
+      // [Empty Line]
+      //
+      // After
+      //
+      // [Empty Line]
+      //
+      final editor = tester.editor..insertEmptyTextNode();
+      await editor.startTesting();
+      await editor.updateSelection(
+        Selection.single(path: [0], startOffset: 0),
+      );
+      // Pressing the backspace key continuously.
+      for (int i = 1; i <= 1; i++) {
+        await editor.pressLogicKey(
+          LogicalKeyboardKey.backspace,
+        );
+        expect(editor.documentLength, 1);
+        expect(editor.documentSelection,
+            Selection.single(path: [0], startOffset: 0));
+      }
+    });
+  });
+
+  // Before
+  //
+  // Welcome to Appflowy 😁
+  // Welcome to Appflowy 😁
+  // Welcome to Appflowy 😁
+  //
+  // After
+  //
+  // Welcome to Appflowy 😁
+  // Welcome t Appflowy 😁
+  // Welcome Appflowy 😁
+  //
+  // Then
+  // Welcome to Appflowy 😁
+  //
+  testWidgets(
+      'Presses backspace key in non-empty document and selection is backward',
+      (tester) async {
+    await _deleteTextByBackspace(tester, true);
+  });
+  testWidgets(
+      'Presses backspace key in non-empty document and selection is forward',
+      (tester) async {
+    await _deleteTextByBackspace(tester, false);
+  });
+
+  // Before
+  //
+  // Welcome to Appflowy 😁
+  // Welcome to Appflowy 😁
+  // Welcome to Appflowy 😁
+  //
+  // After
+  //
+  // Welcome to Appflowy 😁
+  // Welcome t Appflowy 😁
+  // Welcome Appflowy 😁
+  //
+  // Then
+  // Welcome to Appflowy 😁
+  //
+  testWidgets(
+      'Presses delete key in non-empty document and selection is backward',
+      (tester) async {
+    await _deleteTextByDelete(tester, true);
+  });
+  testWidgets(
+      'Presses delete key in non-empty document and selection is forward',
+      (tester) async {
+    await _deleteTextByDelete(tester, false);
+  });
+
+  // Before
+  //
+  // Welcome to Appflowy 😁
+  // Welcome to Appflowy 😁
+  //
+  // After
+  //
+  // Welcome to Appflowy 😁Welcome Appflowy 😁
+  testWidgets(
+      'Presses delete key in non-empty document and selection is at the end of the text',
+      (tester) async {
+    const text = 'Welcome to Appflowy 😁';
+    final editor = tester.editor
+      ..insertTextNode(text)
+      ..insertTextNode(text);
+    await editor.startTesting();
+
+    // delete 'o'
+    await editor.updateSelection(
+      Selection.single(path: [0], startOffset: text.length),
+    );
+    await editor.pressLogicKey(LogicalKeyboardKey.delete);
+
+    expect(editor.documentLength, 1);
+    expect(editor.documentSelection,
+        Selection.single(path: [0], startOffset: text.length));
+    expect((editor.nodeAtPath([0]) as TextNode).toRawString(), text * 2);
+  });
+
+  // Before
+  //
+  // Welcome to Appflowy 😁
+  // [Style] Welcome to Appflowy 😁
+  // [Style] Welcome to Appflowy 😁
+  //
+  // After
+  //
+  // Welcome to Appflowy 😁
+  // [Style] Welcome to Appflowy 😁Welcome to Appflowy 😁
+  //
+  testWidgets('Presses backspace key in styled text (checkbox)',
+      (tester) async {
+    await _deleteStyledTextByBackspace(tester, StyleKey.checkbox);
+  });
+  testWidgets('Presses backspace key in styled text (bulletedList)',
+      (tester) async {
+    await _deleteStyledTextByBackspace(tester, StyleKey.bulletedList);
+  });
+  testWidgets('Presses backspace key in styled text (heading)', (tester) async {
+    await _deleteStyledTextByBackspace(tester, StyleKey.heading);
+  });
+  testWidgets('Presses backspace key in styled text (quote)', (tester) async {
+    await _deleteStyledTextByBackspace(tester, StyleKey.quote);
+  });
+
+  // Before
+  //
+  // Welcome to Appflowy 😁
+  // [Style] Welcome to Appflowy 😁
+  // [Style] Welcome to Appflowy 😁
+  //
+  // After
+  //
+  // Welcome to Appflowy 😁
+  // [Style] Welcome to Appflowy 😁
+  //
+  testWidgets('Presses delete key in styled text (checkbox)', (tester) async {
+    await _deleteStyledTextByDelete(tester, StyleKey.checkbox);
+  });
+  testWidgets('Presses delete key in styled text (bulletedList)',
+      (tester) async {
+    await _deleteStyledTextByDelete(tester, StyleKey.bulletedList);
+  });
+  testWidgets('Presses delete key in styled text (heading)', (tester) async {
+    await _deleteStyledTextByDelete(tester, StyleKey.heading);
+  });
+  testWidgets('Presses delete key in styled text (quote)', (tester) async {
+    await _deleteStyledTextByDelete(tester, StyleKey.quote);
+  });
+}
+
+Future<void> _deleteStyledTextByBackspace(
+    WidgetTester tester, String style) async {
+  const text = 'Welcome to Appflowy 😁';
+  Attributes attributes = {
+    StyleKey.subtype: style,
+  };
+  if (style == StyleKey.checkbox) {
+    attributes[StyleKey.checkbox] = true;
+  } else if (style == StyleKey.numberList) {
+    attributes[StyleKey.number] = 1;
+  } else if (style == StyleKey.heading) {
+    attributes[StyleKey.heading] = StyleKey.h1;
+  }
+  final editor = tester.editor
+    ..insertTextNode(text)
+    ..insertTextNode(text, attributes: attributes)
+    ..insertTextNode(text, attributes: attributes);
+
+  await editor.startTesting();
+  await editor.updateSelection(
+    Selection.single(path: [2], startOffset: 0),
+  );
+  await editor.pressLogicKey(
+    LogicalKeyboardKey.backspace,
+  );
+  expect(editor.documentSelection, Selection.single(path: [2], startOffset: 0));
+
+  await editor.pressLogicKey(
+    LogicalKeyboardKey.backspace,
+  );
+  expect(editor.documentLength, 2);
+  expect(editor.documentSelection,
+      Selection.single(path: [1], startOffset: text.length));
+  expect(editor.nodeAtPath([1])?.subtype, style);
+  expect((editor.nodeAtPath([1]) as TextNode).toRawString(), text * 2);
+
+  await editor.updateSelection(
+    Selection.single(path: [1], startOffset: 0),
+  );
+  await editor.pressLogicKey(
+    LogicalKeyboardKey.backspace,
+  );
+  expect(editor.documentLength, 2);
+  expect(editor.documentSelection, Selection.single(path: [1], startOffset: 0));
+  expect(editor.nodeAtPath([1])?.subtype, null);
+}
+
+Future<void> _deleteStyledTextByDelete(
+    WidgetTester tester, String style) async {
+  const text = 'Welcome to Appflowy 😁';
+  Attributes attributes = {
+    StyleKey.subtype: style,
+  };
+  if (style == StyleKey.checkbox) {
+    attributes[StyleKey.checkbox] = true;
+  } else if (style == StyleKey.numberList) {
+    attributes[StyleKey.number] = 1;
+  } else if (style == StyleKey.heading) {
+    attributes[StyleKey.heading] = StyleKey.h1;
+  }
+  final editor = tester.editor
+    ..insertTextNode(text)
+    ..insertTextNode(text, attributes: attributes)
+    ..insertTextNode(text, attributes: attributes);
+
+  await editor.startTesting();
+  await editor.updateSelection(
+    Selection.single(path: [1], startOffset: 0),
+  );
+  for (var i = 1; i < text.length; i++) {
+    await editor.pressLogicKey(
+      LogicalKeyboardKey.delete,
+    );
+    expect(
+        editor.documentSelection, Selection.single(path: [1], startOffset: 0));
+    expect(editor.nodeAtPath([1])?.subtype, style);
+    expect((editor.nodeAtPath([1]) as TextNode).toRawString(),
+        text.safeSubString(i));
+  }
+
+  await editor.pressLogicKey(
+    LogicalKeyboardKey.delete,
+  );
+  expect(editor.documentLength, 2);
+  expect(editor.documentSelection, Selection.single(path: [1], startOffset: 0));
+  expect(editor.nodeAtPath([1])?.subtype, style);
+  expect((editor.nodeAtPath([1]) as TextNode).toRawString(), text);
+}
+
+Future<void> _deleteTextByBackspace(
+    WidgetTester tester, bool isBackwardSelection) async {
+  const text = 'Welcome to Appflowy 😁';
+  final editor = tester.editor
+    ..insertTextNode(text)
+    ..insertTextNode(text)
+    ..insertTextNode(text);
+  await editor.startTesting();
+
+  // delete 'o'
+  await editor.updateSelection(
+    Selection.single(path: [1], startOffset: 10),
+  );
+  await editor.pressLogicKey(LogicalKeyboardKey.backspace);
+
+  expect(editor.documentLength, 3);
+  expect(editor.documentSelection, Selection.single(path: [1], startOffset: 9));
+  expect((editor.nodeAtPath([1]) as TextNode).toRawString(),
+      'Welcome t Appflowy 😁');
+
+  // delete 'to '
+  await editor.updateSelection(
+    Selection.single(path: [2], startOffset: 8, endOffset: 11),
+  );
+  await editor.pressLogicKey(LogicalKeyboardKey.backspace);
+  expect(editor.documentLength, 3);
+  expect(editor.documentSelection, Selection.single(path: [2], startOffset: 8));
+  expect((editor.nodeAtPath([2]) as TextNode).toRawString(),
+      'Welcome Appflowy 😁');
+
+  // delete 'Appflowy 😁
+  // Welcome t Appflowy 😁
+  // Welcome '
+  final start = Position(path: [0], offset: 11);
+  final end = Position(path: [2], offset: 8);
+  await editor.updateSelection(Selection(
+      start: isBackwardSelection ? start : end,
+      end: isBackwardSelection ? end : start));
+  await editor.pressLogicKey(LogicalKeyboardKey.backspace);
+  expect(editor.documentLength, 1);
+  expect(
+      editor.documentSelection, Selection.single(path: [0], startOffset: 11));
+  expect((editor.nodeAtPath([0]) as TextNode).toRawString(),
+      'Welcome to Appflowy 😁');
+}
+
+Future<void> _deleteTextByDelete(
+    WidgetTester tester, bool isBackwardSelection) async {
+  const text = 'Welcome to Appflowy 😁';
+  final editor = tester.editor
+    ..insertTextNode(text)
+    ..insertTextNode(text)
+    ..insertTextNode(text);
+  await editor.startTesting();
+
+  // delete 'o'
+  await editor.updateSelection(
+    Selection.single(path: [1], startOffset: 9),
+  );
+  await editor.pressLogicKey(LogicalKeyboardKey.delete);
+
+  expect(editor.documentLength, 3);
+  expect(editor.documentSelection, Selection.single(path: [1], startOffset: 9));
+  expect((editor.nodeAtPath([1]) as TextNode).toRawString(),
+      'Welcome t Appflowy 😁');
+
+  // delete 'to '
+  await editor.updateSelection(
+    Selection.single(path: [2], startOffset: 8, endOffset: 11),
+  );
+  await editor.pressLogicKey(LogicalKeyboardKey.delete);
+  expect(editor.documentLength, 3);
+  expect(editor.documentSelection, Selection.single(path: [2], startOffset: 8));
+  expect((editor.nodeAtPath([2]) as TextNode).toRawString(),
+      'Welcome Appflowy 😁');
+
+  // delete 'Appflowy 😁
+  // Welcome t Appflowy 😁
+  // Welcome '
+  final start = Position(path: [0], offset: 11);
+  final end = Position(path: [2], offset: 8);
+  await editor.updateSelection(Selection(
+      start: isBackwardSelection ? start : end,
+      end: isBackwardSelection ? end : start));
+  await editor.pressLogicKey(LogicalKeyboardKey.delete);
+  expect(editor.documentLength, 1);
+  expect(
+      editor.documentSelection, Selection.single(path: [0], startOffset: 11));
+  expect((editor.nodeAtPath([0]) as TextNode).toRawString(),
+      'Welcome to Appflowy 😁');
+}