DocumentEditor can shift an entire next-page body onto the previous page when only the first widget fits

[ohcedar]

Package

@syncfusion/ej2-documenteditor

Version

Observed in 33.2.7.

Description

In DocumentEditor, pressing Enter in a document near a page boundary can cause content from the following page to be shifted onto the previous page even when the whole following body does not fit. The result is overlapping/garbled page layout: a body from the next page is moved to the previous page at the top margin and visually overlaps existing content.

This appears to happen in Layout.prototype.shiftBodyWidget(widget, bottom, breakCode). The current condition checks that bottom fits in the previous page client area, but bottom can represent only the first widget being considered. The method then moves the entire widget.containerWidget body from the next page to the previous page.

Expected behavior

A body from the next page should only be shifted back to the previous page when the full body span fits in the previous page client area. If only the first widget fits, the body should remain on the next page or be laid out without overlap.

Actual behavior

The first widget can fit, the condition passes, and the entire next-page body is shifted to the previous page. When the rest of that body does not fit, the previous page content and shifted body overlap.

Suggested fix

Before moving widget.containerWidget, also compute whether the full next body span fits after the previous body. For example:

var previousBodyBottom = this.getNextWidgetHeight(widget.previousRenderedWidget.bodyWidget);
var nextBodyBottom = this.getNextWidgetHeight(widget.containerWidget);
var nextBodyTop = widget.containerWidget.y;
var nextBodySpan = Math.max(widget.height, nextBodyBottom - nextBodyTop);
var fullBodyBottom = HelperMethods.round(previousBodyBottom + nextBodySpan, 2);

if (!widget.previousRenderedWidget.containerWidget.lastChild.isEndsWithPageBreak
    && !widget.previousRenderedWidget.containerWidget.lastChild.isEndsWithColumnBreak
    && bottom <= HelperMethods.round(this.viewer.clientArea.bottom, 2)
    && fullBodyBottom <= HelperMethods.round(this.viewer.clientArea.bottom, 2)
    && breakCode === 'NoBreak') {
  // existing shift logic
}

Adding this full-body-fit check prevents the overlapping layout in the observed case.

Notes

This was reproduced with a multi-page DOCX in the JavaScript/React DocumentEditor. The issue is not specific to React; the affected code is in @syncfusion/ej2-documenteditor layout logic.