@extend-ai/react-docx 0.7.3 → 0.7.5

package/dist/index.cjs

@@ -29027,6 +29027,8 @@ function DocxEditorViewer({
       );
       return;
     }
+    const rootElement = viewerRootRef.current;
+    const zoomScale = resolveViewerMeasurementZoomScale(rootElement, 1);
     const nextHeightsByPage = trackedChangesByPage.map(
       (annotations, pageIndex) => {
         const pageHeights = /* @__PURE__ */ new Map();
@@ -29038,7 +29040,7 @@ function DocxEditorViewer({
             return;
           }
           const measuredHeight = Math.round(
-            cardElement.getBoundingClientRect().height
+            cardElement.getBoundingClientRect().height / zoomScale
           );
           if (!Number.isFinite(measuredHeight) || measuredHeight <= 0) {
             return;
@@ -42881,16 +42883,28 @@ ${currentText.slice(end)}`;
             boxSizing: "border-box",
             zIndex: 0
           } : void 0;
+          const pageTrackedChanges = positionedTrackedChangesByPage[pageIndex] ?? [];
+          const pageGutterContentHeightPx = showTrackedChangeGutter && pageTrackedChanges.length > 0 ? pageTrackedChanges.reduce((maxBottomPx, entry) => {
+            return Math.max(
+              maxBottomPx,
+              Math.ceil(
+                entry.top + entry.heightPx + TRACKED_CHANGE_GUTTER_CARD_GAP_PX + 8
+              )
+            );
+          }, pageLayout.pageHeightPx) : pageLayout.pageHeightPx;
+          const pageVisualHeightPx = Math.max(
+            pageLayout.pageHeightPx,
+            pageGutterContentHeightPx
+          );
           const pageSurfaceStyle = {
             ...pageSurfaceBaseStyle,
             width: pageLayout.pageWidthPx,
-            height: pageLayout.pageHeightPx,
-            minHeight: pageLayout.pageHeightPx,
+            height: pageVisualHeightPx,
+            minHeight: pageVisualHeightPx,
             backgroundColor: resolvedPageSurfaceBackgroundColor,
             position: "relative",
             ...pageMarginPaddingStyle(pageLayout.marginsPx)
           };
-          const pageTrackedChanges = positionedTrackedChangesByPage[pageIndex] ?? [];
           const pageCoverBackgroundImages = (() => {
             const collected = /* @__PURE__ */ new Map();
             const pageContentHeightPx = Math.max(
@@ -42938,7 +42952,7 @@ ${currentText.slice(end)}`;
               style: {
                 position: "relative",
                 width: pageWrapperWidthPx,
-                minHeight: pageLayout.pageHeightPx,
+                minHeight: pageVisualHeightPx,
                 margin: "0 auto",
                 // Isolate per-page layout/style recalculation so scrolling and
                 // edits on one page don't force whole-document layout passes.
@@ -43987,7 +44001,7 @@ ${currentText.slice(end)}`;
                       left: pageLayout.pageWidthPx,
                       top: 0,
                       width: TRACKED_CHANGE_GUTTER_WIDTH_PX,
-                      height: pageLayout.pageHeightPx,
+                      height: pageVisualHeightPx,
                       backgroundColor: resolvedPageSurfaceBackgroundColor,
                       pointerEvents: "none",
                       overflow: "visible"
@@ -44010,8 +44024,8 @@ ${currentText.slice(end)}`;
                         "svg",
                         {
                           width: pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX,
-                          height: pageLayout.pageHeightPx,
-                          viewBox: `0 0 ${pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX} ${pageLayout.pageHeightPx}`,
+                          height: pageVisualHeightPx,
+                          viewBox: `0 0 ${pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX} ${pageVisualHeightPx}`,
                           style: {
                             position: "absolute",
                             top: 0,
@@ -44051,7 +44065,7 @@ ${currentText.slice(end)}`;
                             const cardCenterY = clampNumber(
                               Math.round(entry.top + entry.heightPx / 2),
                               8,
-                              Math.max(8, pageLayout.pageHeightPx - 8)
+                              Math.max(8, pageVisualHeightPx - 8)
                             );
                             const connectorPath = Math.abs(cardCenterY - anchorY) <= 2 ? `M ${anchorX} ${anchorY} H ${cardAttachX}` : `M ${anchorX} ${anchorY} H ${gutterBendX} V ${cardCenterY} H ${cardAttachX}`;
                             const revisionBarX = clampNumber(