@extend-ai/react-docx 0.7.0-alpha.5 → 0.7.0-alpha.6

package/dist/index.d.cts

@@ -968,6 +968,22 @@ interface DocxPageVirtualizationOptions {
      * @defaultValue `0`
      */
     settleDelayMs?: number;
+    /**
+     * Explicit scroll container for internal page virtualization.
+     *
+     * Omit this to let the viewer discover the nearest scrollable ancestor.
+     * Provide it when the host app owns scrolling, such as when the viewer is
+     * mounted inside a custom scroll-area viewport.
+     */
+    scrollElement?: HTMLElement | null;
+    /**
+     * Effective visual scale applied around the viewer.
+     *
+     * Omit this to let the viewer infer CSS `zoom` from its ancestor chain.
+     * Provide it when toolbar zoom is controlled outside the viewer so virtual
+     * page offsets update synchronously with the selected zoom.
+     */
+    zoomScale?: number;
 }
 /**
  * Externally controlled visible page window.

package/dist/index.d.ts

@@ -968,6 +968,22 @@ interface DocxPageVirtualizationOptions {
      * @defaultValue `0`
      */
     settleDelayMs?: number;
+    /**
+     * Explicit scroll container for internal page virtualization.
+     *
+     * Omit this to let the viewer discover the nearest scrollable ancestor.
+     * Provide it when the host app owns scrolling, such as when the viewer is
+     * mounted inside a custom scroll-area viewport.
+     */
+    scrollElement?: HTMLElement | null;
+    /**
+     * Effective visual scale applied around the viewer.
+     *
+     * Omit this to let the viewer infer CSS `zoom` from its ancestor chain.
+     * Provide it when toolbar zoom is controlled outside the viewer so virtual
+     * page offsets update synchronously with the selected zoom.
+     */
+    zoomScale?: number;
 }
 /**
  * Externally controlled visible page window.

package/dist/index.js

@@ -3992,6 +3992,10 @@ function resolveEffectiveZoomScale(element) {
   }
   return Number.isFinite(scale) && scale > 0 ? scale : 1;
 }
+function normalizePageVirtualizationZoomScale(value) {
+  const scale = Number(value);
+  return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+}
 var DOC_SURFACE_STYLE_BY_THEME = {
   light: {
     backgroundColor: "#ffffff",
@@ -25400,6 +25404,17 @@ function DocxEditorViewer({
   const pageVirtualizationOverscan = hasLargeTableLayoutSurface && !Number.isFinite(pageVirtualization?.overscan) ? LARGE_TABLE_PAGE_VIRTUALIZATION_OVERSCAN : rawPageVirtualizationOverscan;
   const webdriverActive = typeof navigator !== "undefined" && navigator.webdriver === true;
   const internalPageVirtualizationRequested = pageVirtualization?.enabled !== false && !hasExternalVisiblePageRange && !hideDocumentUntilPaginationSettled && isInitialPaginationSettled && !deferInternalPageVirtualization && !webdriverActive && pageCount > 1;
+  const explicitPageVirtualizationScrollElement = pageVirtualization?.scrollElement ?? null;
+  const explicitPageVirtualizationZoomScale = normalizePageVirtualizationZoomScale(pageVirtualization?.zoomScale);
+  const resolveViewerMeasurementZoomScale = React.useCallback(
+    (rootElement, fallback = 1) => {
+      if (explicitPageVirtualizationZoomScale !== void 0) {
+        return explicitPageVirtualizationZoomScale;
+      }
+      return rootElement ? resolveEffectiveZoomScale(rootElement) : fallback;
+    },
+    [explicitPageVirtualizationZoomScale]
+  );
   React.useEffect(() => {
     setDeferInternalPageVirtualization(!hasLargeTableLayoutSurface);
   }, [editor.documentLoadNonce, hasLargeTableLayoutSurface]);
@@ -25430,9 +25445,14 @@ function DocxEditorViewer({
       return;
     }
     setInternalVirtualScrollElement(
-      nearestScrollableAncestor(viewerRootRef.current)
+      explicitPageVirtualizationScrollElement instanceof HTMLElement ? explicitPageVirtualizationScrollElement : nearestScrollableAncestor(viewerRootRef.current)
     );
-  }, [editor.documentLoadNonce, pageCount, trackedChangesEnabled]);
+  }, [
+    editor.documentLoadNonce,
+    explicitPageVirtualizationScrollElement,
+    pageCount,
+    trackedChangesEnabled
+  ]);
   const [zoomProbeNonce, setZoomProbeNonce] = React.useState(0);
   React.useEffect(() => {
     if (typeof window === "undefined") {
@@ -25461,11 +25481,22 @@ function DocxEditorViewer({
     if (!rootElement) {
       return;
     }
-    const nextScale = Math.round(resolveEffectiveZoomScale(rootElement) * 100) / 100;
+    const nextScale = Math.round(
+      resolveViewerMeasurementZoomScale(
+        rootElement,
+        virtualizerMeasurementScale
+      ) * 100
+    ) / 100;
     setVirtualizerMeasurementScale(
       (current) => Math.abs(current - nextScale) < 5e-3 ? current : nextScale
     );
-  }, [editor.documentLoadNonce, pageCount, zoomProbeNonce]);
+  }, [
+    editor.documentLoadNonce,
+    pageCount,
+    resolveViewerMeasurementZoomScale,
+    virtualizerMeasurementScale,
+    zoomProbeNonce
+  ]);
   const internalPageVirtualizationEnabled = internalPageVirtualizationRequested && internalVirtualScrollElement !== null;
   const internalPageVirtualizationPending = typeof window !== "undefined" && internalPageVirtualizationRequested && internalVirtualScrollElement === null;
   const internalVirtualScrollUsesWindow = typeof document !== "undefined" && internalVirtualScrollElement !== null && (internalVirtualScrollElement === document.scrollingElement || internalVirtualScrollElement === document.documentElement || internalVirtualScrollElement === document.body);
@@ -25867,7 +25898,7 @@ function DocxEditorViewer({
       const next = new Map(current);
       let changed = false;
       const rootElement = viewerRootRef.current;
-      const zoomScale = rootElement ? resolveEffectiveZoomScale(rootElement) : 1;
+      const zoomScale = resolveViewerMeasurementZoomScale(rootElement, 1);
       paragraphElementsRef.current.forEach((element, nodeIndex) => {
         if (!element.isConnected || element.dataset.docxParagraphPartialLineRange === "true" || element.closest('[data-docx-header-footer-region="footer"]') || element.closest('[data-docx-header-footer-region="header"]')) {
           return;
@@ -25896,6 +25927,7 @@ function DocxEditorViewer({
   }, [
     editor.documentLoadNonce,
     pageNodeSegmentIdentityKeysByPage,
+    resolveViewerMeasurementZoomScale,
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
@@ -26417,7 +26449,7 @@ function DocxEditorViewer({
       );
       return;
     }
-    const zoomScale = resolveEffectiveZoomScale(rootElement);
+    const zoomScale = resolveViewerMeasurementZoomScale(rootElement, 1);
     const next = {};
     for (let pageIndex = 0; pageIndex < pageCount; pageIndex += 1) {
       if (!isPageVisible(pageIndex)) {
@@ -26504,6 +26536,7 @@ function DocxEditorViewer({
     pageCount,
     pageHeaderAndFooterNodes,
     pageSectionInfoByIndex,
+    resolveViewerMeasurementZoomScale,
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
@@ -26533,7 +26566,7 @@ function DocxEditorViewer({
     if (Date.now() < paginationMeasurementSuspendUntilRef.current) {
       return;
     }
-    const zoomScale = resolveEffectiveZoomScale(rootElement);
+    const zoomScale = resolveViewerMeasurementZoomScale(rootElement, 1);
     const nextMeasuredPageIdentityKeys = pageNodeSegmentIdentityKeysByPage;
     const nextMeasuredPageDiagnostics = pageNodeSegmentsByPage.map(
       (_, pageIndex) => {
@@ -26748,6 +26781,7 @@ function DocxEditorViewer({
     pageNodeSegmentIdentityKeysByPage,
     pageSectionInfoByIndex,
     pageHeaderAndFooterNodes,
+    resolveViewerMeasurementZoomScale,
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
@@ -31182,7 +31216,10 @@ function DocxEditorViewer({
       return;
     }
     const rootElement = viewerRootRef.current;
-    const zoomScale = rootElement ? resolveEffectiveZoomScale(rootElement) : virtualizerMeasurementScale;
+    const zoomScale = resolveViewerMeasurementZoomScale(
+      rootElement,
+      virtualizerMeasurementScale
+    );
     const nextMeasuredHeights = {};
     editor.model.nodes.forEach((node, nodeIndex) => {
       if (node.type !== "table") {
@@ -31324,6 +31361,7 @@ function DocxEditorViewer({
     pageContentWidthPxByNodeIndex,
     paginationMeasurementEnabled,
     paginationMeasurementEpoch,
+    resolveViewerMeasurementZoomScale,
     tableMeasuredRowHeights,
     tableColumnWidths,
     tableRowHeights,