@extend-ai/react-docx 0.6.4 → 0.6.6

package/dist/index.cjs

@@ -12297,7 +12297,15 @@ var defaultStarterModel = {
     headerSections: [],
     footerSections: [],
     paragraphStyles: [
-      { id: "Normal", name: "Body", isDefault: true },
+      {
+        id: "Normal",
+        name: "Body",
+        isDefault: true,
+        // Word's blank-document default body typeface. Without this the body
+        // default fell through to a heading font / Times New Roman and did not
+        // match the "Calibri" shown in the toolbar.
+        runStyle: { fontFamily: "Calibri", fontSizePt: 11 }
+      },
       {
         id: "Heading1",
         name: "Heading 1",
@@ -12440,7 +12448,7 @@ function resolveDocumentInheritedFontFamily(model) {
     return cssFontFamily(defaultStyleFontFamily);
   }
   const paragraphStyleFontFamily = paragraphStyles.find(
-    (style) => Boolean(style.runStyle?.fontFamily?.trim())
+    (style) => style.headingLevel === void 0 && Boolean(style.runStyle?.fontFamily?.trim())
   )?.runStyle?.fontFamily;
   if (paragraphStyleFontFamily) {
     return cssFontFamily(paragraphStyleFontFamily);
@@ -14675,7 +14683,17 @@ function nodeAlreadyEndsAtExplicitPageBoundary(node) {
   }
   return paragraphHasExplicitPageBreak2(node) || paragraphHasPageBreakBefore2(node) || sectionBreakAfterParagraphStartsNewPage(node);
 }
+var docxHardPageBreakStartNodeIndexesByModel = /* @__PURE__ */ new WeakMap();
 function collectDocxHardPageBreakStartNodeIndexes(model) {
+  const cached = docxHardPageBreakStartNodeIndexesByModel.get(model);
+  if (cached) {
+    return cached;
+  }
+  const result = computeDocxHardPageBreakStartNodeIndexes(model);
+  docxHardPageBreakStartNodeIndexesByModel.set(model, result);
+  return result;
+}
+function computeDocxHardPageBreakStartNodeIndexes(model) {
   const breaks = collectTopLevelExplicitPageBreakStartNodeIndexes(model.nodes);
   const sections = resolveDocumentSectionsFromMetadata(model.metadata);
   for (let sectionIndex = 1; sectionIndex < sections.length; sectionIndex += 1) {
@@ -14699,7 +14717,17 @@ function collectDocxHardPageBreakStartNodeIndexes(model) {
   }
   return breaks;
 }
+var docxSectionStartPageBreakNodeIndexesByModel = /* @__PURE__ */ new WeakMap();
 function collectDocxSectionStartPageBreakNodeIndexes(model) {
+  const cached = docxSectionStartPageBreakNodeIndexesByModel.get(model);
+  if (cached) {
+    return cached;
+  }
+  const result = computeDocxSectionStartPageBreakNodeIndexes(model);
+  docxSectionStartPageBreakNodeIndexesByModel.set(model, result);
+  return result;
+}
+function computeDocxSectionStartPageBreakNodeIndexes(model) {
   const breaks = /* @__PURE__ */ new Set();
   const sections = resolveDocumentSectionsFromMetadata(model.metadata);
   for (let sectionIndex = 1; sectionIndex < sections.length; sectionIndex += 1) {
@@ -30096,6 +30124,8 @@ function DocxEditorViewer({
   const fileDragDepthRef = React.useRef(0);
   const tableDraftLayoutRefreshRafRef = React.useRef(null);
   const activeRangeFlushFrameRef = React.useRef(null);
+  const pendingEditableCaretRef = React.useRef(null);
+  const pointerSelectionDragRef = React.useRef({ down: false, moved: false });
   const deferredCollapsedSelectionSyncTimeoutRef = React.useRef(
     null
   );
@@ -31281,6 +31311,7 @@ function DocxEditorViewer({
   const hasExternalVisiblePageRange = Number.isFinite(Number(visiblePageRange?.startPageIndex)) || Number.isFinite(Number(visiblePageRange?.endPageIndex));
   const [deferInternalPageVirtualization, setDeferInternalPageVirtualization] = React.useState(false);
   const [internalVirtualScrollElement, setInternalVirtualScrollElement] = React.useState(null);
+  const [virtualizerMeasurementScale, setVirtualizerMeasurementScale] = React.useState(1);
   const [observedVisiblePageRange, setObservedVisiblePageRange] = React.useState(void 0);
   const pageVirtualizationSettleDelayMs = Math.max(
     0,
@@ -31330,6 +31361,19 @@ function DocxEditorViewer({
       nearestScrollableAncestor(viewerRootRef.current)
     );
   }, [editor.documentLoadNonce, pageCount, trackedChangesEnabled]);
+  React.useLayoutEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const rootElement = viewerRootRef.current;
+    if (!rootElement) {
+      return;
+    }
+    const nextScale = resolveEffectiveZoomScale(rootElement);
+    setVirtualizerMeasurementScale(
+      (current) => Math.abs(current - nextScale) < 1e-3 ? current : nextScale
+    );
+  });
   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);
@@ -31338,20 +31382,37 @@ function DocxEditorViewer({
   const estimateVirtualPageSize = React.useCallback(
     (pageIndex) => {
       const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
-      return Math.max(1, pageLayout.pageHeightPx + DOC_PAGE_BREAK_GAP);
+      return Math.max(
+        1,
+        Math.round(
+          (pageLayout.pageHeightPx + DOC_PAGE_BREAK_GAP) * virtualizerMeasurementScale
+        )
+      );
     },
-    [documentLayout, pageSectionInfoByIndex]
+    [documentLayout, pageSectionInfoByIndex, virtualizerMeasurementScale]
+  );
+  const measureVirtualPageElement = React.useCallback(
+    (element) => {
+      const rect = element.getBoundingClientRect();
+      return Math.max(
+        1,
+        Math.round(rect.height + DOC_PAGE_BREAK_GAP * virtualizerMeasurementScale)
+      );
+    },
+    [virtualizerMeasurementScale]
   );
   const internalElementPageVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: Math.max(1, pageCount),
     getScrollElement: () => internalElementPageVirtualizationEnabled ? internalVirtualScrollElement : null,
     estimateSize: estimateVirtualPageSize,
+    measureElement: measureVirtualPageElement,
     overscan: pageVirtualizationOverscan
   });
   const internalWindowPageVirtualizer = (0, import_react_virtual.useWindowVirtualizer)({
     count: Math.max(1, pageCount),
     getScrollElement: () => internalWindowPageVirtualizationEnabled && typeof window !== "undefined" ? window : null,
     estimateSize: estimateVirtualPageSize,
+    measureElement: measureVirtualPageElement,
     overscan: pageVirtualizationOverscan
   });
   const internalPageVirtualizer = internalVirtualScrollUsesWindow ? internalWindowPageVirtualizer : internalElementPageVirtualizer;
@@ -31861,7 +31922,8 @@ function DocxEditorViewer({
     internalPageVirtualizationEnabled,
     internalPageVirtualizer,
     pageCount,
-    trackedChangesEnabled
+    trackedChangesEnabled,
+    virtualizerMeasurementScale
   ]);
   React.useEffect(() => {
     const nextCurrentPage = clampNumber(
@@ -34112,14 +34174,62 @@ function DocxEditorViewer({
     });
   }, [resolveParagraphBoundaryFromSelectionPoint]);
   const setActiveRangeFromSelection = React.useCallback(() => {
+    const session = editor.selectionSessionKind;
+    const rootElement = viewerRootRef.current;
+    const activeElement = document.activeElement;
+    const editorHasFocus = Boolean(
+      activeElement instanceof HTMLElement && activeElement.isContentEditable && rootElement && rootElement.contains(activeElement)
+    );
+    const liveSelection = window.getSelection();
+    const anchorNode = liveSelection?.anchorNode ?? null;
+    const collapsedElementAnchor = Boolean(
+      liveSelection && liveSelection.isCollapsed && liveSelection.rangeCount > 0 && anchorNode && anchorNode.nodeType !== Node.TEXT_NODE
+    );
+    const selectionDropped = Boolean(
+      editorHasFocus && (!liveSelection || liveSelection.rangeCount === 0)
+    );
+    if (collapsedElementAnchor || selectionDropped) {
+      if (session === "keyboard" || session === "composition") {
+        return;
+      }
+      const anchorElement = anchorNode instanceof Element ? anchorNode : anchorNode?.parentElement ?? null;
+      const destroyedHost = anchorElement?.closest(
+        "[data-docx-paragraph-host='true']"
+      ) ?? (editorHasFocus ? activeElement.closest(
+        "[data-docx-paragraph-host='true']"
+      ) : null);
+      const lastGoodRange = cloneTextRange(editor.activeTextRange);
+      if (lastGoodRange && destroyedHost) {
+        const normalizedLastGood = normalizeTextRange(lastGoodRange);
+        const lastGoodHost = resolveParagraphHostElement(
+          normalizedLastGood.start.location
+        );
+        if (lastGoodHost === destroyedHost) {
+          setSelectionFromDocxBoundaries(
+            normalizedLastGood.start,
+            normalizedLastGood.end
+          );
+        }
+      }
+      return;
+    }
     const range = resolveActiveRangeFromDomSelection();
     if (!range) {
+      if (editorHasFocus && editor.activeTextRange) {
+        return;
+      }
       editor.setActiveTextRange(void 0);
       return;
     }
     clearTableCellSelection();
     editor.setActiveTextRange(range);
-  }, [clearTableCellSelection, editor, resolveActiveRangeFromDomSelection]);
+  }, [
+    clearTableCellSelection,
+    editor,
+    resolveActiveRangeFromDomSelection,
+    resolveParagraphHostElement,
+    setSelectionFromDocxBoundaries
+  ]);
   const flushActiveRangeFromSelection = React.useCallback(() => {
     if (deferredCollapsedSelectionSyncTimeoutRef.current !== null) {
       window.clearTimeout(deferredCollapsedSelectionSyncTimeoutRef.current);
@@ -34133,6 +34243,73 @@ function DocxEditorViewer({
       setActiveRangeFromSelection();
     });
   }, [setActiveRangeFromSelection]);
+  React.useLayoutEffect(() => {
+    if (isReadOnly) {
+      return;
+    }
+    const session = editor.selectionSessionKind;
+    if (pointerSelectionDragRef.current.moved || session === "composition") {
+      return;
+    }
+    const rootElement = viewerRootRef.current;
+    if (!rootElement) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (!(activeElement instanceof HTMLElement) || !activeElement.isContentEditable || !rootElement.contains(activeElement)) {
+      return;
+    }
+    const focusedHost = activeElement.closest(
+      "[data-docx-paragraph-host='true']"
+    );
+    if (!focusedHost) {
+      return;
+    }
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+    const liveRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : void 0;
+    const anchorNode = selection.anchorNode;
+    const selectionInsideHost = Boolean(
+      liveRange && focusedHost.contains(liveRange.startContainer) && focusedHost.contains(liveRange.endContainer)
+    );
+    const anchorIsElement = Boolean(
+      anchorNode && anchorNode.nodeType !== Node.TEXT_NODE
+    );
+    const selectionWasDestroyed = !liveRange || !selectionInsideHost || selection.isCollapsed && anchorIsElement;
+    if (!selectionWasDestroyed) {
+      return;
+    }
+    const focusedNodeIndexAttr = focusedHost.getAttribute(
+      "data-docx-paragraph-node-index"
+    );
+    const focusedNodeIndex = focusedNodeIndexAttr != null ? Number.parseInt(focusedNodeIndexAttr, 10) : Number.NaN;
+    const pendingCaret = pendingEditableCaretRef.current;
+    if (pendingCaret && Number.isFinite(focusedNodeIndex) && pendingCaret.nodeIndex === focusedNodeIndex) {
+      const textLength = editableTextFromElement(focusedHost).length;
+      const safeStart = Math.max(0, Math.min(pendingCaret.start, textLength));
+      const safeEnd = Math.max(
+        safeStart,
+        Math.min(pendingCaret.end, textLength)
+      );
+      setSelectionWithinElementByTextOffsets(focusedHost, safeStart, safeEnd);
+      return;
+    }
+    if (session === "keyboard") {
+      return;
+    }
+    const range = editor.activeTextRange;
+    if (!range) {
+      return;
+    }
+    const normalized = normalizeTextRange(range);
+    const targetHost = resolveParagraphHostElement(normalized.start.location);
+    if (!targetHost || targetHost !== focusedHost) {
+      return;
+    }
+    setSelectionFromDocxBoundaries(normalized.start, normalized.end);
+  });
   const selectionIsExpandedWithinElement = React.useCallback(
     (element) => {
       const selection = window.getSelection();
@@ -34586,6 +34763,28 @@ function DocxEditorViewer({
       const collapsedCaretInsideEditableHost = Boolean(
         selectionRange.collapsed && activeElement instanceof HTMLElement && activeElement.isContentEditable && rootElement.contains(activeElement) && activeElement.contains(selectionRange.startContainer)
       );
+      const selectionWithinSingleEditableHost = Boolean(
+        activeElement instanceof HTMLElement && activeElement.isContentEditable && rootElement.contains(activeElement) && activeElement.contains(selectionRange.startContainer) && activeElement.contains(selectionRange.endContainer) && selectionRange.startContainer.nodeType === Node.TEXT_NODE && selectionRange.endContainer.nodeType === Node.TEXT_NODE
+      );
+      if (selectionWithinSingleEditableHost && activeElement instanceof HTMLElement) {
+        const host = activeElement.closest(
+          "[data-docx-paragraph-host='true']"
+        );
+        const nodeIndexAttr = host?.getAttribute(
+          "data-docx-paragraph-node-index"
+        );
+        const offsets = host ? selectionOffsetsWithinElement(host) : void 0;
+        if (host && nodeIndexAttr != null && offsets) {
+          const nodeIndex = Number.parseInt(nodeIndexAttr, 10);
+          if (Number.isFinite(nodeIndex)) {
+            pendingEditableCaretRef.current = {
+              nodeIndex,
+              start: offsets.start,
+              end: offsets.end
+            };
+          }
+        }
+      }
       if (collapsedCaretInsideEditableHost) {
         scheduleDeferredCollapsedSelectionSync();
         return;
@@ -34597,6 +34796,27 @@ function DocxEditorViewer({
       document.removeEventListener("selectionchange", handleSelectionChange);
     };
   }, [flushActiveRangeFromSelection, scheduleDeferredCollapsedSelectionSync]);
+  React.useEffect(() => {
+    const onPointerDown = () => {
+      pointerSelectionDragRef.current = { down: true, moved: false };
+    };
+    const onPointerMove = (event) => {
+      if (pointerSelectionDragRef.current.down && event.buttons !== 0) {
+        pointerSelectionDragRef.current.moved = true;
+      }
+    };
+    const onPointerUp = () => {
+      pointerSelectionDragRef.current = { down: false, moved: false };
+    };
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("pointermove", onPointerMove, true);
+    window.addEventListener("pointerup", onPointerUp, true);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("pointermove", onPointerMove, true);
+      window.removeEventListener("pointerup", onPointerUp, true);
+    };
+  }, []);
   const beginCrossNodeSelectionDrag = React.useCallback(
     (startBoundary, pointerId, startX, startY) => {
       tableSelectionDragRef.current = {
@@ -42024,6 +42244,18 @@ function DocxEditorViewer({
         ...leadingCoverLayoutSpacer ? {
           minHeight: `${estimateParagraphLineHeightPx(node, nodeDocGridLinePitchPx) + EMPTY_PARAGRAPH_EXTRA_HEIGHT_PX + LEADING_COVER_SPACER_EXTRA_HEIGHT_PX}px`
         } : void 0,
+        // Carry the paragraph's run font on the editable host so text typed into
+        // it (which is a bare, not-yet-committed text node, not a styled run
+        // span) renders in the same font the committed run will use — i.e. the
+        // font shown in the toolbar — instead of inheriting a generic default.
+        // Rendered runs set their own font on their span, so this only affects
+        // freshly typed/empty content. When the paragraph has no explicit run
+        // font we leave it unset so the document default still applies.
+        ...(() => {
+          const runStyle = firstRunStyle(node);
+          const hostFontFamily = cssFontFamily(runStyle?.fontFamily);
+          return hostFontFamily ? { fontFamily: hostFontFamily } : {};
+        })(),
         outline: "none"
       };
       let fallbackParagraphRuns;
@@ -42249,6 +42481,16 @@ function DocxEditorViewer({
             if (!editable) {
               return;
             }
+            const mouseUpOffsets = selectionOffsetsWithinElement(
+              event.currentTarget
+            );
+            if (mouseUpOffsets) {
+              pendingEditableCaretRef.current = {
+                nodeIndex,
+                start: mouseUpOffsets.start,
+                end: mouseUpOffsets.end
+              };
+            }
             if (selectionIsExpandedWithinElement(event.currentTarget)) {
               flushActiveRangeFromSelection();
               cancelPendingPointerSelectionReconcile();
@@ -42293,6 +42535,14 @@ function DocxEditorViewer({
               nodeIndex,
               event.currentTarget.innerHTML
             );
+            const typedOffsets = selectionOffsetsWithinElement(
+              event.currentTarget
+            );
+            pendingEditableCaretRef.current = typedOffsets ? {
+              nodeIndex,
+              start: typedOffsets.start,
+              end: typedOffsets.end
+            } : null;
           },
           onCompositionStart: () => {
             if (!editable) {