RichText: fix RTL keyboard interactions

[ellatrix]

Description

Fixes https://core.trac.wordpress.org/ticket/47180.
Fixes arrow left/right navigation and backspace/delete at the edges of rich text areas.
Fixes some boundary issues #15466 (review).

• In RichText, I removed some left/right key handling. We should let the browser do its thing and only interfere at boundaries.
• I had the rework some boundary code, so coincidentally it fixes 2 issues where the boundary attribute would disappear on left/right key and on initial focus.
• In isHorizontalEdge, the horizontal checks need to reversed in RTL.
• In WritingFlow, the left/right arrow key handling needs to be reversed as right means previous and left means next.
• I added e2e tests and made sure they fail in master.

Any other broken interactions?

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.

closes #15553 and closes #15364

[youknowriad]

Just tested the RichText interactions:

• arrows work well
• backspace and del work as expected

But when it comes to cross-block interactions (WritingFlow?), both arrow keys and backspace/del are still broken:

• The caret is not put at the right place
• del at the end should merge blocks
• backspace at the beginning should merge blocks

[ellatrix]

@youknowriad I think I fixed the remaining issues.

Something else I'm seeing is e.g. left/right keys not working correctly in toolbars. Not sure if I should fix here.

[ellatrix]

@youknowriad How is it looking now? :)

[youknowriad]

The issues seem fixed to me. Thank @ellatrix

We should explore how to e2e test RTL languages too

[ellatrix]

Whooo :) Working on the e2e tests now, but it's not easy 😅

[youknowriad]

@ellatrix I actually just noticed a bug:

• Type "shift + enter" at the end of a paragraph
• type "Backspace"

Instead of removing the "br", it tries to merge with the previous block

[ellatrix]

Added e2e tests. Looking at the remaining issue now.

[ellatrix]

All e2e test pass for me locally. Not sure what is going on.

@youknowriad I think everything should work fine now, including the edge case you mentioned.

[youknowriad]

There are some failing tests, I don't know if it's legit.
I confirm that in my testing all the RTL issues are fixed.

[ellatrix]

Yeah, fixed a few already. There's one final failing annotation test.

[youknowriad]

Just tested this again. In terms of behavior, it still seems to work as intended.

[aduth]

Perhaps it's not worth worrying about, but: There are cases where a focus event occurs, but the selection remains the same. Notably, when the tab loses or regains focus (becomes the active tab again). I notice it most when debugging, to add a breakpoint in a code path which triggers on a change to state. The act of focusing DevTools and changing back to the window is enough to cause a change in state, so the breakpoint will fire.

Perhaps it's not a big deal, but could we:

• Avoid calling onSelectionChange if the selection indices are the same? Perhaps also avoid setState as well.
• Update the reducer for selectionStart and selectionEnd to avoid creating new object references if the updated offsets are the same as the current state value?

[ellatrix]

@aduth onSelectionChange already avoids setting state if the selection is the same. I guess the problem here is that it's set to undefined?

[aduth]

@aduth onSelectionChange already avoids setting state if the selection is the same

Where does this happen?

[ellatrix]

Here:

gutenberg/packages/rich-text/src/component/index.js

Lines 537 to 545 in 5957797

	if ( start === value.start && end === value.end ) {
	// Sometimes the browser may set the selection on the placeholder
	// element, in which case the caret is not visible. We need to set
	// the caret before the placeholder if that's the case.
	if ( value.text.length === 0 && start === 0 ) {
	fixPlaceholderSelection();
	}
	return;