Highlighted formatting in the toolbar doesn't match MCE inline boundaries

[talldan]

Duplicates: #11326, #13087.

Describe the bug
There's a minor inconsistency with the formatting toolbar and TinyMCE's inline boundaries (used to highlight formatted text).

When the caret is positioned on the left side of formatted text, within the inline boundary, the toolbar button for the active formatting is correctly shown toggled on:

Pressing the left arrow key once to move the caret outside of the inline boundary, the format is incorrectly still shown toggled on:

Positioning the caret on the right side of formatted text, back within the inline boundary, the toolbar button is incorrectly toggled off:

To Reproduce
Steps to reproduce the behavior:

1. Add formatted text (bold/italic/strikethrough/link) to a paragraph block.
2. Position the caret on the left of the formatted text within the inline boundary.
3. Move the mouse to display the toolbar and observe that formatting is toggled on correctly.
4. Press the left arrow key once to move outside of the inline boundary.
5. Move the mouse to display the toolbar and observe that formatting is incorrectly toggled on.
6. Position the caret on the right of the formatted text within the inline boundary.
7. Move the mouse to display the toolbar and observe that formatting is incorrectly toggled off.

Expected behavior
The toggle state of toolbar formats should match the position of the caret.

Additional context

• 4.1
• Noticed while working on Fix link popover keyboard accessibility #10983

[talldan]

@iseulde - I've noticed this issue, but not sure what the best way to solve it is. Let me know if you have any ideas.

[ellatrix]

@talldan What's the behaviour in TinyMCE?

[talldan]

Hi @iseulde, It's a bit inconsistent in classic. It works as I would expect for links. The format is shown toggled on in the toolbar if the caret is on either the left or right side of the formatted text.

With bold, italics and strikethrough, it's the opposite to what we have in Gutenberg, at the end of the formatting the toolbar button is shown toggled on, but at the start it's toggled off.

[ellatrix]

@talldan Thanks! I think this would be good to address in #11322. Not sure if we can do it earlier than that.

[talldan]

@iseulde Seems sensible.

[gziolo]

I noticed a similar issue in 4.2-RC. Originally reported in #11326.

To Reproduce
Steps to reproduce the behavior:

1. Add new block containing RichText control (Paragraph, List, etc)
2. Write any text.
3. Select some text and make it bold (or italic, underline, whatever).
4. Move the cursor at the end of selection.
5. You will notice that the block toolbar no longer highlights applied formater and it hides after a brief time.
6. When you continue typing from the end of the selection, format will continue to be applied.
7. No move the cursor to the beginning of the selection. Actually one keypress before.
8. UI shows that format option is still selected and toolbar can be see.
9. When you start typing you don't see format applied but UI tells something else.

Expected behavior
Formats should be properly applied with the proper visual state of Block Toolbar controls.

Screenshots

Desktop:

• OS: macOS
• Browser: Chrome
• Version: the latest

[ellatrix]

This needs to be addressed in #11322. In other words, we need to make the rich text value boundary-aware.