@univerjs/engine-render 1.0.0-alpha.1 → 1.0.0-alpha.3

package/lib/cjs/index.js

@@ -1,11 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 //#region \0rolldown/runtime.js
-var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
 	for (var name in all) {
@@ -19,29 +14,9 @@ var __exportAll = (all, no_symbols) => {
 	}
 	return target;
 };
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
 
 //#endregion
 let _univerjs_core = require("@univerjs/core");
-let cjk_regex = require("cjk-regex");
-cjk_regex = __toESM(cjk_regex);
 let rxjs = require("rxjs");
 let opentype_js = require("opentype.js");
 let franc_min = require("franc-min");
@@ -114,6 +89,10 @@ let CURSOR_TYPE = /* @__PURE__ */ function(CURSOR_TYPE) {
 	CURSOR_TYPE["SOUTH_WEST_RESIZE"] = "sw-resize";
 	CURSOR_TYPE["SOUTH_RESIZE"] = "s-resize";
 	CURSOR_TYPE["WEST_RESIZE"] = "w-resize";
+	CURSOR_TYPE["EAST_WEST_RESIZE"] = "ew-resize";
+	CURSOR_TYPE["NORTH_SOUTH_RESIZE"] = "ns-resize";
+	CURSOR_TYPE["NORTH_EAST_SOUTH_WEST_RESIZE"] = "nesw-resize";
+	CURSOR_TYPE["NORTH_WEST_SOUTH_EAST_RESIZE"] = "nwse-resize";
 	CURSOR_TYPE["TEXT"] = "text";
 	CURSOR_TYPE["WAIT"] = "wait";
 	CURSOR_TYPE["HELP"] = "help";
@@ -228,6 +207,7 @@ const cancelRequestFrame = (requestID, requester) => {
 };
 const createCanvasElement = () => {
 	const canvas = document.createElement("canvas");
+	canvas.dir = "ltr";
 	try {
 		canvas.style = canvas.style || {};
 	} catch (e) {
@@ -319,7 +299,7 @@ function getFontStyleString(textStyle) {
 	let bold = _univerjs_core.FontStyleType.BOLD;
 	if (textStyle.bl === 0 || textStyle.bl === void 0) bold = _univerjs_core.FontStyleType.NORMAL;
 	let originFontSize = defaultFontSize;
-	if (textStyle.fs) originFontSize = Math.ceil(textStyle.fs);
+	if (textStyle.fs) originFontSize = textStyle.fs;
 	let fontSize = originFontSize;
 	const fontFamilyResult = normalizeFontFamily(textStyle.ff, defaultFont);
 	const { va: baselineOffset } = textStyle;
@@ -343,18 +323,6 @@ function normalizeFontFamily(fontFamily, defaultFont) {
 		return family.includes(" ") ? `"${family}"` : family;
 	}).filter(Boolean).join(", ");
 }
-const CJK_LETTER_REG = cjk_regex.letters().toRegExp();
-function hasCJKText(text) {
-	return CJK_LETTER_REG.test(text);
-}
-const CJK_ALL_REG = cjk_regex.all().toRegExp();
-function hasCJK(text) {
-	return CJK_ALL_REG.test(text);
-}
-const CJK_PUNCTUATION_REG = cjk_regex.punctuations().toRegExp();
-function hasCJKPunctuation(text) {
-	return CJK_PUNCTUATION_REG.test(text);
-}
 function hasAllLatin(text) {
 	if (!/[\u0000-\u024F]/gi.exec(text)) return false;
 	return true;
@@ -943,6 +911,220 @@ _defineProperty(FontCache, "_context", void 0);
 _defineProperty(FontCache, "_fontDataMap", /* @__PURE__ */ new Map());
 _defineProperty(FontCache, "_globalFontMeasureCache", /* @__PURE__ */ new Map());
 
+//#endregion
+//#region src/basics/cjk-regexp.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+/**
+* Golden regex sources generated from `cjk-regex@3.4.0`.
+*
+* Keep these strings stable unless intentionally upgrading cjk-regex semantics. The tests
+* assert exact source equality so document CJK layout behavior does not drift through
+* manual range edits.
+*/
+const CJK_LETTER_SOURCE = String.raw`[\u1100-\u11ff\u2e80-\u2e99\u2e9b-\u2ef3\u2f00-\u2fd5\u3005\u3007\u3021-\u3029\u3038-\u303b\u3041-\u3096\u309d-\u309f\u30a1-\u30fa\u30fd-\u30ff\u3105-\u312f\u3131-\u318e\u31a0-\u31bf\u31f0-\u321e\u3260-\u327e\u32d0-\u32fe\u3300-\u3357\u3400-\u4dbf\u4e00-\u9fff\ua960-\ua97c\uac00-\ud7a3\ud7b0-\ud7c6\ud7cb-\ud7fb\uf900-\ufa6d\ufa70-\ufad9\uff66-\uff6f\uff71-\uff9d\uffa0-\uffbe\uffc2-\uffc7\uffca-\uffcf\uffd2-\uffd7\uffda-\uffdc]|[\ud840-\ud868\ud86a-\ud86d\ud86f-\ud872\ud874-\ud879\ud880-\ud883\ud885-\ud88c][\udc00-\udfff]|\ud81b[\udfe3\udff2-\udff6]|\ud82b[\udff0-\udff3\udff5-\udffb\udffd-\udffe]|\ud82c[\udc00-\udd22\udd32\udd50-\udd52\udd55\udd64-\udd67]|\ud83c[\ude00]|\ud869[\udc00-\udedf\udf00-\udfff]|\ud86e[\udc00-\udc1d\udc20-\udfff]|\ud873[\udc00-\udead\udeb0-\udfff]|\ud87a[\udc00-\udfe0\udff0-\udfff]|\ud87b[\udc00-\ude5d]|\ud87e[\udc00-\ude1d]|\ud884[\udc00-\udf4a\udf50-\udfff]|\ud88d[\udc00-\udc79]`;
+const CJK_PUNCTUATION_SOURCE = String.raw`[\u2ff0-\u3004\u3006\u3008-\u3020\u302a-\u3037\u303c-\u303f\u30a0\u30fb-\u30fc\u3190-\u319f\u31c0-\u31ef\u321f-\u325f\u327f-\u32cf\u32ff\u3358-\u33ff\ufe10-\ufe1f\ufe30-\ufe6f\uff00-\uff65\uff70\uff9e-\uff9f\uffbf-\uffc1\uffc8-\uffc9\uffd0-\uffd1\uffd8-\uffd9\uffdd-\uffef]`;
+const CJK_ALL_SOURCE = String.raw`[\u1100-\u11ff\u2e80-\u2e99\u2e9b-\u2ef3\u2f00-\u2fd5\u2ff0-\u303f\u3041-\u3096\u309d-\u30ff\u3105-\u312f\u3131-\u318e\u3190-\u4dbf\u4e00-\u9fff\ua960-\ua97c\uac00-\ud7a3\ud7b0-\ud7c6\ud7cb-\ud7fb\uf900-\ufa6d\ufa70-\ufad9\ufe10-\ufe1f\ufe30-\ufe6f\uff00-\uffef]|[\ud840-\ud868\ud86a-\ud86d\ud86f-\ud872\ud874-\ud879\ud880-\ud883\ud885-\ud88c][\udc00-\udfff]|\ud81b[\udfe3\udff2-\udff6]|\ud82b[\udff0-\udff3\udff5-\udffb\udffd-\udffe]|\ud82c[\udc00-\udd22\udd32\udd50-\udd52\udd55\udd64-\udd67]|\ud83c[\ude00]|\ud869[\udc00-\udedf\udf00-\udfff]|\ud86e[\udc00-\udc1d\udc20-\udfff]|\ud873[\udc00-\udead\udeb0-\udfff]|\ud87a[\udc00-\udfe0\udff0-\udfff]|\ud87b[\udc00-\ude5d]|\ud87e[\udc00-\ude1d]|\ud884[\udc00-\udf4a\udf50-\udfff]|\ud88d[\udc00-\udc79]`;
+const CJK_LETTER_REG = new RegExp(CJK_LETTER_SOURCE);
+const CJK_PUNCTUATION_REG = new RegExp(CJK_PUNCTUATION_SOURCE);
+const CJK_ALL_REG = new RegExp(CJK_ALL_SOURCE);
+/**
+* Golden code-point ranges generated from `cjk-regex@3.4.0` snapshots.
+*
+* These are kept alongside the regex sources so compatibility can be checked against
+* both matching behavior and `Charset.data`-style range snapshots.
+*/
+const CJK_LETTER_DATA = [
+	[4352, 4607],
+	[11904, 11929],
+	[11931, 12019],
+	[12032, 12245],
+	[12293, 12293],
+	[12295, 12295],
+	[12321, 12329],
+	[12344, 12347],
+	[12353, 12438],
+	[12445, 12447],
+	[12449, 12538],
+	[12541, 12543],
+	[12549, 12591],
+	[12593, 12686],
+	[12704, 12735],
+	[12784, 12830],
+	[12896, 12926],
+	[13008, 13054],
+	[13056, 13143],
+	[13312, 19903],
+	[19968, 40959],
+	[43360, 43388],
+	[44032, 55203],
+	[55216, 55238],
+	[55243, 55291],
+	[63744, 64109],
+	[64112, 64217],
+	[65382, 65391],
+	[65393, 65437],
+	[65440, 65470],
+	[65474, 65479],
+	[65482, 65487],
+	[65490, 65495],
+	[65498, 65500],
+	[94179, 94179],
+	[94194, 94198],
+	[110576, 110579],
+	[110581, 110587],
+	[110589, 110590],
+	[110592, 110882],
+	[110898, 110898],
+	[110928, 110930],
+	[110933, 110933],
+	[110948, 110951],
+	[127488, 127488],
+	[131072, 173791],
+	[173824, 178205],
+	[178208, 183981],
+	[183984, 191456],
+	[191472, 192093],
+	[194560, 195101],
+	[196608, 201546],
+	[201552, 210041]
+];
+const CJK_PUNCTUATION_DATA = [
+	[12272, 12292],
+	[12294, 12294],
+	[12296, 12320],
+	[12330, 12343],
+	[12348, 12351],
+	[12448, 12448],
+	[12539, 12540],
+	[12688, 12703],
+	[12736, 12783],
+	[12831, 12895],
+	[12927, 13007],
+	[13055, 13055],
+	[13144, 13311],
+	[65040, 65055],
+	[65072, 65135],
+	[65280, 65381],
+	[65392, 65392],
+	[65438, 65439],
+	[65471, 65473],
+	[65480, 65481],
+	[65488, 65489],
+	[65496, 65497],
+	[65501, 65519]
+];
+const CJK_ALL_DATA = [
+	[4352, 4607],
+	[11904, 11929],
+	[11931, 12019],
+	[12032, 12245],
+	[12272, 12351],
+	[12353, 12438],
+	[12445, 12543],
+	[12549, 12591],
+	[12593, 12686],
+	[12688, 19903],
+	[19968, 40959],
+	[43360, 43388],
+	[44032, 55203],
+	[55216, 55238],
+	[55243, 55291],
+	[63744, 64109],
+	[64112, 64217],
+	[65040, 65055],
+	[65072, 65135],
+	[65280, 65519],
+	[94179, 94179],
+	[94194, 94198],
+	[110576, 110579],
+	[110581, 110587],
+	[110589, 110590],
+	[110592, 110882],
+	[110898, 110898],
+	[110928, 110930],
+	[110933, 110933],
+	[110948, 110951],
+	[127488, 127488],
+	[131072, 173791],
+	[173824, 178205],
+	[178208, 183981],
+	[183984, 191456],
+	[191472, 192093],
+	[194560, 195101],
+	[196608, 201546],
+	[201552, 210041]
+];
+/**
+* Returns the CJK letter charset generated from `cjk-regex@3.4.0`.
+*/
+function letters() {
+	return _univerjs_core.regexp.charset(...CJK_LETTER_DATA);
+}
+/**
+* Returns the CJK punctuation charset generated from `cjk-regex@3.4.0`.
+*/
+function punctuations() {
+	return _univerjs_core.regexp.charset(...CJK_PUNCTUATION_DATA);
+}
+/**
+* Returns the combined CJK letter and punctuation charset generated from `cjk-regex@3.4.0`.
+*/
+function all() {
+	return _univerjs_core.regexp.charset(...CJK_ALL_DATA);
+}
+/**
+* Returns true when text contains CJK letters, excluding punctuation and symbols.
+*/
+function hasCJKText(text) {
+	return CJK_LETTER_REG.test(text);
+}
+/**
+* Returns true when text contains CJK letters or CJK punctuation.
+*/
+function hasCJK(text) {
+	return CJK_ALL_REG.test(text);
+}
+/**
+* Returns true when text contains CJK punctuation, excluding CJK letters.
+*/
+function hasCJKPunctuation(text) {
+	return CJK_PUNCTUATION_REG.test(text);
+}
+/**
+* Namespace-style CJK regex API used by document rendering and layout.
+*/
+const cjk = {
+	CJK_LETTER_SOURCE,
+	CJK_PUNCTUATION_SOURCE,
+	CJK_ALL_SOURCE,
+	CJK_LETTER_REG,
+	CJK_PUNCTUATION_REG,
+	CJK_ALL_REG,
+	CJK_LETTER_DATA,
+	CJK_PUNCTUATION_DATA,
+	CJK_ALL_DATA,
+	letters,
+	punctuations,
+	all,
+	hasCJKText,
+	hasCJK,
+	hasCJKPunctuation
+};
+
 //#endregion
 //#region src/basics/i-document-skeleton-cached.ts
 let DocumentSkeletonPageType = /* @__PURE__ */ function(DocumentSkeletonPageType) {
@@ -4853,6 +5035,13 @@ var SheetExtension = class extends ComponentExtension {
 		super(..._args);
 		_defineProperty(this, "type", 0);
 	}
+	/**
+	* Return an isolated instance when this extension is safe to render in a print scene.
+	* Editor-only extensions remain excluded by default.
+	*/
+	copyForPrinting() {
+		return null;
+	}
 	isRenderDiffRangesByCell(rangeP, diffRanges) {
 		if (diffRanges == null || diffRanges.length === 0) return true;
 		for (const range of diffRanges) {
@@ -4939,6 +5128,11 @@ const UNIQUE_KEY$10 = "DefaultBackgroundExtension";
 */
 const DOC_EXTENSION_Z_INDEX$3 = 21;
 const PRINTING_Z_INDEX = 21;
+function getRangeCellCount(ranges) {
+	return ranges.reduce((sum, range) => {
+		return sum + Math.max(range.endRow - range.startRow + 1, 0) * Math.max(range.endColumn - range.startColumn + 1, 0);
+	}, 0);
+}
 var Background = class extends SheetExtension {
 	constructor(..._args) {
 		super(..._args);
@@ -4950,7 +5144,7 @@ var Background = class extends SheetExtension {
 		var _this$parent;
 		return ((_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.isPrinting) ? this.PRINTING_Z_INDEX : this.Z_INDEX;
 	}
-	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges, { viewRanges, checkOutOfViewBound }) {
+	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges, { viewRanges, checkOutOfViewBound, hasMergeData = true }) {
 		const { stylesCache, worksheet, rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
 		const { background: bgMatrixCacheByColor, backgroundPositions } = stylesCache;
 		if (!worksheet || !bgMatrixCacheByColor) return;
@@ -4968,15 +5162,19 @@ var Background = class extends SheetExtension {
 			spreadsheetSkeleton
 		};
 		const mergeRanges = [];
-		viewRanges.forEach((range) => {
+		if (hasMergeData) viewRanges.forEach((range) => {
 			const intersectMergeRangesInViewRanges = spreadsheetSkeleton.worksheet.getMergedCellRange(range.startRow, range.startColumn, range.endRow, range.endColumn);
 			mergeRanges.push(...intersectMergeRangesInViewRanges);
 		});
 		const renderBGCore = (rgb) => {
 			const bgColorMatrix = bgMatrixCacheByColor[rgb];
+			const renderRanges = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges;
 			const rangeForEachFn = (row, col, bgConfigParam) => {
-				if (spreadsheetSkeleton.worksheet.getSpanModel().getMergeDataIndex(row, col) !== -1) return;
-				const cellInfo = spreadsheetSkeleton.getCellByIndexWithNoHeader(row, col);
+				var _backgroundPositions$;
+				if (hasMergeData) {
+					if (spreadsheetSkeleton.worksheet.getSpanModel().getMergeDataIndex(row, col) !== -1) return;
+				}
+				const cellInfo = (_backgroundPositions$ = backgroundPositions === null || backgroundPositions === void 0 ? void 0 : backgroundPositions.getValue(row, col)) !== null && _backgroundPositions$ !== void 0 ? _backgroundPositions$ : spreadsheetSkeleton.getCellByIndexWithNoHeader(row, col);
 				if (!cellInfo) return;
 				if (bgConfigParam || bgColorMatrix.getValue(row, col)) {
 					renderBGContext.cellInfo = cellInfo;
@@ -4992,12 +5190,16 @@ var Background = class extends SheetExtension {
 			renderBGContext.backgroundPaths = backgroundPaths;
 			ctx.beginPath();
 			const matrixSize = bgColorMatrix.getSizeOf();
-			if (viewRanges.reduce((sum, range) => {
-				return sum + (range.endRow - range.startRow) * (range.endColumn - range.startColumn);
-			}, 0) < matrixSize) viewRanges.forEach((range) => {
-				_univerjs_core.Range.foreach(range, rangeForEachFn);
-			});
-			else bgColorMatrix.forValue(rangeForEachFn);
+			if (getRangeCellCount(renderRanges) < matrixSize) {
+				renderBGContext.skipRenderRangeCheck = true;
+				renderRanges.forEach((range) => {
+					_univerjs_core.Range.foreach(range, rangeForEachFn);
+				});
+				renderBGContext.skipRenderRangeCheck = false;
+			} else {
+				renderBGContext.skipRenderRangeCheck = false;
+				bgColorMatrix.forValue(rangeForEachFn);
+			}
 			ctx.fill(backgroundPaths);
 			ctx.closePath();
 		};
@@ -5026,12 +5228,12 @@ var Background = class extends SheetExtension {
 		for (let index = 0; index < rgbList.length; index++) {
 			const rgb = rgbList[index];
 			renderBGCore(rgb);
-			renderBGForMergedCells(rgb);
+			if (hasMergeData) renderBGForMergedCells(rgb);
 		}
 		ctx.restore();
 	}
 	renderBGByCell(bgContext, row, col) {
-		const { spreadsheetSkeleton, backgroundPaths, scaleX, scaleY, viewRanges, diffRanges, cellInfo } = bgContext;
+		const { spreadsheetSkeleton, backgroundPaths, scaleX, scaleY, viewRanges, diffRanges, cellInfo, skipRenderRangeCheck } = bgContext;
 		let { startY, endY, startX, endX } = cellInfo;
 		const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
 		const renderRange = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges;
@@ -5039,7 +5241,7 @@ var Background = class extends SheetExtension {
 		endY = mergeInfo.endY;
 		startX = mergeInfo.startX;
 		endX = mergeInfo.endX;
-		if (!isMerged && !isMergedMainCell && !inViewRanges(renderRange, row, col)) return true;
+		if (!skipRenderRangeCheck && !isMerged && !isMergedMainCell && !inViewRanges(renderRange, row, col)) return true;
 		if (!isMerged && !isMergedMainCell) {
 			if (!spreadsheetSkeleton.worksheet.getRowVisible(row)) return true;
 			if (!spreadsheetSkeleton.worksheet.getColVisible(col)) return true;
@@ -11807,11 +12009,12 @@ var Text = class Text extends Shape {
 		this.skeleton = new DocSimpleSkeleton(props.text, props.fontStyle, Boolean(props.warp), props.width, props.height);
 	}
 	static drawWith(ctx, props, _skeleton) {
-		var _props$color;
+		var _cachedLayout$lines, _cachedLayout$totalHe, _props$color;
 		const { text, fontStyle, warp, hAlign, vAlign, width, height, left = 0, top = 0, cellValueType } = props;
-		const skeleton = _skeleton !== null && _skeleton !== void 0 ? _skeleton : new DocSimpleSkeleton(text, fontStyle, Boolean(warp), width, vAlign === _univerjs_core.VerticalAlign.TOP ? height : Infinity);
-		const lines = skeleton.calculate();
-		const totalHeight = skeleton.getTotalHeight();
+		const cachedLayout = !_skeleton && !warp ? Text._getCachedLayout(text, fontStyle) : null;
+		const skeleton = cachedLayout ? null : _skeleton !== null && _skeleton !== void 0 ? _skeleton : new DocSimpleSkeleton(text, fontStyle, Boolean(warp), width, vAlign === _univerjs_core.VerticalAlign.TOP ? height : Infinity);
+		const lines = (_cachedLayout$lines = cachedLayout === null || cachedLayout === void 0 ? void 0 : cachedLayout.lines) !== null && _cachedLayout$lines !== void 0 ? _cachedLayout$lines : skeleton.calculate();
+		const totalHeight = (_cachedLayout$totalHe = cachedLayout === null || cachedLayout === void 0 ? void 0 : cachedLayout.totalHeight) !== null && _cachedLayout$totalHe !== void 0 ? _cachedLayout$totalHe : skeleton.getTotalHeight();
 		let lineTop = top + (vAlign === _univerjs_core.VerticalAlign.TOP ? 0 : vAlign === _univerjs_core.VerticalAlign.MIDDLE ? (height - totalHeight) / 2 : height - totalHeight);
 		ctx.save();
 		ctx.font = fontStyle;
@@ -11862,6 +12065,46 @@ var Text = class Text extends Shape {
 		ctx.restore();
 		return totalHeight;
 	}
+	static drawPlainWith(ctx, props) {
+		var _props$color2;
+		const { text, fontStyle, hAlign, vAlign, width, height, left = 0, top = 0, cellValueType } = props;
+		const { lines, totalHeight } = Text._getCachedLayout(text, fontStyle);
+		let lineTop = top + (vAlign === _univerjs_core.VerticalAlign.TOP ? 0 : vAlign === _univerjs_core.VerticalAlign.MIDDLE ? (height - totalHeight) / 2 : height - totalHeight);
+		ctx.font = fontStyle;
+		ctx.fillStyle = (_props$color2 = props.color) !== null && _props$color2 !== void 0 ? _props$color2 : COLOR_BLACK_RGB;
+		for (const line of lines) {
+			const lineWidth = line.width;
+			let lineX = 0;
+			if (!(width < lineWidth && cellValueType === _univerjs_core.CellValueType.NUMBER)) switch (hAlign) {
+				case _univerjs_core.HorizontalAlign.CENTER:
+					lineX = (width - lineWidth) / 2;
+					break;
+				case _univerjs_core.HorizontalAlign.RIGHT:
+					lineX = width - lineWidth;
+					break;
+				default: lineX = 0;
+			}
+			ctx.fillText(line.text, left + lineX, lineTop + line.baseline);
+			lineTop += line.height;
+		}
+		return totalHeight;
+	}
+	static _getCachedLayout(text, fontStyle) {
+		const cacheKey = `${fontStyle}\u0000${text}`;
+		const cached = Text._layoutCache.get(cacheKey);
+		if (cached) return cached;
+		const skeleton = new DocSimpleSkeleton(text, fontStyle, false, 0, Infinity);
+		const layout = {
+			lines: skeleton.calculate(),
+			totalHeight: skeleton.getTotalHeight()
+		};
+		Text._layoutCache.set(cacheKey, layout);
+		if (Text._layoutCache.size > Text._MAX_LAYOUT_CACHE_SIZE) {
+			const oldestKey = Text._layoutCache.keys().next().value;
+			if (oldestKey !== void 0) Text._layoutCache.delete(oldestKey);
+		}
+		return layout;
+	}
 	/**
 	* Draw text decoration lines (underline, strikethrough, etc.)
 	*/
@@ -11994,6 +12237,8 @@ var Text = class Text extends Shape {
 		};
 	}
 };
+_defineProperty(Text, "_MAX_LAYOUT_CACHE_SIZE", 5e3);
+_defineProperty(Text, "_layoutCache", /* @__PURE__ */ new Map());
 
 //#endregion
 //#region src/components/docs/document-compatibility.ts
@@ -12471,8 +12716,9 @@ function parseDataStreamToTree(dataStream, tables) {
 	};
 }
 var DocumentViewModel = class DocumentViewModel {
-	constructor(_documentDataModel) {
+	constructor(_documentDataModel, _tableSource) {
 		this._documentDataModel = _documentDataModel;
+		this._tableSource = _tableSource;
 		_defineProperty(this, "_interceptor", null);
 		_defineProperty(this, "_cacheSize", 1e3);
 		_defineProperty(this, "_textRunsCache", /* @__PURE__ */ new Map());
@@ -12650,10 +12896,10 @@ var DocumentViewModel = class DocumentViewModel {
 		}
 	}
 	_buildTableCache() {
-		var _this$getBody4;
+		var _this$getBody4, _this$_tableSource;
 		this._tableCache.clear();
 		const tables = (_this$getBody4 = this.getBody()) === null || _this$getBody4 === void 0 ? void 0 : _this$getBody4.tables;
-		const tableConfig = this.getSnapshot().tableSource;
+		const tableConfig = (_this$_tableSource = this._tableSource) !== null && _this$_tableSource !== void 0 ? _this$_tableSource : this.getSnapshot().tableSource;
 		if (tables == null || tableConfig == null) return;
 		for (const table of tables) {
 			const { startIndex, tableId } = table;
@@ -12695,18 +12941,47 @@ var DocumentViewModel = class DocumentViewModel {
 	_buildHeaderFooterViewModel() {
 		const { headerModelMap, footerModelMap } = this._documentDataModel;
 		const viewModels = [];
+		const tableSource = this.getSnapshot().tableSource;
 		for (const [headerId, headerModel] of headerModelMap) {
-			this._headerTreeMap.set(headerId, new DocumentViewModel(headerModel));
+			this._headerTreeMap.set(headerId, new DocumentViewModel(headerModel, tableSource));
 			viewModels.push(this._headerTreeMap.get(headerId));
 		}
 		for (const [footerId, footerModel] of footerModelMap) {
-			this._footerTreeMap.set(footerId, new DocumentViewModel(footerModel));
+			this._footerTreeMap.set(footerId, new DocumentViewModel(footerModel, tableSource));
 			viewModels.push(this._footerTreeMap.get(footerId));
 		}
 		this._segmentViewModels$.next(viewModels);
 	}
 };
 
+//#endregion
+//#region src/components/docs/custom-block-render-viewport.ts
+let docsCustomBlockRenderViewportProvider = null;
+const docsCustomBlockRenderViewportProviders = /* @__PURE__ */ new Set();
+function setDocsCustomBlockRenderViewportProvider(provider) {
+	if (provider == null) {
+		docsCustomBlockRenderViewportProvider = null;
+		docsCustomBlockRenderViewportProviders.clear();
+		return () => {};
+	}
+	docsCustomBlockRenderViewportProvider = provider;
+	docsCustomBlockRenderViewportProviders.add(provider);
+	return () => {
+		var _providers;
+		docsCustomBlockRenderViewportProviders.delete(provider);
+		const providers = Array.from(docsCustomBlockRenderViewportProviders);
+		docsCustomBlockRenderViewportProvider = (_providers = providers[providers.length - 1]) !== null && _providers !== void 0 ? _providers : null;
+	};
+}
+function getDocsCustomBlockRenderViewport(unitId, blockId, input) {
+	const providers = docsCustomBlockRenderViewportProviders.size ? Array.from(docsCustomBlockRenderViewportProviders).reverse() : docsCustomBlockRenderViewportProvider ? [docsCustomBlockRenderViewportProvider] : [];
+	for (const provider of providers) {
+		const viewport = provider(unitId, blockId, input);
+		if (viewport != null) return viewport;
+	}
+	return null;
+}
+
 //#endregion
 //#region src/components/docs/layout/model/glyph.ts
 function isSpace(char) {
@@ -12717,7 +12992,7 @@ function isSpace(char) {
 	].includes(char);
 }
 function isJustifiable(content) {
-	return isSpace(content) || hasCJKText(content) || isCjkLeftAlignedPunctuation(content) || isCjkRightAlignedPunctuation(content) || isCjkCenterAlignedPunctuation(content);
+	return isSpace(content) || cjk.hasCJKText(content) || isCjkLeftAlignedPunctuation(content) || isCjkRightAlignedPunctuation(content) || isCjkCenterAlignedPunctuation(content);
 }
 function baseAdjustability(content, width) {
 	if (isSpace(content)) return {
@@ -12846,7 +13121,7 @@ function _createSkeletonWordOrLetter(glyphType, content, config, glyphWidth, gly
 	const { width: contentWidth = 0 } = bBox;
 	let width = glyphWidth !== null && glyphWidth !== void 0 ? glyphWidth : contentWidth;
 	if (validationGrid(gridType, snapToGrid)) {
-		width = contentWidth + (hasCJK(content) ? charSpace : charSpace / 2);
+		width = contentWidth + (cjk.hasCJK(content) ? charSpace : charSpace / 2);
 		if (gridType === _univerjs_core.GridType.SNAP_TO_CHARS) xOffset = (width - contentWidth) / 2;
 	}
 	if (glyphInfo && glyphInfo.kerning !== 0 && glyphInfo.font) {
@@ -13742,6 +14017,12 @@ function isBeyondDivideWidth(width, divideWidth) {
 	const tolerance = Math.min(MAX_LINE_WIDTH_TOLERANCE, Math.max(MIN_LINE_WIDTH_TOLERANCE, divideWidth * RELATIVE_LINE_WIDTH_TOLERANCE));
 	return width - divideWidth > tolerance;
 }
+function isGlyphGroupBeyondDivideWidth(glyphGroup, offsetLeft, divideWidth) {
+	var _glyphGroup$adjustabi, _glyphGroup;
+	const width = __getGlyphGroupWidth(glyphGroup);
+	const trailingShrinkability = (_glyphGroup$adjustabi = (_glyphGroup = glyphGroup[glyphGroup.length - 1]) === null || _glyphGroup === void 0 || (_glyphGroup = _glyphGroup.adjustability) === null || _glyphGroup === void 0 || (_glyphGroup = _glyphGroup.shrinkability) === null || _glyphGroup === void 0 ? void 0 : _glyphGroup[1]) !== null && _glyphGroup$adjustabi !== void 0 ? _glyphGroup$adjustabi : 0;
+	return isBeyondDivideWidth(offsetLeft + width - trailingShrinkability, divideWidth);
+}
 function layoutParagraph(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType = "Normal") {
 	if (isParagraphFirstShapedText) if (paragraphConfig.bulletSkeleton) {
 		var _paragraphProperties$;
@@ -13818,12 +14099,11 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
 	const divideInfo = getLastNotFullDivideInfo(getLastPage(pages));
 	if (divideInfo) {
 		var _divide$glyphGroup;
-		const width = __getGlyphGroupWidth(glyphGroup);
 		const { divide, isLast } = divideInfo;
 		const lastGlyph = divide === null || divide === void 0 || (_divide$glyphGroup = divide.glyphGroup) === null || _divide$glyphGroup === void 0 ? void 0 : _divide$glyphGroup[divide.glyphGroup.length - 1];
 		const preOffsetLeft = ((lastGlyph === null || lastGlyph === void 0 ? void 0 : lastGlyph.width) || 0) + ((lastGlyph === null || lastGlyph === void 0 ? void 0 : lastGlyph.left) || 0);
 		const { hyphenationZone } = sectionBreakConfig;
-		if (isBeyondDivideWidth(preOffsetLeft + width, divide.width)) {
+		if (isGlyphGroupBeyondDivideWidth(glyphGroup, preOffsetLeft, divide.width)) {
 			if ((divide === null || divide === void 0 ? void 0 : divide.glyphGroup.length) === 0 && glyphGroup.length > 0 && glyphGroup[0].streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK) {
 				addGlyphToDivide(divide, glyphGroup, preOffsetLeft);
 				updateDivideInfo(divide, { breakType: breakPointType });
@@ -13846,7 +14126,7 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
 				const sliceGlyphGroup = [];
 				while (glyphGroup.length) {
 					sliceGlyphGroup.push(glyphGroup.shift());
-					if (isBeyondDivideWidth(__getGlyphGroupWidth(sliceGlyphGroup), divide.width)) {
+					if (isGlyphGroupBeyondDivideWidth(sliceGlyphGroup, 0, divide.width)) {
 						if (sliceGlyphGroup.length > 1) glyphGroup.unshift(sliceGlyphGroup.pop());
 						break;
 					}
@@ -13897,7 +14177,7 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
 				if (anchorDrawings.length > 0) {
 					var _paragraphConfig$para, _paragraphConfig$pDra;
 					const paragraphAnchorLeft = __getParagraphAnchorLeft(sectionBreakConfig, paragraphConfig, (_paragraphConfig$para = paragraphConfig.paragraphStyle) === null || _paragraphConfig$para === void 0 ? void 0 : _paragraphConfig$para.indentStart);
-					const drawings = __getDrawingPosition(currentLine.top, currentLine.lineHeight, currentLine.parent, true, (_paragraphConfig$pDra = paragraphConfig.pDrawingAnchor) === null || _paragraphConfig$pDra === void 0 || (_paragraphConfig$pDra = _paragraphConfig$pDra.get(paragraphConfig.paragraphIndex)) === null || _paragraphConfig$pDra === void 0 ? void 0 : _paragraphConfig$pDra.top, anchorDrawings, paragraphAnchorLeft);
+					const drawings = __getDrawingPosition(ctx, currentLine.top, currentLine.lineHeight, currentLine.parent, true, (_paragraphConfig$pDra = paragraphConfig.pDrawingAnchor) === null || _paragraphConfig$pDra === void 0 || (_paragraphConfig$pDra = _paragraphConfig$pDra.get(paragraphConfig.paragraphIndex)) === null || _paragraphConfig$pDra === void 0 ? void 0 : _paragraphConfig$pDra.top, anchorDrawings, paragraphAnchorLeft, false);
 					__updateDrawingPosition(currentLine.parent, drawings);
 					addGlyphToDivide(divide, glyphGroup, preOffsetLeft);
 					updateDivideInfo(divide, { breakType: breakPointType });
@@ -13997,6 +14277,7 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 		}
 	}
 	let deferredInlineGroupAnchorDrawings = [];
+	let deferredTopBottomAnchorDrawings = [];
 	if (paragraphNonInlineSkeDrawings != null && paragraphNonInlineSkeDrawings.size > 0) {
 		var _pDrawingAnchor$get;
 		let targetDrawings = [...paragraphNonInlineSkeDrawings.values()].filter((drawing) => drawing.drawingOrigin.docTransform.positionV.relativeFrom !== _univerjs_core.ObjectRelativeFromV.LINE);
@@ -14004,13 +14285,17 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 			deferredInlineGroupAnchorDrawings = targetDrawings.filter((drawing) => glyphGroupCustomBlockIds.has(drawing.drawingId) && drawing.drawingOrigin.docTransform.positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE);
 			targetDrawings = targetDrawings.filter((drawing) => !deferredInlineGroupAnchorDrawings.includes(drawing));
 		}
-		__updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphConfig.paragraphIndex, isParagraphFirstShapedText, pDrawingAnchor === null || pDrawingAnchor === void 0 || (_pDrawingAnchor$get = pDrawingAnchor.get(paragraphIndex)) === null || _pDrawingAnchor$get === void 0 ? void 0 : _pDrawingAnchor$get.top, paragraphAnchorLeft);
+		deferredTopBottomAnchorDrawings = targetDrawings.filter((drawing) => glyphGroupCustomBlockIds.has(drawing.drawingId) && drawing.drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM);
+		targetDrawings = targetDrawings.filter((drawing) => drawing.drawingOrigin.layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM);
+		__updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphConfig.paragraphIndex, isParagraphFirstShapedText, pDrawingAnchor === null || pDrawingAnchor === void 0 || (_pDrawingAnchor$get = pDrawingAnchor.get(paragraphIndex)) === null || _pDrawingAnchor$get === void 0 ? void 0 : _pDrawingAnchor$get.top, paragraphAnchorLeft, false, deferredTopBottomAnchorDrawings.length > 0);
 	}
 	if (skeTablesInParagraph != null && skeTablesInParagraph.length > 0) {
 		var _pDrawingAnchor$get2;
 		needOpenNewPageByTableLayout = _updateAndPositionTable(ctx, lineTop, lineHeight, lastPage, column, section, skeTablesInParagraph, paragraphConfig.paragraphIndex, sectionBreakConfig, pDrawingAnchor === null || pDrawingAnchor === void 0 || (_pDrawingAnchor$get2 = pDrawingAnchor.get(paragraphIndex)) === null || _pDrawingAnchor$get2 === void 0 ? void 0 : _pDrawingAnchor$get2.top);
 	}
-	const newLineTop = positionedCustomBlockOnly ? lineTop : calculateLineTopByDrawings(lineHeight, lineTop, lastPage, headerPage, footerPage);
+	const calculatedLineTop = positionedCustomBlockOnly ? lineTop : calculateLineTopByDrawings(lineHeight, lineTop, lastPage, headerPage, footerPage);
+	const previousTopBottomCustomBlockFlowBottom = deferredTopBottomAnchorDrawings.length > 0 ? paragraphConfig.topBottomCustomBlockFlowBottom : void 0;
+	const newLineTop = previousTopBottomCustomBlockFlowBottom == null ? calculatedLineTop : Math.max(calculatedLineTop, previousTopBottomCustomBlockFlowBottom);
 	if (lineHeight + newLineTop - section.height > LINE_LAYOUT_OVERFLOW_TOLERANCE && column.lines.length > 0 && lastPage.sections.length > 0 || needOpenNewPageByTableLayout) {
 		setColumnFullState(column, true);
 		_columnOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType, defaultGlyphLineHeight);
@@ -14044,16 +14329,21 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 	}, column.width, lineIndex, isParagraphFirstShapedText, paragraphConfig, lastPage, headerPage, footerPage);
 	column.lines.push(newLine);
 	newLine.parent = column;
-	createAndUpdateBlockAnchor(paragraphIndex, newLine, lineTop, pDrawingAnchor);
+	const blockAnchorTop = deferredTopBottomAnchorDrawings.length > 0 ? newLineTop : lineTop;
+	createAndUpdateBlockAnchor(paragraphIndex, newLine, blockAnchorTop, pDrawingAnchor);
+	if (deferredTopBottomAnchorDrawings.length > 0) {
+		__updateAndPositionDrawings(ctx, newLineTop, lineHeight, column, deferredTopBottomAnchorDrawings, paragraphConfig.paragraphIndex, isParagraphFirstShapedText, blockAnchorTop, paragraphAnchorLeft, true, true);
+		__updateTopBottomCustomBlockFlowBottom(paragraphConfig, deferredTopBottomAnchorDrawings);
+	}
 	_divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType, defaultGlyphLineHeight);
 	if (deferredInlineGroupAnchorDrawings.length > 0) {
 		var _pDrawingAnchor$get3;
 		__updateAndPositionDrawings(ctx, lineTop, lineHeight, column, deferredInlineGroupAnchorDrawings, paragraphConfig.paragraphIndex, isParagraphFirstShapedText, pDrawingAnchor === null || pDrawingAnchor === void 0 || (_pDrawingAnchor$get3 = pDrawingAnchor.get(paragraphIndex)) === null || _pDrawingAnchor$get3 === void 0 ? void 0 : _pDrawingAnchor$get3.top, paragraphAnchorLeft, true);
 	}
 }
-function __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphIndex, isParagraphFirstShapedText, drawingAnchorTop, drawingAnchorLeft = 0, skipRelayoutCheck = false) {
+function __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphIndex, isParagraphFirstShapedText, drawingAnchorTop, drawingAnchorLeft = 0, skipRelayoutCheck = false, overwriteTopBottomPosition = false) {
 	if (targetDrawings.length === 0) return;
-	const drawings = __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShapedText, drawingAnchorTop, targetDrawings, drawingAnchorLeft);
+	const drawings = __getDrawingPosition(ctx, lineTop, lineHeight, column, isParagraphFirstShapedText, drawingAnchorTop, targetDrawings, drawingAnchorLeft);
 	if (drawings == null || drawings.size === 0) return;
 	const floatObjects = [...drawings.values()].filter((drawing) => {
 		const layoutType = drawing.drawingOrigin.layoutType;
@@ -14075,7 +14365,7 @@ function __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDra
 		};
 	});
 	if (!skipRelayoutCheck) _reLayoutCheck(ctx, floatObjects, column, paragraphIndex);
-	__updateDrawingPosition(column, drawings);
+	__updateDrawingPosition(column, drawings, overwriteTopBottomPosition);
 }
 function __updateWrapTablePosition(ctx, table, lineTop, lineHeight, column, paragraphIndex, drawingAnchorTop) {
 	const wrapTablePosition = __getWrapTablePosition(table, column, lineTop, lineHeight, drawingAnchorTop);
@@ -14186,6 +14476,15 @@ function _getCustomBlockIdsInLine(line) {
 	for (const divide of line.divides) for (const glyph of divide.glyphGroup) if (glyph.streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK) customBlockIds.push(glyph.drawingId);
 	return customBlockIds;
 }
+function __updateTopBottomCustomBlockFlowBottom(paragraphConfig, drawings) {
+	for (const drawing of drawings) {
+		var _drawingOrigin$distB, _paragraphConfig$topB;
+		const { drawingOrigin } = drawing;
+		if (drawingOrigin.layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM || drawingOrigin.behindDoc === _univerjs_core.BooleanNumber.TRUE) continue;
+		const bottom = drawing.aTop + drawing.height + ((_drawingOrigin$distB = drawingOrigin.distB) !== null && _drawingOrigin$distB !== void 0 ? _drawingOrigin$distB : 0);
+		paragraphConfig.topBottomCustomBlockFlowBottom = Math.max((_paragraphConfig$topB = paragraphConfig.topBottomCustomBlockFlowBottom) !== null && _paragraphConfig$topB !== void 0 ? _paragraphConfig$topB : Number.NEGATIVE_INFINITY, bottom);
+	}
+}
 function __isZeroWidthNonFlowFloatingAnchorLine(glyphGroup, paragraphNonInlineSkeDrawings) {
 	return __getZeroWidthNonFlowFloatingAnchorDrawings(glyphGroup, paragraphNonInlineSkeDrawings).length > 0;
 }
@@ -14389,7 +14688,8 @@ function getLineHeightMetrics(glyphLineHeight, paragraphLineGapDefault, linePitc
 	}
 	const usesDocumentGrid = spacingRule === _univerjs_core.SpacingRule.AUTO && snapToGrid === _univerjs_core.BooleanNumber.TRUE && gridType !== _univerjs_core.GridType.DEFAULT;
 	if (spacingRule === _univerjs_core.SpacingRule.AUTO) {
-		const lineSpacingApply = usesDocumentGrid ? lineSpacing * linePitch : scaleAutoLineSpacingByGlyphHeight ? lineSpacing * glyphLineHeight : glyphLineHeight;
+		let lineSpacingApply = usesDocumentGrid ? lineSpacing * linePitch : scaleAutoLineSpacingByGlyphHeight ? lineSpacing * glyphLineHeight : glyphLineHeight;
+		if (!usesDocumentGrid && scaleAutoLineSpacingByGlyphHeight && lineSpacing <= 1.05 && glyphLineHeight >= 30) lineSpacingApply *= 1.18;
 		const padding = (lineSpacingApply - glyphLineHeight) / 2;
 		return {
 			paddingTop: padding,
@@ -14417,7 +14717,7 @@ function getLineHeightMetrics(glyphLineHeight, paragraphLineGapDefault, linePitc
 		lineSpacingApply: exactLineSpacingApply
 	};
 }
-function updateInlineDrawingPosition(line, paragraphInlineSkeDrawings, blockAnchorTop, paragraphNonInlineSkeDrawings) {
+function updateInlineDrawingPosition(line, paragraphInlineSkeDrawings, unitId = "", blockAnchorTop, paragraphNonInlineSkeDrawings) {
 	var _line$parent, _section$top;
 	const column = line.parent;
 	const section = column === null || column === void 0 ? void 0 : column.parent;
@@ -14429,6 +14729,7 @@ function updateInlineDrawingPosition(line, paragraphInlineSkeDrawings, blockAnch
 	const sectionTop = (_section$top = section === null || section === void 0 ? void 0 : section.top) !== null && _section$top !== void 0 ? _section$top : 0;
 	const lineTop = sectionTop + top;
 	for (const divide of line.divides) for (const glyph of divide.glyphGroup) if (glyph.streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK && glyph.width !== 0) {
+		var _viewport$width, _viewport$height, _viewport$offsetLeft;
 		const { drawingId } = glyph;
 		if (drawingId == null) continue;
 		const drawing = paragraphInlineSkeDrawings === null || paragraphInlineSkeDrawings === void 0 ? void 0 : paragraphInlineSkeDrawings.get(drawingId);
@@ -14438,7 +14739,19 @@ function updateInlineDrawingPosition(line, paragraphInlineSkeDrawings, blockAnch
 		const { size, angle } = docTransform;
 		const { width = 0, height = 0 } = size;
 		const glyphHeight = glyph.bBox.bd + glyph.bBox.ba;
-		drawing.aLeft = column.left + divide.left + divide.paddingLeft + glyph.left + .5 * glyph.width - .5 * width || 0;
+		const glyphLeft = divide.left + divide.paddingLeft + glyph.left;
+		const blockLeft = column.left + glyphLeft;
+		const viewport = getDocsCustomBlockRenderViewport(unitId, drawingId, {
+			blockLeft,
+			fallbackHeight: height,
+			fallbackWidth: width,
+			pageMarginLeft: page.marginLeft,
+			pageMarginRight: page.marginRight,
+			pageWidth: page.pageWidth
+		});
+		const drawingWidth = (_viewport$width = viewport === null || viewport === void 0 ? void 0 : viewport.width) !== null && _viewport$width !== void 0 ? _viewport$width : width;
+		const drawingHeight = (_viewport$height = viewport === null || viewport === void 0 ? void 0 : viewport.height) !== null && _viewport$height !== void 0 ? _viewport$height : height;
+		drawing.aLeft = viewport ? blockLeft + ((_viewport$offsetLeft = viewport.offsetLeft) !== null && _viewport$offsetLeft !== void 0 ? _viewport$offsetLeft : 0) : blockLeft + .5 * glyph.width - .5 * drawingWidth || 0;
 		if (glyph.width > divide.width) {
 			var _paragraphNonInlineSk;
 			for (const positionedDrawing of (_paragraphNonInlineSk = paragraphNonInlineSkeDrawings === null || paragraphNonInlineSkeDrawings === void 0 ? void 0 : paragraphNonInlineSkeDrawings.values()) !== null && _paragraphNonInlineSk !== void 0 ? _paragraphNonInlineSk : []) {
@@ -14448,17 +14761,25 @@ function updateInlineDrawingPosition(line, paragraphInlineSkeDrawings, blockAnch
 				const lineBottom = lineTop + lineHeight;
 				if (positionedDrawing.aTop >= lineBottom || positionedBottom <= lineTop) continue;
 				const positionedRight = positionedDrawing.aLeft + positionedDrawing.width;
-				const drawingRight = drawing.aLeft + width;
+				const drawingRight = drawing.aLeft + drawingWidth;
 				if (positionedDrawing.aLeft < drawingRight && positionedRight > drawing.aLeft) {
 					var _positionedOrigin$dis;
 					drawing.aLeft = Math.max(drawing.aLeft, positionedDrawing.aLeft + positionedDrawing.width + ((_positionedOrigin$dis = positionedOrigin.distR) !== null && _positionedOrigin$dis !== void 0 ? _positionedOrigin$dis : 0));
 				}
 			}
 		}
-		drawing.aTop = lineTop + lineHeight - .5 * glyphHeight - .5 * height - marginBottom;
-		drawing.width = width;
-		drawing.height = height;
+		drawing.width = drawingWidth;
+		drawing.height = drawingHeight;
+		drawing.aTop = lineTop + lineHeight - .5 * glyphHeight - .5 * drawingHeight - marginBottom;
 		drawing.angle = angle;
+		drawing.customBlockRenderViewport = viewport ? {
+			bleedLeft: viewport.bleedLeft,
+			bleedWidth: viewport.bleedWidth,
+			contentHeight: viewport.contentHeight,
+			contentWidth: viewport.contentWidth,
+			height: viewport.height,
+			viewportHeight: viewport.viewportHeight
+		} : void 0;
 		drawing.isPageBreak = isPageBreak;
 		drawing.lineTop = lineTop;
 		drawing.columnLeft = column.left;
@@ -14468,7 +14789,7 @@ function updateInlineDrawingPosition(line, paragraphInlineSkeDrawings, blockAnch
 	}
 	page.skeDrawings = new Map([...page.skeDrawings, ...drawings]);
 }
-function __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShapedText, blockAnchorTop, needPositionDrawings = [], blockAnchorLeft = 0) {
+function __getDrawingPosition(ctx, lineTop, lineHeight, column, isParagraphFirstShapedText, blockAnchorTop, needPositionDrawings = [], blockAnchorLeft = 0, normalizeTraditionalColumnAnchor = true) {
 	var _column$parent3;
 	const page = (_column$parent3 = column.parent) === null || _column$parent3 === void 0 ? void 0 : _column$parent3.parent;
 	if (page == null || needPositionDrawings.length === 0) return;
@@ -14476,22 +14797,42 @@ function __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShape
 	const isPageBreak = __checkPageBreak(column);
 	if (isPageBreak && !isParagraphFirstShapedText) return;
 	for (const drawing of needPositionDrawings) {
-		var _getPositionHorizon2, _getPositionVertical2;
+		var _ctx$dataModel$getUni, _ctx$dataModel$getUni2, _ctx$dataModel, _viewport$width2, _viewport$height2, _getPositionHorizon2, _getPositionVertical2;
 		const { drawingOrigin } = drawing;
 		if (!drawingOrigin) continue;
 		const { docTransform } = drawingOrigin;
 		const { positionH, positionV, size, angle } = docTransform;
-		const { width = 0, height = 0 } = size;
-		let aLeft = (_getPositionHorizon2 = getPositionHorizon(positionH, column, page, width, isPageBreak)) !== null && _getPositionHorizon2 !== void 0 ? _getPositionHorizon2 : 0;
+		const { width, height } = size;
+		const fallbackWidth = width !== null && width !== void 0 ? width : 0;
+		const fallbackHeight = height !== null && height !== void 0 ? height : 0;
+		const viewport = drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM ? getDocsCustomBlockRenderViewport((_ctx$dataModel$getUni = (_ctx$dataModel$getUni2 = (_ctx$dataModel = ctx.dataModel).getUnitId) === null || _ctx$dataModel$getUni2 === void 0 ? void 0 : _ctx$dataModel$getUni2.call(_ctx$dataModel)) !== null && _ctx$dataModel$getUni !== void 0 ? _ctx$dataModel$getUni : "", drawing.drawingId, {
+			fallbackHeight,
+			fallbackWidth,
+			pageMarginLeft: page.marginLeft,
+			pageMarginRight: page.marginRight,
+			pageWidth: page.pageWidth
+		}) : null;
+		const drawingWidth = (_viewport$width2 = viewport === null || viewport === void 0 ? void 0 : viewport.width) !== null && _viewport$width2 !== void 0 ? _viewport$width2 : fallbackWidth;
+		const drawingHeight = (_viewport$height2 = viewport === null || viewport === void 0 ? void 0 : viewport.height) !== null && _viewport$height2 !== void 0 ? _viewport$height2 : fallbackHeight;
+		let aLeft = (_getPositionHorizon2 = getPositionHorizon(positionH, column, page, drawingWidth, isPageBreak)) !== null && _getPositionHorizon2 !== void 0 ? _getPositionHorizon2 : 0;
 		if (positionH.relativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN && blockAnchorLeft > 0) {
 			const renderedColumnOrigin = isPageBreak ? 0 : column.left || page.marginLeft;
 			aLeft += blockAnchorLeft - renderedColumnOrigin;
+			if (normalizeTraditionalColumnAnchor && ctx.dataModel.documentStyle.documentFlavor === _univerjs_core.DocumentFlavor.TRADITIONAL && positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) aLeft -= page.marginLeft;
 		}
 		drawing.aLeft = aLeft;
-		drawing.aTop = (_getPositionVertical2 = getPositionVertical(positionV, page, lineTop, lineHeight, height, blockAnchorTop, isPageBreak)) !== null && _getPositionVertical2 !== void 0 ? _getPositionVertical2 : 0;
-		drawing.width = width;
-		drawing.height = height;
+		drawing.aTop = (_getPositionVertical2 = getPositionVertical(positionV, page, lineTop, lineHeight, drawingHeight, blockAnchorTop, isPageBreak)) !== null && _getPositionVertical2 !== void 0 ? _getPositionVertical2 : 0;
+		drawing.width = drawingWidth;
+		drawing.height = drawingHeight;
 		drawing.angle = angle;
+		drawing.customBlockRenderViewport = viewport ? {
+			bleedLeft: viewport.bleedLeft,
+			bleedWidth: viewport.bleedWidth,
+			contentHeight: viewport.contentHeight,
+			contentWidth: viewport.contentWidth,
+			height: viewport.height,
+			viewportHeight: viewport.viewportHeight
+		} : void 0;
 		drawing.initialState = true;
 		drawing.columnLeft = column.left;
 		drawing.lineTop = lineTop;
@@ -14502,16 +14843,18 @@ function __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShape
 	}
 	return drawings;
 }
-function __updateDrawingPosition(column, drawings) {
+function __updateDrawingPosition(column, drawings, overwriteTopBottomPosition = false) {
 	var _column$parent4;
 	const page = (_column$parent4 = column.parent) === null || _column$parent4 === void 0 ? void 0 : _column$parent4.parent;
 	if (drawings == null || drawings.size === 0 || page == null) return;
 	for (const drawing of drawings.values()) {
 		const originDrawing = page.skeDrawings.get(drawing.drawingId);
-		if (originDrawing) if (originDrawing.drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) {
+		if (originDrawing) if (originDrawing.drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) if (overwriteTopBottomPosition) page.skeDrawings.set(drawing.drawingId, drawing);
+		else {
 			const lowerDrawing = originDrawing.aTop > drawing.aTop ? originDrawing : drawing;
 			page.skeDrawings.set(drawing.drawingId, lowerDrawing);
-		} else page.skeDrawings.set(drawing.drawingId, drawing);
+		}
+		else page.skeDrawings.set(drawing.drawingId, drawing);
 		else page.skeDrawings.set(drawing.drawingId, drawing);
 	}
 }
@@ -14840,7 +15183,10 @@ function updateInlineDrawingCoordsAndBorder(ctx, pages) {
 		const affectInlineDrawings = paragraphConfig === null || paragraphConfig === void 0 ? void 0 : paragraphConfig.paragraphInlineSkeDrawings;
 		const affectNonInlineDrawings = paragraphConfig === null || paragraphConfig === void 0 ? void 0 : paragraphConfig.paragraphNonInlineSkeDrawings;
 		const drawingAnchor = (_ctx$skeletonResource = ctx.skeletonResourceReference) === null || _ctx$skeletonResource === void 0 || (_ctx$skeletonResource = _ctx$skeletonResource.drawingAnchor) === null || _ctx$skeletonResource === void 0 || (_ctx$skeletonResource = _ctx$skeletonResource.get(segmentId)) === null || _ctx$skeletonResource === void 0 ? void 0 : _ctx$skeletonResource.get(line.paragraphIndex);
-		if (affectInlineDrawings && affectInlineDrawings.size > 0) updateInlineDrawingPosition(line, affectInlineDrawings, drawingAnchor === null || drawingAnchor === void 0 ? void 0 : drawingAnchor.top, affectNonInlineDrawings);
+		if (affectInlineDrawings && affectInlineDrawings.size > 0) {
+			var _ctx$dataModel$getUni, _ctx$dataModel$getUni2, _ctx$dataModel;
+			updateInlineDrawingPosition(line, affectInlineDrawings, (_ctx$dataModel$getUni = (_ctx$dataModel$getUni2 = (_ctx$dataModel = ctx.dataModel).getUnitId) === null || _ctx$dataModel$getUni2 === void 0 ? void 0 : _ctx$dataModel$getUni2.call(_ctx$dataModel)) !== null && _ctx$dataModel$getUni !== void 0 ? _ctx$dataModel$getUni : "", drawingAnchor === null || drawingAnchor === void 0 ? void 0 : drawingAnchor.top, affectNonInlineDrawings);
+		}
 		const paragraphStyle = paragraphConfig === null || paragraphConfig === void 0 ? void 0 : paragraphConfig.paragraphStyle;
 		const paragraphBackgroundColor = paragraphStyle === null || paragraphStyle === void 0 || (_paragraphStyle$shadi = paragraphStyle.shading) === null || _paragraphStyle$shadi === void 0 ? void 0 : _paragraphStyle$shadi.backgroundColor;
 		if (paragraphBackgroundColor) line.backgroundColor = paragraphBackgroundColor;
@@ -14884,10 +15230,10 @@ function lineIterator(pagesOrCells, cb) {
 	}
 }
 function documentSkeletonTableIterator(pages, options = {}) {
-	const { docsLeft = 0, docsTop = 0, pageMarginTop = 0, resolveViewport = true, tableCellInsetX = 0, unitId = "" } = options;
+	const { docsLeft = 0, docsTop = 0, pageMarginTop = 0, resolveViewport = true, skeFooters, skeHeaders, tableCellInsetX = 0, unitId = "" } = options;
 	const contexts = [];
 	pages.forEach((rootPage, pageIndex) => {
-		var _rootPage$skeColumnGr;
+		var _skeHeaders$get, _skeFooters$get, _rootPage$skeColumnGr;
 		const rootPageTop = ((rootPage.pageHeight === Infinity ? 0 : rootPage.pageHeight) + pageMarginTop) * pageIndex + rootPage.marginTop + docsTop;
 		const rootPageLeft = rootPage.marginLeft + docsLeft;
 		collectPageTables({
@@ -14903,6 +15249,36 @@ function documentSkeletonTableIterator(pages, options = {}) {
 			tableCellInsetX,
 			unitId
 		});
+		const rootPageDocumentTop = rootPageTop - rootPage.marginTop;
+		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);
+		if (headerPage != null) collectPageTables({
+			contexts,
+			docsLeft,
+			page: headerPage,
+			pageIndex,
+			pageLeft: rootPageDocumentLeft,
+			pageTop: rootPageDocumentTop + headerPage.marginTop,
+			rootPage,
+			source: "header",
+			resolveViewport,
+			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);
+		if (footerPage != null) collectPageTables({
+			contexts,
+			docsLeft,
+			page: footerPage,
+			pageIndex,
+			pageLeft: rootPageDocumentLeft,
+			pageTop: rootPageDocumentTop + rootPage.pageHeight - footerPage.height - footerPage.marginBottom,
+			rootPage,
+			source: "footer",
+			resolveViewport,
+			tableCellInsetX,
+			unitId
+		});
 		(_rootPage$skeColumnGr = rootPage.skeColumnGroups) === null || _rootPage$skeColumnGr === void 0 || _rootPage$skeColumnGr.forEach((columnGroup) => {
 			columnGroup.columns.forEach((columnGroupColumn) => {
 				const nestedPage = columnGroupColumn.page;
@@ -15305,6 +15681,12 @@ function getFontCreateConfig(index, viewModel, paragraphNode, sectionBreakConfig
 	if (!hasAddonStyle && originTextRun) fontCreateConfigCache.setValue(st, ed, result);
 	return result;
 }
+function getCustomRangeGlyphWidth(index, viewModel, paragraphNode, config) {
+	const customRange = viewModel.getCustomRange(index + paragraphNode.startIndex);
+	const glyphWidthEm = customRange === null || customRange === void 0 ? void 0 : customRange.glyphWidthEm;
+	if (typeof glyphWidthEm !== "number" || !Number.isFinite(glyphWidthEm) || glyphWidthEm < 0) return;
+	return glyphWidthEm * config.fontStyle.originFontSize;
+}
 function getNullSkeleton() {
 	return {
 		pages: [],
@@ -15321,6 +15703,7 @@ function setPageParent(pages, parent) {
 	for (const page of pages) page.parent = parent;
 }
 const DEFAULT_SECTION_BREAK = {
+	sectionId: "section_render_default",
 	columnProperties: [],
 	columnSeparatorType: _univerjs_core.ColumnSeparatorType.NONE,
 	sectionType: _univerjs_core.SectionType.SECTION_TYPE_UNSPECIFIED,
@@ -15368,6 +15751,11 @@ function prepareSectionBreakConfig(ctx, nodeIndex) {
 	let { documentStyle } = dataModel;
 	const { documentFlavor } = documentStyle;
 	let sectionBreak = viewModel.getSectionBreak(sectionNode.endIndex) || DEFAULT_SECTION_BREAK;
+	const sectionBreaks = viewModel.getChildren().map((node) => viewModel.getSectionBreak(node.endIndex) || DEFAULT_SECTION_BREAK);
+	sectionBreak = {
+		...sectionBreak,
+		...(0, _univerjs_core.resolveSectionHeaderFooterReferences)(documentStyle, sectionBreaks, nodeIndex)
+	};
 	if (documentFlavor === _univerjs_core.DocumentFlavor.MODERN) {
 		var _documentStyle$pageSi, _documentStyle$pageSi2;
 		const modernPageWidth = (_documentStyle$pageSi = (_documentStyle$pageSi2 = documentStyle.pageSize) === null || _documentStyle$pageSi2 === void 0 ? void 0 : _documentStyle$pageSi2.width) !== null && _documentStyle$pageSi !== void 0 ? _documentStyle$pageSi : DEFAULT_MODERN_DOCUMENT_STYLE.pageSize.width;
@@ -15384,7 +15772,7 @@ function prepareSectionBreakConfig(ctx, nodeIndex) {
 		vertexAngle: 0,
 		wrapStrategy: _univerjs_core.WrapStrategy.UNSPECIFIED
 	} } = documentStyle;
-	const { charSpace = 0, linePitch = 15.6, gridType = _univerjs_core.GridType.LINES, pageNumberStart = global_pageNumberStart, pageSize = global_pageSize, pageOrient = global_pageOrient, marginTop = global_marginTop, marginBottom = global_marginBottom, marginRight = global_marginRight, marginLeft = global_marginLeft, marginHeader = global_marginHeader, marginFooter = global_marginFooter, defaultHeaderId = global_defaultHeaderId, defaultFooterId = global_defaultFooterId, evenPageHeaderId = global_evenPageHeaderId, evenPageFooterId = global_evenPageFooterId, firstPageHeaderId = global_firstPageHeaderId, firstPageFooterId = global_firstPageFooterId, useFirstPageHeaderFooter = global_useFirstPageHeaderFooter, evenAndOddHeaders = global_evenAndOddHeaders, columnProperties = [], columnSeparatorType = _univerjs_core.ColumnSeparatorType.NONE, contentDirection, sectionType, textDirection, renderConfig = global_renderConfig } = sectionBreak;
+	const { sectionId, charSpace = 0, linePitch = 15.6, gridType = _univerjs_core.GridType.LINES, pageNumberStart = global_pageNumberStart, pageSize = global_pageSize, pageOrient = global_pageOrient, marginTop = global_marginTop, marginBottom = global_marginBottom, marginRight = global_marginRight, marginLeft = global_marginLeft, marginHeader = global_marginHeader, marginFooter = global_marginFooter, defaultHeaderId = global_defaultHeaderId, defaultFooterId = global_defaultFooterId, evenPageHeaderId = global_evenPageHeaderId, evenPageFooterId = global_evenPageFooterId, firstPageHeaderId = global_firstPageHeaderId, firstPageFooterId = global_firstPageFooterId, useFirstPageHeaderFooter = global_useFirstPageHeaderFooter, evenAndOddHeaders = global_evenAndOddHeaders, columnProperties = [], columnSeparatorType = _univerjs_core.ColumnSeparatorType.NONE, contentDirection, sectionType, textDirection, renderConfig = global_renderConfig } = sectionBreak;
 	const sectionNodeNext = viewModel.getChildren()[nodeIndex + 1];
 	const sectionTypeNext = (_viewModel$getSection = viewModel.getSectionBreak(sectionNodeNext === null || sectionNodeNext === void 0 ? void 0 : sectionNodeNext.endIndex)) === null || _viewModel$getSection === void 0 ? void 0 : _viewModel$getSection.sectionType;
 	const headerIds = {
@@ -15400,6 +15788,7 @@ function prepareSectionBreakConfig(ctx, nodeIndex) {
 	if (pageSize.width === null) pageSize.width = Number.POSITIVE_INFINITY;
 	if (pageSize.height === null) pageSize.height = Number.POSITIVE_INFINITY;
 	return {
+		sectionId,
 		charSpace,
 		linePitch,
 		gridType,
@@ -15444,20 +15833,22 @@ function getPageFromPath(skeletonData, path) {
 			const pageIndex = pathCopy.shift();
 			page = skeletonData.pages[pageIndex];
 		} else if (field === "skeTables") {
-			var _skeTables;
+			var _page$skeTables3;
+			if (page == null) return null;
 			const tableId = pathCopy.shift();
 			pathCopy.shift();
 			const rowIndex = pathCopy.shift();
 			pathCopy.shift();
 			const cellIndex = pathCopy.shift();
-			page = (_skeTables = page.skeTables) === null || _skeTables === void 0 || (_skeTables = _skeTables.get(tableId)) === null || _skeTables === void 0 || (_skeTables = _skeTables.rows[rowIndex]) === null || _skeTables === void 0 ? void 0 : _skeTables.cells[cellIndex];
+			page = (_page$skeTables3 = page.skeTables) === null || _page$skeTables3 === void 0 || (_page$skeTables3 = _page$skeTables3.get(tableId)) === null || _page$skeTables3 === void 0 || (_page$skeTables3 = _page$skeTables3.rows[rowIndex]) === null || _page$skeTables3 === void 0 ? void 0 : _page$skeTables3.cells[cellIndex];
 		} else if (field === "skeColumnGroups") {
-			var _skeColumnGroups;
+			var _page$skeColumnGroups2;
+			if (page == null) return null;
 			const columnGroupId = pathCopy.shift();
 			pathCopy.shift();
 			const columnIndex = pathCopy.shift();
 			pathCopy.shift();
-			page = (_skeColumnGroups = page.skeColumnGroups) === null || _skeColumnGroups === void 0 || (_skeColumnGroups = _skeColumnGroups.get(columnGroupId)) === null || _skeColumnGroups === void 0 || (_skeColumnGroups = _skeColumnGroups.columns[columnIndex]) === null || _skeColumnGroups === void 0 ? void 0 : _skeColumnGroups.page;
+			page = (_page$skeColumnGroups2 = page.skeColumnGroups) === null || _page$skeColumnGroups2 === void 0 || (_page$skeColumnGroups2 = _page$skeColumnGroups2.get(columnGroupId)) === null || _page$skeColumnGroups2 === void 0 || (_page$skeColumnGroups2 = _page$skeColumnGroups2.columns[columnIndex]) === null || _page$skeColumnGroups2 === void 0 ? void 0 : _page$skeColumnGroups2.page;
 		}
 	}
 	return page;
@@ -15470,13 +15861,14 @@ function getHeaderFooterMaxHeight(pageHeight) {
 }
 function createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference, pageNumber = 1, breakType = 0) {
 	const page = _getNullPage();
-	const { pageNumberStart = 1, pageSize = {
+	const { sectionId, pageNumberStart = 1, pageSize = {
 		width: Number.POSITIVE_INFINITY,
 		height: Number.POSITIVE_INFINITY
 	}, pageOrient = _univerjs_core.PageOrientType.PORTRAIT, headerIds = {}, footerIds = {}, useFirstPageHeaderFooter, evenAndOddHeaders, footerTreeMap, headerTreeMap, columnProperties = [], columnSeparatorType, marginTop = 0, marginBottom = 0, marginHeader: _marginHeader = 0, marginFooter: _marginFooter = 0, marginLeft = 0, marginRight = 0, renderConfig = {} } = sectionBreakConfig;
 	const { skeHeaders, skeFooters } = skeletonResourceReference;
 	const { width: pageWidth = Number.POSITIVE_INFINITY, height: pageHeight = Number.POSITIVE_INFINITY } = pageSize;
 	page.pageNumber = pageNumber;
+	page.sectionId = sectionId;
 	page.pageNumberStart = pageNumberStart;
 	page.renderConfig = renderConfig;
 	page.marginLeft = marginLeft;
@@ -15524,8 +15916,8 @@ function createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference,
 	}
 	page.originMarginTop = marginTop;
 	page.originMarginBottom = marginBottom;
-	page.marginTop = _getVerticalMargin(marginTop, header, pageHeight);
-	page.marginBottom = _getVerticalMargin(marginBottom, footer, pageHeight);
+	page.marginTop = _getVerticalMargin(marginTop, header);
+	page.marginBottom = _getVerticalMargin(marginBottom, footer);
 	const sections = page.sections;
 	const lastSection = sections[sections.length - 1];
 	const { marginTop: curPageMT, marginBottom: curPageMB, marginLeft: curPageML, marginRight: curPageMR } = page;
@@ -15571,10 +15963,11 @@ function _getNullPage(type = 0, segmentId = "") {
 }
 function _createSkeletonHeaderFooter(ctx, headerOrFooterViewModel, sectionBreakConfig, skeletonResourceReference, segmentId, isHeader = true, areaPage, count = 0) {
 	var _sectionBreakConfig$d;
-	const { lists, footerTreeMap, headerTreeMap, localeService, pageSize, drawings, marginLeft = 0, marginRight = 0, marginHeader = 0, marginFooter = 0 } = sectionBreakConfig;
+	const { sectionId, lists, footerTreeMap, headerTreeMap, localeService, pageSize, drawings, marginLeft = 0, marginRight = 0, marginHeader = 0, marginFooter = 0 } = sectionBreakConfig;
 	const pageWidth = (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || Number.POSITIVE_INFINITY;
 	const pageHeight = (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || Number.POSITIVE_INFINITY;
 	const headerFooterConfig = {
+		sectionId,
 		lists,
 		footerTreeMap,
 		headerTreeMap,
@@ -15611,7 +16004,7 @@ function _createSkeletonHeaderFooter(ctx, headerOrFooterViewModel, sectionBreakC
 }
 function createNullCellPage(ctx, sectionBreakConfig, tableConfig, row, col, availableHeight = Number.POSITIVE_INFINITY, maxCellPageHeight = Number.POSITIVE_INFINITY) {
 	var _ref, _cellConfig$margin, _cellConfig$columnSpa;
-	const { lists, footerTreeMap, headerTreeMap, localeService, drawings } = sectionBreakConfig;
+	const { sectionId, lists, footerTreeMap, headerTreeMap, localeService, drawings } = sectionBreakConfig;
 	const { skeletonResourceReference } = ctx;
 	const { cellMargin, tableRows, tableColumns, tableId } = tableConfig;
 	const cellConfig = tableRows[row].tableCells[col];
@@ -15633,6 +16026,7 @@ function createNullCellPage(ctx, sectionBreakConfig, tableConfig, row, col, avai
 	}
 	const pageHeight = maxCellPageHeight;
 	const cellSectionBreakConfig = {
+		sectionId,
 		lists,
 		footerTreeMap,
 		headerTreeMap,
@@ -15698,8 +16092,10 @@ function applyTrailingBlockRangeSpaceBelow(pages, body, containerEndIndex) {
 		page.height += lastLine.spaceBelowApply || trailingBlockRangeSpace;
 	}
 }
-function _getVerticalMargin(marginTB, _headerOrFooter, _pageHeight) {
-	return marginTB;
+function _getVerticalMargin(marginTB, headerOrFooter) {
+	if (headerOrFooter == null) return marginTB;
+	const { marginTop = 0, height = 0, marginBottom = 0 } = headerOrFooter;
+	return Math.max(marginTB, marginTop + height + marginBottom);
 }
 
 //#endregion
@@ -15791,7 +16187,7 @@ function getDivideStretchability(divide) {
 function getJustifiables(divide) {
 	const justifiables = divide.glyphGroup.filter((glyph) => glyph.isJustifiable).length;
 	const lastGlyph = divide.glyphGroup[divide.glyphGroup.length - 1];
-	if (hasCJK(lastGlyph.content)) return justifiables - 1;
+	if (cjk.hasCJK(lastGlyph.content)) return justifiables - 1;
 	return justifiables;
 }
 function adjustGlyphsInDivide(divide, justificationRatio, extraJustification) {
@@ -15896,7 +16292,7 @@ function horizontalAlignHandler(line, horizontalAlign, allowOverflowHorizontalOf
 function restoreLastCJKGlyphWidth(line) {
 	for (const divide of line.divides) {
 		const lastGlyph = divide.glyphGroup[divide.glyphGroup.length - 1];
-		if (lastGlyph && divide.isFull && hasCJKText(lastGlyph.content) && lastGlyph.width - lastGlyph.xOffset > lastGlyph.bBox.width) {
+		if (lastGlyph && divide.isFull && cjk.hasCJKText(lastGlyph.content) && lastGlyph.width - lastGlyph.xOffset > lastGlyph.bBox.width) {
 			const shrinkAmount = lastGlyph.width - lastGlyph.xOffset - lastGlyph.bBox.width;
 			lastGlyph.width -= shrinkAmount;
 			lastGlyph.adjustability.shrinkability[1] = 0;
@@ -16169,22 +16565,66 @@ function _isDocxColumnBreakVisuallyBlankColumn(column) {
 function _hasOnlyCustomBlockGlyphs(glyphs) {
 	return glyphs.length > 0 && glyphs.every((glyph) => glyph.streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK);
 }
-function _mergeAdjacentCustomBlockShapedTexts(shapedTextList) {
+function _mergeAdjacentCustomBlockShapedTexts(shapedTextList, customBlockDrawings) {
 	const mergedShapedTextList = [];
-	for (const shapedText of shapedTextList) {
-		const lastShapedText = mergedShapedTextList[mergedShapedTextList.length - 1];
-		if (lastShapedText && _hasOnlyCustomBlockGlyphs(lastShapedText.glyphs) && _hasOnlyCustomBlockGlyphs(shapedText.glyphs)) {
-			lastShapedText.text += shapedText.text;
-			lastShapedText.glyphs.push(...shapedText.glyphs);
-			lastShapedText.breakPointType = shapedText.breakPointType;
-			continue;
+	for (const originShapedText of shapedTextList) {
+		const splitShapedTexts = _splitTopBottomCustomBlockShapedText(originShapedText, customBlockDrawings);
+		for (const shapedText of splitShapedTexts) {
+			const lastShapedText = mergedShapedTextList[mergedShapedTextList.length - 1];
+			if (lastShapedText && _hasOnlyCustomBlockGlyphs(lastShapedText.glyphs) && _hasOnlyCustomBlockGlyphs(shapedText.glyphs) && !_hasTopBottomCustomBlockGlyph(lastShapedText.glyphs, customBlockDrawings) && !_hasTopBottomCustomBlockGlyph(shapedText.glyphs, customBlockDrawings)) {
+				lastShapedText.text += shapedText.text;
+				lastShapedText.glyphs.push(...shapedText.glyphs);
+				lastShapedText.breakPointType = shapedText.breakPointType;
+				continue;
+			}
+			mergedShapedTextList.push({
+				...shapedText,
+				glyphs: [...shapedText.glyphs]
+			});
 		}
-		mergedShapedTextList.push({
+	}
+	return mergedShapedTextList;
+}
+function _splitTopBottomCustomBlockShapedText(shapedText, customBlockDrawings) {
+	const splitShapedTexts = [];
+	let pendingGlyphs = [];
+	let pendingText = "";
+	let textOffset = 0;
+	const flushPending = () => {
+		if (pendingGlyphs.length === 0) return;
+		splitShapedTexts.push({
 			...shapedText,
-			glyphs: [...shapedText.glyphs]
+			text: pendingText,
+			glyphs: pendingGlyphs
 		});
+		pendingGlyphs = [];
+		pendingText = "";
+	};
+	for (const glyph of shapedText.glyphs) {
+		const glyphText = shapedText.text.slice(textOffset, textOffset + glyph.count);
+		textOffset += glyph.count;
+		if (_isTopBottomCustomBlockGlyph(glyph, customBlockDrawings)) {
+			flushPending();
+			splitShapedTexts.push({
+				...shapedText,
+				text: glyphText,
+				glyphs: [glyph]
+			});
+			continue;
+		}
+		pendingGlyphs.push(glyph);
+		pendingText += glyphText;
 	}
-	return mergedShapedTextList;
+	flushPending();
+	return splitShapedTexts.length > 0 ? splitShapedTexts : [shapedText];
+}
+function _hasTopBottomCustomBlockGlyph(glyphs, customBlockDrawings) {
+	return glyphs.some((glyph) => _isTopBottomCustomBlockGlyph(glyph, customBlockDrawings));
+}
+function _isTopBottomCustomBlockGlyph(glyph, customBlockDrawings) {
+	var _customBlockDrawings$;
+	if (glyph.streamType !== _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK || glyph.drawingId == null) return false;
+	return ((_customBlockDrawings$ = customBlockDrawings.get(glyph.drawingId)) === null || _customBlockDrawings$ === void 0 ? void 0 : _customBlockDrawings$.drawingOrigin.layoutType) === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM;
 }
 function _getListLevelAncestors(bullet, listLevel) {
 	if (!bullet || !listLevel) return;
@@ -16230,26 +16670,17 @@ function _hasNextAdjacentLayoutBlockRange(blockRanges, blockRange) {
 	const nextBlockRange = _getNextAdjacentBlockRange(blockRanges, blockRange);
 	return nextBlockRange != null && BLOCK_LAYOUT_OUTER_SPACING_MAP.has(nextBlockRange.blockType) && nextBlockRange.startIndex === blockRange.endIndex + 1;
 }
-function _applyDefaultLayoutParagraphStyle(style, hasBlockRange) {
-	if (style.lineSpacing == null) style.lineSpacing = _univerjs_core.DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING;
-	if (hasBlockRange) return;
-	if (style.spaceAbove == null) style.spaceAbove = { v: _univerjs_core.DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE };
-	if (style.spaceBelow == null) style.spaceBelow = { v: _univerjs_core.DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW };
-}
-function _applyBlockRangeLayoutParagraphStyle(body, paragraph, paragraphStyle, shouldApplyDocumentDefaults) {
+function _applyBlockRangeLayoutParagraphStyle(body, paragraph, paragraphStyle, documentStyle, useLegacyModernDefaults) {
 	var _body$paragraphs, _BLOCK_LAYOUT_OUTER_S;
-	const style = _univerjs_core.Tools.deepClone(paragraphStyle);
 	const blockRanges = body === null || body === void 0 ? void 0 : body.blockRanges;
-	if (!(blockRanges === null || blockRanges === void 0 ? void 0 : blockRanges.length)) {
-		if (shouldApplyDocumentDefaults) _applyDefaultLayoutParagraphStyle(style, false);
-		return style;
-	}
+	if (!(blockRanges === null || blockRanges === void 0 ? void 0 : blockRanges.length)) return (0, _univerjs_core.resolveDocumentParagraphStyle)(documentStyle, paragraphStyle, { useLegacyModernDefaults });
 	const blockRange = blockRanges.find((range) => BLOCK_LAYOUT_OUTER_SPACING_MAP.has(range.blockType) && paragraph.startIndex > range.startIndex && paragraph.startIndex < range.endIndex);
-	if (!blockRange) {
-		if (shouldApplyDocumentDefaults) _applyDefaultLayoutParagraphStyle(style, false);
-		return style;
-	}
-	_applyDefaultLayoutParagraphStyle(style, true);
+	if (!blockRange) return (0, _univerjs_core.resolveDocumentParagraphStyle)(documentStyle, paragraphStyle, { useLegacyModernDefaults });
+	const style = (0, _univerjs_core.resolveDocumentParagraphStyle)(documentStyle, paragraphStyle, {
+		excludeDocumentOuterSpacing: true,
+		useLegacyModernDefaults
+	});
+	if (style.lineSpacing == null) style.lineSpacing = _univerjs_core.DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING;
 	const blockParagraphs = ((_body$paragraphs = body === null || body === void 0 ? void 0 : body.paragraphs) !== null && _body$paragraphs !== void 0 ? _body$paragraphs : []).filter((item) => item.startIndex > blockRange.startIndex && item.startIndex < blockRange.endIndex).sort((left, right) => left.startIndex - right.startIndex);
 	const firstParagraph = blockParagraphs[0];
 	const lastParagraph = blockParagraphs[blockParagraphs.length - 1];
@@ -16298,7 +16729,7 @@ function _getNextPageNumber(lastPage) {
 	return lastPage.pageNumber + 1;
 }
 function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, sectionBreakConfig, tableSkeleton) {
-	var _sectionBreakConfig$d, _viewModel$getSnapsho, _viewModel$getBody2, _viewModel$getBody3;
+	var _viewModel$getSnapsho, _sectionBreakConfig$d, _viewModel$getBody2, _viewModel$getBody3;
 	const { skeletonResourceReference } = ctx;
 	const { lists, drawings = {}, localeService } = sectionBreakConfig;
 	const { endIndex, blocks = [], children } = paragraphNode;
@@ -16308,7 +16739,8 @@ function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, se
 		paragraphId: "para_render_fallback"
 	};
 	const { paragraphStyle = {}, bullet } = paragraph;
-	const documentCompatibilityPolicy = (_sectionBreakConfig$d = sectionBreakConfig.documentCompatibilityPolicy) !== null && _sectionBreakConfig$d !== void 0 ? _sectionBreakConfig$d : getDocumentCompatibilityPolicy((_viewModel$getSnapsho = viewModel.getSnapshot) === null || _viewModel$getSnapsho === void 0 || (_viewModel$getSnapsho = _viewModel$getSnapsho.call(viewModel)) === null || _viewModel$getSnapsho === void 0 ? void 0 : _viewModel$getSnapsho.documentStyle.documentFlavor);
+	const documentStyle = (_viewModel$getSnapsho = viewModel.getSnapshot) === null || _viewModel$getSnapsho === void 0 || (_viewModel$getSnapsho = _viewModel$getSnapsho.call(viewModel)) === null || _viewModel$getSnapsho === void 0 ? void 0 : _viewModel$getSnapsho.documentStyle;
+	const documentCompatibilityPolicy = (_sectionBreakConfig$d = sectionBreakConfig.documentCompatibilityPolicy) !== null && _sectionBreakConfig$d !== void 0 ? _sectionBreakConfig$d : getDocumentCompatibilityPolicy(documentStyle === null || documentStyle === void 0 ? void 0 : documentStyle.documentFlavor);
 	const shouldApplyDocumentDefaults = documentCompatibilityPolicy.applyDocumentDefaultParagraphStyle;
 	const useWordStyleLineHeight = documentCompatibilityPolicy.useWordStyleLineHeight;
 	const { skeHeaders, skeFooters, skeListLevel, drawingAnchor } = skeletonResourceReference;
@@ -16324,7 +16756,7 @@ function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, se
 	const paragraphConfig = {
 		paragraphIndex: endIndex,
 		documentCompatibilityPolicy,
-		paragraphStyle: _applyBlockRangeLayoutParagraphStyle((_viewModel$getBody2 = (_viewModel$getBody3 = viewModel.getBody) === null || _viewModel$getBody3 === void 0 ? void 0 : _viewModel$getBody3.call(viewModel)) !== null && _viewModel$getBody2 !== void 0 ? _viewModel$getBody2 : null, paragraph, paragraphStyle, shouldApplyDocumentDefaults),
+		paragraphStyle: _applyBlockRangeLayoutParagraphStyle((_viewModel$getBody2 = (_viewModel$getBody3 = viewModel.getBody) === null || _viewModel$getBody3 === void 0 ? void 0 : _viewModel$getBody3.call(viewModel)) !== null && _viewModel$getBody2 !== void 0 ? _viewModel$getBody2 : null, paragraph, paragraphStyle, documentStyle, shouldApplyDocumentDefaults),
 		docxFallbackAnchorLeft: _getFollowingIndentedParagraphAnchorLeft(viewModel, paragraph, paragraphNode, drawings, isTraditionalDocumentCompatibility(documentCompatibilityPolicy)),
 		useWordStyleLineHeight,
 		paragraphNonInlineSkeDrawings,
@@ -16367,7 +16799,7 @@ function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, se
 	let allPages = [curPage];
 	let isParagraphFirstShapedText = true;
 	let shapedTextOffset = 0;
-	for (const [_index, { text, glyphs, breakPointType }] of _mergeAdjacentCustomBlockShapedTexts(shapedTextList).entries()) {
+	for (const [_index, { text, glyphs, breakPointType }] of _mergeAdjacentCustomBlockShapedTexts(shapedTextList, paragraphNonInlineSkeDrawingsByBlockId).entries()) {
 		const textStartIndex = paragraphNode.startIndex + shapedTextOffset;
 		const textGlyphCount = _glyphCount(glyphs);
 		const textEndIndex = textStartIndex + textGlyphCount;
@@ -16884,7 +17316,8 @@ function otherHandler(index, charArray, viewModel, paragraphNode, sectionBreakCo
 		const char = (_src$match = src.match(/^[\s\S]/gu)) === null || _src$match === void 0 ? void 0 : _src$match[0];
 		if (char == null) break;
 		if (hasSpace(char) || startWithEmoji(charArray.substring(step))) break;
-		const glyph = createSkeletonLetterGlyph(char, getFontCreateConfig(index + step, viewModel, paragraphNode, sectionBreakConfig, paragraph));
+		const config = getFontCreateConfig(index + step, viewModel, paragraphNode, sectionBreakConfig, paragraph);
+		const glyph = createSkeletonLetterGlyph(char, config, getCustomRangeGlyphWidth(index + step, viewModel, paragraphNode, config));
 		glyphGroup.push(glyph);
 		src = src.substring(char.length);
 		step += char.length;
@@ -16960,7 +17393,7 @@ function punctuationSpaceAdjustment(shapedGlyphs) {
 		const nextGlyph = shapedGlyphs[i + 1];
 		const { width, content } = curGlyph;
 		const delta = width / 2;
-		if (hasCJKPunctuation(content) && hasCJKPunctuation(nextGlyph.content) && curGlyph.adjustability.shrinkability[1] + nextGlyph.adjustability.shrinkability[0] >= delta) {
+		if (cjk.hasCJKPunctuation(content) && cjk.hasCJKPunctuation(nextGlyph.content) && curGlyph.adjustability.shrinkability[1] + nextGlyph.adjustability.shrinkability[0] >= delta) {
 			const leftDelta = Math.min(curGlyph.adjustability.shrinkability[1], delta);
 			glyphShrinkRight(curGlyph, leftDelta);
 			glyphShrinkLeft(nextGlyph, delta - leftDelta);
@@ -16976,11 +17409,11 @@ function addCJKLatinSpacing(shapedTextList) {
 		const curGlyph = shapedGlyphs[i];
 		const nextGlyph = i < len - 1 ? shapedGlyphs[i + 1] : null;
 		const { width } = curGlyph;
-		if (hasCJKText(curGlyph.content) && nextGlyph && LATIN_REG.test(nextGlyph.content)) {
+		if (cjk.hasCJKText(curGlyph.content) && nextGlyph && LATIN_REG.test(nextGlyph.content)) {
 			curGlyph.width += width / 4;
 			curGlyph.adjustability.shrinkability[1] += width / 8;
 		}
-		if (hasCJKText(curGlyph.content) && prevGlyph && LATIN_REG.test(prevGlyph.content)) {
+		if (cjk.hasCJKText(curGlyph.content) && prevGlyph && LATIN_REG.test(prevGlyph.content)) {
 			curGlyph.width += width / 4;
 			curGlyph.xOffset += width / 4;
 			curGlyph.adjustability.shrinkability[0] += width / 8;
@@ -17042,7 +17475,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
 					const newSpan = createSkeletonLetterGlyph(char, config);
 					shapedGlyphs.push(newSpan);
 				} else {
-					const newSpan = createSkeletonLetterGlyph(char, config, void 0, glyphInfo);
+					const newSpan = createSkeletonLetterGlyph(char, config, getCustomRangeGlyphWidth(start, viewModel, paragraphNode, config), glyphInfo);
 					shapedGlyphs.push(newSpan);
 				}
 			}
@@ -17061,24 +17494,29 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
 						const { blockId } = customBlock;
 						const drawingOrigin = drawings[blockId];
 						if ((drawingOrigin === null || drawingOrigin === void 0 ? void 0 : drawingOrigin.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) {
+							var _viewModel$getDataMod, _viewModel$getDataMod2, _viewModel$getDataMod3, _boundingBox$height, _boundingBox$width, _ref, _viewport$layoutWidth, _viewport$height;
 							const { angle } = drawingOrigin.docTransform;
 							const { width = 0, height = 0 } = drawingOrigin.docTransform.size;
 							const boundingBox = getBoundingBox(angle, 0, width, 0, height);
-							newGlyph = createSkeletonCustomBlockGlyph(config, boundingBox.width, boundingBox.height, drawingOrigin.drawingId);
+							const viewport = getDocsCustomBlockRenderViewport((_viewModel$getDataMod = (_viewModel$getDataMod2 = (_viewModel$getDataMod3 = viewModel.getDataModel()).getUnitId) === null || _viewModel$getDataMod2 === void 0 ? void 0 : _viewModel$getDataMod2.call(_viewModel$getDataMod3)) !== null && _viewModel$getDataMod !== void 0 ? _viewModel$getDataMod : "", drawingOrigin.drawingId, {
+								fallbackHeight: (_boundingBox$height = boundingBox.height) !== null && _boundingBox$height !== void 0 ? _boundingBox$height : 0,
+								fallbackWidth: (_boundingBox$width = boundingBox.width) !== null && _boundingBox$width !== void 0 ? _boundingBox$width : 0
+							});
+							newGlyph = createSkeletonCustomBlockGlyph(config, (_ref = (_viewport$layoutWidth = viewport === null || viewport === void 0 ? void 0 : viewport.layoutWidth) !== null && _viewport$layoutWidth !== void 0 ? _viewport$layoutWidth : viewport === null || viewport === void 0 ? void 0 : viewport.width) !== null && _ref !== void 0 ? _ref : boundingBox.width, (_viewport$height = viewport === null || viewport === void 0 ? void 0 : viewport.height) !== null && _viewport$height !== void 0 ? _viewport$height : boundingBox.height, drawingOrigin.drawingId);
 						} else if (drawingOrigin != null) newGlyph = createSkeletonCustomBlockGlyph(config, 0, 0, drawingOrigin.drawingId);
 					}
 					if (newGlyph == null) newGlyph = createSkeletonLetterGlyph(char, config);
 					shapedGlyphs.push(newGlyph);
 					i += char.length;
 					src = src.substring(char.length);
-				} else if (/\s/.test(char) || hasCJK(char)) {
+				} else if (/\s/.test(char) || cjk.hasCJK(char)) {
 					const config = getFontCreateConfig(i, viewModel, paragraphNode, sectionBreakConfig, paragraph);
 					let newGlyph = null;
 					if (char === _univerjs_core.DataStreamTreeTokenType.TAB) newGlyph = createSkeletonTabGlyph(config, getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid));
 					else if (char === _univerjs_core.DataStreamTreeTokenType.PARAGRAPH) {
 						var _sectionBreakConfig$r;
 						if (((_sectionBreakConfig$r = sectionBreakConfig.renderConfig) === null || _sectionBreakConfig$r === void 0 ? void 0 : _sectionBreakConfig$r.zeroWidthParagraphBreak) === _univerjs_core.BooleanNumber.TRUE) newGlyph = createSkeletonLetterGlyph(char, config, 0);
-						else newGlyph = createSkeletonLetterGlyph(char, config);
+						else newGlyph = createSkeletonLetterGlyph(char, config, getCustomRangeGlyphWidth(i, viewModel, paragraphNode, config));
 					} else newGlyph = createSkeletonLetterGlyph(char, config);
 					shapedGlyphs.push(newGlyph);
 					i += char.length;
@@ -17225,6 +17663,7 @@ function createColumnContentPage(ctx, viewModel, columnNode, sectionBreakConfig,
 	const page = createSkeletonPage(ctx, columnSectionBreakConfig, ctx.skeletonResourceReference);
 	page.type = 3;
 	for (const paragraphNode of getColumnParagraphNodes(columnNode)) dealWidthParagraph(ctx, viewModel, paragraphNode, page, columnSectionBreakConfig);
+	updateInlineDrawingCoordsAndBorder(ctx, [page]);
 	updateBlockIndex([page], columnNode.startIndex, (_sectionBreakConfig$d = sectionBreakConfig.documentCompatibilityPolicy) !== null && _sectionBreakConfig$d !== void 0 ? _sectionBreakConfig$d : getDocumentCompatibilityPolicy());
 	applyTrailingBlockRangeSpaceBelow([page], (_ctx$dataModel = ctx.dataModel) === null || _ctx$dataModel === void 0 || (_ctx$dataModel$getBod = _ctx$dataModel.getBody) === null || _ctx$dataModel$getBod === void 0 ? void 0 : _ctx$dataModel$getBod.call(_ctx$dataModel), columnNode.endIndex);
 	return page;
@@ -17871,6 +18310,26 @@ function resolveMostSpecificPageByCharIndex(page, charIndex) {
 	}
 	return page;
 }
+function getSegmentPageFromRelativePath(skeletonData, segmentPageIndex, path) {
+	var _skeletonData$skeHead, _skeletonData$skeFoot;
+	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)];
+	for (const segmentPage of segmentPages) {
+		if (segmentPage == null) continue;
+		const page = getPageFromPath({
+			...skeletonData,
+			pages: [segmentPage]
+		}, [
+			"pages",
+			0,
+			...path
+		]);
+		if (page != null) return page;
+	}
+	return null;
+}
 var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 	constructor(_docViewModel, localeService) {
 		super(localeService);
@@ -17965,7 +18424,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				pageIndex = skeletonData.pages.indexOf(page);
 				break;
 			case 3:
-				pageIndex = path[1];
+				pageIndex = typeof path[1] === "number" ? path[1] : segmentPage;
 				break;
 			default: throw new Error("Invalid page type");
 		}
@@ -18011,7 +18470,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				pageIndex = pages.indexOf(page);
 				break;
 			case 3:
-				pageIndex = path[1];
+				pageIndex = typeof path[1] === "number" ? path[1] : segmentPageIndex;
 				break;
 			default: throw new Error("Invalid page type");
 		}
@@ -18054,7 +18513,8 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				if (skeFooter == null) return;
 				else skePage = skeFooter;
 			}
-		} else skePage = getPageFromPath(skeletonData, path);
+		} else if (pageType === 3 && path[0] !== "pages") skePage = getSegmentPageFromRelativePath(skeletonData, segmentPage, path);
+		else skePage = getPageFromPath(skeletonData, path);
 		if (skePage == null) return;
 		const glyphGroup = skePage.sections[section].columns[column].lines[line].divides[divide].glyphGroup;
 		glyph = Math.min(glyph, glyphGroup.length - 1);
@@ -18562,8 +19022,8 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				if (maybeHeaderSke) segmentPage = maybeHeaderSke;
 				else if (maybeFooterSke) segmentPage = maybeFooterSke;
 				else continue;
-			}
-			if (segmentId === "") segmentPage = resolveMostSpecificPageByCharIndex(page, charIndex);
+				segmentPage = resolveMostSpecificPageByCharIndex(segmentPage, charIndex);
+			} else segmentPage = resolveMostSpecificPageByCharIndex(page, charIndex);
 			const { sections, st, ed } = segmentPage;
 			const segmentPageParent = segmentPage.parent;
 			const isColumnSegmentPage = segmentId === "" && (segmentPageParent === null || segmentPageParent === void 0 ? void 0 : segmentPageParent.page) === segmentPage && ((_segmentPageParent$pa = segmentPageParent.parent) === null || _segmentPageParent$pa === void 0 ? void 0 : _segmentPageParent$pa.columnGroupId);
@@ -18645,7 +19105,10 @@ function createDocumentModelWithStyle(content, textStyle, config = {}) {
 				paragraphId: (0, _univerjs_core.createParagraphId)(/* @__PURE__ */ new Set()),
 				paragraphStyle: { horizontalAlign }
 			}],
-			sectionBreaks: [{ startIndex: contentLength + 1 }]
+			sectionBreaks: [{
+				sectionId: (0, _univerjs_core.createSectionId)(/* @__PURE__ */ new Set()),
+				startIndex: contentLength + 1
+			}]
 		},
 		documentStyle: {
 			pageSize: {
@@ -18729,6 +19192,36 @@ const DEFAULT_PADDING_DATA = {
 	r: 2
 };
 const RENDER_RAW_FORMULA_KEY = "RENDER_RAW_FORMULA";
+function getResolvedRenderHorizontalAlign$1(horizontalAlign, cellData) {
+	if (horizontalAlign !== _univerjs_core.HorizontalAlign.UNSPECIFIED) return horizontalAlign;
+	if ((cellData === null || cellData === void 0 ? void 0 : cellData.t) === _univerjs_core.CellValueType.NUMBER || !_univerjs_core.Tools.isDefine(cellData === null || cellData === void 0 ? void 0 : cellData.t) && typeof (cellData === null || cellData === void 0 ? void 0 : cellData.v) === "number") return _univerjs_core.HorizontalAlign.RIGHT;
+	if ((cellData === null || cellData === void 0 ? void 0 : cellData.t) === _univerjs_core.CellValueType.BOOLEAN) return _univerjs_core.HorizontalAlign.CENTER;
+	return horizontalAlign;
+}
+function setRenderTextCache(cacheItem, cellData) {
+	var _cacheItem$horizontal;
+	if (cacheItem.documentSkeleton) {
+		cacheItem.displayText = void 0;
+		cacheItem.resolvedHorizontalAlign = void 0;
+		return;
+	}
+	cacheItem.displayText = (0, _univerjs_core.getDisplayValueFromCell)(cellData);
+	cacheItem.resolvedHorizontalAlign = getResolvedRenderHorizontalAlign$1((_cacheItem$horizontal = cacheItem.horizontalAlign) !== null && _cacheItem$horizontal !== void 0 ? _cacheItem$horizontal : _univerjs_core.HorizontalAlign.UNSPECIFIED, cellData);
+}
+function pushRowRange(ranges, row, startColumn, endColumn) {
+	if (endColumn < startColumn) return;
+	const last = ranges[ranges.length - 1];
+	if (last && last.startRow === row && last.endRow === row && last.endColumn + 1 === startColumn) {
+		last.endColumn = endColumn;
+		return;
+	}
+	ranges.push({
+		startRow: row,
+		endRow: row,
+		startColumn,
+		endColumn
+	});
+}
 const CACHE_COUNT = 100;
 let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.SheetSkeleton {
 	constructor(worksheet, _styles, _localeService, _contextService, _configService, _injector) {
@@ -18742,6 +19235,7 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		_defineProperty(this, "_cacheRangeMap", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_visibleRangeMap", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_overflowCache", new _univerjs_core.ObjectMatrix());
+		_defineProperty(this, "_incrementalFontRenderRanges", []);
 		_defineProperty(this, "_stylesCache", {
 			background: {},
 			backgroundPositions: new _univerjs_core.ObjectMatrix(),
@@ -18799,6 +19293,9 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 	get overflowCache() {
 		return this._overflowCache;
 	}
+	get incrementalFontRenderRanges() {
+		return this._incrementalFontRenderRanges;
+	}
 	get showGridlines() {
 		return this._showGridlines;
 	}
@@ -18884,7 +19381,31 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		this.updateVisibleRange(vpInfo);
 		const rowColumnSegment = this._drawingRange;
 		const columnWidthAccumulation = this.columnWidthAccumulation;
-		const styleRanges = !!vpInfo && !vpInfo.isDirty && !vpInfo.isForceDirty && (!!((_vpInfo$diffBounds = vpInfo.diffBounds) === null || _vpInfo$diffBounds === void 0 ? void 0 : _vpInfo$diffBounds.length) || !!((_vpInfo$diffCacheBoun = vpInfo.diffCacheBounds) === null || _vpInfo$diffCacheBoun === void 0 ? void 0 : _vpInfo$diffCacheBoun.length) || !!vpInfo.diffX || !!vpInfo.diffY) ? vpInfo.shouldCacheUpdate ? (_vpInfo$diffCacheBoun2 = (_vpInfo$diffCacheBoun3 = vpInfo.diffCacheBounds) === null || _vpInfo$diffCacheBoun3 === void 0 ? void 0 : _vpInfo$diffCacheBoun3.map((bound) => this.getRangeByViewBound(bound))) !== null && _vpInfo$diffCacheBoun2 !== void 0 ? _vpInfo$diffCacheBoun2 : [] : [] : [rowColumnSegment];
+		const isIncrementalScroll = !!vpInfo && !vpInfo.isDirty && !vpInfo.isForceDirty && (!!((_vpInfo$diffBounds = vpInfo.diffBounds) === null || _vpInfo$diffBounds === void 0 ? void 0 : _vpInfo$diffBounds.length) || !!((_vpInfo$diffCacheBoun = vpInfo.diffCacheBounds) === null || _vpInfo$diffCacheBoun === void 0 ? void 0 : _vpInfo$diffCacheBoun.length) || !!vpInfo.diffX || !!vpInfo.diffY);
+		const hasMergeData = this.worksheet.getMergeData().length > 0;
+		const isScrolling = !!vpInfo && (!!vpInfo.diffX || !!vpInfo.diffY);
+		const shouldRefreshCacheForScroll = isIncrementalScroll && (hasMergeData && isScrolling || !!vpInfo.shouldCacheUpdate && !!vpInfo.diffX);
+		const shouldUseIncrementalStyleRange = isIncrementalScroll && !shouldRefreshCacheForScroll;
+		const styleRanges = shouldUseIncrementalStyleRange ? vpInfo.shouldCacheUpdate ? (_vpInfo$diffCacheBoun2 = (_vpInfo$diffCacheBoun3 = vpInfo.diffCacheBounds) === null || _vpInfo$diffCacheBoun3 === void 0 ? void 0 : _vpInfo$diffCacheBoun3.map((bound) => this.getRangeByViewBound(bound))) !== null && _vpInfo$diffCacheBoun2 !== void 0 ? _vpInfo$diffCacheBoun2 : [] : [] : [rowColumnSegment];
+		const visibleCellOptions = hasMergeData ? null : {
+			cacheItem: {
+				bg: true,
+				border: true
+			},
+			reuseExisting: shouldUseIncrementalStyleRange,
+			hasMergeData,
+			rowVisible: true
+		};
+		const overflowCellOptions = hasMergeData ? null : {
+			cacheItem: {
+				bg: false,
+				border: false
+			},
+			reuseExisting: shouldUseIncrementalStyleRange,
+			hasMergeData,
+			rowVisible: true
+		};
+		this._incrementalFontRenderRanges = [];
 		for (const styleRange of styleRanges) {
 			const { startRow: visibleStartRow, endRow: visibleEndRow, startColumn: visibleStartColumn, endColumn: visibleEndColumn } = styleRange;
 			if (visibleEndColumn === -1 || visibleEndRow === -1) continue;
@@ -18909,26 +19430,57 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 					startColumn: visibleStartColumn,
 					endColumn: visibleEndColumn
 				});
-				for (let c = visibleStartColumn; c <= visibleEndColumn; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
-					bg: true,
-					border: true
-				} });
-				for (let c = expandStartCol; c < visibleEndColumn; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
-					bg: false,
-					border: false
-				} });
+				for (let c = visibleStartColumn; c <= visibleEndColumn; c++) this._setStylesCacheForOneCell(r, c, visibleCellOptions !== null && visibleCellOptions !== void 0 ? visibleCellOptions : {
+					cacheItem: {
+						bg: true,
+						border: true
+					},
+					reuseExisting: shouldUseIncrementalStyleRange,
+					hasMergeData,
+					rowVisible: true
+				});
+				if (shouldUseIncrementalStyleRange) pushRowRange(this._incrementalFontRenderRanges, r, visibleStartColumn, visibleEndColumn);
+				for (let c = visibleStartColumn - 1; c >= expandStartCol; c--) {
+					this._setStylesCacheForOneCell(r, c, overflowCellOptions !== null && overflowCellOptions !== void 0 ? overflowCellOptions : {
+						cacheItem: {
+							bg: false,
+							border: false
+						},
+						reuseExisting: shouldUseIncrementalStyleRange,
+						hasMergeData,
+						rowVisible: true
+					});
+					if (shouldUseIncrementalStyleRange) pushRowRange(this._incrementalFontRenderRanges, r, c, c);
+					if (!(0, _univerjs_core.isCellCoverable)(this.worksheet.getCell(r, c)) || hasMergeData && this.intersectMergeRange(r, c)) break;
+				}
 				if (visibleEndColumn === 0) continue;
-				for (let c = visibleEndColumn + 1; c < expandEndCol; c++) this._setStylesCacheForOneCell(r, c, { cacheItem: {
-					bg: false,
-					border: false
-				} });
+				for (let c = visibleEndColumn + 1; c <= expandEndCol; c++) {
+					this._setStylesCacheForOneCell(r, c, overflowCellOptions !== null && overflowCellOptions !== void 0 ? overflowCellOptions : {
+						cacheItem: {
+							bg: false,
+							border: false
+						},
+						reuseExisting: shouldUseIncrementalStyleRange,
+						hasMergeData,
+						rowVisible: true
+					});
+					if (shouldUseIncrementalStyleRange) pushRowRange(this._incrementalFontRenderRanges, r, c, c);
+					if (!(0, _univerjs_core.isCellCoverable)(this.worksheet.getCell(r, c)) || hasMergeData && this.intersectMergeRange(r, c)) break;
+				}
 			}
 			const mergeRanges = [];
 			for (const mergeVisibleRange of mergeVisibleRanges) {
 				const mergeRangeInVisible = this.getCurrentRowColumnSegmentMergeData(mergeVisibleRange);
 				mergeRanges.push(...mergeRangeInVisible);
 			}
-			for (const mergeRange of mergeRanges) this._setStylesCacheForOneCell(mergeRange.startRow, mergeRange.startColumn, { mergeRange });
+			for (const mergeRange of mergeRanges) {
+				this._setStylesCacheForOneCell(mergeRange.startRow, mergeRange.startColumn, {
+					mergeRange,
+					reuseExisting: shouldUseIncrementalStyleRange,
+					hasMergeData
+				});
+				if (shouldUseIncrementalStyleRange) pushRowRange(this._incrementalFontRenderRanges, mergeRange.startRow, mergeRange.startColumn, mergeRange.startColumn);
+			}
 		}
 		return this;
 	}
@@ -19213,6 +19765,22 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 			endColumn
 		};
 	}
+	_isOverflowBlockedByAdjacentCell(row, column, horizontalAlign, hasMergeData = true) {
+		const leftBlocked = () => this._isOverflowSideBlocked(row, column, -1, hasMergeData);
+		const rightBlocked = () => this._isOverflowSideBlocked(row, column, 1, hasMergeData);
+		if (horizontalAlign === _univerjs_core.HorizontalAlign.CENTER) return leftBlocked() && rightBlocked();
+		if (horizontalAlign === _univerjs_core.HorizontalAlign.RIGHT) return leftBlocked();
+		return rightBlocked();
+	}
+	_isOverflowSideBlocked(row, column, direction, hasMergeData = true) {
+		var _this$_stylesCache$fo;
+		const adjacentColumn = column + direction;
+		if (adjacentColumn < 0 || adjacentColumn >= this.getColumnCount()) return true;
+		const rawAdjacentCell = this._cellData.getValue(row, adjacentColumn);
+		if (rawAdjacentCell && !(0, _univerjs_core.isCellCoverable)(rawAdjacentCell)) return true;
+		const cachedAdjacentCell = (_this$_stylesCache$fo = this._stylesCache.fontMatrix.getValue(row, adjacentColumn)) === null || _this$_stylesCache$fo === void 0 ? void 0 : _this$_stylesCache$fo.cellData;
+		return !(0, _univerjs_core.isCellCoverable)(cachedAdjacentCell !== null && cachedAdjacentCell !== void 0 ? cachedAdjacentCell : this.worksheet.getCell(row, adjacentColumn)) || hasMergeData && this.intersectMergeRange(row, adjacentColumn);
+	}
 	/**
 	* Get cell by pos(offsetX, offsetY).
 	* @deprecated Please use `getCellWithCoordByOffset` instead.
@@ -19382,7 +19950,7 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 	* the text content of this cell can be drawn to both sides, not limited by the cell's width.
 	* Overflow on the left or right is aligned according to the text's horizontal alignment.
 	*/
-	_calculateOverflowCell(row, column, docsConfig) {
+	_calculateOverflowCell(row, column, docsConfig, hasMergeData = true) {
 		const { documentSkeleton, vertexAngle = 0, centerAngle = 0, horizontalAlign, wrapStrategy } = docsConfig;
 		const { t: cellValueType = _univerjs_core.CellValueType.STRING } = this._cellData.getValue(row, column) || {};
 		let horizontalAlignPos = horizontalAlign;
@@ -19398,7 +19966,13 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		* Numerical and Boolean values are not displayed with overflow.
 		*/
 		if ((wrapStrategy === _univerjs_core.WrapStrategy.OVERFLOW || wrapStrategy === _univerjs_core.WrapStrategy.UNSPECIFIED) && cellValueType !== _univerjs_core.CellValueType.NUMBER && cellValueType !== _univerjs_core.CellValueType.BOOLEAN && horizontalAlign !== _univerjs_core.HorizontalAlign.JUSTIFIED) {
-			if (this.intersectMergeRange(row, column)) return true;
+			var _docsConfig$cellData$, _docsConfig$cellData, _docsConfig$cellData2;
+			docsConfig.textFitsCurrentCell = false;
+			if (hasMergeData && this.intersectMergeRange(row, column)) return true;
+			const columnStart = this.columnWidthAccumulation[column - 1] || 0;
+			const currentColumnWidth = (this.columnWidthAccumulation[column] || columnStart) - columnStart;
+			const rawText = (_docsConfig$cellData$ = (_docsConfig$cellData = docsConfig.cellData) === null || _docsConfig$cellData === void 0 || (_docsConfig$cellData = _docsConfig$cellData.p) === null || _docsConfig$cellData === void 0 || (_docsConfig$cellData = _docsConfig$cellData.body) === null || _docsConfig$cellData === void 0 ? void 0 : _docsConfig$cellData.dataStream) !== null && _docsConfig$cellData$ !== void 0 ? _docsConfig$cellData$ : (_docsConfig$cellData2 = docsConfig.cellData) === null || _docsConfig$cellData2 === void 0 ? void 0 : _docsConfig$cellData2.v;
+			if ((Boolean(documentSkeleton) || `${rawText !== null && rawText !== void 0 ? rawText : ""}`.length * 4 > currentColumnWidth) && this._isOverflowBlockedByAdjacentCell(row, column, horizontalAlignPos, hasMergeData)) return true;
 			let contentSize;
 			if (documentSkeleton) contentSize = getDocsSkeletonPageSize(documentSkeleton, vertexAngle);
 			else {
@@ -19418,11 +19992,15 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 					height: cellHeight
 				};
 			}
+			if (contentSize.width < currentColumnWidth) {
+				docsConfig.textFitsCurrentCell = true;
+				return true;
+			}
 			const { startColumn, endColumn } = this.getOverflowPosition(contentSize, horizontalAlignPos, row, column, this.getColumnCount());
 			if (startColumn === endColumn) return true;
 			this.appendToOverflowCache(row, column, startColumn, endColumn);
 		} else if (wrapStrategy === _univerjs_core.WrapStrategy.WRAP && vertexAngle !== 0) {
-			if (this.intersectMergeRange(row, column)) return true;
+			if (hasMergeData && this.intersectMergeRange(row, column)) return true;
 			const { startY, endY } = this.getCellWithCoordByIndex(row, column);
 			const cellHeight = endY - startY;
 			documentSkeleton.getViewModel().getDataModel().updateDocumentDataPageSize(cellHeight);
@@ -19454,16 +20032,18 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		const startRow = (0, _univerjs_core.searchArray)(rowHeightAccumulation, Math.round(viewBound.top) - this.columnHeaderHeightAndMarginTop);
 		const endY = Math.round(viewBound.bottom) - this.columnHeaderHeightAndMarginTop;
 		let endRow = (0, _univerjs_core.searchArray)(rowHeightAccumulation, endY);
-		if (endRow < lenOfRowData && rowHeightAccumulation[endRow - 1] === endY) endRow -= 1;
+		const isEndYOnBoundary = endRow < lenOfRowData && rowHeightAccumulation[endRow - 1] === endY;
+		if (isEndYOnBoundary) endRow -= 1;
 		const startColumn = (0, _univerjs_core.searchArray)(columnWidthAccumulation, Math.round(viewBound.left) - this.rowHeaderWidthAndMarginLeft);
 		const endX = Math.round(viewBound.right) - this.rowHeaderWidthAndMarginLeft;
 		let endColumn = (0, _univerjs_core.searchArray)(columnWidthAccumulation, endX);
-		if (endColumn < lenOfColData && columnWidthAccumulation[endColumn - 1] === endX) endColumn -= 1;
+		const isEndXOnBoundary = endColumn < lenOfColData && columnWidthAccumulation[endColumn - 1] === endX;
+		if (isEndXOnBoundary) endColumn -= 1;
 		if (isPrinting) return {
 			startRow,
-			endRow: endRow === lenOfRowData - 1 ? endRow : endRow - 1,
+			endRow: endRow === lenOfRowData - 1 || isEndYOnBoundary ? endRow : endRow - 1,
 			startColumn,
-			endColumn: endColumn === lenOfColData - 1 ? endColumn : endColumn - 1
+			endColumn: endColumn === lenOfColData - 1 || isEndXOnBoundary ? endColumn : endColumn - 1
 		};
 		return {
 			startRow,
@@ -19514,7 +20094,15 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		for (let i = 0; i < ranges.length; i++) {
 			const range = ranges[i];
 			_univerjs_core.Range.foreach(range, (row, col) => {
+				var _this$_stylesCache$bo, _this$_stylesCache$ba, _this$_stylesCache$ba2;
 				this._stylesCache.fontMatrix.realDeleteValue(row, col);
+				(_this$_stylesCache$bo = this._stylesCache.border) === null || _this$_stylesCache$bo === void 0 || _this$_stylesCache$bo.realDeleteValue(row, col);
+				(_this$_stylesCache$ba = this._stylesCache.backgroundPositions) === null || _this$_stylesCache$ba === void 0 || _this$_stylesCache$ba.realDeleteValue(row, col);
+				this._handleBgMatrix.realDeleteValue(row, col);
+				this._handleBorderMatrix.realDeleteValue(row, col);
+				Object.values((_this$_stylesCache$ba2 = this._stylesCache.background) !== null && _this$_stylesCache$ba2 !== void 0 ? _this$_stylesCache$ba2 : {}).forEach((backgroundMatrix) => {
+					backgroundMatrix.realDeleteValue(row, col);
+				});
 			});
 		}
 		this.makeDirty(true);
@@ -19555,15 +20143,15 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		}).bg) return;
 		this._handleBgMatrix.setValue(row, col, true);
 		if (style && style.bg && style.bg.rgb) {
-			var _this$_stylesCache$ba;
+			var _this$_stylesCache$ba3;
 			const rgb = style.bg.rgb;
 			if (!this._stylesCache.background[rgb]) this._stylesCache.background[rgb] = new _univerjs_core.ObjectMatrix();
 			this._stylesCache.background[rgb].setValue(row, col, rgb);
 			const cellInfo = this.getCellWithCoordByIndex(row, col, false);
-			(_this$_stylesCache$ba = this._stylesCache.backgroundPositions) === null || _this$_stylesCache$ba === void 0 || _this$_stylesCache$ba.setValue(row, col, cellInfo);
+			(_this$_stylesCache$ba3 = this._stylesCache.backgroundPositions) === null || _this$_stylesCache$ba3 === void 0 || _this$_stylesCache$ba3.setValue(row, col, cellInfo);
 		}
 	}
-	_setFontStylesCache(row, col, cellData, style) {
+	_setFontStylesCache(row, col, cellData, style, hasMergeData = true) {
 		var _style$tr2;
 		if ((0, _univerjs_core.isNullCell)(cellData)) return;
 		let config = {
@@ -19575,6 +20163,7 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		else {
 			const cacheItem = cacheValue;
 			cacheItem.cellData = cellData;
+			setRenderTextCache(cacheItem, cellData);
 			this._stylesCache.fontMatrix.setValue(row, col, cacheValue);
 			return;
 		}
@@ -19618,8 +20207,10 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 				style
 			};
 		}
-		this._calculateOverflowCell(row, col, config);
-		this._stylesCache.fontMatrix.setValue(row, col, config);
+		const fontCacheItem = config;
+		setRenderTextCache(fontCacheItem, cellData);
+		this._calculateOverflowCell(row, col, fontCacheItem, hasMergeData);
+		this._stylesCache.fontMatrix.setValue(row, col, fontCacheItem);
 	}
 	/**
 	* Set border background and font to this._stylesCache cell by cell.
@@ -19628,19 +20219,37 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 	* @param options {{ mergeRange: IRange; cacheItem: ICacheItem } | undefined}
 	*/
 	_setStylesCacheForOneCell(row, col, options) {
+		var _options$hasMergeData, _options$rowVisible, _options$hasMergeData2;
 		if (row === -1 || col === -1) return;
 		if (!options) options = { cacheItem: {
 			bg: true,
 			border: true
 		} };
-		const { isMerged, isMergedMainCell, startRow, startColumn, endRow, endColumn } = this.worksheet.getCellInfoInMergeData(row, col);
-		if (isMerged) options.mergeRange = {
-			startRow,
-			startColumn,
-			endRow,
-			endColumn
-		};
-		if (this.worksheet.getColVisible(col) === false || this.worksheet.getRowVisible(row) === false) {
+		const cacheItem = options.cacheItem;
+		if (options.reuseExisting && cacheItem && !options.mergeRange) {
+			const bgHandled = !cacheItem.bg || _univerjs_core.Tools.isDefine(this._handleBgMatrix.getValue(row, col));
+			const borderHandled = !cacheItem.border || _univerjs_core.Tools.isDefine(this._handleBorderMatrix.getValue(row, col));
+			if (bgHandled && borderHandled && this._stylesCache.fontMatrix.getValue(row, col)) return;
+		}
+		const hasMergeData = (_options$hasMergeData = options.hasMergeData) !== null && _options$hasMergeData !== void 0 ? _options$hasMergeData : true;
+		let isMerged = false;
+		let isMergedMainCell = false;
+		if (hasMergeData) {
+			const mergeInfo = this.worksheet.getCellInfoInMergeData(row, col);
+			isMerged = mergeInfo.isMerged;
+			isMergedMainCell = mergeInfo.isMergedMainCell;
+			if (isMerged) {
+				const { startRow, startColumn, endRow, endColumn } = mergeInfo;
+				options.mergeRange = {
+					startRow,
+					startColumn,
+					endRow,
+					endColumn
+				};
+			}
+		}
+		const rowVisible = (_options$rowVisible = options.rowVisible) !== null && _options$rowVisible !== void 0 ? _options$rowVisible : this.worksheet.getRowVisible(row);
+		if (this.worksheet.getColVisible(col) === false || rowVisible === false) {
 			if (isMerged && !isMergedMainCell) return;
 			else if (!isMergedMainCell) return;
 		}
@@ -19652,7 +20261,7 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		this._setFontStylesCache(row, col, {
 			...cell,
 			s: style
-		}, style);
+		}, style, (_options$hasMergeData2 = options.hasMergeData) !== null && _options$hasMergeData2 !== void 0 ? _options$hasMergeData2 : true);
 	}
 	/**
 	* pro/issues/344
@@ -19865,6 +20474,19 @@ function rotatedBoundingBox(width, height, angleDegrees) {
 		rotatedHeight: Math.abs(width * Math.sin(angle)) + Math.abs(height * Math.cos(angle))
 	};
 }
+function getResolvedRenderHorizontalAlign(fontCache, cellData) {
+	if (fontCache.resolvedHorizontalAlign !== void 0) return fontCache.resolvedHorizontalAlign;
+	const { horizontalAlign } = fontCache;
+	if (horizontalAlign !== _univerjs_core.HorizontalAlign.UNSPECIFIED) return horizontalAlign;
+	if (cellData.t === _univerjs_core.CellValueType.NUMBER || !_univerjs_core.Tools.isDefine(cellData.t) && typeof cellData.v === "number") return _univerjs_core.HorizontalAlign.RIGHT;
+	if (cellData.t === _univerjs_core.CellValueType.BOOLEAN) return _univerjs_core.HorizontalAlign.CENTER;
+	return horizontalAlign;
+}
+function needsFontRenderExtensionBounds(fontCache) {
+	var _fontCache$cellData;
+	const extension = (_fontCache$cellData = fontCache.cellData) === null || _fontCache$cellData === void 0 ? void 0 : _fontCache$cellData.fontRenderExtension;
+	return Boolean((extension === null || extension === void 0 ? void 0 : extension.isSkip) || (extension === null || extension === void 0 ? void 0 : extension.leftOffset) || (extension === null || extension === void 0 ? void 0 : extension.rightOffset));
+}
 var Font = class extends SheetExtension {
 	constructor() {
 		super();
@@ -19895,7 +20517,7 @@ var Font = class extends SheetExtension {
 		const { rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
 		if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0 || !worksheet) return;
 		const scale = this._getScale(parentScale);
-		const { viewRanges = [], checkOutOfViewBound } = moreBoundsInfo;
+		const { fontRenderRanges, viewRanges = [], checkOutOfViewBound } = moreBoundsInfo;
 		const lastRowIndex = spreadsheetSkeleton.getRowCount() - 1;
 		const lastColIndex = spreadsheetSkeleton.getColumnCount() - 1;
 		const expandedViewRanges = viewRanges.map((range) => clampRange({
@@ -19903,43 +20525,51 @@ var Font = class extends SheetExtension {
 			startColumn: range.startColumn - 20,
 			endColumn: range.endColumn + 20
 		}, lastRowIndex, lastColIndex));
+		const rangesToScan = (fontRenderRanges === null || fontRenderRanges === void 0 ? void 0 : fontRenderRanges.length) ? fontRenderRanges : expandedViewRanges;
 		const renderFontContext = {
 			ctx,
 			scale,
 			columnTotalWidth,
 			rowTotalHeight,
-			viewRanges: expandedViewRanges,
+			viewRanges: (fontRenderRanges === null || fontRenderRanges === void 0 ? void 0 : fontRenderRanges.length) ? viewRanges : expandedViewRanges,
 			checkOutOfViewBound: checkOutOfViewBound || true,
 			diffRanges,
 			spreadsheetSkeleton
 		};
 		ctx.save();
+		const hasMerge = spreadsheetSkeleton.worksheet.getMergeData().length > 0;
 		const uniqueMergeRanges = [];
-		const mergeRangeIDSet = /* @__PURE__ */ new Set();
-		expandedViewRanges.forEach((range) => {
-			spreadsheetSkeleton.worksheet.getMergedCellRange(range.startRow, range.startColumn, range.endRow, range.endColumn).forEach((mergeRange) => {
-				const mergeRangeIndex = spreadsheetSkeleton.worksheet.getSpanModel().getMergeDataIndex(mergeRange.startRow, mergeRange.startColumn);
+		const mergeRangeIDSet = hasMerge ? /* @__PURE__ */ new Set() : null;
+		const spanModel = hasMerge ? spreadsheetSkeleton.worksheet.getSpanModel() : null;
+		rangesToScan.forEach((range) => {
+			if (hasMerge && spanModel && mergeRangeIDSet) spreadsheetSkeleton.worksheet.getMergedCellRange(range.startRow, range.startColumn, range.endRow, range.endColumn).forEach((mergeRange) => {
+				const mergeRangeIndex = spanModel.getMergeDataIndex(mergeRange.startRow, mergeRange.startColumn);
 				if (!mergeRangeIDSet.has(mergeRangeIndex)) {
 					mergeRangeIDSet.add(mergeRangeIndex);
 					uniqueMergeRanges.push(mergeRange);
 				}
 			});
-			_univerjs_core.Range.foreach(range, (row, col) => {
-				if (spreadsheetSkeleton.worksheet.getSpanModel().getMergeDataIndex(row, col) !== -1) return;
+			const { startRow, endRow, startColumn, endColumn } = range;
+			for (let row = startRow; row <= endRow; row++) for (let col = startColumn; col <= endColumn; col++) {
+				const fontCache = fontMatrix.getValue(row, col);
+				if (!fontCache) continue;
+				if (spanModel && spanModel.getMergeDataIndex(row, col) !== -1) continue;
 				const cellInfo = spreadsheetSkeleton.getCellWithCoordByIndex(row, col, false);
-				if (!cellInfo) return;
+				if (!cellInfo) continue;
 				renderFontContext.cellInfo = cellInfo;
-				this._renderFontEachCell(renderFontContext, row, col, fontMatrix);
-			});
+				this._renderFontEachCell(renderFontContext, row, col, fontMatrix, fontCache);
+			}
 		});
 		uniqueMergeRanges.forEach((range) => {
+			const fontCache = fontMatrix.getValue(range.startRow, range.startColumn);
+			if (!fontCache) return;
 			renderFontContext.cellInfo = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
-			this._renderFontEachCell(renderFontContext, range.startRow, range.startColumn, fontMatrix);
+			this._renderFontEachCell(renderFontContext, range.startRow, range.startColumn, fontMatrix, fontCache);
 		});
 		ctx.restore();
 	}
-	_renderFontEachCell(renderFontCtx, row, col, fontMatrix) {
-		var _cellData$fontRenderE;
+	_renderFontEachCell(renderFontCtx, row, col, fontMatrix, cacheValue) {
+		var _fontCache$cellData2;
 		const { ctx, viewRanges, diffRanges, spreadsheetSkeleton, cellInfo } = renderFontCtx;
 		const { startY, endY, startX, endX } = cellInfo;
 		const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
@@ -19954,7 +20584,7 @@ var Font = class extends SheetExtension {
 			renderFontCtx.endX = mergeInfo.endX;
 			renderFontCtx.endY = mergeInfo.endY;
 		}
-		const fontCache = fontMatrix.getValue(row, col);
+		const fontCache = cacheValue !== null && cacheValue !== void 0 ? cacheValue : fontMatrix.getValue(row, col);
 		if (!fontCache) return true;
 		renderFontCtx.fontCache = fontCache;
 		const overflowRange = spreadsheetSkeleton.overflowCache.getValue(row, col);
@@ -19980,8 +20610,19 @@ var Font = class extends SheetExtension {
 			}
 			if (isAllColHidden) return true;
 		}
-		const cellData = spreadsheetSkeleton.worksheet.getCell(row, col) || {};
-		if (cellData === null || cellData === void 0 || (_cellData$fontRenderE = cellData.fontRenderExtension) === null || _cellData$fontRenderE === void 0 ? void 0 : _cellData$fontRenderE.isSkip) return true;
+		if ((_fontCache$cellData2 = fontCache.cellData) === null || _fontCache$cellData2 === void 0 ? void 0 : _fontCache$cellData2.fontRenderExtension) {
+			var _cellData$fontRenderE;
+			const cellData = spreadsheetSkeleton.worksheet.getCell(row, col) || {};
+			if (cellData === null || cellData === void 0 || (_cellData$fontRenderE = cellData.fontRenderExtension) === null || _cellData$fontRenderE === void 0 ? void 0 : _cellData$fontRenderE.isSkip) return true;
+		}
+		if (this._renderPlainTextWithoutClip(ctx, renderFontCtx, fontCache)) {
+			renderFontCtx.startX = 0;
+			renderFontCtx.startY = 0;
+			renderFontCtx.endX = 0;
+			renderFontCtx.endY = 0;
+			renderFontCtx.overflowRectangle = null;
+			return false;
+		}
 		ctx.save();
 		ctx.beginPath();
 		renderFontCtx.overflowRectangle = overflowRange;
@@ -19989,7 +20630,6 @@ var Font = class extends SheetExtension {
 		ctx.translate(renderFontCtx.startX + FIX_ONE_PIXEL_BLUR_OFFSET, renderFontCtx.startY + FIX_ONE_PIXEL_BLUR_OFFSET);
 		if (fontCache.documentSkeleton) this._renderDocuments(ctx, row, col, renderFontCtx, spreadsheetSkeleton.overflowCache);
 		else this._renderText(ctx, row, col, renderFontCtx, spreadsheetSkeleton.overflowCache);
-		ctx.closePath();
 		ctx.restore();
 		if (fontCache.documentSkeleton) {
 			var _documentDataModel$ge;
@@ -20009,15 +20649,49 @@ var Font = class extends SheetExtension {
 		renderFontCtx.overflowRectangle = null;
 		return false;
 	}
+	_renderPlainTextWithoutClip(ctx, renderFontCtx, fontCache) {
+		var _fontCache$style, _fontCache$style2, _fontCache$style$pd, _fontCache$style3, _padding$l, _padding$r, _padding$t, _padding$b, _fontCache$displayTex, _fontCache$style4;
+		const { cellData, documentSkeleton, textFitsCurrentCell, vertexAngle = 0, centerAngle = 0, wrapStrategy } = fontCache;
+		if (!textFitsCurrentCell) return false;
+		if (documentSkeleton) return false;
+		if (vertexAngle !== 0 || centerAngle !== 0) return false;
+		if (wrapStrategy === _univerjs_core.WrapStrategy.WRAP) return false;
+		if (needsFontRenderExtensionBounds(fontCache)) return false;
+		if (((_fontCache$style = fontCache.style) === null || _fontCache$style === void 0 || (_fontCache$style = _fontCache$style.st) === null || _fontCache$style === void 0 ? void 0 : _fontCache$style.s) || ((_fontCache$style2 = fontCache.style) === null || _fontCache$style2 === void 0 || (_fontCache$style2 = _fontCache$style2.ul) === null || _fontCache$style2 === void 0 ? void 0 : _fontCache$style2.s)) return false;
+		if ((cellData === null || cellData === void 0 ? void 0 : cellData.v) === void 0 || (cellData === null || cellData === void 0 ? void 0 : cellData.v) === null) return false;
+		const padding = (_fontCache$style$pd = (_fontCache$style3 = fontCache.style) === null || _fontCache$style3 === void 0 ? void 0 : _fontCache$style3.pd) !== null && _fontCache$style$pd !== void 0 ? _fontCache$style$pd : DEFAULT_PADDING_DATA;
+		const paddingLeft = (_padding$l = padding.l) !== null && _padding$l !== void 0 ? _padding$l : DEFAULT_PADDING_DATA.l;
+		const paddingRight = (_padding$r = padding.r) !== null && _padding$r !== void 0 ? _padding$r : DEFAULT_PADDING_DATA.r;
+		const paddingTop = (_padding$t = padding.t) !== null && _padding$t !== void 0 ? _padding$t : DEFAULT_PADDING_DATA.t;
+		const paddingBottom = (_padding$b = padding.b) !== null && _padding$b !== void 0 ? _padding$b : DEFAULT_PADDING_DATA.b;
+		const text = (_fontCache$displayTex = fontCache.displayText) !== null && _fontCache$displayTex !== void 0 ? _fontCache$displayTex : (0, _univerjs_core.getDisplayValueFromCell)(cellData);
+		const { startX, startY, endX, endY } = renderFontCtx;
+		const cellWidth = endX - startX - paddingLeft - paddingRight;
+		const cellHeight = endY - startY - paddingTop - paddingBottom;
+		const hAlign = getResolvedRenderHorizontalAlign(fontCache, cellData);
+		Text.drawPlainWith(ctx, {
+			text,
+			fontStyle: fontCache.fontString,
+			hAlign,
+			vAlign: fontCache.verticalAlign,
+			width: cellWidth,
+			height: cellHeight,
+			left: startX + FIX_ONE_PIXEL_BLUR_OFFSET + paddingLeft,
+			top: startY + FIX_ONE_PIXEL_BLUR_OFFSET + paddingTop,
+			color: (_fontCache$style4 = fontCache.style) === null || _fontCache$style4 === void 0 || (_fontCache$style4 = _fontCache$style4.cl) === null || _fontCache$style4 === void 0 ? void 0 : _fontCache$style4.rgb,
+			cellValueType: cellData.t
+		});
+		return true;
+	}
 	_renderImages(ctx, fontsConfig, startX, startY, endX, endY) {
-		var _fontsConfig$style, _padding$l, _padding$r, _padding$t, _padding$b, _getSkeletonData;
+		var _fontsConfig$style, _padding$l2, _padding$r2, _padding$t2, _padding$b2, _getSkeletonData;
 		const { documentSkeleton, verticalAlign, horizontalAlign } = fontsConfig;
 		const PADDING = 2;
 		const padding = (_fontsConfig$style = fontsConfig.style) === null || _fontsConfig$style === void 0 ? void 0 : _fontsConfig$style.pd;
-		const paddingLeft = (_padding$l = padding === null || padding === void 0 ? void 0 : padding.l) !== null && _padding$l !== void 0 ? _padding$l : PADDING;
-		const paddingRight = (_padding$r = padding === null || padding === void 0 ? void 0 : padding.r) !== null && _padding$r !== void 0 ? _padding$r : PADDING;
-		const paddingTop = (_padding$t = padding === null || padding === void 0 ? void 0 : padding.t) !== null && _padding$t !== void 0 ? _padding$t : PADDING;
-		const paddingBottom = (_padding$b = padding === null || padding === void 0 ? void 0 : padding.b) !== null && _padding$b !== void 0 ? _padding$b : PADDING;
+		const paddingLeft = (_padding$l2 = padding === null || padding === void 0 ? void 0 : padding.l) !== null && _padding$l2 !== void 0 ? _padding$l2 : PADDING;
+		const paddingRight = (_padding$r2 = padding === null || padding === void 0 ? void 0 : padding.r) !== null && _padding$r2 !== void 0 ? _padding$r2 : PADDING;
+		const paddingTop = (_padding$t2 = padding === null || padding === void 0 ? void 0 : padding.t) !== null && _padding$t2 !== void 0 ? _padding$t2 : PADDING;
+		const paddingBottom = (_padding$b2 = padding === null || padding === void 0 ? void 0 : padding.b) !== null && _padding$b2 !== void 0 ? _padding$b2 : PADDING;
 		const contentStartX = startX + paddingLeft;
 		const contentEndX = endX - paddingRight;
 		const contentStartY = startY + paddingTop;
@@ -20087,7 +20761,7 @@ var Font = class extends SheetExtension {
 	* @param fontCache
 	*/
 	_clipByRenderBounds(renderFontContext, row, col, padding = 0) {
-		var _fontCache$cellData$f, _fontCache$cellData, _fontCache$cellData$f2, _fontCache$cellData2;
+		var _fontCache$cellData$f, _fontCache$cellData3, _fontCache$cellData$f2, _fontCache$cellData4;
 		const { ctx, scale, overflowRectangle, fontCache } = renderFontContext;
 		let { startX, endX, startY, endY } = renderFontContext;
 		const { horizontalAlign = 0, vertexAngle = 0, centerAngle = 0 } = fontCache;
@@ -20096,8 +20770,8 @@ var Font = class extends SheetExtension {
 			if (centerAngle === 90 && vertexAngle === 90) horizontalAlignOverFlow = _univerjs_core.HorizontalAlign.CENTER;
 			else if (vertexAngle > 0 && vertexAngle !== 90 || vertexAngle === -90) horizontalAlignOverFlow = _univerjs_core.HorizontalAlign.RIGHT;
 		}
-		const rightOffset = (_fontCache$cellData$f = fontCache === null || fontCache === void 0 || (_fontCache$cellData = fontCache.cellData) === null || _fontCache$cellData === void 0 || (_fontCache$cellData = _fontCache$cellData.fontRenderExtension) === null || _fontCache$cellData === void 0 ? void 0 : _fontCache$cellData.rightOffset) !== null && _fontCache$cellData$f !== void 0 ? _fontCache$cellData$f : 0;
-		const leftOffset = (_fontCache$cellData$f2 = fontCache === null || fontCache === void 0 || (_fontCache$cellData2 = fontCache.cellData) === null || _fontCache$cellData2 === void 0 || (_fontCache$cellData2 = _fontCache$cellData2.fontRenderExtension) === null || _fontCache$cellData2 === void 0 ? void 0 : _fontCache$cellData2.leftOffset) !== null && _fontCache$cellData$f2 !== void 0 ? _fontCache$cellData$f2 : 0;
+		const rightOffset = (_fontCache$cellData$f = fontCache === null || fontCache === void 0 || (_fontCache$cellData3 = fontCache.cellData) === null || _fontCache$cellData3 === void 0 || (_fontCache$cellData3 = _fontCache$cellData3.fontRenderExtension) === null || _fontCache$cellData3 === void 0 ? void 0 : _fontCache$cellData3.rightOffset) !== null && _fontCache$cellData$f !== void 0 ? _fontCache$cellData$f : 0;
+		const leftOffset = (_fontCache$cellData$f2 = fontCache === null || fontCache === void 0 || (_fontCache$cellData4 = fontCache.cellData) === null || _fontCache$cellData4 === void 0 || (_fontCache$cellData4 = _fontCache$cellData4.fontRenderExtension) === null || _fontCache$cellData4 === void 0 ? void 0 : _fontCache$cellData4.leftOffset) !== null && _fontCache$cellData$f2 !== void 0 ? _fontCache$cellData$f2 : 0;
 		let isOverflow = true;
 		if (vertexAngle === 0) {
 			startX = startX + leftOffset;
@@ -20129,26 +20803,22 @@ var Font = class extends SheetExtension {
 		renderFontContext.endY = endY;
 	}
 	_renderText(ctx, row, col, renderFontCtx, overflowCache) {
-		var _fontCache$style$pd, _fontCache$style, _padding$l2, _padding$r2, _padding$t2, _padding$b2, _fontCache$style2, _fontCache$style3, _fontCache$style4, _fontCache$style5;
+		var _fontCache$style$pd2, _fontCache$style5, _padding$l3, _padding$r3, _padding$t3, _padding$b3, _fontCache$displayTex2, _fontCache$style6, _fontCache$style7, _fontCache$style8, _fontCache$style9;
 		const { fontCache } = renderFontCtx;
 		if (!fontCache) return;
-		const padding = (_fontCache$style$pd = (_fontCache$style = fontCache.style) === null || _fontCache$style === void 0 ? void 0 : _fontCache$style.pd) !== null && _fontCache$style$pd !== void 0 ? _fontCache$style$pd : DEFAULT_PADDING_DATA;
-		const paddingLeft = (_padding$l2 = padding.l) !== null && _padding$l2 !== void 0 ? _padding$l2 : DEFAULT_PADDING_DATA.l;
-		const paddingRight = (_padding$r2 = padding.r) !== null && _padding$r2 !== void 0 ? _padding$r2 : DEFAULT_PADDING_DATA.r;
-		const paddingTop = (_padding$t2 = padding.t) !== null && _padding$t2 !== void 0 ? _padding$t2 : DEFAULT_PADDING_DATA.t;
-		const paddingBottom = (_padding$b2 = padding.b) !== null && _padding$b2 !== void 0 ? _padding$b2 : DEFAULT_PADDING_DATA.b;
+		const padding = (_fontCache$style$pd2 = (_fontCache$style5 = fontCache.style) === null || _fontCache$style5 === void 0 ? void 0 : _fontCache$style5.pd) !== null && _fontCache$style$pd2 !== void 0 ? _fontCache$style$pd2 : DEFAULT_PADDING_DATA;
+		const paddingLeft = (_padding$l3 = padding.l) !== null && _padding$l3 !== void 0 ? _padding$l3 : DEFAULT_PADDING_DATA.l;
+		const paddingRight = (_padding$r3 = padding.r) !== null && _padding$r3 !== void 0 ? _padding$r3 : DEFAULT_PADDING_DATA.r;
+		const paddingTop = (_padding$t3 = padding.t) !== null && _padding$t3 !== void 0 ? _padding$t3 : DEFAULT_PADDING_DATA.t;
+		const paddingBottom = (_padding$b3 = padding.b) !== null && _padding$b3 !== void 0 ? _padding$b3 : DEFAULT_PADDING_DATA.b;
 		const { vertexAngle = 0, wrapStrategy, cellData } = fontCache;
 		if ((cellData === null || cellData === void 0 ? void 0 : cellData.v) === void 0 || (cellData === null || cellData === void 0 ? void 0 : cellData.v) === null) return;
-		const text = (0, _univerjs_core.getDisplayValueFromCell)(cellData);
+		const text = (_fontCache$displayTex2 = fontCache.displayText) !== null && _fontCache$displayTex2 !== void 0 ? _fontCache$displayTex2 : (0, _univerjs_core.getDisplayValueFromCell)(cellData);
 		const { startX, startY, endX, endY } = renderFontCtx;
 		const cellWidth = endX - startX - paddingLeft - paddingRight;
 		const cellHeight = endY - startY - paddingTop - paddingBottom;
-		let hAlign = fontCache.horizontalAlign;
-		if (fontCache.horizontalAlign === _univerjs_core.HorizontalAlign.UNSPECIFIED) {
-			if (cellData.t === _univerjs_core.CellValueType.NUMBER || !_univerjs_core.Tools.isDefine(cellData.t) && typeof cellData.v === "number") hAlign = _univerjs_core.HorizontalAlign.RIGHT;
-			else if (cellData.t === _univerjs_core.CellValueType.BOOLEAN) hAlign = _univerjs_core.HorizontalAlign.CENTER;
-		}
-		Text.drawWith(ctx, {
+		const hAlign = getResolvedRenderHorizontalAlign(fontCache, cellData);
+		const textProps = {
 			text,
 			fontStyle: fontCache.fontString,
 			warp: wrapStrategy === _univerjs_core.WrapStrategy.WRAP && vertexAngle === 0,
@@ -20158,12 +20828,17 @@ var Font = class extends SheetExtension {
 			height: cellHeight,
 			left: paddingLeft,
 			top: paddingTop,
-			color: (_fontCache$style2 = fontCache.style) === null || _fontCache$style2 === void 0 || (_fontCache$style2 = _fontCache$style2.cl) === null || _fontCache$style2 === void 0 ? void 0 : _fontCache$style2.rgb,
-			strokeLine: Boolean((_fontCache$style3 = fontCache.style) === null || _fontCache$style3 === void 0 || (_fontCache$style3 = _fontCache$style3.st) === null || _fontCache$style3 === void 0 ? void 0 : _fontCache$style3.s),
-			underline: Boolean((_fontCache$style4 = fontCache.style) === null || _fontCache$style4 === void 0 || (_fontCache$style4 = _fontCache$style4.ul) === null || _fontCache$style4 === void 0 ? void 0 : _fontCache$style4.s),
-			underlineType: (_fontCache$style5 = fontCache.style) === null || _fontCache$style5 === void 0 || (_fontCache$style5 = _fontCache$style5.ul) === null || _fontCache$style5 === void 0 ? void 0 : _fontCache$style5.t,
+			color: (_fontCache$style6 = fontCache.style) === null || _fontCache$style6 === void 0 || (_fontCache$style6 = _fontCache$style6.cl) === null || _fontCache$style6 === void 0 ? void 0 : _fontCache$style6.rgb,
+			strokeLine: Boolean((_fontCache$style7 = fontCache.style) === null || _fontCache$style7 === void 0 || (_fontCache$style7 = _fontCache$style7.st) === null || _fontCache$style7 === void 0 ? void 0 : _fontCache$style7.s),
+			underline: Boolean((_fontCache$style8 = fontCache.style) === null || _fontCache$style8 === void 0 || (_fontCache$style8 = _fontCache$style8.ul) === null || _fontCache$style8 === void 0 ? void 0 : _fontCache$style8.s),
+			underlineType: (_fontCache$style9 = fontCache.style) === null || _fontCache$style9 === void 0 || (_fontCache$style9 = _fontCache$style9.ul) === null || _fontCache$style9 === void 0 ? void 0 : _fontCache$style9.t,
 			cellValueType: cellData.t
-		});
+		};
+		if (!textProps.warp && !textProps.strokeLine && !textProps.underline) {
+			Text.drawPlainWith(ctx, textProps);
+			return;
+		}
+		Text.drawWith(ctx, textProps);
 	}
 	_renderDocuments(ctx, row, col, renderFontCtx, overflowCache) {
 		const documents = this.getDocuments();
@@ -20233,6 +20908,15 @@ const stringifyRange = (range) => {
 	const { startRow, endRow, startColumn, endColumn } = range;
 	return `${startRow}-${endRow}-${startColumn}-${endColumn}`;
 };
+function drawTriangleMarker(ctx, color, x, y, x2, y2, x3, y3) {
+	ctx.fillStyle = color;
+	ctx.beginPath();
+	ctx.moveTo(x, y);
+	ctx.lineTo(x2, y2);
+	ctx.lineTo(x3, y3);
+	ctx.closePath();
+	ctx.fill();
+}
 var Marker = class extends SheetExtension {
 	constructor(..._args) {
 		super(..._args);
@@ -20244,11 +20928,15 @@ var Marker = class extends SheetExtension {
 		const { worksheet, rowColumnSegment } = skeleton;
 		if (!worksheet) return;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		((diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [rowColumnSegment]).forEach((range) => {
-			_univerjs_core.Range.foreach(range, (row, col) => {
+		const renderRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [rowColumnSegment];
+		const hasMerge = worksheet.getMergeData().length > 0;
+		renderRanges.forEach((range) => {
+			const { startRow, endRow, startColumn, endColumn } = range;
+			for (let row = startRow; row <= endRow; row++) for (let col = startColumn; col <= endColumn; col++) {
 				var _cellData$markers, _cellData$markers2, _cellData$markers3, _cellData$markers4;
-				if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
+				if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) continue;
 				let cellData = worksheet.getCell(row, col);
+				if (!hasMerge && !(cellData === null || cellData === void 0 ? void 0 : cellData.markers)) continue;
 				const cellInfo = skeleton.getCellWithCoordByIndex(row, col, false);
 				const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
 				let { startY, endY, startX, endX } = cellInfo;
@@ -20265,74 +20953,38 @@ var Marker = class extends SheetExtension {
 					};
 					cellData = worksheet.getCell(mainCell.row, mainCell.col);
 				}
-				if (!this.isRenderDiffRangesByRow(mergeInfo.startRow, mergeInfo.endRow, diffRanges)) return true;
+				if (!this.isRenderDiffRangesByRow(mergeInfo.startRow, mergeInfo.endRow, diffRanges)) continue;
 				if (cellInfo.isMerged || cellInfo.isMergedMainCell) {
 					const rangeStr = stringifyRange(mergeInfo);
-					if (mergeCellRendered.has(rangeStr)) return;
+					if (mergeCellRendered.has(rangeStr)) continue;
 					mergeCellRendered.add(rangeStr);
 				}
-				if (!cellData) return;
+				if (!cellData) continue;
 				if ((_cellData$markers = cellData.markers) === null || _cellData$markers === void 0 ? void 0 : _cellData$markers.tr) {
-					ctx.save();
 					const marker = cellData.markers.tr;
 					const x = endX;
 					const y = startY;
-					ctx.fillStyle = marker.color;
-					ctx.moveTo(x, y);
-					ctx.beginPath();
-					ctx.lineTo(x - marker.size, y);
-					ctx.lineTo(x, y + marker.size);
-					ctx.lineTo(x, y);
-					ctx.closePath();
-					ctx.fill();
-					ctx.restore();
+					drawTriangleMarker(ctx, marker.color, x, y, x - marker.size, y, x, y + marker.size);
 				}
 				if ((_cellData$markers2 = cellData.markers) === null || _cellData$markers2 === void 0 ? void 0 : _cellData$markers2.tl) {
-					ctx.save();
 					const marker = cellData.markers.tl;
 					const x = startX;
 					const y = startY;
-					ctx.fillStyle = marker.color;
-					ctx.moveTo(x, y);
-					ctx.beginPath();
-					ctx.lineTo(x + marker.size, y);
-					ctx.lineTo(x, y + marker.size);
-					ctx.lineTo(x, y);
-					ctx.closePath();
-					ctx.fill();
-					ctx.restore();
+					drawTriangleMarker(ctx, marker.color, x, y, x + marker.size, y, x, y + marker.size);
 				}
 				if ((_cellData$markers3 = cellData.markers) === null || _cellData$markers3 === void 0 ? void 0 : _cellData$markers3.br) {
-					ctx.save();
 					const marker = cellData.markers.br;
 					const x = endX;
 					const y = endY;
-					ctx.fillStyle = marker.color;
-					ctx.moveTo(x, y);
-					ctx.beginPath();
-					ctx.lineTo(x - marker.size, y);
-					ctx.lineTo(x, y - marker.size);
-					ctx.lineTo(x, y);
-					ctx.closePath();
-					ctx.fill();
-					ctx.restore();
+					drawTriangleMarker(ctx, marker.color, x, y, x - marker.size, y, x, y - marker.size);
 				}
 				if ((_cellData$markers4 = cellData.markers) === null || _cellData$markers4 === void 0 ? void 0 : _cellData$markers4.bl) {
-					ctx.save();
 					const marker = cellData.markers.bl;
 					const x = startX;
 					const y = endY;
-					ctx.fillStyle = marker.color;
-					ctx.moveTo(x, y);
-					ctx.beginPath();
-					ctx.lineTo(x + marker.size, y);
-					ctx.lineTo(x, y - marker.size);
-					ctx.lineTo(x, y);
-					ctx.closePath();
-					ctx.fill();
-					ctx.restore();
+					drawTriangleMarker(ctx, marker.color, x, y, x + marker.size, y, x, y - marker.size);
 				}
-			});
+			}
 		});
 	}
 };
@@ -22441,6 +23093,7 @@ const MIN_THUMB_SIZE = 17;
 const DEFAULT_TRACK_SIZE = 10;
 const DEFAULT_THUMB_MARGIN = 2;
 const HOVER_THUMB_MARGIN = 1;
+const BAR_DRAG_SCROLL_THROTTLE_MS = 32;
 var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 	constructor(view, props) {
 		super();
@@ -22463,6 +23116,10 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 		_defineProperty(this, "_lastY", -1);
 		_defineProperty(this, "_isHorizonMove", false);
 		_defineProperty(this, "_isVerticalMove", false);
+		_defineProperty(this, "_pendingBarDeltaX", 0);
+		_defineProperty(this, "_pendingBarDeltaY", 0);
+		_defineProperty(this, "_pendingBarScrollFrameId", null);
+		_defineProperty(this, "_pendingBarScrollThrottleId", null);
 		_defineProperty(this, "_horizonPointerMoveSub", void 0);
 		_defineProperty(this, "_horizonPointerUpSub", void 0);
 		_defineProperty(this, "_verticalPointerMoveSub", void 0);
@@ -22600,6 +23257,7 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 	dispose() {
 		var _this$horizonScrollTr, _this$horizonThumbRec3, _this$verticalScrollT, _this$verticalThumbRe3, _this$placeholderBarR, _this$_horizonPointer, _this$_horizonPointer2, _this$_verticalPointe, _this$_verticalPointe2;
 		super.dispose();
+		this._flushPendingBarScroll();
 		(_this$horizonScrollTr = this.horizonScrollTrack) === null || _this$horizonScrollTr === void 0 || _this$horizonScrollTr.dispose();
 		(_this$horizonThumbRec3 = this.horizonThumbRect) === null || _this$horizonThumbRec3 === void 0 || _this$horizonThumbRec3.dispose();
 		(_this$verticalScrollT = this.verticalScrollTrack) === null || _this$verticalScrollT === void 0 || _this$verticalScrollT.dispose();
@@ -22618,6 +23276,47 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 		this._mainScene = null;
 		this._viewport.removeScrollBar();
 	}
+	_scheduleBarScrollDelta(delta) {
+		var _delta$x, _delta$y;
+		this._pendingBarDeltaX += (_delta$x = delta.x) !== null && _delta$x !== void 0 ? _delta$x : 0;
+		this._pendingBarDeltaY += (_delta$y = delta.y) !== null && _delta$y !== void 0 ? _delta$y : 0;
+		if (this._pendingBarScrollFrameId !== null || this._pendingBarScrollThrottleId !== null) return;
+		this._requestPendingBarScrollFrame();
+	}
+	_requestPendingBarScrollFrame() {
+		this._pendingBarScrollFrameId = requestAnimationFrame(() => {
+			this._pendingBarScrollFrameId = null;
+			this._applyPendingBarScroll({ isBarDragging: true });
+			if (!this._isHorizonMove && !this._isVerticalMove) return;
+			this._pendingBarScrollThrottleId = window.setTimeout(() => {
+				this._pendingBarScrollThrottleId = null;
+				if (this._pendingBarDeltaX !== 0 || this._pendingBarDeltaY !== 0) this._requestPendingBarScrollFrame();
+			}, BAR_DRAG_SCROLL_THROTTLE_MS);
+		});
+	}
+	_flushPendingBarScroll(isBarDragEnd = false) {
+		if (this._pendingBarScrollFrameId !== null) {
+			cancelAnimationFrame(this._pendingBarScrollFrameId);
+			this._pendingBarScrollFrameId = null;
+		}
+		if (this._pendingBarScrollThrottleId !== null) {
+			clearTimeout(this._pendingBarScrollThrottleId);
+			this._pendingBarScrollThrottleId = null;
+		}
+		return this._applyPendingBarScroll({ isBarDragEnd });
+	}
+	_applyPendingBarScroll(options) {
+		const x = this._pendingBarDeltaX;
+		const y = this._pendingBarDeltaY;
+		if (x === 0 && y === 0) return false;
+		this._pendingBarDeltaX = 0;
+		this._pendingBarDeltaY = 0;
+		this._viewport.scrollByBarDeltaValue({
+			...x === 0 ? null : { x },
+			...y === 0 ? null : { y }
+		}, true, options);
+		return true;
+	}
 	render(ctx, left = 0, top = 0) {
 		const { scrollX, scrollY } = this._viewport;
 		ctx.save();
@@ -22822,12 +23521,14 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 			var _mainScene$getEngine;
 			const e = evt;
 			if (!this._isVerticalMove) return;
-			this._viewport.scrollByBarDeltaValue({ y: e.offsetY - this._lastY });
+			this._scheduleBarScrollDelta({ y: e.offsetY - this._lastY });
 			this._lastY = e.offsetY;
 			(_mainScene$getEngine = mainScene.getEngine()) === null || _mainScene$getEngine === void 0 || _mainScene$getEngine.setCapture();
 		});
 		this._verticalPointerUpSub = mainScene.onPointerUp$.subscribeEvent((_evt, _state) => {
+			if (!this._isVerticalMove) return;
 			const srcElement = this.verticalThumbRect;
+			if (!this._flushPendingBarScroll(true)) this._viewport.scrollByBarDeltaValue({ y: 0 }, true, { isBarDragEnd: true });
 			this._isVerticalMove = false;
 			mainScene.releaseCapturedObject();
 			mainScene.enableObjectsEvent();
@@ -22896,12 +23597,14 @@ var ScrollBar = class ScrollBar extends _univerjs_core.Disposable {
 			var _mainScene$getEngine2;
 			const e = evt;
 			if (!this._isHorizonMove) return;
-			this._viewport.scrollByBarDeltaValue({ x: e.offsetX - this._lastX });
+			this._scheduleBarScrollDelta({ x: e.offsetX - this._lastX });
 			this._lastX = e.offsetX;
 			(_mainScene$getEngine2 = mainScene.getEngine()) === null || _mainScene$getEngine2 === void 0 || _mainScene$getEngine2.setCapture();
 		});
 		this._horizonPointerUpSub = mainScene.onPointerUp$.subscribeEvent((evt, state) => {
 			var _this$horizonThumbRec11;
+			if (!this._isHorizonMove) return;
+			if (!this._flushPendingBarScroll(true)) this._viewport.scrollByBarDeltaValue({ x: 0 }, true, { isBarDragEnd: true });
 			this._isHorizonMove = false;
 			mainScene.releaseCapturedObject();
 			mainScene.enableObjectsEvent();
@@ -23117,7 +23820,7 @@ var FontAndBaseLine = class extends docExtension {
 		const { vertexAngle, centerAngle } = renderConfig !== null && renderConfig !== void 0 ? renderConfig : {};
 		const VERTICAL_DEG = 90;
 		const isVertical = vertexAngle === VERTICAL_DEG && centerAngle === VERTICAL_DEG;
-		if (isVertical && !hasCJK(content)) {
+		if (isVertical && !cjk.hasCJK(content)) {
 			ctx.save();
 			ctx.translate(spanStartPoint.x + centerPoint.x, spanStartPoint.y + centerPoint.y);
 			ctx.rotate(Math.PI / 2);
@@ -23639,7 +24342,7 @@ var Documents = class Documents extends DocComponent {
 		ctx.restore();
 	}
 	_drawBorderBottom(ctx, page, line, left = 0, top = 0) {
-		var _line$borderBottom$pa, _line$borderBottom, _line$borderBottom$co, _line$borderBottom2;
+		var _line$borderBottom$pa, _line$borderBottom, _border$width, _border$color$rgb;
 		if (this._drawLiquid == null) return;
 		let { x, y } = this._drawLiquid;
 		const { pageWidth, marginLeft, marginRight, marginTop } = page;
@@ -23648,8 +24351,10 @@ var Documents = class Documents extends DocComponent {
 		y -= line.paddingTop;
 		y += marginTop + top + line.lineHeight + ((_line$borderBottom$pa = (_line$borderBottom = line.borderBottom) === null || _line$borderBottom === void 0 ? void 0 : _line$borderBottom.padding) !== null && _line$borderBottom$pa !== void 0 ? _line$borderBottom$pa : 0);
 		ctx.save();
-		ctx.setLineWidthByPrecision(1);
-		ctx.strokeStyle = (_line$borderBottom$co = (_line$borderBottom2 = line.borderBottom) === null || _line$borderBottom2 === void 0 ? void 0 : _line$borderBottom2.color.rgb) !== null && _line$borderBottom$co !== void 0 ? _line$borderBottom$co : "#CDD0D8";
+		const border = line.borderBottom;
+		ctx.setLineWidthByPrecision(Math.max(0, (_border$width = border === null || border === void 0 ? void 0 : border.width) !== null && _border$width !== void 0 ? _border$width : 1));
+		ctx.strokeStyle = (_border$color$rgb = border === null || border === void 0 ? void 0 : border.color.rgb) !== null && _border$color$rgb !== void 0 ? _border$color$rgb : "#CDD0D8";
+		setDocsBorderDash(ctx, border === null || border === void 0 ? void 0 : border.dashStyle);
 		drawLineByBorderType(ctx, "b", 0, {
 			startX: x,
 			startY: y,
@@ -23811,21 +24516,21 @@ var Documents = class Documents extends DocComponent {
 		return DEFAULT_BORDER_COLOR;
 	}
 	_isDrawableTableCellBorder(border) {
-		var _border$width$v, _border$width, _border$color$rgb, _border$color;
+		var _border$width$v, _border$width2, _border$color$rgb2, _border$color;
 		if (!border) return false;
-		const lineWidth = (_border$width$v = (_border$width = border.width) === null || _border$width === void 0 ? void 0 : _border$width.v) !== null && _border$width$v !== void 0 ? _border$width$v : 1;
-		const color = (_border$color$rgb = (_border$color = border.color) === null || _border$color === void 0 ? void 0 : _border$color.rgb) !== null && _border$color$rgb !== void 0 ? _border$color$rgb : DEFAULT_BORDER_COLOR.color.rgb;
+		const lineWidth = (_border$width$v = (_border$width2 = border.width) === null || _border$width2 === void 0 ? void 0 : _border$width2.v) !== null && _border$width$v !== void 0 ? _border$width$v : 1;
+		const color = (_border$color$rgb2 = (_border$color = border.color) === null || _border$color === void 0 ? void 0 : _border$color.rgb) !== null && _border$color$rgb2 !== void 0 ? _border$color$rgb2 : DEFAULT_BORDER_COLOR.color.rgb;
 		return lineWidth > 0 && color !== "transparent";
 	}
 	_drawTableCellBorder(ctx, border, type, position) {
-		var _border$width$v2, _border$width2, _border$color$rgb2, _border$color2;
+		var _border$width$v2, _border$width3, _border$color$rgb3, _border$color2;
 		if (!border) return;
-		const lineWidth = (_border$width$v2 = (_border$width2 = border.width) === null || _border$width2 === void 0 ? void 0 : _border$width2.v) !== null && _border$width$v2 !== void 0 ? _border$width$v2 : 1;
-		const color = (_border$color$rgb2 = (_border$color2 = border.color) === null || _border$color2 === void 0 ? void 0 : _border$color2.rgb) !== null && _border$color$rgb2 !== void 0 ? _border$color$rgb2 : DEFAULT_BORDER_COLOR.color.rgb;
+		const lineWidth = (_border$width$v2 = (_border$width3 = border.width) === null || _border$width3 === void 0 ? void 0 : _border$width3.v) !== null && _border$width$v2 !== void 0 ? _border$width$v2 : 1;
+		const color = (_border$color$rgb3 = (_border$color2 = border.color) === null || _border$color2 === void 0 ? void 0 : _border$color2.rgb) !== null && _border$color$rgb3 !== void 0 ? _border$color$rgb3 : DEFAULT_BORDER_COLOR.color.rgb;
 		if (lineWidth <= 0 || color === "transparent") return;
 		ctx.save();
 		ctx.setLineWidthByPrecision(lineWidth);
-		setTableCellBorderDash(ctx, border.dashStyle);
+		setDocsBorderDash(ctx, border.dashStyle);
 		ctx.strokeStyle = color;
 		drawLineByBorderType(ctx, type, 0, position);
 		ctx.restore();
@@ -23834,7 +24539,15 @@ var Documents = class Documents extends DocComponent {
 		if (this._drawLiquid == null) return;
 		const { sections, skeTables } = page;
 		const { y: originY } = this._drawLiquid;
-		if (skeTables.size > 0) this._drawTable(ctx, page, skeTables, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale);
+		if (skeTables.size > 0) {
+			const tablePage = {
+				...page,
+				marginLeft: parentPage.marginLeft,
+				marginRight: parentPage.marginRight,
+				marginTop: isHeader ? page.marginTop : page.marginTop + alignOffsetNoAngle.y
+			};
+			this._drawTable(ctx, tablePage, skeTables, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale);
+		}
 		for (const section of sections) {
 			const { columns } = section;
 			this._drawLiquid.translateSave();
@@ -23947,7 +24660,7 @@ var Documents = class Documents extends DocComponent {
 		});
 	}
 };
-function setTableCellBorderDash(ctx, dashStyle) {
+function setDocsBorderDash(ctx, dashStyle) {
 	if (dashStyle === _univerjs_core.DashStyleType.DOT) {
 		ctx.setLineDash([2]);
 		return;
@@ -23993,6 +24706,85 @@ function rectByPrecisionBounds(ctx, x, y, width, height) {
 //#endregion
 //#region src/components/sheets/spreadsheet.ts
 const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__";
+function pushSparseCellRange(ranges, row, col) {
+	const last = ranges[ranges.length - 1];
+	if (last && last.startRow === row && last.endRow === row && last.endColumn + 1 === col) {
+		last.endColumn = col;
+		return;
+	}
+	ranges.push({
+		startRow: row,
+		endRow: row,
+		startColumn: col,
+		endColumn: col
+	});
+}
+function scanSparseExtensionFeatures(spreadsheetSkeleton, ranges) {
+	const { worksheet } = spreadsheetSkeleton;
+	if (!worksheet || !ranges.length || worksheet.getMergeData().length > 0) return null;
+	const flags = {
+		hasCustomRender: false,
+		hasMarkers: false,
+		hasSelectionProtection: false,
+		customRenderRanges: [],
+		markerRanges: [],
+		selectionProtectionRanges: []
+	};
+	for (const range of ranges) for (let row = range.startRow; row <= range.endRow; row++) {
+		if (!worksheet.getRowVisible(row)) continue;
+		for (let col = range.startColumn; col <= range.endColumn; col++) {
+			var _spreadsheetSkeleton$, _cell$customRender, _cell$selectionProtec;
+			if (!worksheet.getColVisible(col)) continue;
+			const cachedCell = (_spreadsheetSkeleton$ = spreadsheetSkeleton.stylesCache.fontMatrix.getValue(row, col)) === null || _spreadsheetSkeleton$ === void 0 ? void 0 : _spreadsheetSkeleton$.cellData;
+			const cell = cachedCell !== null && cachedCell !== void 0 ? cachedCell : worksheet.getCell(row, col);
+			if (!cell) continue;
+			if ((_cell$customRender = cell.customRender) === null || _cell$customRender === void 0 ? void 0 : _cell$customRender.length) {
+				flags.hasCustomRender = true;
+				pushSparseCellRange(flags.customRenderRanges, row, col);
+			}
+			if (cell.markers) {
+				flags.hasMarkers = true;
+				pushSparseCellRange(flags.markerRanges, row, col);
+			}
+			if ((_cell$selectionProtec = cell.selectionProtection) === null || _cell$selectionProtec === void 0 ? void 0 : _cell$selectionProtec.length) {
+				flags.hasSelectionProtection = true;
+				pushSparseCellRange(flags.selectionProtectionRanges, row, col);
+			}
+		}
+	}
+	return flags;
+}
+function shouldSkipSparseExtension(uKey, flags) {
+	if (!flags) return false;
+	switch (uKey) {
+		case "DefaultCustomExtension": return !flags.hasCustomRender;
+		case "DefaultMarkerExtension": return !flags.hasMarkers;
+		case "RANGE_PROTECTION_CAN_VIEW_RENDER_EXTENSION_KEY":
+		case "RANGE_PROTECTION_CAN_NOT_VIEW_RENDER_EXTENSION_KEY": return !flags.hasSelectionProtection;
+		default: return false;
+	}
+}
+function hasSparseExtension(extensions) {
+	return extensions.some((extension) => {
+		switch (extension.uKey) {
+			case "DefaultCustomExtension":
+			case "DefaultMarkerExtension":
+			case "RANGE_PROTECTION_CAN_VIEW_RENDER_EXTENSION_KEY":
+			case "RANGE_PROTECTION_CAN_NOT_VIEW_RENDER_EXTENSION_KEY": return true;
+			default: return false;
+		}
+	});
+}
+function getSparseExtensionDiffRanges(uKey, flags, diffRanges) {
+	if (!flags) return diffRanges;
+	switch (uKey) {
+		case "DefaultCustomExtension": return flags.customRenderRanges;
+		case "DefaultMarkerExtension": return flags.markerRanges;
+		case "RANGE_PROTECTION_CAN_VIEW_RENDER_EXTENSION_KEY":
+		case "RANGE_PROTECTION_CAN_NOT_VIEW_RENDER_EXTENSION_KEY": return flags.selectionProtectionRanges;
+		default: return diffRanges;
+	}
+}
 var Spreadsheet = class extends SheetComponent {
 	constructor(oKey, spreadsheetSkeleton, _allowCache = true) {
 		super(oKey, spreadsheetSkeleton);
@@ -24047,7 +24839,8 @@ var Spreadsheet = class extends SheetComponent {
 		var _viewportInfo$diffBou;
 		const spreadsheetSkeleton = this.getSkeleton();
 		if (!spreadsheetSkeleton) return;
-		this._drawAuxiliary(ctx);
+		const hasMergeData = spreadsheetSkeleton.worksheet.getMergeData().length > 0;
+		this._drawAuxiliary(ctx, hasMergeData);
 		const parentScale = this.getParentScale();
 		const diffRanges = this._refreshIncrementalState && viewportInfo.diffBounds ? (_viewportInfo$diffBou = viewportInfo.diffBounds) === null || _viewportInfo$diffBou === void 0 ? void 0 : _viewportInfo$diffBou.map((bound) => spreadsheetSkeleton.getRangeByViewBound(bound)) : [];
 		const cacheRange = spreadsheetSkeleton.getCacheRangeByViewport(viewportInfo, this.isPrinting);
@@ -24058,14 +24851,19 @@ var Spreadsheet = class extends SheetComponent {
 			endColumn: cacheRange.endColumn
 		})) : viewRanges;
 		const extensions = this.getExtensionsByOrder();
+		const sparseExtensionFeatures = !hasMergeData && hasSparseExtension(extensions) ? scanSparseExtensionFeatures(spreadsheetSkeleton, viewRanges) : null;
 		const scene = this.getScene();
 		for (const extension of extensions) {
+			if (shouldSkipSparseExtension(extension.uKey, sparseExtensionFeatures)) continue;
 			const extensionViewRanges = extension === this._fontExtension || extension === this._borderExtension ? overflowSafeViewRanges : viewRanges;
+			const extensionDiffRanges = getSparseExtensionDiffRanges(extension.uKey, sparseExtensionFeatures, diffRanges);
 			const timeKey = `${SHEET_EXTENSION_PREFIX}${extension.uKey}`;
 			const st = _univerjs_core.Tools.now();
-			extension.draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, {
+			extension.draw(ctx, parentScale, spreadsheetSkeleton, extensionDiffRanges, {
 				viewRanges: extensionViewRanges,
 				checkOutOfViewBound: true,
+				fontRenderRanges: extension === this._fontExtension ? spreadsheetSkeleton.incrementalFontRenderRanges : void 0,
+				hasMergeData,
 				viewportKey: viewportInfo.viewportKey,
 				viewBound: viewportInfo.cacheBound,
 				diffBounds: viewportInfo.diffBounds
@@ -24163,7 +24961,7 @@ var Spreadsheet = class extends SheetComponent {
 		this._dirtyBounds = dirtyBounds;
 	}
 	renderByViewports(mainCtx, viewportInfo, spreadsheetSkeleton) {
-		const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportInfo;
+		const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty, shouldCacheUpdate } = viewportInfo;
 		const { rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = spreadsheetSkeleton;
 		const { a: scaleX = 1, d: scaleY = 1 } = mainCtx.getTransform();
 		const bufferEdgeSizeX = bufferEdgeX * scaleX / window.devicePixelRatio;
@@ -24172,8 +24970,10 @@ var Spreadsheet = class extends SheetComponent {
 		cacheCtx.save();
 		const isForceDirty = isViewportForceDirty || this.isForceDirty();
 		const isDirty = isViewportDirty || this.isDirty();
-		const isScrollJumpOutsideCache = Math.abs(diffX) * scaleX >= cacheCanvas.getWidth() || Math.abs(diffY) * scaleY >= cacheCanvas.getHeight();
-		const shouldRefreshCache = isDirty || isForceDirty || isScrollJumpOutsideCache;
+		const cachePixelRatio = cacheCanvas.getPixelRatio();
+		const isScrollJumpOutsideCache = Math.abs(diffX) * scaleX >= cacheCanvas.getWidth() * cachePixelRatio || Math.abs(diffY) * scaleY >= cacheCanvas.getHeight() * cachePixelRatio;
+		const hasMergeData = spreadsheetSkeleton.worksheet.getMergeData().length > 0;
+		const shouldRefreshCache = isDirty || isForceDirty || isScrollJumpOutsideCache || hasMergeData && (diffX !== 0 || diffY !== 0) || shouldCacheUpdate && diffX !== 0;
 		if (diffBounds.length === 0 || diffX === 0 && diffY === 0 || shouldRefreshCache) {
 			if (shouldRefreshCache) {
 				this.addRenderTagToScene("scrolling", false);
@@ -24267,6 +25067,8 @@ var Spreadsheet = class extends SheetComponent {
 		}
 		const spreadsheetSkeleton = this.getSkeleton();
 		if (!spreadsheetSkeleton) return;
+		const { viewportKey } = viewportInfo;
+		if (sheetHeaderViewportKeys.includes(viewportKey)) return this;
 		spreadsheetSkeleton.setStylesCache(viewportInfo);
 		const segment = spreadsheetSkeleton.rowColumnSegment;
 		if (!segment) return;
@@ -24275,10 +25077,9 @@ var Spreadsheet = class extends SheetComponent {
 		const { rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = spreadsheetSkeleton;
 		mainCtx.translateWithPrecision(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
 		(_this$getScene = this.getScene()) === null || _this$getScene === void 0 || _this$getScene.updateTransformerZero(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
-		const { viewportKey } = viewportInfo;
 		if (sheetContentViewportKeys.includes(viewportKey)) if (viewportInfo && viewportInfo.cacheCanvas) this.renderByViewports(mainCtx, viewportInfo, spreadsheetSkeleton);
 		else this._draw(mainCtx, viewportInfo);
-		else if (sheetHeaderViewportKeys.includes(viewportKey)) {} else if (viewportInfo && viewportInfo.cacheCanvas) this.renderByViewports(mainCtx, viewportInfo, spreadsheetSkeleton);
+		else if (viewportInfo && viewportInfo.cacheCanvas) this.renderByViewports(mainCtx, viewportInfo, spreadsheetSkeleton);
 		else this._draw(mainCtx, viewportInfo);
 		mainCtx.restore();
 		return this;
@@ -24346,7 +25147,7 @@ var Spreadsheet = class extends SheetComponent {
 	* draw gridlines
 	* @param ctx
 	*/
-	_drawAuxiliary(ctx) {
+	_drawAuxiliary(ctx, hasMergeData = true) {
 		var _ref;
 		const spreadsheetSkeleton = this.getSkeleton();
 		if (spreadsheetSkeleton == null) return;
@@ -24388,22 +25189,24 @@ var Spreadsheet = class extends SheetComponent {
 		const mergeVisibleRanges = [];
 		let mergeVisibleRangeStartRow = startRow;
 		for (let r = rowStart; r <= rowEnd; r++) {
-			if (worksheet.getRowVisible(r) === false) {
-				if (mergeVisibleRangeStartRow < r) {
-					mergeVisibleRanges.push({
-						startRow: mergeVisibleRangeStartRow,
-						endRow: r - 1,
-						startColumn,
-						endColumn
-					});
-					mergeVisibleRangeStartRow = r + 1;
-				} else if (mergeVisibleRangeStartRow === r) mergeVisibleRangeStartRow = r + 1;
-			} else if (r === endRow && mergeVisibleRangeStartRow <= r) mergeVisibleRanges.push({
-				startRow: mergeVisibleRangeStartRow,
-				endRow: r,
-				startColumn,
-				endColumn
-			});
+			if (hasMergeData) {
+				if (worksheet.getRowVisible(r) === false) {
+					if (mergeVisibleRangeStartRow < r) {
+						mergeVisibleRanges.push({
+							startRow: mergeVisibleRangeStartRow,
+							endRow: r - 1,
+							startColumn,
+							endColumn
+						});
+						mergeVisibleRangeStartRow = r + 1;
+					} else if (mergeVisibleRangeStartRow === r) mergeVisibleRangeStartRow = r + 1;
+				} else if (r === endRow && mergeVisibleRangeStartRow <= r) mergeVisibleRanges.push({
+					startRow: mergeVisibleRangeStartRow,
+					endRow: r,
+					startColumn,
+					endColumn
+				});
+			}
 			if (r < 0 || r > rowHeightAccumulationLength - 1) continue;
 			const rowEndPosition = rowHeightAccumulation[r];
 			ctx.beginPath();
@@ -24422,7 +25225,7 @@ var Spreadsheet = class extends SheetComponent {
 			ctx.stroke();
 		}
 		const mergeCellRanges = [];
-		for (const mergeVisibleRange of mergeVisibleRanges) {
+		if (hasMergeData) for (const mergeVisibleRange of mergeVisibleRanges) {
 			const mergeRangeInVisible = spreadsheetSkeleton.getCurrentRowColumnSegmentMergeData(mergeVisibleRange);
 			mergeCellRanges.push(...mergeRangeInVisible);
 		}
@@ -25361,6 +26164,164 @@ var DocBackground = class DocBackground extends DocComponent {
 	}
 };
 
+//#endregion
+//#region src/components/docs/layout/doc-no-wrap-measure.ts
+function splitDocumentNoWrapMeasureLines(text) {
+	return text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
+}
+function isDocumentNoWrapMeasureTrailingWhitespace(char) {
+	return char === " " || char === "	" || char === "\xA0";
+}
+function getDocumentNoWrapMeasureTrailingWhitespaceStart(text) {
+	let index = text.length;
+	while (index > 0 && isDocumentNoWrapMeasureTrailingWhitespace(text[index - 1])) index--;
+	return index;
+}
+function isDocumentNoWrapMeasureCJKText(char) {
+	return /[\u2E80-\u9FFF\uF900-\uFAFF]/u.test(char);
+}
+function isDocumentNoWrapMeasureLatinText(char) {
+	return /[a-z\d]/i.test(char);
+}
+function measureDocumentNoWrapTextByStyle(text, textStyle) {
+	if (!text) return 0;
+	return FontCache.getMeasureText(text, getFontStyleString(textStyle).fontCache).width;
+}
+function measureDocumentNoWrapCJKLatinSpacing(segment, textStyle, previous) {
+	let spacing = 0;
+	for (const char of Array.from(segment)) {
+		const isCJK = isDocumentNoWrapMeasureCJKText(char);
+		const cjkWidth = isCJK ? measureDocumentNoWrapTextByStyle(char, textStyle) : 0;
+		if (isCJK && isDocumentNoWrapMeasureLatinText(previous.char)) spacing += cjkWidth / 4;
+		if (isDocumentNoWrapMeasureLatinText(char) && isDocumentNoWrapMeasureCJKText(previous.char)) spacing += previous.cjkWidth / 4;
+		previous.char = char;
+		previous.cjkWidth = cjkWidth;
+	}
+	return spacing;
+}
+function measureDocumentNoWrapLineByStyle(text, textStyle) {
+	const visibleText = text.slice(0, getDocumentNoWrapMeasureTrailingWhitespaceStart(text));
+	return measureDocumentNoWrapTextByStyle(visibleText, textStyle) + measureDocumentNoWrapCJKLatinSpacing(visibleText, textStyle, {
+		char: "",
+		cjkWidth: 0
+	});
+}
+function measureDocumentNoWrapRunsWidth(dataStream, textRuns, fallbackTextStyle) {
+	let currentLineWidth = 0;
+	let maxLineWidth = 0;
+	let pendingTrailingWhitespaceWidth = 0;
+	const previous = {
+		char: "",
+		cjkWidth: 0
+	};
+	const appendSegment = (segment, textStyle) => {
+		if (!segment) return;
+		const trailingStart = getDocumentNoWrapMeasureTrailingWhitespaceStart(segment);
+		const visibleSegment = segment.slice(0, trailingStart);
+		const trailingWhitespace = segment.slice(trailingStart);
+		if (visibleSegment) {
+			currentLineWidth += pendingTrailingWhitespaceWidth;
+			pendingTrailingWhitespaceWidth = 0;
+			currentLineWidth += measureDocumentNoWrapTextByStyle(visibleSegment, textStyle);
+			currentLineWidth += measureDocumentNoWrapCJKLatinSpacing(visibleSegment, textStyle, previous);
+		}
+		if (trailingWhitespace) {
+			pendingTrailingWhitespaceWidth += measureDocumentNoWrapTextByStyle(trailingWhitespace, textStyle);
+			measureDocumentNoWrapCJKLatinSpacing(trailingWhitespace, textStyle, previous);
+		}
+	};
+	const finishLine = () => {
+		maxLineWidth = Math.max(maxLineWidth, currentLineWidth);
+		currentLineWidth = 0;
+		pendingTrailingWhitespaceWidth = 0;
+		previous.char = "";
+		previous.cjkWidth = 0;
+	};
+	const appendRange = (text, textStyle) => {
+		splitDocumentNoWrapMeasureLines(text).forEach((segment, index) => {
+			if (index > 0) finishLine();
+			appendSegment(segment, textStyle);
+		});
+	};
+	let cursor = 0;
+	[...textRuns].sort((a, b) => a.st - b.st).forEach((run) => {
+		const start = Math.max(0, run.st);
+		const end = Math.max(start, run.ed);
+		if (start > cursor) appendRange(dataStream.slice(cursor, start), fallbackTextStyle);
+		const effectiveStart = Math.max(start, cursor);
+		if (end > effectiveStart) appendRange(dataStream.slice(effectiveStart, end), run.ts);
+		cursor = Math.max(cursor, end);
+	});
+	if (cursor < dataStream.length) appendRange(dataStream.slice(cursor), fallbackTextStyle);
+	return Math.max(maxLineWidth, currentLineWidth);
+}
+function measureDocumentNoWrapTextRangeWidth(documentData, start, end) {
+	var _body$dataStream, _body$textRuns, _documentData$documen2;
+	const body = documentData.body;
+	const dataStream = (_body$dataStream = body === null || body === void 0 ? void 0 : body.dataStream) !== null && _body$dataStream !== void 0 ? _body$dataStream : "";
+	const rangeStart = Math.max(0, Math.min(dataStream.length, start));
+	const rangeEnd = Math.max(rangeStart, Math.min(dataStream.length, end));
+	const rangeText = dataStream.slice(rangeStart, rangeEnd);
+	const textRuns = ((_body$textRuns = body === null || body === void 0 ? void 0 : body.textRuns) !== null && _body$textRuns !== void 0 ? _body$textRuns : []).map((run) => {
+		const runStart = Math.max(rangeStart, run.st);
+		const runEnd = Math.min(rangeEnd, run.ed);
+		if (runEnd <= runStart) return null;
+		return {
+			...run,
+			st: runStart - rangeStart,
+			ed: runEnd - rangeStart
+		};
+	}).filter((run) => run !== null);
+	if (textRuns.length) {
+		var _documentData$documen;
+		return measureDocumentNoWrapRunsWidth(rangeText, textRuns, (_documentData$documen = documentData.documentStyle) === null || _documentData$documen === void 0 ? void 0 : _documentData$documen.textStyle);
+	}
+	return measureDocumentNoWrapLineByStyle(rangeText, (_documentData$documen2 = documentData.documentStyle) === null || _documentData$documen2 === void 0 ? void 0 : _documentData$documen2.textStyle);
+}
+/**
+* Measures the widest no-wrap line using the same text-width policy that docs
+* layout relies on for lightweight shape/text-box autofit flows.
+*
+* This is intentionally not a full document layout replacement: callers that
+* need line breaking, pagination, floating objects, or final line metrics should
+* use `DocumentSkeleton`. This helper exists for consumers that must size a
+* no-wrap host before committing a full layout pass. Keep docs-specific glyph
+* width adjustments here so feature packages do not duplicate paragraph shaping
+* details such as CJK-Latin spacing.
+*/
+function measureDocumentNoWrapTextWidth(documentData) {
+	var _body$dataStream2, _documentData$documen4;
+	const body = documentData === null || documentData === void 0 ? void 0 : documentData.body;
+	const dataStream = (_body$dataStream2 = body === null || body === void 0 ? void 0 : body.dataStream) !== null && _body$dataStream2 !== void 0 ? _body$dataStream2 : "";
+	const textRuns = body === null || body === void 0 ? void 0 : body.textRuns;
+	if (textRuns === null || textRuns === void 0 ? void 0 : textRuns.length) {
+		var _documentData$documen3;
+		return measureDocumentNoWrapRunsWidth(dataStream, textRuns, documentData === null || documentData === void 0 || (_documentData$documen3 = documentData.documentStyle) === null || _documentData$documen3 === void 0 ? void 0 : _documentData$documen3.textStyle);
+	}
+	const fallbackTextStyle = documentData === null || documentData === void 0 || (_documentData$documen4 = documentData.documentStyle) === null || _documentData$documen4 === void 0 ? void 0 : _documentData$documen4.textStyle;
+	return Math.max(0, ...splitDocumentNoWrapMeasureLines(dataStream).map((line) => measureDocumentNoWrapLineByStyle(line, fallbackTextStyle)));
+}
+/**
+* Measures the widest segment that docs line breaking keeps together. This is
+* useful when a host may wrap normally but still needs enough width to avoid
+* clipping an individual word, CJK glyph, or punctuation segment.
+*/
+function measureDocumentUnbreakableTextWidth(documentData) {
+	var _documentData$body$da, _documentData$body;
+	const dataStream = (_documentData$body$da = documentData === null || documentData === void 0 || (_documentData$body = documentData.body) === null || _documentData$body === void 0 ? void 0 : _documentData$body.dataStream) !== null && _documentData$body$da !== void 0 ? _documentData$body$da : "";
+	if (!documentData || !dataStream) return 0;
+	const breaker = new LineBreaker(dataStream);
+	let start = 0;
+	let maxWidth = 0;
+	let breakPoint = breaker.nextBreakPoint();
+	while (breakPoint) {
+		maxWidth = Math.max(maxWidth, measureDocumentNoWrapTextRangeWidth(documentData, start, breakPoint.position));
+		start = breakPoint.position;
+		breakPoint = breaker.nextBreakPoint();
+	}
+	return maxWidth;
+}
+
 //#endregion
 //#region src/custom/custom-object.ts
 var CustomObject = class extends BaseObject {
@@ -26555,7 +27516,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.3";
 
 //#endregion
 //#region src/config/config.ts
@@ -27908,11 +28869,13 @@ var Transformer = class extends _univerjs_core.Disposable {
 		});
 	}
 	_getOutlinePosition(width, height, borderSpacing, borderStrokeWidth) {
+		const offset = borderSpacing + borderStrokeWidth;
+		const strokeOffset = borderStrokeWidth / 2;
 		return {
-			left: borderSpacing - borderStrokeWidth,
-			top: -borderSpacing - this.borderStrokeWidth,
-			width: width + borderSpacing * 2,
-			height: height + borderSpacing * 2
+			left: -offset - strokeOffset,
+			top: -offset - strokeOffset,
+			width: width + offset * 2,
+			height: height + offset * 2
 		};
 	}
 	_getRotateAnchorCursor(type) {
@@ -27986,7 +28949,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 				top += -borderSpacing - borderStrokeWidth;
 				break;
 			case "__SpreadsheetTransformerResizeLM__":
-				left += borderSpacing - borderStrokeWidth;
+				left += -borderSpacing - borderStrokeWidth;
 				top += height / 2 - longEdge / 2;
 				break;
 			case "__SpreadsheetTransformerResizeRM__":
@@ -27994,7 +28957,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 				top += height / 2 - longEdge / 2;
 				break;
 			case "__SpreadsheetTransformerResizeLB__":
-				left += -this.borderSpacing - borderStrokeWidth;
+				left += -borderSpacing - borderStrokeWidth;
 				top += height + borderSpacing - borderStrokeWidth - longEdge;
 				break;
 			case "__SpreadsheetTransformerResizeCB__":
@@ -28034,28 +28997,28 @@ var Transformer = class extends _univerjs_core.Disposable {
 				top += -borderSpacing - borderStrokeWidth;
 				break;
 			case "__SpreadsheetTransformerResizeRT__":
-				left += width + borderSpacing - borderStrokeWidth;
+				left += width + borderSpacing + borderStrokeWidth;
 				top += -borderSpacing - borderStrokeWidth;
 				break;
 			case "__SpreadsheetTransformerResizeLM__":
-				left += borderSpacing - borderStrokeWidth;
+				left += -borderSpacing - borderStrokeWidth;
 				top += height / 2;
 				break;
 			case "__SpreadsheetTransformerResizeRM__":
-				left += width + borderSpacing - borderStrokeWidth;
+				left += width + borderSpacing + borderStrokeWidth;
 				top += height / 2;
 				break;
 			case "__SpreadsheetTransformerResizeLB__":
-				left += -this.borderSpacing - borderStrokeWidth;
-				top += height + borderSpacing - borderStrokeWidth;
+				left += -borderSpacing - borderStrokeWidth;
+				top += height + borderSpacing + borderStrokeWidth;
 				break;
 			case "__SpreadsheetTransformerResizeCB__":
 				left += width / 2;
-				top += height + borderSpacing - borderStrokeWidth;
+				top += height + borderSpacing + borderStrokeWidth;
 				break;
 			case "__SpreadsheetTransformerResizeRB__":
-				left += width + borderSpacing - borderStrokeWidth;
-				top += height + borderSpacing - borderStrokeWidth;
+				left += width + borderSpacing + borderStrokeWidth;
+				top += height + borderSpacing + borderStrokeWidth;
 				break;
 		}
 		return {
@@ -28094,8 +29057,8 @@ var Transformer = class extends _univerjs_core.Disposable {
 			width: anchorProps.width,
 			height: anchorProps.height,
 			radius: anchorProps.radius,
-			left: left + (anchorSize - anchorProps.width) / 2,
-			top: top + (anchorSize - anchorProps.height) / 2,
+			left: left + (anchorSize - anchorProps.width) / 2 - anchorStrokeWidth / 2,
+			top: top + (anchorSize - anchorProps.height) / 2 - anchorStrokeWidth / 2,
 			shadowColor: anchorShadowColor,
 			shadowBlur: anchorShadowBlur,
 			shadowOffsetX: anchorShadowOffsetX,
@@ -29409,14 +30372,17 @@ let RenderUnit = class RenderUnit extends _univerjs_core.Disposable {
 		return this._renderContext.components;
 	}
 	constructor(init, parentInjector) {
-		var _init$createUnitOptio;
+		var _init$createUnitOptio, _init$createUnitOptio2, _init$createUnitOptio3;
 		super();
 		_defineProperty(this, "isRenderUnit", true);
 		_defineProperty(this, "_activated$", new rxjs.BehaviorSubject(true));
 		_defineProperty(this, "activated$", this._activated$.pipe((0, rxjs.distinctUntilChanged)()));
 		_defineProperty(this, "_injector", void 0);
 		_defineProperty(this, "_renderContext", void 0);
-		this._injector = parentInjector.createChild();
+		_defineProperty(this, "_dependencyService", void 0);
+		const renderParentInjector = (_init$createUnitOptio = (_init$createUnitOptio2 = init.createUnitOptions) === null || _init$createUnitOptio2 === void 0 ? void 0 : _init$createUnitOptio2.renderParentInjector) !== null && _init$createUnitOptio !== void 0 ? _init$createUnitOptio : parentInjector;
+		this._injector = renderParentInjector.createChild();
+		this._dependencyService = new RenderUnitDependencyService(this._injector, () => this._renderContext);
 		this._renderContext = {
 			unit: init.unit,
 			unitId: init.unit.getUnitId(),
@@ -29430,13 +30396,14 @@ let RenderUnit = class RenderUnit extends _univerjs_core.Disposable {
 			activate: () => this._activated$.next(true),
 			deactivate: () => this._activated$.next(false)
 		};
-		if (((_init$createUnitOptio = init.createUnitOptions) === null || _init$createUnitOptio === void 0 ? void 0 : _init$createUnitOptio.makeCurrent) === false) this.deactivate();
+		if (((_init$createUnitOptio3 = init.createUnitOptions) === null || _init$createUnitOptio3 === void 0 ? void 0 : _init$createUnitOptio3.makeCurrent) === false) this.deactivate();
 	}
 	dispose() {
-		this._injector.dispose();
-		super.dispose();
+		if (this._disposed) return;
 		this._activated$.next(false);
 		this._activated$.complete();
+		super.dispose();
+		this._injector.dispose();
 		this._renderContext.unit = null;
 		this._renderContext.components.clear();
 	}
@@ -29447,7 +30414,10 @@ let RenderUnit = class RenderUnit extends _univerjs_core.Disposable {
 	* Get a dependency from the RenderUnit's injector.
 	*/
 	with(dependency) {
-		return this._injector.get(dependency);
+		return this._dependencyService.resolve(dependency);
+	}
+	getInjector() {
+		return this._injector;
 	}
 	/**
 	* Add render dependencies to the RenderUnit's injector. Note that the dependencies would be initialized immediately
@@ -29457,16 +30427,8 @@ let RenderUnit = class RenderUnit extends _univerjs_core.Disposable {
 		this._initDependencies(dependencies);
 	}
 	_initDependencies(dependencies) {
-		const j = this._injector;
-		dependencies.forEach((dep) => {
-			const [identifier, implOrNull] = Array.isArray(dep) ? dep : [dep, null];
-			if (!implOrNull) j.add([identifier, { useFactory: () => j.createInstance(identifier, this._renderContext) }]);
-			else if ((0, _univerjs_core.isClassDependencyItem)(implOrNull)) j.add([identifier, { useFactory: () => j.createInstance(implOrNull.useClass, this._renderContext) }]);
-			else throw new Error("[RenderUnit]: render dependency could only be an class!");
-		});
-		dependencies.forEach((dep) => {
-			const [identifier] = Array.isArray(dep) ? dep : [dep, null];
-			j.get(identifier);
+		this._dependencyService.register(dependencies).forEach((record) => {
+			this._dependencyService.resolveRecord(record);
 		});
 	}
 	getRenderContext() {
@@ -29480,6 +30442,86 @@ let RenderUnit = class RenderUnit extends _univerjs_core.Disposable {
 	}
 };
 RenderUnit = __decorate([__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector))], RenderUnit);
+var RenderUnitDependencyService = class {
+	constructor(_injector, _getRenderContext) {
+		this._injector = _injector;
+		this._getRenderContext = _getRenderContext;
+		_defineProperty(this, "_records", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_resolved", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_resolving", /* @__PURE__ */ new Set());
+	}
+	register(dependencies) {
+		const records = [];
+		const seen = /* @__PURE__ */ new Set();
+		dependencies.forEach((dependency) => {
+			const parsed = this._parseDependency(dependency);
+			const key = getRenderDependencyIdentifierKey$1(parsed.identifier);
+			const existing = this._records.get(key);
+			const record = existing !== null && existing !== void 0 ? existing : this._addRecord(key, parsed.identifier, parsed.create);
+			if (seen.has(record.key)) return;
+			seen.add(record.key);
+			records.push(record);
+		});
+		return records;
+	}
+	resolve(dependency) {
+		const key = getRenderDependencyIdentifierKey$1(dependency);
+		if (this._resolved.has(key)) return this._resolved.get(key);
+		if (this._resolving.has(key)) return;
+		const record = this._records.get(key);
+		if (record) return this.resolveRecord(record);
+		return this._injector.get(dependency, _univerjs_core.LookUp.SELF);
+	}
+	resolveRecord(record) {
+		if (this._resolved.has(record.key)) return this._resolved.get(record.key);
+		if (this._resolving.has(record.key)) return;
+		this._resolving.add(record.key);
+		try {
+			return this._injector.get(record.identifier, _univerjs_core.LookUp.SELF);
+		} finally {
+			this._resolving.delete(record.key);
+		}
+	}
+	_addRecord(key, identifier, create) {
+		const record = {
+			key,
+			identifier,
+			create
+		};
+		this._records.set(key, record);
+		this._injector.add([identifier, { useFactory: () => this._create(record) }]);
+		return record;
+	}
+	_create(record) {
+		if (this._resolved.has(record.key)) return this._resolved.get(record.key);
+		const alreadyResolving = this._resolving.has(record.key);
+		if (!alreadyResolving) this._resolving.add(record.key);
+		try {
+			const instance = record.create();
+			this._resolved.set(record.key, instance);
+			return instance;
+		} finally {
+			if (!alreadyResolving) this._resolving.delete(record.key);
+		}
+	}
+	_parseDependency(dependency) {
+		const [identifier, implOrNull] = Array.isArray(dependency) ? dependency : [dependency, null];
+		if (!implOrNull) return {
+			identifier,
+			create: () => this._injector.createInstance(identifier, this._getRenderContext())
+		};
+		if ((0, _univerjs_core.isClassDependencyItem)(implOrNull)) return {
+			identifier,
+			create: () => this._injector.createInstance(implOrNull.useClass, this._getRenderContext())
+		};
+		throw new Error("[RenderUnit]: render dependency could only be an class!");
+	}
+};
+function getRenderDependencyIdentifierKey$1(identifier) {
+	const decoratorName = identifier === null || identifier === void 0 ? void 0 : identifier.decoratorName;
+	if (typeof decoratorName === "string" && decoratorName) return `identifier:${decoratorName}`;
+	return identifier;
+}
 
 //#endregion
 //#region src/render-manager/render-manager.service.ts
@@ -29520,10 +30562,11 @@ let RenderManagerService = class RenderManagerService extends _univerjs_core.Dis
 	registerRenderModules(type, deps) {
 		if (!this._renderDependencies.has(type)) this._renderDependencies.set(type, []);
 		const dependencies = this._renderDependencies.get(type);
-		dependencies.push(...deps);
-		for (const [_, render] of this._renderMap) if (render.type === type) this._tryAddRenderDependencies(render, deps);
+		const registeredDeps = deps.filter((dep) => !hasRenderDependency(dependencies, dep));
+		dependencies.push(...registeredDeps);
+		for (const [_, render] of this._renderMap) if (render.type === type) this._tryAddRenderDependencies(render, registeredDeps);
 		return (0, _univerjs_core.toDisposable)(() => {
-			deps.forEach((dep) => (0, _univerjs_core.remove)(dependencies, dep));
+			registeredDeps.forEach((dep) => (0, _univerjs_core.remove)(dependencies, dep));
 		});
 	}
 	/**
@@ -29534,6 +30577,7 @@ let RenderManagerService = class RenderManagerService extends _univerjs_core.Dis
 	registerRenderModule(type, depCtor) {
 		if (!this._renderDependencies.has(type)) this._renderDependencies.set(type, []);
 		const dependencies = this._renderDependencies.get(type);
+		if (hasRenderDependency(dependencies, depCtor)) return (0, _univerjs_core.toDisposable)(() => {});
 		dependencies.push(depCtor);
 		for (const [_, render] of this._renderMap) if (render.type === type) this._tryAddRenderDependencies(render, [depCtor]);
 		return (0, _univerjs_core.toDisposable)(() => (0, _univerjs_core.remove)(dependencies, depCtor));
@@ -29566,7 +30610,9 @@ let RenderManagerService = class RenderManagerService extends _univerjs_core.Dis
 	* @returns renderUnit:IRender
 	*/
 	createRender(unitId, createUnitOptions) {
-		const renderer = this._createRender(unitId, this._injector.createInstance(Engine, unitId, void 0), true, createUnitOptions);
+		var _createUnitOptions$re;
+		const parentInjector = (_createUnitOptions$re = createUnitOptions === null || createUnitOptions === void 0 ? void 0 : createUnitOptions.renderParentInjector) !== null && _createUnitOptions$re !== void 0 ? _createUnitOptions$re : this._injector;
+		const renderer = this._createRender(unitId, parentInjector.createInstance(Engine, unitId, void 0), (createUnitOptions === null || createUnitOptions === void 0 ? void 0 : createUnitOptions.embeddedRender) !== true, createUnitOptions, parentInjector);
 		this._renderCreated$.next(renderer);
 		return renderer;
 	}
@@ -29590,7 +30636,7 @@ let RenderManagerService = class RenderManagerService extends _univerjs_core.Dis
 	* @param isMainScene
 	* @returns renderUnit:IRender
 	*/
-	_createRender(unitId, engine, isMainScene = true, createUnitOptions) {
+	_createRender(unitId, engine, isMainScene = true, createUnitOptions, parentInjector = this._injector) {
 		const existItem = this.getRenderById(unitId);
 		let shouldDestroyEngine = true;
 		if (existItem != null) {
@@ -29607,7 +30653,7 @@ let RenderManagerService = class RenderManagerService extends _univerjs_core.Dis
 		if (unit) {
 			const type = this._univerInstanceService.getUnitType(unitId);
 			const ctorOfDeps = this._getRenderDepsByType(type);
-			renderUnit = this._injector.createInstance(RenderUnit, {
+			renderUnit = parentInjector.createInstance(RenderUnit, {
 				unit,
 				engine,
 				scene,
@@ -29615,7 +30661,16 @@ let RenderManagerService = class RenderManagerService extends _univerjs_core.Dis
 				createUnitOptions
 			});
 			this._addRenderUnit(unitId, renderUnit);
-			this._tryAddRenderDependencies(renderUnit, ctorOfDeps);
+			try {
+				this._tryAddRenderDependencies(renderUnit, ctorOfDeps);
+			} catch (error) {
+				try {
+					this._disposeItem(renderUnit);
+				} finally {
+					this._renderMap.delete(unitId);
+				}
+				throw error;
+			}
 		} else {
 			renderUnit = {
 				isThumbNail: true,
@@ -29678,6 +30733,18 @@ RenderManagerService = __decorate([
 	__decorateParam(1, _univerjs_core.IUniverInstanceService),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))
 ], RenderManagerService);
+function hasRenderDependency(dependencies, dep) {
+	const key = getRenderDependencyIdentifierKey(getRenderDependencyIdentifier(dep));
+	return dependencies.some((registered) => getRenderDependencyIdentifierKey(getRenderDependencyIdentifier(registered)) === key);
+}
+function getRenderDependencyIdentifier(dep) {
+	return Array.isArray(dep) ? dep[0] : dep;
+}
+function getRenderDependencyIdentifierKey(identifier) {
+	const decoratorName = identifier.decoratorName;
+	if (typeof decoratorName === "string" && decoratorName) return `identifier:${decoratorName}`;
+	return identifier;
+}
 const IRenderManagerService = (0, _univerjs_core.createIdentifier)("engine-render.render-manager.service");
 function isDisposable(thing) {
 	return !!thing && typeof thing.dispose === "function";
@@ -30106,13 +31173,13 @@ var Viewport = class {
 	* @param delta
 	* @returns isLimited
 	*/
-	scrollByBarDeltaValue(delta, isTrigger = true) {
+	scrollByBarDeltaValue(delta, isTrigger = true, options) {
 		const x = this.scrollX + (delta.x || 0);
 		const y = this.scrollY + (delta.y || 0);
 		return this._scrollToBarPosCore({
 			x,
 			y
-		}, isTrigger);
+		}, isTrigger, options);
 	}
 	/**
 	* Viewport scroll to certain position.
@@ -30650,7 +31717,7 @@ var Viewport = class {
 	* @param rawScrollXY Partial<IViewportScrollPosition>
 	* @param isTrigger
 	*/
-	_scrollToBarPosCore(rawScrollXY, isTrigger = true) {
+	_scrollToBarPosCore(rawScrollXY, isTrigger = true, options) {
 		var _this$_scrollBar6, _this$_scrollBar7, _this$_scrollBar8, _this$_scrollBar9, _this$_scrollBar10;
 		if (this._scrollBar == null) return;
 		let scrollX = rawScrollXY.x;
@@ -30671,7 +31738,9 @@ var Viewport = class {
 			rawScrollY: rawScrollXY.y,
 			limitX: (_this$_scrollBar6 = this._scrollBar) === null || _this$_scrollBar6 === void 0 ? void 0 : _this$_scrollBar6.limitX,
 			limitY: (_this$_scrollBar7 = this._scrollBar) === null || _this$_scrollBar7 === void 0 ? void 0 : _this$_scrollBar7.limitY,
-			isTrigger
+			isTrigger,
+			isBarDragging: options === null || options === void 0 ? void 0 : options.isBarDragging,
+			isBarDragEnd: options === null || options === void 0 ? void 0 : options.isBarDragEnd
 		};
 		(_this$_scrollBar8 = this._scrollBar) === null || _this$_scrollBar8 === void 0 || _this$_scrollBar8.makeDirty(true);
 		this.onScrollAfter$.emitEvent(scrollSubParam);
@@ -30684,7 +31753,9 @@ var Viewport = class {
 			viewportScrollY: this.viewportScrollY,
 			limitX: (_this$_scrollBar9 = this._scrollBar) === null || _this$_scrollBar9 === void 0 ? void 0 : _this$_scrollBar9.limitX,
 			limitY: (_this$_scrollBar10 = this._scrollBar) === null || _this$_scrollBar10 === void 0 ? void 0 : _this$_scrollBar10.limitY,
-			isTrigger
+			isTrigger,
+			isBarDragging: options === null || options === void 0 ? void 0 : options.isBarDragging,
+			isBarDragEnd: options === null || options === void 0 ? void 0 : options.isBarDragEnd
 		});
 		return afterLimit;
 	}
@@ -30800,13 +31871,11 @@ var Viewport = class {
 			left: Math.max(prevBound.left, currBound.left),
 			right: Math.min(prevBound.right, currBound.right)
 		});
-		const expandX = this.bufferEdgeX;
-		const expandY = this.bufferEdgeY;
 		for (const bound of additionalAreas) {
-			bound.left = bound.left - expandX;
-			bound.right = bound.right + expandX;
-			bound.top = bound.top - expandY;
-			bound.bottom = bound.bottom + expandY;
+			bound.left = bound.left - this.bufferEdgeX;
+			bound.right = bound.right + this.bufferEdgeX;
+			bound.top = bound.top - this.bufferEdgeY;
+			bound.bottom = bound.bottom + this.bufferEdgeY;
 		}
 		return additionalAreas;
 	}
@@ -31009,6 +32078,7 @@ exports.WatermarkLayer = WatermarkLayer;
 exports.calculateRectRotate = calculateRectRotate;
 exports.cancelRequestFrame = cancelRequestFrame;
 exports.checkStyle = checkStyle;
+exports.cjk = cjk;
 exports.clampRange = clampRange;
 exports.clearLineByBorderType = clearLineByBorderType;
 exports.compareDocumentSkeletonNestedPagePathOrder = compareDocumentSkeletonNestedPagePathOrder;
@@ -31033,6 +32103,7 @@ exports.getCurrentScrollXY = getCurrentScrollXY;
 exports.getCurrentTypeOfRenderer = getCurrentTypeOfRenderer;
 exports.getDPI = getDPI;
 exports.getDevicePixelRatio = getDevicePixelRatio;
+exports.getDocsCustomBlockRenderViewport = getDocsCustomBlockRenderViewport;
 exports.getDocsSkeletonPageSize = getDocsSkeletonPageSize;
 exports.getDocsTableRenderViewport = getDocsTableRenderViewport;
 exports.getDocumentSkeletonColumnPagePathInfo = getDocumentSkeletonColumnPagePathInfo;
@@ -31066,9 +32137,6 @@ exports.glyphIterator = glyphIterator;
 exports.hasAllLatin = hasAllLatin;
 exports.hasArabic = hasArabic;
 exports.hasBasicLatin = hasBasicLatin;
-exports.hasCJK = hasCJK;
-exports.hasCJKPunctuation = hasCJKPunctuation;
-exports.hasCJKText = hasCJKText;
 exports.hasLatinExtendedA = hasLatinExtendedA;
 exports.hasLatinExtendedB = hasLatinExtendedB;
 exports.hasLatinOneSupplement = hasLatinOneSupplement;
@@ -31097,6 +32165,9 @@ exports.isRegExp = isRegExp;
 exports.isSameLine = isSameLine;
 exports.isString = isString;
 exports.lineIterator = lineIterator;
+exports.measureDocumentNoWrapTextRangeWidth = measureDocumentNoWrapTextRangeWidth;
+exports.measureDocumentNoWrapTextWidth = measureDocumentNoWrapTextWidth;
+exports.measureDocumentUnbreakableTextWidth = measureDocumentUnbreakableTextWidth;
 exports.mergeInfoOffset = mergeInfoOffset;
 exports.parseDataStreamToTree = parseDataStreamToTree;
 exports.pixelToPt = pixelToPt;
@@ -31113,6 +32184,7 @@ exports.renderTextWatermark = renderTextWatermark;
 exports.renderUserInfoWatermark = renderUserInfoWatermark;
 exports.renderWatermark = renderWatermark;
 exports.requestNewFrame = requestNewFrame;
+exports.setDocsCustomBlockRenderViewportProvider = setDocsCustomBlockRenderViewportProvider;
 exports.setDocsTableRenderViewportProvider = setDocsTableRenderViewportProvider;
 exports.setLineType = setLineType;
 exports.sheetContentViewportKeys = sheetContentViewportKeys;