@univerjs/engine-render 1.0.2 → 1.0.4

package/lib/cjs/index.js

@@ -5696,7 +5696,7 @@ var Border = class extends SheetExtension {
 			let startX = cellStartX;
 			let endX = cellEndX;
 			if (type !== "t" && type !== "b" && type !== "l" && type !== "r") {
-				if (isMerged) return true;
+				if (isMerged) continue;
 				if (isMergedMainCell) {
 					startY = mergeInfo.startY;
 					endY = mergeInfo.endY;
@@ -13912,6 +13912,26 @@ var DocumentViewModel = class DocumentViewModel {
 	}
 };
 
+//#endregion
+//#region src/components/docs/layout/header-footer-field.ts
+function resolveHeaderFooterFieldGlyph(glyph, startIndex, endIndex, customRanges, pageNumber, pageCount) {
+	var _fieldRange$propertie, _fieldRange$propertie2;
+	if (!glyph.content || glyph.raw === _univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_START || glyph.raw === _univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_END) return glyph;
+	const fieldRange = customRanges.find((customRange) => {
+		var _customRange$properti;
+		return customRange.rangeType === _univerjs_core.CustomRangeType.FIELD && customRange.startIndex <= startIndex && customRange.endIndex >= endIndex && typeof ((_customRange$properti = customRange.properties) === null || _customRange$properti === void 0 ? void 0 : _customRange$properti.fieldType) === "string";
+	});
+	const fieldType = fieldRange === null || fieldRange === void 0 || (_fieldRange$propertie = fieldRange.properties) === null || _fieldRange$propertie === void 0 || (_fieldRange$propertie = _fieldRange$propertie.fieldType) === null || _fieldRange$propertie === void 0 ? void 0 : _fieldRange$propertie.toUpperCase();
+	if (!fieldRange || ((_fieldRange$propertie2 = fieldRange.properties) === null || _fieldRange$propertie2 === void 0 ? void 0 : _fieldRange$propertie2.locked) === _univerjs_core.BooleanNumber.TRUE || fieldType !== "PAGE" && fieldType !== "NUMPAGES") return glyph;
+	if (fieldType === "NUMPAGES" && pageCount == null) return glyph;
+	let content = "";
+	if (startIndex === fieldRange.startIndex + 1) content = String(fieldType === "PAGE" ? pageNumber : pageCount);
+	return content === glyph.content ? glyph : {
+		...glyph,
+		content
+	};
+}
+
 //#endregion
 //#region src/components/docs/layout/line-breaker/enhancers/utils.ts
 /**
@@ -17050,27 +17070,75 @@ function createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference,
 	let header;
 	let footer;
 	if (headerId) {
-		var _skeHeaders$get;
-		if ((_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.has(pageWidth)) {
+		var _headerTreeMap$get, _skeHeaders$get;
+		const fieldRanges = headerTreeMap === null || headerTreeMap === void 0 || (_headerTreeMap$get = headerTreeMap.get(headerId)) === null || _headerTreeMap$get === void 0 || (_headerTreeMap$get = _headerTreeMap$get.getBody()) === null || _headerTreeMap$get === void 0 ? void 0 : _headerTreeMap$get.customRanges;
+		const dynamic = fieldRanges === null || fieldRanges === void 0 ? void 0 : fieldRanges.some((range) => {
+			var _range$properties, _range$properties2, _range$properties3;
+			return range.rangeType === _univerjs_core.CustomRangeType.FIELD && ((_range$properties = range.properties) === null || _range$properties === void 0 ? void 0 : _range$properties.locked) !== _univerjs_core.BooleanNumber.TRUE && (((_range$properties2 = range.properties) === null || _range$properties2 === void 0 ? void 0 : _range$properties2.fieldType) === "PAGE" || ((_range$properties3 = range.properties) === null || _range$properties3 === void 0 ? void 0 : _range$properties3.fieldType) === "NUMPAGES");
+		});
+		const key = dynamic ? JSON.stringify([
+			sectionId,
+			pageNumber,
+			pageWidth,
+			marginLeft,
+			marginRight,
+			ctx.hasNumPagesFields ? ctx.fieldPageCount : void 0
+		]) : pageWidth;
+		if (typeof key === "string") page.headerLayoutKey = key;
+		if ((_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.has(key)) {
 			var _skeHeaders$get2;
-			header = (_skeHeaders$get2 = skeHeaders.get(headerId)) === null || _skeHeaders$get2 === void 0 ? void 0 : _skeHeaders$get2.get(pageWidth);
+			header = (_skeHeaders$get2 = skeHeaders.get(headerId)) === null || _skeHeaders$get2 === void 0 ? void 0 : _skeHeaders$get2.get(key);
 		} else if (headerTreeMap && headerTreeMap.has(headerId)) {
-			header = _createSkeletonHeaderFooter(ctx, headerTreeMap.get(headerId), sectionBreakConfig, skeletonResourceReference, headerId, true);
+			const previousFieldContext = ctx.headerFooterFieldContext;
+			ctx.headerFooterFieldContext = dynamic ? {
+				pageNumber,
+				pageCount: ctx.fieldPageCount
+			} : void 0;
+			try {
+				header = _createSkeletonHeaderFooter(ctx, headerTreeMap.get(headerId), sectionBreakConfig, skeletonResourceReference, headerId, true);
+				header.fieldsResolved = Boolean(dynamic);
+			} finally {
+				ctx.headerFooterFieldContext = previousFieldContext;
+			}
 			const widths = skeHeaders.get(headerId) ?? /* @__PURE__ */ new Map();
-			widths.set(pageWidth, header);
+			widths.set(key, header);
 			skeHeaders.set(headerId, widths);
 		}
 		page.headerId = headerId;
 	}
 	if (footerId) {
-		var _skeFooters$get;
-		if ((_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.has(pageWidth)) {
+		var _footerTreeMap$get, _skeFooters$get;
+		const fieldRanges = footerTreeMap === null || footerTreeMap === void 0 || (_footerTreeMap$get = footerTreeMap.get(footerId)) === null || _footerTreeMap$get === void 0 || (_footerTreeMap$get = _footerTreeMap$get.getBody()) === null || _footerTreeMap$get === void 0 ? void 0 : _footerTreeMap$get.customRanges;
+		const dynamic = fieldRanges === null || fieldRanges === void 0 ? void 0 : fieldRanges.some((range) => {
+			var _range$properties4, _range$properties5, _range$properties6;
+			return range.rangeType === _univerjs_core.CustomRangeType.FIELD && ((_range$properties4 = range.properties) === null || _range$properties4 === void 0 ? void 0 : _range$properties4.locked) !== _univerjs_core.BooleanNumber.TRUE && (((_range$properties5 = range.properties) === null || _range$properties5 === void 0 ? void 0 : _range$properties5.fieldType) === "PAGE" || ((_range$properties6 = range.properties) === null || _range$properties6 === void 0 ? void 0 : _range$properties6.fieldType) === "NUMPAGES");
+		});
+		const key = dynamic ? JSON.stringify([
+			sectionId,
+			pageNumber,
+			pageWidth,
+			marginLeft,
+			marginRight,
+			ctx.hasNumPagesFields ? ctx.fieldPageCount : void 0
+		]) : pageWidth;
+		if (typeof key === "string") page.footerLayoutKey = key;
+		if ((_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.has(key)) {
 			var _skeFooters$get2;
-			footer = (_skeFooters$get2 = skeFooters.get(footerId)) === null || _skeFooters$get2 === void 0 ? void 0 : _skeFooters$get2.get(pageWidth);
+			footer = (_skeFooters$get2 = skeFooters.get(footerId)) === null || _skeFooters$get2 === void 0 ? void 0 : _skeFooters$get2.get(key);
 		} else if (footerTreeMap && footerTreeMap.has(footerId)) {
-			footer = _createSkeletonHeaderFooter(ctx, footerTreeMap.get(footerId), sectionBreakConfig, skeletonResourceReference, footerId, false);
+			const previousFieldContext = ctx.headerFooterFieldContext;
+			ctx.headerFooterFieldContext = dynamic ? {
+				pageNumber,
+				pageCount: ctx.fieldPageCount
+			} : void 0;
+			try {
+				footer = _createSkeletonHeaderFooter(ctx, footerTreeMap.get(footerId), sectionBreakConfig, skeletonResourceReference, footerId, false);
+				footer.fieldsResolved = Boolean(dynamic);
+			} finally {
+				ctx.headerFooterFieldContext = previousFieldContext;
+			}
 			const widths = skeFooters.get(footerId) ?? /* @__PURE__ */ new Map();
-			widths.set(pageWidth, footer);
+			widths.set(key, footer);
 			skeFooters.set(footerId, widths);
 		}
 		page.footerId = footerId;
@@ -17079,6 +17147,29 @@ function createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference,
 	page.originMarginBottom = marginBottom;
 	page.marginTop = _getVerticalMargin(marginTop, header);
 	page.marginBottom = _getVerticalMargin(marginBottom, footer);
+	if (ctx.headerFooterMinimumMargins) for (const [id, layoutKey, margin] of [[
+		headerId,
+		page.headerLayoutKey,
+		"marginTop"
+	], [
+		footerId,
+		page.footerLayoutKey,
+		"marginBottom"
+	]]) {
+		if (layoutKey == null) continue;
+		const key = JSON.stringify([
+			id,
+			sectionId,
+			pageNumber,
+			pageWidth,
+			marginLeft,
+			marginRight,
+			margin
+		]);
+		const maximum = Math.max(page[margin], ctx.headerFooterMinimumMargins.get(key) ?? 0);
+		ctx.headerFooterMinimumMargins.set(key, maximum);
+		if (ctx.fieldCountCycle) page[margin] = maximum;
+	}
 	const sections = page.sections;
 	const lastSection = sections[sections.length - 1];
 	const { marginTop: curPageMT, marginBottom: curPageMB, marginLeft: curPageML, marginRight: curPageMR } = page;
@@ -18278,8 +18369,8 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 	const initialFootnoteTop = lastPage.type === 4 && lastPage.pageNumber === 1 && columnInfo.index === ((_ctx$footnoteFirstCol = ctx.footnoteFirstColumn) === null || _ctx$footnoteFirstCol === void 0 ? void 0 : _ctx$footnoteFirstCol.index) ? ctx.footnoteFirstColumn.top : 0;
 	const lineTop = preLineHeight + ((preLine === null || preLine === void 0 ? void 0 : preLine.top) ?? initialFootnoteTop);
 	const { pageWidth, headerId, footerId } = lastPage;
-	const headerPage = skeHeaders === null || skeHeaders === void 0 || (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
-	const footerPage = skeFooters === null || skeFooters === void 0 || (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+	const headerPage = skeHeaders === null || skeHeaders === void 0 || (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(lastPage.headerLayoutKey ?? pageWidth);
+	const footerPage = skeFooters === null || skeFooters === void 0 || (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(lastPage.footerLayoutKey ?? pageWidth);
 	let needOpenNewPageByTableLayout = false;
 	const { deferredInlineGroupAnchorDrawings, deferredTopBottomAnchorDrawings } = _positionLineDrawings(ctx, glyphGroup, column, lastPage, paragraphConfig, lineTop, lineHeight, paragraphAnchorLeft, hasInlineCustomBlock, isParagraphFirstShapedText);
 	if (skeTablesInParagraph != null && skeTablesInParagraph.length > 0) {
@@ -19485,7 +19576,7 @@ function documentSkeletonTableIterator(pages, options = {}) {
 			unitId
 		});
 		const rootPageDocumentLeft = docsLeft + rootPage.marginLeft;
-		const headerPage = rootPage.headerId == null ? void 0 : skeHeaders === null || skeHeaders === void 0 || (_skeHeaders$get = skeHeaders.get(rootPage.headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(rootPage.pageWidth);
+		const headerPage = rootPage.headerId == null ? void 0 : skeHeaders === null || skeHeaders === void 0 || (_skeHeaders$get = skeHeaders.get(rootPage.headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(rootPage.headerLayoutKey ?? rootPage.pageWidth);
 		if (headerPage != null) collectPageTables({
 			contexts,
 			docsLeft,
@@ -19500,7 +19591,7 @@ function documentSkeletonTableIterator(pages, options = {}) {
 			tableCellInsetX,
 			unitId
 		});
-		const footerPage = rootPage.footerId == null ? void 0 : skeFooters === null || skeFooters === void 0 || (_skeFooters$get = skeFooters.get(rootPage.footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(rootPage.pageWidth);
+		const footerPage = rootPage.footerId == null ? void 0 : skeFooters === null || skeFooters === void 0 || (_skeFooters$get = skeFooters.get(rootPage.footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(rootPage.footerLayoutKey ?? rootPage.pageWidth);
 		if (footerPage != null) collectPageTables({
 			contexts,
 			docsLeft,
@@ -21096,6 +21187,26 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig) {
 			for (const glyph of shapedGlyphs) if (isCjkLeftAlignedPunctuation(glyph.content) || isCjkRightAlignedPunctuation(glyph.content) || isCjkCenterAlignedPunctuation(glyph.content)) glyph.adjustability.shrinkability = [0, 0];
 		}
 		if (((_sectionBreakConfig$r5 = sectionBreakConfig.renderConfig) === null || _sectionBreakConfig$r5 === void 0 ? void 0 : _sectionBreakConfig$r5.preservePunctuationSpacing) !== _univerjs_core.BooleanNumber.TRUE && (!traditionalLayout || fixedPunctuationPairs)) punctuationSpaceAdjustment(shapedGlyphs, fixedPunctuationPairs);
+		if (ctx.headerFooterFieldContext) {
+			let index = paragraphNode.contentStartIndex + last;
+			for (let glyphIndex = 0; glyphIndex < shapedGlyphs.length; glyphIndex++) {
+				var _viewModel$getBody3, _glyph$fontStyle, _glyph$ts2;
+				const glyph = shapedGlyphs[glyphIndex];
+				const resolved = resolveHeaderFooterFieldGlyph(glyph, index, index + glyph.count - 1, ((_viewModel$getBody3 = viewModel.getBody()) === null || _viewModel$getBody3 === void 0 ? void 0 : _viewModel$getBody3.customRanges) ?? [], ctx.headerFooterFieldContext.pageNumber, ctx.headerFooterFieldContext.pageCount);
+				index += glyph.count;
+				if (resolved === glyph) continue;
+				const font = (_glyph$fontStyle = glyph.fontStyle) === null || _glyph$fontStyle === void 0 ? void 0 : _glyph$fontStyle.fontString;
+				const widthDelta = resolved.content && font ? (FontCache.getMeasureText(resolved.content, font).width - FontCache.getMeasureText(glyph.content, font).width) * getTextHorizontalScale((_glyph$ts2 = glyph.ts) === null || _glyph$ts2 === void 0 ? void 0 : _glyph$ts2.sa) : -glyph.width;
+				shapedGlyphs[glyphIndex] = {
+					...resolved,
+					width: Math.max(0, glyph.width + widthDelta),
+					bBox: {
+						...glyph.bBox,
+						width: Math.max(0, glyph.bBox.width + widthDelta)
+					}
+				};
+			}
+		}
 		appendShapedText(shapedTextList, shapedGlyphs, bk.type, paragraphStyle.fixedTabStops === _univerjs_core.BooleanNumber.TRUE);
 		last = bk.position;
 	}
@@ -23203,6 +23314,8 @@ function serializePaginatedContinuationCheckpoint(page) {
 		sectionId: page.sectionId,
 		headerId: page.headerId,
 		footerId: page.footerId,
+		headerLayoutKey: page.headerLayoutKey,
+		footerLayoutKey: page.footerLayoutKey,
 		pageWidth: page.pageWidth,
 		pageHeight: page.pageHeight,
 		pageOrient: page.pageOrient,
@@ -23279,7 +23392,7 @@ function getSegmentPageFromRelativePath(skeletonData, segmentPageIndex, path) {
 	const rootPage = skeletonData.pages[segmentPageIndex];
 	if (rootPage == null) return null;
 	const { headerId, footerId, pageWidth } = rootPage;
-	const segmentPages = [headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(pageWidth), footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(pageWidth)];
+	const segmentPages = [headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(rootPage.headerLayoutKey ?? pageWidth), footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(rootPage.footerLayoutKey ?? pageWidth)];
 	for (const segmentPage of segmentPages) {
 		if (segmentPage == null) continue;
 		const page = getPageFromPath({
@@ -23310,6 +23423,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 		_defineProperty(this, "_languageDetector", LanguageDetector.getInstance());
 		_defineProperty(this, "_initialWidth", 0);
 		_defineProperty(this, "_paginationMetrics", null);
+		_defineProperty(this, "_completedPageCount", void 0);
 		_defineProperty(this, "_lastCompleteSkeletonData", null);
 		_defineProperty(this, "_pendingInvalidationAnchor", null);
 		_defineProperty(this, "_layoutGeneration", 0);
@@ -23334,6 +23448,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 		this._layoutPageMaterialized$.complete();
 		this._skeletonData = null;
 		this._lastCompleteSkeletonData = null;
+		this._completedPageCount = void 0;
 		this._pendingInvalidationAnchor = null;
 		this._externalLayoutProgress = null;
 		this._externalProtectedPages = null;
@@ -23351,14 +23466,21 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 	* PS: This method has significant impact on performance.
 	*/
 	calculate(bounds) {
+		var _this$_skeletonData;
 		if (!this.dirty) return;
 		this.cancelIncrementalLayout();
 		this._externalLayoutProgress = null;
 		this._externalProtectedPages = null;
 		this._externalProtectedContinuousLayout = null;
-		const ctx = this._prepareLayoutContext();
-		this._skeletonData = this._createSkeleton(ctx, bounds);
+		let ctx = this._prepareLayoutContext();
+		while (true) {
+			this._skeletonData = this._createSkeleton(ctx, bounds);
+			const retry = this._prepareFieldCountRetry(ctx);
+			if (retry == null) break;
+			ctx = retry;
+		}
 		this._lastCompleteSkeletonData = this._skeletonData;
+		this._completedPageCount = (_this$_skeletonData = this._skeletonData) === null || _this$_skeletonData === void 0 ? void 0 : _this$_skeletonData.pages.length;
 		this._pendingInvalidationAnchor = null;
 		this._paginationMetrics = ctx.paginationMetrics ?? null;
 		this._dirty$.next(true);
@@ -23432,6 +23554,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			lastPublishedBlockCount: incrementalStart.processedBlockCount,
 			publicationRevision: 0,
 			reuseUnaffectedTail: (options === null || options === void 0 ? void 0 : options.reuseUnaffectedTail) !== false,
+			paginationRevision: 0,
 			allowMetadataOnlyStructuralTailReuse: (options === null || options === void 0 ? void 0 : options.allowMetadataOnlyStructuralTailReuse) === true,
 			reusedTail: false,
 			tailConvergencePageCount: incrementalStart.ctx.skeleton.pages.length,
@@ -23478,7 +23601,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 		const hasEarlierOverlappingRange = anchorPageIndex > 0 && previousSkeleton.pages.slice(0, anchorPageIndex).some((page) => previousAnchor >= page.st && previousAnchor <= page.ed);
 		const anchorBlockOwnsTable = blocks[anchorBlockIndex].block.children.some((child) => child.nodeType === _univerjs_core.DataStreamTreeNodeType.TABLE && anchor >= child.startIndex && anchor <= child.endIndex);
 		const canResumePlainParagraph = blocks[anchorBlockIndex].block.nodeType === _univerjs_core.DataStreamTreeNodeType.PARAGRAPH && blocks[anchorBlockIndex].block.children.length === 0;
-		if (mode === "paginated" && reuseInteractionPagePrefix && canResumePlainParagraph && !((_previousSkeleton$pag = previousSkeleton.pages[anchorPageIndex]) === null || _previousSkeleton$pag === void 0 || (_previousSkeleton$pag = _previousSkeleton$pag.notes) === null || _previousSkeleton$pag === void 0 ? void 0 : _previousSkeleton$pag.length)) {
+		if (mode === "paginated" && reuseInteractionPagePrefix && invalidation != null && canResumePlainParagraph && !((_previousSkeleton$pag = previousSkeleton.pages[anchorPageIndex]) === null || _previousSkeleton$pag === void 0 || (_previousSkeleton$pag = _previousSkeleton$pag.notes) === null || _previousSkeleton$pag === void 0 ? void 0 : _previousSkeleton$pag.length)) {
 			const interactionPreviousAnchor = mapCurrentOffsetToPrevious(anchor, invalidation);
 			const interactionPageIndex = interactionSkeleton == null ? -1 : this._findBodyPageIndex(interactionSkeleton.pages, interactionPreviousAnchor);
 			const paginatedPrefix = this._preparePaginatedParagraphPrefix(ctx, interactionSkeleton ?? previousSkeleton, blocks[anchorBlockIndex], anchorBlockIndex, interactionPageIndex, invalidation);
@@ -23808,11 +23931,13 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 		const publishedPageCount = state.mode === "continuous" ? pageCount : state.complete ? state.reusedTail ? pageCount : shouldPublishPriority ? Math.max(state.lastPublishedPageCount, priorityPublishedPageCount) : Math.min(pageCount, state.lastPublishedPageCount + 1) : shouldPublishPriority ? Math.max(state.lastPublishedPageCount, priorityPublishedPageCount) : Math.min(stableComputedPageCount, state.lastPublishedPageCount + 1);
 		let didPublish = false;
 		let didPublishAnchor = false;
-		if (!state.cancelled && canPublish && (!suppressPreAnchorPublication || shouldPublishPriority || state.complete)) {
+		if (!state.cancelled && canPublish && (state.ctx.fieldCountCandidates == null || state.complete) && (!suppressPreAnchorPublication || shouldPublishPriority || state.complete)) {
 			if (state.mode === "paginated") this._finalizePaginatedPagesForPublication(state, publishedPageCount);
 			const isFinalPublication = state.complete && publishedPageCount >= pageCount;
 			if (isFinalPublication) {
+				var _state$ctx$skeleton;
 				this._lastCompleteSkeletonData = state.ctx.skeleton;
+				this._completedPageCount = (_state$ctx$skeleton = state.ctx.skeleton) === null || _state$ctx$skeleton === void 0 ? void 0 : _state$ctx$skeleton.pages.length;
 				this._pendingInvalidationAnchor = null;
 			}
 			this._skeletonData = isFinalPublication ? state.ctx.skeleton : !this._isolateIncrementalPublications && state.mode === "paginated" ? this._createSharedPublishablePartialSkeleton(state, publishedPageCount) : this._createPublishablePartialSkeleton(state, publishedPageCount);
@@ -23954,9 +24079,9 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 	* page or block range while the external executor publishes a newer tail.
 	*/
 	beginExternalLayout(options) {
-		var _this$_skeletonData;
+		var _this$_skeletonData2;
 		this.cancelIncrementalLayout();
-		const pages = ((_this$_skeletonData = this._skeletonData) === null || _this$_skeletonData === void 0 ? void 0 : _this$_skeletonData.pages) ?? [];
+		const pages = ((_this$_skeletonData2 = this._skeletonData) === null || _this$_skeletonData2 === void 0 ? void 0 : _this$_skeletonData2.pages) ?? [];
 		const protectedRange = options.protectedRange;
 		const protectedPageRange = (protectedRange === null || protectedRange === void 0 ? void 0 : protectedRange.mode) === "paginated" ? protectedRange : void 0;
 		if (protectedPageRange == null) this._externalProtectedPages = null;
@@ -24113,6 +24238,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			if (progress.complete) {
 				setPageParent(skeletonData.pages, skeletonData);
 				this._lastCompleteSkeletonData = skeletonData;
+				this._completedPageCount = skeletonData === null || skeletonData === void 0 ? void 0 : skeletonData.pages.length;
 				this._pendingInvalidationAnchor = null;
 				this._externalProtectedContinuousLayout = null;
 			}
@@ -24182,6 +24308,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			if (publicationToApply.resources.drawingAnchor != null) skeletonData.drawingAnchor = hydrateDrawingAnchors(publicationToApply.resources.drawingAnchor);
 			setPageParent(skeletonData.pages, skeletonData);
 			this._lastCompleteSkeletonData = skeletonData;
+			this._completedPageCount = skeletonData === null || skeletonData === void 0 ? void 0 : skeletonData.pages.length;
 			this._pendingInvalidationAnchor = null;
 			this._externalProtectedPages = null;
 			this._externalProtectedContinuousLayout = null;
@@ -24391,8 +24518,8 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 		};
 	}
 	findBodyPageIndexByCharIndex(charIndex) {
-		var _this$_skeletonData2;
-		return this._findBodyPageIndex(((_this$_skeletonData2 = this._skeletonData) === null || _this$_skeletonData2 === void 0 ? void 0 : _this$_skeletonData2.pages) ?? [], charIndex);
+		var _this$_skeletonData3;
+		return this._findBodyPageIndex(((_this$_skeletonData3 = this._skeletonData) === null || _this$_skeletonData3 === void 0 ? void 0 : _this$_skeletonData3.pages) ?? [], charIndex);
 	}
 	findNodeByCharIndex(charIndex, segmentId = "", segmentPageIndex = -1) {
 		const nodes = this._findNodeByIndex(charIndex, segmentId, segmentPageIndex);
@@ -24411,12 +24538,12 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			const { headerId, footerId, pageWidth } = skePage;
 			if (pageType === 1) {
 				var _skeHeaders$get;
-				const skeHeader = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+				const skeHeader = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(skePage.headerLayoutKey ?? pageWidth);
 				if (skeHeader == null) return;
 				else skePage = skeHeader;
 			} else if (pageType === 2) {
 				var _skeFooters$get;
-				const skeFooter = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+				const skeFooter = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(skePage.footerLayoutKey ?? pageWidth);
 				if (skeFooter == null) return;
 				else skePage = skeFooter;
 			}
@@ -24524,9 +24651,9 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			let exactMatch = null;
 			if (editArea === "HEADER" || editArea === "FOOTER") {
 				var _skeHeaders$get2, _skeFooters$get2;
-				const headerSke = (_skeHeaders$get2 = skeHeaders.get(headerId)) === null || _skeHeaders$get2 === void 0 ? void 0 : _skeHeaders$get2.get(pageWidth);
+				const headerSke = (_skeHeaders$get2 = skeHeaders.get(headerId)) === null || _skeHeaders$get2 === void 0 ? void 0 : _skeHeaders$get2.get(page.headerLayoutKey ?? pageWidth);
 				if (headerSke) exactMatch = this._collectNearestNode(headerSke, 1, page, headerId, pi, cache, x, y, pageLength);
-				const footerSke = (_skeFooters$get2 = skeFooters.get(footerId)) === null || _skeFooters$get2 === void 0 ? void 0 : _skeFooters$get2.get(pageWidth);
+				const footerSke = (_skeFooters$get2 = skeFooters.get(footerId)) === null || _skeFooters$get2 === void 0 ? void 0 : _skeFooters$get2.get(page.footerLayoutKey ?? pageWidth);
 				if (footerSke) exactMatch = exactMatch ?? this._collectNearestNode(footerSke, 2, page, footerId, pi, cache, x, y, pageLength);
 			} else exactMatch = this._collectNearestNode(page, 0, page, "", pi, cache, x, y, pageLength);
 			if (exactMatch) return exactMatch;
@@ -24548,9 +24675,9 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				const { headerId, footerId, pageWidth } = page;
 				if (segmentId !== "" && !this._docViewModel.getNoteTreeMap().has(segmentId)) {
 					var _skeHeaders$get3, _skeFooters$get3;
-					const headerSke = (_skeHeaders$get3 = skeHeaders.get(headerId)) === null || _skeHeaders$get3 === void 0 ? void 0 : _skeHeaders$get3.get(pageWidth);
+					const headerSke = (_skeHeaders$get3 = skeHeaders.get(headerId)) === null || _skeHeaders$get3 === void 0 ? void 0 : _skeHeaders$get3.get(page.headerLayoutKey ?? pageWidth);
 					if (headerSke) exactMatch = this._collectNearestNode(headerSke, 1, page, headerId, pi, cache, x, y, pageLength);
-					const footerSke = (_skeFooters$get3 = skeFooters.get(footerId)) === null || _skeFooters$get3 === void 0 ? void 0 : _skeFooters$get3.get(pageWidth);
+					const footerSke = (_skeFooters$get3 = skeFooters.get(footerId)) === null || _skeFooters$get3 === void 0 ? void 0 : _skeFooters$get3.get(page.footerLayoutKey ?? pageWidth);
 					if (footerSke) exactMatch = exactMatch ?? this._collectNearestNode(footerSke, 2, page, footerId, pi, cache, x, y, pageLength);
 				} else exactMatch = this._collectNearestNode(page, 0, page, "", pi, cache, x, y, pageLength);
 				if (exactMatch) return exactMatch;
@@ -24565,7 +24692,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 						continue;
 					}
 					const { headerId, pageWidth } = page;
-					const segmentSke = segmentId === headerId ? (_skeHeaders$get4 = skeHeaders.get(segmentId)) === null || _skeHeaders$get4 === void 0 ? void 0 : _skeHeaders$get4.get(pageWidth) : (_skeFooters$get4 = skeFooters.get(segmentId)) === null || _skeFooters$get4 === void 0 ? void 0 : _skeFooters$get4.get(pageWidth);
+					const segmentSke = segmentId === headerId ? (_skeHeaders$get4 = skeHeaders.get(segmentId)) === null || _skeHeaders$get4 === void 0 ? void 0 : _skeHeaders$get4.get(page.headerLayoutKey ?? pageWidth) : (_skeFooters$get4 = skeFooters.get(segmentId)) === null || _skeFooters$get4 === void 0 ? void 0 : _skeFooters$get4.get(page.footerLayoutKey ?? pageWidth);
 					if (segmentSke) exactMatch = this._collectNearestNode(segmentSke, segmentId === headerId ? 1 : 2, page, segmentId, segmentPage, cache, x, y, pageLength);
 				} else exactMatch = this._collectNearestNode(page, 0, page, "", pi, cache, x, y, pageLength);
 				if (exactMatch) return exactMatch;
@@ -24892,6 +25019,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 		return {
 			generation: state.generation,
 			publicationRevision: state.publicationRevision,
+			paginationRevision: state.paginationRevision,
 			didPublish,
 			didPublishAnchor,
 			publishedPageCount: state.lastPublishedPageCount,
@@ -25411,10 +25539,52 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 		}
 		for (const hSkeMap of skeleton.skeHeaders.values()) for (const page of hSkeMap.values()) updateInlineDrawingCoordsAndBorder(ctx, [page]);
 		for (const fSkeMap of skeleton.skeFooters.values()) for (const page of fSkeMap.values()) updateInlineDrawingCoordsAndBorder(ctx, [page]);
+		const retry = this._prepareFieldCountRetry(ctx);
+		if (retry != null) {
+			state.paginationRevision++;
+			state.ctx = retry;
+			state.sectionIndex = 0;
+			state.paragraphIndex = 0;
+			state.sectionInitialized = false;
+			state.sectionBreakConfig = null;
+			state.layoutAnchor = null;
+			state.laidOutThrough = -1;
+			state.stableLaidOutThrough = -1;
+			state.processedBlockCount = 0;
+			state.pendingTableBuild = null;
+			state.pendingSlicedTableBuild = null;
+			state.pendingParagraphCheckpoint = null;
+			state.stablePageCount = 0;
+			state.finalizedPageCount = 0;
+			state.lastPublishedPageCount = 0;
+			state.lastPublishedBlockCount = 0;
+			state.anchorPublished = false;
+			state.reuseUnaffectedTail = false;
+			state.reusedTail = false;
+			state.tailConvergencePageCount = 0;
+			state.interactionPageTail = null;
+			state.interactionPageComplete = false;
+			state.interactionWindowComplete = false;
+			state.interactionWindowResume = null;
+			return;
+		}
 		setPageParent(skeleton.pages, skeleton);
 		state.complete = true;
 		state.stableLaidOutThrough = state.laidOutThrough;
 	}
+	getCompletedPageCount() {
+		return this._completedPageCount;
+	}
+	_prepareFieldCountRetry(ctx) {
+		if (!ctx.hasNumPagesFields || ctx.fieldPageCount === ctx.skeleton.pages.length) return null;
+		const retry = this._prepareLayoutContext();
+		retry.fieldPageCount = ctx.skeleton.pages.length;
+		retry.headerFooterMinimumMargins = ctx.headerFooterMinimumMargins;
+		retry.fieldCountCandidates = ctx.fieldCountCandidates ?? /* @__PURE__ */ new Set();
+		if (ctx.fieldPageCount != null) retry.fieldCountCandidates.add(ctx.fieldPageCount);
+		retry.fieldCountCycle = ctx.fieldCountCycle || retry.fieldCountCandidates.has(retry.fieldPageCount);
+		return retry;
+	}
 	_prepareLayoutContext() {
 		var _ctx$noteReferences;
 		const viewModel = this.getViewModel();
@@ -25446,7 +25616,17 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			skeListLevel,
 			drawingAnchor
 		};
+		const hasNumPagesFields = [...headerTreeMap.values(), ...footerTreeMap.values()].some((story) => {
+			var _story$getBody;
+			return (_story$getBody = story.getBody()) === null || _story$getBody === void 0 || (_story$getBody = _story$getBody.customRanges) === null || _story$getBody === void 0 ? void 0 : _story$getBody.some((range) => {
+				var _range$properties;
+				return range.rangeType === _univerjs_core.CustomRangeType.FIELD && ((_range$properties = range.properties) === null || _range$properties === void 0 ? void 0 : _range$properties.fieldType) === "NUMPAGES" && range.properties.locked !== _univerjs_core.BooleanNumber.TRUE;
+			});
+		});
 		const ctx = {
+			fieldPageCount: this.getCompletedPageCount(),
+			hasNumPagesFields,
+			headerFooterMinimumMargins: hasNumPagesFields ? /* @__PURE__ */ new Map() : void 0,
 			viewModel,
 			dataModel,
 			noteReferences: documentStyle.documentFlavor === _univerjs_core.DocumentFlavor.TRADITIONAL ? resolveNoteReferences(dataModel.getSnapshot()) : void 0,
@@ -25642,8 +25822,8 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			let segmentPage = page;
 			if (segmentId) {
 				var _skeHeaders$get5, _skeFooters$get5, _page$notes3;
-				const maybeHeaderSke = (_skeHeaders$get5 = skeHeaders.get(segmentId)) === null || _skeHeaders$get5 === void 0 ? void 0 : _skeHeaders$get5.get(pageWidth);
-				const maybeFooterSke = (_skeFooters$get5 = skeFooters.get(segmentId)) === null || _skeFooters$get5 === void 0 ? void 0 : _skeFooters$get5.get(pageWidth);
+				const maybeHeaderSke = (_skeHeaders$get5 = skeHeaders.get(segmentId)) === null || _skeHeaders$get5 === void 0 ? void 0 : _skeHeaders$get5.get(page.headerLayoutKey ?? pageWidth);
+				const maybeFooterSke = (_skeFooters$get5 = skeFooters.get(segmentId)) === null || _skeFooters$get5 === void 0 ? void 0 : _skeFooters$get5.get(page.footerLayoutKey ?? pageWidth);
 				const note = (_page$notes3 = page.notes) === null || _page$notes3 === void 0 ? void 0 : _page$notes3.find((fragment) => fragment.noteId === segmentId && fragment.page.st <= charIndex && charIndex <= fragment.page.ed);
 				if (note) segmentPage = note.page;
 				else if (maybeHeaderSke) segmentPage = maybeHeaderSke;
@@ -28781,22 +28961,6 @@ function getVisibleContinuousLineRange(lines, viewportTop, viewportBottom, flowT
 		end: low
 	};
 }
-function resolveHeaderFooterFieldGlyph(glyph, startIndex, endIndex, customRanges, pageNumber, pageCount) {
-	var _fieldRange$propertie;
-	if (!glyph.content || glyph.raw === _univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_START || glyph.raw === _univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_END) return glyph;
-	const fieldRange = customRanges.find((customRange) => {
-		var _customRange$properti;
-		return customRange.startIndex <= startIndex && customRange.endIndex >= endIndex && typeof ((_customRange$properti = customRange.properties) === null || _customRange$properti === void 0 ? void 0 : _customRange$properti.fieldType) === "string";
-	});
-	const fieldType = fieldRange === null || fieldRange === void 0 || (_fieldRange$propertie = fieldRange.properties) === null || _fieldRange$propertie === void 0 || (_fieldRange$propertie = _fieldRange$propertie.fieldType) === null || _fieldRange$propertie === void 0 ? void 0 : _fieldRange$propertie.toUpperCase();
-	if (!fieldRange || fieldType !== "PAGE" && fieldType !== "NUMPAGES") return glyph;
-	let content = "";
-	if (startIndex === fieldRange.startIndex + 1) content = String(fieldType === "PAGE" ? pageNumber : pageCount);
-	return content === glyph.content ? glyph : {
-		...glyph,
-		content
-	};
-}
 function resolveHeaderFooterFieldGlyphGroup(divide, context) {
 	var _context$viewModel;
 	const { glyphGroup } = divide;
@@ -29024,7 +29188,7 @@ var Documents = class Documents extends DocComponent {
 				this._drawTable(ctx, page, skeTables, extensions, backgroundExtension, preTextBackgroundExtensions, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale);
 				ctx.restore();
 			}
-			const headerSkeletonPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+			const headerSkeletonPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(page.headerLayoutKey ?? pageWidth);
 			const headerAlignOffsetNoAngle = Vector2.create(horizontalOffsetNoAngle, (headerSkeletonPage === null || headerSkeletonPage === void 0 ? void 0 : headerSkeletonPage.marginTop) ?? 0);
 			if (headerSkeletonPage) this._drawHeaderFooter(headerSkeletonPage, ctx, extensions, backgroundExtension, preTextBackgroundExtensions, glyphExtensionsExcludeBackground, headerAlignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale, page, true, pages.length, void 0, headerFooterOpacity);
 			ctx.save();
@@ -29038,7 +29202,7 @@ var Documents = class Documents extends DocComponent {
 				var _this$getSkeleton6;
 				this._drawHeaderFooter(note.page, ctx, extensions, backgroundExtension, preTextBackgroundExtensions, glyphExtensionsExcludeBackground, Vector2.create(horizontalOffsetNoAngle + note.left - page.marginLeft, note.top), centerAngle, vertexAngle, renderConfig, parentScale, page, false, pages.length, "kind" in note ? ((_this$getSkeleton6 = this.getSkeleton()) === null || _this$getSkeleton6 === void 0 || (_this$getSkeleton6 = _this$getSkeleton6.getViewModel().getSnapshot().noteSettings) === null || _this$getSkeleton6 === void 0 || (_this$getSkeleton6 = _this$getSkeleton6[note.noteType ?? "footnote"]) === null || _this$getSkeleton6 === void 0 || (_this$getSkeleton6 = _this$getSkeleton6[note.kind]) === null || _this$getSkeleton6 === void 0 ? void 0 : _this$getSkeleton6.customRanges) ?? [] : void 0);
 			}
-			const footerSkeletonPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+			const footerSkeletonPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(page.footerLayoutKey ?? pageWidth);
 			if (footerSkeletonPage) {
 				const footerAlignOffsetNoAngle = Vector2.create(horizontalOffsetNoAngle, page.pageHeight - (footerSkeletonPage === null || footerSkeletonPage === void 0 ? void 0 : footerSkeletonPage.height) - footerSkeletonPage.marginBottom);
 				this._drawHeaderFooter(footerSkeletonPage, ctx, extensions, backgroundExtension, preTextBackgroundExtensions, glyphExtensionsExcludeBackground, footerAlignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale, page, false, pages.length, void 0, headerFooterOpacity);
@@ -29642,7 +29806,7 @@ var Documents = class Documents extends DocComponent {
 		const skeleton = this.getSkeleton();
 		const viewModel = typeof (skeleton === null || skeleton === void 0 ? void 0 : skeleton.getViewModel) === "function" ? skeleton.getViewModel().getSelfOrHeaderFooterViewModel(page.segmentId) : void 0;
 		const fieldContext = {
-			customRanges: customRangesOverride ?? (viewModel === null || viewModel === void 0 || (_viewModel$getBody = viewModel.getBody()) === null || _viewModel$getBody === void 0 ? void 0 : _viewModel$getBody.customRanges) ?? [],
+			customRanges: page.fieldsResolved ? [] : customRangesOverride ?? (viewModel === null || viewModel === void 0 || (_viewModel$getBody = viewModel.getBody()) === null || _viewModel$getBody === void 0 ? void 0 : _viewModel$getBody.customRanges) ?? [],
 			pageNumber: parentPage.pageNumber,
 			pageCount,
 			viewModel
@@ -35365,7 +35529,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "1.0.2";
+var version = "1.0.4";
 
 //#endregion
 //#region src/config/config.ts
@@ -40036,6 +40200,7 @@ var DocumentLayoutSession = class extends _univerjs_core.Disposable {
 		_defineProperty(this, "_viewModel", void 0);
 		_defineProperty(this, "_skeleton", void 0);
 		_defineProperty(this, "_lastPublishedPageCount", 0);
+		_defineProperty(this, "_paginationRevision", 0);
 		_defineProperty(this, "_layoutReason", "initial");
 		_defineProperty(this, "_didPublishEditAnchor", false);
 		_defineProperty(this, "_continuousPageSnapshot", null);
@@ -40051,6 +40216,7 @@ var DocumentLayoutSession = class extends _univerjs_core.Disposable {
 		var _options$invalidation;
 		this._lastPublishedPageCount = 0;
 		this._layoutReason = (options === null || options === void 0 ? void 0 : options.reason) ?? "initial";
+		this._paginationRevision = 0;
 		this._didPublishEditAnchor = false;
 		this._publishedHeaderPages.clear();
 		this._publishedFooterPages.clear();
@@ -40131,6 +40297,11 @@ var DocumentLayoutSession = class extends _univerjs_core.Disposable {
 	}
 	_collectPublications(initialProgress) {
 		let progress = initialProgress;
+		if ((progress.paginationRevision ?? 0) !== this._paginationRevision) {
+			this._paginationRevision = progress.paginationRevision ?? 0;
+			this._lastPublishedPageCount = 0;
+			this._didPublishEditAnchor = false;
+		}
 		if (!progress.didPublish) return {
 			progress,
 			publication: null