Magnifier position problem in RTL text

[SaeedZeroOne]

Steps to Reproduce

1. Write a 3-line right-to-left paragraph.
2. Select a word in the second line in the middle.
3. Drag the starting handle to the line above. You can see that the magnifier gets stuck to the right side of the screen if the handle is dragged to a position that is before the starting 'x' of the initially selected word.

(It also sometimes happens for dragging the handles to the next line, but I couldn't find a general reproducible scenario.)

Environment

• Updated up to the 'a8cdf5c' commit.
• Present even in the Fleather Demo website.

[amantoux]

@Amir-P any chance you can reproduce this?

[Amir-P]

Hey, I wasn't able to reproduce it running example app on Android. Is it only happening on Web? What is the device's OS? @SaeedZeroOne

[SaeedZeroOne]

Hey, I wasn't able to reproduce it running example app on Android. Is it only happening on Web? What is the device's OS? @SaeedZeroOne

https://github.com/fleather-editor/fleather/assets/11497700/f3e068e6-30d0-4b21-9546-8bddf10e65bc

This is on Android 11. The magnifier does not even show the text. However it does show text as it should when I use the android version instead of the web one. But the positioning problem persists, no matter the platform.

And one more thing... I think the handles should be flipped in RTL language. Maybe the problem arises from the fact that these handles look horizontally flipped in the video.

[Amir-P]

I was able to reproduce the problem. Appears to be an issue with multiline paragraphs.

And one more thing... I think the handles should be flipped in RTL language. Maybe the problem arises from the fact that these handles look horizontally flipped in the video.

I can see this problem with Flutter's own TextField widget. Looks like a problem in Flutter's TextSelectionControls.buildHandle. A quick fix can be using RTL directionality above FleatherEditor or TextField.

[SaeedZeroOne]

I was able to reproduce the problem. Appears to be an issue with multiline paragraphs.

And one more thing... I think the handles should be flipped in RTL language. Maybe the problem arises from the fact that these handles look horizontally flipped in the video.

I can see this problem with Flutter's own TextField widget. Looks like a problem in Flutter's TextSelectionControls.buildHandle. A quick fix can be using RTL directionality above FleatherEditor or TextField.

Unfortunately, using Directionality as a parent of FleatherEditor solves neither the handle problem nor the magnifier problem.

[Amir-P]

Unfortunately, using Directionality as a parent of FleatherEditor solves neither the handle problem nor the magnifier problem.

Wrapping editor in a Directionality widget with textDirection: TextDirection.rtl fixes the selection problem for me. I know it's not convenient to do this and we should fix it. I just mentioned it as a quick fix for the problem.

[SaeedZeroOne]

Unfortunately, using Directionality as a parent of FleatherEditor solves neither the handle problem nor the magnifier problem.

Wrapping editor in a Directionality widget with textDirection: TextDirection.rtl fixes the selection problem for me. I know it's not convenient to do this and we should fix it. I just mentioned it as a quick fix for the problem.

But now, for English texts, the handles are flipped. And thanks for the amazing work.