Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Beta]: After the Excalidraw docs page scrolls, a new shape starts away from the pointer by the distance scrolled

Aperta
  • Qualcosa non va?
#5,312 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start at apps/www/src/registry/components/editor/excalidraw.tsx:72 and read how the Excalidraw component gets its position and handles page scrolling. Reproduce the reported behavior on /docs/excalidraw by drawing, scrolling the page, then drawing again; compare against the editor box scroll case. Done when a new shape starts at the pointer after page scrolling in the reported browsers.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

triaged

Testing lane

  • Repository: udecode/plate
  • Branch: next
  • Release channel: Beta
  • Exact commit/package version: NOT_ENOUGH_INFO

Summary

On https://beta.platejs.org/docs/excalidraw, after the page scrolls, a shape drawn on the canvas does not start at the pointer. It lands above the pointer by the distance the page scrolled since Excalidraw last read its position. Every later shape lands the same way until the demo's editor box scrolls or resizes. https://platejs.org/docs/excalidraw does the same.

Reproduction

Sin saw this by hand in Safari on 2026-10-23 (Beijing time): sometimes the first stroke of a shape started away from the pointer. It did not happen again on camera, so the steps below come from an agent's probe.

Repro 1: draw, scroll the page, draw again, Chromium

An agent recorded this on the live Beta in headless Chromium 149 (Playwright) on 2026-10-24, in a 1040 x 820 window.

  1. Open https://beta.platejs.org/docs/excalidraw and scroll until the canvas is in view.
  2. Click the rectangle tool. Excalidraw takes focus, and the page and the demo's editor box scroll it into view.
  3. Drag on the canvas.
  4. With the mouse over the page heading above the demo, scroll the page down 150 px with the mouse wheel.
  5. Press r and drag on the canvas again at the same screen position.

Result: the first rectangle's top-left corner is 2 px from where the drag started. The second rectangle's corner is 152 px above it, which is the 150 px the page scrolled.

Repro 2: WebKit, and platejs.org

An agent ran a script on 2026-10-24 that scrolled the page to the canvas, drew a rectangle, scrolled the page 150 px, drew three more and then scrolled the editor box by 1 px and drew once more. There is no recording.

  • Beta, Chromium 149: 2 px, then 152, 151 and 152 px above the pointer, then 2 px.
  • Beta, WebKit 26.5: the first rectangle was already 189 px above the pointer, after the script's first page scroll. The next three started above the visible canvas. After the 1 px box scroll, 2 px.
  • platejs.org, WebKit 26.5: after the 150 px page scroll, 152, 153 and 152 px above the pointer, then 2 px after the box scroll.

Expected

A shape starts where the drag starts, however far the page has scrolled.

Actual

After a page scroll, each new shape lands above the pointer by the distance the page scrolled since Excalidraw last read its position.

Environment

  • Exact next commit/Beta package version: NOT_ENOUGH_INFO. The page does not show its build.
  • Repro 1: Chromium 149.0.7827.55 (Playwright, headless) on macOS, 2026-10-24.
  • Repro 2: Chromium 149.0.7827.55 and WebKit 26.5 (Playwright, headless) on macOS, 1280 x 900, 2026-10-24.
  • Sin's report: Safari on macOS, 2026-10-23.
  • Not tried in Firefox or on a phone.

Caveat

This cause comes from reading Excalidraw 0.18.0, the version apps/www/package.json pins, and next c4067faca8. Excalidraw keeps its container's screen position in its state (offsetTop, offsetLeft) and converts pointer positions to canvas positions with it. It refreshes that position when it mounts, when its container resizes and on scroll events of its nearest scrollable ancestor (getNearestScrollableContainer). On this page that ancestor is the demo's editor box (overflow-y: auto, 1,031 px of content in a 609 px box), so a scroll of the page never refreshes it. So whether the page or the box scrolled last decides where a shape lands. That would explain why Sin saw it only sometimes. apps/www/src/registry/components/editor/excalidraw.tsx:72 renders <Excalidraw> without calling the API's refresh(), which reads the position again. Calling it on page scroll may fix this. Nobody has tried it.

Evidence

  • Repro 1: the agent's recording, 0:25, with an English step panel on the right. The second drag is at 0:11, and the result is at 0:16. The dark box at the bottom is drawn by the test script and lists where each drag started and where its shape landed.

Related

  • #5301: on the same docs demo, Forward Delete after undo and redo on the canvas types into the first heading.
Repro 1 — Chromium 149, /docs/excalidraw

https://github.com/user-attachments/assets/80390cd3-12a9-409e-9042-ebc4dc4fb7a0

Lingua principale
TypeScript
Stelle
16.6k
Fork
993
Merge medio
20h 1m
PR unite (30g)
60

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di udecode/plate

Tutte le issue di udecode/plate

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.