#119 Tempered TextAnnotatorPopup positioning

[oleksandr-danylchenko]

Issue - #119

Changes Made

• Added stable top positioning of the popup. It prevents it from covering the annotated content and it's placed pretty intuitively (IMHO)
• Allowed the popup to get scrolled from to prevent it from dragging across the screen over irrelevant text
• Added useDismiss hook usage

Relations

It prevents the page from accidentally freezing when the user selects the text with the Ctrl+A (bug I discovered when working on the #118, see

Demo

Screen.Recording.2024-07-12.at.19.33.39.mov

[rsimon]

I like the change. But what if the top of the text is scrolled off screen, and the user selects? Right now, the popup would still pop up above the text, outside the visible area, right? I think it's important that the popup will always appear in the visible area - either above or below the text and, at worst, if the selection exceeds both the top and the bottom of the screen, above the annotation. (I guess there are behaviors in floating UI that would achieve that?)

[oleksandr-danylchenko]

But what if the top of the text is scrolled off the screen, and the user selects? Right now, the popup would still pop up above the text, outside the visible area, right?

Yep, that's correct. It's possible to scroll from the popup and make it non-visible. I believe it can be improved with the flip middleware that will place the popup under the selected text on the scroll. Like it's done in Slab:

Screen.Recording.2024-07-18.at.10.46.02.mov

I think it's important that the popup will always appear in the visible area

I'm not sure whether the popup should still be visible if the user explicitly scrolled from the selected content. Because it removes the visual connection between them 🤔

[rsimon]

The issue we face is this: there are sometimes annotations that extend beyond multiple paragraphs, and are larger than the viewport area.

If the user clicks an annotation that starts above the screen viewport, and ends below the screen viewport, they won't get a popup at all. (Because it would either be above or below the visible screen area.) That's what we need to avoid in our case.

I don't mind if the user actively scrolls the popup out of view. But clicking an annotation always has to open a popup inside the visible viewport area IMO.

[oleksandr-danylchenko]

clicks an annotation that starts above the screen viewport, and ends below the screen viewport, they won't get a popup at all

Aha... I see your point now. I'll try to experiment with the shift middleware then 👌🏻

[oleksandr-danylchenko]

I found that the most pragmatic solution would be using just the shift({ mainAxis: false, crossAxis: true, padding: 10 }). It doesn't introduce weird jumping when the selection area is large, as the flip does. And it fulfills the need of having the popup visible for the large references.

Screen.Recording.2024-07-18.at.11.21.06.mov

[rsimon]

YES! I love it!