Fix selection scrolls to incorrect position on focus and press enter on mobile (#6838)

* mobile: fix keep-in-view overscrolling

* mobile: fix editor status flickers too much

* mobile: fix setting startingOffset

* mobile: set sticky state if not set already
This commit is contained in:
Ammar Ahmed
2024-11-06 13:14:14 +05:00
committed by GitHub
parent 3cf00cb0f5
commit f740a211ce
2 changed files with 37 additions and 8 deletions

View File

@@ -62,9 +62,12 @@ function StatusBar({
};
}, [tab.id, statusBar]);
const scrollState = useRef({
isMovingUp: false,
startingOffset: 0
});
const onScroll = React.useCallback((event: Event) => {
const currentOffset = (event.target as HTMLElement)?.scrollTop;
post("editor-event:scroll", currentOffset);
if (currentOffset < 200) {
if (stickyRef.current) {
stickyRef.current = false;
@@ -76,11 +79,39 @@ function StatusBar({
}
if (Date.now() - lastStickyChangeTime.current < 300) return;
if (currentOffset > prevScroll.current) {
setSticky(false);
stickyRef.current = false;
if (
!scrollState.current.startingOffset ||
scrollState.current.isMovingUp
) {
scrollState.current.startingOffset = currentOffset;
}
scrollState.current.isMovingUp = false;
} else {
setSticky(true);
stickyRef.current = true;
if (
!scrollState.current.startingOffset ||
!scrollState.current.isMovingUp
) {
scrollState.current.startingOffset = currentOffset;
}
scrollState.current.isMovingUp = true;
}
if (scrollState.current.isMovingUp) {
if (currentOffset < scrollState.current.startingOffset - 50) {
if (!stickyRef.current) {
stickyRef.current = true;
setSticky(true);
}
scrollState.current.startingOffset = 0;
}
} else {
if (currentOffset > scrollState.current.startingOffset + 50) {
if (stickyRef.current) {
stickyRef.current = false;
setSticky(false);
}
scrollState.current.startingOffset = 0;
}
}
lastStickyChangeTime.current = Date.now();
prevScroll.current = currentOffset;

View File

@@ -82,9 +82,7 @@ export function keepLastLineInView(
)
return;
const isPopupVisible = document.getElementsByClassName(
"editor-mobile-toolbar-popup"
);
const isPopupVisible = document.querySelector(".editor-mobile-toolbar-popup");
const node = editor.state.selection.$from;
if (node.pos > editor.state.doc.nodeSize) return;