halkyon-days/appflowy-editor
Watch
1
0
Fork
You've already forked appflowy-editor
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: optimize context menu logic (#1161)

Browse source 
* chore: optimize context menu logic

* chore: disable keyboard service and shortcut service
This commit is contained in:
Lucas 2025-11-12 09:33:18 +08:00 • committed by GitHub
commit cf0907738c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 414 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

120
lib/src/editor/editor_component/service/selection/desktop_selection_service.dart
View file

@ -61,6 +61,8 @@ class _DesktopSelectionServiceWidgetState
listen: false,
);
_ContextMenuKeyboardInterceptor? _keyboardInterceptor;
@override
void initState() {
super.initState();
@ -157,9 +159,34 @@ class _DesktopSelectionServiceWidgetState
}
void _clearContextMenu() {
if (_contextMenuAreas.isEmpty) {
return;
}
_contextMenuAreas
..forEach((overlay) => overlay.remove())
..clear();
if (_keyboardInterceptor != null) {
editorState.service.keyboardService
?.unregisterInterceptor(_keyboardInterceptor!);
_keyboardInterceptor = null;
}
editorState.service.keyboardService?.enableShortcuts();
editorState.service.keyboardService?.enable();
final selection = editorState.selectionNotifier.value;
if (selection != null) {
editorState.updateSelectionWithReason(
null,
reason: SelectionUpdateReason.uiEvent,
);
editorState.updateSelectionWithReason(
selection,
reason: SelectionUpdateReason.uiEvent,
);
}
}
@override
@ -288,35 +315,37 @@ class _DesktopSelectionServiceWidgetState
void _onSecondaryTapDown(TapDownDetails details) {
final offset = details.globalPosition;
final selection = editorState.selectionNotifier.value;
final selectable = getNodeInOffset(offset)?.selectable;
final node = getNodeInOffset(offset);
final selectable = node?.selectable;
if (selectable == null) {
clearSelection();
return;
}
final wordBoundary = selectable.getWordBoundaryInOffset(offset);
final position = selectable.getPositionInOffset(offset);
final Selection? newSelection;
final isSelectionCollapsed = selection == null || selection.isCollapsed;
// cases
// 1. if the selection is null, then select the current position as a collapsed selection
// 2. if the selection is collapsed, then keep it without changes
// 3. if the selection is not collapsed, then check if tap is within a selected node
// 4. if tap is within the selected nodes, then keep current selection
// 5. if tap is outside the selected nodes, then create a collapsed selection at tap point
final isWordBoundaryWithinSelection = !isSelectionCollapsed &&
wordBoundary != null &&
(wordBoundary.start.path > selection.start.path ||
wordBoundary.start.path == selection.start.path &&
wordBoundary.start.offset >= selection.start.offset) &&
(wordBoundary.end.path < selection.end.path ||
wordBoundary.end.path == selection.end.path &&
wordBoundary.end.offset <= selection.end.offset);
if (isWordBoundaryWithinSelection) {
if (selection == null) {
newSelection = Selection.collapsed(position);
} else if (selection.isCollapsed) {
newSelection = selection;
} else if (selectable.cursorStyle == CursorStyle.verticalLine) {
newSelection = wordBoundary;
} else {
newSelection = Selection(
start: selectable.start(),
end: selectable.end(),
);
final selectedNodes = editorState.getNodesInSelection(selection);
final isTapInSelectedNode = selectedNodes.any((n) => n == node);
if (isTapInSelectedNode) {
newSelection = selection;
} else {
newSelection = Selection.collapsed(position);
}
}
editorState.updateSelectionWithReason(
@ -498,6 +527,13 @@ class _DesktopSelectionServiceWidgetState
_contextMenuAreas.add(contextMenu);
Overlay.of(context, rootOverlay: true).insert(contextMenu);
_keyboardInterceptor = _ContextMenuKeyboardInterceptor();
editorState.service.keyboardService
?.registerInterceptor(_keyboardInterceptor!);
editorState.service.keyboardService?.disableShortcuts();
editorState.service.keyboardService?.disable();
}
@override
@ -639,3 +675,49 @@ class _DesktopSelectionServiceWidgetState
);
}
}
class _ContextMenuKeyboardInterceptor
extends AppFlowyKeyboardServiceInterceptor {
@override
Future<bool> interceptInsert(
TextEditingDeltaInsertion insertion,
EditorState editorState,
List<CharacterShortcutEvent> characterShortcutEvents,
) async {
return true;
}
@override
Future<bool> interceptDelete(
TextEditingDeltaDeletion deletion,
EditorState editorState,
) async {
return true;
}
@override
Future<bool> interceptReplace(
TextEditingDeltaReplacement replacement,
EditorState editorState,
List<CharacterShortcutEvent> characterShortcutEvents,
) async {
return true;
}
@override
Future<bool> interceptNonTextUpdate(
TextEditingDeltaNonTextUpdate nonTextUpdate,
EditorState editorState,
List<CharacterShortcutEvent> characterShortcutEvents,
) async {
return true;
}
@override
Future<bool> interceptPerformAction(
TextInputAction action,
EditorState editorState,
) async {
return true;
}
}

