Keyboard enhancements: Improve tabbing and focus in placeholder blocks

[jasmussen]

In #2983 (comment) and #2983 (comment), potential future improvements to tabbing in blocks were discussed.

Briefly:

• If your text cursor is not in a block, or you don't have any block selected, tabbing through the main content area simply highlights a block
• Pressing Enter on a highlighted block selects it, which is the same as setting the text cursor inside a text block, clicking on an image to see the alignment controls, or clicking a button in a placeholder block

When a block is selected, you can still tab around the block for the movers and settings shortcuts. See also #3003.

We also have arrowkey navigation (see #2990) across blocks, which behaves/should behave like it would in any textfield. Combined with the slash command, you should be able to build an entire post, only using the keyboard, without having to tab anymore than you absolutely need to, if we make some enhancements. That's what this ticket is about. To explain, here are some flows today, and how we could improve them.

Inserting an image:

Can we change this so as soon as the image placeholder is inserted, the Upload button has focus, instead of requiring a tab as it does now?

Same with Cover Image:

Same with Custom HTML:

Also Classic Text:

Compare this to headings, where pressing tab to set focus isn't necessary:

[BoardJames]

The common element of the ones that focus right away is that they all use Editable.

Editable handles the focus prop by setting the selection to TinyMCE's remembered cursor position normally or at the end if focus.offset === -1.

In theory I could do the exact same fix for other blocks - just store the selected components in state and on focus set the selection to them unless offset or some other state would override that.

[mtias]

Closing as related to: #1829