@univerjs/engine-render 0.23.0 → 0.24.0-insiders.20260528-29f582d

package/lib/cjs/index.js

@@ -309,14 +309,7 @@ function getFontStyleString(textStyle) {
 	let originFontSize = defaultFontSize;
 	if (textStyle.fs) originFontSize = Math.ceil(textStyle.fs);
 	let fontSize = originFontSize;
-	let fontFamilyResult = defaultFont;
-	if (textStyle.ff) {
-		let fontFamily = textStyle.ff;
-		fontFamily = fontFamily.replace(/"/g, "").replace(/'/g, "");
-		if (fontFamily.indexOf(" ") > -1) fontFamily = `"${fontFamily}"`;
-		if (fontFamily == null) fontFamily = defaultFont;
-		fontFamilyResult = fontFamily;
-	}
+	const fontFamilyResult = normalizeFontFamily(textStyle.ff, defaultFont);
 	const { va: baselineOffset } = textStyle;
 	if (baselineOffset === _univerjs_core.BaselineOffset.SUBSCRIPT || baselineOffset === _univerjs_core.BaselineOffset.SUPERSCRIPT) {
 		const { sbr, spr } = FontCache.getBaselineOffsetInfo(fontFamilyResult, fontSize);
@@ -331,6 +324,13 @@ function getFontStyleString(textStyle) {
 		fontFamily: fontFamilyResult
 	};
 }
+function normalizeFontFamily(fontFamily, defaultFont) {
+	if (!(fontFamily === null || fontFamily === void 0 ? void 0 : fontFamily.trim())) return defaultFont;
+	return fontFamily.split(",").map((item) => {
+		const family = item.trim().replace(/^['"]|['"]$/g, "");
+		return family.includes(" ") ? `"${family}"` : family;
+	}).filter(Boolean).join(", ");
+}
 const CJK_LETTER_REG = cjk_regex.letters().toRegExp();
 function hasCJKText(text) {
 	return CJK_LETTER_REG.test(text);
@@ -384,6 +384,9 @@ function hasArabic(text) {
 function hasTibetan(text) {
 	return /[\u0180-\u024F]/gi.test(text);
 }
+function hasThai(text) {
+	return /[\u0E00-\u0E7F]/.test(text);
+}
 function hasSpace(text) {
 	return /\s+/g.test(text);
 }
@@ -2952,6 +2955,37 @@ var Transform = class Transform {
 	}
 };
 
+//#endregion
+//#region src/basics/zoom.ts
+const MIN_ZOOM_RATIO = .1;
+const MAX_ZOOM_RATIO = 4;
+const PIXEL_DELTA_TO_ZOOM_RATIO = .008;
+const MAX_WHEEL_ZOOM_STEP = .14;
+const MAX_WHEEL_ZOOM_STEP_BELOW_ONE = .07;
+const LINE_DELTA_PIXEL_SIZE = 16;
+const PAGE_DELTA_PIXEL_SIZE = 800;
+const ZOOM_RATIO_PRECISION = 100;
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function normalizeWheelDelta(event) {
+	const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
+	const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
+	let delta = Math.abs(deltaY) >= Math.abs(deltaX) ? deltaY : deltaX;
+	if (delta === 0 && typeof event.wheelDelta === "number") delta = -event.wheelDelta / 3;
+	if (event.deltaMode === EventConstants.DOM_DELTA_LINE) delta *= LINE_DELTA_PIXEL_SIZE;
+	else if (event.deltaMode === EventConstants.DOM_DELTA_PAGE) delta *= PAGE_DELTA_PIXEL_SIZE;
+	return delta;
+}
+function getNextWheelZoomRatio(currentRatio, event) {
+	const validCurrentRatio = Number.isFinite(currentRatio) ? currentRatio : 1;
+	const normalizedDelta = normalizeWheelDelta(event);
+	if (normalizedDelta === 0) return clamp(validCurrentRatio, MIN_ZOOM_RATIO, MAX_ZOOM_RATIO);
+	const maxStep = validCurrentRatio < 1 ? MAX_WHEEL_ZOOM_STEP_BELOW_ONE : MAX_WHEEL_ZOOM_STEP;
+	const ratioDelta = clamp(-normalizedDelta * PIXEL_DELTA_TO_ZOOM_RATIO, -maxStep, maxStep);
+	return clamp(Math.round((validCurrentRatio + ratioDelta) * ZOOM_RATIO_PRECISION) / ZOOM_RATIO_PRECISION, MIN_ZOOM_RATIO, MAX_ZOOM_RATIO);
+}
+
 //#endregion
 //#region src/base-object.ts
 const BASE_OBJECT_ARRAY = [
@@ -4715,8 +4749,9 @@ var SpreadsheetColumnHeader = class extends SpreadsheetHeader {
 		const segment = spreadsheetSkeleton.rowColumnSegment;
 		if (!segment) return;
 		if (segment.startColumn === -1 && segment.endColumn === -1) return;
-		const { rowHeaderWidth } = spreadsheetSkeleton;
-		ctx.translateWithPrecision(rowHeaderWidth, 0);
+		const { columnHeaderHeight, columnHeaderHeightAndMarginTop, rowHeaderWidthAndMarginLeft } = spreadsheetSkeleton;
+		const marginTop = columnHeaderHeightAndMarginTop - columnHeaderHeight;
+		ctx.translateWithPrecision(rowHeaderWidthAndMarginLeft, marginTop);
 		const extensions = this.getExtensionsByOrder();
 		for (const extension of extensions) extension.draw(ctx, parentScale, spreadsheetSkeleton);
 	}
@@ -4724,8 +4759,9 @@ var SpreadsheetColumnHeader = class extends SpreadsheetHeader {
 		const oCoord = this.getInverseCoord(coord);
 		const skeleton = this.getSkeleton();
 		if (!skeleton) return false;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
-		if (oCoord.x > rowHeaderWidth && oCoord.y >= 0 && oCoord.y <= columnHeaderHeight) return true;
+		const { rowHeaderWidthAndMarginLeft, columnHeaderHeight, columnHeaderHeightAndMarginTop } = skeleton;
+		const marginTop = columnHeaderHeightAndMarginTop - columnHeaderHeight;
+		if (oCoord.x > rowHeaderWidthAndMarginLeft && oCoord.y >= marginTop && oCoord.y <= columnHeaderHeightAndMarginTop) return true;
 		return false;
 	}
 	_initialDefaultExtension() {
@@ -12051,6 +12087,17 @@ var Liquid = class {
 	}
 };
 
+//#endregion
+//#region src/components/docs/table-render-viewport.ts
+let docsTableRenderViewportProvider = null;
+function setDocsTableRenderViewportProvider(provider) {
+	docsTableRenderViewportProvider = provider;
+}
+function getDocsTableRenderViewport(unitId, tableId) {
+	var _docsTableRenderViewp;
+	return (_docsTableRenderViewp = docsTableRenderViewportProvider === null || docsTableRenderViewportProvider === void 0 ? void 0 : docsTableRenderViewportProvider(unitId, tableId)) !== null && _docsTableRenderViewp !== void 0 ? _docsTableRenderViewp : null;
+}
+
 //#endregion
 //#region src/components/docs/view-model/data-stream-tree-node.ts
 var DataStreamTreeNode = class DataStreamTreeNode {
@@ -12219,6 +12266,17 @@ function parseDataStreamToTree(dataStream, tables) {
 	const tableRowList = [];
 	const tableCellList = [];
 	const currentBlocks = [];
+	const getParagraphList = () => tableCellList.length > 0 ? cellParagraphList : paragraphList;
+	const appendToPreviousParagraph = (char) => {
+		const tempParagraphList = getParagraphList();
+		const lastParagraph = tempParagraphList[tempParagraphList.length - 1];
+		if (lastParagraph) {
+			var _lastParagraph$conten;
+			lastParagraph.content = `${(_lastParagraph$conten = lastParagraph.content) !== null && _lastParagraph$conten !== void 0 ? _lastParagraph$conten : ""}${char}`;
+			return true;
+		}
+		return false;
+	};
 	for (let i = 0; i < dataStreamLen; i++) {
 		const char = dataStream[i];
 		if (char === _univerjs_core.DataStreamTreeTokenType.PARAGRAPH) {
@@ -12279,6 +12337,9 @@ function parseDataStreamToTree(dataStream, tables) {
 			const cellNode = tableCellList.pop();
 			const lastRow = tableRowList[tableRowList.length - 1];
 			batchParent(lastRow, [cellNode], _univerjs_core.DataStreamTreeNodeType.TABLE_ROW);
+		} else if (char === _univerjs_core.DataStreamTreeTokenType.BLOCK_START) content += char;
+		else if (char === _univerjs_core.DataStreamTreeTokenType.BLOCK_END) {
+			if (content.length > 0 || !appendToPreviousParagraph(char)) content += char;
 		} else if (char === _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK) {
 			currentBlocks.push(i);
 			content += char;
@@ -12595,6 +12656,8 @@ function _createSkeletonWordOrLetter(glyphType, content, config, glyphWidth, gly
 		_univerjs_core.DataStreamTreeTokenType.TABLE_ROW_END,
 		_univerjs_core.DataStreamTreeTokenType.TABLE_CELL_START,
 		_univerjs_core.DataStreamTreeTokenType.TABLE_CELL_END,
+		_univerjs_core.DataStreamTreeTokenType.BLOCK_START,
+		_univerjs_core.DataStreamTreeTokenType.BLOCK_END,
 		_univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_START,
 		_univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_END,
 		_univerjs_core.DataStreamTreeTokenType.COLUMN_BREAK,
@@ -13104,7 +13167,16 @@ function createTableSkeleton(ctx, curPage, viewModel, tableNode, sectionBreakCon
 		let left = 0;
 		let rowHeight = 0;
 		for (const cellNode of cellNodes) {
-			const cellPageSkeleton = createSkeletonCellPages(ctx, viewModel, cellNode, sectionBreakConfig, table, row, cellNodes.indexOf(cellNode))[0];
+			const col = cellNodes.indexOf(cellNode);
+			const cellConfig = rowSource.tableCells[col];
+			if (isCoveredTableCell(cellConfig)) {
+				const cellPageSkeleton = createMergedCoveredCellPage(ctx, sectionBreakConfig, table, row, col, rowSkeleton);
+				cellPageSkeleton.left = left;
+				if (shouldAdvanceTableCellLeft(table, row, col)) left += cellPageSkeleton.pageWidth;
+				rowSkeleton.cells.push(cellPageSkeleton);
+				continue;
+			}
+			const cellPageSkeleton = createSkeletonCellPages(ctx, viewModel, cellNode, sectionBreakConfig, table, row, col)[0];
 			const { marginTop = 0, marginBottom = 0 } = cellPageSkeleton;
 			const pageHeight = cellPageSkeleton.height + marginTop + marginBottom;
 			cellPageSkeleton.left = left;
@@ -13114,7 +13186,7 @@ function createTableSkeleton(ctx, curPage, viewModel, tableNode, sectionBreakCon
 			rowHeight = Math.max(rowHeight, pageHeight);
 		}
 		if (hRule === _univerjs_core.TableRowHeightRule.AT_LEAST) rowHeight = Math.max(rowHeight, val.v);
-		else if (hRule === _univerjs_core.TableRowHeightRule.EXACT) rowHeight = val.v;
+		else if (hRule === _univerjs_core.TableRowHeightRule.EXACT) rowHeight = Math.max(rowHeight, val.v);
 		for (const cellPageSkeleton of rowSkeleton.cells) cellPageSkeleton.pageHeight = rowHeight;
 		const rowConfig = table.tableRows[row];
 		for (let i = 0; i < rowConfig.tableCells.length; i++) {
@@ -13145,6 +13217,7 @@ function createTableSkeleton(ctx, curPage, viewModel, tableNode, sectionBreakCon
 	}
 	tableSkeleton.width = tableWidth;
 	tableSkeleton.height = rowTop;
+	applyMergedCellSpanHeights(tableSkeleton);
 	const { pageWidth, marginLeft = 0, marginRight = 0 } = curPage;
 	tableSkeleton.left = _getTableLeft(pageWidth - marginLeft - marginRight, tableWidth, table.align, table.indent);
 	return tableSkeleton;
@@ -13168,14 +13241,14 @@ function createTableSkeletons(ctx, curPage, viewModel, tableNode, sectionBreakCo
 			fromCurrentPage: false
 		};
 	}
-	const needRepeatHeader = table.tableRows[0].repeatHeaderRow === _univerjs_core.BooleanNumber.TRUE;
+	const repeatRows = getLeadingRepeatHeaderRows(table, rowNodes);
 	const curTableSkeleton = getNullTableSkeleton(startIndex, endIndex, table);
 	const createCache = {
 		rowTop: 0,
 		tableWidth: 0,
 		remainHeight: availableHeight,
-		repeatRow: needRepeatHeader ? rowNodes[0] : null,
-		repeatRowHeight: 0
+		repeatRows,
+		repeatRowsHeight: 0
 	};
 	skeTables.push(curTableSkeleton);
 	for (const rowNode of rowNodes) dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig, rowNode, rowNodes.indexOf(rowNode), table, createCache);
@@ -13191,6 +13264,7 @@ function updateTableSkeletonsPosition(cache, curPage, skeTables, table) {
 	const tableLeft = _getTableLeft(pageWidth - marginLeft - marginRight, tableWidth, table.align, table.indent);
 	let tableIndex = 0;
 	for (const tableSkeleton of skeTables) {
+		applyMergedCellSpanHeights(tableSkeleton);
 		tableSkeleton.width = tableWidth;
 		tableSkeleton.left = tableLeft;
 		tableSkeleton.st = tableSkeleton.rows[0].st - 1;
@@ -13207,7 +13281,7 @@ function getCurTableSkeleton(skeTables) {
 function getAvailableHeight(curPage, cache, hasRepeatHeader) {
 	const { marginTop, marginBottom, pageHeight } = curPage;
 	let pageContentHeight = pageHeight - marginTop - marginBottom;
-	if (hasRepeatHeader) pageContentHeight -= cache.repeatRowHeight;
+	if (hasRepeatHeader) pageContentHeight -= cache.repeatRowsHeight;
 	return pageContentHeight;
 }
 function dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig, rowNode, row, table, cache, isRepeatRow = false) {
@@ -13225,17 +13299,13 @@ function dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig
 	const rowHeights = [0];
 	for (const cellNode of cellNodes) {
 		const col = cellNodes.indexOf(cellNode);
-		const cellPageSkeletons = createSkeletonCellPages(ctx, viewModel, cellNode, sectionBreakConfig, table, row, col, canRowSplit && !needOpenNewTable ? cache.remainHeight : availableHeight, pageContentHeight);
-		while (rowSkeletons.length < cellPageSkeletons.length) {
-			const rowSkeleton = _getNullTableRowSkeleton(startIndex, endIndex, row, rowSource, isRepeatRow);
-			const colCount = cellNodes.length;
-			rowSkeleton.cells = [...new Array(colCount)].map((_, i) => {
-				const cellSkeleton = createNullCellPage(ctx, sectionBreakConfig, table, row, i).page;
-				cellSkeleton.parent = rowSkeleton;
-				return cellSkeleton;
-			});
-			rowSkeletons.push(rowSkeleton);
+		const cellConfig = rowSource.tableCells[col];
+		if (isCoveredTableCell(cellConfig)) {
+			if (rowSkeletons.length === 0) rowSkeletons.push(createNullRowSkeletonWithCells(ctx, sectionBreakConfig, table, row, startIndex, endIndex, rowSource, isRepeatRow));
+			continue;
 		}
+		const cellPageSkeletons = createSkeletonCellPages(ctx, viewModel, cellNode, sectionBreakConfig, table, row, col, canRowSplit && !needOpenNewTable ? cache.remainHeight : availableHeight, pageContentHeight);
+		while (rowSkeletons.length < cellPageSkeletons.length) rowSkeletons.push(createNullRowSkeletonWithCells(ctx, sectionBreakConfig, table, row, startIndex, endIndex, rowSource, isRepeatRow));
 		while (rowHeights.length < cellPageSkeletons.length) rowHeights.push(0);
 		for (const cellPageSkeleton of cellPageSkeletons) {
 			const { marginTop: cellMarginTop = 0, marginBottom: cellMarginBottom = 0 } = cellPageSkeleton;
@@ -13250,18 +13320,20 @@ function dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig
 	for (const rowSke of rowSkeletons) {
 		const rowIndex = rowSkeletons.indexOf(rowSke);
 		if (hRule === _univerjs_core.TableRowHeightRule.AT_LEAST) rowHeights[rowIndex] = Math.max(rowHeights[rowIndex], val.v);
-		else if (hRule === _univerjs_core.TableRowHeightRule.EXACT) rowHeights[rowIndex] = val.v;
+		else if (hRule === _univerjs_core.TableRowHeightRule.EXACT) rowHeights[rowIndex] = Math.max(rowHeights[rowIndex], val.v);
 		rowHeights[rowIndex] = Math.min(rowHeights[rowIndex], pageContentHeight);
 		let left = 0;
-		for (const cellPageSkeleton of rowSke.cells) {
+		for (let col = 0; col < rowSke.cells.length; col++) {
+			const cellPageSkeleton = rowSke.cells[col];
+			if (cellPageSkeleton == null) continue;
 			cellPageSkeleton.left = left;
 			cellPageSkeleton.pageHeight = rowHeights[rowIndex];
-			left += cellPageSkeleton.pageWidth;
+			if (shouldAdvanceTableCellLeft(table, rowSke.index, col)) left += cellPageSkeleton.pageWidth;
 			cache.tableWidth = Math.max(cache.tableWidth, left);
 		}
 		rowSke.height = rowHeights[rowIndex];
 	}
-	if (row === 0 && cache.repeatRow) cache.repeatRowHeight = rowHeights[rowHeights.length - 1];
+	if (!isRepeatRow && row < cache.repeatRows.length) cache.repeatRowsHeight += rowHeights.reduce((total, height) => total + height, 0);
 	for (const rowSkeleton of rowSkeletons) _verticalAlignInCell(rowSkeleton, rowSource);
 	while (rowSkeletons.length > 0) {
 		const rowSkeleton = rowSkeletons.shift();
@@ -13272,10 +13344,11 @@ function dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig
 			if (curTableSkeleton.rows.length > 0) {
 				curTableSkeleton = getNullTableSkeleton(startIndex, endIndex, table);
 				skeTables.push(curTableSkeleton);
-				if (cache.repeatRow && isRepeatRow === false && row !== 0 && rowSkeleton.index !== lastRow.index) {
-					const FIRST_ROW_INDEX = 0;
+				if (cache.repeatRows.length > 0 && isRepeatRow === false && row >= cache.repeatRows.length && rowSkeleton.index !== lastRow.index) {
 					cache.remainHeight = getAvailableHeight(curPage, cache, false);
-					dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig, cache.repeatRow, FIRST_ROW_INDEX, table, cache, true);
+					cache.repeatRows.forEach((repeatRow, repeatRowIndex) => {
+						dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig, repeatRow, repeatRowIndex, table, cache, true);
+					});
 				}
 			}
 		}
@@ -13288,6 +13361,15 @@ function dealWithTableRow(ctx, curPage, skeTables, viewModel, sectionBreakConfig
 		cache.rowTop += rowSkeleton.height;
 	}
 }
+function getLeadingRepeatHeaderRows(table, rowNodes) {
+	const repeatRows = [];
+	for (let index = 0; index < rowNodes.length; index++) {
+		var _table$tableRows$inde;
+		if (((_table$tableRows$inde = table.tableRows[index]) === null || _table$tableRows$inde === void 0 ? void 0 : _table$tableRows$inde.repeatHeaderRow) !== _univerjs_core.BooleanNumber.TRUE) break;
+		repeatRows.push(rowNodes[index]);
+	}
+	return repeatRows;
+}
 function _verticalAlignInCell(rowSkeleton, rowSource) {
 	for (let i = 0; i < rowSource.tableCells.length; i++) {
 		const cellConfig = rowSource.tableCells[i];
@@ -13312,6 +13394,75 @@ function _verticalAlignInCell(rowSkeleton, rowSource) {
 		cellPageSkeleton.marginTop = marginTop;
 	}
 }
+function createNullRowSkeletonWithCells(ctx, sectionBreakConfig, table, row, startIndex, endIndex, rowSource, isRepeatRow = false) {
+	const rowSkeleton = _getNullTableRowSkeleton(startIndex, endIndex, row, rowSource, isRepeatRow);
+	const colCount = rowSource.tableCells.length;
+	rowSkeleton.cells = Array.from({ length: colCount }, (_, col) => createMergedAwareNullCellPage(ctx, sectionBreakConfig, table, row, col, rowSkeleton));
+	return rowSkeleton;
+}
+function createMergedCoveredCellPage(ctx, sectionBreakConfig, table, row, col, rowSkeleton) {
+	return createMergedAwareNullCellPage(ctx, sectionBreakConfig, table, row, col, rowSkeleton);
+}
+function applyMergedCellSpanHeights(tableSkeleton) {
+	var _tableSkeleton$tableS, _tableSkeleton$tableS2;
+	const tableRows = (_tableSkeleton$tableS = (_tableSkeleton$tableS2 = tableSkeleton.tableSource) === null || _tableSkeleton$tableS2 === void 0 ? void 0 : _tableSkeleton$tableS2.tableRows) !== null && _tableSkeleton$tableS !== void 0 ? _tableSkeleton$tableS : [];
+	if (tableRows.length === 0) return;
+	const skeletonRowsByIndex = new Map(tableSkeleton.rows.map((row) => [row.index, row]));
+	tableRows.forEach((rowSource, rowIndex) => {
+		rowSource.tableCells.forEach((cellConfig, columnIndex) => {
+			var _cellConfig$rowSpan, _cellConfig$columnSpa;
+			const rowSpan = (_cellConfig$rowSpan = cellConfig.rowSpan) !== null && _cellConfig$rowSpan !== void 0 ? _cellConfig$rowSpan : 1;
+			const columnSpan = (_cellConfig$columnSpa = cellConfig.columnSpan) !== null && _cellConfig$columnSpa !== void 0 ? _cellConfig$columnSpa : 1;
+			if (rowSpan <= 1 && columnSpan <= 1) return;
+			const masterRow = skeletonRowsByIndex.get(rowIndex);
+			const masterCell = masterRow === null || masterRow === void 0 ? void 0 : masterRow.cells[columnIndex];
+			if (!masterCell || masterCell.isMergedCellCovered) return;
+			let pageHeight = 0;
+			for (let row = rowIndex; row < rowIndex + rowSpan; row++) {
+				var _skeletonRowsByIndex$, _skeletonRowsByIndex$2;
+				pageHeight += (_skeletonRowsByIndex$ = (_skeletonRowsByIndex$2 = skeletonRowsByIndex.get(row)) === null || _skeletonRowsByIndex$2 === void 0 ? void 0 : _skeletonRowsByIndex$2.height) !== null && _skeletonRowsByIndex$ !== void 0 ? _skeletonRowsByIndex$ : 0;
+			}
+			if (pageHeight > 0) masterCell.pageHeight = pageHeight;
+		});
+	});
+}
+function createMergedAwareNullCellPage(ctx, sectionBreakConfig, table, row, col, rowSkeleton) {
+	const cellSkeleton = createNullCellPage(ctx, sectionBreakConfig, table, row, col).page;
+	cellSkeleton.parent = rowSkeleton;
+	if (isCoveredTableCell(table.tableRows[row].tableCells[col])) Object.assign(cellSkeleton, { isMergedCellCovered: true });
+	return cellSkeleton;
+}
+function shouldAdvanceTableCellLeft(table, row, col) {
+	var _table$tableRows$row;
+	if (!isCoveredTableCell((_table$tableRows$row = table.tableRows[row]) === null || _table$tableRows$row === void 0 ? void 0 : _table$tableRows$row.tableCells[col])) return true;
+	const masterCell = findMergedMasterCell(table, row, col);
+	if (masterCell == null) return true;
+	return masterCell.row !== row;
+}
+function findMergedMasterCell(table, row, col) {
+	for (let rowIndex = 0; rowIndex <= row; rowIndex++) {
+		const rowSource = table.tableRows[rowIndex];
+		if (rowSource == null) continue;
+		for (let columnIndex = 0; columnIndex < rowSource.tableCells.length; columnIndex++) {
+			var _cellConfig$rowSpan2, _cellConfig$columnSpa2;
+			const cellConfig = rowSource.tableCells[columnIndex];
+			if (isCoveredTableCell(cellConfig)) continue;
+			const rowSpan = Math.max(1, (_cellConfig$rowSpan2 = cellConfig.rowSpan) !== null && _cellConfig$rowSpan2 !== void 0 ? _cellConfig$rowSpan2 : 1);
+			const columnSpan = Math.max(1, (_cellConfig$columnSpa2 = cellConfig.columnSpan) !== null && _cellConfig$columnSpa2 !== void 0 ? _cellConfig$columnSpa2 : 1);
+			if (rowSpan <= 1 && columnSpan <= 1) continue;
+			const containsRow = row >= rowIndex && row < rowIndex + rowSpan;
+			const containsColumn = col >= columnIndex && col < columnIndex + columnSpan;
+			if (containsRow && containsColumn) return {
+				row: rowIndex,
+				col: columnIndex
+			};
+		}
+	}
+	return null;
+}
+function isCoveredTableCell(cellConfig) {
+	return (cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.rowSpan) === 0 || (cellConfig === null || cellConfig === void 0 ? void 0 : cellConfig.columnSpan) === 0;
+}
 function _getTableLeft(pageWidth, tableWidth, align, indent = { v: 0 }) {
 	switch (align) {
 		case _univerjs_core.TableAlignmentType.START: return indent.v;
@@ -14417,13 +14568,13 @@ const DEFAULT_PAGE_SIZE = {
 const DEFAULT_MODERN_DOCUMENT_STYLE = {
 	pageNumberStart: 1,
 	pageSize: {
-		width: ptToPixel(595),
+		width: _univerjs_core.MODERN_DOCUMENT_WIDTH[_univerjs_core.ModernDocumentWidthMode.MEDIUM],
 		height: Number.POSITIVE_INFINITY
 	},
-	marginTop: ptToPixel(50),
-	marginBottom: ptToPixel(50),
-	marginRight: ptToPixel(50),
-	marginLeft: ptToPixel(50),
+	marginTop: _univerjs_core.MODERN_DOCUMENT_DEFAULT_MARGIN,
+	marginBottom: _univerjs_core.MODERN_DOCUMENT_DEFAULT_MARGIN,
+	marginRight: _univerjs_core.MODERN_DOCUMENT_DEFAULT_MARGIN,
+	marginLeft: _univerjs_core.MODERN_DOCUMENT_DEFAULT_MARGIN,
 	renderConfig: {
 		vertexAngle: 0,
 		centerAngle: 0,
@@ -14453,8 +14604,13 @@ function prepareSectionBreakConfig(ctx, nodeIndex) {
 	const { documentFlavor } = documentStyle;
 	let sectionBreak = viewModel.getSectionBreak(sectionNode.endIndex) || DEFAULT_SECTION_BREAK;
 	if (documentFlavor === _univerjs_core.DocumentFlavor.MODERN) {
+		var _documentStyle$pageSi, _documentStyle$pageSi2;
+		const modernPageWidth = (_documentStyle$pageSi = (_documentStyle$pageSi2 = documentStyle.pageSize) === null || _documentStyle$pageSi2 === void 0 ? void 0 : _documentStyle$pageSi2.width) !== null && _documentStyle$pageSi !== void 0 ? _documentStyle$pageSi : DEFAULT_MODERN_DOCUMENT_STYLE.pageSize.width;
 		sectionBreak = Object.assign({}, sectionBreak, DEFAULT_MODERN_SECTION_BREAK);
-		documentStyle = Object.assign({}, documentStyle, DEFAULT_MODERN_DOCUMENT_STYLE);
+		documentStyle = Object.assign({}, documentStyle, DEFAULT_MODERN_DOCUMENT_STYLE, { pageSize: {
+			...DEFAULT_MODERN_DOCUMENT_STYLE.pageSize,
+			width: modernPageWidth
+		} });
 	}
 	const { pageNumberStart: global_pageNumberStart = 1, pageSize: global_pageSize = DEFAULT_PAGE_SIZE, pageOrient: global_pageOrient = _univerjs_core.PageOrientType.PORTRAIT, defaultHeaderId: global_defaultHeaderId, defaultFooterId: global_defaultFooterId, evenPageHeaderId: global_evenPageHeaderId, evenPageFooterId: global_evenPageFooterId, firstPageHeaderId: global_firstPageHeaderId, firstPageFooterId: global_firstPageFooterId, useFirstPageHeaderFooter: global_useFirstPageHeaderFooter, evenAndOddHeaders: global_evenAndOddHeaders, marginTop: global_marginTop = 0, marginBottom: global_marginBottom = 0, marginRight: global_marginRight = 0, marginLeft: global_marginLeft = 0, marginHeader: global_marginHeader = 0, marginFooter: global_marginFooter = 0, autoHyphenation = _univerjs_core.BooleanNumber.FALSE, doNotHyphenateCaps = _univerjs_core.BooleanNumber.FALSE, consecutiveHyphenLimit = Number.POSITIVE_INFINITY, hyphenationZone, renderConfig: global_renderConfig = {
 		horizontalAlign: _univerjs_core.HorizontalAlign.LEFT,
@@ -14691,12 +14847,14 @@ function _createSkeletonHeaderFooter(ctx, headerOrFooterViewModel, sectionBreakC
 	return page;
 }
 function createNullCellPage(ctx, sectionBreakConfig, tableConfig, row, col, availableHeight = Number.POSITIVE_INFINITY, maxCellPageHeight = Number.POSITIVE_INFINITY) {
-	var _ref, _cellConfig$margin;
+	var _ref, _cellConfig$margin, _cellConfig$columnSpa;
 	const { lists, footerTreeMap, headerTreeMap, localeService, drawings } = sectionBreakConfig;
 	const { skeletonResourceReference } = ctx;
 	const { cellMargin, tableRows, tableColumns, tableId } = tableConfig;
-	const { start = { v: 10 }, end = { v: 10 }, top = { v: 5 }, bottom = { v: 5 } } = (_ref = (_cellConfig$margin = tableRows[row].tableCells[col].margin) !== null && _cellConfig$margin !== void 0 ? _cellConfig$margin : cellMargin) !== null && _ref !== void 0 ? _ref : {};
-	const pageWidth = tableColumns[col].size.width.v;
+	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 : {};
+	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);
 	const pageHeight = maxCellPageHeight;
 	const cellSectionBreakConfig = {
 		lists,
@@ -14725,6 +14883,7 @@ function createNullCellPage(ctx, sectionBreakConfig, tableConfig, row, col, avai
 	};
 }
 function createSkeletonCellPages(ctx, viewModel, cellNode, sectionBreakConfig, tableConfig, row, col, availableHeight = Number.POSITIVE_INFINITY, maxCellPageHeight = Number.POSITIVE_INFINITY) {
+	var _ctx$dataModel, _ctx$dataModel$getBod;
 	const sectionNode = cellNode.children[0];
 	const { page: areaPage, sectionBreakConfig: cellSectionBreakConfig } = createNullCellPage(ctx, sectionBreakConfig, tableConfig, row, col, availableHeight, maxCellPageHeight);
 	const { pages } = dealWithSection(ctx, viewModel, sectionNode, areaPage, cellSectionBreakConfig);
@@ -14733,9 +14892,36 @@ function createSkeletonCellPages(ctx, viewModel, cellNode, sectionBreakConfig, t
 		p.segmentId = tableConfig.tableId;
 	}
 	updateBlockIndex(pages, cellNode.startIndex);
+	applyTrailingCellBlockRangeSpaceBelow(pages, (_ctx$dataModel = ctx.dataModel) === null || _ctx$dataModel === void 0 || (_ctx$dataModel$getBod = _ctx$dataModel.getBody) === null || _ctx$dataModel$getBod === void 0 ? void 0 : _ctx$dataModel$getBod.call(_ctx$dataModel), cellNode.endIndex);
 	updateInlineDrawingCoordsAndBorder(ctx, pages);
+	expandCellPageHeightForInlineDrawings(pages);
 	return pages;
 }
+function expandCellPageHeightForInlineDrawings(pages) {
+	for (const page of pages) {
+		var _page$skeDrawings;
+		(_page$skeDrawings = page.skeDrawings) === null || _page$skeDrawings === void 0 || _page$skeDrawings.forEach((drawing) => {
+			var _drawing$drawingOrigi, _drawing$aTop, _drawing$height;
+			if (((_drawing$drawingOrigi = drawing.drawingOrigin) === null || _drawing$drawingOrigi === void 0 ? void 0 : _drawing$drawingOrigi.layoutType) !== _univerjs_core.PositionedObjectLayoutType.INLINE) return;
+			const drawingBottom = ((_drawing$aTop = drawing.aTop) !== null && _drawing$aTop !== void 0 ? _drawing$aTop : 0) + ((_drawing$height = drawing.height) !== null && _drawing$height !== void 0 ? _drawing$height : 0);
+			if (drawingBottom > page.height) page.height = drawingBottom;
+		});
+	}
+}
+function applyTrailingCellBlockRangeSpaceBelow(pages, body, cellEndIndex) {
+	const blockRanges = body === null || body === void 0 ? void 0 : body.blockRanges;
+	const trailingBlockRangeSpace = 28;
+	if (!(blockRanges === null || blockRanges === void 0 ? void 0 : blockRanges.length)) return;
+	for (const page of pages) {
+		var _page$sections$at, _body$paragraphs;
+		const lastLine = (_page$sections$at = page.sections.at(-1)) === null || _page$sections$at === void 0 || (_page$sections$at = _page$sections$at.columns.at(-1)) === null || _page$sections$at === void 0 ? void 0 : _page$sections$at.lines.at(-1);
+		if (!lastLine) continue;
+		const paragraphIndex = lastLine.paragraphIndex;
+		if (!blockRanges.some((range) => range.startIndex < paragraphIndex && paragraphIndex < range.endIndex)) continue;
+		if (body === null || body === void 0 || (_body$paragraphs = body.paragraphs) === null || _body$paragraphs === void 0 ? void 0 : _body$paragraphs.some((paragraph) => paragraph.startIndex > paragraphIndex && paragraph.startIndex < cellEndIndex)) continue;
+		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;
@@ -15142,6 +15328,11 @@ 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]
+]);
 function _getListLevelAncestors(bullet, listLevel) {
 	if (!bullet || !listLevel) return;
 	const { listId, nestingLevel } = bullet;
@@ -15168,6 +15359,57 @@ function _updateListLevelAncestors(paragraph, bullet, bulletSkeleton, listLevel)
 	cacheItem.splice(nestingLevel + 1);
 	listLevel === null || listLevel === void 0 || listLevel.set(listId, cacheItem);
 }
+function _withMinSpacing(style, key, value) {
+	var _current$v;
+	const current = style[key];
+	const nextValue = Math.max((_current$v = current === null || current === void 0 ? void 0 : current.v) !== null && _current$v !== void 0 ? _current$v : 0, value);
+	style[key] = {
+		...current,
+		v: nextValue
+	};
+}
+function _getNextAdjacentBlockRange(blockRanges, blockRange) {
+	return blockRanges === null || blockRanges === void 0 ? void 0 : blockRanges.filter((range) => range.startIndex > blockRange.endIndex).sort((left, right) => left.startIndex - right.startIndex)[0];
+}
+function _hasNextAdjacentLayoutBlockRange(blockRanges, blockRange) {
+	const nextBlockRange = _getNextAdjacentBlockRange(blockRanges, blockRange);
+	return nextBlockRange != null && BLOCK_LAYOUT_OUTER_SPACING_MAP.has(nextBlockRange.blockType) && nextBlockRange.startIndex === blockRange.endIndex + 1;
+}
+function _applyDefaultLayoutParagraphStyle(style, hasBlockRange) {
+	if (style.lineSpacing == null) style.lineSpacing = _univerjs_core.DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING;
+	if (hasBlockRange) return;
+	if (style.spaceAbove == null) style.spaceAbove = { v: _univerjs_core.DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE };
+	if (style.spaceBelow == null) style.spaceBelow = { v: _univerjs_core.DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW };
+}
+function _applyBlockRangeLayoutParagraphStyle(body, paragraph, paragraphStyle, shouldApplyDocumentDefaults) {
+	var _body$paragraphs, _BLOCK_LAYOUT_OUTER_S;
+	const style = _univerjs_core.Tools.deepClone(paragraphStyle);
+	const blockRanges = body === null || body === void 0 ? void 0 : body.blockRanges;
+	if (!(blockRanges === null || blockRanges === void 0 ? void 0 : blockRanges.length)) {
+		if (shouldApplyDocumentDefaults) _applyDefaultLayoutParagraphStyle(style, false);
+		return style;
+	}
+	const blockRange = blockRanges.find((range) => BLOCK_LAYOUT_OUTER_SPACING_MAP.has(range.blockType) && paragraph.startIndex > range.startIndex && paragraph.startIndex < range.endIndex);
+	if (!blockRange) {
+		if (shouldApplyDocumentDefaults) _applyDefaultLayoutParagraphStyle(style, false);
+		return style;
+	}
+	_applyDefaultLayoutParagraphStyle(style, true);
+	const blockParagraphs = ((_body$paragraphs = body === null || body === void 0 ? void 0 : body.paragraphs) !== null && _body$paragraphs !== void 0 ? _body$paragraphs : []).filter((item) => item.startIndex > blockRange.startIndex && item.startIndex < blockRange.endIndex).sort((left, right) => left.startIndex - right.startIndex);
+	const firstParagraph = blockParagraphs[0];
+	const lastParagraph = blockParagraphs[blockParagraphs.length - 1];
+	const outerSpacing = (_BLOCK_LAYOUT_OUTER_S = BLOCK_LAYOUT_OUTER_SPACING_MAP.get(blockRange.blockType)) !== null && _BLOCK_LAYOUT_OUTER_S !== void 0 ? _BLOCK_LAYOUT_OUTER_S : 0;
+	if ((firstParagraph === null || firstParagraph === void 0 ? void 0 : firstParagraph.startIndex) === paragraph.startIndex) _withMinSpacing(style, "spaceAbove", outerSpacing);
+	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 _getDrawingSkeletonFormat(drawingOrigin) {
 	const { drawingId } = drawingOrigin;
 	return {
@@ -15190,6 +15432,7 @@ function _getNextPageNumber(lastPage) {
 	return lastPage.pageNumber + 1;
 }
 function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, sectionBreakConfig, tableSkeleton) {
+	var _viewModel$getBody, _viewModel$getBody2;
 	const { skeletonResourceReference } = ctx;
 	const { lists, drawings = {}, localeService } = sectionBreakConfig;
 	const { endIndex, blocks = [], children } = paragraphNode;
@@ -15206,7 +15449,7 @@ function lineBreaking(ctx, viewModel, shapedTextList, curPage, paragraphNode, se
 	}
 	const paragraphConfig = {
 		paragraphIndex: endIndex,
-		paragraphStyle: _univerjs_core.Tools.deepClone(paragraphStyle),
+		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)),
 		paragraphNonInlineSkeDrawings,
 		paragraphInlineSkeDrawings,
 		skeTablesInParagraph: tableSkeleton ? [{
@@ -15766,6 +16009,22 @@ function TibetanHandler(index, charArray, viewModel, paragraphNode, sectionBreak
 		glyphGroup: [createSkeletonWordGlyph(glyph.join(""), config)]
 	};
 }
+function ThaiHandler(index, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraph) {
+	const config = getFontCreateConfig(index, viewModel, paragraphNode, sectionBreakConfig, paragraph);
+	const glyph = [];
+	let step = 0;
+	for (let i = 0; i < charArray.length; i++) {
+		const newChar = charArray[i];
+		if (hasThai(newChar)) {
+			glyph.push(newChar);
+			step++;
+		} else break;
+	}
+	return {
+		step,
+		glyphGroup: [createSkeletonWordGlyph(glyph.join(""), config)]
+	};
+}
 
 //#endregion
 //#region src/components/docs/layout/block/paragraph/shaping.ts
@@ -15911,6 +16170,11 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
 					shapedGlyphs.push(...glyphGroup);
 					i += step;
 					src = src.substring(step);
+				} else if (hasThai(char)) {
+					const { step, glyphGroup } = ThaiHandler(i, src, viewModel, paragraphNode, sectionBreakConfig, paragraph);
+					shapedGlyphs.push(...glyphGroup);
+					i += step;
+					src = src.substring(step);
 				} else {
 					const { step, glyphGroup } = otherHandler(i, src, viewModel, paragraphNode, sectionBreakConfig, paragraph);
 					shapedGlyphs.push(...glyphGroup);
@@ -16766,28 +17030,45 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 			}
 		}
 		let exactMatch = null;
-		if (skeTables.size > 0) for (const table of skeTables.values()) {
-			var _this$_findLiquid, _this$_findLiquid2, _this$_findLiquid9;
-			const { top: tableTop, left: tableLeft, rows } = table;
-			(_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);
-			for (const row of rows) {
-				var _this$_findLiquid3, _this$_findLiquid4, _this$_findLiquid8;
-				const { top: rowTop, cells, isRepeatRow } = row;
-				if (isRepeatRow) continue;
-				(_this$_findLiquid3 = this._findLiquid) === null || _this$_findLiquid3 === void 0 || _this$_findLiquid3.translateSave();
-				(_this$_findLiquid4 = this._findLiquid) === null || _this$_findLiquid4 === void 0 || _this$_findLiquid4.translate(0, rowTop);
-				for (const cell of cells) {
-					var _this$_findLiquid5, _this$_findLiquid6, _exactMatch3, _this$_findLiquid7;
-					const { left: cellLeft } = cell;
+		if (skeTables.size > 0) {
+			var _this$_docViewModel$g, _this$_docViewModel$g2, _this$_docViewModel$g3;
+			const unitId = (_this$_docViewModel$g = (_this$_docViewModel$g2 = (_this$_docViewModel$g3 = this._docViewModel.getDataModel()).getUnitId) === null || _this$_docViewModel$g2 === void 0 ? void 0 : _this$_docViewModel$g2.call(_this$_docViewModel$g3)) !== null && _this$_docViewModel$g !== void 0 ? _this$_docViewModel$g : "";
+			for (const table of skeTables.values()) {
+				var _this$_findLiquid, _this$_findLiquid2, _this$_findLiquid11;
+				const { top: tableTop, left: tableLeft, rows } = table;
+				const sourceTableId = getTableIdAndSliceIndex(table.tableId).tableId;
+				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;
+					const visibleRight = visibleLeft + viewport.viewportWidth;
+					if (x < visibleLeft || x > visibleRight) {
+						var _this$_findLiquid3;
+						(_this$_findLiquid3 = this._findLiquid) === null || _this$_findLiquid3 === void 0 || _this$_findLiquid3.translateRestore();
+						continue;
+					}
+					(_this$_findLiquid4 = this._findLiquid) === null || _this$_findLiquid4 === void 0 || _this$_findLiquid4.translate(-viewport.scrollLeft, 0);
+				}
+				for (const row of rows) {
+					var _this$_findLiquid5, _this$_findLiquid6, _this$_findLiquid10;
+					const { top: rowTop, cells, isRepeatRow } = row;
+					if (isRepeatRow) continue;
 					(_this$_findLiquid5 = this._findLiquid) === null || _this$_findLiquid5 === void 0 || _this$_findLiquid5.translateSave();
-					(_this$_findLiquid6 = this._findLiquid) === null || _this$_findLiquid6 === void 0 || _this$_findLiquid6.translate(cellLeft, 0);
-					exactMatch = (_exactMatch3 = exactMatch) !== null && _exactMatch3 !== void 0 ? _exactMatch3 : this._collectNearestNode(cell, 3, cell, segmentId, pi, cache, x, y, pageLength, nestLevel + 1);
-					(_this$_findLiquid7 = this._findLiquid) === null || _this$_findLiquid7 === void 0 || _this$_findLiquid7.translateRestore();
+					(_this$_findLiquid6 = this._findLiquid) === null || _this$_findLiquid6 === void 0 || _this$_findLiquid6.translate(0, rowTop);
+					for (const cell of cells) {
+						var _this$_findLiquid7, _this$_findLiquid8, _exactMatch3, _this$_findLiquid9;
+						const { left: cellLeft } = cell;
+						(_this$_findLiquid7 = this._findLiquid) === null || _this$_findLiquid7 === void 0 || _this$_findLiquid7.translateSave();
+						(_this$_findLiquid8 = this._findLiquid) === null || _this$_findLiquid8 === void 0 || _this$_findLiquid8.translate(cellLeft, 0);
+						exactMatch = (_exactMatch3 = exactMatch) !== null && _exactMatch3 !== void 0 ? _exactMatch3 : this._collectNearestNode(cell, 3, cell, segmentId, pi, cache, x, y, pageLength, nestLevel + 1);
+						(_this$_findLiquid9 = this._findLiquid) === null || _this$_findLiquid9 === void 0 || _this$_findLiquid9.translateRestore();
+					}
+					(_this$_findLiquid10 = this._findLiquid) === null || _this$_findLiquid10 === void 0 || _this$_findLiquid10.translateRestore();
 				}
-				(_this$_findLiquid8 = this._findLiquid) === null || _this$_findLiquid8 === void 0 || _this$_findLiquid8.translateRestore();
+				(_this$_findLiquid11 = this._findLiquid) === null || _this$_findLiquid11 === void 0 || _this$_findLiquid11.translateRestore();
 			}
-			(_this$_findLiquid9 = this._findLiquid) === null || _this$_findLiquid9 === void 0 || _this$_findLiquid9.translateRestore();
 		}
 		if (exactMatch) {
 			this._findLiquid.translateRestore();
@@ -17072,10 +17353,12 @@ function createDocumentModelWithStyle(content, textStyle, config = {}) {
 				width: Number.POSITIVE_INFINITY,
 				height: Number.POSITIVE_INFINITY
 			},
+			documentFlavor: _univerjs_core.DocumentFlavor.UNSPECIFIED,
 			marginTop,
 			marginBottom,
 			marginRight,
 			marginLeft,
+			paragraphLineGapDefault: 0,
 			renderConfig: {
 				horizontalAlign,
 				verticalAlign,
@@ -18974,8 +19257,9 @@ var SpreadsheetRowHeader = class extends SpreadsheetHeader {
 		const segment = spreadsheetSkeleton.rowColumnSegment;
 		if (!segment) return;
 		if (segment.startRow === -1 && segment.endRow === -1) return;
-		const { columnHeaderHeight } = spreadsheetSkeleton;
-		ctx.translateWithPrecision(0, columnHeaderHeight);
+		const { columnHeaderHeightAndMarginTop, rowHeaderWidth, rowHeaderWidthAndMarginLeft } = spreadsheetSkeleton;
+		const marginLeft = rowHeaderWidthAndMarginLeft - rowHeaderWidth;
+		ctx.translateWithPrecision(marginLeft, columnHeaderHeightAndMarginTop);
 		const extensions = this.getExtensionsByOrder();
 		for (const extension of extensions) extension.draw(ctx, parentScale, spreadsheetSkeleton);
 	}
@@ -18983,8 +19267,9 @@ var SpreadsheetRowHeader = class extends SpreadsheetHeader {
 		const oCoord = this.getInverseCoord(coord);
 		const skeleton = this.getSkeleton();
 		if (!skeleton) return false;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
-		if (oCoord.x >= 0 && oCoord.x <= rowHeaderWidth && oCoord.y > columnHeaderHeight) return true;
+		const { rowHeaderWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = skeleton;
+		const marginLeft = rowHeaderWidthAndMarginLeft - rowHeaderWidth;
+		if (oCoord.x >= marginLeft && oCoord.x <= rowHeaderWidthAndMarginLeft && oCoord.y > columnHeaderHeightAndMarginTop) return true;
 		return false;
 	}
 	_initialDefaultExtension() {
@@ -21539,7 +21824,8 @@ DocumentsSpanAndLineExtensionRegistry.add(new Line());
 
 //#endregion
 //#region src/components/docs/document.ts
-const DEFAULT_BORDER_COLOR = { color: { rgb: "#dee0e3" } };
+const DEFAULT_BORDER_COLOR = { color: { rgb: "#c7c9cc" } };
+const TABLE_VIEWPORT_BORDER_CLIP_PADDING = 2;
 var Documents = class Documents extends DocComponent {
 	constructor(oKey, documentSkeleton, config) {
 		super(oKey, documentSkeleton, config);
@@ -21722,29 +22008,62 @@ var Documents = class Documents extends DocComponent {
 		}
 	}
 	_drawTable(ctx, page, skeTables, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale) {
-		for (const [_tableId, tableSkeleton] of skeTables) {
-			var _this$_drawLiquid, _this$_drawLiquid2, _this$_drawLiquid9;
+		const drawLiquid = this._drawLiquid;
+		if (drawLiquid == null) return;
+		const renderUnitId = this._getRenderUnitId();
+		for (const [tableId, tableSkeleton] of skeTables) {
 			const { top: tableTop, left: tableLeft, rows } = tableSkeleton;
-			(_this$_drawLiquid = this._drawLiquid) === null || _this$_drawLiquid === void 0 || _this$_drawLiquid.translateSave();
-			(_this$_drawLiquid2 = this._drawLiquid) === null || _this$_drawLiquid2 === void 0 || _this$_drawLiquid2.translate(tableLeft, tableTop);
+			const sourceTableId = getTableIdAndSliceIndex(tableId).tableId;
+			const viewport = this._getTableViewport(page, tableSkeleton, renderUnitId, sourceTableId);
+			drawLiquid.translateSave();
+			drawLiquid.translate(tableLeft, tableTop);
+			if (viewport && viewport.contentWidth > viewport.viewportWidth) {
+				const { x, y } = drawLiquid;
+				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.closePath();
+				ctx.clip();
+				drawLiquid.translate(-viewport.scrollLeft, 0);
+			}
 			for (const row of rows) {
-				var _this$_drawLiquid3, _this$_drawLiquid4, _this$_drawLiquid8;
 				const { top: rowTop, cells } = row;
-				(_this$_drawLiquid3 = this._drawLiquid) === null || _this$_drawLiquid3 === void 0 || _this$_drawLiquid3.translateSave();
-				(_this$_drawLiquid4 = this._drawLiquid) === null || _this$_drawLiquid4 === void 0 || _this$_drawLiquid4.translate(0, rowTop);
+				drawLiquid.translateSave();
+				drawLiquid.translate(0, rowTop);
 				for (const cell of cells) {
-					var _this$_drawLiquid5, _this$_drawLiquid6, _this$_drawLiquid7;
+					if (cell.isMergedCellCovered) continue;
 					const { left: cellLeft } = cell;
-					(_this$_drawLiquid5 = this._drawLiquid) === null || _this$_drawLiquid5 === void 0 || _this$_drawLiquid5.translateSave();
-					(_this$_drawLiquid6 = this._drawLiquid) === null || _this$_drawLiquid6 === void 0 || _this$_drawLiquid6.translate(cellLeft, 0);
+					drawLiquid.translateSave();
+					drawLiquid.translate(cellLeft, 0);
 					this._drawTableCell(ctx, page, cell, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale);
-					(_this$_drawLiquid7 = this._drawLiquid) === null || _this$_drawLiquid7 === void 0 || _this$_drawLiquid7.translateRestore();
+					drawLiquid.translateRestore();
 				}
-				(_this$_drawLiquid8 = this._drawLiquid) === null || _this$_drawLiquid8 === void 0 || _this$_drawLiquid8.translateRestore();
+				drawLiquid.translateRestore();
 			}
-			(_this$_drawLiquid9 = this._drawLiquid) === null || _this$_drawLiquid9 === void 0 || _this$_drawLiquid9.translateRestore();
+			if (viewport && viewport.contentWidth > viewport.viewportWidth) ctx.restore();
+			drawLiquid.translateRestore();
 		}
 	}
+	_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);
+		if (viewportWidth <= 0 || tableSkeleton.width <= viewportWidth) return null;
+		return {
+			contentWidth: tableSkeleton.width,
+			scrollLeft: 0,
+			viewportWidth
+		};
+	}
+	_getRenderUnitId() {
+		var _skeleton$getViewMode, _viewModel$getDataMod, _dataModel$getUnitId, _dataModel$getUnitId2;
+		const skeleton = this.getSkeleton();
+		const viewModel = skeleton === null || skeleton === void 0 || (_skeleton$getViewMode = skeleton.getViewModel) === null || _skeleton$getViewMode === void 0 ? void 0 : _skeleton$getViewMode.call(skeleton);
+		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;
+	}
 	_drawBorderBottom(ctx, page, line, left = 0, top = 0) {
 		var _line$borderBottom$pa, _line$borderBottom, _line$borderBottom$co, _line$borderBottom2;
 		if (this._drawLiquid == null) return;
@@ -21854,60 +22173,68 @@ var Documents = class Documents extends DocComponent {
 		ctx.restore();
 	}
 	_drawTableCellBordersAndBg(ctx, page, cell) {
-		var _borderLeft$color$rgb, _borderTop$color$rgb, _borderRight$color$rg, _borderBottom$color$r;
+		var _rowSke$index, _cellSource$backgroun;
 		const { marginLeft, marginTop } = page;
 		const { pageWidth, pageHeight } = cell;
 		const rowSke = cell.parent;
 		const index = rowSke.cells.indexOf(cell);
-		const { borderTop = DEFAULT_BORDER_COLOR, borderBottom = DEFAULT_BORDER_COLOR, borderLeft = DEFAULT_BORDER_COLOR, borderRight = DEFAULT_BORDER_COLOR, backgroundColor } = rowSke.rowSource.tableCells[index];
+		if (index < 0) return;
+		const cellSource = rowSke.rowSource.tableCells[index];
+		const tableSke = rowSke.parent;
+		const rowIndexInTable = tableSke === null || tableSke === void 0 ? void 0 : tableSke.rows.indexOf(rowSke);
+		const rowIndex = rowIndexInTable == null || rowIndexInTable < 0 ? (_rowSke$index = rowSke.index) !== null && _rowSke$index !== void 0 ? _rowSke$index : 0 : rowIndexInTable;
+		if (!cellSource || cellSource.rowSpan === 0 || cellSource.columnSpan === 0) return;
 		if (this._drawLiquid == null) return;
 		let { x, y } = this._drawLiquid;
 		x += marginLeft;
 		y += marginTop;
-		if (backgroundColor && backgroundColor.rgb) {
+		if ((_cellSource$backgroun = cellSource.backgroundColor) === null || _cellSource$backgroun === void 0 ? void 0 : _cellSource$backgroun.rgb) {
 			ctx.save();
-			ctx.fillStyle = backgroundColor.rgb;
+			ctx.fillStyle = cellSource.backgroundColor.rgb;
 			ctx.fillRectByPrecision(x, y, pageWidth, pageHeight);
 			ctx.restore();
 		}
-		ctx.save();
-		ctx.setLineWidthByPrecision(1);
-		ctx.save();
-		ctx.strokeStyle = (_borderLeft$color$rgb = borderLeft.color.rgb) !== null && _borderLeft$color$rgb !== void 0 ? _borderLeft$color$rgb : DEFAULT_BORDER_COLOR.color.rgb;
-		drawLineByBorderType(ctx, "l", 0, {
-			startX: x,
-			startY: y,
-			endX: x + pageWidth,
-			endY: y + pageHeight
-		});
-		ctx.restore();
-		ctx.save();
-		ctx.strokeStyle = (_borderTop$color$rgb = borderTop.color.rgb) !== null && _borderTop$color$rgb !== void 0 ? _borderTop$color$rgb : DEFAULT_BORDER_COLOR.color.rgb;
-		drawLineByBorderType(ctx, "t", 0, {
-			startX: x,
-			startY: y,
-			endX: x + pageWidth,
-			endY: y + pageHeight
-		});
-		ctx.restore();
-		ctx.save();
-		ctx.strokeStyle = (_borderRight$color$rg = borderRight.color.rgb) !== null && _borderRight$color$rg !== void 0 ? _borderRight$color$rg : DEFAULT_BORDER_COLOR.color.rgb;
-		drawLineByBorderType(ctx, "r", 0, {
+		const position = {
 			startX: x,
 			startY: y,
 			endX: x + pageWidth,
 			endY: y + pageHeight
-		});
-		ctx.restore();
+		};
+		const rightCellSource = this._getTableCellSource(rowSke, index + 1);
+		const bottomCellSource = tableSke ? this._getTableCellSource(tableSke.rows[rowIndex + 1], index) : void 0;
+		this._drawTableCellBorder(ctx, this._resolveTableCellBorder(cellSource.borderRight, rightCellSource === null || rightCellSource === void 0 ? void 0 : rightCellSource.borderLeft), "r", position);
+		this._drawTableCellBorder(ctx, this._resolveTableCellBorder(cellSource.borderBottom, bottomCellSource === null || bottomCellSource === void 0 ? void 0 : bottomCellSource.borderTop), "b", position);
+		if (rowIndex <= 0) this._drawTableCellBorder(ctx, this._resolveTableCellBorder(cellSource.borderTop), "t", position);
+		if (index <= 0) this._drawTableCellBorder(ctx, this._resolveTableCellBorder(cellSource.borderLeft), "l", position);
+	}
+	_getTableCellSource(row, column) {
+		var _row$rowSource$tableC;
+		return (_row$rowSource$tableC = row === null || row === void 0 ? void 0 : row.rowSource.tableCells[column]) !== null && _row$rowSource$tableC !== void 0 ? _row$rowSource$tableC : null;
+	}
+	_resolveTableCellBorder(primary, secondary) {
+		if (this._isDrawableTableCellBorder(primary)) return primary;
+		if (this._isDrawableTableCellBorder(secondary)) return secondary;
+		if (primary || secondary) return null;
+		return DEFAULT_BORDER_COLOR;
+	}
+	_isDrawableTableCellBorder(border) {
+		var _border$width$v, _border$width, _border$color$rgb, _border$color;
+		if (!border) return false;
+		const lineWidth = (_border$width$v = (_border$width = border.width) === null || _border$width === void 0 ? void 0 : _border$width.v) !== null && _border$width$v !== void 0 ? _border$width$v : 1;
+		const color = (_border$color$rgb = (_border$color = border.color) === null || _border$color === void 0 ? void 0 : _border$color.rgb) !== null && _border$color$rgb !== void 0 ? _border$color$rgb : DEFAULT_BORDER_COLOR.color.rgb;
+		return lineWidth > 0 && color !== "transparent";
+	}
+	_drawTableCellBorder(ctx, border, type, position) {
+		var _border$width$v2, _border$width2, _border$color$rgb2, _border$color2;
+		if (!border) return;
+		const lineWidth = (_border$width$v2 = (_border$width2 = border.width) === null || _border$width2 === void 0 ? void 0 : _border$width2.v) !== null && _border$width$v2 !== void 0 ? _border$width$v2 : 1;
+		const color = (_border$color$rgb2 = (_border$color2 = border.color) === null || _border$color2 === void 0 ? void 0 : _border$color2.rgb) !== null && _border$color$rgb2 !== void 0 ? _border$color$rgb2 : DEFAULT_BORDER_COLOR.color.rgb;
+		if (lineWidth <= 0 || color === "transparent") return;
 		ctx.save();
-		ctx.strokeStyle = (_borderBottom$color$r = borderBottom.color.rgb) !== null && _borderBottom$color$r !== void 0 ? _borderBottom$color$r : DEFAULT_BORDER_COLOR.color.rgb;
-		drawLineByBorderType(ctx, "b", 0, {
-			startX: x,
-			startY: y,
-			endX: x + pageWidth,
-			endY: y + pageHeight
-		});
-		ctx.restore();
+		ctx.setLineWidthByPrecision(lineWidth);
+		setTableCellBorderDash(ctx, border.dashStyle);
+		ctx.strokeStyle = color;
+		drawLineByBorderType(ctx, type, 0, position);
 		ctx.restore();
 	}
 	_drawHeaderFooter(page, ctx, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale, parentPage, isHeader = true) {
@@ -22038,6 +22365,17 @@ var Documents = class Documents extends DocComponent {
 		});
 	}
 };
+function setTableCellBorderDash(ctx, dashStyle) {
+	if (dashStyle === _univerjs_core.DashStyleType.DOT) {
+		ctx.setLineDash([2]);
+		return;
+	}
+	if (dashStyle === _univerjs_core.DashStyleType.DASH) {
+		ctx.setLineDash([6]);
+		return;
+	}
+	ctx.setLineDash([0]);
+}
 
 //#endregion
 //#region src/components/sheets/spreadsheet.ts
@@ -22144,8 +22482,8 @@ var Spreadsheet = class extends SheetComponent {
 		const oCoord = this.getInverseCoord(coord);
 		const skeleton = this.getSkeleton();
 		if (!skeleton) return false;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
-		if (oCoord.x > rowHeaderWidth && oCoord.y > columnHeaderHeight) return true;
+		const { rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = skeleton;
+		if (oCoord.x > rowHeaderWidthAndMarginLeft && oCoord.y > columnHeaderHeightAndMarginTop) return true;
 		return false;
 	}
 	getNoMergeCellPositionByIndex(rowIndex, columnIndex) {
@@ -22213,7 +22551,7 @@ var Spreadsheet = class extends SheetComponent {
 	}
 	renderByViewports(mainCtx, viewportInfo, spreadsheetSkeleton) {
 		const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportInfo;
-		const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
+		const { rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = spreadsheetSkeleton;
 		const { a: scaleX = 1, d: scaleY = 1 } = mainCtx.getTransform();
 		const bufferEdgeSizeX = bufferEdgeX * scaleX / window.devicePixelRatio;
 		const bufferEdgeSizeY = bufferEdgeY * scaleY / window.devicePixelRatio;
@@ -22221,8 +22559,10 @@ var Spreadsheet = class extends SheetComponent {
 		cacheCtx.save();
 		const isForceDirty = isViewportForceDirty || this.isForceDirty();
 		const isDirty = isViewportDirty || this.isDirty();
-		if (diffBounds.length === 0 || diffX === 0 && diffY === 0 || isForceDirty || isDirty) {
-			if (isDirty || isForceDirty) {
+		const isScrollJumpOutsideCache = Math.abs(diffX) * scaleX >= cacheCanvas.getWidth() || Math.abs(diffY) * scaleY >= cacheCanvas.getHeight();
+		const shouldRefreshCache = isDirty || isForceDirty || isScrollJumpOutsideCache;
+		if (diffBounds.length === 0 || diffX === 0 && diffY === 0 || shouldRefreshCache) {
+			if (shouldRefreshCache) {
 				this.addRenderTagToScene("scrolling", false);
 				this.refreshCacheCanvas(viewportInfo, {
 					cacheCanvas,
@@ -22246,20 +22586,20 @@ var Spreadsheet = class extends SheetComponent {
 				bufferEdgeY,
 				scaleX,
 				scaleY,
-				columnHeaderHeight,
-				rowHeaderWidth
+				columnHeaderHeightAndMarginTop,
+				rowHeaderWidthAndMarginLeft
 			});
 		}
 		const sourceLeft = bufferEdgeSizeX * Math.min(1, window.devicePixelRatio);
 		const sourceTop = bufferEdgeSizeY * Math.min(1, window.devicePixelRatio);
 		const { left, top, right, bottom } = viewPortPosition;
-		const dw = right - left + rowHeaderWidth;
-		const dh = bottom - top + columnHeaderHeight;
+		const dw = right - left + rowHeaderWidthAndMarginLeft;
+		const dh = bottom - top + columnHeaderHeightAndMarginTop;
 		this._applyCache(cacheCanvas, mainCtx, sourceLeft, sourceTop, dw, dh, left, top, dw, dh);
 		cacheCtx.restore();
 	}
 	paintNewAreaForScrolling(viewportInfo, param) {
-		const { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY, scaleX, scaleY, columnHeaderHeight, rowHeaderWidth } = param;
+		const { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY, scaleX, scaleY, columnHeaderHeightAndMarginTop, rowHeaderWidthAndMarginLeft } = param;
 		const { shouldCacheUpdate, diffCacheBounds, diffX, diffY } = viewportInfo;
 		cacheCtx.save();
 		cacheCtx.setTransform(1, 0, 0, 1, 0, 0);
@@ -22272,8 +22612,8 @@ var Spreadsheet = class extends SheetComponent {
 		cacheCtx.translateWithPrecision(m.e / m.a - leftOrigin + bufferEdgeX, m.f / m.d - topOrigin + bufferEdgeY);
 		if (shouldCacheUpdate) for (const diffBound of diffCacheBounds) {
 			const { left: diffLeft, right: diffRight, bottom: diffBottom, top: diffTop } = diffBound;
-			const x = diffLeft - rowHeaderWidth;
-			const y = diffTop - columnHeaderHeight;
+			const x = diffLeft - rowHeaderWidthAndMarginLeft;
+			const y = diffTop - columnHeaderHeightAndMarginTop;
 			const w = diffRight - diffLeft;
 			const h = diffBottom - diffTop;
 			cacheCtx.clearRectByPrecision(x, y, w, h);
@@ -22319,9 +22659,9 @@ var Spreadsheet = class extends SheetComponent {
 		if (!segment) return;
 		if (segment.startRow === -1 && segment.endRow === -1 || segment.startColumn === -1 && segment.endColumn === -1) return;
 		mainCtx.save();
-		const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
-		mainCtx.translateWithPrecision(rowHeaderWidth, columnHeaderHeight);
-		(_this$getScene = this.getScene()) === null || _this$getScene === void 0 || _this$getScene.updateTransformerZero(spreadsheetSkeleton.rowHeaderWidth, spreadsheetSkeleton.columnHeaderHeight);
+		const { rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop } = spreadsheetSkeleton;
+		mainCtx.translateWithPrecision(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
+		(_this$getScene = this.getScene()) === null || _this$getScene === void 0 || _this$getScene.updateTransformerZero(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
 		const { viewportKey } = viewportInfo;
 		if (sheetContentViewportKeys.includes(viewportKey)) if (viewportInfo && viewportInfo.cacheCanvas) this.renderByViewports(mainCtx, viewportInfo, spreadsheetSkeleton);
 		else this._draw(mainCtx, viewportInfo);
@@ -23238,29 +23578,49 @@ var Slide = class extends SceneViewer {
 //#region src/components/docs/doc-background.ts
 const PAGE_STROKE_COLOR = "rgba(198, 198, 198, 1)";
 const PAGE_FILL_COLOR = "rgba(255, 255, 255, 1)";
+const DOCS_WORKSPACE_FILL_COLOR = "#fafafa";
 const MARGIN_STROKE_COLOR = "rgba(158, 158, 158, 1)";
 var DocBackground = class DocBackground extends DocComponent {
 	constructor(oKey, documentSkeleton, config) {
 		super(oKey, documentSkeleton, config);
 		_defineProperty(this, "_drawLiquid", void 0);
+		_defineProperty(this, "_backgroundFillColor", void 0);
+		_defineProperty(this, "_pageFillColor", void 0);
+		_defineProperty(this, "_pageStrokeColor", void 0);
+		_defineProperty(this, "_marginStrokeColor", 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;
+		this._pageStrokeColor = config === null || config === void 0 ? void 0 : config.pageStrokeColor;
+		this._marginStrokeColor = config === null || config === void 0 ? void 0 : config.marginStrokeColor;
 		this.makeDirty(true);
 	}
 	static create(oKey, documentSkeleton, config) {
 		return new DocBackground(oKey, documentSkeleton, config);
 	}
+	setFillColors(backgroundFillColor, pageFillColor, pageStrokeColor, marginStrokeColor) {
+		if (this._backgroundFillColor === backgroundFillColor && this._pageFillColor === pageFillColor && this._pageStrokeColor === pageStrokeColor && this._marginStrokeColor === marginStrokeColor) return;
+		this._backgroundFillColor = backgroundFillColor;
+		this._pageFillColor = pageFillColor;
+		this._pageStrokeColor = pageStrokeColor;
+		this._marginStrokeColor = marginStrokeColor;
+		this.makeDirty(true);
+	}
 	draw(ctx, bounds) {
-		var _this$getSkeleton, _this$getSkeleton2;
+		var _this$getSkeleton, _this$getSkeleton2, _this$_backgroundFill;
 		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;
-		if (documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL) return;
+		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;
 		this._drawLiquid.reset();
 		const { pages } = skeletonData;
 		let pageTop = 0;
 		let pageLeft = 0;
 		for (let i = 0, len = pages.length; i < len; i++) {
+			var _this$_pageStrokeColo, _this$_pageFillColor, _this$_marginStrokeCo;
 			const page = pages[i];
 			if (this.isSkipByDiffBounds(page, pageTop, pageLeft, bounds)) {
 				const { x, y } = this._drawLiquid.translatePage(page, this.pageLayoutType, this.pageMarginLeft, this.pageMarginTop);
@@ -23275,8 +23635,8 @@ var DocBackground = class DocBackground extends DocComponent {
 				width: pageWidth !== null && pageWidth !== void 0 ? pageWidth : width,
 				height: pageHeight !== null && pageHeight !== void 0 ? pageHeight : height,
 				strokeWidth: 1,
-				stroke: PAGE_STROKE_COLOR,
-				fill: PAGE_FILL_COLOR,
+				stroke: (_this$_pageStrokeColo = this._pageStrokeColor) !== null && _this$_pageStrokeColo !== void 0 ? _this$_pageStrokeColo : PAGE_STROKE_COLOR,
+				fill: (_this$_pageFillColor = this._pageFillColor) !== null && _this$_pageFillColor !== void 0 ? _this$_pageFillColor : PAGE_FILL_COLOR,
 				zIndex: 3
 			};
 			Rect.drawWith(ctx, backgroundOptions);
@@ -23333,7 +23693,7 @@ var DocBackground = class DocBackground extends DocComponent {
 					}
 				],
 				strokeWidth: 1.5,
-				stroke: MARGIN_STROKE_COLOR
+				stroke: (_this$_marginStrokeCo = this._marginStrokeColor) !== null && _this$_marginStrokeCo !== void 0 ? _this$_marginStrokeCo : MARGIN_STROKE_COLOR
 			};
 			Path.drawWith(ctx, marginIdentification);
 			ctx.restore();
@@ -23342,6 +23702,24 @@ var DocBackground = class DocBackground extends DocComponent {
 			pageTop += y;
 		}
 	}
+	_drawWorkspaceBackground(ctx, fill, bounds) {
+		var _bounds$cacheBound, _visibleBound$left, _visibleBound$top;
+		const visibleBound = (_bounds$cacheBound = bounds === null || bounds === void 0 ? void 0 : bounds.cacheBound) !== null && _bounds$cacheBound !== void 0 ? _bounds$cacheBound : bounds === null || bounds === void 0 ? void 0 : bounds.viewBound;
+		const left = (_visibleBound$left = visibleBound === null || visibleBound === void 0 ? void 0 : visibleBound.left) !== null && _visibleBound$left !== void 0 ? _visibleBound$left : 0;
+		const top = (_visibleBound$top = visibleBound === null || visibleBound === void 0 ? void 0 : visibleBound.top) !== null && _visibleBound$top !== void 0 ? _visibleBound$top : 0;
+		const width = visibleBound == null ? this.width : visibleBound.right - visibleBound.left;
+		const height = visibleBound == null ? this.height : visibleBound.bottom - visibleBound.top;
+		if (width <= 0 || height <= 0) return;
+		ctx.save();
+		ctx.translate(left, top);
+		Rect.drawWith(ctx, {
+			width,
+			height,
+			fill,
+			zIndex: 0
+		});
+		ctx.restore();
+	}
 	changeSkeleton(newSkeleton) {
 		this.setSkeleton(newSkeleton);
 		return this;
@@ -24458,14 +24836,13 @@ let Engine = class Engine extends _univerjs_core.Disposable {
 	}
 	_getPassive() {
 		let passiveSupported = false;
-		const noop = () => {};
 		try {
 			const options = { passive: { get() {
 				passiveSupported = true;
 			} } };
 			const canvasEle = this.getCanvasElement();
-			canvasEle.addEventListener("test", noop, options);
-			canvasEle.removeEventListener("test", noop, options);
+			canvasEle.addEventListener("test", _univerjs_core.noop, options);
+			canvasEle.removeEventListener("test", _univerjs_core.noop, options);
 		} catch (e) {}
 		return passiveSupported;
 	}
@@ -24492,7 +24869,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "0.23.0";
+var version = "0.24.0-insiders.20260528-29f582d";
 
 //#endregion
 //#region src/config/config.ts
@@ -27576,6 +27953,7 @@ function subtractViewportRange(range1, range2) {
 //#endregion
 //#region src/viewport.ts
 const MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR = 3;
+const WHEEL_CROSS_AXIS_LOCK_RATIO = 2;
 var Viewport = class {
 	constructor(viewportKey, scene, props) {
 		var _this$scene$getEngine;
@@ -28219,11 +28597,22 @@ var Viewport = class {
 		let offsetX = 0;
 		let offsetY = 0;
 		const allWidth = this._scene.width;
-		offsetX = (this.width || 1) / allWidth * evt.deltaX;
+		const viewWidth = this.width || 1;
+		const scaleX = Math.abs(this._scene.scaleX) || 1;
+		const scaleY = Math.abs(this._scene.scaleY) || 1;
+		const rawOffsetX = evt.deltaX / scaleX;
+		const rawOffsetY = evt.deltaY / scaleY;
+		offsetX = viewWidth / allWidth * rawOffsetX;
 		const allHeight = this._scene.height;
 		const viewHeight = this.height || 1;
-		if (evt.shiftKey) offsetX = viewHeight / allHeight * evt.deltaY * MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR;
-		else offsetY = viewHeight / allHeight * evt.deltaY;
+		if (evt.shiftKey) offsetX = viewHeight / allHeight * evt.deltaY * MOUSE_WHEEL_SPEED_SMOOTHING_FACTOR / scaleX;
+		else {
+			offsetY = viewHeight / allHeight * rawOffsetY;
+			const absOffsetX = Math.abs(rawOffsetX);
+			const absOffsetY = Math.abs(rawOffsetY);
+			if (absOffsetY >= absOffsetX * WHEEL_CROSS_AXIS_LOCK_RATIO) offsetX = 0;
+			else if (absOffsetX >= absOffsetY * WHEEL_CROSS_AXIS_LOCK_RATIO) offsetY = 0;
+		}
 		const isLimitedStore = this.scrollByBarDeltaValue({
 			x: offsetX,
 			y: offsetY
@@ -28550,6 +28939,7 @@ var Viewport = class {
 	}
 	_calcDiffCacheBound(prevBound, currBound) {
 		if (!prevBound) return [currBound];
+		if (prevBound.right <= currBound.left || currBound.right <= prevBound.left || prevBound.bottom <= currBound.top || currBound.bottom <= prevBound.top) return [currBound];
 		const additionalAreas = [];
 		if (currBound.left < prevBound.left) additionalAreas.push({
 			top: currBound.top,
@@ -28806,6 +29196,7 @@ exports.getCurrentTypeOfRenderer = getCurrentTypeOfRenderer;
 exports.getDPI = getDPI;
 exports.getDevicePixelRatio = getDevicePixelRatio;
 exports.getDocsSkeletonPageSize = getDocsSkeletonPageSize;
+exports.getDocsTableRenderViewport = getDocsTableRenderViewport;
 exports.getDrawingGroupState = getDrawingGroupState;
 exports.getFirstGrapheme = getFirstGrapheme;
 exports.getFontStyleString = getFontStyleString;
@@ -28815,6 +29206,7 @@ exports.getLastLine = getLastLine;
 exports.getLineOffset = getLineOffset;
 exports.getLineWidth = getLineWidth;
 exports.getLineWith = getLineWith;
+exports.getNextWheelZoomRatio = getNextWheelZoomRatio;
 exports.getNumberUnitValue = getNumberUnitValue;
 exports.getOffsetRectForDom = getOffsetRectForDom;
 exports.getPageFromPath = getPageFromPath;
@@ -28842,6 +29234,7 @@ exports.hasLatinExtendedB = hasLatinExtendedB;
 exports.hasLatinOneSupplement = hasLatinOneSupplement;
 exports.hasListGlyph = hasListGlyph;
 exports.hasSpace = hasSpace;
+exports.hasThai = hasThai;
 exports.hasTibetan = hasTibetan;
 exports.hasUnMergedCellInRow = hasUnMergedCellInRow;
 exports.inViewRanges = inViewRanges;
@@ -28880,6 +29273,7 @@ exports.renderTextWatermark = renderTextWatermark;
 exports.renderUserInfoWatermark = renderUserInfoWatermark;
 exports.renderWatermark = renderWatermark;
 exports.requestNewFrame = requestNewFrame;
+exports.setDocsTableRenderViewportProvider = setDocsTableRenderViewportProvider;
 exports.setLineType = setLineType;
 exports.sheetContentViewportKeys = sheetContentViewportKeys;
 exports.sheetHeaderViewportKeys = sheetHeaderViewportKeys;