347
test/service/selection_service_test.dart
View file

@ -1,4 +1,6 @@
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:appflowy_editor/src/editor/block_component/table_block_component/util.dart';
import '../new/infra/testable_editor.dart';
@ -79,54 +81,317 @@ void main() async {
await editor.dispose();
});
// TODO: lucas.xu support context menu
// testWidgets('Test secondary tap', (tester) async {
// const text = 'Welcome to Appflowy 😁';
// final editor = tester.editor..addParagraphs(3, initialText: text);
// await editor.startTesting();
testWidgets(
'Test secondary tap (right-click) - no selection creates collapsed selection',
(tester) async {
const text = 'Welcome to Appflowy 😁';
final editor = tester.editor..addParagraphs(3, initialText: text);
await editor.startTesting();
// final secondNode = editor.nodeAtPath([1]) as Node;
// final finder = find.byKey(secondNode.key);
final secondNode = editor.nodeAtPath([1]);
final finder = find.byKey(secondNode!.key);
// final rect = tester.getRect(finder);
// // secondary tap
// await tester.tapAt(
// rect.centerLeft + const Offset(10.0, 0.0),
// buttons: kSecondaryButton,
// );
// await tester.pump();
final rect = tester.getRect(finder);
expect(editor.selection, isNull);
// const welcome = 'Welcome';
// expect(
// editor.selection,
// Selection.single(
// path: [1],
// startOffset: 0,
// endOffset: welcome.length,
// ), // Welcome
// );
await tester.tapAt(
rect.centerLeft + const Offset(50.0, 0.0),
buttons: kSecondaryButton,
);
await tester.pump();
// final contextMenu = find.byType(ContextMenu);
// expect(contextMenu, findsOneWidget);
expect(editor.selection, isNotNull);
expect(editor.selection!.isCollapsed, isTrue);
expect(editor.selection!.start.path, [1]);
// // test built in context menu items
final contextMenu = find.byType(ContextMenu);
expect(contextMenu, findsOneWidget);
// // Skip the Windows platform because the rich_clipboard package doesn't support it perfectly.
// if (Platform.isWindows) {
// return;
// }
await editor.dispose();
},
);
// // cut
// await tester.tap(find.text('Cut'));
// await tester.pump();
// expect(
// secondNode.delta!.toPlainText(),
// text.replaceAll(welcome, ''),
// );
//
// await editor.dispose();
// // TODO: the copy and paste test is not working during test env.
// });
testWidgets(
'Test secondary tap - collapsed selection remains unchanged',
(tester) async {
const text = 'Welcome to Appflowy 😁';
final editor = tester.editor..addParagraphs(3, initialText: text);
await editor.startTesting();
final secondNode = editor.nodeAtPath([1]);
final finder = find.byKey(secondNode!.key);
final rect = tester.getRect(finder);
await tester.tapAt(rect.centerLeft + const Offset(30.0, 0.0));
await tester.pump();
final originalSelection = editor.selection;
expect(originalSelection, isNotNull);
expect(originalSelection!.isCollapsed, isTrue);
await tester.tapAt(
rect.centerLeft + const Offset(80.0, 0.0),
buttons: kSecondaryButton,
);
await tester.pump();
expect(editor.selection, equals(originalSelection));
final contextMenu = find.byType(ContextMenu);
expect(contextMenu, findsOneWidget);
await editor.dispose();
},
);
testWidgets(
'Test secondary tap - non-collapsed selection remains when tapping within selected node',
(tester) async {
const text = 'Welcome to Appflowy 😁';
final editor = tester.editor..addParagraphs(3, initialText: text);
await editor.startTesting();
final secondNode = editor.nodeAtPath([1]);
final finder = find.byKey(secondNode!.key);
final rect = tester.getRect(finder);
await tester.tapAt(rect.centerLeft + const Offset(10.0, 0.0));
await tester.tapAt(rect.centerLeft + const Offset(10.0, 0.0));
await tester.pumpAndSettle();
final originalSelection = editor.selection;
expect(originalSelection, isNotNull);
expect(originalSelection!.isCollapsed, isFalse);
expect(originalSelection.start.path, [1]);
expect(originalSelection.end.path, [1]);
await tester.tapAt(
rect.centerLeft + const Offset(20.0, 0.0),
buttons: kSecondaryButton,
);
await tester.pumpAndSettle();
expect(editor.selection, equals(originalSelection));
final contextMenu = find.byType(ContextMenu);
expect(contextMenu, findsOneWidget);
await editor.dispose();
},
);
testWidgets(
'Test secondary tap - multi-node selection remains when tapping within selected nodes',
(tester) async {
const text = 'Welcome to Appflowy 😁';
final editor = tester.editor..addParagraphs(3, initialText: text);
await editor.startTesting();
final firstNode = editor.nodeAtPath([0]);
final secondNode = editor.nodeAtPath([1]);
final firstFinder = find.byKey(firstNode!.key);
final secondFinder = find.byKey(secondNode!.key);
final firstRect = tester.getRect(firstFinder);
final secondRect = tester.getRect(secondFinder);
await tester.timedDragFrom(
firstRect.centerLeft + const Offset(10.0, 0.0),
secondRect.center - firstRect.centerLeft - const Offset(10.0, 0.0),
const Duration(milliseconds: 500),
);
await tester.pumpAndSettle();
final originalSelection = editor.selection;
expect(originalSelection, isNotNull);
expect(originalSelection!.isCollapsed, isFalse);
await tester.tapAt(
secondRect.centerLeft + const Offset(30.0, 0.0),
buttons: kSecondaryButton,
);
await tester.pump();
expect(editor.selection, equals(originalSelection));
final contextMenu = find.byType(ContextMenu);
expect(contextMenu, findsOneWidget);
await editor.dispose();
},
);
testWidgets(
'Test secondary tap - selection changes when tapping outside selected nodes',
(tester) async {
const text = 'Welcome to Appflowy 😁';
final editor = tester.editor..addParagraphs(3, initialText: text);
await editor.startTesting();
final firstNode = editor.nodeAtPath([0]);
final secondNode = editor.nodeAtPath([1]);
final thirdNode = editor.nodeAtPath([2]);
final firstFinder = find.byKey(firstNode!.key);
final secondFinder = find.byKey(secondNode!.key);
final thirdFinder = find.byKey(thirdNode!.key);
final firstRect = tester.getRect(firstFinder);
final secondRect = tester.getRect(secondFinder);
final thirdRect = tester.getRect(thirdFinder);
await tester.timedDragFrom(
firstRect.centerLeft + const Offset(10.0, 0.0),
secondRect.center - firstRect.centerLeft - const Offset(10.0, 0.0),
const Duration(milliseconds: 500),
);
await tester.pumpAndSettle();
final originalSelection = editor.selection;
expect(originalSelection, isNotNull);
expect(originalSelection!.isCollapsed, isFalse);
await tester.tapAt(
thirdRect.centerLeft + const Offset(30.0, 0.0),
buttons: kSecondaryButton,
);
await tester.pump();
expect(editor.selection, isNotNull);
expect(editor.selection!.isCollapsed, isTrue);
expect(editor.selection!.start.path, [2]);
expect(editor.selection, isNot(equals(originalSelection)));
final contextMenu = find.byType(ContextMenu);
expect(contextMenu, findsOneWidget);
await editor.dispose();
},
);
testWidgets(
'Test secondary tap - toolbar re-enabled when context menu is dismissed by clicking mask',
(tester) async {
const text = 'Welcome to Appflowy 😁';
final editor = tester.editor..addParagraphs(3, initialText: text);
await editor.startTesting();
final secondNode = editor.nodeAtPath([1]);
final finder = find.byKey(secondNode!.key);
final rect = tester.getRect(finder);
await tester.tapAt(rect.centerLeft + const Offset(10.0, 0.0));
await tester.tapAt(rect.centerLeft + const Offset(10.0, 0.0));
await tester.pumpAndSettle();
final originalSelection = editor.selection;
expect(originalSelection, isNotNull);
expect(originalSelection!.isCollapsed, isFalse);
await tester.tapAt(
rect.centerLeft + const Offset(20.0, 0.0),
buttons: kSecondaryButton,
);
await tester.pumpAndSettle();
final contextMenu = find.byType(ContextMenu);
expect(contextMenu, findsOneWidget);
await tester.tapAt(const Offset(10.0, 10.0));
await tester.pumpAndSettle();
expect(find.byType(ContextMenu), findsNothing);
expect(editor.selection, equals(originalSelection));
expect(editor.selection, isNotNull);
await editor.dispose();
},
);
testWidgets(
'Test secondary tap - context menu and toolbar behavior',
(tester) async {
const text = 'Welcome to Appflowy 😁';
final editor = tester.editor..addParagraphs(3, initialText: text);
await editor.startTesting();
final secondNode = editor.nodeAtPath([1]);
final finder = find.byKey(secondNode!.key);
final rect = tester.getRect(finder);
await tester.tapAt(rect.centerLeft + const Offset(10.0, 0.0));
await tester.tapAt(rect.centerLeft + const Offset(10.0, 0.0));
await tester.pumpAndSettle();
final originalSelection = editor.selection;
expect(originalSelection, isNotNull);
expect(originalSelection!.isCollapsed, isFalse);
await tester.tapAt(
rect.centerLeft + const Offset(20.0, 0.0),
buttons: kSecondaryButton,
);
await tester.pumpAndSettle();
final contextMenu = find.byType(ContextMenu);
expect(contextMenu, findsOneWidget);
await tester.tapAt(const Offset(10.0, 10.0));
await tester.pumpAndSettle();
expect(find.byType(ContextMenu), findsNothing);
expect(editor.selection, isNotNull);
await editor.dispose();
},
);
testWidgets(
'Test secondary tap - shortcuts blocked when context menu shows',
(tester) async {
const text = 'Welcome to Appflowy 😁';
final editor = tester.editor..addParagraphs(3, initialText: text);
await editor.startTesting();
final secondNode = editor.nodeAtPath([1]);
final finder = find.byKey(secondNode!.key);
final rect = tester.getRect(finder);
await tester.tapAt(rect.centerLeft + const Offset(10.0, 0.0));
await tester.tapAt(rect.centerLeft + const Offset(10.0, 0.0));
await tester.pumpAndSettle();
final originalSelection = editor.selection;
expect(originalSelection, isNotNull);
expect(originalSelection!.isCollapsed, isFalse);
await tester.tapAt(
rect.centerLeft + const Offset(20.0, 0.0),
buttons: kSecondaryButton,
);
await tester.pumpAndSettle();
final contextMenu = find.byType(ContextMenu);
expect(contextMenu, findsOneWidget);
await tester.sendKeyEvent(LogicalKeyboardKey.arrowDown);
await tester.pumpAndSettle();
expect(editor.selection, equals(originalSelection));
await tester.tapAt(const Offset(10.0, 10.0));
await tester.pumpAndSettle();
expect(find.byType(ContextMenu), findsNothing);
await editor.dispose();
},
);
testWidgets('single tap with horizontal nodes', (tester) async {
var tableNode = TableNode.fromList([