Touch drag on mobile (iOS): page scrolls back to the drag source after the drop, when the page auto-scrolled during the drag
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Anfängerfreundlichkeit
- 72/100
- Issue-Typ
- Bug
- Klarheit
- Klar beschrieben
- Aktivitätsstatus
- Aktiv
- Tech-Stack
- typescript
- Bereich
- frontend
Rechercherichtung
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.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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 💖
- Vorherrschende Sprache
- TypeScript
- Sterne
- 10.2k
- Forks
- 772
- Ø Merge
- 3 T. 11 Std.
- Gemergte PRs (30 T.)
- 17
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus TypeCellOS/BlockNote
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
TypeCellOS/BlockNote#3098 ·
-
Off-By-One `RangeError` Crash and Text Duplication in `StyleManager.editLink` and `deleteLink` Offenneeds-triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
TypeCellOS/BlockNote#3073 ·
-
needs-triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 85/100
TypeCellOS/BlockNote#3072 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
TypeCellOS/BlockNote#2949 · 1 Kommentar ·
-
a11y
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
TypeCellOS/BlockNote#2855 ·
Alle Issues in TypeCellOS/BlockNote
Ähnliche Issues
-
comp/dashboard P3 type/bug
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 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
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 76/100
-
code-quality refactoring
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 74/100
langchain-ai/deepagents#6450 ·