[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?

matthew-carroll · 2024-08-10T19:54:43Z

super_editor/lib/src/infrastructure/keyboard_panel_scaffold.dart

+/// It is required that the enclosing [Scaffold] has `resizeToAvoidBottomInset` set to `false`,
+/// otherwise we can't get the software keyboard height to size the keyboard panel. If
+/// `resizeToAvoidBottomInset` is set to `true`, the panel won't be displayed.
+class KeyboardPanelScaffold extends StatefulWidget {


I thought I asked this before, but I don't see the comment, so maybe I didn't...

This approach looks like it requires that this widget be placed at a location that surrounds all visible area, right?

If so, I'm wondering how one handles situations where they're adding a text field or an editor into a single card within a list, or the primary content area on a tablet that sits next to a docked nav drawer, etc.

In other words, when the area of the code with the text field or editor doesn't naturally have access to the whole screen, what do we expect developers to do?

On the one hand, we could tell developers to go place this scaffold higher in the tree somewhere, but on the surface, that seems like an extra burden.

What would happen if this widget operated in the application overlay? Can we make it so that the control over keyboard toolbars and panels can happen from any given place in the UI, even when that place is just a single list item?

I pushed an update with an alternative implementation that uses an OverlayPortal. Can you take a look?

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2024-08-12.at.20.36.22.mp4

What's the purpose of the button you added in this video? And what's happening when the caret is placed but there's no toolbar above the keyboard until you later press the button?

This is just to show that the above-keyboard panel can be enabled/disabled.

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.

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

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 2 commits October 18, 2024 10:54

WIP: Filling out tests for tablets

0b38523

Added some tablet tests for minimized keyboard area

ea81984

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 Aug 10, 2024

angelosilvestre Aug 12, 2024

matthew-carroll Sep 14, 2024

angelosilvestre Sep 16, 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

		// 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

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 Sep 25, 2024 •

edited

Loading