[SuperEditor][Android][iOS] - Add tooling to more easily create keyboard toolbar experiences (Resolves #2209) #2216

angelosilvestre · 2024-08-05T02:12:20Z

[SuperEditor][Android][iOS] - Add tooling to more easily create keyboard toolbar experiences. Resolves #2209

This PR introduces the KeyboardPanelScaffold widget to make it easier to implement a panel behind keyboard widget. This is common for chat apps, where the user can switch between the regular software keyboard panel and an emoji panel.

This widget does not enforce any particular styling on the panel. I named it "keyboard panel" because the lack of a better name, maybe we could find a better name for it.

I modified the existing PanelBehindKeyboardDemo demo to use this new widget and also modified the demo to add content to the keyboard panel. The demo mentions it's only for Android, but I didn't find any issues on iOS.

One issue that I found is that our SoftwareKeyboardController.close closes the IME connection instead of just closing the keyboard. This might cause problems. We should probably be invoking TextInput.hide instead.

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-08-04.at.23.00.54.mp4

android_panel.webm

matthew-carroll · 2024-08-06T05:30:27Z

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart

+/// visible, or above the software keyboard, when visible. If neither the keyboard panel nor
+/// the software keyboard are visible, the widget is positioned at the bottom of the screen.
+///
+/// The widget returned by [contentBuilder] is positioned at the top, using all the available


Please describe contentBuilder a bit more. It's a bit confusing to read "positioned at the top" right after reading that "[aboveKeyboardBuilder] is positioned above the keyboard panel"

Updated explaining the it's positioned above the above-keyboard panel. Which kind of other information do you think I should add here?

matthew-carroll · 2024-08-06T05:30:58Z

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart

+///
+/// Use the [controller] to show/hide the keyboard panel and software keyboard.
+///
+/// It is required that [Scaffold.resizeToAvoidBottomInset] is set to `false`.


Please elaborate on this requirement. Which Scaffold? And why is it required? What happens if it's true?

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart

matthew-carroll · 2024-09-23T00:34:29Z

Some thoughts from trying to use this in a chat editor use-case:

We should have an auto-display property such that, when true, the toolbar content is displayed whenever the editor has a selection.
The content currently flows behind the toolbar, but this hides some of the content. This is especially a problem when the editor is a small, intrinsic height editor at the bottom of the screen. Essentially the whole editor disappears behind the toolbar.
- We should have a widget property option to decide whether to expand the content behind the toolbar area or not.
- This will be a little tricky to implement because the toolbar is in the overlay, and we need to add space below the content that's equal to the intrinsic height of the toolbar. Maybe a two frame sequence is needed - one frame that displayed the toolbar offscreen and measures it, and then on the second frame, once its measured, both the toolbar and the content are displayed (to prevent a flash where the editor is in the wrong place).
Possible bug: In the app where I'm trying this out, sometimes I hot reload and the toolbar disappears. Not sure if that's a problem in the scaffold or this app.

…ard toolbar experiences (Resolves #2209)

angelosilvestre · 2024-09-25T00:27:21Z

The content currently flows behind the toolbar, but this hides some of the content. This is especially a problem when the editor is a small, intrinsic height editor at the bottom of the screen. Essentially the whole editor disappears behind the toolbar.

@matthew-carroll I added a widget to added a widget to address this issue. Updated the chat demo to use it.

keyboard_toolbar.webm

matthew-carroll · 2024-09-25T04:25:11Z

@angelosilvestre I saw your commit saying that you added an option to auto show the toolbar above the keyboard, but I don't actually see any public options added in that commit.

How does one say whether they want the toolbar to be displayed automatically or not?

matthew-carroll · 2024-09-25T04:26:08Z

It looks like a good number of tests are failing.

matthew-carroll · 2024-09-25T04:32:26Z

I added a KeyboardScaffoldSafeArea in a location in the widget tree where I think it should make sense, but it didn't have any impact on the content location. The content still moves down behind the keyboard panel.

~~Is there anything I should know about how to use this?~~

Looks like I had the safe area in the wrong part of the widget tree.

However, now that I have it in the correct area, some part of these widgets is now pushing my content up even when the keyboard is open. So now I've got the keyboard at the bottom of the screen, then a bunch of white space, then my content up near the very top of the screen.

When I press a button on the toolbar to open the keyboard panel, then the content comes back down to where it's supposed to be. However, when I open the keyboard panel, the toolbar seems to disappear. There's space for the toolbar, but the toolbar is gone.

… IME connection

matthew-carroll · 2024-10-14T22:13:57Z

@angelosilvestre can you take a look at the modifications I've made? Before ClickUp can use this, we'll need to merge it in and cut a new release. So it would be great if we could finalize this pretty quickly. Let me know if you see anything concerning in here.

angelosilvestre

@matthew-carroll LGTM

angelosilvestre · 2024-10-14T23:05:06Z

super_editor/example/lib/demos/experiments/demo_panel_behind_keyboard.dart

+        // Currently, closing the software keyboard causes the IME connection to close.
+        clearSelectionWhenImeConnectionCloses: false,


Is this still true after your latest changes?

Did you see any area where it changed? I didn't alter any existing tests related to that, and I don't recall altering any related code.

I'm going to merge this. Please let me know if you have any evidence that this behavior changed.

I thought we have talked about that, but I might be mistaken.

… at that point.

…ize API

matthew-carroll · 2024-11-08T22:29:08Z

@angelosilvestre can you do a final review of this? I think we've got it working in ClickUp. I'm sure it'll evolve, but let's get this version merged and released.

angelosilvestre

LGTM with a few comments.

angelosilvestre · 2024-11-09T14:45:58Z

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart

+  // Updates our local cache of the current bottom window insets, which we assume reflects
+  // the current software keyboard height.
+  void _updateKeyboardHeightForCurrentViewInsets() {


Did you intend to leave this as a regular comment instead of a dart doc?

angelosilvestre · 2024-11-09T14:49:45Z

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart

+          },
+        );
+      },
+      child: Padding(


Can we remove this padding?

angelosilvestre · 2024-11-09T14:51:04Z

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart

+  double get _keyboardPanelHeight {
+    return _wantsToShowKeyboardPanel //
+        ? _keyboardHeight.value < 100 //
+            ? widget.fallbackPanelHeight
+            : _keyboardHeight.value
+        : 0.0;
+  }


It's probably a good idea to add a comment explaining what the keyboard height being smaller than 100 means.

angelosilvestre · 2024-11-09T14:51:25Z

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart

+    final double fakeKeyboardHeight = _wantsToShowKeyboardPanel //
+        ? _keyboardHeight.value < 100 //
+            ? widget.fallbackPanelHeight
+            : 0.0
+        : 0.0;


It's probably a good idea to add a comment explaining what the keyboard height being smaller than 100 means.

angelosilvestre · 2024-11-09T16:01:06Z

super_editor/test/super_editor/supereditor_test_tools.dart

+                )
+              : null,
+          body: superEditor,
+          resizeToAvoidBottomInset: false,


