Writing Flow: fix empty horizontal arrow nav

[ellatrix]

Description

Fixes #16841.

It seems like the cause of these regressions are:

1. The rich text element no longer being relatively positioned broke the z-index trick to correctly calculate a range.
2. The new placeholder (Improved rich text placeholder #16733) seems to create a selection that is sometimes:
   • Uncollapsed when the user clicks in an empty paragraph (even though it looks collapsed).
   • Sometimes a bit further away, but still no more than 1 pixel.

Solution:

1. Always position the element relatively when using the z-index trick.
2. Set contenteditable=false on the placeholder so that it never catches selection.
3. Increase the buffer for checking if horizontal selection is at the edge from about <=0.5 px to 1px.

How has this been tested?

See #16841.

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. This regression is important to be fixed ASAP I think. :) Some of it has been introduced by #16733.

[talldan]

I noticed this for the first time today, so it's great there's a fix ready! It worked well in my testing. I'm not completely familiar with the code or how isEdge works, but when debugging I noticed the issue was with the position comparison returning false, so the fix seems good.

[ellatrix]

Thanks for the review @talldan!