RichText: unify active formats, 'selectedFormat' and 'placeholderFormat'

[ellatrix]

Description

Fixes #11743.
Fixes #14120.
Fixes issue where emoji would be destroyed when inserting it right after a format element:

This is an attempt to unify active formats (determines which UI is displayed as active), selectedFormat (used for format boundaries) and formatPlaceholder (used for format shortcuts on collapsed selected).

The replacement is an activeFormats key which holds information about which formats are active and can be used to apply to an insertion.

• In the middle of a piece of (formatted) text, this holds the same formats as the one stored on the index.
• When at the edge of a format, this can be the formats before or after the caret, depending on the user selection.
• The user can also change this array by using the shortcuts cmd+B etc. when there is a collapsed selection.

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[ellatrix]

Rebased and added another e2e test.

[ellatrix]

@noisysocks I would love this to be in Gutenberg 5.4.

[ellatrix]

(It should go in the next WordPress 5.2 Beta.)

[noisysocks]

I can cherry-pick it for GB 5.4 tomorrow. To have it in WP 5.2 we'll need to cherry-pick it onto wp/5.2 and release packages cc. @youknowriad.

[aduth]

All of the following issues appear to be present in master as well, but are related to the active format behavior, so I'll leave it to your discretion whether you want to address here or separately:

• I still see multiple active formats highlighted when navigating from one block to another. (screencast)
• When creating a new prompt and immediately pressing Cmd+B, the "Bold" toolbar button does not become active. Proceeding to type, however, will yield bolded text.
• Perhaps related to the prior point, when within a bolded or italic text which occurs at the end of a paragraph, pressing Cmd+B or Cmd+I to deactivate that format similarly does not toggle the toolbar button active state, but does in-fact deactivate the format.
• When a selection extends from non-formatted text into formatted text (e.g. Bold), pressing Cmd+B one time will remove all formats. Subsequent presses, however, do nothing. This one I actually observed mistakenly in master, and appears fixed as of this branch, possibly the same as Cannot Add 2nd Inline Format When Type (Nested Bold & Italic While Typing) #11743 . (screencast)

[ellatrix]

I still see multiple active formats highlighted when navigating from one block to another.

This is a separate issue: we currently have lingering selection state after blurring element. I can quickly resolve this here by adding :focus to the boundary selected used to style the element.

I'll also have a look into the other points.

[ellatrix]

When creating a new prompt and immediately pressing Cmd+B, the "Bold" toolbar button does not become active. Proceeding to type, however, will yield bolded text.

This one I cannot reproduce:

[aduth]

When creating a new prompt and immediately pressing Cmd+B, the "Bold" toolbar button does not become active. Proceeding to type, however, will yield bolded text.

This one I cannot reproduce:

I was seeing it in new (empty) paragraphs specifically (with "Top Toolbar" setting). Trying again right now though, I'm not able to reproduce it anymore 🤷‍♂️

[ellatrix]

Thanks for the review and merge!