Touch drag on mobile (iOS): page scrolls back to the drag source after the drop, when the page auto-scrolled during the drag
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức phù hợp với người mới
- 72/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức độ hoạt động
- Sôi nổi
- Công nghệ
- typescript
- Lĩnh vực
- frontend
Hướng nghiên cứu
Start in packages/core/src/extensions/SideMenu/SideMenu.ts:546-564 and trace the onDrop branch that checks pmView.dragging. Reproduce with a long document and an iOS auto-scrolling drag, then inspect how posAtCoords and DOMObserver.flush() affect the selection. Done means a same-editor drop keeps the viewport at the drop location and the selection refers to the dropped content rather than the pre-drag anchor.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
What’s broken?
On a document long enough to scroll, dragging content to a position that is off-screen (so the page auto-scrolls during the drag) and dropping it makes the page jump away from the drop - back to roughly where the drag started.
The content itself lands correctly; only the scroll position is wrong, so the user loses sight of what they just moved.
The precondition is that the page must auto-scroll during the drag. A short drag entirely within the viewport shows nothing, which is why the bug looks intermittent.
Where it comes from: SideMenu.onDrop uses pmView.dragging as its only "this drag belongs to my editor" signal. For a drag the browser carried out itself, dragging is null at drop time, so a same-editor drop falls into the cross-editor branch and the selection is collapsed to the pre-drag anchor:
packages/core/src/extensions/SideMenu/SideMenu.ts:546-564 (0.54.0)
if (isDropPoint) {
if (this.pmView.dragging) {
// Do not collapse selection when text content is being dragged
return;
}
// Because the editor selection is unrelated to the dragged content, we
// don't want PM to delete its content. Therefore, we collapse the selection.
this.pmView.dispatch(
this.pmView.state.tr.setSelection(
TextSelection.create(
this.pmView.state.tr.doc,
this.pmView.state.tr.selection.anchor, // <- the selection from BEFORE the drag
),
),
);
return;
}
The jump itself is then ProseMirror doing what it is told: DOMObserver.flush() -> EditorView.scrollToSelection() restores and scrolls to view.state.selection, which now points at the drag source instead of the drop.
A correct fix would resolve the position from the drop coordinates (posAtCoords) rather than reusing the stale pre-drag anchor.
What did you expect to happen?
After a drop, the viewport should stay at the drop location (or the moved content should be scrolled into view) - not scroll back to where the drag started. The selection after the drop should refer to the dropped content, not to the pre-drag position.
Steps to reproduce
- Create an editor with enough content to scroll the page — e.g. useCreateBlockNote({ initialContent }) with ~70 plain paragraphs, on a page that scrolls itself (no custom scroll container needed).
- Select a line somewhere in the middle and start dragging it via the drag handle.
- Drag to the very bottom edge of the viewport and hold there, so the page auto-scrolls and the drag source leaves the viewport.
- Drop.
- The page jumps back to the drag source instead of staying at the drop. The reverse direction works the same way: drag from the very bottom back up to a position that requires auto-scrolling.
BlockNote version
v0.54.0
Environment
IOS(Safari + Firefox)
Additional context
Originally reported against our product (OpenProject), then reproduced on a clean setup with nothing but @blocknote 0.54.0, React and Vite - no application code, no custom schema.
Contribution
- I'd be interested in contributing a fix for this issue
Sponsor
- I'm a sponsor and would appreciate if you could look into this sooner than later 💖
- Ngôn ngữ chính
- TypeScript
- Star
- 10.2k
- Fork
- 772
- Merge trung bình
- 3 ngày 11 giờ
- Pull request đã merge (30 ngày)
- 17
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của TypeCellOS/BlockNote
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100
TypeCellOS/BlockNote#3098 ·
-
Off-By-One `RangeError` Crash and Text Duplication in `StyleManager.editLink` and `deleteLink` Đang mởneeds-triage
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100
TypeCellOS/BlockNote#3073 ·
-
needs-triage
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 85/100
TypeCellOS/BlockNote#3072 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 82/100
TypeCellOS/BlockNote#2949 · 1 bình luận ·
-
a11y
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
TypeCellOS/BlockNote#2855 ·
Tất cả issue của TypeCellOS/BlockNote
Issue tương tự
-
comp/dashboard P3 type/bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 86/100
NousResearch/hermes-agent#117722 ·
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 76/100
-
code-quality refactoring
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 74/100
langchain-ai/deepagents#6450 ·