Skip to content

Commit

Permalink
feat: support keyboard gesture on mobile (AppFlowy-IO#905)
Browse files Browse the repository at this point in the history
* feat: support keyboard gesture on mobile

* fix: update drag handle when typing text on iOS
  • Loading branch information
LucasXu0 authored Sep 30, 2024
1 parent 6da7b4e commit d049584
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ Future<void> onFloatingCursorUpdate(
RawFloatingCursorPoint point,
EditorState editorState,
) async {
AppFlowyEditorLog.input
.debug('onFloatingCursorUpdate: ${point.state}, ${point.offset}');
AppFlowyEditorLog.input.debug(
'onFloatingCursorUpdate: ${point.state}, ${point.offset}',
);

// support updating the cursor position via the space bar on iOS/Android.
if (PlatformExtension.isDesktopOrWeb) {
Expand All @@ -26,9 +27,16 @@ Future<void> onFloatingCursorUpdate(
final collapsedCursor = HandleType.collapsed.key;
final context = collapsedCursor.currentContext;
if (context == null) {
AppFlowyEditorLog.input.debug(
'onFloatingCursorUpdateStart: context is null',
);
return;
}

AppFlowyEditorLog.input.debug(
'onFloatingCursorUpdateStart: ${point.startLocation}',
);

// get global offset of the cursor.
final renderBox = context.findRenderObject() as RenderBox;
final offset = renderBox.localToGlobal(Offset.zero);
Expand All @@ -44,10 +52,26 @@ Future<void> onFloatingCursorUpdate(
);
break;
case FloatingCursorDragState.Update:
final collapsedCursor = HandleType.collapsed.key;
final context = collapsedCursor.currentContext;
if (context == null) {
AppFlowyEditorLog.input.debug(
'onFloatingCursorUpdateUpdate: context is null',
);
return;
} else {
AppFlowyEditorLog.input.debug(
'onFloatingCursorUpdateUpdate: context is not null',
);
}
if (_cursorOffset == null || point.offset == null) {
return;
}

AppFlowyEditorLog.input.debug(
'onFloatingCursorUpdateUpdate: ${point.offset}',
);

disableMagnifier = true;
selectionService.onPanUpdate(
DragUpdateDetails(
Expand All @@ -57,6 +81,10 @@ Future<void> onFloatingCursorUpdate(
);
break;
case FloatingCursorDragState.End:
AppFlowyEditorLog.input.debug(
'onFloatingCursorUpdateEnd: ${point.offset}',
);

_cursorOffset = null;
disableMagnifier = false;
selectionService.onPanEnd(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,26 @@ Future<void> onNonTextUpdate(
),
);
}
} else if (PlatformExtension.isAndroid) {
// on some Android keyboards (e.g. Gboard), they use non-text update to update the selection when moving cursor
// by space bar.
// for the another keyboards (e.g. system keyboard), they will trigger the
// `onFloatingCursor` event instead.
AppFlowyEditorLog.input.debug('[Android] onNonTextUpdate: $nonTextUpdate');
if (selection != null) {
editorState.updateSelectionWithReason(
Selection.collapsed(
Position(
path: selection.start.path,
offset: nonTextUpdate.selection.start,
),
),
);
}
} else if (PlatformExtension.isIOS) {
// on iOS, the cursor movement will trigger the `onFloatingCursor` event.
// so we don't need to handle the non-text update here.
AppFlowyEditorLog.input.debug('[iOS] onNonTextUpdate: $nonTextUpdate');
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,9 @@ class NonDeltaTextInputService extends TextInputService with TextInputClient {
// on iOS, when using gesture to move cursor, this function will be called
// which may cause the unneeded delta being applied
// so we ignore the updateEditingValue event when the floating cursor is visible
AppFlowyEditorLog.editor.debug(
'ignore updateEditingValue event when the floating cursor is visible',
);
return;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,12 @@ class _MobileSelectionServiceWidgetState
return ValueListenableBuilder(
valueListenable: selectionNotifierAfterLayout,
builder: (context, selection, _) {
if (selection == null ||
!selection.isCollapsed ||
if (selection == null || !selection.isCollapsed) {
return const SizedBox.shrink();
}

// on iOS, the drag handle should be updated when typing text.
if (PlatformExtension.isAndroid &&
editorState.selectionUpdateReason !=
SelectionUpdateReason.uiEvent) {
return const SizedBox.shrink();
Expand Down

0 comments on commit d049584

Please sign in to comment.