It would be a good idea to leave a comment here explaining why we are always setting resizeToAvoidBottomInset to false.

angelosilvestre · 2024-11-09T16:06:52Z

super_editor/test/infrastructure/keyboard_panel_scaffold_test.dart

+    });
+
+    group('Android tablets >', () {
+      testWidgetsOnIPad('shows panel when keyboard is docked', (tester) async {


Should this be testWidgetsOnAndroidTablet ?

angelosilvestre requested a review from matthew-carroll August 5, 2024 23:04

matthew-carroll reviewed Aug 6, 2024

View reviewed changes

angelosilvestre requested a review from matthew-carroll August 6, 2024 23:04

matthew-carroll reviewed Aug 10, 2024

View reviewed changes

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart Show resolved Hide resolved

angelosilvestre force-pushed the 2209_panel-behind-keyboard branch from f450a89 to 8cc5632 Compare September 22, 2024 23:06

angelosilvestre added 5 commits September 24, 2024 21:21

[SuperEditor][Android][iOS] - Add tooling to more easily create keybo…

26eaa5e

…ard toolbar experiences (Resolves #2209)

PR updates

eb81ed7

Display panels in an OverlayPortal

082c0d7

Add option to automatically show/hide the above-keyboard panel

aeea934

Add widget to resize the tree according to the panel size

cc874f8

angelosilvestre force-pushed the 2209_panel-behind-keyboard branch from 236c09a to cc874f8 Compare September 25, 2024 00:26

matthew-carroll added 7 commits September 27, 2024 10:21

Merge branch 'main' into 2209_panel-behind-keyboard

c416827

Change keyboard scaffold controller to hide keyboard instead of close…

f083ab3

… IME connection

Reworking keyboard scaffold API

41e80b5

Automatically close the panel when the keyboard comes up on its own.

7827ec9

Don't show mobile toolbar when tapping to open the keyboard over a panel

f5c36ac

Automatically close an open panel when the IME disconnects

2ac9f6e

Added test for auto-closing panel when IME closes

b1bd4b1

angelosilvestre commented Oct 14, 2024

View reviewed changes

matthew-carroll added 5 commits October 18, 2024 10:54

WIP: Filling out tests for tablets

0b38523

Added some tablet tests for minimized keyboard area

ea81984

Fixed some erroneous situations with bottom padding related to OS notch

083a84c

Allow multiple keyboard panel safe areas in the same subtree.

c644066

Set keyboard safe area to zero when scaffold is disposed

20f5be8

matthew-carroll added 6 commits November 4, 2024 19:10

Don't access ancestor safe area from setter because we might disposed…

89622f2

… at that point.

WIP: Still need to fill out tests, remove print statements, and final…

6bf6888

…ize API

Added safe area tests

223dad1

Removed old keyboard panel demo in favor of dedicated chat demo

963e221

Fixed tests

083ef69

Add some demo docs

f74b6ce

Merge branch 'main' into 2209_panel-behind-keyboard

80ffa01

angelosilvestre commented Nov 9, 2024

View reviewed changes

PR updates after review

a5259f8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SuperEditor][Android][iOS] - Add tooling to more easily create keyboard toolbar experiences (Resolves #2209) #2216

[SuperEditor][Android][iOS] - Add tooling to more easily create keyboard toolbar experiences (Resolves #2209) #2216

angelosilvestre commented Aug 5, 2024

matthew-carroll Aug 6, 2024

angelosilvestre Aug 6, 2024

matthew-carroll Aug 6, 2024

angelosilvestre Aug 6, 2024

matthew-carroll commented Sep 23, 2024

angelosilvestre commented Sep 25, 2024

matthew-carroll commented Sep 25, 2024

matthew-carroll commented Sep 25, 2024

matthew-carroll commented Sep 25, 2024 •

edited

Loading

matthew-carroll commented Oct 14, 2024

angelosilvestre left a comment

angelosilvestre Oct 14, 2024

matthew-carroll Oct 15, 2024

matthew-carroll Oct 15, 2024

angelosilvestre Oct 15, 2024

matthew-carroll commented Nov 8, 2024

angelosilvestre left a comment

angelosilvestre Nov 9, 2024

angelosilvestre Nov 9, 2024

angelosilvestre Nov 9, 2024

angelosilvestre Nov 9, 2024

angelosilvestre Nov 9, 2024

angelosilvestre Nov 9, 2024

		// Currently, closing the software keyboard causes the IME connection to close.
		clearSelectionWhenImeConnectionCloses: false,

[SuperEditor][Android][iOS] - Add tooling to more easily create keyboard toolbar experiences (Resolves #2209) #2216

Are you sure you want to change the base?

[SuperEditor][Android][iOS] - Add tooling to more easily create keyboard toolbar experiences (Resolves #2209) #2216

Conversation

angelosilvestre commented Aug 5, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthew-carroll commented Sep 23, 2024

angelosilvestre commented Sep 25, 2024

matthew-carroll commented Sep 25, 2024

matthew-carroll commented Sep 25, 2024

matthew-carroll commented Sep 25, 2024 • edited Loading

matthew-carroll commented Oct 14, 2024

angelosilvestre left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthew-carroll commented Nov 8, 2024

angelosilvestre left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthew-carroll commented Sep 25, 2024 •

edited

Loading