@univerjs/engine-render 0.25.0 → 1.0.0-alpha.0

package/lib/cjs/index.js

@@ -665,7 +665,7 @@ function getSystemHighlightColor() {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -676,7 +676,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -689,14 +689,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -2313,8 +2313,8 @@ var Path2 = class {
 			const from = this._lines[o - 1];
 			const to = this._lines[o];
 			for (let n = 1; n < lines.length; n++) {
-				const contrastFrom = this._lines[o - 1];
-				const contrastTo = this._lines[o];
+				const contrastFrom = lines[n - 1];
+				const contrastTo = lines[n];
 				const point = this._intersection({
 					from,
 					to
@@ -10878,8 +10878,8 @@ const TINF_OK = 0;
 const TINF_DATA_ERROR = -3;
 var Tree = class {
 	constructor() {
-		_defineProperty(this, "table", new Uint16Array(16));
-		_defineProperty(this, "trans", new Uint16Array(288));
+		_defineProperty(this, "table", /* @__PURE__ */ new Uint16Array(16));
+		_defineProperty(this, "trans", /* @__PURE__ */ new Uint16Array(288));
 	}
 };
 var Data = class {
@@ -10904,10 +10904,10 @@ var Data = class {
 };
 const sltree = new Tree();
 const sdtree = new Tree();
-const length_bits = new Uint8Array(30);
-const length_base = new Uint16Array(30);
-const dist_bits = new Uint8Array(30);
-const dist_base = new Uint16Array(30);
+const length_bits = /* @__PURE__ */ new Uint8Array(30);
+const length_base = /* @__PURE__ */ new Uint16Array(30);
+const dist_bits = /* @__PURE__ */ new Uint8Array(30);
+const dist_base = /* @__PURE__ */ new Uint16Array(30);
 const clcidx = new Uint8Array([
 	16,
 	17,
@@ -10930,7 +10930,7 @@ const clcidx = new Uint8Array([
 	15
 ]);
 const code_tree = new Tree();
-const lengths = new Uint8Array(320);
+const lengths = /* @__PURE__ */ new Uint8Array(320);
 function tinf_build_bits_base(bits, base, delta, first) {
 	let i;
 	let sum;
@@ -10955,7 +10955,7 @@ function tinf_build_fixed_trees(lt, dt) {
 	dt.table[5] = 32;
 	for (i = 0; i < 32; ++i) dt.trans[i] = i;
 }
-const offs = new Uint16Array(16);
+const offs = /* @__PURE__ */ new Uint16Array(16);
 function tinf_build_tree(t, lengths, off, num) {
 	let i;
 	let sum;
@@ -12111,6 +12111,13 @@ function getDocsTableRenderViewport(unitId, tableId) {
 	var _docsTableRenderViewp;
 	return (_docsTableRenderViewp = docsTableRenderViewportProvider === null || docsTableRenderViewportProvider === void 0 ? void 0 : docsTableRenderViewportProvider(unitId, tableId)) !== null && _docsTableRenderViewp !== void 0 ? _docsTableRenderViewp : null;
 }
+function getDocsTableVirtualContentWidth(viewport) {
+	var _viewport$leadingInse, _viewport$trailingIns;
+	return ((_viewport$leadingInse = viewport.leadingInsetLeft) !== null && _viewport$leadingInse !== void 0 ? _viewport$leadingInse : 0) + viewport.contentWidth + ((_viewport$trailingIns = viewport.trailingInsetRight) !== null && _viewport$trailingIns !== void 0 ? _viewport$trailingIns : 0);
+}
+function hasDocsTableHorizontalViewport(viewport) {
+	return viewport != null && getDocsTableVirtualContentWidth(viewport) > viewport.viewportWidth;
+}
 
 //#endregion
 //#region src/components/docs/view-model/data-stream-tree-node.ts
@@ -12581,6 +12588,68 @@ var DocumentViewModel = class DocumentViewModel {
 	}
 };
 
+//#endregion
+//#region src/components/docs/document-compatibility.ts
+const MODERN_DOCUMENT_COMPATIBILITY_POLICY = {
+	mode: "modern",
+	applyDocumentDefaultParagraphStyle: true,
+	useWordStyleLineHeight: true,
+	font: { metricScaleRules: [] },
+	table: {
+		currentPageOverflowTolerance: 0,
+		rowOverflowTolerance: 0,
+		allowImportedTableMarginOverflow: false
+	}
+};
+const TRADITIONAL_DOCUMENT_COMPATIBILITY_POLICY = {
+	mode: "traditional",
+	applyDocumentDefaultParagraphStyle: false,
+	useWordStyleLineHeight: true,
+	font: { metricScaleRules: [{
+		fontFamily: /^calibri$/i,
+		minFontSize: 20,
+		fontString: /\bbold\b/i,
+		content: /^[\d/]+$/u,
+		widthScale: .92
+	}] },
+	table: {
+		currentPageOverflowTolerance: 12,
+		rowOverflowTolerance: 4,
+		allowImportedTableMarginOverflow: true
+	}
+};
+const UNSPECIFIED_DOCUMENT_COMPATIBILITY_POLICY = {
+	mode: "unspecified",
+	applyDocumentDefaultParagraphStyle: false,
+	useWordStyleLineHeight: false,
+	font: { metricScaleRules: [] },
+	table: {
+		currentPageOverflowTolerance: 0,
+		rowOverflowTolerance: 0,
+		allowImportedTableMarginOverflow: false
+	}
+};
+function getDocumentCompatibilityPolicy(documentFlavor) {
+	if (documentFlavor === _univerjs_core.DocumentFlavor.MODERN) return MODERN_DOCUMENT_COMPATIBILITY_POLICY;
+	if (documentFlavor === _univerjs_core.DocumentFlavor.TRADITIONAL) return TRADITIONAL_DOCUMENT_COMPATIBILITY_POLICY;
+	return UNSPECIFIED_DOCUMENT_COMPATIBILITY_POLICY;
+}
+function applyFontMetricCompatibility(content, fontStyle, bBox, policy) {
+	const fontFamilies = fontStyle.fontFamily.split(",").map((item) => item.trim().replace(/^['"]|['"]$/g, ""));
+	const rule = policy.font.metricScaleRules.find((rule) => (rule.minFontSize == null || fontStyle.originFontSize >= rule.minFontSize) && (rule.fontString == null || rule.fontString.test(fontStyle.fontString)) && (rule.content == null || rule.content.test(content)) && fontFamilies.some((family) => rule.fontFamily.test(family)));
+	if ((rule === null || rule === void 0 ? void 0 : rule.widthScale) == null) return bBox;
+	return {
+		...bBox,
+		width: bBox.width * rule.widthScale
+	};
+}
+function isTraditionalDocumentCompatibility(policy) {
+	return policy.mode === "traditional";
+}
+function shouldAllowImportedTableMarginOverflow(policy, tableSource) {
+	return policy.table.allowImportedTableMarginOverflow && tableSource != null && typeof tableSource === "object" && "docxWidth" in tableSource;
+}
+
 //#endregion
 //#region src/components/docs/layout/model/glyph.ts
 function isSpace(char) {
@@ -12661,6 +12730,7 @@ function createSkeletonCustomBlockGlyph(config, glyphWidth = 0, glyphHeight = 0,
 	};
 }
 function _createSkeletonWordOrLetter(glyphType, content, config, glyphWidth, glyphInfo) {
+	var _config$documentCompa;
 	const { fontStyle, textStyle, charSpace = 1, gridType = _univerjs_core.GridType.LINES, snapToGrid = _univerjs_core.BooleanNumber.FALSE } = config;
 	const skipWidthList = [
 		_univerjs_core.DataStreamTreeTokenType.SECTION_BREAK,
@@ -12711,6 +12781,7 @@ function _createSkeletonWordOrLetter(glyphType, content, config, glyphWidth, gly
 	let xOffset = 0;
 	if (glyphInfo && glyphInfo.boundingBox && glyphInfo.font) bBox = FontCache.getBBoxFromGlyphInfo(glyphInfo, fontStyle);
 	else bBox = FontCache.getTextSize(content, fontStyle);
+	bBox = applyFontMetricCompatibility(content, fontStyle, bBox, (_config$documentCompa = config.documentCompatibilityPolicy) !== null && _config$documentCompa !== void 0 ? _config$documentCompa : getDocumentCompatibilityPolicy());
 	const { width: contentWidth = 0 } = bBox;
 	let width = glyphWidth !== null && glyphWidth !== void 0 ? glyphWidth : contentWidth;
 	if (validationGrid(gridType, snapToGrid)) {
@@ -12831,11 +12902,11 @@ function createSkeletonLine(paragraphIndex, lineType, lineBoundingBox, columnWid
 		lineSke.isBehindTable = true;
 		lineSke.tableId = tableId;
 	}
-	lineSke.divides = _calculateDividesByDrawings(lineHeight, lineTop, columnWidth, paddingLeft, paddingRight, page, headerPage, footerPage, new Map(Array.from(pageSkeDrawings).filter(([_, drawing]) => drawing.drawingOrigin.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE)), headersDrawings, footersDrawings, new Map(Array.from(pageSkeTables).filter(([_, table]) => table.tableSource.textWrap === _univerjs_core.TableTextWrapType.WRAP)));
+	lineSke.divides = _calculateDividesByDrawings(lineHeight, lineTop, columnWidth, paddingLeft, paddingRight, page, headerPage, footerPage, new Map(Array.from(pageSkeDrawings).filter(([_, drawing]) => drawing.drawingOrigin.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE && drawing.drawingOrigin.layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_NONE)), headersDrawings, footersDrawings, new Map(Array.from(pageSkeTables).filter(([_, table]) => table.tableSource.textWrap === _univerjs_core.TableTextWrapType.WRAP)));
 	for (const divide of lineSke.divides) divide.parent = lineSke;
 	return lineSke;
 }
-function calculateLineTopByDrawings(lineHeight = 15.6, lineTop = 0, page, headerPage, footerPage) {
+function calculateLineTopByDrawings(lineHeight = 15.6, lineTop = 0, page, headerPage, footerPage, columnLeft = 0, columnWidth = 0) {
 	let maxTop = lineTop;
 	const pageSkeDrawings = page.skeDrawings;
 	const skeNonWrapTables = new Map(Array.from(page.skeTables).filter(([_, table]) => table.tableSource.textWrap === _univerjs_core.TableTextWrapType.NONE));
@@ -12852,6 +12923,8 @@ function calculateLineTopByDrawings(lineHeight = 15.6, lineTop = 0, page, header
 	pageSkeDrawings === null || pageSkeDrawings === void 0 || pageSkeDrawings.forEach((drawing) => {
 		const top = _getLineTopWidthWrapTopBottom(drawing, lineHeight, lineTop);
 		if (top) maxTop = Math.max(maxTop, top);
+		const blockingWrapTop = _getLineTopWithFullColumnWrap(drawing, lineHeight, lineTop, columnLeft, columnWidth);
+		if (blockingWrapTop) maxTop = Math.max(maxTop, blockingWrapTop);
 	});
 	skeNonWrapTables === null || skeNonWrapTables === void 0 || skeNonWrapTables.forEach((table) => {
 		const top = _getLineTopWidthWrapNone(table, lineHeight, lineTop);
@@ -12859,6 +12932,37 @@ function calculateLineTopByDrawings(lineHeight = 15.6, lineTop = 0, page, header
 	});
 	return maxTop;
 }
+function _getLineTopWithFullColumnWrap(drawing, lineHeight, lineTop, columnLeft, columnWidth) {
+	if (columnWidth <= 0) return;
+	const { aTop, height, aLeft, width, angle = 0, drawingOrigin } = drawing;
+	const { layoutType, distL = 0, distT = 0, distB = 0, distR = 0, wrapText } = drawingOrigin;
+	if (layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE || layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) return;
+	let top = aTop;
+	let drawingHeight = height;
+	let left = aLeft - columnLeft;
+	let drawingWidth = width;
+	if (angle !== 0) {
+		var _boundingBox$top, _boundingBox$height, _boundingBox$left, _boundingBox$width;
+		const boundingBox = getBoundingBox(angle, left, width, top, height);
+		top = (_boundingBox$top = boundingBox.top) !== null && _boundingBox$top !== void 0 ? _boundingBox$top : top;
+		drawingHeight = (_boundingBox$height = boundingBox.height) !== null && _boundingBox$height !== void 0 ? _boundingBox$height : drawingHeight;
+		left = (_boundingBox$left = boundingBox.left) !== null && _boundingBox$left !== void 0 ? _boundingBox$left : left;
+		drawingWidth = (_boundingBox$width = boundingBox.width) !== null && _boundingBox$width !== void 0 ? _boundingBox$width : drawingWidth;
+	}
+	const newTop = top - (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE ? distT : 0);
+	const newHeight = drawingHeight + (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE ? distB + distT : 0);
+	const bottom = newTop + newHeight;
+	if (bottom <= lineTop) return;
+	const split = __getSplitWidthNoAngle(top, drawingHeight, left, drawingWidth, newTop, Math.max(1, newHeight), columnWidth, {
+		distL,
+		distT,
+		distB,
+		distR
+	}, layoutType, wrapText);
+	if (!split) return;
+	if (split.left > 0 || split.left + split.width < columnWidth) return;
+	return bottom;
+}
 function _getLineTopWidthWrapNone(table, lineHeight, lineTop) {
 	const { top, height } = table;
 	if (top + height < lineTop || top > lineHeight + lineTop) return;
@@ -13058,6 +13162,7 @@ function _calculateDivideByDrawings(columnWidth, drawingSplit) {
 			divideSkeleton.push(divide);
 		}
 	}
+	if (divideSkeleton.length === 0 && columnWidth > 0) return [__getDivideSKe(0, columnWidth)];
 	return divideSkeleton;
 }
 function __getDivideSKe(left, width) {
@@ -13114,17 +13219,11 @@ function createSkeletonSection(columnProperties = [], columnSeparatorType = _uni
 	let colWidth = 0;
 	let spaceWidth = 0;
 	if (columnProperties.length === 0) columns.push(_getSkeletonColumn(left, sectionWidth, 0, _univerjs_core.ColumnSeparatorType.NONE));
-	else for (let i = 0; i < columnProperties.length; i++) {
-		const { width, paddingEnd } = columnProperties[i];
+	else for (const { width, paddingEnd } of _fitColumnProperties(columnProperties, sectionWidth)) {
 		spaceWidth = paddingEnd;
 		colWidth = width;
 		columns.push(_getSkeletonColumn(left, colWidth, spaceWidth, columnSeparatorType));
 		left += colWidth + spaceWidth;
-		if (i === columnProperties.length - 1) {
-			colWidth = sectionWidth !== Number.POSITIVE_INFINITY ? sectionWidth - colWidth : width;
-			spaceWidth = 0;
-			columns.push(_getSkeletonColumn(left, colWidth, spaceWidth, columnSeparatorType));
-		}
 	}
 	const newSection = {
 		columns,
@@ -13139,6 +13238,42 @@ function createSkeletonSection(columnProperties = [], columnSeparatorType = _uni
 	});
 	return newSection;
 }
+function _fitColumnProperties(columnProperties, sectionWidth) {
+	if (sectionWidth === Number.POSITIVE_INFINITY || columnProperties.length === 0) return columnProperties;
+	const safeSectionWidth = Math.max(0, sectionWidth);
+	const widths = columnProperties.map(({ width }) => Math.max(0, width));
+	const spaces = columnProperties.map(({ paddingEnd }, index) => index === columnProperties.length - 1 ? 0 : Math.max(0, paddingEnd));
+	const totalWidth = widths.reduce((sum, width) => sum + width, 0);
+	if (safeSectionWidth === 0) return columnProperties.map((columnProperty) => ({
+		...columnProperty,
+		width: 0,
+		paddingEnd: 0
+	}));
+	if (totalWidth <= 0) {
+		const equalWidth = safeSectionWidth / columnProperties.length;
+		return columnProperties.map((columnProperty, index) => ({
+			...columnProperty,
+			width: equalWidth,
+			paddingEnd: 0
+		}));
+	}
+	if (totalWidth > safeSectionWidth) {
+		const scale = safeSectionWidth / totalWidth;
+		return columnProperties.map((columnProperty, index) => ({
+			...columnProperty,
+			width: widths[index] * scale,
+			paddingEnd: 0
+		}));
+	}
+	const spaceBudget = safeSectionWidth - totalWidth;
+	const totalSpace = spaces.reduce((sum, space) => sum + space, 0);
+	const fittedSpaces = totalSpace > spaceBudget && totalSpace > 0 ? spaces.map((space) => space / totalSpace * spaceBudget) : spaces;
+	return columnProperties.map((columnProperty, index) => ({
+		...columnProperty,
+		width: widths[index],
+		paddingEnd: fittedSpaces[index]
+	}));
+}
 function setColumnFullState(column, state) {
 	column.isFull = state;
 }
@@ -13239,12 +13374,13 @@ function createTableSkeleton(ctx, curPage, viewModel, tableNode, sectionBreakCon
 function rollbackListCache(listLevel, table) {
 	const { startIndex, endIndex } = table;
 	for (const paragraphLists of listLevel.values()) for (const paragraphList of paragraphLists) {
+		if (paragraphList == null) continue;
 		const paragraphListIndex = paragraphList.findIndex((p) => p.paragraph.startIndex > startIndex && p.paragraph.startIndex < endIndex);
 		if (paragraphListIndex > -1) paragraphList.splice(paragraphListIndex);
 	}
 }
 function createTableSkeletons(ctx, curPage, viewModel, tableNode, sectionBreakConfig, availableHeight) {
-	var _viewModel$getTableBy2;
+	var _viewModel$getTableBy2, _sectionBreakConfig$d;
 	const skeTables = [];
 	const { startIndex, endIndex, children: rowNodes } = tableNode;
 	const table = (_viewModel$getTableBy2 = viewModel.getTableByStartIndex(startIndex)) === null || _viewModel$getTableBy2 === void 0 ? void 0 : _viewModel$getTableBy2.tableSource;
@@ -13267,9 +13403,10 @@ function createTableSkeletons(ctx, curPage, viewModel, tableNode, sectionBreakCo
 	skeTables.push(curTableSkeleton);
 	for (const rowNode of rowNodes) dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig, rowNode, rowNodes.indexOf(rowNode), table, createCache);
 	updateTableSkeletonsPosition(createCache, curPage, skeTables, table);
+	const documentCompatibilityPolicy = (_sectionBreakConfig$d = sectionBreakConfig.documentCompatibilityPolicy) !== null && _sectionBreakConfig$d !== void 0 ? _sectionBreakConfig$d : getDocumentCompatibilityPolicy();
 	return {
 		skeTables,
-		fromCurrentPage: skeTables[0].height <= availableHeight
+		fromCurrentPage: skeTables[0].height <= availableHeight + documentCompatibilityPolicy.table.currentPageOverflowTolerance
 	};
 }
 function updateTableSkeletonsPosition(cache, curPage, skeTables, table) {
@@ -13299,14 +13436,16 @@ function getAvailableHeight(curPage, cache, hasRepeatHeader) {
 	return pageContentHeight;
 }
 function dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig, rowNode, row, table, cache, isRepeatRow = false) {
+	var _sectionBreakConfig$d2;
 	const pageContentHeight = getAvailableHeight(curPage, cache, false);
 	const availableHeight = getAvailableHeight(curPage, cache, true);
+	const documentCompatibilityPolicy = (_sectionBreakConfig$d2 = sectionBreakConfig.documentCompatibilityPolicy) !== null && _sectionBreakConfig$d2 !== void 0 ? _sectionBreakConfig$d2 : getDocumentCompatibilityPolicy();
 	const { children: cellNodes, startIndex, endIndex } = rowNode;
 	const rowSource = table.tableRows[row];
 	const { trHeight, cantSplit } = rowSource;
 	const rowSkeletons = [];
 	const { hRule, val } = trHeight;
-	const canRowSplit = cantSplit === _univerjs_core.BooleanNumber.TRUE && trHeight.hRule === _univerjs_core.TableRowHeightRule.AUTO;
+	const canRowSplit = cantSplit !== _univerjs_core.BooleanNumber.TRUE && trHeight.hRule === _univerjs_core.TableRowHeightRule.AUTO;
 	const MAX_FONT_SIZE = 72;
 	const needOpenNewTable = cache.remainHeight <= MAX_FONT_SIZE;
 	let curTableSkeleton = getCurTableSkeleton(skeTables);
@@ -13352,7 +13491,8 @@ function dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig
 	while (rowSkeletons.length > 0) {
 		const rowSkeleton = rowSkeletons.shift();
 		const lastRow = curTableSkeleton.rows[curTableSkeleton.rows.length - 1];
-		if (cache.remainHeight < MAX_FONT_SIZE || cache.remainHeight < rowSkeleton.height) {
+		const rowOverflowHeight = rowSkeleton.height - cache.remainHeight;
+		if (cache.remainHeight < MAX_FONT_SIZE || rowOverflowHeight > documentCompatibilityPolicy.table.rowOverflowTolerance) {
 			cache.remainHeight = getAvailableHeight(curPage, cache, row !== 0 && rowSkeleton.index !== lastRow.index);
 			cache.rowTop = 0;
 			if (curTableSkeleton.rows.length > 0) {
@@ -13528,18 +13668,22 @@ function getTableIdAndSliceIndex(tableSliceId) {
 
 //#endregion
 //#region src/components/docs/layout/block/paragraph/layout-ruler.ts
+const LINE_LAYOUT_OVERFLOW_TOLERANCE = 2;
+const FLOAT_OBJECT_RELAYOUT_LIMIT = 5;
 function layoutParagraph(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType = "Normal") {
 	if (isParagraphFirstShapedText) if (paragraphConfig.bulletSkeleton) {
+		var _paragraphProperties$;
 		const { bulletSkeleton, paragraphStyle = {} } = paragraphConfig;
 		const { gridType = _univerjs_core.GridType.LINES, charSpace = 0, defaultTabStop = 10.5 } = sectionBreakConfig;
 		const { snapToGrid = _univerjs_core.BooleanNumber.TRUE } = paragraphStyle;
 		const charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
 		const bulletGlyph = createSkeletonBulletGlyph(glyphGroup[0], bulletSkeleton, charSpaceApply);
 		const paragraphProperties = bulletSkeleton.paragraphProperties || {};
-		paragraphConfig.paragraphStyle = mergeByV(paragraphConfig.paragraphStyle, {
+		paragraphConfig.paragraphStyle = {
 			...paragraphProperties,
-			hanging: { v: bulletGlyph.width }
-		}, "max");
+			hanging: (_paragraphProperties$ = paragraphProperties.hanging) !== null && _paragraphProperties$ !== void 0 ? _paragraphProperties$ : { v: bulletGlyph.width },
+			...paragraphConfig.paragraphStyle
+		};
 		_lineOperator(ctx, [bulletGlyph, ...glyphGroup], pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType);
 	} else _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType);
 	else _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType);
@@ -13568,6 +13712,11 @@ function isGlyphGroupBeyondContentBox(glyphGroup, left, divideWidth) {
 	}
 	return isBeyondContentBox;
 }
+function shouldKeepOverflowingTextOnLine(sectionBreakConfig) {
+	var _sectionBreakConfig$r;
+	const wrapStrategy = (_sectionBreakConfig$r = sectionBreakConfig.renderConfig) === null || _sectionBreakConfig$r === void 0 ? void 0 : _sectionBreakConfig$r.wrapStrategy;
+	return wrapStrategy === _univerjs_core.WrapStrategy.CLIP || wrapStrategy === _univerjs_core.WrapStrategy.OVERFLOW;
+}
 function _getConsecutiveHyphenLineCount(divide) {
 	var _divide$parent;
 	const column = (_divide$parent = divide.parent) === null || _divide$parent === void 0 ? void 0 : _divide$parent.parent;
@@ -13603,12 +13752,20 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
 		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 (preOffsetLeft + width > divide.width) {
+			if (shouldKeepOverflowingTextOnLine(sectionBreakConfig)) {
+				addGlyphToDivide(divide, glyphGroup, preOffsetLeft);
+				updateDivideInfo(divide, { breakType: breakPointType });
+				return;
+			}
 			updateDivideInfo(divide, { isFull: true });
 			const hyphenLineCount = _getConsecutiveHyphenLineCount(divideInfo.divide);
 			const { consecutiveHyphenLimit = Number.POSITIVE_INFINITY } = sectionBreakConfig;
 			if (divideInfo.isLast && glyphGroup.length === 1 && (glyphGroup[0].content === _univerjs_core.DataStreamTreeTokenType.SPACE || glyphGroup[0].content === _univerjs_core.DataStreamTreeTokenType.PARAGRAPH)) addGlyphToDivide(divide, glyphGroup, preOffsetLeft);
 			else if (divideInfo.isLast && !isGlyphGroupBeyondContentBox(glyphGroup, preOffsetLeft, divide.width) && isGlyphGroupEndWithWhiteSpaces(glyphGroup)) addGlyphToDivide(divide, glyphGroup, preOffsetLeft);
-			else if ((divide === null || divide === void 0 ? void 0 : divide.glyphGroup.length) === 0) {
+			else if (!isLast && (divide === null || divide === void 0 ? void 0 : divide.glyphGroup.length) === 0 && glyphGroup.length === 1 && glyphGroup[0].streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK && glyphGroup[0].width > divide.width) {
+				updateDivideInfo(divide, { isFull: true });
+				_divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType, defaultSpanLineHeight);
+			} else if ((divide === null || divide === void 0 ? void 0 : divide.glyphGroup.length) === 0) {
 				const sliceGlyphGroup = [];
 				while (glyphGroup.length) {
 					sliceGlyphGroup.push(glyphGroup.shift());
@@ -13633,11 +13790,16 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
 		} else {
 			const currentLine = divide.parent;
 			const maxBox = __maxFontBoundingBoxByGlyphGroup(glyphGroup);
-			if (currentLine && maxBox && !__isNullLine(currentLine)) {
+			if (currentLine && __isZeroWidthNonFlowFloatingAnchorLine(__getGlyphGroupByLine(currentLine), paragraphConfig.paragraphNonInlineSkeDrawings) && __hasFlowGlyph(glyphGroup)) {
+				for (const lineDivide of currentLine.divides) updateDivideInfo(lineDivide, { isFull: true });
+				_lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConfig, false, breakPointType);
+				return;
+			}
+			if (currentLine && maxBox && !__isNullLine(currentLine) && __hasFlowGlyph(__getGlyphGroupByLine(currentLine)) && !__isZeroWidthNonFlowFloatingAnchorLine(glyphGroup, paragraphConfig.paragraphNonInlineSkeDrawings)) {
 				const { paragraphLineGapDefault, linePitch, lineSpacing, spacingRule, snapToGrid, gridType } = getLineHeightConfig(sectionBreakConfig, paragraphConfig);
 				const { boundingBoxAscent, boundingBoxDescent } = maxBox;
-				const { contentHeight } = __getLineHeight(boundingBoxAscent + boundingBoxDescent, paragraphLineGapDefault, linePitch, gridType, lineSpacing, spacingRule, snapToGrid);
-				if (currentLine.contentHeight < contentHeight) {
+				const { contentHeight } = getLineHeightMetrics(boundingBoxAscent + boundingBoxDescent, paragraphLineGapDefault, linePitch, gridType, lineSpacing, spacingRule, snapToGrid, paragraphConfig.useWordStyleLineHeight);
+				if (contentHeight - currentLine.contentHeight > LINE_LAYOUT_OVERFLOW_TOLERANCE) {
 					const spanGroupCached = __getGlyphGroupByLine(currentLine);
 					const spanGroupCachedLen = spanGroupCached.length;
 					let newGlyphGroup = [];
@@ -13653,6 +13815,15 @@ function _divideOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphCo
 					return;
 				}
 			}
+			if (currentLine === null || currentLine === void 0 ? void 0 : currentLine.parent) {
+				const anchorDrawings = __getZeroWidthNonFlowFloatingAnchorDrawings(glyphGroup, paragraphConfig.paragraphNonInlineSkeDrawings);
+				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);
+					__updateDrawingPosition(currentLine.parent, drawings);
+				}
+			}
 			addGlyphToDivide(divide, glyphGroup, preOffsetLeft);
 			updateDivideInfo(divide, { breakType: breakPointType });
 		}
@@ -13678,6 +13849,7 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 	const descent = Math.max(...glyphGroup.map((glyph) => glyph.bBox.bd));
 	const glyphLineHeight = defaultGlyphLineHeight || ascent + descent;
 	const { paragraphStyle: originParagraphStyle = {}, paragraphNonInlineSkeDrawings, skeTablesInParagraph, skeHeaders, skeFooters, pDrawingAnchor, paragraphIndex } = paragraphConfig;
+	const isZeroWidthNonFlowFloatingAnchorLine = __isZeroWidthNonFlowFloatingAnchorLine(glyphGroup, paragraphNonInlineSkeDrawings);
 	const { namedStyleType } = originParagraphStyle;
 	const namedStyle = namedStyleType !== void 0 ? _univerjs_core.NAMED_STYLE_SPACE_MAP[namedStyleType] : null;
 	const { spaceAbove, spaceBelow, indentFirstLine, hanging, indentStart, indentEnd } = {
@@ -13686,9 +13858,22 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 		spaceBelow: (_originParagraphStyle2 = originParagraphStyle.spaceBelow) !== null && _originParagraphStyle2 !== void 0 ? _originParagraphStyle2 : namedStyle === null || namedStyle === void 0 ? void 0 : namedStyle.spaceBelow
 	};
 	const { paragraphLineGapDefault, linePitch, lineSpacing, spacingRule, snapToGrid, gridType } = getLineHeightConfig(sectionBreakConfig, paragraphConfig);
-	const { paddingTop, paddingBottom, contentHeight, lineSpacingApply } = __getLineHeight(glyphLineHeight, paragraphLineGapDefault, linePitch, gridType, lineSpacing, spacingRule, snapToGrid);
-	const { marginTop, spaceBelowApply } = __getParagraphSpace(ctx, lineSpacingApply, spaceAbove, spaceBelow, isParagraphFirstShapedText, preLine);
+	const hasInlineCustomBlock = glyphGroup.some((glyph) => glyph.streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK && glyph.width !== 0);
+	const glyphGroupCustomBlockIds = new Set(glyphGroup.filter((glyph) => glyph.streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK && glyph.drawingId != null).map((glyph) => glyph.drawingId));
+	let { paddingTop, paddingBottom, contentHeight, lineSpacingApply } = getLineHeightMetrics(glyphLineHeight, paragraphLineGapDefault, linePitch, gridType, lineSpacing, spacingRule, snapToGrid, paragraphConfig.useWordStyleLineHeight, !hasInlineCustomBlock);
+	let { marginTop, spaceBelowApply } = __getParagraphSpace(ctx, lineSpacingApply, spaceAbove, spaceBelow, isParagraphFirstShapedText, preLine);
+	if (isZeroWidthNonFlowFloatingAnchorLine) {
+		paddingTop = 0;
+		paddingBottom = 0;
+		contentHeight = 0;
+		lineSpacingApply = 0;
+		marginTop = 0;
+		spaceBelowApply = 0;
+	}
 	const lineHeight = marginTop + paddingTop + contentHeight + paddingBottom;
+	const { charSpace, defaultTabStop } = getCharSpaceConfig(sectionBreakConfig, paragraphConfig);
+	const charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
+	const paragraphAnchorLeft = __getParagraphAnchorLeft(sectionBreakConfig, paragraphConfig, indentStart);
 	let section = column.parent;
 	if (!section) section = getLastSection(lastPage);
 	const lineTop = ((preLine === null || preLine === void 0 ? void 0 : preLine.lineHeight) || 0) + ((preLine === null || preLine === void 0 ? void 0 : preLine.top) || 0);
@@ -13705,16 +13890,22 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 			if (relativeLineDrawings.length > 0) __updateAndPositionDrawings(ctx, preLine.top, preLine.lineHeight, column, relativeLineDrawings, preLine.paragraphIndex, isParagraphFirstShapedText);
 		}
 	}
+	let deferredInlineGroupAnchorDrawings = [];
 	if (paragraphNonInlineSkeDrawings != null && paragraphNonInlineSkeDrawings.size > 0) {
 		var _pDrawingAnchor$get;
-		__updateAndPositionDrawings(ctx, lineTop, lineHeight, column, [...paragraphNonInlineSkeDrawings.values()].filter((drawing) => drawing.drawingOrigin.docTransform.positionV.relativeFrom !== _univerjs_core.ObjectRelativeFromV.LINE), paragraphConfig.paragraphIndex, isParagraphFirstShapedText, pDrawingAnchor === null || pDrawingAnchor === void 0 || (_pDrawingAnchor$get = pDrawingAnchor.get(paragraphIndex)) === null || _pDrawingAnchor$get === void 0 ? void 0 : _pDrawingAnchor$get.top);
+		let targetDrawings = [...paragraphNonInlineSkeDrawings.values()].filter((drawing) => drawing.drawingOrigin.docTransform.positionV.relativeFrom !== _univerjs_core.ObjectRelativeFromV.LINE);
+		if (hasInlineCustomBlock) {
+			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);
 	}
 	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 = calculateLineTopByDrawings(lineHeight, lineTop, lastPage, headerPage, footerPage);
-	if (lineHeight + newLineTop > section.height && column.lines.length > 0 && lastPage.sections.length > 0 || needOpenNewPageByTableLayout) {
+	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);
 		if (isParagraphFirstShapedText && paragraphNonInlineSkeDrawings && paragraphNonInlineSkeDrawings.size > 0) for (const drawing of paragraphNonInlineSkeDrawings.values()) {
@@ -13728,8 +13919,7 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 		return;
 	}
 	const lineIndex = preLine ? preLine.lineIndex + 1 : 0;
-	const { charSpace, defaultTabStop } = getCharSpaceConfig(sectionBreakConfig, paragraphConfig);
-	let { paddingLeft, paddingRight } = __getIndentPadding(indentFirstLine, hanging, indentStart, indentEnd, getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid), isParagraphFirstShapedText);
+	let { paddingLeft, paddingRight } = __getIndentPadding(indentFirstLine, hanging, indentStart, indentEnd, charSpaceApply, isParagraphFirstShapedText);
 	if (paddingLeft + paddingRight >= column.width) {
 		const leftPercent = paddingLeft / (paddingLeft + paddingRight);
 		paddingLeft = column.width * leftPercent - .5;
@@ -13750,12 +13940,16 @@ function _lineOperator(ctx, glyphGroup, pages, sectionBreakConfig, paragraphConf
 	newLine.parent = column;
 	createAndUpdateBlockAnchor(paragraphIndex, newLine, lineTop, pDrawingAnchor);
 	_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) {
+function __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDrawings, paragraphIndex, isParagraphFirstShapedText, drawingAnchorTop, drawingAnchorLeft = 0, skipRelayoutCheck = false) {
 	if (targetDrawings.length === 0) return;
-	const drawings = __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShapedText, drawingAnchorTop, targetDrawings);
+	const drawings = __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShapedText, drawingAnchorTop, targetDrawings, drawingAnchorLeft);
 	if (drawings == null || drawings.size === 0) return;
-	_reLayoutCheck(ctx, [...drawings.values()].filter((drawing) => {
+	const floatObjects = [...drawings.values()].filter((drawing) => {
 		const layoutType = drawing.drawingOrigin.layoutType;
 		return layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE && layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_NONE;
 	}).map((drawing) => {
@@ -13768,10 +13962,13 @@ function __updateAndPositionDrawings(ctx, lineTop, lineHeight, column, targetDra
 			width,
 			height,
 			angle,
+			behindDoc: drawingOrigin.behindDoc,
+			layoutType: drawingOrigin.layoutType,
 			type: "IMAGE",
 			positionV
 		};
-	}), column, paragraphIndex);
+	});
+	if (!skipRelayoutCheck) _reLayoutCheck(ctx, floatObjects, column, paragraphIndex);
 	__updateDrawingPosition(column, drawings);
 }
 function __updateWrapTablePosition(ctx, table, lineTop, lineHeight, column, paragraphIndex, drawingAnchorTop) {
@@ -13804,6 +14001,22 @@ function __getWrapTablePosition(table, column, lineTop, lineHeight, drawingAncho
 		top: (_getPositionVertical = getPositionVertical(positionV, page, lineTop, lineHeight, height, drawingAnchorTop, isPageBreak)) !== null && _getPositionVertical !== void 0 ? _getPositionVertical : 0
 	};
 }
+function __avoidFlowAffectingDrawingsForTable(table, page, column) {
+	const tableTop = table.top;
+	const tableBottom = table.top + table.height;
+	const tableRight = table.left + table.width;
+	for (const drawing of page.skeDrawings.values()) {
+		var _drawingOrigin$distR;
+		const drawingOrigin = drawing.drawingOrigin;
+		if (drawingOrigin == null || drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE || drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) continue;
+		const drawingTop = drawing.aTop;
+		const drawingBottom = drawing.aTop + drawing.height;
+		if (drawingTop >= tableBottom || drawingBottom <= tableTop) continue;
+		const drawingRight = drawing.aLeft + drawing.width + ((_drawingOrigin$distR = drawingOrigin.distR) !== null && _drawingOrigin$distR !== void 0 ? _drawingOrigin$distR : 0);
+		if (drawing.aLeft >= tableRight || drawingRight <= table.left) continue;
+		if (drawingRight + table.width <= column.width) table.left = Math.max(table.left, drawingRight);
+	}
+}
 function _updateAndPositionTable(ctx, lineTop, lineHeight, page, column, section, skeTablesInParagraph, paragraphIndex, sectionBreakConfig, drawingAnchorTop) {
 	if (skeTablesInParagraph.length === 0) return false;
 	const firstUnPositionedTable = skeTablesInParagraph.find((table) => table.hasPositioned === false);
@@ -13813,6 +14026,7 @@ function _updateAndPositionTable(ctx, lineTop, lineHeight, page, column, section
 	if (firstUnPositionedTable.isSlideTable === false) switch (tableSource.textWrap) {
 		case _univerjs_core.TableTextWrapType.NONE:
 			table.top = lineTop;
+			__avoidFlowAffectingDrawingsForTable(table, page, column);
 			break;
 		case _univerjs_core.TableTextWrapType.WRAP:
 			__updateWrapTablePosition(ctx, table, lineTop, lineHeight, column, paragraphIndex, drawingAnchorTop);
@@ -13866,15 +14080,47 @@ 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 __isZeroWidthNonFlowFloatingAnchorLine(glyphGroup, paragraphNonInlineSkeDrawings) {
+	return __getZeroWidthNonFlowFloatingAnchorDrawings(glyphGroup, paragraphNonInlineSkeDrawings).length > 0;
+}
+function __getZeroWidthNonFlowFloatingAnchorDrawings(glyphGroup, paragraphNonInlineSkeDrawings) {
+	const drawings = [];
+	for (const glyph of glyphGroup) {
+		if (__isStructuralTerminatorGlyph(glyph)) continue;
+		if (__isIgnorableZeroSizeGlyph(glyph)) continue;
+		if (glyph.streamType !== _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK || glyph.width !== 0 || glyph.drawingId == null) return [];
+		const drawing = paragraphNonInlineSkeDrawings === null || paragraphNonInlineSkeDrawings === void 0 ? void 0 : paragraphNonInlineSkeDrawings.get(glyph.drawingId);
+		const drawingOrigin = drawing === null || drawing === void 0 ? void 0 : drawing.drawingOrigin;
+		if (drawing == null || drawingOrigin == null) return [];
+		if (drawingOrigin.layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) return [];
+		drawings.push(drawing);
+	}
+	return drawings;
+}
+function __isIgnorableZeroSizeGlyph(glyph) {
+	return glyph.content === "" && glyph.drawingId == null && glyph.width === 0 && glyph.bBox.ba + glyph.bBox.bd === 0;
+}
+function __isStructuralTerminatorGlyph(glyph) {
+	return glyph.streamType === _univerjs_core.DataStreamTreeTokenType.PARAGRAPH || glyph.streamType === _univerjs_core.DataStreamTreeTokenType.SECTION_BREAK || glyph.streamType === _univerjs_core.DataStreamTreeTokenType.DOCS_END;
+}
+function __hasFlowGlyph(glyphGroup) {
+	return glyphGroup.some((glyph) => {
+		if (__isStructuralTerminatorGlyph(glyph)) return false;
+		if (glyph.streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK) return glyph.width !== 0;
+		return glyph.content !== "" || glyph.width > 0 || glyph.bBox.ba + glyph.bBox.bd > 0;
+	});
+}
 function _reLayoutCheck(ctx, floatObjects, column, paragraphIndex) {
 	var _column$parent2;
 	const page = (_column$parent2 = column.parent) === null || _column$parent2 === void 0 ? void 0 : _column$parent2.parent;
-	if (floatObjects.length === 0 || page == null) return;
+	const flowAffectingFloatObjects = floatObjects.filter((floatObject) => floatObject.behindDoc !== _univerjs_core.BooleanNumber.TRUE || floatObject.layoutType != null && floatObject.layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_NONE);
+	if (flowAffectingFloatObjects.length === 0 || page == null) return;
 	let needBreakLineIterator = false;
-	for (const floatObject of floatObjects) {
+	for (const floatObject of flowAffectingFloatObjects) {
 		var _floatObjectCache$pag, _page$sections$;
 		const floatObjectCache = ctx.floatObjectsCache.get(floatObject.id);
 		if (floatObjectCache == null || floatObjectCache.page.segmentId !== page.segmentId) continue;
+		if (floatObjectCache.count >= FLOAT_OBJECT_RELAYOUT_LIMIT) continue;
 		const cachePageStartParagraphIndex = (_floatObjectCache$pag = floatObjectCache.page.sections[0]) === null || _floatObjectCache$pag === void 0 || (_floatObjectCache$pag = _floatObjectCache$pag.columns[0]) === null || _floatObjectCache$pag === void 0 || (_floatObjectCache$pag = _floatObjectCache$pag.lines[0]) === null || _floatObjectCache$pag === void 0 ? void 0 : _floatObjectCache$pag.paragraphIndex;
 		const startIndex = (_page$sections$ = page.sections[0]) === null || _page$sections$ === void 0 || (_page$sections$ = _page$sections$.columns[0]) === null || _page$sections$ === void 0 || (_page$sections$ = _page$sections$.lines[0]) === null || _page$sections$ === void 0 ? void 0 : _page$sections$.paragraphIndex;
 		if (floatObjectCache.page && cachePageStartParagraphIndex && startIndex && cachePageStartParagraphIndex !== startIndex) {
@@ -13900,7 +14146,7 @@ function _reLayoutCheck(ctx, floatObjects, column, paragraphIndex) {
 		const { lineHeight, top } = line;
 		const { width: columnWidth, left: columnLeft } = column;
 		if (needBreakLineIterator) return;
-		for (const floatObject of floatObjects.values()) {
+		for (const floatObject of flowAffectingFloatObjects.values()) {
 			let targetObject = floatObject;
 			if (ctx.floatObjectsCache.has(floatObject.id)) {
 				const drawingCache = ctx.floatObjectsCache.get(floatObject.id);
@@ -13938,7 +14184,7 @@ function checkRelativeDrawingNeedRePosition(ctx, floatObject) {
 	if (drawingCache == null) return false;
 	if (relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH || relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) {
 		const { count, floatObject: prevObject } = drawingCache;
-		if (count < 5 && Math.abs(floatObject.top - prevObject.top) > 5) return true;
+		if (count < FLOAT_OBJECT_RELAYOUT_LIMIT && Math.abs(floatObject.top - prevObject.top) > 5) return true;
 	}
 	return false;
 }
@@ -13995,43 +14241,87 @@ function __getParagraphSpace(ctx, lineSpacing = 0, spaceAbove, spaceBelow, isPar
 		spaceBelowApply
 	};
 }
-function __getLineHeight(glyphLineHeight, paragraphLineGapDefault, linePitch, gridType, lineSpacing, spacingRule, snapToGrid) {
-	let paddingTop = paragraphLineGapDefault;
-	let paddingBottom = paragraphLineGapDefault;
-	if (gridType === _univerjs_core.GridType.DEFAULT || snapToGrid === _univerjs_core.BooleanNumber.FALSE) {
-		if (spacingRule === _univerjs_core.SpacingRule.AUTO) return {
+function __getParagraphAnchorLeft(sectionBreakConfig, paragraphConfig, indentStart) {
+	const { paragraphStyle = {} } = paragraphConfig;
+	const { snapToGrid = _univerjs_core.BooleanNumber.TRUE } = paragraphStyle;
+	const { gridType = _univerjs_core.GridType.LINES } = sectionBreakConfig;
+	const { charSpace, defaultTabStop } = getCharSpaceConfig(sectionBreakConfig, paragraphConfig);
+	const charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
+	const paragraphAnchorLeft = getNumberUnitValue(indentStart, charSpaceApply);
+	if (paragraphAnchorLeft > 0) return paragraphAnchorLeft;
+	return getNumberUnitValue(paragraphConfig.docxFallbackAnchorLeft, charSpaceApply);
+}
+function getLineHeightMetrics(glyphLineHeight, paragraphLineGapDefault, linePitch, gridType, lineSpacing, spacingRule, snapToGrid, useWordStyleLineHeight = true, scaleAutoLineSpacingByGlyphHeight = true) {
+	if (!useWordStyleLineHeight) {
+		let paddingTop = paragraphLineGapDefault;
+		let paddingBottom = paragraphLineGapDefault;
+		if (gridType === _univerjs_core.GridType.DEFAULT || snapToGrid === _univerjs_core.BooleanNumber.FALSE) {
+			if (spacingRule === _univerjs_core.SpacingRule.AUTO) return {
+				paddingTop,
+				paddingBottom,
+				contentHeight: lineSpacing * glyphLineHeight,
+				lineSpacingApply: glyphLineHeight
+			};
+			return {
+				paddingTop,
+				paddingBottom,
+				contentHeight: Math.max(lineSpacing, glyphLineHeight),
+				lineSpacingApply: lineSpacing
+			};
+		}
+		let lineSpacingApply = 0;
+		if (spacingRule === _univerjs_core.SpacingRule.AUTO) lineSpacingApply = lineSpacing * linePitch;
+		else lineSpacingApply = lineSpacing;
+		if (glyphLineHeight + paragraphLineGapDefault * 2 < lineSpacingApply) paddingTop = paddingBottom = (lineSpacingApply - glyphLineHeight) / 2;
+		else lineSpacingApply = glyphLineHeight;
+		return {
 			paddingTop,
 			paddingBottom,
-			contentHeight: lineSpacing * glyphLineHeight,
-			lineSpacingApply: glyphLineHeight
+			contentHeight: glyphLineHeight,
+			lineSpacingApply
 		};
+	}
+	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;
+		const padding = (lineSpacingApply - glyphLineHeight) / 2;
 		return {
-			paddingTop,
-			paddingBottom,
-			contentHeight: Math.max(lineSpacing, glyphLineHeight),
-			lineSpacingApply: lineSpacing
+			paddingTop: padding,
+			paddingBottom: padding,
+			contentHeight: glyphLineHeight,
+			lineSpacingApply
+		};
+	}
+	if (spacingRule === _univerjs_core.SpacingRule.AT_LEAST) {
+		const lineSpacingApply = Math.max(lineSpacing, glyphLineHeight);
+		const padding = (lineSpacingApply - glyphLineHeight) / 2;
+		return {
+			paddingTop: padding,
+			paddingBottom: padding,
+			contentHeight: glyphLineHeight,
+			lineSpacingApply
 		};
 	}
-	let lineSpacingApply = 0;
-	if (spacingRule === _univerjs_core.SpacingRule.AUTO) lineSpacingApply = lineSpacing * linePitch;
-	else lineSpacingApply = lineSpacing;
-	if (glyphLineHeight + paragraphLineGapDefault * 2 < lineSpacingApply) paddingTop = paddingBottom = (lineSpacingApply - glyphLineHeight) / 2;
-	else lineSpacingApply = glyphLineHeight;
+	const exactLineSpacingApply = snapToGrid === _univerjs_core.BooleanNumber.TRUE && gridType !== _univerjs_core.GridType.DEFAULT ? Math.max(lineSpacing, linePitch) : lineSpacing;
+	const exactPadding = (exactLineSpacingApply - glyphLineHeight) / 2;
 	return {
-		paddingTop,
-		paddingBottom,
+		paddingTop: exactPadding,
+		paddingBottom: exactPadding,
 		contentHeight: glyphLineHeight,
-		lineSpacingApply
+		lineSpacingApply: exactLineSpacingApply
 	};
 }
-function updateInlineDrawingPosition(line, paragraphInlineSkeDrawings, blockAnchorTop) {
-	var _line$parent;
+function updateInlineDrawingPosition(line, paragraphInlineSkeDrawings, blockAnchorTop, paragraphNonInlineSkeDrawings) {
+	var _line$parent, _section$top;
 	const column = line.parent;
+	const section = column === null || column === void 0 ? void 0 : column.parent;
 	const page = line === null || line === void 0 || (_line$parent = line.parent) === null || _line$parent === void 0 || (_line$parent = _line$parent.parent) === null || _line$parent === void 0 ? void 0 : _line$parent.parent;
 	if (page == null || column == null) return;
 	const isPageBreak = __checkPageBreak(column);
 	const drawings = /* @__PURE__ */ new Map();
 	const { top, lineHeight, marginBottom = 0 } = line;
+	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) {
 		const { drawingId } = glyph;
 		if (drawingId == null) continue;
@@ -14042,21 +14332,37 @@ 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 = divide.left + divide.paddingLeft + glyph.left + .5 * glyph.width - .5 * width || 0;
-		drawing.aTop = top + lineHeight - .5 * glyphHeight - .5 * height - marginBottom;
+		drawing.aLeft = column.left + divide.left + divide.paddingLeft + glyph.left + .5 * glyph.width - .5 * width || 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 : []) {
+				const positionedOrigin = positionedDrawing.drawingOrigin;
+				if (positionedOrigin == null || positionedOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE || positionedOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || positionedOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) continue;
+				const positionedBottom = positionedDrawing.aTop + positionedDrawing.height;
+				const lineBottom = lineTop + lineHeight;
+				if (positionedDrawing.aTop >= lineBottom || positionedBottom <= lineTop) continue;
+				const positionedRight = positionedDrawing.aLeft + positionedDrawing.width;
+				const drawingRight = drawing.aLeft + width;
+				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.angle = angle;
 		drawing.isPageBreak = isPageBreak;
-		drawing.lineTop = top;
+		drawing.lineTop = lineTop;
 		drawing.columnLeft = column.left;
-		drawing.blockAnchorTop = blockAnchorTop !== null && blockAnchorTop !== void 0 ? blockAnchorTop : top;
+		drawing.blockAnchorTop = blockAnchorTop == null ? lineTop : sectionTop + blockAnchorTop;
 		drawing.lineHeight = line.lineHeight;
 		drawings.set(drawing.drawingId, drawing);
 	}
 	page.skeDrawings = new Map([...page.skeDrawings, ...drawings]);
 }
-function __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShapedText, blockAnchorTop, needPositionDrawings = []) {
+function __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShapedText, blockAnchorTop, needPositionDrawings = [], blockAnchorLeft = 0) {
 	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;
@@ -14070,7 +14376,12 @@ function __getDrawingPosition(lineTop, lineHeight, column, isParagraphFirstShape
 		const { docTransform } = drawingOrigin;
 		const { positionH, positionV, size, angle } = docTransform;
 		const { width = 0, height = 0 } = size;
-		drawing.aLeft = (_getPositionHorizon2 = getPositionHorizon(positionH, column, page, width, isPageBreak)) !== null && _getPositionHorizon2 !== void 0 ? _getPositionHorizon2 : 0;
+		let aLeft = (_getPositionHorizon2 = getPositionHorizon(positionH, column, page, width, 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;
+		}
+		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;
@@ -14139,7 +14450,7 @@ function __getGlyphGroupByLine({ divides }) {
 	return divides.flatMap((divide) => divide.glyphGroup);
 }
 function __isNullLine(line) {
-	return !line.divides[0].glyphGroup[0];
+	return __getGlyphGroupByLine(line).every((glyph) => !glyph.content && !glyph.drawingId);
 }
 
 //#endregion
@@ -14222,6 +14533,7 @@ function isColumnFull(page) {
 function getNumberUnitValue(unitValue, benchMark) {
 	if (!unitValue) return 0;
 	const { v: value, u: unit } = unitValue;
+	if (typeof value !== "number" || !Number.isFinite(value)) return 0;
 	if (!unit) return value;
 	if (unit === _univerjs_core.NumberUnitType.PIXEL) return value;
 	return value * benchMark;
@@ -14236,18 +14548,22 @@ function validationGrid(gridType = _univerjs_core.GridType.LINES, snapToGrid = _
 	return snapToGrid === _univerjs_core.BooleanNumber.TRUE && (gridType === _univerjs_core.GridType.LINES_AND_CHARS || gridType === _univerjs_core.GridType.SNAP_TO_CHARS);
 }
 function getLineHeightConfig(sectionBreakConfig, paragraphConfig) {
-	const { paragraphStyle = {} } = paragraphConfig;
+	const { paragraphStyle = {}, useWordStyleLineHeight = false } = paragraphConfig;
 	const { linePitch = 15.6, gridType = _univerjs_core.GridType.LINES, paragraphLineGapDefault = 0 } = sectionBreakConfig;
-	const { lineSpacing = 0, spacingRule = _univerjs_core.SpacingRule.AUTO, snapToGrid = _univerjs_core.BooleanNumber.TRUE } = paragraphStyle;
+	const hasDocumentGrid = gridType === _univerjs_core.GridType.LINES_AND_CHARS || gridType === _univerjs_core.GridType.SNAP_TO_CHARS;
+	const defaultSnapToGrid = useWordStyleLineHeight && !hasDocumentGrid ? _univerjs_core.BooleanNumber.FALSE : _univerjs_core.BooleanNumber.TRUE;
+	const { lineSpacing = 0, spacingRule = _univerjs_core.SpacingRule.AUTO, snapToGrid = defaultSnapToGrid } = paragraphStyle;
 	let lineSpacingApply = lineSpacing;
-	if ((gridType === _univerjs_core.GridType.LINES || gridType === _univerjs_core.GridType.LINES_AND_CHARS) && lineSpacing === 0 && spacingRule === _univerjs_core.SpacingRule.AUTO) lineSpacingApply = 1;
+	if (useWordStyleLineHeight && lineSpacing === 0 && spacingRule === _univerjs_core.SpacingRule.AUTO) lineSpacingApply = 1;
+	else if (!useWordStyleLineHeight && (gridType === _univerjs_core.GridType.LINES || gridType === _univerjs_core.GridType.LINES_AND_CHARS) && lineSpacing === 0 && spacingRule === _univerjs_core.SpacingRule.AUTO) lineSpacingApply = 1;
 	return {
 		paragraphLineGapDefault,
 		linePitch,
 		gridType,
 		lineSpacing: lineSpacingApply,
 		spacingRule,
-		snapToGrid
+		snapToGrid,
+		useWordStyleLineHeight
 	};
 }
 function getCharSpaceConfig(sectionBreakConfig, paragraphConfig) {
@@ -14354,13 +14670,16 @@ function updateBlockIndex(pages, start = -1) {
 }
 function updateInlineDrawingCoordsAndBorder(ctx, pages) {
 	lineIterator(pages, (line, _, __, page) => {
-		var _ctx$paragraphConfigC, _ctx$skeletonResource;
+		var _ctx$paragraphConfigC, _ctx$skeletonResource, _paragraphStyle$shadi;
 		const { segmentId } = page;
 		const paragraphConfig = (_ctx$paragraphConfigC = ctx.paragraphConfigCache.get(segmentId)) === null || _ctx$paragraphConfigC === void 0 ? void 0 : _ctx$paragraphConfigC.get(line.paragraphIndex);
 		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);
+		if (affectInlineDrawings && affectInlineDrawings.size > 0) updateInlineDrawingPosition(line, affectInlineDrawings, 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;
 		if (line.divides.length > 0) {
 			const lastDivide = line.divides[line.divides.length - 1];
 			const lastGlyph = lastDivide.glyphGroup[lastDivide.glyphGroup.length - 1];
@@ -14430,14 +14749,12 @@ function getPositionHorizon(positionH, column, page, objectWidth, isPageBreak =
 			return absoluteLeft;
 		}
 	}
-	else if (posOffset) {
-		const { pageWidth, marginLeft, marginRight } = page;
-		const boundaryRight = pageWidth - marginRight;
+	else if (posOffset != null) {
 		let absoluteLeft = 0;
+		const { marginLeft } = page;
 		if (relativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) absoluteLeft = (isPageBreak ? 0 : (column === null || column === void 0 ? void 0 : column.left) || 0) + posOffset;
 		else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.LEFT_MARGIN) {} else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.MARGIN) absoluteLeft = posOffset + marginLeft;
 		else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.RIGHT_MARGIN) {} else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.INSIDE_MARGIN) {} else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.OUTSIDE_MARGIN) {} else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.PAGE) absoluteLeft = posOffset;
-		if (absoluteLeft + objectWidth > boundaryRight) absoluteLeft = boundaryRight - objectWidth;
 		return absoluteLeft;
 	} else if (percent) {
 		const { pageWidth, marginLeft, marginRight } = page;
@@ -14499,9 +14816,9 @@ function getFontConfigFromLastGlyph(glyph, sectionBreakConfig, paragraphStyle) {
 	};
 }
 function getBulletParagraphTextStyle(bullet, viewModel) {
-	var _lists$listType$nesti;
+	var _lists$listType;
 	const { listType } = bullet;
-	return (_lists$listType$nesti = viewModel.getDataModel().getBulletPresetList()[listType].nestingLevel[0].paragraphProperties) === null || _lists$listType$nesti === void 0 ? void 0 : _lists$listType$nesti.textStyle;
+	return (_lists$listType = viewModel.getDataModel().getBulletPresetList()[listType]) === null || _lists$listType === void 0 || (_lists$listType = _lists$listType.nestingLevel) === null || _lists$listType === void 0 || (_lists$listType = _lists$listType[0]) === null || _lists$listType === void 0 || (_lists$listType = _lists$listType.paragraphProperties) === null || _lists$listType === void 0 ? void 0 : _lists$listType.textStyle;
 }
 const DEFAULT_TEXT_RUN = {
 	ts: {},
@@ -14509,6 +14826,7 @@ const DEFAULT_TEXT_RUN = {
 	ed: 0
 };
 function getFontCreateConfig(index, viewModel, paragraphNode, sectionBreakConfig, paragraph) {
+	var _sectionBreakConfig$d;
 	const { gridType = _univerjs_core.GridType.LINES, charSpace = 0, documentTextStyle = {}, pageSize = {
 		width: Number.POSITIVE_INFINITY,
 		height: Number.POSITIVE_INFINITY
@@ -14540,16 +14858,20 @@ function getFontCreateConfig(index, viewModel, paragraphNode, sectionBreakConfig
 		...customRangeStyle,
 		...bulletTextStyle
 	};
+	const fontStyle = getFontStyleString(textStyle);
+	const mixTextStyle = {
+		...documentTextStyle,
+		...textStyle
+	};
+	const pageWidth = pageSize.width || Number.POSITIVE_INFINITY - marginLeft - marginRight;
 	const result = {
-		fontStyle: getFontStyleString(textStyle),
-		textStyle: {
-			...documentTextStyle,
-			...textStyle
-		},
+		fontStyle,
+		textStyle: mixTextStyle,
 		charSpace,
 		gridType,
 		snapToGrid,
-		pageWidth: pageSize.width || Number.POSITIVE_INFINITY - marginLeft - marginRight
+		documentCompatibilityPolicy: (_sectionBreakConfig$d = sectionBreakConfig.documentCompatibilityPolicy) !== null && _sectionBreakConfig$d !== void 0 ? _sectionBreakConfig$d : getDocumentCompatibilityPolicy(),
+		pageWidth
 	};
 	if (!hasAddonStyle && originTextRun) fontCreateConfigCache.setValue(st, ed, result);
 	return result;
@@ -14684,17 +15006,6 @@ function resetContext(ctx) {
 	ctx.isDirty = false;
 	(_ctx$skeleton$drawing = ctx.skeleton.drawingAnchor) === null || _ctx$skeleton$drawing === void 0 || _ctx$skeleton$drawing.clear();
 }
-function mergeByV(object, originObject, type) {
-	const mergeIterator = (obj, originObj, key) => {
-		if (key !== "v") if (typeof originObj === "object") return (0, _univerjs_core.mergeWith)(obj, originObj, mergeIterator);
-		else return originObj !== null && originObj !== void 0 ? originObj : obj;
-		if (typeof originObj === "number") {
-			if (typeof obj === "number") return type === "max" ? Math.max(originObj, obj) : Math.min(originObj, obj);
-		}
-		return originObj !== null && originObj !== void 0 ? originObj : obj;
-	};
-	return (0, _univerjs_core.mergeWith)(object, originObject, mergeIterator);
-}
 function getPageFromPath(skeletonData, path) {
 	const pathCopy = [...path];
 	let page = null;
@@ -14760,7 +15071,7 @@ function createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference,
 			header = (_skeHeaders$get2 = skeHeaders.get(headerId)) === null || _skeHeaders$get2 === void 0 ? void 0 : _skeHeaders$get2.get(pageWidth);
 		} else if (headerTreeMap && headerTreeMap.has(headerId)) {
 			header = _createSkeletonHeaderFooter(ctx, headerTreeMap.get(headerId), sectionBreakConfig, skeletonResourceReference, headerId, true);
-			skeHeaders.set(headerId, new Map([[pageWidth, header]]));
+			skeHeaders.set(headerId, /* @__PURE__ */ new Map([[pageWidth, header]]));
 		}
 		page.headerId = headerId;
 	}
@@ -14771,7 +15082,7 @@ function createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference,
 			footer = (_skeFooters$get2 = skeFooters.get(footerId)) === null || _skeFooters$get2 === void 0 ? void 0 : _skeFooters$get2.get(pageWidth);
 		} else if (footerTreeMap && footerTreeMap.has(footerId)) {
 			footer = _createSkeletonHeaderFooter(ctx, footerTreeMap.get(footerId), sectionBreakConfig, skeletonResourceReference, footerId, false);
-			skeFooters.set(footerId, new Map([[pageWidth, footer]]));
+			skeFooters.set(footerId, /* @__PURE__ */ new Map([[pageWidth, footer]]));
 		}
 		page.footerId = footerId;
 	}
@@ -14866,9 +15177,22 @@ function createNullCellPage(ctx, sectionBreakConfig, tableConfig, row, col, avai
 	const { skeletonResourceReference } = ctx;
 	const { cellMargin, tableRows, tableColumns, tableId } = tableConfig;
 	const cellConfig = tableRows[row].tableCells[col];
-	const { start = { v: 10 }, end = { v: 10 }, top = { v: 5 }, bottom = { v: 5 } } = (_ref = (_cellConfig$margin = cellConfig.margin) !== null && _cellConfig$margin !== void 0 ? _cellConfig$margin : cellMargin) !== null && _ref !== void 0 ? _ref : {};
+	let { start = { v: 10 }, end = { v: 10 }, top = { v: 5 }, bottom = { v: 5 } } = (_ref = (_cellConfig$margin = cellConfig.margin) !== null && _cellConfig$margin !== void 0 ? _cellConfig$margin : cellMargin) !== null && _ref !== void 0 ? _ref : {};
 	const columnSpan = Math.max(1, (_cellConfig$columnSpa = cellConfig.columnSpan) !== null && _cellConfig$columnSpa !== void 0 ? _cellConfig$columnSpa : 1);
 	const pageWidth = tableColumns.slice(col, col + columnSpan).reduce((sum, column) => sum + column.size.width.v, 0);
+	if (start.v + end.v >= pageWidth) {
+		const marginWidth = start.v + end.v;
+		const availableMarginWidth = Math.max(0, pageWidth - 1);
+		const startRatio = marginWidth > 0 ? start.v / marginWidth : .5;
+		start = {
+			...start,
+			v: availableMarginWidth * startRatio
+		};
+		end = {
+			...end,
+			v: availableMarginWidth - start.v
+		};
+	}
 	const pageHeight = maxCellPageHeight;
 	const cellSectionBreakConfig = {
 		lists,
@@ -14936,11 +15260,8 @@ function applyTrailingCellBlockRangeSpaceBelow(pages, body, cellEndIndex) {
 		page.height += lastLine.spaceBelowApply || trailingBlockRangeSpace;
 	}
 }
-function _getVerticalMargin(marginTB, headerOrFooter, pageHeight) {
-	if (!headerOrFooter || headerOrFooter.sections[0].columns[0].lines.length === 0) return marginTB;
-	const HeaderFooterPageHeight = headerOrFooter.height + headerOrFooter.marginTop + headerOrFooter.marginBottom;
-	const maxMargin = getHeaderFooterMaxHeight(pageHeight);
-	return Math.min(maxMargin, Math.max(marginTB, HeaderFooterPageHeight));
+function _getVerticalMargin(marginTB, _headerOrFooter, _pageHeight) {
+	return marginTB;
 }
 
 //#endregion
@@ -15053,7 +15374,26 @@ function adjustGlyphsInDivide(divide, justificationRatio, extraJustification) {
 * Therefore, multiple calculations are performed, which may impact performance.
 * Needs optimization for efficiency.
 */
-function horizontalAlignHandler(line, horizontalAlign) {
+function shouldAllowOverflowHorizontalOffset(sectionBreakConfig) {
+	var _sectionBreakConfig$r;
+	return ((_sectionBreakConfig$r = sectionBreakConfig.renderConfig) === null || _sectionBreakConfig$r === void 0 ? void 0 : _sectionBreakConfig$r.wrapStrategy) === _univerjs_core.WrapStrategy.OVERFLOW;
+}
+function getGlyphGroupInkBounds(divide) {
+	if (divide.glyphGroup.length === 0) return null;
+	let left = Infinity;
+	let right = -Infinity;
+	for (const glyph of divide.glyphGroup) {
+		const glyphLeft = glyph.left + glyph.xOffset;
+		left = Math.min(left, glyphLeft);
+		right = Math.max(right, glyphLeft + glyph.bBox.width);
+	}
+	if (!Number.isFinite(left) || !Number.isFinite(right)) return null;
+	return {
+		left,
+		right
+	};
+}
+function horizontalAlignHandler(line, horizontalAlign, allowOverflowHorizontalOffset = false) {
 	const { divides } = line;
 	for (let i = 0; i < divides.length; i++) {
 		const divide = divides[i];
@@ -15092,9 +15432,12 @@ function horizontalAlignHandler(line, horizontalAlign) {
 				divide.glyphGroupWidth = glyphGroupWidth;
 			}
 		}
-		if (horizontalAlign === _univerjs_core.HorizontalAlign.CENTER) divide.paddingLeft = (width - glyphGroupWidth) / 2;
+		const inkBounds = allowOverflowHorizontalOffset ? getGlyphGroupInkBounds(divide) : null;
+		if (horizontalAlign === _univerjs_core.HorizontalAlign.CENTER && inkBounds) divide.paddingLeft = width / 2 - (inkBounds.left + inkBounds.right) / 2;
+		else if (horizontalAlign === _univerjs_core.HorizontalAlign.RIGHT && inkBounds) divide.paddingLeft = width - inkBounds.right;
+		else if (horizontalAlign === _univerjs_core.HorizontalAlign.CENTER) divide.paddingLeft = (width - glyphGroupWidth) / 2;
 		else if (horizontalAlign === _univerjs_core.HorizontalAlign.RIGHT) divide.paddingLeft = width - glyphGroupWidth;
-		divide.paddingLeft = Math.max(divide.paddingLeft, 0);
+		if (!allowOverflowHorizontalOffset) divide.paddingLeft = Math.max(divide.paddingLeft, 0);
 	}
 }
 function restoreLastCJKGlyphWidth(line) {
@@ -15139,7 +15482,10 @@ function addHyphenDash(line, viewModel, paragraphNode, sectionBreakConfig, parag
 }
 function lineAdjustment(pages, viewModel, paragraphNode, sectionBreakConfig) {
 	const { endIndex } = paragraphNode;
-	const paragraph = viewModel.getParagraph(endIndex) || { startIndex: 0 };
+	const paragraph = viewModel.getParagraph(endIndex) || {
+		startIndex: 0,
+		paragraphId: "para_render_fallback"
+	};
 	lineIterator(pages, (line) => {
 		if (line.paragraphIndex !== paragraph.startIndex) return;
 		const { paragraphStyle = {} } = paragraph;
@@ -15147,7 +15493,7 @@ function lineAdjustment(pages, viewModel, paragraphNode, sectionBreakConfig) {
 		shrinkStartAndEndCJKPunctuation(line);
 		restoreLastCJKGlyphWidth(line);
 		addHyphenDash(line, viewModel, paragraphNode, sectionBreakConfig, paragraphStyle);
-		horizontalAlignHandler(line, horizontalAlign);
+		horizontalAlignHandler(line, horizontalAlign, shouldAllowOverflowHorizontalOffset(sectionBreakConfig));
 	});
 }
 
@@ -15342,11 +15688,43 @@ function ___getLevelAndSuffix(levelAndSuffixPre) {
 
 //#endregion
 //#region src/components/docs/layout/block/paragraph/linebreaking.ts
-const BLOCK_LAYOUT_OUTER_SPACING_MAP = new Map([
-	["callout", 34],
-	["code", 32],
-	["quote", 24]
+const BLOCK_LAYOUT_OUTER_SPACING_MAP = /* @__PURE__ */ new Map([
+	[_univerjs_core.DocumentBlockRangeType.CALLOUT, 34],
+	[_univerjs_core.DocumentBlockRangeType.CODE, 32],
+	[_univerjs_core.DocumentBlockRangeType.QUOTE, 24]
 ]);
+function _endsWithToken(text, glyphs, token) {
+	var _glyphs, _glyphs2;
+	return text.endsWith(token) || ((_glyphs = glyphs[glyphs.length - 1]) === null || _glyphs === void 0 ? void 0 : _glyphs.raw) === token || ((_glyphs2 = glyphs[glyphs.length - 1]) === null || _glyphs2 === void 0 ? void 0 : _glyphs2.streamType) === token;
+}
+function _isMarkedDocxColumnBreak(viewModel, absoluteIndex) {
+	const customRange = viewModel.getCustomRange(absoluteIndex);
+	const properties = customRange === null || customRange === void 0 ? void 0 : customRange.properties;
+	return (properties === null || properties === void 0 ? void 0 : properties.docxBreakType) === "column";
+}
+function _glyphCount(glyphs) {
+	return glyphs.reduce((count, glyph) => count + glyph.count, 0);
+}
+function _hasOnlyCustomBlockGlyphs(glyphs) {
+	return glyphs.length > 0 && glyphs.every((glyph) => glyph.streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK);
+}
+function _mergeAdjacentCustomBlockShapedTexts(shapedTextList) {
+	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;
+		}
+		mergedShapedTextList.push({
+			...shapedText,
+			glyphs: [...shapedText.glyphs]
+		});
+	}
+	return mergedShapedTextList;
+}
 function _getListLevelAncestors(bullet, listLevel) {
 	if (!bullet || !listLevel) return;
 	const { listId, nestingLevel } = bullet;
@@ -15417,12 +15795,23 @@ function _applyBlockRangeLayoutParagraphStyle(body, paragraph, paragraphStyle, s
 	if ((lastParagraph === null || lastParagraph === void 0 ? void 0 : lastParagraph.startIndex) === paragraph.startIndex && !_hasNextAdjacentLayoutBlockRange(blockRanges, blockRange)) _withMinSpacing(style, "spaceBelow", outerSpacing);
 	return style;
 }
-function _shouldApplyDocumentDefaultParagraphStyle(viewModel) {
-	var _viewModel$getSnapsho;
-	const snapshot = (_viewModel$getSnapsho = viewModel.getSnapshot) === null || _viewModel$getSnapsho === void 0 ? void 0 : _viewModel$getSnapsho.call(viewModel);
-	const documentFlavor = snapshot === null || snapshot === void 0 ? void 0 : snapshot.documentStyle.documentFlavor;
-	if (snapshot == null) return true;
-	return documentFlavor != null && documentFlavor !== _univerjs_core.DocumentFlavor.UNSPECIFIED;
+function _isOnlyFloatingCustomBlockParagraph(viewModel, paragraphNode, drawings) {
+	var _paragraphNode$blocks, _paragraphNode$conten;
+	if (!((_paragraphNode$blocks = paragraphNode.blocks) === null || _paragraphNode$blocks === void 0 ? void 0 : _paragraphNode$blocks.length)) return false;
+	if (!((_paragraphNode$conten = paragraphNode.content) !== null && _paragraphNode$conten !== void 0 ? _paragraphNode$conten : "").split("").every((char) => char === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK || char === _univerjs_core.DataStreamTreeTokenType.PARAGRAPH || char === _univerjs_core.DataStreamTreeTokenType.SECTION_BREAK)) return false;
+	return paragraphNode.blocks.every((charIndex) => {
+		const customBlock = viewModel.getCustomBlock(charIndex);
+		const drawing = customBlock == null ? null : drawings[customBlock.blockId];
+		return drawing != null && drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE;
+	});
+}
+function _getFollowingIndentedParagraphAnchorLeft(viewModel, paragraph, paragraphNode, drawings, isTraditionalDocument) {
+	var _paragraph$paragraphS, _paragraph$paragraphS2, _viewModel$getBody$pa, _viewModel$getBody, _paragraphs$0$paragra, _paragraphs$, _paragraphs$0$paragra2;
+	if (!isTraditionalDocument) return;
+	if (((_paragraph$paragraphS = (_paragraph$paragraphS2 = paragraph.paragraphStyle) === null || _paragraph$paragraphS2 === void 0 || (_paragraph$paragraphS2 = _paragraph$paragraphS2.indentStart) === null || _paragraph$paragraphS2 === void 0 ? void 0 : _paragraph$paragraphS2.v) !== null && _paragraph$paragraphS !== void 0 ? _paragraph$paragraphS : 0) > 0) return;
+	if (!_isOnlyFloatingCustomBlockParagraph(viewModel, paragraphNode, drawings)) return;
+	const paragraphs = [...(_viewModel$getBody$pa = (_viewModel$getBody = viewModel.getBody) === null || _viewModel$getBody === void 0 || (_viewModel$getBody = _viewModel$getBody.call(viewModel)) === null || _viewModel$getBody === void 0 ? void 0 : _viewModel$getBody.paragraphs) !== null && _viewModel$getBody$pa !== void 0 ? _viewModel$getBody$pa : []].filter((item) => item.startIndex > paragraph.startIndex).sort((left, right) => left.startIndex - right.startIndex);
+	return ((_paragraphs$0$paragra = (_paragraphs$ = paragraphs[0]) === null || _paragraphs$ === void 0 || (_paragraphs$ = _paragraphs$.paragraphStyle) === null || _paragraphs$ === void 0 || (_paragraphs$ = _paragraphs$.indentStart) === null || _paragraphs$ === void 0 ? void 0 : _paragraphs$.v) !== null && _paragraphs$0$paragra !== void 0 ? _paragraphs$0$paragra : 0) > 0 ? (_paragraphs$0$paragra2 = paragraphs[0].paragraphStyle) === null || _paragraphs$0$paragra2 === void 0 ? void 0 : _paragraphs$0$paragra2.indentStart : void 0;
 }
 function _getDrawingSkeletonFormat(drawingOrigin) {
 	const { drawingId } = drawingOrigin;
@@ -15446,16 +15835,24 @@ function _getNextPageNumber(lastPage) {
 	return lastPage.pageNumber + 1;
 }
 function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, sectionBreakConfig, tableSkeleton) {
-	var _viewModel$getBody, _viewModel$getBody2;
+	var _sectionBreakConfig$d, _viewModel$getSnapsho, _viewModel$getBody2, _viewModel$getBody3;
 	const { skeletonResourceReference } = ctx;
 	const { lists, drawings = {}, localeService } = sectionBreakConfig;
 	const { endIndex, blocks = [], children } = paragraphNode;
 	const { segmentId } = curPage;
-	const paragraph = viewModel.getParagraph(endIndex) || { startIndex: 0 };
+	const paragraph = viewModel.getParagraph(endIndex) || {
+		startIndex: 0,
+		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 shouldApplyDocumentDefaults = documentCompatibilityPolicy.applyDocumentDefaultParagraphStyle;
+	const useWordStyleLineHeight = documentCompatibilityPolicy.useWordStyleLineHeight;
 	const { skeHeaders, skeFooters, skeListLevel, drawingAnchor } = skeletonResourceReference;
 	const paragraphNonInlineSkeDrawings = /* @__PURE__ */ new Map();
 	const paragraphInlineSkeDrawings = /* @__PURE__ */ new Map();
+	const paragraphNonInlineSkeDrawingsByBlockId = /* @__PURE__ */ new Map();
+	const paragraphInlineSkeDrawingsByBlockId = /* @__PURE__ */ new Map();
 	let segmentDrawingAnchorCache = drawingAnchor === null || drawingAnchor === void 0 ? void 0 : drawingAnchor.get(segmentId);
 	if (segmentDrawingAnchorCache == null) {
 		segmentDrawingAnchorCache = /* @__PURE__ */ new Map();
@@ -15463,7 +15860,10 @@ function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, se
 	}
 	const paragraphConfig = {
 		paragraphIndex: endIndex,
-		paragraphStyle: _applyBlockRangeLayoutParagraphStyle((_viewModel$getBody = (_viewModel$getBody2 = viewModel.getBody) === null || _viewModel$getBody2 === void 0 ? void 0 : _viewModel$getBody2.call(viewModel)) !== null && _viewModel$getBody !== void 0 ? _viewModel$getBody : null, paragraph, paragraphStyle, _shouldApplyDocumentDefaultParagraphStyle(viewModel)),
+		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),
+		docxFallbackAnchorLeft: _getFollowingIndentedParagraphAnchorLeft(viewModel, paragraph, paragraphNode, drawings, isTraditionalDocumentCompatibility(documentCompatibilityPolicy)),
+		useWordStyleLineHeight,
 		paragraphNonInlineSkeDrawings,
 		paragraphInlineSkeDrawings,
 		skeTablesInParagraph: tableSkeleton ? [{
@@ -15496,36 +15896,60 @@ function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, se
 		if (customBlock == null) continue;
 		const { blockId } = customBlock;
 		const drawingOrigin = drawings[blockId];
-		if (drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) paragraphInlineSkeDrawings.set(blockId, _getDrawingSkeletonFormat(drawingOrigin));
-		else paragraphNonInlineSkeDrawings.set(blockId, _getDrawingSkeletonFormat(drawingOrigin));
+		if (drawingOrigin == null) continue;
+		if (drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) paragraphInlineSkeDrawingsByBlockId.set(blockId, _getDrawingSkeletonFormat(drawingOrigin));
+		else paragraphNonInlineSkeDrawingsByBlockId.set(blockId, _getDrawingSkeletonFormat(drawingOrigin));
 	}
 	segmentParagraphCache.set(endIndex, paragraphConfig);
 	let allPages = [curPage];
 	let isParagraphFirstShapedText = true;
-	for (const [_index, { text, glyphs, breakPointType }] of shapedTextList.entries()) {
+	let shapedTextOffset = 0;
+	for (const [_index, { text, glyphs, breakPointType }] of _mergeAdjacentCustomBlockShapedTexts(shapedTextList).entries()) {
+		const textStartIndex = paragraphNode.startIndex + shapedTextOffset;
+		const textGlyphCount = _glyphCount(glyphs);
+		const textEndIndex = textStartIndex + textGlyphCount;
 		const pushPending = () => {
 			if (glyphs.length === 0) return;
-			allPages = layoutParagraph(ctx, glyphs, allPages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText, breakPointType);
+			syncActiveParagraphDrawings(glyphs, paragraphNonInlineSkeDrawings, paragraphInlineSkeDrawings, paragraphNonInlineSkeDrawingsByBlockId, paragraphInlineSkeDrawingsByBlockId);
+			allPages = layoutParagraph(ctx, glyphs, allPages, sectionBreakConfig, paragraphConfig, isParagraphFirstShapedText || hasOnlyFloatingCustomBlockGlyphs(glyphs, paragraphNonInlineSkeDrawingsByBlockId), breakPointType);
 			isParagraphFirstShapedText = false;
 		};
-		if (text.endsWith(_univerjs_core.DataStreamTreeTokenType.PAGE_BREAK)) {
+		if (_endsWithToken(text, glyphs, _univerjs_core.DataStreamTreeTokenType.PAGE_BREAK)) {
 			pushPending();
 			allPages.push(createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference, _getNextPageNumber(allPages[allPages.length - 1]), 1));
 			paragraphNonInlineSkeDrawings.clear();
-			paragraphInlineSkeDrawings.clear();
+			isParagraphFirstShapedText = true;
+			shapedTextOffset += textGlyphCount;
 			continue;
-		} else if (text.endsWith(_univerjs_core.DataStreamTreeTokenType.COLUMN_BREAK)) {
+		} else if (_endsWithToken(text, glyphs, _univerjs_core.DataStreamTreeTokenType.COLUMN_BREAK) && (!isTraditionalDocumentCompatibility(documentCompatibilityPolicy) || _isMarkedDocxColumnBreak(viewModel, textEndIndex - 1))) {
 			pushPending();
 			const lastPage = allPages[allPages.length - 1];
 			const columnInfo = getLastNotFullColumnInfo(lastPage);
 			if (columnInfo && !columnInfo.isLast) setColumnFullState(columnInfo.column, true);
 			else allPages.push(createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference, _getNextPageNumber(lastPage), 2));
+			shapedTextOffset += textGlyphCount;
 			continue;
 		}
 		pushPending();
+		shapedTextOffset += textGlyphCount;
 	}
 	return allPages;
 }
+function syncActiveParagraphDrawings(glyphs, paragraphNonInlineSkeDrawings, paragraphInlineSkeDrawings, paragraphNonInlineSkeDrawingsByBlockId, paragraphInlineSkeDrawingsByBlockId) {
+	for (const glyph of glyphs) {
+		if (glyph.streamType !== _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK || glyph.drawingId == null) continue;
+		const inlineDrawing = paragraphInlineSkeDrawingsByBlockId.get(glyph.drawingId);
+		if (inlineDrawing != null) {
+			paragraphInlineSkeDrawings.set(glyph.drawingId, inlineDrawing);
+			continue;
+		}
+		const nonInlineDrawing = paragraphNonInlineSkeDrawingsByBlockId.get(glyph.drawingId);
+		if (nonInlineDrawing != null) paragraphNonInlineSkeDrawings.set(glyph.drawingId, nonInlineDrawing);
+	}
+}
+function hasOnlyFloatingCustomBlockGlyphs(glyphs, paragraphNonInlineSkeDrawingsByBlockId) {
+	return glyphs.length > 0 && glyphs.every((glyph) => glyph.streamType === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK && glyph.drawingId != null && paragraphNonInlineSkeDrawingsByBlockId.has(glyph.drawingId));
+}
 
 //#endregion
 //#region src/components/docs/layout/line-breaker/enhancers/hyphen-enhancer.ts
@@ -15849,6 +16273,26 @@ function prepareTextChunks(body) {
 //#region src/components/docs/layout/shaping-engine/text-shaping.ts
 const fontCache = /* @__PURE__ */ new Map();
 const glyphCache = /* @__PURE__ */ new Map();
+const fontFamilyCache = /* @__PURE__ */ new Map();
+function trimOuterQuotes(value) {
+	const firstChar = value.charCodeAt(0);
+	const lastChar = value.charCodeAt(value.length - 1);
+	const hasLeadingQuote = firstChar === 34 || firstChar === 39;
+	const hasTrailingQuote = lastChar === 34 || lastChar === 39;
+	if (hasLeadingQuote && hasTrailingQuote) return value.slice(1, -1);
+	if (hasLeadingQuote) return value.slice(1);
+	if (hasTrailingQuote) return value.slice(0, -1);
+	return value;
+}
+function expandFontFamilies(fontFamily) {
+	if (!(fontFamily === null || fontFamily === void 0 ? void 0 : fontFamily.trim())) return [];
+	let families = fontFamilyCache.get(fontFamily);
+	if (families) return families;
+	families = fontFamily.split(",").map((family) => trimOuterQuotes(family.trim())).filter(Boolean);
+	fontFamilyCache.set(fontFamily, families);
+	return families;
+}
+const defaultFontFamilies = expandFontFamilies(DEFAULT_FONTFACE_PLANE);
 function shapeChunk(content, charPosition, used, families, style) {
 	var _style$bl, _style$it, _content$match;
 	let fi = 0;
@@ -15951,8 +16395,7 @@ function textShape(body) {
 	for (const chunk of chunks) {
 		var _style$ff;
 		const { content, style = {} } = chunk;
-		let fontFamilies = DEFAULT_FONTFACE_PLANE.split(",").map((family) => family.trim().replace(/["']/g, ""));
-		fontFamilies.unshift((_style$ff = style.ff) !== null && _style$ff !== void 0 ? _style$ff : "Arial");
+		let fontFamilies = [...expandFontFamilies((_style$ff = style.ff) !== null && _style$ff !== void 0 ? _style$ff : "Arial"), ...defaultFontFamilies];
 		fontFamilies = fontLibrary.getValidFontFamilies(fontFamilies);
 		glyphs.push(...shapeChunk(content, charPosition, /* @__PURE__ */ new Set(), fontFamilies, style));
 		charPosition += content.length;
@@ -15990,7 +16433,7 @@ function ArabicHandler(index, charArray, viewModel, paragraphNode, sectionBreakC
 	for (let i = 0; i < charArray.length; i++) {
 		const newChar = charArray[i];
 		if (hasArabic(newChar)) {
-			glyph.unshift(newChar);
+			glyph.push(newChar);
 			step++;
 		} else break;
 	}
@@ -16087,7 +16530,10 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
 	const shapedTextList = [];
 	let breaker = new LineBreaker(content);
 	const { endIndex } = paragraphNode;
-	const paragraph = viewModel.getParagraph(endIndex) || { startIndex: 0 };
+	const paragraph = viewModel.getParagraph(endIndex) || {
+		startIndex: 0,
+		paragraphId: "para_render_fallback"
+	};
 	const { paragraphStyle = {} } = paragraph;
 	const { snapToGrid = _univerjs_core.BooleanNumber.TRUE } = paragraphStyle;
 	let last = 0;
@@ -16146,12 +16592,12 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
 					if (customBlock != null) {
 						const { blockId } = customBlock;
 						const drawingOrigin = drawings[blockId];
-						if (drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) {
+						if ((drawingOrigin === null || drawingOrigin === void 0 ? void 0 : drawingOrigin.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) {
 							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);
-						} else newGlyph = createSkeletonCustomBlockGlyph(config, 0, 0, drawingOrigin.drawingId);
+						} else if (drawingOrigin != null) newGlyph = createSkeletonCustomBlockGlyph(config, 0, 0, drawingOrigin.drawingId);
 					}
 					if (newGlyph == null) newGlyph = createSkeletonLetterGlyph(char, config);
 					shapedGlyphs.push(newGlyph);
@@ -17093,9 +17539,9 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				const viewport = getDocsTableRenderViewport(unitId, sourceTableId);
 				(_this$_findLiquid = this._findLiquid) === null || _this$_findLiquid === void 0 || _this$_findLiquid.translateSave();
 				(_this$_findLiquid2 = this._findLiquid) === null || _this$_findLiquid2 === void 0 || _this$_findLiquid2.translate(tableLeft, tableTop);
-				if (viewport && viewport.contentWidth > viewport.viewportWidth) {
-					var _this$_findLiquid4;
-					const visibleLeft = this._findLiquid.x;
+				if (hasDocsTableHorizontalViewport(viewport)) {
+					var _viewport$leadingInse, _this$_findLiquid4;
+					const visibleLeft = this._findLiquid.x + page.marginLeft - ((_viewport$leadingInse = viewport.leadingInsetLeft) !== null && _viewport$leadingInse !== void 0 ? _viewport$leadingInse : 0);
 					const visibleRight = visibleLeft + viewport.viewportWidth;
 					if (x < visibleLeft || x > visibleRight) {
 						var _this$_findLiquid3;
@@ -17191,6 +17637,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			lists,
 			drawings,
 			localeService: this._localeService,
+			documentCompatibilityPolicy: getDocumentCompatibilityPolicy(documentStyle.documentFlavor),
 			paragraphLineGapDefault,
 			defaultTabStop,
 			documentTextStyle: textStyle
@@ -17265,7 +17712,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			let curSkeletonPage = getLastPage(allSkeletonPages);
 			let isContinuous = false;
 			ctx.sectionBreakConfigCache.set(sectionNode.endIndex, sectionBreakConfig);
-			if (sectionType === _univerjs_core.SectionType.CONTINUOUS) {
+			if (sectionType === _univerjs_core.SectionType.CONTINUOUS && curSkeletonPage != null) {
 				updateBlockIndex(allSkeletonPages);
 				this._addNewSectionByContinuous(curSkeletonPage, columnProperties, columnSeparatorType);
 				isContinuous = true;
@@ -17397,6 +17844,7 @@ function createDocumentModelWithStyle(content, textStyle, config = {}) {
 			}],
 			paragraphs: [{
 				startIndex: contentLength,
+				paragraphId: (0, _univerjs_core.createParagraphId)(/* @__PURE__ */ new Set()),
 				paragraphStyle: { horizontalAlign }
 			}],
 			sectionBreaks: [{ startIndex: contentLength + 1 }]
@@ -17453,7 +17901,7 @@ function getFontFormat(format) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -17461,7 +17909,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -18274,7 +18722,7 @@ let SpreadsheetSkeleton = class SpreadsheetSkeleton extends _univerjs_core.Sheet
 		this.makeDirty(true);
 	}
 	_setBorderStylesCache(row, col, style, options) {
-		if (_univerjs_core.Tools.isDefine(this._handleBorderMatrix.getValue(row, col))) return;
+		if (_univerjs_core.Tools.isDefine(this._handleBorderMatrix.getValue(row, col)) && !(options === null || options === void 0 ? void 0 : options.mergeRange)) return;
 		if (!((options === null || options === void 0 ? void 0 : options.cacheItem) || {
 			bg: true,
 			border: true
@@ -19413,6 +19861,56 @@ var docExtension = class extends ComponentExtension {
 	}
 };
 
+//#endregion
+//#region src/components/docs/extensions/background-runs.ts
+function collectBackgroundGlyphRuns(glyphGroup) {
+	const runs = [];
+	let activeGlyph = null;
+	let activeColor = "";
+	let activeLeft = 0;
+	let activeRight = 0;
+	const flush = () => {
+		if (!activeGlyph) return;
+		runs.push({
+			glyph: {
+				...activeGlyph,
+				width: activeRight - activeLeft
+			},
+			left: activeLeft,
+			width: activeRight - activeLeft
+		});
+		activeGlyph = null;
+		activeColor = "";
+		activeLeft = 0;
+		activeRight = 0;
+	};
+	for (const glyph of glyphGroup) {
+		var _glyph$ts;
+		if (!glyph.content || glyph.content === "\r") {
+			flush();
+			continue;
+		}
+		const backgroundColor = ((_glyph$ts = glyph.ts) === null || _glyph$ts === void 0 ? void 0 : _glyph$ts.bg) ? (0, _univerjs_core.getColorStyle)(glyph.ts.bg) : "";
+		if (!backgroundColor) {
+			flush();
+			continue;
+		}
+		const glyphLeft = glyph.left;
+		const glyphRight = glyph.left + glyph.width;
+		if (activeGlyph && activeColor === backgroundColor) {
+			activeRight = Math.max(activeRight, glyphRight);
+			continue;
+		}
+		flush();
+		activeGlyph = glyph;
+		activeColor = backgroundColor;
+		activeLeft = glyphLeft;
+		activeRight = glyphRight;
+	}
+	flush();
+	return runs;
+}
+
 //#endregion
 //#region src/components/docs/extensions/background.ts
 const UNIQUE_KEY$3 = "DefaultDocsBackgroundExtension";
@@ -19828,7 +20326,6 @@ var Image$1 = class extends Shape {
 			this.makeDirty(true);
 		} else if (config.url) {
 			this._native = document.createElement("img");
-			this._native.src = config.url;
 			this._native.crossOrigin = "anonymous";
 			this._native.onload = () => {
 				var _config$success, _this$getEngine;
@@ -19843,6 +20340,7 @@ var Image$1 = class extends Shape {
 					this.makeDirty(true);
 				}
 			};
+			this._native.src = config.url;
 		}
 		this._init();
 	}
@@ -19856,10 +20354,17 @@ var Image$1 = class extends Shape {
 		var _this$_props$opacity;
 		return (_this$_props$opacity = this._props.opacity) !== null && _this$_props$opacity !== void 0 ? _this$_props$opacity : 1;
 	}
+	get clipBounds() {
+		return this._props.clipBounds;
+	}
 	setOpacity(opacity) {
 		this._props.opacity = opacity;
 		this.makeDirty(true);
 	}
+	setClipBounds(clipBounds) {
+		this._props.clipBounds = clipBounds;
+		this.makeDirty(true);
+	}
 	setClipService(clipService) {
 		this._clipService = clipService;
 	}
@@ -19876,10 +20381,10 @@ var Image$1 = class extends Shape {
 	}
 	changeSource(url) {
 		if (this._native == null) this._native = document.createElement("img");
-		this._native.src = url;
 		this._native.onload = () => {
 			this.makeDirty(true);
 		};
+		this._native.src = url;
 	}
 	resetSize() {
 		if (this._native == null) return;
@@ -19985,6 +20490,12 @@ var Image$1 = class extends Shape {
 		}
 		const m = this.transform.getMatrix();
 		mainCtx.save();
+		const { clipBounds } = this;
+		if (clipBounds) {
+			mainCtx.beginPath();
+			mainCtx.rect(clipBounds.left, clipBounds.top, clipBounds.width, clipBounds.height);
+			mainCtx.clip();
+		}
 		const centerX = realLeft + realWidth / 2;
 		const centerY = realTop + realHeight / 2;
 		mainCtx.transform(m[0], m[1], m[2], m[3], centerX, centerY);
@@ -21625,6 +22136,7 @@ var FontAndBaseLine = class extends docExtension {
 			"actualFontMap",
 			{}
 		);
+		_defineProperty(this, "_textFillImageCache", /* @__PURE__ */ new Map());
 	}
 	draw(ctx, _parentScale, glyph, _, _more) {
 		var _glyph$parent;
@@ -21643,13 +22155,162 @@ var FontAndBaseLine = class extends docExtension {
 				this.actualFontMap[fontStringPxStr] = ctx.font;
 			}
 		}
-		const { cl: colorStyle, va: baselineOffset } = textStyle;
+		const { cl: colorStyle, va: baselineOffset, textFill } = textStyle;
 		const fontColor = (0, _univerjs_core.getColorStyle)(colorStyle) || "rgb(0,0,0)";
-		if (fontColor && this._preFontColor !== fontColor) ctx.fillStyle = fontColor;
 		if (baselineOffset === _univerjs_core.BaselineOffset.SUPERSCRIPT) spanPointWithFont.y += -bBox.spo;
 		else if (baselineOffset === _univerjs_core.BaselineOffset.SUBSCRIPT) spanPointWithFont.y += bBox.sbo;
+		if (this._fillTextWithTextFill(ctx, glyph, spanPointWithFont, textFill, fontColor)) return;
+		if (fontColor && this._preFontColor !== fontColor) ctx.fillStyle = fontColor;
 		this._fillText(ctx, glyph, spanPointWithFont);
 	}
+	_fillTextWithTextFill(ctx, glyph, spanPointWithFont, textFill, fallbackColor) {
+		if (!textFill || textFill.type === "none") return (textFill === null || textFill === void 0 ? void 0 : textFill.type) === "none";
+		const { content, glyphType } = glyph;
+		if (content == null || glyphType === 2) return false;
+		const { renderConfig } = this.extensionOffset;
+		const { vertexAngle, centerAngle } = renderConfig !== null && renderConfig !== void 0 ? renderConfig : {};
+		const VERTICAL_DEG = 90;
+		if (vertexAngle === VERTICAL_DEG && centerAngle === VERTICAL_DEG) return false;
+		const bounds = this._getGlyphPaintBounds(glyph, spanPointWithFont);
+		if (bounds.width <= 0 || bounds.height <= 0) return false;
+		const color = this._colorWithOpacity(textFill.color || fallbackColor, textFill.opacity);
+		if (textFill.type === "solid") {
+			ctx.fillStyle = color;
+			this._fillText(ctx, glyph, spanPointWithFont);
+			return true;
+		}
+		if (textFill.type === "gradient") {
+			const gradient = this._createTextGradient(ctx, bounds, textFill, fallbackColor);
+			if (!gradient) return false;
+			ctx.fillStyle = gradient;
+			this._fillText(ctx, glyph, spanPointWithFont);
+			return true;
+		}
+		if (textFill.type === "picture") {
+			const pattern = this._createTextPicturePattern(ctx, bounds, textFill);
+			if (!pattern) return false;
+			ctx.fillStyle = pattern;
+			this._fillText(ctx, glyph, spanPointWithFont);
+			return true;
+		}
+		return false;
+	}
+	_getGlyphPaintBounds(glyph, spanPointWithFont) {
+		const { width, bBox } = glyph;
+		const textWidth = Math.max(width, bBox.width, 1);
+		const textHeight = Math.max(bBox.aba + bBox.abd, 1);
+		return {
+			left: spanPointWithFont.x,
+			top: spanPointWithFont.y - bBox.aba,
+			width: textWidth,
+			height: textHeight
+		};
+	}
+	_createTextGradient(ctx, bounds, textFill, fallbackColor) {
+		var _gradient$type, _gradient$angle, _context;
+		const gradient = textFill.gradient;
+		const type = (_gradient$type = gradient === null || gradient === void 0 ? void 0 : gradient.type) !== null && _gradient$type !== void 0 ? _gradient$type : "linear";
+		const angle = (_gradient$angle = gradient === null || gradient === void 0 ? void 0 : gradient.angle) !== null && _gradient$angle !== void 0 ? _gradient$angle : 0;
+		const stops = this._normalizeGradientStops(gradient === null || gradient === void 0 ? void 0 : gradient.stops, textFill.color || fallbackColor);
+		const centerX = bounds.left + bounds.width / 2;
+		const centerY = bounds.top + bounds.height / 2;
+		let canvasGradient;
+		if (type === "radial") {
+			const radius = Math.max(bounds.width, bounds.height) / 2;
+			canvasGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
+		} else if (type === "angular" && "createConicGradient" in ((_context = ctx._context) !== null && _context !== void 0 ? _context : ctx)) {
+			var _context2;
+			canvasGradient = ((_context2 = ctx._context) !== null && _context2 !== void 0 ? _context2 : ctx).createConicGradient((angle - 90) * Math.PI / 180, centerX, centerY);
+		} else if (type === "diamond") {
+			const radius = Math.max(bounds.width, bounds.height) / 2;
+			canvasGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
+		} else {
+			const line = this._getLinearGradientLine(bounds, angle);
+			canvasGradient = ctx.createLinearGradient(line.x0, line.y0, line.x1, line.y1);
+		}
+		for (const stop of stops) {
+			var _textFill$opacity, _stop$opacity;
+			const opacity = ((_textFill$opacity = textFill.opacity) !== null && _textFill$opacity !== void 0 ? _textFill$opacity : 1) * ((_stop$opacity = stop.opacity) !== null && _stop$opacity !== void 0 ? _stop$opacity : 1);
+			canvasGradient.addColorStop(stop.offset, this._colorWithOpacity(stop.color, opacity));
+		}
+		return canvasGradient;
+	}
+	_createTextPicturePattern(ctx, bounds, textFill) {
+		var _textFill$picture, _ref, _textFill$picture$opa, _textFill$picture2, _textFill$picture3, _pattern$setTransform;
+		const source = (_textFill$picture = textFill.picture) === null || _textFill$picture === void 0 ? void 0 : _textFill$picture.source;
+		if (!source) return null;
+		const image = this._getTextFillImage(source);
+		if (!image || !image.complete || !(image.naturalWidth || image.width)) return null;
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.max(1, Math.ceil(bounds.width));
+		canvas.height = Math.max(1, Math.ceil(bounds.height));
+		const canvasContext = canvas.getContext("2d");
+		if (!canvasContext) return null;
+		canvasContext.globalAlpha = this._clamp((_ref = (_textFill$picture$opa = (_textFill$picture2 = textFill.picture) === null || _textFill$picture2 === void 0 ? void 0 : _textFill$picture2.opacity) !== null && _textFill$picture$opa !== void 0 ? _textFill$picture$opa : textFill.opacity) !== null && _ref !== void 0 ? _ref : 1, 0, 1);
+		if (((_textFill$picture3 = textFill.picture) === null || _textFill$picture3 === void 0 ? void 0 : _textFill$picture3.mode) === "tile") {
+			var _textFill$picture$sca, _textFill$picture$sca2, _textFill$picture$off, _textFill$picture$off2;
+			const scaleX = (_textFill$picture$sca = textFill.picture.scaleX) !== null && _textFill$picture$sca !== void 0 ? _textFill$picture$sca : 1;
+			const scaleY = (_textFill$picture$sca2 = textFill.picture.scaleY) !== null && _textFill$picture$sca2 !== void 0 ? _textFill$picture$sca2 : 1;
+			const cellWidth = Math.max(1, (image.naturalWidth || image.width) * scaleX);
+			const cellHeight = Math.max(1, (image.naturalHeight || image.height) * scaleY);
+			const offsetX = (_textFill$picture$off = textFill.picture.offsetX) !== null && _textFill$picture$off !== void 0 ? _textFill$picture$off : 0;
+			const offsetY = (_textFill$picture$off2 = textFill.picture.offsetY) !== null && _textFill$picture$off2 !== void 0 ? _textFill$picture$off2 : 0;
+			for (let x = (offsetX % cellWidth + cellWidth) % cellWidth - cellWidth; x < canvas.width; x += cellWidth) for (let y = (offsetY % cellHeight + cellHeight) % cellHeight - cellHeight; y < canvas.height; y += cellHeight) canvasContext.drawImage(image, x, y, cellWidth, cellHeight);
+		} else canvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);
+		const pattern = ctx.createPattern(canvas, "no-repeat");
+		pattern === null || pattern === void 0 || (_pattern$setTransform = pattern.setTransform) === null || _pattern$setTransform === void 0 || _pattern$setTransform.call(pattern, new DOMMatrix().translate(bounds.left, bounds.top));
+		return pattern;
+	}
+	_getTextFillImage(source) {
+		const cached = this._textFillImageCache.get(source);
+		if (cached) return cached;
+		const image = new Image();
+		image.crossOrigin = "anonymous";
+		image.src = source;
+		this._textFillImageCache.set(source, image);
+		return image.complete ? image : null;
+	}
+	_normalizeGradientStops(stops, fallbackColor) {
+		return (stops && stops.length >= 2 ? stops : [{
+			offset: 0,
+			color: fallbackColor
+		}, {
+			offset: 100,
+			color: "#ffffff"
+		}]).map((stop) => ({
+			color: stop.color,
+			offset: this._clamp(stop.offset > 1 ? stop.offset / 100 : stop.offset, 0, 1),
+			opacity: stop.opacity
+		}));
+	}
+	_getLinearGradientLine(bounds, angle) {
+		const angleRad = angle * Math.PI / 180;
+		const centerX = bounds.left + bounds.width / 2;
+		const centerY = bounds.top + bounds.height / 2;
+		const cos = Math.cos(angleRad);
+		const sin = Math.sin(angleRad);
+		const halfDiagonal = (Math.abs(bounds.width * cos) + Math.abs(bounds.height * sin)) / 2;
+		return {
+			x0: centerX - cos * halfDiagonal,
+			y0: centerY - sin * halfDiagonal,
+			x1: centerX + cos * halfDiagonal,
+			y1: centerY + sin * halfDiagonal
+		};
+	}
+	_colorWithOpacity(color, opacity) {
+		if (opacity === void 0 || opacity >= 1) return color;
+		const alpha = this._clamp(opacity, 0, 1);
+		const hex = color.trim();
+		if (/^#[0-9a-f]{3}$/i.test(hex)) {
+			const [, r, g, b] = hex;
+			return `rgba(${Number.parseInt(r + r, 16)}, ${Number.parseInt(g + g, 16)}, ${Number.parseInt(b + b, 16)}, ${alpha})`;
+		}
+		if (/^#[0-9a-f]{6}$/i.test(hex)) return `rgba(${Number.parseInt(hex.slice(1, 3), 16)}, ${Number.parseInt(hex.slice(3, 5), 16)}, ${Number.parseInt(hex.slice(5, 7), 16)}, ${alpha})`;
+		return color;
+	}
+	_clamp(value, min, max) {
+		return Math.max(min, Math.min(max, value));
+	}
 	_fillText(ctx, glyph, spanPointWithFont) {
 		const { renderConfig, spanStartPoint, centerPoint } = this.extensionOffset;
 		const { content, width, bBox } = glyph;
@@ -21997,24 +22658,14 @@ var Documents = class Documents extends DocComponent {
 							this._drawLiquid.translateSave();
 							this._drawLiquid.translateLine(line, true, true);
 							rotateTranslateXListApply && this._drawLiquid.translate(rotateTranslateXListApply[i]);
+							this._drawLineBackground(ctx, page, line);
 							const divideLength = divides.length;
 							for (let i = 0; i < divideLength; i++) {
 								const divide = divides[i];
 								const { glyphGroup } = divide;
 								this._drawLiquid.translateSave();
 								this._drawLiquid.translateDivide(divide, isVertical && wrapStrategy === _univerjs_core.WrapStrategy.WRAP, verticalAlign, rotatedHeightStore);
-								for (const glyph of glyphGroup) {
-									if (!glyph.content || glyph.content.length === 0) continue;
-									const { width: spanWidth, left: spanLeft } = glyph;
-									const { x: translateX, y: translateY } = this._drawLiquid;
-									const originTranslate = Vector2.create(translateX, translateY);
-									const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);
-									const extensionOffset = { spanStartPoint: calculateRectRotate(originTranslate.addByPoint(spanLeft, 0), centerPoint, centerAngle, vertexAngle, alignOffset) };
-									if (backgroundExtension) {
-										backgroundExtension.extensionOffset = extensionOffset;
-										backgroundExtension.draw(ctx, parentScale, glyph);
-									}
-								}
+								this._drawGlyphGroupBackgrounds(ctx, parentScale, glyphGroup, lineHeight, alignOffset, centerAngle, vertexAngle, backgroundExtension);
 								for (const glyph of glyphGroup) {
 									if (!glyph.content || glyph.content.length === 0) continue;
 									const { width: spanWidth, left: spanLeft, xOffset } = glyph;
@@ -22070,15 +22721,18 @@ var Documents = class Documents extends DocComponent {
 			const viewport = this._getTableViewport(page, tableSkeleton, renderUnitId, sourceTableId);
 			drawLiquid.translateSave();
 			drawLiquid.translate(tableLeft, tableTop);
-			if (viewport && viewport.contentWidth > viewport.viewportWidth) {
+			if (hasDocsTableHorizontalViewport(viewport)) {
+				var _viewport$leadingInse;
 				const { x, y } = drawLiquid;
+				const clipLeft = x + page.marginLeft - ((_viewport$leadingInse = viewport.leadingInsetLeft) !== null && _viewport$leadingInse !== void 0 ? _viewport$leadingInse : 0);
 				ctx.save();
 				ctx.beginPath();
-				ctx.rectByPrecision(x + page.marginLeft - TABLE_VIEWPORT_BORDER_CLIP_PADDING, y + page.marginTop - TABLE_VIEWPORT_BORDER_CLIP_PADDING, viewport.viewportWidth + TABLE_VIEWPORT_BORDER_CLIP_PADDING * 2, tableSkeleton.height + TABLE_VIEWPORT_BORDER_CLIP_PADDING * 2);
+				ctx.rectByPrecision(clipLeft - TABLE_VIEWPORT_BORDER_CLIP_PADDING, y + page.marginTop - TABLE_VIEWPORT_BORDER_CLIP_PADDING, viewport.viewportWidth + TABLE_VIEWPORT_BORDER_CLIP_PADDING * 2, tableSkeleton.height + TABLE_VIEWPORT_BORDER_CLIP_PADDING * 2);
 				ctx.closePath();
 				ctx.clip();
 				drawLiquid.translate(-viewport.scrollLeft, 0);
 			}
+			this._drawTableCellBackgrounds(ctx, page, tableSkeleton);
 			for (const row of rows) {
 				const { top: rowTop, cells } = row;
 				drawLiquid.translateSave();
@@ -22093,16 +22747,49 @@ var Documents = class Documents extends DocComponent {
 				}
 				drawLiquid.translateRestore();
 			}
-			if (viewport && viewport.contentWidth > viewport.viewportWidth) ctx.restore();
+			if (hasDocsTableHorizontalViewport(viewport)) ctx.restore();
 			drawLiquid.translateRestore();
 		}
 	}
+	_drawTableCellBackgrounds(ctx, page, tableSkeleton) {
+		if (this._drawLiquid == null) return;
+		const backgrounds = /* @__PURE__ */ new Map();
+		const tableX = this._drawLiquid.x + page.marginLeft;
+		const tableY = this._drawLiquid.y + page.marginTop;
+		for (const row of tableSkeleton.rows) row.cells.forEach((cell, index) => {
+			var _cellSource$backgroun, _backgrounds$get;
+			if (cell.isMergedCellCovered) return;
+			const cellSource = row.rowSource.tableCells[index];
+			if (!cellSource || cellSource.rowSpan === 0 || cellSource.columnSpan === 0) return;
+			const color = (_cellSource$backgroun = cellSource.backgroundColor) === null || _cellSource$backgroun === void 0 ? void 0 : _cellSource$backgroun.rgb;
+			if (!color) return;
+			const rects = (_backgrounds$get = backgrounds.get(color)) !== null && _backgrounds$get !== void 0 ? _backgrounds$get : [];
+			rects.push({
+				x: tableX + cell.left,
+				y: tableY + row.top,
+				width: cell.pageWidth,
+				height: cell.pageHeight
+			});
+			backgrounds.set(color, rects);
+		});
+		backgrounds.forEach((rects, color) => {
+			ctx.save();
+			ctx.fillStyle = color;
+			ctx.beginPath();
+			rects.forEach(({ x, y, width, height }) => {
+				rectByPrecisionBounds(ctx, x, y, width, height);
+			});
+			ctx.fill();
+			ctx.closePath();
+			ctx.restore();
+		});
+	}
 	_getTableViewport(page, tableSkeleton, unitId, tableId) {
 		const viewport = getDocsTableRenderViewport(unitId, tableId);
 		if (viewport) return viewport;
 		const { pageWidth, marginLeft = 0, marginRight = 0 } = page;
 		if (!Number.isFinite(pageWidth)) return null;
-		const viewportWidth = Math.max(0, pageWidth - marginLeft - marginRight - tableSkeleton.left);
+		const viewportWidth = shouldAllowImportedTableMarginOverflow(this._getDocumentCompatibilityPolicy(), tableSkeleton.tableSource) ? Math.max(0, pageWidth - Math.max(0, marginLeft + tableSkeleton.left)) : Math.max(0, pageWidth - marginLeft - marginRight - tableSkeleton.left);
 		if (viewportWidth <= 0 || tableSkeleton.width <= viewportWidth) return null;
 		return {
 			contentWidth: tableSkeleton.width,
@@ -22117,6 +22804,26 @@ var Documents = class Documents extends DocComponent {
 		const dataModel = viewModel === null || viewModel === void 0 || (_viewModel$getDataMod = viewModel.getDataModel) === null || _viewModel$getDataMod === void 0 ? void 0 : _viewModel$getDataMod.call(viewModel);
 		return (_dataModel$getUnitId = dataModel === null || dataModel === void 0 || (_dataModel$getUnitId2 = dataModel.getUnitId) === null || _dataModel$getUnitId2 === void 0 ? void 0 : _dataModel$getUnitId2.call(dataModel)) !== null && _dataModel$getUnitId !== void 0 ? _dataModel$getUnitId : this.oKey;
 	}
+	_getDocumentCompatibilityPolicy() {
+		var _skeleton$getViewMode2, _skeleton$getViewMode3;
+		const skeleton = this.getSkeleton();
+		return getDocumentCompatibilityPolicy(skeleton === null || skeleton === void 0 || (_skeleton$getViewMode2 = skeleton.getViewModel) === null || _skeleton$getViewMode2 === void 0 || (_skeleton$getViewMode2 = _skeleton$getViewMode2.call(skeleton)) === null || _skeleton$getViewMode2 === void 0 || (_skeleton$getViewMode3 = _skeleton$getViewMode2.getSnapshot) === null || _skeleton$getViewMode3 === void 0 || (_skeleton$getViewMode3 = _skeleton$getViewMode3.call(_skeleton$getViewMode2)) === null || _skeleton$getViewMode3 === void 0 || (_skeleton$getViewMode3 = _skeleton$getViewMode3.documentStyle) === null || _skeleton$getViewMode3 === void 0 ? void 0 : _skeleton$getViewMode3.documentFlavor);
+	}
+	_drawLineBackground(ctx, page, line, left = 0, top = 0) {
+		var _line$backgroundColor;
+		const color = (_line$backgroundColor = line.backgroundColor) === null || _line$backgroundColor === void 0 ? void 0 : _line$backgroundColor.rgb;
+		if (!color || this._drawLiquid == null) return;
+		let { x, y } = this._drawLiquid;
+		const { pageWidth, marginLeft, marginRight, marginTop } = page;
+		x += marginLeft + (left !== null && left !== void 0 ? left : 0);
+		y -= line.marginTop;
+		y -= line.paddingTop;
+		y += marginTop + top;
+		ctx.save();
+		ctx.fillStyle = color;
+		fillRectByPrecisionBounds(ctx, x, y, pageWidth - marginLeft - marginRight, line.lineHeight);
+		ctx.restore();
+	}
 	_drawBorderBottom(ctx, page, line, left = 0, top = 0) {
 		var _line$borderBottom$pa, _line$borderBottom, _line$borderBottom$co, _line$borderBottom2;
 		if (this._drawLiquid == null) return;
@@ -22137,9 +22844,21 @@ var Documents = class Documents extends DocComponent {
 		});
 		ctx.restore();
 	}
+	_drawGlyphGroupBackgrounds(ctx, parentScale, glyphGroup, lineHeight, alignOffset, centerAngle, vertexAngle, backgroundExtension) {
+		if (!backgroundExtension || this._drawLiquid == null) return;
+		const backgroundRuns = collectBackgroundGlyphRuns(glyphGroup);
+		for (const backgroundRun of backgroundRuns) {
+			const { glyph, left: spanLeft, width: spanWidth } = backgroundRun;
+			const { x: translateX, y: translateY } = this._drawLiquid;
+			const originTranslate = Vector2.create(translateX, translateY);
+			const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);
+			backgroundExtension.extensionOffset = { spanStartPoint: calculateRectRotate(originTranslate.addByPoint(spanLeft, 0), centerPoint, centerAngle, vertexAngle, alignOffset) };
+			backgroundExtension.draw(ctx, parentScale, glyph);
+		}
+	}
 	_drawTableCell(ctx, page, cell, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale) {
 		if (this._drawLiquid == null) return;
-		this._drawTableCellBordersAndBg(ctx, page, cell);
+		this._drawTableCellBordersAndBg(ctx, page, cell, false);
 		const { sections, marginLeft, marginTop } = cell;
 		alignOffsetNoAngle = Vector2.create(alignOffsetNoAngle.x + marginLeft, alignOffsetNoAngle.y + marginTop);
 		ctx.save();
@@ -22176,24 +22895,14 @@ var Documents = class Documents extends DocComponent {
 					} else {
 						this._drawLiquid.translateSave();
 						this._drawLiquid.translateLine(line, true, true);
+						this._drawLineBackground(ctx, cell, line, page.marginLeft, page.marginTop);
 						const divideLength = divides.length;
 						for (let i = 0; i < divideLength; i++) {
 							const divide = divides[i];
 							const { glyphGroup } = divide;
 							this._drawLiquid.translateSave();
 							this._drawLiquid.translateDivide(divide);
-							for (const glyph of glyphGroup) {
-								if (!glyph.content || glyph.content.length === 0) continue;
-								const { width: spanWidth, left: spanLeft } = glyph;
-								const { x: translateX, y: translateY } = this._drawLiquid;
-								const originTranslate = Vector2.create(translateX, translateY);
-								const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);
-								const extensionOffset = { spanStartPoint: calculateRectRotate(originTranslate.addByPoint(spanLeft, 0), centerPoint, centerAngle, vertexAngle, alignOffset) };
-								if (backgroundExtension) {
-									backgroundExtension.extensionOffset = extensionOffset;
-									backgroundExtension.draw(ctx, parentScale, glyph);
-								}
-							}
+							this._drawGlyphGroupBackgrounds(ctx, parentScale, glyphGroup, lineHeight, alignOffset, centerAngle, vertexAngle, backgroundExtension);
 							for (const glyph of glyphGroup) {
 								if (!glyph.content || glyph.content.length === 0) continue;
 								const { width: spanWidth, left: spanLeft, xOffset } = glyph;
@@ -22225,8 +22934,8 @@ var Documents = class Documents extends DocComponent {
 		}
 		ctx.restore();
 	}
-	_drawTableCellBordersAndBg(ctx, page, cell) {
-		var _rowSke$index, _cellSource$backgroun;
+	_drawTableCellBordersAndBg(ctx, page, cell, drawBackground = true) {
+		var _rowSke$index, _cellSource$backgroun2;
 		const { marginLeft, marginTop } = page;
 		const { pageWidth, pageHeight } = cell;
 		const rowSke = cell.parent;
@@ -22241,10 +22950,10 @@ var Documents = class Documents extends DocComponent {
 		let { x, y } = this._drawLiquid;
 		x += marginLeft;
 		y += marginTop;
-		if ((_cellSource$backgroun = cellSource.backgroundColor) === null || _cellSource$backgroun === void 0 ? void 0 : _cellSource$backgroun.rgb) {
+		if (drawBackground && ((_cellSource$backgroun2 = cellSource.backgroundColor) === null || _cellSource$backgroun2 === void 0 ? void 0 : _cellSource$backgroun2.rgb)) {
 			ctx.save();
 			ctx.fillStyle = cellSource.backgroundColor.rgb;
-			ctx.fillRectByPrecision(x, y, pageWidth, pageHeight);
+			fillRectByPrecisionBounds(ctx, x, y, pageWidth, pageHeight);
 			ctx.restore();
 		}
 		const position = {
@@ -22292,8 +23001,9 @@ var Documents = class Documents extends DocComponent {
 	}
 	_drawHeaderFooter(page, ctx, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale, parentPage, isHeader = true) {
 		if (this._drawLiquid == null) return;
-		const { sections } = page;
+		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);
 		for (const section of sections) {
 			const { columns } = section;
 			this._drawLiquid.translateSave();
@@ -22322,33 +23032,20 @@ var Documents = class Documents extends DocComponent {
 						this._drawLiquid.translateSave();
 						this._drawLiquid.translateLine(line, true, true);
 						const { y } = this._drawLiquid;
-						if (isHeader) {
-							if (y - originY + alignOffset.y > (parentPage.pageHeight - 100) / 2) {
+						if (!isHeader) {
+							if (y - originY + alignOffset.y + lineHeight < (parentPage.pageHeight - 100) / 2 + 100) {
 								this._drawLiquid.translateRestore();
 								continue;
 							}
-						} else if (y - originY + alignOffset.y + lineHeight < (parentPage.pageHeight - 100) / 2 + 100) {
-							this._drawLiquid.translateRestore();
-							continue;
 						}
+						this._drawLineBackground(ctx, page, line, parentPage.marginLeft);
 						const divideLength = divides.length;
 						for (let i = 0; i < divideLength; i++) {
 							const divide = divides[i];
 							const { glyphGroup } = divide;
 							this._drawLiquid.translateSave();
 							this._drawLiquid.translateDivide(divide);
-							for (const glyph of glyphGroup) {
-								if (!glyph.content || glyph.content.length === 0) continue;
-								const { width: spanWidth, left: spanLeft } = glyph;
-								const { x: translateX, y: translateY } = this._drawLiquid;
-								const originTranslate = Vector2.create(translateX, translateY);
-								const centerPoint = Vector2.create(spanWidth / 2, lineHeight / 2);
-								const extensionOffset = { spanStartPoint: calculateRectRotate(originTranslate.addByPoint(spanLeft, 0), centerPoint, centerAngle, vertexAngle, alignOffset) };
-								if (backgroundExtension) {
-									backgroundExtension.extensionOffset = extensionOffset;
-									backgroundExtension.draw(ctx, parentScale, glyph);
-								}
-							}
+							this._drawGlyphGroupBackgrounds(ctx, parentScale, glyphGroup, lineHeight, alignOffset, centerAngle, vertexAngle, backgroundExtension);
 							for (const glyph of glyphGroup) {
 								if (!glyph.content || glyph.content.length === 0) continue;
 								const { width: spanWidth, left: spanLeft, xOffset } = glyph;
@@ -22384,18 +23081,19 @@ var Documents = class Documents extends DocComponent {
 		* In Excel, if horizontal alignment is not specified,
 		* rotated text aligns to the right when rotated downwards and aligns to the left when rotated upwards.
 		*/
-		if (horizontalAlign === _univerjs_core.HorizontalAlign.UNSPECIFIED) if (centerAngleDeg === 90 && vertexAngleDeg === 90) horizontalAlign = _univerjs_core.HorizontalAlign.CENTER;
+		let resolvedHorizontalAlign = horizontalAlign;
+		if (resolvedHorizontalAlign === _univerjs_core.HorizontalAlign.UNSPECIFIED) if (centerAngleDeg === 90 && vertexAngleDeg === 90) resolvedHorizontalAlign = _univerjs_core.HorizontalAlign.CENTER;
 		else if (vertexAngleDeg > 0 && vertexAngleDeg !== 90 || vertexAngleDeg === -90)
  /**
 		* https://github.com/dream-num/univer-pro/issues/334
 		*/
-		horizontalAlign = _univerjs_core.HorizontalAlign.RIGHT;
-		else if (cellValueType === _univerjs_core.CellValueType.NUMBER) horizontalAlign = _univerjs_core.HorizontalAlign.RIGHT;
-		else if (cellValueType === _univerjs_core.CellValueType.BOOLEAN) horizontalAlign = _univerjs_core.HorizontalAlign.CENTER;
-		else horizontalAlign = _univerjs_core.HorizontalAlign.LEFT;
+		resolvedHorizontalAlign = _univerjs_core.HorizontalAlign.RIGHT;
+		else if (cellValueType === _univerjs_core.CellValueType.NUMBER) resolvedHorizontalAlign = _univerjs_core.HorizontalAlign.RIGHT;
+		else if (cellValueType === _univerjs_core.CellValueType.BOOLEAN) resolvedHorizontalAlign = _univerjs_core.HorizontalAlign.CENTER;
+		else resolvedHorizontalAlign = _univerjs_core.HorizontalAlign.LEFT;
 		let offsetLeft = 0;
-		if (horizontalAlign === _univerjs_core.HorizontalAlign.CENTER) offsetLeft = (this.width - pageWidth) / 2;
-		else if (horizontalAlign === _univerjs_core.HorizontalAlign.RIGHT) offsetLeft = this.width - pageWidth - pagePaddingRight;
+		if (resolvedHorizontalAlign === _univerjs_core.HorizontalAlign.CENTER) offsetLeft = (this.width - pageWidth) / 2;
+		else if (resolvedHorizontalAlign === _univerjs_core.HorizontalAlign.RIGHT) offsetLeft = this.width - pageWidth - pagePaddingRight;
 		else offsetLeft = pagePaddingLeft;
 		return offsetLeft;
 	}
@@ -22429,6 +23127,22 @@ function setTableCellBorderDash(ctx, dashStyle) {
 	}
 	ctx.setLineDash([0]);
 }
+function fillRectByPrecisionBounds(ctx, x, y, width, height) {
+	const { scaleX, scaleY } = ctx.getScale();
+	const startX = fixLineWidthByScale(x, scaleX);
+	const startY = fixLineWidthByScale(y, scaleY);
+	const endX = fixLineWidthByScale(x + width, scaleX);
+	const endY = fixLineWidthByScale(y + height, scaleY);
+	ctx.fillRect(startX, startY, endX - startX, endY - startY);
+}
+function rectByPrecisionBounds(ctx, x, y, width, height) {
+	const { scaleX, scaleY } = ctx.getScale();
+	const startX = fixLineWidthByScale(x, scaleX);
+	const startY = fixLineWidthByScale(y, scaleY);
+	const endX = fixLineWidthByScale(x + width, scaleX);
+	const endY = fixLineWidthByScale(y + height, scaleY);
+	ctx.rect(startX, startY, endX - startX, endY - startY);
+}
 
 //#endregion
 //#region src/components/sheets/spreadsheet.ts
@@ -23641,6 +24355,8 @@ var DocBackground = class DocBackground extends DocComponent {
 		_defineProperty(this, "_pageFillColor", void 0);
 		_defineProperty(this, "_pageStrokeColor", void 0);
 		_defineProperty(this, "_marginStrokeColor", void 0);
+		_defineProperty(this, "_pageBackgroundSource", void 0);
+		_defineProperty(this, "_pageBackgroundImage", void 0);
 		this._drawLiquid = new Liquid();
 		this._backgroundFillColor = config === null || config === void 0 ? void 0 : config.backgroundFillColor;
 		this._pageFillColor = config === null || config === void 0 ? void 0 : config.pageFillColor;
@@ -23664,7 +24380,7 @@ var DocBackground = class DocBackground extends DocComponent {
 		const skeletonData = (_this$getSkeleton = this.getSkeleton()) === null || _this$getSkeleton === void 0 ? void 0 : _this$getSkeleton.getSkeletonData();
 		const docDataModel = (_this$getSkeleton2 = this.getSkeleton()) === null || _this$getSkeleton2 === void 0 ? void 0 : _this$getSkeleton2.getViewModel().getDataModel();
 		if (skeletonData == null || docDataModel == null) return;
-		const { documentFlavor } = docDataModel.getSnapshot().documentStyle;
+		const { documentFlavor, background } = docDataModel.getSnapshot().documentStyle;
 		const workspaceFill = (_this$_backgroundFill = this._backgroundFillColor) !== null && _this$_backgroundFill !== void 0 ? _this$_backgroundFill : documentFlavor === _univerjs_core.DocumentFlavor.MODERN ? PAGE_FILL_COLOR : DOCS_WORKSPACE_FILL_COLOR;
 		this._drawWorkspaceBackground(ctx, workspaceFill, bounds);
 		if (documentFlavor === _univerjs_core.DocumentFlavor.MODERN) return;
@@ -23693,6 +24409,7 @@ var DocBackground = class DocBackground extends DocComponent {
 				zIndex: 3
 			};
 			Rect.drawWith(ctx, backgroundOptions);
+			this._drawPageBackgroundImage(ctx, background === null || background === void 0 ? void 0 : background.source, pageWidth !== null && pageWidth !== void 0 ? pageWidth : width, pageHeight !== null && pageHeight !== void 0 ? pageHeight : height);
 			const IDENTIFIER_WIDTH = 15;
 			const marginIdentification = {
 				dataArray: [
@@ -23773,6 +24490,22 @@ var DocBackground = class DocBackground extends DocComponent {
 		});
 		ctx.restore();
 	}
+	_drawPageBackgroundImage(ctx, source, width, height) {
+		if (!source || width <= 0 || height <= 0) return;
+		const image = this._getPageBackgroundImage(source);
+		if (!image.complete) return;
+		ctx.drawImage(image, 0, 0, width, height);
+	}
+	_getPageBackgroundImage(source) {
+		if (this._pageBackgroundSource === source && this._pageBackgroundImage != null) return this._pageBackgroundImage;
+		const image = document.createElement("img");
+		image.crossOrigin = "anonymous";
+		image.onload = () => this.makeDirty(true);
+		image.src = source;
+		this._pageBackgroundSource = source;
+		this._pageBackgroundImage = image;
+		return image;
+	}
 	changeSkeleton(newSkeleton) {
 		this.setSkeleton(newSkeleton);
 		return this;
@@ -24209,6 +24942,42 @@ var DumbCanvasColorService = class {
 		return color;
 	}
 };
+const DARK_RENDER_COLOR_OVERRIDES = {
+	"#17212b": "#e2e8f0",
+	"#64748b": "#94a3b8",
+	"#d9e0e7": "#253044",
+	"#edf1f5": "#1b2535",
+	"#eef2f6": "#1b2535",
+	"#f2f5f8": "#101827",
+	"#f3f6fa": "#18243a",
+	"#f4f8ff": "#172a46",
+	"#f5f9ff": "#12233a",
+	"#f7f9fb": "#0d1422",
+	"#f7f9fc": "#0d1422",
+	"#f8fafc": "#0f172a",
+	"#fbfcfd": "#07111f",
+	"#fcfdff": "#050914",
+	"#e8f1ff": "#173a69",
+	"#eaf5ff": "#12315a",
+	"#dbeafe": "#1e3a8a",
+	"#bfdbfe": "#60a5fa",
+	"#93c5fd": "#60a5fa",
+	"#8eb6f5": "#60a5fa",
+	"#60a5fa": "#60a5fa",
+	"#2563eb": "#60a5fa",
+	"#1d64d8": "#93c5fd",
+	"#1d5cff": "#60a5fa",
+	"#0f766e": "#2dd4bf",
+	"#d7f4ef": "#134e4a",
+	"rgba(37,99,235,0.05)": "rgba(96,165,250,0.16)",
+	"rgba(37,99,235,0.06)": "rgba(96,165,250,0.18)",
+	"rgba(37,99,235,0.08)": "rgba(96,165,250,0.22)",
+	"rgba(37,99,235,0.12)": "rgba(96,165,250,0.26)",
+	"rgba(37,99,235,0.18)": "rgba(96,165,250,0.30)",
+	"rgba(37,99,235,0.28)": "rgba(96,165,250,0.38)",
+	"rgba(239,246,255,0.88)": "rgba(30,64,175,0.72)",
+	"rgba(148,163,184,0.45)": "rgba(148,163,184,0.52)"
+};
 let CanvasColorService = class CanvasColorService extends _univerjs_core.Disposable {
 	constructor(_themeService) {
 		super();
@@ -24219,8 +24988,14 @@ let CanvasColorService = class CanvasColorService extends _univerjs_core.Disposa
 	getRenderColor(color) {
 		if (!this._themeService.darkMode) return color;
 		if (this._cache.has(color)) return this._cache.get(color);
+		if (normalizeRenderColor(color) === "transparent") {
+			this._cache.set(color, "transparent");
+			return "transparent";
+		}
 		let cachedColor = "";
-		if (color.startsWith("#")) {
+		const mappedColor = getDarkRenderColorOverride(color);
+		if (mappedColor) cachedColor = mappedColor;
+		else if (color.startsWith("#")) {
 			cachedColor = rgbToHex(this._invertAlgo(hexToRgb(color)));
 			if (color.length === 5) {
 				const alpha = color.charAt(4);
@@ -24252,6 +25027,15 @@ let CanvasColorService = class CanvasColorService extends _univerjs_core.Disposa
 	}
 };
 CanvasColorService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))], CanvasColorService);
+function getDarkRenderColorOverride(color) {
+	var _DARK_RENDER_COLOR_OV;
+	return (_DARK_RENDER_COLOR_OV = DARK_RENDER_COLOR_OVERRIDES[normalizeRenderColor(color)]) !== null && _DARK_RENDER_COLOR_OV !== void 0 ? _DARK_RENDER_COLOR_OV : null;
+}
+function normalizeRenderColor(color) {
+	const trimmed = color.trim().toLowerCase();
+	if (trimmed.startsWith("rgb")) return trimmed.replace(/\s+/g, "");
+	return trimmed;
+}
 function hexToRgb(_hex) {
 	const hex = _hex.replace(/^#/, "");
 	let r;
@@ -24925,7 +25709,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "0.25.0";
+var version = "1.0.0-alpha.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -25397,7 +26181,47 @@ const DEFAULT_TRANSFORMER_LAYER_INDEX = 2;
 const MINI_WIDTH_LIMIT = 20;
 const MINI_HEIGHT_LIMIT = 20;
 const DEFAULT_CONTROL_PLUS_INDEX = 5e3;
-const SINGLE_ACTIVE_OBJECT_TYPE_MAP = new Set([6]);
+const SINGLE_ACTIVE_OBJECT_TYPE_MAP = /* @__PURE__ */ new Set([6]);
+const ROTATE_ICON_SIZE = 14;
+var TransformerRotateIcon = class extends Rect {
+	_draw(ctx) {
+		const iconWidth = this.width || ROTATE_ICON_SIZE;
+		const iconHeight = this.height || ROTATE_ICON_SIZE;
+		const scaleX = iconWidth / 24;
+		const scaleY = iconHeight / 24;
+		ctx.save();
+		ctx.scale(scaleX, scaleY);
+		ctx.beginPath();
+		ctx.lineWidth = (this.strokeWidth || 2) / Math.max(scaleX, scaleY);
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+		ctx.strokeStyle = this.stroke || "currentColor";
+		ctx.moveTo(21, 12);
+		ctx.arc(12, 12, 9, 0, Math.PI * 1.5, false);
+		ctx.bezierCurveTo(14.52, 3, 16.93, 4, 18.74, 5.74);
+		ctx.lineTo(21, 8);
+		ctx.moveTo(21, 3);
+		ctx.lineTo(21, 8);
+		ctx.lineTo(16, 8);
+		ctx.stroke();
+		ctx.restore();
+	}
+};
+var TransformerAnchor = class extends Rect {
+	_draw(ctx) {
+		if (!this.shadowColor || !this.shadowBlur && !this.shadowOffsetX && !this.shadowOffsetY) {
+			Rect.drawWith(ctx, this);
+			return;
+		}
+		ctx.save();
+		ctx.shadowColor = this.shadowColor;
+		ctx.shadowBlur = this.shadowBlur;
+		ctx.shadowOffsetX = this.shadowOffsetX;
+		ctx.shadowOffsetY = this.shadowOffsetY;
+		Rect.drawWith(ctx, this);
+		ctx.restore();
+	}
+};
 /**
 * Transformer constructor.  Transformer is a special type of group that allow you transform
 * primitives and shapes. Transforming tool is not changing `width` and `height` properties of nodes
@@ -25416,8 +26240,16 @@ var Transformer = class extends _univerjs_core.Disposable {
 		_defineProperty(this, "rotationSnaps", []);
 		_defineProperty(this, "rotationSnapTolerance", 5);
 		_defineProperty(this, "rotateAnchorOffset", 50);
+		_defineProperty(this, "rotateAnchorPosition", "top");
+		_defineProperty(this, "rotateLineEnabled", true);
 		_defineProperty(this, "rotateSize", 10);
 		_defineProperty(this, "rotateCornerRadius", 10);
+		_defineProperty(this, "rotateFill", void 0);
+		_defineProperty(this, "rotateStroke", void 0);
+		_defineProperty(this, "rotateStrokeWidth", void 0);
+		_defineProperty(this, "rotateIconEnabled", false);
+		_defineProperty(this, "rotateIconStroke", void 0);
+		_defineProperty(this, "rotateIconStrokeWidth", 1.5);
 		_defineProperty(this, "borderEnabled", true);
 		_defineProperty(this, "borderStroke", "rgb(97, 97, 97)");
 		_defineProperty(this, "borderStrokeWidth", 1);
@@ -25428,10 +26260,19 @@ var Transformer = class extends _univerjs_core.Disposable {
 		_defineProperty(this, "anchorStrokeWidth", 1);
 		_defineProperty(this, "anchorSize", 10);
 		_defineProperty(this, "anchorCornerRadius", 10);
+		_defineProperty(this, "anchorStyle", "default");
+		_defineProperty(this, "anchorSideLongSize", 16);
+		_defineProperty(this, "anchorSideShortSize", 5);
+		_defineProperty(this, "anchorSideCornerRadius", 2.5);
+		_defineProperty(this, "anchorShadowColor", void 0);
+		_defineProperty(this, "anchorShadowBlur", 0);
+		_defineProperty(this, "anchorShadowOffsetX", 0);
+		_defineProperty(this, "anchorShadowOffsetY", 0);
 		_defineProperty(this, "keepRatio", true);
 		_defineProperty(this, "centeredScaling", false);
 		_defineProperty(this, "zeroLeft", 0);
 		_defineProperty(this, "zeroTop", 0);
+		_defineProperty(this, "moveBoundaryEnabled", true);
 		_defineProperty(
 			this,
 			/**
@@ -25545,9 +26386,9 @@ var Transformer = class extends _univerjs_core.Disposable {
 	}
 	_getConfig(applyObject) {
 		const objectTransformerConfig = applyObject.transformerConfig;
-		let { isCropper, hoverEnabled, hoverEnterFunc, hoverLeaveFunc, resizeEnabled, rotateEnabled, rotationSnaps, rotationSnapTolerance, rotateAnchorOffset, rotateSize, rotateCornerRadius, borderEnabled, borderStroke, borderStrokeWidth, borderDash, borderSpacing, anchorFill, anchorStroke, anchorStrokeWidth, anchorSize, anchorCornerRadius, keepRatio, centeredScaling, enabledAnchors, flipEnabled, ignoreStroke, boundBoxFunc, useSingleNodeRotation, shouldOverdrawWholeArea } = this;
+		let { isCropper, hoverEnabled, hoverEnterFunc, hoverLeaveFunc, resizeEnabled, rotateEnabled, rotationSnaps, rotationSnapTolerance, rotateAnchorOffset, rotateAnchorPosition, rotateLineEnabled, rotateSize, rotateCornerRadius, rotateFill, rotateStroke, rotateStrokeWidth, rotateIconEnabled, rotateIconStroke, rotateIconStrokeWidth, borderEnabled, borderStroke, borderStrokeWidth, borderDash, borderSpacing, anchorFill, anchorStroke, anchorStrokeWidth, anchorSize, anchorCornerRadius, anchorStyle, anchorSideLongSize, anchorSideShortSize, anchorSideCornerRadius, anchorShadowColor, anchorShadowBlur, anchorShadowOffsetX, anchorShadowOffsetY, keepRatio, centeredScaling, enabledAnchors, flipEnabled, ignoreStroke, boundBoxFunc, useSingleNodeRotation, shouldOverdrawWholeArea, moveBoundaryEnabled } = this;
 		if (objectTransformerConfig != null) {
-			var _objectTransformerCon, _objectTransformerCon2, _objectTransformerCon3, _objectTransformerCon4, _objectTransformerCon5, _objectTransformerCon6, _objectTransformerCon7, _objectTransformerCon8, _objectTransformerCon9, _objectTransformerCon10, _objectTransformerCon11, _objectTransformerCon12, _objectTransformerCon13, _objectTransformerCon14, _objectTransformerCon15, _objectTransformerCon16, _objectTransformerCon17, _objectTransformerCon18, _objectTransformerCon19, _objectTransformerCon20, _objectTransformerCon21, _objectTransformerCon22, _objectTransformerCon23, _objectTransformerCon24, _objectTransformerCon25, _objectTransformerCon26, _objectTransformerCon27, _objectTransformerCon28, _objectTransformerCon29;
+			var _objectTransformerCon, _objectTransformerCon2, _objectTransformerCon3, _objectTransformerCon4, _objectTransformerCon5, _objectTransformerCon6, _objectTransformerCon7, _objectTransformerCon8, _objectTransformerCon9, _objectTransformerCon10, _objectTransformerCon11, _objectTransformerCon12, _objectTransformerCon13, _objectTransformerCon14, _objectTransformerCon15, _objectTransformerCon16, _objectTransformerCon17, _objectTransformerCon18, _objectTransformerCon19, _objectTransformerCon20, _objectTransformerCon21, _objectTransformerCon22, _objectTransformerCon23, _objectTransformerCon24, _objectTransformerCon25, _objectTransformerCon26, _objectTransformerCon27, _objectTransformerCon28, _objectTransformerCon29, _objectTransformerCon30, _objectTransformerCon31, _objectTransformerCon32, _objectTransformerCon33, _objectTransformerCon34, _objectTransformerCon35, _objectTransformerCon36, _objectTransformerCon37, _objectTransformerCon38, _objectTransformerCon39, _objectTransformerCon40, _objectTransformerCon41, _objectTransformerCon42, _objectTransformerCon43, _objectTransformerCon44, _objectTransformerCon45, _objectTransformerCon46;
 			isCropper = (_objectTransformerCon = objectTransformerConfig.isCropper) !== null && _objectTransformerCon !== void 0 ? _objectTransformerCon : isCropper;
 			hoverEnabled = (_objectTransformerCon2 = objectTransformerConfig.hoverEnabled) !== null && _objectTransformerCon2 !== void 0 ? _objectTransformerCon2 : hoverEnabled;
 			hoverEnterFunc = (_objectTransformerCon3 = objectTransformerConfig.hoverEnterFunc) !== null && _objectTransformerCon3 !== void 0 ? _objectTransformerCon3 : hoverEnterFunc;
@@ -25557,26 +26398,43 @@ var Transformer = class extends _univerjs_core.Disposable {
 			rotationSnaps = (_objectTransformerCon7 = objectTransformerConfig.rotationSnaps) !== null && _objectTransformerCon7 !== void 0 ? _objectTransformerCon7 : rotationSnaps;
 			rotationSnapTolerance = (_objectTransformerCon8 = objectTransformerConfig.rotationSnapTolerance) !== null && _objectTransformerCon8 !== void 0 ? _objectTransformerCon8 : rotationSnapTolerance;
 			rotateAnchorOffset = (_objectTransformerCon9 = objectTransformerConfig.rotateAnchorOffset) !== null && _objectTransformerCon9 !== void 0 ? _objectTransformerCon9 : rotateAnchorOffset;
-			rotateSize = (_objectTransformerCon10 = objectTransformerConfig.rotateSize) !== null && _objectTransformerCon10 !== void 0 ? _objectTransformerCon10 : rotateSize;
-			rotateCornerRadius = (_objectTransformerCon11 = objectTransformerConfig.rotateCornerRadius) !== null && _objectTransformerCon11 !== void 0 ? _objectTransformerCon11 : rotateCornerRadius;
-			borderEnabled = (_objectTransformerCon12 = objectTransformerConfig.borderEnabled) !== null && _objectTransformerCon12 !== void 0 ? _objectTransformerCon12 : borderEnabled;
-			borderStroke = (_objectTransformerCon13 = objectTransformerConfig.borderStroke) !== null && _objectTransformerCon13 !== void 0 ? _objectTransformerCon13 : borderStroke;
-			borderStrokeWidth = (_objectTransformerCon14 = objectTransformerConfig.borderStrokeWidth) !== null && _objectTransformerCon14 !== void 0 ? _objectTransformerCon14 : borderStrokeWidth;
-			borderDash = (_objectTransformerCon15 = objectTransformerConfig.borderDash) !== null && _objectTransformerCon15 !== void 0 ? _objectTransformerCon15 : borderDash;
-			borderSpacing = (_objectTransformerCon16 = objectTransformerConfig.borderSpacing) !== null && _objectTransformerCon16 !== void 0 ? _objectTransformerCon16 : borderSpacing;
-			anchorFill = (_objectTransformerCon17 = objectTransformerConfig.anchorFill) !== null && _objectTransformerCon17 !== void 0 ? _objectTransformerCon17 : anchorFill;
-			anchorStroke = (_objectTransformerCon18 = objectTransformerConfig.anchorStroke) !== null && _objectTransformerCon18 !== void 0 ? _objectTransformerCon18 : anchorStroke;
-			anchorStrokeWidth = (_objectTransformerCon19 = objectTransformerConfig.anchorStrokeWidth) !== null && _objectTransformerCon19 !== void 0 ? _objectTransformerCon19 : anchorStrokeWidth;
-			anchorSize = (_objectTransformerCon20 = objectTransformerConfig.anchorSize) !== null && _objectTransformerCon20 !== void 0 ? _objectTransformerCon20 : anchorSize;
-			anchorCornerRadius = (_objectTransformerCon21 = objectTransformerConfig.anchorCornerRadius) !== null && _objectTransformerCon21 !== void 0 ? _objectTransformerCon21 : anchorCornerRadius;
-			keepRatio = (_objectTransformerCon22 = objectTransformerConfig.keepRatio) !== null && _objectTransformerCon22 !== void 0 ? _objectTransformerCon22 : keepRatio;
-			centeredScaling = (_objectTransformerCon23 = objectTransformerConfig.centeredScaling) !== null && _objectTransformerCon23 !== void 0 ? _objectTransformerCon23 : centeredScaling;
-			enabledAnchors = (_objectTransformerCon24 = objectTransformerConfig.enabledAnchors) !== null && _objectTransformerCon24 !== void 0 ? _objectTransformerCon24 : enabledAnchors;
-			flipEnabled = (_objectTransformerCon25 = objectTransformerConfig.flipEnabled) !== null && _objectTransformerCon25 !== void 0 ? _objectTransformerCon25 : flipEnabled;
-			ignoreStroke = (_objectTransformerCon26 = objectTransformerConfig.ignoreStroke) !== null && _objectTransformerCon26 !== void 0 ? _objectTransformerCon26 : ignoreStroke;
-			boundBoxFunc = (_objectTransformerCon27 = objectTransformerConfig.boundBoxFunc) !== null && _objectTransformerCon27 !== void 0 ? _objectTransformerCon27 : boundBoxFunc;
-			useSingleNodeRotation = (_objectTransformerCon28 = objectTransformerConfig.useSingleNodeRotation) !== null && _objectTransformerCon28 !== void 0 ? _objectTransformerCon28 : useSingleNodeRotation;
-			shouldOverdrawWholeArea = (_objectTransformerCon29 = objectTransformerConfig.shouldOverdrawWholeArea) !== null && _objectTransformerCon29 !== void 0 ? _objectTransformerCon29 : shouldOverdrawWholeArea;
+			rotateAnchorPosition = (_objectTransformerCon10 = objectTransformerConfig.rotateAnchorPosition) !== null && _objectTransformerCon10 !== void 0 ? _objectTransformerCon10 : rotateAnchorPosition;
+			rotateLineEnabled = (_objectTransformerCon11 = objectTransformerConfig.rotateLineEnabled) !== null && _objectTransformerCon11 !== void 0 ? _objectTransformerCon11 : rotateLineEnabled;
+			rotateSize = (_objectTransformerCon12 = objectTransformerConfig.rotateSize) !== null && _objectTransformerCon12 !== void 0 ? _objectTransformerCon12 : rotateSize;
+			rotateCornerRadius = (_objectTransformerCon13 = objectTransformerConfig.rotateCornerRadius) !== null && _objectTransformerCon13 !== void 0 ? _objectTransformerCon13 : rotateCornerRadius;
+			rotateFill = (_objectTransformerCon14 = objectTransformerConfig.rotateFill) !== null && _objectTransformerCon14 !== void 0 ? _objectTransformerCon14 : rotateFill;
+			rotateStroke = (_objectTransformerCon15 = objectTransformerConfig.rotateStroke) !== null && _objectTransformerCon15 !== void 0 ? _objectTransformerCon15 : rotateStroke;
+			rotateStrokeWidth = (_objectTransformerCon16 = objectTransformerConfig.rotateStrokeWidth) !== null && _objectTransformerCon16 !== void 0 ? _objectTransformerCon16 : rotateStrokeWidth;
+			rotateIconEnabled = (_objectTransformerCon17 = objectTransformerConfig.rotateIconEnabled) !== null && _objectTransformerCon17 !== void 0 ? _objectTransformerCon17 : rotateIconEnabled;
+			rotateIconStroke = (_objectTransformerCon18 = objectTransformerConfig.rotateIconStroke) !== null && _objectTransformerCon18 !== void 0 ? _objectTransformerCon18 : rotateIconStroke;
+			rotateIconStrokeWidth = (_objectTransformerCon19 = objectTransformerConfig.rotateIconStrokeWidth) !== null && _objectTransformerCon19 !== void 0 ? _objectTransformerCon19 : rotateIconStrokeWidth;
+			borderEnabled = (_objectTransformerCon20 = objectTransformerConfig.borderEnabled) !== null && _objectTransformerCon20 !== void 0 ? _objectTransformerCon20 : borderEnabled;
+			borderStroke = (_objectTransformerCon21 = objectTransformerConfig.borderStroke) !== null && _objectTransformerCon21 !== void 0 ? _objectTransformerCon21 : borderStroke;
+			borderStrokeWidth = (_objectTransformerCon22 = objectTransformerConfig.borderStrokeWidth) !== null && _objectTransformerCon22 !== void 0 ? _objectTransformerCon22 : borderStrokeWidth;
+			borderDash = (_objectTransformerCon23 = objectTransformerConfig.borderDash) !== null && _objectTransformerCon23 !== void 0 ? _objectTransformerCon23 : borderDash;
+			borderSpacing = (_objectTransformerCon24 = objectTransformerConfig.borderSpacing) !== null && _objectTransformerCon24 !== void 0 ? _objectTransformerCon24 : borderSpacing;
+			anchorFill = (_objectTransformerCon25 = objectTransformerConfig.anchorFill) !== null && _objectTransformerCon25 !== void 0 ? _objectTransformerCon25 : anchorFill;
+			anchorStroke = (_objectTransformerCon26 = objectTransformerConfig.anchorStroke) !== null && _objectTransformerCon26 !== void 0 ? _objectTransformerCon26 : anchorStroke;
+			anchorStrokeWidth = (_objectTransformerCon27 = objectTransformerConfig.anchorStrokeWidth) !== null && _objectTransformerCon27 !== void 0 ? _objectTransformerCon27 : anchorStrokeWidth;
+			anchorSize = (_objectTransformerCon28 = objectTransformerConfig.anchorSize) !== null && _objectTransformerCon28 !== void 0 ? _objectTransformerCon28 : anchorSize;
+			anchorCornerRadius = (_objectTransformerCon29 = objectTransformerConfig.anchorCornerRadius) !== null && _objectTransformerCon29 !== void 0 ? _objectTransformerCon29 : anchorCornerRadius;
+			anchorStyle = (_objectTransformerCon30 = objectTransformerConfig.anchorStyle) !== null && _objectTransformerCon30 !== void 0 ? _objectTransformerCon30 : anchorStyle;
+			anchorSideLongSize = (_objectTransformerCon31 = objectTransformerConfig.anchorSideLongSize) !== null && _objectTransformerCon31 !== void 0 ? _objectTransformerCon31 : anchorSideLongSize;
+			anchorSideShortSize = (_objectTransformerCon32 = objectTransformerConfig.anchorSideShortSize) !== null && _objectTransformerCon32 !== void 0 ? _objectTransformerCon32 : anchorSideShortSize;
+			anchorSideCornerRadius = (_objectTransformerCon33 = objectTransformerConfig.anchorSideCornerRadius) !== null && _objectTransformerCon33 !== void 0 ? _objectTransformerCon33 : anchorSideCornerRadius;
+			anchorShadowColor = (_objectTransformerCon34 = objectTransformerConfig.anchorShadowColor) !== null && _objectTransformerCon34 !== void 0 ? _objectTransformerCon34 : anchorShadowColor;
+			anchorShadowBlur = (_objectTransformerCon35 = objectTransformerConfig.anchorShadowBlur) !== null && _objectTransformerCon35 !== void 0 ? _objectTransformerCon35 : anchorShadowBlur;
+			anchorShadowOffsetX = (_objectTransformerCon36 = objectTransformerConfig.anchorShadowOffsetX) !== null && _objectTransformerCon36 !== void 0 ? _objectTransformerCon36 : anchorShadowOffsetX;
+			anchorShadowOffsetY = (_objectTransformerCon37 = objectTransformerConfig.anchorShadowOffsetY) !== null && _objectTransformerCon37 !== void 0 ? _objectTransformerCon37 : anchorShadowOffsetY;
+			keepRatio = (_objectTransformerCon38 = objectTransformerConfig.keepRatio) !== null && _objectTransformerCon38 !== void 0 ? _objectTransformerCon38 : keepRatio;
+			centeredScaling = (_objectTransformerCon39 = objectTransformerConfig.centeredScaling) !== null && _objectTransformerCon39 !== void 0 ? _objectTransformerCon39 : centeredScaling;
+			enabledAnchors = (_objectTransformerCon40 = objectTransformerConfig.enabledAnchors) !== null && _objectTransformerCon40 !== void 0 ? _objectTransformerCon40 : enabledAnchors;
+			flipEnabled = (_objectTransformerCon41 = objectTransformerConfig.flipEnabled) !== null && _objectTransformerCon41 !== void 0 ? _objectTransformerCon41 : flipEnabled;
+			ignoreStroke = (_objectTransformerCon42 = objectTransformerConfig.ignoreStroke) !== null && _objectTransformerCon42 !== void 0 ? _objectTransformerCon42 : ignoreStroke;
+			boundBoxFunc = (_objectTransformerCon43 = objectTransformerConfig.boundBoxFunc) !== null && _objectTransformerCon43 !== void 0 ? _objectTransformerCon43 : boundBoxFunc;
+			useSingleNodeRotation = (_objectTransformerCon44 = objectTransformerConfig.useSingleNodeRotation) !== null && _objectTransformerCon44 !== void 0 ? _objectTransformerCon44 : useSingleNodeRotation;
+			shouldOverdrawWholeArea = (_objectTransformerCon45 = objectTransformerConfig.shouldOverdrawWholeArea) !== null && _objectTransformerCon45 !== void 0 ? _objectTransformerCon45 : shouldOverdrawWholeArea;
+			moveBoundaryEnabled = (_objectTransformerCon46 = objectTransformerConfig.moveBoundaryEnabled) !== null && _objectTransformerCon46 !== void 0 ? _objectTransformerCon46 : moveBoundaryEnabled;
 		}
 		return {
 			isCropper,
@@ -25588,8 +26446,16 @@ var Transformer = class extends _univerjs_core.Disposable {
 			rotationSnaps,
 			rotationSnapTolerance,
 			rotateAnchorOffset,
+			rotateAnchorPosition,
+			rotateLineEnabled,
 			rotateSize,
 			rotateCornerRadius,
+			rotateFill,
+			rotateStroke,
+			rotateStrokeWidth,
+			rotateIconEnabled,
+			rotateIconStroke,
+			rotateIconStrokeWidth,
 			borderEnabled,
 			borderStroke,
 			borderStrokeWidth,
@@ -25600,6 +26466,14 @@ var Transformer = class extends _univerjs_core.Disposable {
 			anchorStrokeWidth,
 			anchorSize,
 			anchorCornerRadius,
+			anchorStyle,
+			anchorSideLongSize,
+			anchorSideShortSize,
+			anchorSideCornerRadius,
+			anchorShadowColor,
+			anchorShadowBlur,
+			anchorShadowOffsetX,
+			anchorShadowOffsetY,
 			keepRatio,
 			centeredScaling,
 			enabledAnchors,
@@ -25607,7 +26481,8 @@ var Transformer = class extends _univerjs_core.Disposable {
 			ignoreStroke,
 			boundBoxFunc,
 			useSingleNodeRotation,
-			shouldOverdrawWholeArea
+			shouldOverdrawWholeArea,
+			moveBoundaryEnabled
 		};
 	}
 	attachTo(applyObject) {
@@ -25641,7 +26516,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 				this._copperSelectedObject = applyObject;
 				this._changeStart$.next({
 					target: applyObject,
-					objects: new Map([[applyObject.oKey, applyObject]]),
+					objects: /* @__PURE__ */ new Map([[applyObject.oKey, applyObject]]),
 					type: 0
 				});
 			}
@@ -25669,7 +26544,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 					event
 				});
 				else this._changeEnd$.next({
-					objects: new Map([[applyObject.oKey, applyObject]]),
+					objects: /* @__PURE__ */ new Map([[applyObject.oKey, applyObject]]),
 					type: 2,
 					offsetX,
 					offsetY,
@@ -25716,6 +26591,10 @@ var Transformer = class extends _univerjs_core.Disposable {
 		});
 	}
 	_checkMoveBoundary(moveObject, moveLeft, moveTop, ancestorLeft, ancestorTop, topSceneWidth, topSceneHeight) {
+		if (this._getConfig(moveObject).moveBoundaryEnabled === false) return {
+			moveLeft,
+			moveTop
+		};
 		const { left, top, width, height } = moveObject;
 		let resultMoveLeft = moveLeft;
 		let resultMoveTop = moveTop;
@@ -25765,7 +26644,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 			moveTop = boundary.moveTop;
 			cropper.translate(moveLeft + cropper.left, moveTop + cropper.top);
 			this._changing$.next({
-				objects: new Map([[cropper.oKey, cropper]]),
+				objects: /* @__PURE__ */ new Map([[cropper.oKey, cropper]]),
 				moveX: moveLeft,
 				moveY: moveTop,
 				type: 1,
@@ -25800,7 +26679,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 		} else {
 			this._moveFunc(applyObject, type, x, y, keepRatio, isCropper, isGroup);
 			this._changing$.next({
-				objects: new Map([[applyObject.oKey, applyObject]]),
+				objects: /* @__PURE__ */ new Map([[applyObject.oKey, applyObject]]),
 				type: 1,
 				offsetX: moveOffsetX,
 				offsetY: moveOffsetY
@@ -26047,7 +26926,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 				});
 			} else {
 				this._changeStart$.next({
-					objects: new Map([[applyObject.oKey, applyObject]]),
+					objects: /* @__PURE__ */ new Map([[applyObject.oKey, applyObject]]),
 					type: 0
 				});
 				const { width, height, left, top } = applyObject.getState();
@@ -26088,7 +26967,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 				} else {
 					this._recoverySizeBoundary([applyObject], ancestorLeft, ancestorTop, topSceneWidth, topSceneHeight);
 					this._changeEnd$.next({
-						objects: new Map([[applyObject.oKey, applyObject]]),
+						objects: /* @__PURE__ */ new Map([[applyObject.oKey, applyObject]]),
 						type: 2,
 						offsetX,
 						offsetY,
@@ -26163,7 +27042,11 @@ var Transformer = class extends _univerjs_core.Disposable {
 	_rotateMoving(moveOffsetX, moveOffsetY, centerX, centerY, agentOrigin) {
 		const { ancestorScaleX, ancestorScaleY } = this._scene;
 		if (this._moveBufferBlocker(moveOffsetX, moveOffsetY)) return;
-		let angle = agentOrigin + radToDeg(Math.atan2((moveOffsetY - centerY) / ancestorScaleY + this._viewportScrollY, (moveOffsetX - centerX) / ancestorScaleX + this._viewportScrollX) - Math.atan2((this._startOffsetY - centerY) / ancestorScaleY + this._viewportScrollY, (this._startOffsetX - centerX) / ancestorScaleX + this._viewportScrollX));
+		const moveSceneX = moveOffsetX / ancestorScaleX + this._viewportScrollX;
+		const moveSceneY = moveOffsetY / ancestorScaleY + this._viewportScrollY;
+		const startSceneX = this._startOffsetX / ancestorScaleX + this._viewportScrollX;
+		const startSceneY = this._startOffsetY / ancestorScaleY + this._viewportScrollY;
+		let angle = agentOrigin + radToDeg(Math.atan2(moveSceneY - centerY, moveSceneX - centerX) - Math.atan2(startSceneY - centerY, startSceneX - centerX));
 		if (angle < 0) angle = 360 + angle;
 		angle %= 360;
 		angle = this._smoothAccuracy(angle);
@@ -26220,6 +27103,23 @@ var Transformer = class extends _univerjs_core.Disposable {
 		}
 		return cursor;
 	}
+	_createRotateIcon(applyObject, zIndex, left, top) {
+		const { rotateSize, rotateIconStroke, rotateIconStrokeWidth, borderStroke } = this._getConfig(applyObject);
+		const iconOffset = (rotateSize - ROTATE_ICON_SIZE) / 2;
+		return new TransformerRotateIcon(`__SpreadsheetTransformerRotate___ICON_${zIndex}`, {
+			zIndex,
+			evented: false,
+			left: left + iconOffset,
+			top: top + iconOffset,
+			width: ROTATE_ICON_SIZE,
+			height: ROTATE_ICON_SIZE,
+			fill: null,
+			stroke: rotateIconStroke !== null && rotateIconStroke !== void 0 ? rotateIconStroke : borderStroke,
+			strokeWidth: rotateIconStrokeWidth,
+			strokeLineCap: "round",
+			strokeLineJoin: "round"
+		});
+	}
 	_getCopperAnchorPosition(type, height, width, applyObject) {
 		const { borderStrokeWidth, borderSpacing, anchorSize } = this._getConfig(applyObject);
 		let left = 0;
@@ -26266,17 +27166,18 @@ var Transformer = class extends _univerjs_core.Disposable {
 		};
 	}
 	_getRotateAnchorPosition(type, height, width, applyObject) {
-		const { rotateAnchorOffset, rotateSize, borderStrokeWidth, borderSpacing, anchorSize } = this._getConfig(applyObject);
+		const { rotateAnchorOffset, rotateAnchorPosition, rotateSize, borderStrokeWidth, borderSpacing, anchorSize } = this._getConfig(applyObject);
+		const isBottomRotateAnchor = rotateAnchorPosition === "bottom";
 		let left = -anchorSize / 2;
 		let top = -anchorSize / 2;
 		switch (type) {
 			case "__SpreadsheetTransformerRotate__":
 				left = width / 2 - rotateSize / 2;
-				top = -rotateAnchorOffset - borderSpacing - borderStrokeWidth * 2 - rotateSize;
+				top = isBottomRotateAnchor ? height + rotateAnchorOffset + borderSpacing + borderStrokeWidth * 2 : -rotateAnchorOffset - borderSpacing - borderStrokeWidth * 2 - rotateSize;
 				break;
 			case "__SpreadsheetTransformerRotateLine__":
 				left = width / 2;
-				top = -rotateAnchorOffset - borderSpacing - borderStrokeWidth;
+				top = isBottomRotateAnchor ? height + borderSpacing + borderStrokeWidth : -rotateAnchorOffset - borderSpacing - borderStrokeWidth;
 				break;
 			case "__SpreadsheetTransformerResizeLT__":
 				left += -borderSpacing - borderStrokeWidth;
@@ -26316,21 +27217,43 @@ var Transformer = class extends _univerjs_core.Disposable {
 			top
 		};
 	}
+	_isMiddleAnchor(type) {
+		return type === "__SpreadsheetTransformerResizeCT__" || type === "__SpreadsheetTransformerResizeLM__" || type === "__SpreadsheetTransformerResizeRM__" || type === "__SpreadsheetTransformerResizeCB__";
+	}
+	_getResizeAnchorProps(type, applyObject) {
+		const { anchorSize, anchorCornerRadius, anchorStyle, anchorSideLongSize, anchorSideShortSize, anchorSideCornerRadius } = this._getConfig(applyObject);
+		if (anchorStyle !== "canva" || !this._isMiddleAnchor(type)) return {
+			width: anchorSize,
+			height: anchorSize,
+			radius: anchorStyle === "canva" ? anchorSize / 2 : anchorCornerRadius
+		};
+		const isHorizontal = type === "__SpreadsheetTransformerResizeCT__" || type === "__SpreadsheetTransformerResizeCB__";
+		return {
+			width: isHorizontal ? anchorSideLongSize : anchorSideShortSize,
+			height: isHorizontal ? anchorSideShortSize : anchorSideLongSize,
+			radius: anchorSideCornerRadius
+		};
+	}
 	_createResizeAnchor(type, applyObject, zIndex) {
 		const { height = 0, width = 0, scaleX = 1, scaleY = 1 } = applyObject.getState();
-		const { anchorFill, anchorStroke, anchorStrokeWidth, anchorCornerRadius, anchorSize } = this._getConfig(applyObject);
+		const { anchorFill, anchorStroke, anchorStrokeWidth, anchorSize, anchorShadowColor, anchorShadowBlur, anchorShadowOffsetX, anchorShadowOffsetY } = this._getConfig(applyObject);
 		const { left, top } = this._getRotateAnchorPosition(type, height, width, applyObject);
+		const anchorProps = this._getResizeAnchorProps(type, applyObject);
 		const cursor = this._getRotateAnchorCursor(type);
-		const anchor = new Rect(`${type}_${zIndex}`, {
+		const anchor = new TransformerAnchor(`${type}_${zIndex}`, {
 			zIndex: zIndex - 1,
 			fill: anchorFill,
 			stroke: anchorStroke,
 			strokeWidth: anchorStrokeWidth,
-			width: anchorSize,
-			height: anchorSize,
-			radius: anchorCornerRadius,
-			left,
-			top
+			width: anchorProps.width,
+			height: anchorProps.height,
+			radius: anchorProps.radius,
+			left: left + (anchorSize - anchorProps.width) / 2,
+			top: top + (anchorSize - anchorProps.height) / 2,
+			shadowColor: anchorShadowColor,
+			shadowBlur: anchorShadowBlur,
+			shadowOffsetX: anchorShadowOffsetX,
+			shadowOffsetY: anchorShadowOffsetY
 		});
 		this._attachHover(anchor, cursor, "default");
 		return anchor;
@@ -26578,7 +27501,7 @@ var Transformer = class extends _univerjs_core.Disposable {
 	_createControl(applyObject, isSkipOnCropper = true) {
 		const { left = 0, top = 0, height = 0, width = 0 } = applyObject.getState();
 		const angle = applyObject.angle;
-		const { isCropper, resizeEnabled, rotateEnabled, rotateAnchorOffset, rotateSize, rotateCornerRadius, borderEnabled, borderStroke, borderStrokeWidth, borderSpacing, enabledAnchors } = this._getConfig(applyObject);
+		const { isCropper, resizeEnabled, rotateEnabled, rotateAnchorOffset, rotateLineEnabled, rotateSize, rotateCornerRadius, rotateFill, rotateStroke, rotateStrokeWidth, rotateIconEnabled, anchorShadowColor, anchorShadowBlur, anchorShadowOffsetX, anchorShadowOffsetY, borderEnabled, borderStroke, borderStrokeWidth, borderSpacing, enabledAnchors } = this._getConfig(applyObject);
 		if (isSkipOnCropper && isCropper) return;
 		const oKey = applyObject.oKey;
 		const zIndex = this._selectedObjectMap.size + applyObject.maxZIndex + DEFAULT_CONTROL_PLUS_INDEX;
@@ -26609,19 +27532,26 @@ var Transformer = class extends _univerjs_core.Disposable {
 				});
 				const { left: rotateLeft, top: rotateTop } = this._getRotateAnchorPosition("__SpreadsheetTransformerRotate__", height, width, applyObject);
 				const cursor = this._getRotateAnchorCursor("__SpreadsheetTransformerRotate__");
-				const rotate = new Rect(`__SpreadsheetTransformerRotate___${zIndex}`, {
+				const rotate = new TransformerAnchor(`__SpreadsheetTransformerRotate___${zIndex}`, {
 					zIndex: zIndex - 1,
 					left: rotateLeft,
 					top: rotateTop,
 					height: rotateSize,
 					width: rotateSize,
 					radius: rotateCornerRadius,
-					strokeWidth: borderStrokeWidth * 2,
-					stroke: borderStroke
+					fill: rotateFill,
+					strokeWidth: rotateStrokeWidth !== null && rotateStrokeWidth !== void 0 ? rotateStrokeWidth : borderStrokeWidth * 2,
+					stroke: rotateStroke !== null && rotateStroke !== void 0 ? rotateStroke : borderStroke,
+					shadowColor: anchorShadowColor,
+					shadowBlur: anchorShadowBlur,
+					shadowOffsetX: anchorShadowOffsetX,
+					shadowOffsetY: anchorShadowOffsetY
 				});
 				this._attachEventToRotate(rotate, applyObject);
 				this._attachHover(rotate, cursor, "default");
-				groupElements.push(rotateLine, rotate);
+				if (rotateLineEnabled) groupElements.push(rotateLine);
+				groupElements.push(rotate);
+				if (rotateIconEnabled) groupElements.push(this._createRotateIcon(applyObject, zIndex, rotateLeft, rotateTop));
 			}
 		}
 		if (resizeEnabled) for (let i = 0, len = enabledAnchors.length; i < len; i++) {