Gutenberg-mobile: Keyboard shortcuts

[koke]

Gutenberg should support at least the basic keyboard shortcuts for rich text formatting.

[hypest]

I've verified that Aztec (Classic Editor) supports basic rich text editing shortcuts (Modifier-B for bold, Modifier-I for italic, etc) both on WPAndroid and WPiOS.

[kmdupr33]

Do we any sort of mockup that demonstrates this behavior? I'm having a bit of a tough time imagining how this would work on mobile. For example, what sorts of modifiers are we imagining we'd use here? (Obviously, we don't have CMD or CTRL or ALT.)

[mchowning]

:wave: @kmdupr33 !

I'm having a bit of a tough time imagining how this would work on mobile. For example, what sorts of modifiers are we imagining we'd use here? (Obviously, we don't have CMD or CTRL or ALT.)

I think this is addressing the use-case where someone has a bluetooth keyboard connected.

[hypest]

Obviously, we don't have CMD or CTRL or ALT.

Oh, sorry it wasn't clear before @kmdupr33 , we are referring to external keyboards here, Bluetooth or otherwise that the user can have connected and press the keyboard shortcuts on. A good example of such usecases would be tablets with keyboard cases.

[hypest]

While at it, let's scope down to specific shortcuts that would be nice to see implemented first and probably in that order of preference (thanks @iamthomasbishop for suggesting framing a first set of shortcuts):

1. _Modifier-B_ for making test bold in RichText based text blocks
2. _Modifier-I_ for making test italic in RichText based text blocks
3. Modifier-Z to undo anywhere. Similar with a shortcut for redo.
4. Modifier-K to insert or edit a link inside a RichText block

[iamthomasbishop]

Modifier-Z to undo anywhere. Similar with a shortcut for redo.

The equivalent here would be Ctrl/Cmd + Shift + Z.

I was imagining the link one could be tricky, but really all it needs to do is trigger the link bottom sheet in the same way that tapping on the block toolbar button would. 😄

[kmdupr33]

Based on @hypest's comments in slack, I'm hearing that I should focus on Modifier-B, Modifier-I and if there's time, Modifier-K for android.

[hypest]

👋 @kmdupr33 , Bold, Italic and then undo/redo would be a good order to try and tackle. The insert/edit Link can come after if time allows. Thanks!

[SergioEstevao]

At the moment iOS supports Cmd+B, Cmd+I and Cmd+U.

These are available because our Aztec component uses UITextView that supports this by default.

One of the issues is that the formatting is triggered on the native component so the format bar is not activated immediately after the keypresses only after writing.