- 
                Notifications
    
You must be signed in to change notification settings  - Fork 3.3k
 
Description
Title: Stable per‑line pagination without flicker at page boundaries
What I’m trying to do
Custom Slate editor where each word is an inline (text + symbol image). Need Word/Docs‑style pagination into fixed pages; overflow lines should move to the next page.
What I’ve implemented
Words as inline nodes.
Line detection via getClientRects(); group rects into lines.
Compute pageHeight/pageTop/pageBottom.
Insert non‑editable spacer before the first word of an overflowing line.
Debounce + hysteresis (ENTER/EXIT thresholds); prevent page count from shrinking.
Issue
Last line near bottom margin flickers—oscillates between page N and N+1, causing total height/measurements to loop (most visible while typing).
Expected
Stable pagination: once pushed, the line stays on the next page; no reflow loop.
Tried
Debounce 50→120→180ms; hysteresis (±½ line); monotonic page count; subtract prior spacers from “natural” top. Still oscillates.
Question
Recommended Slate/React pattern for stable line‑level pagination? How to avoid measurement feedback loops when DOM spacers affect layout? Should I hook deeper into render/layout, use virtualization, or a different approach?
Environment
Slate 0.91.4, React 18.2, Chrome 128+ (same in Electron).
Repro
Link to minimal sandbox + short GIF.