@univerjs/docs-ui 1.0.0-alpha.7 → 1.0.0-alpha.8

package/lib/cjs/index.js

@@ -55,23 +55,8 @@ function neoGetDocObject(renderContext) {
 		engine
 	};
 }
-/** @deprecated After migrating to `RenderUnit`, use `neoGetDocObject` instead. */
-function getDocObject(univerInstanceService, renderManagerService) {
-	const documentModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
-	if (!documentModel) return null;
-	const unitId = documentModel.getUnitId();
-	const currentRender = renderManagerService.getRenderById(unitId);
-	if (currentRender == null) return;
-	const { mainComponent, scene, engine, components } = currentRender;
-	return {
-		document: mainComponent,
-		docBackground: components.get("__Document_Render_Background__"),
-		scene,
-		engine
-	};
-}
 function getDocObjectById(unitId, renderManagerService) {
-	const currentRender = renderManagerService.getRenderById(unitId);
+	const currentRender = renderManagerService.getRenderUnitById(unitId);
 	if (currentRender == null) return;
 	const { mainComponent, scene, engine, components } = currentRender;
 	return {
@@ -149,6 +134,29 @@ function deleteCustomDecorationFactory(accessor, params) {
 	return doMutation;
 }
 
+//#endregion
+//#region src/basics/doc-custom-range-chrome.ts
+const DOC_CUSTOM_RANGE_CHROME_RADIUS = 1;
+const DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA = .07;
+function resolveDocCustomRangeChromeTheme(themeService) {
+	const primary = themeService.getColorFromTheme("primary.600");
+	return {
+		background: new _univerjs_core.ColorKit(primary).setAlpha(DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA).toRgbString(),
+		border: primary
+	};
+}
+function drawDocCustomRangeChrome(ctx, rect, theme) {
+	ctx.save();
+	ctx.fillStyle = theme.background;
+	ctx.strokeStyle = theme.border;
+	ctx.lineWidth = 1;
+	ctx.beginPath();
+	ctx.roundRect(rect.left, rect.top, rect.right - rect.left, rect.bottom - rect.top, 1);
+	ctx.fill();
+	ctx.stroke();
+	ctx.restore();
+}
+
 //#endregion
 //#region src/basics/paragraph.ts
 function isTopLevelStructuralGap(dataStream, offset) {
@@ -206,7 +214,7 @@ function getCustomDecorationAtPosition(customDecorations, position) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -217,7 +225,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -230,14 +238,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.140.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.137.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -248,7 +256,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -256,7 +264,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.140.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);
@@ -381,7 +389,7 @@ let DocMenuStyleService = class DocMenuStyleService extends _univerjs_core.Dispo
 		const docDataModel = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null) return { ...DEFAULT_TEXT_STYLE };
 		const unitId = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getUnitId();
-		const docSkeletonManagerService = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs.DocSkeletonManagerService);
+		const docSkeletonManagerService = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs.DocSkeletonManagerService);
 		const docViewModel = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getViewModel();
 		if (docViewModel == null) return { ...DEFAULT_TEXT_STYLE };
 		if (docViewModel.getEditArea() === _univerjs_engine_render.DocumentEditArea.BODY) return { ...DEFAULT_TEXT_STYLE };
@@ -569,7 +577,7 @@ var DocClipboardPasteAdapterService = class {
 */
 function getCommandSkeleton(accessor, unitId) {
 	var _renderManagerService;
-	return (_renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService).getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService);
+	return (_renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService).getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService);
 }
 
 //#endregion
@@ -1083,7 +1091,7 @@ const InnerPasteCommand = {
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
 		var _docDataModel$getSelf, _body$tables, _body$customBlocks, _body$blockRanges;
-		const { segmentId, textRanges, doc } = params;
+		const { customRangeMappings = [], segmentId, textRanges, doc } = params;
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const undoRedoService = accessor.get(_univerjs_core.IUndoRedoService);
 		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
@@ -1128,6 +1136,11 @@ const InnerPasteCommand = {
 			const cloneBody = _univerjs_core.Tools.deepClone(body);
 			const blockRangeMappings = [];
 			const customBlockMappings = [];
+			const selectionCustomRangeMappings = customRangeMappings.map(({ sourceRange }) => ({
+				sourceRange,
+				targetRange: _univerjs_core.BuildTextUtils.customRange.copyCustomRange(sourceRange)
+			}));
+			if (selectionCustomRangeMappings.length > 0) cloneBody.customRanges = selectionCustomRangeMappings.map(({ targetRange }) => targetRange);
 			if (hasBlockRange) cloneBody.blockRanges.forEach((targetBlockRange, index) => {
 				const sourceBlockRange = body.blockRanges[index];
 				targetBlockRange.blockId = (0, _univerjs_core.generateRandomId)(6);
@@ -1169,7 +1182,7 @@ const InnerPasteCommand = {
 					rawActions.push(orderAction);
 				});
 			}
-			if ((blockRangeMappings.length > 0 || customBlockMappings.length > 0) && pasteAdapterService) {
+			if ((blockRangeMappings.length > 0 || customBlockMappings.length > 0 || selectionCustomRangeMappings.length > 0) && pasteAdapterService) {
 				const mutationInfos = pasteAdapterService.getPasteMutationInfos({
 					unitId,
 					segmentId,
@@ -1177,6 +1190,7 @@ const InnerPasteCommand = {
 					sourceBody: body,
 					targetBody: cloneBody,
 					blockRangeMappings,
+					customRangeMappings: selectionCustomRangeMappings,
 					customBlockMappings
 				});
 				if (mutationInfos.redoMutations.length > 0 || mutationInfos.undoMutations.length > 0) {
@@ -3747,12 +3761,12 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 	}
 	async copy(sliceType = _univerjs_core.SliceBodyType.copy, ranges) {
 		var _this$_getDocumentBod;
-		const { newSnapshotList = [], needCache = false, snapshot, ranges: allRanges } = (_this$_getDocumentBod = this._getDocumentBodyInRanges(sliceType, ranges)) !== null && _this$_getDocumentBod !== void 0 ? _this$_getDocumentBod : {};
+		const { newSnapshotList = [], needCache = false, plainTextList, snapshot, ranges: allRanges } = (_this$_getDocumentBod = this._getDocumentBodyInRanges(sliceType, ranges)) !== null && _this$_getDocumentBod !== void 0 ? _this$_getDocumentBod : {};
 		if (newSnapshotList.length === 0 || snapshot == null) return false;
 		try {
 			var _allRanges$;
 			const isCopyInHeaderFooter = !!(allRanges === null || allRanges === void 0 || (_allRanges$ = allRanges[0]) === null || _allRanges$ === void 0 ? void 0 : _allRanges$.segmentId);
-			await this._setClipboardData(newSnapshotList, !isCopyInHeaderFooter && needCache);
+			await this._setClipboardData(newSnapshotList, !isCopyInHeaderFooter && needCache, plainTextList);
 		} catch (e) {
 			this._logService.error("[DocClipboardService] copy failed", e);
 			return false;
@@ -3821,16 +3835,25 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		}
 	}
 	async _paste(docData) {
-		var _body$customRanges, _body$paragraphs, _currentDocument$getS;
+		var _body$customRanges$ma, _body$customRanges, _body$paragraphs, _currentDocument$getS;
 		const { body: _body } = docData;
 		if (_body == null) return false;
 		let body = (0, _univerjs_core.normalizeBody)(_body);
 		const currentDocument = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (!currentDocument) return false;
 		this._clipboardHooks.forEach((hook) => {
-			if (hook.onBeforePaste) body = hook.onBeforePaste(body);
+			if (hook.onBeforePaste) body = hook.onBeforePaste(body, {
+				documentData: docData,
+				targetUnitId: currentDocument.getUnitId()
+			});
 		});
-		body.customRanges = (_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.map(_univerjs_core.BuildTextUtils.customRange.copyCustomRange);
+		const customRangeMappings = (_body$customRanges$ma = (_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.map((sourceRange) => {
+			return {
+				sourceRange,
+				targetRange: _univerjs_core.BuildTextUtils.customRange.copyCustomRange(sourceRange)
+			};
+		})) !== null && _body$customRanges$ma !== void 0 ? _body$customRanges$ma : [];
+		body.customRanges = customRangeMappings.map(({ targetRange }) => targetRange);
 		(_body$paragraphs = body.paragraphs) === null || _body$paragraphs === void 0 || _body$paragraphs.forEach((copy) => {
 			var _copy$paragraphStyle;
 			if ((_copy$paragraphStyle = copy.paragraphStyle) === null || _copy$paragraphStyle === void 0 ? void 0 : _copy$paragraphStyle.headingId) copy.paragraphStyle.headingId = (0, _univerjs_core.generateRandomId)(6);
@@ -3858,6 +3881,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 					...docData,
 					body
 				},
+				customRangeMappings,
 				segmentId,
 				textRanges
 			});
@@ -3866,10 +3890,10 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 			return false;
 		}
 	}
-	async _setClipboardData(documentList, needCache = true) {
+	async _setClipboardData(documentList, needCache = true, plainTextList) {
 		var _documentList$0$body;
 		const copyId = (0, _univerjs_core.generateRandomId)(6);
-		const text = (documentList.length > 1 ? documentList.map((doc) => {
+		const text = (plainTextList ? plainTextList.join("\n") : documentList.length > 1 ? documentList.map((doc) => {
 			var _doc$body;
 			return ((_doc$body = doc.body) === null || _doc$body === void 0 ? void 0 : _doc$body.dataStream) || "";
 		}).join("\n") : ((_documentList$0$body = documentList[0].body) === null || _documentList$0$body === void 0 ? void 0 : _documentList$0$body.dataStream) || "").replaceAll(_univerjs_core.DataStreamTreeTokenType.TABLE_START, "").replaceAll(_univerjs_core.DataStreamTreeTokenType.TABLE_END, "").replaceAll(_univerjs_core.DataStreamTreeTokenType.TABLE_ROW_START, "").replaceAll(_univerjs_core.DataStreamTreeTokenType.TABLE_ROW_END, "").replaceAll(_univerjs_core.DataStreamTreeTokenType.TABLE_CELL_START, "").replaceAll(_univerjs_core.DataStreamTreeTokenType.TABLE_CELL_END, "").replaceAll(_univerjs_core.DataStreamTreeTokenType.BLOCK_START, "").replaceAll(_univerjs_core.DataStreamTreeTokenType.BLOCK_END, "").replaceAll("\r\n", " ").replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, "");
@@ -3906,10 +3930,12 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		}, doc);
 	}
 	_getDocumentBodyInRanges(sliceType, ranges) {
-		var _docDataModel$getSelf;
+		var _this$_clipboardHooks, _docDataModel$getSelf;
 		const docDataModel = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		const allRanges = ranges !== null && ranges !== void 0 ? ranges : this._docSelectionManagerService.getDocRanges();
 		const results = [];
+		const plainTextResults = [];
+		const copyContentHook = (_this$_clipboardHooks = this._clipboardHooks.find((hook) => hook.onCopyContent)) === null || _this$_clipboardHooks === void 0 ? void 0 : _this$_clipboardHooks.onCopyContent;
 		let needCache = true;
 		if (docDataModel == null || allRanges.length === 0) return;
 		const segmentId = allRanges[0].segmentId;
@@ -3917,13 +3943,14 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		const snapshot = docDataModel.getSnapshot();
 		if (body == null) return;
 		for (const range of allRanges) {
-			var _docDataModel$getSelf2;
+			var _docDataModel$getSelf2, _copyContentHook;
 			const { startOffset, endOffset, collapsed, rangeType } = range;
 			if (collapsed || startOffset == null || endOffset == null) continue;
 			if (rangeType === _univerjs_core.DOC_RANGE_TYPE.RECT) {
 				needCache = false;
 				const bodySlice = getTableClipboardBodySlice(body, range);
 				results.push(bodySlice);
+				plainTextResults.push(bodySlice.dataStream);
 				continue;
 			}
 			const deleteRange = {
@@ -3934,6 +3961,11 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 			const docBody = (_docDataModel$getSelf2 = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf2 === void 0 ? void 0 : _docDataModel$getSelf2.sliceBody(deleteRange.startOffset, deleteRange.endOffset, sliceType);
 			if (docBody == null) continue;
 			results.push(docBody);
+			plainTextResults.push((_copyContentHook = copyContentHook === null || copyContentHook === void 0 ? void 0 : copyContentHook(deleteRange.startOffset, deleteRange.endOffset, {
+				body,
+				segmentId,
+				unitId: docDataModel.getUnitId()
+			})) !== null && _copyContentHook !== void 0 ? _copyContentHook : docBody.dataStream);
 		}
 		return {
 			newSnapshotList: results.map((e) => ({
@@ -3941,6 +3973,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 				body: e
 			})),
 			needCache,
+			plainTextList: plainTextResults,
 			snapshot,
 			ranges: allRanges
 		};
@@ -3999,16 +4032,17 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		return doc;
 	}
 	async _uploadBase64ImagesInHtml(html) {
-		var _this$_clipboardHooks;
+		var _this$_clipboardHooks2;
 		if (!html || !html.includes("data:image/")) return html;
-		const onBeforePasteImage = (_this$_clipboardHooks = this._clipboardHooks.find((e) => e.onBeforePasteImage)) === null || _this$_clipboardHooks === void 0 ? void 0 : _this$_clipboardHooks.onBeforePasteImage;
+		const onBeforePasteImage = (_this$_clipboardHooks2 = this._clipboardHooks.find((e) => e.onBeforePasteImage)) === null || _this$_clipboardHooks2 === void 0 ? void 0 : _this$_clipboardHooks2.onBeforePasteImage;
 		if (!onBeforePasteImage) return html;
 		const doc = new DOMParser().parseFromString(html, "text/html");
 		const images = Array.from(doc.querySelectorAll("img[src^=\"data:image/\"]"));
 		if (images.length === 0) return html;
 		await Promise.all(images.map(async (image, index) => {
 			if (image.dataset.imageSourceType && image.dataset.imageSourceType !== _univerjs_core.ImageSourceType.BASE64) return;
-			const uploaded = await onBeforePasteImage(dataUrlToFile(image.getAttribute("src") || image.src, `pasted_image_${index}`));
+			const file = dataUrlToFile(image.getAttribute("src") || image.src, `pasted_image_${index}`);
+			const uploaded = await onBeforePasteImage(file);
 			if (!uploaded) return;
 			image.dataset.imageSourceType = uploaded.imageSourceType;
 			if (uploaded.imageSourceType === _univerjs_core.ImageSourceType.UUID) {
@@ -4022,7 +4056,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		return doc.documentElement.outerHTML;
 	}
 	async _createImagePasteHtml(files) {
-		var _this$_clipboardHooks2, _this$_clipboardHooks3;
+		var _this$_clipboardHooks3, _this$_clipboardHooks4;
 		const doc = {
 			id: "",
 			documentStyle: {},
@@ -4058,7 +4092,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 				};
 			});
 		};
-		const onBeforePasteImage = (_this$_clipboardHooks2 = (_this$_clipboardHooks3 = this._clipboardHooks.find((e) => e.onBeforePasteImage)) === null || _this$_clipboardHooks3 === void 0 ? void 0 : _this$_clipboardHooks3.onBeforePasteImage) !== null && _this$_clipboardHooks2 !== void 0 ? _this$_clipboardHooks2 : fileToBase64;
+		const onBeforePasteImage = (_this$_clipboardHooks3 = (_this$_clipboardHooks4 = this._clipboardHooks.find((e) => e.onBeforePasteImage)) === null || _this$_clipboardHooks4 === void 0 ? void 0 : _this$_clipboardHooks4.onBeforePasteImage) !== null && _this$_clipboardHooks3 !== void 0 ? _this$_clipboardHooks3 : fileToBase64;
 		await Promise.all(files.map(async (file, index) => {
 			var _body$customBlocks;
 			const image = await onBeforePasteImage(file);
@@ -4802,7 +4836,7 @@ const IMEInputCommand = {
 		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const docMenuStyleService = accessor.get(DocMenuStyleService);
-		const imeInputManagerService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocIMEInputManagerService);
+		const imeInputManagerService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocIMEInputManagerService);
 		const docDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null || imeInputManagerService == null) return false;
 		const previousActiveRange = imeInputManagerService.getActiveRange();
@@ -4895,7 +4929,8 @@ const SetInlineFormatBoldCommand = {
 	id: SetInlineFormatBoldCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatBoldCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatBoldCommandId, params, commandService);
 	}
 };
 const SetInlineFormatItalicCommandId = "doc.command.set-inline-format-italic";
@@ -4903,7 +4938,8 @@ const SetInlineFormatItalicCommand = {
 	id: SetInlineFormatItalicCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatItalicCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatItalicCommandId, params, commandService);
 	}
 };
 const SetInlineFormatUnderlineCommandId = "doc.command.set-inline-format-underline";
@@ -4911,7 +4947,8 @@ const SetInlineFormatUnderlineCommand = {
 	id: SetInlineFormatUnderlineCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatUnderlineCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatUnderlineCommandId, params, commandService);
 	}
 };
 const SetInlineFormatStrikethroughCommandId = "doc.command.set-inline-format-strikethrough";
@@ -4919,7 +4956,8 @@ const SetInlineFormatStrikethroughCommand = {
 	id: SetInlineFormatStrikethroughCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatStrikethroughCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatStrikethroughCommandId, params, commandService);
 	}
 };
 const SetInlineFormatSubscriptCommandId = "doc.command.set-inline-format-subscript";
@@ -4927,7 +4965,8 @@ const SetInlineFormatSubscriptCommand = {
 	id: SetInlineFormatSubscriptCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatSubscriptCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatSubscriptCommandId, params, commandService);
 	}
 };
 const SetInlineFormatSuperscriptCommandId = "doc.command.set-inline-format-superscript";
@@ -4935,7 +4974,8 @@ const SetInlineFormatSuperscriptCommand = {
 	id: SetInlineFormatSuperscriptCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatSuperscriptCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatSuperscriptCommandId, params, commandService);
 	}
 };
 const SetInlineFormatFontSizeCommandId = "doc.command.set-inline-format-fontsize";
@@ -4943,7 +4983,8 @@ const SetInlineFormatFontSizeCommand = {
 	id: SetInlineFormatFontSizeCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatFontSizeCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatFontSizeCommandId, params, commandService);
 	}
 };
 const SetInlineFormatFontFamilyCommandId = "doc.command.set-inline-format-font-family";
@@ -4951,7 +4992,8 @@ const SetInlineFormatFontFamilyCommand = {
 	id: SetInlineFormatFontFamilyCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatFontFamilyCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatFontFamilyCommandId, params, commandService);
 	}
 };
 const SetInlineFormatTextColorCommandId = "doc.command.set-inline-format-text-color";
@@ -4959,7 +5001,8 @@ const SetInlineFormatTextColorCommand = {
 	id: SetInlineFormatTextColorCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatTextColorCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatTextColorCommandId, params, commandService);
 	}
 };
 const ResetInlineFormatTextColorCommandId = "doc.command.reset-inline-format-text-color";
@@ -4967,7 +5010,8 @@ const ResetInlineFormatTextColorCommand = {
 	id: ResetInlineFormatTextColorCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(ResetInlineFormatTextColorCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(ResetInlineFormatTextColorCommandId, params, commandService);
 	}
 };
 const SetInlineFormatTextFillCommandId = "doc.command.set-inline-format-text-fill";
@@ -4975,7 +5019,8 @@ const SetInlineFormatTextFillCommand = {
 	id: SetInlineFormatTextFillCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatTextFillCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatTextFillCommandId, params, commandService);
 	}
 };
 const SetInlineFormatTextBackgroundColorCommandId = "doc.command.set-inline-format-text-background-color";
@@ -4983,7 +5028,8 @@ const SetInlineFormatTextBackgroundColorCommand = {
 	id: SetInlineFormatTextBackgroundColorCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatTextBackgroundColorCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(SetInlineFormatTextBackgroundColorCommandId, params, commandService);
 	}
 };
 const ResetInlineFormatTextBackgroundColorCommandId = "doc.command.reset-inline-format-text-background-color";
@@ -4991,7 +5037,8 @@ const ResetInlineFormatTextBackgroundColorCommand = {
 	id: ResetInlineFormatTextBackgroundColorCommandId,
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(ResetInlineFormatTextBackgroundColorCommandId, params, accessor.get(_univerjs_core.ICommandService));
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		return handleInlineFormat(ResetInlineFormatTextBackgroundColorCommandId, params, commandService);
 	}
 };
 const COMMAND_ID_TO_FORMAT_KEY_MAP = {
@@ -5289,35 +5336,6 @@ function collectTopLevelReplaceAction(jsonX, rawActions, path, previousValue, va
 	const action = jsonX.replaceOp(path, previousValue, value);
 	if (action != null) rawActions.push(action);
 }
-/**
-* @deprecated please use ReplaceSnapshotCommand instead.
-*/
-const ReplaceContentCommand = {
-	id: "doc.command-replace-content",
-	type: _univerjs_core.CommandType.COMMAND,
-	handler: async (accessor, params) => {
-		var _docDataModel$getSelf2;
-		const { unitId, body, textRanges, segmentId = "", options } = params;
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
-		const docDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		const prevBody = docDataModel === null || docDataModel === void 0 || (_docDataModel$getSelf2 = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf2 === void 0 ? void 0 : _docDataModel$getSelf2.getBody();
-		if (docDataModel == null || prevBody == null) return false;
-		const doMutation = getMutationParams(unitId, segmentId, docDataModel, prevBody, body);
-		doMutation.params.textRanges = textRanges;
-		if (options) doMutation.params.options = options;
-		if (doMutation.params.actions == null && textRanges) {
-			docSelectionManagerService.replaceDocRanges(textRanges, {
-				unitId,
-				subUnitId: unitId
-			}, false);
-			return true;
-		}
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
 const CoverContentCommand = {
 	id: "doc.command-cover-content",
 	type: _univerjs_core.CommandType.COMMAND,
@@ -5401,13 +5419,13 @@ const ReplaceTextRunsCommand = {
 	id: "doc.command.replace-text-runs",
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _docDataModel$getSelf3;
+		var _docDataModel$getSelf2;
 		const { unitId, body, textRanges, segmentId = "", options } = params;
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const themeService = accessor.get(_univerjs_core.ThemeService);
 		const docDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		const prevBody = docDataModel === null || docDataModel === void 0 || (_docDataModel$getSelf3 = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf3 === void 0 ? void 0 : _docDataModel$getSelf3.getBody();
+		const prevBody = docDataModel === null || docDataModel === void 0 || (_docDataModel$getSelf2 = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf2 === void 0 ? void 0 : _docDataModel$getSelf2.getBody();
 		if (docDataModel == null || prevBody == null) return false;
 		const textX = _univerjs_core.BuildTextUtils.selection.replaceTextRuns({
 			doc: docDataModel,
@@ -6083,10 +6101,10 @@ function insertNamedStyleParagraph(accessor, doc, namedStyleType, startOffset, e
 		segmentId,
 		unitId: doc.getUnitId()
 	}));
-	if (success) accessor.get(_univerjs_docs.DocSelectionManagerService).replaceTextRanges([{
+	if (success) accessor.get(_univerjs_docs.DocSelectionManagerService).replaceDocRanges([{
 		startOffset,
 		endOffset: startOffset
-	}], false);
+	}], void 0, false);
 	return success;
 }
 const QuickHeadingCommand = {
@@ -7202,6 +7220,12 @@ const TEXT_ANCHOR_KEY_PREFIX = "__TestSelectionAnchor__";
 const ID_LENGTH$1 = 6;
 const BLINK_ON = 500;
 const TEXT_RANGE_LAYER_INDEX = 3;
+function cursorConvertToTextRange(scene, range, docSkeleton, document) {
+	const { startOffset, endOffset, style = _univerjs_engine_render.NORMAL_TEXT_SELECTION_PLUGIN_STYLE, segmentId = "", segmentPage } = range;
+	const anchorNodePosition = docSkeleton.findNodePositionByCharIndex(startOffset, true, segmentId, segmentPage);
+	const focusNodePosition = startOffset !== endOffset ? docSkeleton.findNodePositionByCharIndex(endOffset, true, segmentId, segmentPage) : null;
+	return new TextRange(scene, document, docSkeleton, anchorNodePosition, focusNodePosition, style, segmentId, segmentPage);
+}
 function getAnchorBounding(pointsGroup) {
 	const points = pointsGroup[0];
 	const startPoint = points[0];
@@ -7956,7 +7980,7 @@ function getParagraphInfoByGlyph(node) {
 	};
 }
 function serializeTextRange(textRange) {
-	const { startOffset, endOffset, collapsed, rangeType, startNodePosition, endNodePosition, direction, segmentId, segmentPage } = textRange;
+	const { startOffset, endOffset, collapsed, rangeType, startNodePosition, endNodePosition, direction, segmentId, segmentPage, style } = textRange;
 	return {
 		startOffset,
 		endOffset,
@@ -7967,6 +7991,7 @@ function serializeTextRange(textRange) {
 		direction,
 		segmentId,
 		segmentPage,
+		style,
 		isActive: textRange.isActive()
 	};
 }
@@ -8156,27 +8181,37 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 		const { scene, mainComponent } = this._context;
 		const document = mainComponent;
 		const docSkeleton = this._docSkeletonManagerService.getSkeleton();
-		const generalAddRange = (startOffset, endOffset) => {
-			const rangeList = getRangeListFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, style, segmentId, segmentPage);
+		const generalAddRange = (startOffset, endOffset, rangeStyle) => {
+			const rangeList = getRangeListFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage);
 			if (rangeList == null) return;
 			const { textRanges, rectRanges } = rangeList;
 			for (const textRange of textRanges) this._addTextRange(textRange);
 			this._addRectRanges(rectRanges);
 		};
 		for (const range of ranges) {
+			var _range$style;
 			const { startOffset, endOffset, rangeType, startNodePosition, endNodePosition } = range;
-			if (rangeType === _univerjs_core.DOC_RANGE_TYPE.RECT) {
-				const rectRange = getRectRangeFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, style, segmentId, segmentPage);
+			const rangeStyle = (_range$style = range.style) !== null && _range$style !== void 0 ? _range$style : style;
+			if (rangeType !== _univerjs_core.DOC_RANGE_TYPE.RECT && startOffset === endOffset) {
+				const textRange = cursorConvertToTextRange(scene, {
+					...range,
+					segmentId,
+					segmentPage,
+					style: rangeStyle
+				}, docSkeleton, document);
+				if (textRange) this._addTextRange(textRange);
+			} else if (rangeType === _univerjs_core.DOC_RANGE_TYPE.RECT) {
+				const rectRange = getRectRangeFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage);
 				if (rectRange) this._addRectRanges([rectRange]);
 			} else if (rangeType === _univerjs_core.DOC_RANGE_TYPE.TEXT) try {
 				let textRange = null;
-				if (startNodePosition && endNodePosition) textRange = getTextRangeFromCharIndex(startNodePosition.isBack ? startOffset : startOffset - 1, endNodePosition.isBack ? endOffset : endOffset - 1, scene, document, docSkeleton, style, segmentId, segmentPage, startNodePosition.isBack, endNodePosition.isBack);
-				else textRange = getTextRangeFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, style, segmentId, segmentPage);
+				if (startNodePosition && endNodePosition) textRange = getTextRangeFromCharIndex(startNodePosition.isBack ? startOffset : startOffset - 1, endNodePosition.isBack ? endOffset : endOffset - 1, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage, startNodePosition.isBack, endNodePosition.isBack);
+				else textRange = getTextRangeFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage);
 				if (textRange) this._addTextRange(textRange);
 			} catch (_e) {
-				generalAddRange(startOffset, endOffset);
+				generalAddRange(startOffset, endOffset, rangeStyle);
 			}
-			else generalAddRange(startOffset, endOffset);
+			else generalAddRange(startOffset, endOffset, rangeStyle);
 		}
 		this._textSelectionInner$.next({
 			textRanges: this._getAllTextRanges(),
@@ -8247,9 +8282,6 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 	blur() {
 		this._input.blur();
 	}
-	/**
-	* @deprecated
-	*/
 	deactivate() {
 		this._container.style.left = "0px";
 		this._container.style.top = "0px";
@@ -8706,7 +8738,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 		const scrollStop = viewport.onScrollEnd$.subscribeEvent((param) => {
 			const viewport = param.viewport;
 			if (!viewport) return;
-			const bounds = viewport.getBounding();
+			const bounds = viewport.calcViewportInfo();
 			const activeRangeInstance = this._getActiveRangeInstance();
 			const anchor = activeRangeInstance === null || activeRangeInstance === void 0 ? void 0 : activeRangeInstance.getAnchor();
 			if (!anchor || anchor && !anchor.visible) return;
@@ -8917,8 +8949,8 @@ const SwitchDocModeCommand = {
 		const docDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null) return false;
 		const unitId = docDataModel.getUnitId();
-		const skeleton = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
+		const skeleton = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
 		if (skeleton == null || docSelectionRenderService == null) return false;
 		const segmentId = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegment();
 		const segmentPage = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegmentPage();
@@ -9780,7 +9812,7 @@ var Editor = class extends _univerjs_core.Disposable {
 		return docSelectionRenderService.isFocusing && Boolean(docSelectionRenderService.getActiveTextRange());
 	}
 	/**
-	* @deprecated use `IEditorService.focus` as instead. this is for internal usage.
+	* Focus the input element directly. This is for internal usage.
 	*/
 	focus() {
 		const curDoc = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
@@ -9789,7 +9821,7 @@ var Editor = class extends _univerjs_core.Disposable {
 		this._param.render.with(DocSelectionRenderService).focus();
 	}
 	/**
-	* @deprecated use `IEditorService.blur` as instead. this is for internal usage.
+	* Blur the input element directly. This is for internal usage.
 	*/
 	blur() {
 		this._param.render.with(DocSelectionRenderService).blur();
@@ -9869,21 +9901,17 @@ var Editor = class extends _univerjs_core.Disposable {
 		const docDataModel = this._getDocDataModel();
 		docDataModel === null || docDataModel === void 0 || docDataModel.dispose();
 	}
-	/**
-	* @deprecated use getEditorId.
-	*/
-	get editorUnitId() {
-		return this._param.editorUnitId;
-	}
-	/**
-	* @deprecated @TODO: @JOCS remove this in the future.
-	*/
-	get params() {
-		return this._param;
-	}
 	get cancelDefaultResizeListener() {
 		return this._param.cancelDefaultResizeListener;
 	}
+	getRenderConfig() {
+		var _this$_param$canvasSt;
+		return {
+			canvasStyle: (_this$_param$canvasSt = this._param.canvasStyle) !== null && _this$_param$canvasSt !== void 0 ? _this$_param$canvasSt : {},
+			scrollBar: this._param.scrollBar,
+			...this._param.backScrollOffset === void 0 ? {} : { backScrollOffset: this._param.backScrollOffset }
+		};
+	}
 	get render() {
 		return this._param.render;
 	}
@@ -9901,47 +9929,11 @@ var Editor = class extends _univerjs_core.Disposable {
 	}
 	getSkeleton() {
 		var _this$_injector$get$g;
-		return (_this$_injector$get$g = this._injector.get(_univerjs_engine_render.IRenderManagerService).getRenderById(this._getEditorId())) === null || _this$_injector$get$g === void 0 ? void 0 : _this$_injector$get$g.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		return (_this$_injector$get$g = this._injector.get(_univerjs_engine_render.IRenderManagerService).getRenderUnitById(this._getEditorId())) === null || _this$_injector$get$g === void 0 ? void 0 : _this$_injector$get$g.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
 	}
 	isSheetEditor() {
 		return (0, _univerjs_core.isInternalEditorID)(this._getEditorId());
 	}
-	/**
-	* @deprecated use getDocumentData.
-	*/
-	getValue() {
-		var _docDataModel$getBody;
-		return (((_docDataModel$getBody = this._getDocDataModel().getBody()) === null || _docDataModel$getBody === void 0 ? void 0 : _docDataModel$getBody.dataStream) || "").replace(/\r\n/g, "").replace(/\n/g, "").replace(/\n/g, "");
-	}
-	/**
-	* @deprecated use getDocumentData.
-	*/
-	getBody() {
-		return this._getDocDataModel().getBody();
-	}
-	/**
-	* @deprecated.
-	*/
-	update(param) {
-		this._param = {
-			...this._param,
-			...param
-		};
-	}
-	/**
-	* @deprecated.
-	*/
-	updateCanvasStyle() {
-		var _this$_param$canvasSt;
-		const docDataModel = this._getDocDataModel();
-		if (docDataModel == null) return;
-		const documentStyle = {};
-		if ((_this$_param$canvasSt = this._param.canvasStyle) === null || _this$_param$canvasSt === void 0 ? void 0 : _this$_param$canvasSt.fontSize) {
-			if (documentStyle.textStyle == null) documentStyle.textStyle = {};
-			documentStyle.textStyle.fs = this._param.canvasStyle.fontSize;
-		}
-		docDataModel.updateDocumentStyle(documentStyle);
-	}
 	_getDocDataModel() {
 		const editorUnitId = this._getEditorId();
 		return this._univerInstanceService.getUnit(editorUnitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
@@ -10015,13 +10007,14 @@ let EditorService = class EditorService extends _univerjs_core.Disposable {
 		this._blur$.next(null);
 	}
 	focus(editorUnitId) {
+		var _editor$getDocumentDa, _editor$getDocumentDa2;
 		if (editorUnitId === this._focusEditorUnitId) return;
 		if (this._focusEditorUnitId) this.blur();
 		if (editorUnitId == null) return;
 		const editor = this.getEditor(editorUnitId);
 		if (editor == null) return;
 		this._univerInstanceService.setCurrentUnitForType(editorUnitId);
-		const valueCount = editor.getValue().length;
+		const valueCount = ((_editor$getDocumentDa = (_editor$getDocumentDa2 = editor.getDocumentData().body) === null || _editor$getDocumentDa2 === void 0 ? void 0 : _editor$getDocumentDa2.dataStream) !== null && _editor$getDocumentDa !== void 0 ? _editor$getDocumentDa : "").replace(/\r?\n/g, "").length;
 		this._contextService.setContextValue(_univerjs_core.EDITOR_ACTIVATED, true);
 		if (!(0, _univerjs_core.isInternalEditorID)(editorUnitId)) this._contextService.setContextValue(_univerjs_core.FOCUSING_EDITOR_STANDALONE, true);
 		if ((0, _univerjs_core.isCommentEditorID)(editorUnitId)) this._contextService.setContextValue(_univerjs_core.FOCUSING_COMMENT_EDITOR, true);
@@ -10044,32 +10037,23 @@ let EditorService = class EditorService extends _univerjs_core.Disposable {
 		return this._editors;
 	}
 	getEditorRenderConfig(editorUnitId) {
-		var _this$_editorRenderCo;
+		var _ref, _this$_editorRenderCo;
 		const editor = this._editors.get(editorUnitId);
-		if (editor) {
-			var _editor$params$canvas;
-			return {
-				canvasStyle: (_editor$params$canvas = editor.params.canvasStyle) !== null && _editor$params$canvas !== void 0 ? _editor$params$canvas : {},
-				scrollBar: editor.params.scrollBar
-			};
-		}
-		return (_this$_editorRenderCo = this._editorRenderConfigs.get(editorUnitId)) !== null && _this$_editorRenderCo !== void 0 ? _this$_editorRenderCo : null;
+		return (_ref = (_this$_editorRenderCo = this._editorRenderConfigs.get(editorUnitId)) !== null && _this$_editorRenderCo !== void 0 ? _this$_editorRenderCo : editor === null || editor === void 0 ? void 0 : editor.getRenderConfig()) !== null && _ref !== void 0 ? _ref : null;
 	}
 	register(config, container) {
 		const { initialSnapshot, canvasStyle = {} } = config;
 		const editorUnitId = initialSnapshot.id;
 		this._editorRenderConfigs.set(editorUnitId, {
 			canvasStyle,
-			scrollBar: config.scrollBar
+			scrollBar: config.scrollBar,
+			...config.backScrollOffset === void 0 ? {} : { backScrollOffset: config.backScrollOffset }
 		});
 		if (this._univerInstanceService.getUnit(editorUnitId, _univerjs_core.UniverInstanceType.UNIVER_DOC) == null) this._univerInstanceService.createUnit(_univerjs_core.UniverInstanceType.UNIVER_DOC, initialSnapshot || this._getBlank(editorUnitId), { makeCurrent: false });
-		let render = this._renderManagerService.getRenderById(editorUnitId);
-		if (render == null) {
-			this._renderManagerService.create(editorUnitId);
-			render = this._renderManagerService.getRenderById(editorUnitId);
-		}
+		let render = this._renderManagerService.getRenderUnitById(editorUnitId);
+		if (render == null) render = this._renderManagerService.createRender(editorUnitId);
 		if (render) {
-			render.engine.setContainer(container);
+			render.engine.mount(container);
 			const editor = new Editor({
 				...config,
 				render,
@@ -10179,7 +10163,7 @@ let DocBackScrollRenderController = class DocBackScrollRenderController extends
 		anchorNodePosition && this.scrollToNode(anchorNodePosition);
 	}
 	scrollToNode(startNodePosition) {
-		var _editor$params$backSc;
+		var _editorRenderConfig$b;
 		const { unitId, scene, mainComponent } = this._context;
 		const skeleton = this._docSkeletonManagerService.getSkeleton();
 		if (mainComponent == null || skeleton == null) return;
@@ -10190,12 +10174,12 @@ let DocBackScrollRenderController = class DocBackScrollRenderController extends
 		const left = aLeft + docsLeft;
 		const top = aTop + docsTop;
 		const viewportMain = scene.getViewport("viewMain");
-		const editor = this._editorService.getEditor(unitId);
 		if (viewportMain == null) return;
-		const { left: boundLeft, top: boundTop, right: boundRight, bottom: boundBottom } = viewportMain.getBounding().viewBound;
+		const { left: boundLeft, top: boundTop, right: boundRight, bottom: boundBottom } = viewportMain.calcViewportInfo().viewBound;
 		let offsetY = 0;
 		let offsetX = 0;
-		const delta = editor ? (_editor$params$backSc = editor.params.backScrollOffset) !== null && _editor$params$backSc !== void 0 ? _editor$params$backSc : 0 : 100;
+		const editorRenderConfig = this._editorService.getEditorRenderConfig(unitId);
+		const delta = editorRenderConfig ? (_editorRenderConfig$b = editorRenderConfig.backScrollOffset) !== null && _editorRenderConfig$b !== void 0 ? _editorRenderConfig$b : 0 : 100;
 		if (top < boundTop) offsetY = top - boundTop - delta;
 		else if (top > boundBottom - height) offsetY = top - boundBottom + height + delta;
 		if (left < boundLeft) offsetX = left - boundLeft;
@@ -10241,12 +10225,15 @@ let DocParagraphPlaceholderRenderController = class DocParagraphPlaceholderRende
 		this.disposeWithMe(documents.pageRender$.subscribe((pageRenderConfig) => this._drawPagePlaceholders(pageRenderConfig)));
 	}
 	_drawPagePlaceholders({ page, pageLeft, pageTop, ctx }) {
-		var _this$_context$unit$g, _activeRange$segmentI, _page$segmentId;
+		var _this$_context$unit$g, _activeRange$segmentI, _page$segmentId, _this$_context$mainCo;
 		const body = (_this$_context$unit$g = this._context.unit.getSelfOrHeaderFooterModel(page.segmentId)) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.getBody();
 		if (!body) return;
 		const activeRange = this._docSelectionManagerService.getActiveTextRange();
 		if (!activeRange || ((_activeRange$segmentI = activeRange.segmentId) !== null && _activeRange$segmentI !== void 0 ? _activeRange$segmentI : "") !== ((_page$segmentId = page.segmentId) !== null && _page$segmentId !== void 0 ? _page$segmentId : "")) return;
-		const placeholders = getParagraphPlaceholderLayouts(page, body, this._getLocale(), pageLeft, pageTop, activeRange.startOffset);
+		const placeholders = getParagraphPlaceholderLayouts(page, body, this._getLocale(), pageLeft, pageTop, activeRange.startOffset, {
+			docsLeft: (_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 ? void 0 : _this$_context$mainCo.getOffsetConfig().docsLeft,
+			unitId: this._context.unitId
+		});
 		if (!placeholders.length) return;
 		drawParagraphPlaceholders(ctx, placeholders);
 	}
@@ -10273,20 +10260,39 @@ function shouldRenderParagraphPlaceholder(documentModel, unitId, config) {
 	if ((0, _univerjs_core.isInternalEditorID)(unitId)) return false;
 	return ((_documentModel$getSna = documentModel.getSnapshot().documentStyle) === null || _documentModel$getSna === void 0 ? void 0 : _documentModel$getSna.documentFlavor) === _univerjs_core.DocumentFlavor.MODERN;
 }
-function getParagraphPlaceholderLayouts(page, body, locale, pageLeft = 0, pageTop = 0, activeOffset) {
+function getParagraphPlaceholderLayouts(page, body, locale, pageLeft = 0, pageTop = 0, activeOffset, options) {
 	var _body$paragraphs, _page$skeTables;
 	const paragraphs = new Map(((_body$paragraphs = body.paragraphs) !== null && _body$paragraphs !== void 0 ? _body$paragraphs : []).map((paragraph) => [paragraph.startIndex, paragraph]));
 	const layouts = [];
-	const visitSection = (section, originLeft, originTop) => {
-		for (const column of section.columns) visitColumn(column, body, paragraphs, locale, layouts, originLeft + column.left, originTop + section.top, activeOffset);
+	const visitSection = (section, originLeft, originTop, clip) => {
+		for (const column of section.columns) visitColumn(column, body, paragraphs, locale, layouts, originLeft + column.left, originTop + section.top, activeOffset, clip);
 	};
 	for (const section of page.sections) visitSection(section, pageLeft + page.marginLeft, pageTop + page.marginTop);
-	(_page$skeTables = page.skeTables) === null || _page$skeTables === void 0 || _page$skeTables.forEach((table) => {
-		for (const row of table.rows) for (const cell of row.cells) for (const section of cell.sections) visitSection(section, pageLeft + page.marginLeft + table.left + cell.left + cell.marginLeft, pageTop + page.marginTop + table.top + row.top + cell.marginTop);
+	(_page$skeTables = page.skeTables) === null || _page$skeTables === void 0 || _page$skeTables.forEach((table, tableId) => {
+		var _table$tableId, _options$unitId, _viewport$leadingInse, _viewport$trailingIns, _viewport$leadingInse2;
+		const sourceTableId = (0, _univerjs_engine_render.getTableIdAndSliceIndex)((_table$tableId = table.tableId) !== null && _table$tableId !== void 0 ? _table$tableId : tableId).tableId;
+		const viewport = (0, _univerjs_engine_render.getDocsTableRenderViewport)((_options$unitId = options === null || options === void 0 ? void 0 : options.unitId) !== null && _options$unitId !== void 0 ? _options$unitId : "", sourceTableId);
+		const hasHorizontalViewport = viewport != null && ((_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) > viewport.viewportWidth;
+		const tableLeft = pageLeft + page.marginLeft + table.left;
+		const tableViewportLeft = hasHorizontalViewport ? (0, _univerjs_engine_render.getDocsTableViewportLeft)(viewport, tableLeft - ((_viewport$leadingInse2 = viewport.leadingInsetLeft) !== null && _viewport$leadingInse2 !== void 0 ? _viewport$leadingInse2 : 0), options === null || options === void 0 ? void 0 : options.docsLeft) : tableLeft;
+		const tableViewportRight = tableViewportLeft + (hasHorizontalViewport ? viewport.viewportWidth : table.width);
+		const tableScrollLeft = hasHorizontalViewport ? viewport.scrollLeft : 0;
+		for (const row of table.rows) for (const cell of row.cells) {
+			const cellLeft = tableLeft + cell.left - tableScrollLeft;
+			const cellContentLeft = cellLeft + cell.marginLeft;
+			const cellContentRight = cellLeft + cell.pageWidth - cell.marginRight;
+			const clipLeft = Math.max(cellContentLeft, tableViewportLeft);
+			const clipRight = Math.min(cellContentRight, tableViewportRight);
+			if (clipRight <= clipLeft) continue;
+			for (const section of cell.sections) visitSection(section, cellContentLeft, pageTop + page.marginTop + table.top + row.top + cell.marginTop, {
+				left: clipLeft,
+				right: clipRight
+			});
+		}
 	});
 	return layouts;
 }
-function visitColumn(column, body, paragraphs, locale, layouts, originLeft, originTop, activeOffset) {
+function visitColumn(column, body, paragraphs, locale, layouts, originLeft, originTop, activeOffset, clip) {
 	for (const line of column.lines) {
 		if (!line.paragraphStart) continue;
 		const paragraphStart = line.st;
@@ -10296,7 +10302,7 @@ function visitColumn(column, body, paragraphs, locale, layouts, originLeft, orig
 		if (!paragraph || !isEmptyParagraph(body.dataStream, line.st, line.paragraphIndex)) continue;
 		const text = getPlaceholderText(paragraph, locale);
 		if (!text) continue;
-		layouts.push(getLinePlaceholderLayout(line, paragraph, text, originLeft, originTop));
+		layouts.push(getLinePlaceholderLayout(line, paragraph, text, originLeft, originTop, clip));
 	}
 }
 function isOffsetInParagraph(offset, paragraphStart, paragraphEnd) {
@@ -10314,8 +10320,8 @@ function getPlaceholderText(paragraph, locale) {
 		default: return locale.normalText;
 	}
 }
-function getLinePlaceholderLayout(line, paragraph, text, originLeft, originTop) {
-	var _divide$glyphGroup, _paragraph$paragraphS2, _paragraph$paragraphS3, _getLineFontFamily, _divide$left, _divide$paddingLeft, _ref, _divide$width;
+function getLinePlaceholderLayout(line, paragraph, text, originLeft, originTop, clip) {
+	var _divide$glyphGroup, _paragraph$paragraphS2, _paragraph$paragraphS3, _getLineFontFamily, _divide$left, _divide$paddingLeft, _ref, _divide$width, _clip$left, _clip$right;
 	const divide = line.divides[0];
 	const firstGlyph = ((_divide$glyphGroup = divide === null || divide === void 0 ? void 0 : divide.glyphGroup) !== null && _divide$glyphGroup !== void 0 ? _divide$glyphGroup : [])[0];
 	const textStyle = _univerjs_core.NAMED_STYLE_MAP[(_paragraph$paragraphS2 = (_paragraph$paragraphS3 = paragraph.paragraphStyle) === null || _paragraph$paragraphS3 === void 0 ? void 0 : _paragraph$paragraphS3.namedStyleType) !== null && _paragraph$paragraphS2 !== void 0 ? _paragraph$paragraphS2 : _univerjs_core.NamedStyleType.NORMAL_TEXT];
@@ -10324,13 +10330,22 @@ function getLinePlaceholderLayout(line, paragraph, text, originLeft, originTop)
 	const fontWeight = (textStyle === null || textStyle === void 0 ? void 0 : textStyle.bl) ? "bold" : "normal";
 	const lineStartX = originLeft + ((_divide$left = divide === null || divide === void 0 ? void 0 : divide.left) !== null && _divide$left !== void 0 ? _divide$left : 0) + ((_divide$paddingLeft = divide === null || divide === void 0 ? void 0 : divide.paddingLeft) !== null && _divide$paddingLeft !== void 0 ? _divide$paddingLeft : 0);
 	const listOffset = paragraph.bullet && firstGlyph ? firstGlyph.left + firstGlyph.width + LIST_PLACEHOLDER_GAP : 0;
+	const x = lineStartX + listOffset;
+	const naturalMaxWidth = Math.max(0, ((_ref = (_divide$width = divide === null || divide === void 0 ? void 0 : divide.width) !== null && _divide$width !== void 0 ? _divide$width : line.width) !== null && _ref !== void 0 ? _ref : 0) - listOffset);
+	const clipLeft = Math.max(x, (_clip$left = clip === null || clip === void 0 ? void 0 : clip.left) !== null && _clip$left !== void 0 ? _clip$left : x);
+	const clipRight = Math.min(x + naturalMaxWidth, (_clip$right = clip === null || clip === void 0 ? void 0 : clip.right) !== null && _clip$right !== void 0 ? _clip$right : x + naturalMaxWidth);
+	const clipTop = originTop + line.top;
 	return {
+		clipBottom: clipTop + line.lineHeight,
+		clipLeft,
+		clipRight,
+		clipTop,
 		fontFamily,
 		fontSize,
 		fontWeight,
-		maxWidth: Math.max(0, ((_ref = (_divide$width = divide === null || divide === void 0 ? void 0 : divide.width) !== null && _divide$width !== void 0 ? _divide$width : line.width) !== null && _ref !== void 0 ? _ref : 0) - listOffset),
+		maxWidth: Math.max(0, clipRight - clipLeft),
 		text,
-		x: lineStartX + listOffset,
+		x,
 		y: originTop + line.top + line.marginTop + line.paddingTop + line.asc
 	};
 }
@@ -10370,8 +10385,20 @@ function drawParagraphPlaceholders(ctx, placeholders) {
 	ctx.fillStyle = PLACEHOLDER_COLOR;
 	ctx.textBaseline = "alphabetic";
 	for (const placeholder of placeholders) {
+		var _placeholder$clipLeft, _placeholder$clipRigh, _placeholder$clipTop, _placeholder$clipBott;
+		const clipLeft = (_placeholder$clipLeft = placeholder.clipLeft) !== null && _placeholder$clipLeft !== void 0 ? _placeholder$clipLeft : placeholder.x;
+		const clipRight = (_placeholder$clipRigh = placeholder.clipRight) !== null && _placeholder$clipRigh !== void 0 ? _placeholder$clipRigh : placeholder.x + placeholder.maxWidth;
+		const clipTop = (_placeholder$clipTop = placeholder.clipTop) !== null && _placeholder$clipTop !== void 0 ? _placeholder$clipTop : placeholder.y - placeholder.fontSize;
+		const clipBottom = (_placeholder$clipBott = placeholder.clipBottom) !== null && _placeholder$clipBott !== void 0 ? _placeholder$clipBott : placeholder.y + placeholder.fontSize;
+		if (clipRight <= clipLeft || clipBottom <= clipTop) continue;
+		ctx.save();
+		ctx.beginPath();
+		ctx.rectByPrecision(clipLeft, clipTop, clipRight - clipLeft, clipBottom - clipTop);
+		ctx.closePath();
+		ctx.clip();
 		ctx.font = `${placeholder.fontWeight} ${placeholder.fontSize}px ${placeholder.fontFamily}`;
-		ctx.fillText(placeholder.text, placeholder.x, placeholder.y, placeholder.maxWidth || void 0);
+		ctx.fillText(placeholder.text, placeholder.x, placeholder.y);
+		ctx.restore();
 	}
 	ctx.restore();
 }
@@ -10518,7 +10545,10 @@ let DocPageLayoutService = class DocPageLayoutService extends _univerjs_core.Dis
 		}
 		if (engineHeight > docsHeight) sceneHeight = (engineHeight - pageMarginTop * 2) / viewScale;
 		else sceneHeight = docsHeight + pageMarginTop * 2;
-		scene.resize(sceneWidth, sceneHeight);
+		scene.transformByState({
+			width: sceneWidth,
+			height: sceneHeight
+		});
 		if (engineWidth <= 1) {
 			docsLeft = -1e4;
 			docsTop = -1e4;
@@ -10555,7 +10585,7 @@ let DocRenderController = class DocRenderController extends _univerjs_core.RxDis
 	}
 	reRender(unitId) {
 		var _this$_renderManagerS;
-		const docSkeletonManagerService = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs.DocSkeletonManagerService);
+		const docSkeletonManagerService = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs.DocSkeletonManagerService);
 		const skeleton = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getSkeleton();
 		if (!skeleton) return;
 		if (!!skeleton.getViewModel().getDataModel().getSnapshot().disabled) return;
@@ -10703,7 +10733,10 @@ let DocRenderController = class DocRenderController extends _univerjs_core.RxDis
 		docsComponent.resize(width, height);
 		docBackground.resize(width, height);
 		const editorRenderConfig = this._editorService.getEditorRenderConfig(unitId);
-		if (!editorRenderConfig || editorRenderConfig.scrollBar) scene.resize(width, height);
+		if (!editorRenderConfig || editorRenderConfig.scrollBar) scene.transformByState({
+			width,
+			height
+		});
 	}
 	_syncCanvasBackground(documentFlavor = this._context.unit.getSnapshot().documentStyle.documentFlavor) {
 		var _docBackground$setFil;
@@ -10891,7 +10924,7 @@ const CloseHeaderFooterCommand = {
 		const instanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const unitId = (_params$unitId = params === null || params === void 0 ? void 0 : params.unitId) !== null && _params$unitId !== void 0 ? _params$unitId : (_instanceService$getC = instanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === null || _instanceService$getC === void 0 ? void 0 : _instanceService$getC.getUnitId();
 		if (unitId == null) return false;
-		const renderObject = renderManagerService.getRenderById(unitId);
+		const renderObject = renderManagerService.getRenderUnitById(unitId);
 		if (renderObject == null) return false;
 		const docSkeletonManagerService = renderObject.with(_univerjs_docs.DocSkeletonManagerService);
 		const viewModel = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getViewModel();
@@ -11012,9 +11045,10 @@ const DOC_SECTION_SETTING_COMPONENT = "doc_ui_section-setting-panel";
 * limitations under the License.
 */
 let DocSectionSettingController = class DocSectionSettingController extends _univerjs_core.Disposable {
-	constructor(_sidebarService) {
+	constructor(_sidebarService, _selectionManager) {
 		super();
 		this._sidebarService = _sidebarService;
+		this._selectionManager = _selectionManager;
 		_defineProperty(this, "_panelId", "DocSectionSetting");
 	}
 	openPanel() {
@@ -11028,8 +11062,19 @@ let DocSectionSettingController = class DocSectionSettingController extends _uni
 	closePanel() {
 		this._sidebarService.close(this._panelId);
 	}
+	navigateToSectionEnd(unitId, sectionStart, sectionEnd) {
+		const params = {
+			unitId,
+			subUnitId: unitId
+		};
+		const cursorOffset = Math.max(sectionStart, sectionEnd - 1);
+		this._selectionManager.replaceDocRanges([{
+			startOffset: cursorOffset,
+			endOffset: cursorOffset
+		}], params, true, { shouldFocus: false });
+	}
 };
-DocSectionSettingController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService))], DocSectionSettingController);
+DocSectionSettingController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService))], DocSectionSettingController);
 
 //#endregion
 //#region src/commands/operations/doc-section-setting-panel.operation.ts
@@ -11042,6 +11087,52 @@ const DocSectionSettingPanelOperation = {
 	}
 };
 
+//#endregion
+//#region src/commands/operations/insert-break.operation.ts
+function getCollapsedBodyOffset(selectionManager) {
+	const range = selectionManager.getActiveTextRange();
+	if (!(range === null || range === void 0 ? void 0 : range.collapsed) || range.segmentId || !Number.isInteger(range.startOffset)) return null;
+	return range.startOffset;
+}
+const InsertDocumentColumnBreakOperation = {
+	id: "docs.operation.insert-column-break",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		const instanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const selectionManager = accessor.get(_univerjs_docs.DocSelectionManagerService);
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const document = instanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const offset = getCollapsedBodyOffset(selectionManager);
+		if (!document || document.getDocumentStyle().documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL || offset == null) return false;
+		return commandService.syncExecuteCommand(_univerjs_docs.InsertDocumentColumnBreakCommand.id, {
+			unitId: document.getUnitId(),
+			offset
+		});
+	}
+};
+const InsertDocumentSectionBreakOperation = {
+	id: "docs.operation.insert-section-break",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		var _body$sectionBreaks;
+		if (!params) return false;
+		const instanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const selectionManager = accessor.get(_univerjs_docs.DocSelectionManagerService);
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const document = instanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const offset = getCollapsedBodyOffset(selectionManager);
+		const body = document === null || document === void 0 ? void 0 : document.getBody();
+		if (!document || !body || document.getDocumentStyle().documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL || offset == null) return false;
+		const sectionId = (0, _univerjs_core.createSectionId)(new Set((_body$sectionBreaks = body.sectionBreaks) === null || _body$sectionBreaks === void 0 ? void 0 : _body$sectionBreaks.map((section) => section.sectionId)));
+		return commandService.syncExecuteCommand(_univerjs_docs.InsertDocumentSectionBreakCommand.id, {
+			unitId: document.getUnitId(),
+			offset,
+			sectionId,
+			nextSectionType: params.sectionType
+		});
+	}
+};
+
 //#endregion
 //#region src/views/PageSettings.tsx
 const MODERN_WIDTH_OPTIONS = [
@@ -11712,6 +11803,7 @@ const ListTypePicker = (props) => {
 	const { value, onChange, options } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-grid univer-grid-cols-3 univer-gap-2 univer-p-1.5",
+		"data-u-editor-interaction-boundary": "true",
 		children: options.map((item) => {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 				className: (0, _univerjs_design.clsx)("univer-block univer-h-20 univer-w-[72px] univer-cursor-pointer univer-overflow-hidden univer-rounded univer-transition-all hover:univer-border-primary-500", _univerjs_design.borderClassName, { "univer-border-primary-500": value === item.value }),
@@ -11842,7 +11934,7 @@ function getInsertTableHiddenObservable(accessor) {
 			editAreaSubscription = null;
 			if (unitId == null) return subscriber.next(true);
 			if (univerInstanceService.getUnitType(unitId) !== _univerjs_core.UniverInstanceType.UNIVER_DOC) return subscriber.next(true);
-			const currentRender = renderManagerService.getRenderById(unitId);
+			const currentRender = renderManagerService.getRenderUnitById(unitId);
 			if (currentRender == null) return subscriber.next(true);
 			editAreaSubscription = currentRender.with(_univerjs_docs.DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
 				subscriber.next(editArea === _univerjs_engine_render.DocumentEditArea.HEADER || editArea === _univerjs_engine_render.DocumentEditArea.FOOTER);
@@ -11873,7 +11965,7 @@ function disableMenuWhenHeaderFooterEditing(accessor) {
 				emit(true);
 				return;
 			}
-			const currentRender = renderManagerService.getRenderById(unitId);
+			const currentRender = renderManagerService.getRenderUnitById(unitId);
 			const skeletonManager = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService);
 			const viewModel = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getViewModel();
 			if (!viewModel) {
@@ -11894,7 +11986,7 @@ function disableMenuWhenHeaderFooterEditing(accessor) {
 		};
 	});
 }
-function getHeaderFooterMenuHiddenObservable(accessor) {
+function getTraditionalDocMenuHiddenObservable(accessor) {
 	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 	const commandService = accessor.get(_univerjs_core.ICommandService);
 	return new rxjs.Observable((subscriber) => {
@@ -12502,11 +12594,60 @@ function HeaderFooterMenuItemFactory(accessor) {
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "HeaderFooterIcon",
 		tooltip: "docs-ui.toolbar.headerFooter",
-		hidden$: (0, rxjs.combineLatest)((0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => {
+		hidden$: (0, rxjs.combineLatest)((0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC), getTraditionalDocMenuHiddenObservable(accessor), (one, two) => {
 			return one || two;
 		})
 	};
 }
+const DOC_BREAKS_MENU_ID = "doc.menu.breaks";
+const DOC_SECTION_BREAK_NEXT_PAGE_MENU_ID = "doc.menu.section-break.next-page";
+const DOC_SECTION_BREAK_CONTINUOUS_MENU_ID = "doc.menu.section-break.continuous";
+const DOC_SECTION_BREAK_NEXT_COLUMN_MENU_ID = "doc.menu.section-break.next-column";
+const DOC_SECTION_BREAK_EVEN_PAGE_MENU_ID = "doc.menu.section-break.even-page";
+const DOC_SECTION_BREAK_ODD_PAGE_MENU_ID = "doc.menu.section-break.odd-page";
+function BreaksMenuFactory(accessor) {
+	return {
+		id: DOC_BREAKS_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "ColumnIcon",
+		tooltip: "docs-ui.toolbar.breaks",
+		disabled$: disableMenuWhenNoDocRange(accessor),
+		hidden$: (0, rxjs.combineLatest)((0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC), getTraditionalDocMenuHiddenObservable(accessor), (hidden, unsupported) => hidden || unsupported)
+	};
+}
+function InsertColumnBreakMenuFactory(accessor) {
+	return {
+		id: InsertDocumentColumnBreakOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		title: "docs-ui.toolbar.columnBreak",
+		disabled$: disableMenuWhenNoDocRange(accessor)
+	};
+}
+function createSectionBreakMenuItem(accessor, id, title, sectionType) {
+	return {
+		id,
+		commandId: InsertDocumentSectionBreakOperation.id,
+		params: { sectionType },
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		title,
+		disabled$: disableMenuWhenNoDocRange(accessor)
+	};
+}
+function InsertNextPageSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_NEXT_PAGE_MENU_ID, "docs-ui.toolbar.sectionBreakNextPage", _univerjs_core.SectionType.NEXT_PAGE);
+}
+function InsertContinuousSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_CONTINUOUS_MENU_ID, "docs-ui.toolbar.sectionBreakContinuous", _univerjs_core.SectionType.CONTINUOUS);
+}
+function InsertNextColumnSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_NEXT_COLUMN_MENU_ID, "docs-ui.toolbar.sectionBreakNextColumn", _univerjs_core.SectionType.NEXT_COLUMN);
+}
+function InsertEvenPageSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_EVEN_PAGE_MENU_ID, "docs-ui.toolbar.sectionBreakEvenPage", _univerjs_core.SectionType.EVEN_PAGE);
+}
+function InsertOddPageSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_ODD_PAGE_MENU_ID, "docs-ui.toolbar.sectionBreakOddPage", _univerjs_core.SectionType.ODD_PAGE);
+}
 const TableIcon = "GridIcon";
 const TABLE_MENU_ID = "doc.menu.table";
 function TableMenuFactory(accessor) {
@@ -13719,19 +13860,53 @@ const menuSchema = {
 			},
 			menuItemFactory: HorizontalLineFactory
 		},
-		[DOC_INSERT_EMOJI_MENU_ID]: {
+		[DOC_BREAKS_MENU_ID]: {
 			order: 4,
 			gridLayout: {
 				row: 1,
-				column: 3
+				column: 3,
+				rowSpan: 2,
+				showLabel: true
+			},
+			menuItemFactory: BreaksMenuFactory,
+			[InsertDocumentColumnBreakOperation.id]: {
+				order: 0,
+				menuItemFactory: InsertColumnBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_NEXT_PAGE_MENU_ID]: {
+				order: 1,
+				menuItemFactory: InsertNextPageSectionBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_CONTINUOUS_MENU_ID]: {
+				order: 2,
+				menuItemFactory: InsertContinuousSectionBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_NEXT_COLUMN_MENU_ID]: {
+				order: 3,
+				menuItemFactory: InsertNextColumnSectionBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_EVEN_PAGE_MENU_ID]: {
+				order: 4,
+				menuItemFactory: InsertEvenPageSectionBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_ODD_PAGE_MENU_ID]: {
+				order: 5,
+				menuItemFactory: InsertOddPageSectionBreakMenuFactory
+			}
+		},
+		[DOC_INSERT_EMOJI_MENU_ID]: {
+			order: 5,
+			gridLayout: {
+				row: 1,
+				column: 4
 			},
 			menuItemFactory: EmojiPickerMenuItemFactory
 		},
 		[DOC_INSERT_SYMBOL_MENU_ID]: {
-			order: 5,
+			order: 6,
 			gridLayout: {
 				row: 2,
-				column: 3
+				column: 4
 			},
 			menuItemFactory: SymbolPickerMenuItemFactory
 		}
@@ -14701,7 +14876,7 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends _unive
 		};
 	}
 	attachPopupToRect(rect, popup, unitId) {
-		const currentRender = this._renderManagerService.getRenderById(unitId);
+		const currentRender = this._renderManagerService.getRenderUnitById(unitId);
 		if (!currentRender) throw new Error(`Current render not found, unitId: ${unitId}`);
 		const popupInjector = this._resolveEmbeddedPopupInjector(unitId, currentRender);
 		const { position, position$, disposable } = this._createRectPositionObserver(rect, currentRender);
@@ -14730,7 +14905,7 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends _unive
 	* @returns disposable
 	*/
 	attachPopupToObject(targetObject, popup, unitId) {
-		const currentRender = this._renderManagerService.getRenderById(unitId);
+		const currentRender = this._renderManagerService.getRenderUnitById(unitId);
 		if (!currentRender) throw new Error(`Current render not found, unitId: ${unitId}`);
 		const popupInjector = this._resolveEmbeddedPopupInjector(unitId, currentRender);
 		const { position, position$, disposable } = this._createObjectPositionObserver(targetObject, currentRender);
@@ -14762,7 +14937,7 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends _unive
 	attachPopupToRange(range, popup, unitId) {
 		if (!this._univerInstanceService.getUnit(unitId)) throw new Error(`Document not found, unitId: ${unitId}`);
 		const { direction = "top", multipleDirection } = popup;
-		const currentRender = this._renderManagerService.getRenderById(unitId);
+		const currentRender = this._renderManagerService.getRenderUnitById(unitId);
 		if (!currentRender) throw new Error(`Current render not found, unitId: ${unitId}`);
 		const popupInjector = this._resolveEmbeddedPopupInjector(unitId, currentRender);
 		const { positions: bounds, positions$: bounds$, disposable } = this._createRangePositionObserver(range, currentRender);
@@ -15165,12 +15340,13 @@ let DocEventManagerService = class DocEventManagerService extends _univerjs_core
 		const customRanges = (_this$_context$unit$g = (_this$_context$unit$g2 = this._context.unit.getSelfOrHeaderFooterModel(segmentId)) === null || _this$_context$unit$g2 === void 0 || (_this$_context$unit$g2 = _this$_context$unit$g2.getBody()) === null || _this$_context$unit$g2 === void 0 ? void 0 : _this$_context$unit$g2.customRanges) !== null && _this$_context$unit$g !== void 0 ? _this$_context$unit$g : [];
 		const layouts = [];
 		customRanges.forEach((range) => {
-			const rects = calcDocRangePositions$1({
+			const textRange = {
 				startOffset: range.startIndex,
 				endOffset: range.endIndex + 1,
 				collapsed: false,
 				segmentId
-			}, this._documents, this._skeleton, segmentPage);
+			};
+			const rects = calcDocRangePositions$1(textRange, this._documents, this._skeleton, segmentPage);
 			if (!rects) return null;
 			layouts.push({
 				customRange: range,
@@ -15631,7 +15807,7 @@ function DocSideMenuContent() {
 	const fullDataStream = (_documentData$body$da = documentData === null || documentData === void 0 || (_documentData$body = documentData.body) === null || _documentData$body === void 0 ? void 0 : _documentData$body.dataStream) !== null && _documentData$body$da !== void 0 ? _documentData$body$da : "";
 	const [activeId, setActiveId] = (0, react.useState)(void 0);
 	const unitId = (_currentDoc$getUnitId = currentDoc === null || currentDoc === void 0 ? void 0 : currentDoc.getUnitId()) !== null && _currentDoc$getUnitId !== void 0 ? _currentDoc$getUnitId : "";
-	const renderer = renderManagerService.getRenderById(unitId);
+	const renderer = renderManagerService.getRenderUnitById(unitId);
 	const title = documentData === null || documentData === void 0 ? void 0 : documentData.title;
 	const docEventManagerService = renderer === null || renderer === void 0 ? void 0 : renderer.with(DocEventManagerService);
 	const paragraphBounds = docEventManagerService === null || docEventManagerService === void 0 ? void 0 : docEventManagerService.paragraphBounds;
@@ -15673,7 +15849,8 @@ function DocSideMenuContent() {
 	}).filter((item) => item === null || item === void 0 ? void 0 : item.text);
 	const handleScroll = (0, _univerjs_ui.useEvent)((params) => {
 		const scrollTop = params.viewportScrollY;
-		const activeId = findActiveHeading(paragraphBounds, paragraphMap, scrollTop, scrollTop + canvasHeight / scaleY);
+		const bottom = scrollTop + canvasHeight / scaleY;
+		const activeId = findActiveHeading(paragraphBounds, paragraphMap, scrollTop, bottom);
 		if (activeId) setActiveId(activeId);
 	});
 	const menus = (paragraphMenus === null || paragraphMenus === void 0 ? void 0 : paragraphMenus.find((p) => p.isTitle)) ? paragraphMenus : [...title ? [{
@@ -15800,7 +15977,7 @@ let DocUIController = class DocUIController extends _univerjs_core.Disposable {
 	_initFocusHandler() {
 		this.disposeWithMe(this._layoutService.registerFocusHandler(_univerjs_core.UniverInstanceType.UNIVER_DOC, (unitId) => {
 			if (this._shouldPreserveEmbedFocus(unitId)) return;
-			this._injector.get(_univerjs_engine_render.IRenderManagerService).getRenderById(unitId).with(DocSelectionRenderService).focus();
+			this._injector.get(_univerjs_engine_render.IRenderManagerService).getRenderUnitById(unitId).with(DocSelectionRenderService).focus();
 		}));
 	}
 	_shouldPreserveEmbedFocus(unitId) {
@@ -16056,7 +16233,8 @@ function resolveDocsCustomBlockRenderViewport(params) {
 			width: layoutWidth
 		};
 	}
-	const inset = MODERN_DOCS_CUSTOM_BLOCK_VIEWPORT_INSET / (params.scale && params.scale > 0 ? params.scale : 1);
+	const scale = params.scale && params.scale > 0 ? params.scale : 1;
+	const inset = MODERN_DOCS_CUSTOM_BLOCK_VIEWPORT_INSET / scale;
 	const docsLeft = (_params$docsLeft = params.docsLeft) !== null && _params$docsLeft !== void 0 ? _params$docsLeft : 0;
 	const fallbackViewportLeft = docsLeft + inset;
 	const fallbackViewportWidth = Math.max(0, pageWidth - inset * 2);
@@ -16082,7 +16260,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.0-alpha.7";
+var version = "1.0.0-alpha.8";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -16254,7 +16432,7 @@ function getSegmentId(documentStyle, editArea, pageIndex, page) {
 }
 const DocHeaderFooterOptions = (props) => {
 	var _segmentContext$segme, _segmentContext$segme2;
-	const docSelectionRenderService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService).getRenderById(props.unitId).with(DocSelectionRenderService);
+	const docSelectionRenderService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService).getRenderUnitById(props.unitId).with(DocSelectionRenderService);
 	const segmentContext = (0, _univerjs_ui.useObservable)(docSelectionRenderService.segmentContext$, {
 		segmentId: docSelectionRenderService.getSegment(),
 		segmentPage: docSelectionRenderService.getSegmentPage()
@@ -16269,12 +16447,12 @@ function DocHeaderFooterOptionsContent(props) {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
 	const { unitId } = props;
-	const docSelectionRenderService = renderManagerService.getRenderById(unitId).with(DocSelectionRenderService);
+	const docSelectionRenderService = renderManagerService.getRenderUnitById(unitId).with(DocSelectionRenderService);
 	const docDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 	const getCurrentSectionContext = () => {
 		var _renderManagerService, _docSkeletonManagerSe;
 		const snapshot = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot();
-		const docSkeletonManagerService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService);
+		const docSkeletonManagerService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService);
 		const page = docSkeletonManagerService === null || docSkeletonManagerService === void 0 || (_docSkeletonManagerSe = docSkeletonManagerService.getSkeleton) === null || _docSkeletonManagerSe === void 0 || (_docSkeletonManagerSe = _docSkeletonManagerSe.call(docSkeletonManagerService)) === null || _docSkeletonManagerSe === void 0 || (_docSkeletonManagerSe = _docSkeletonManagerSe.getSkeletonData()) === null || _docSkeletonManagerSe === void 0 ? void 0 : _docSkeletonManagerSe.pages[docSelectionRenderService.getSegmentPage()];
 		return snapshot == null ? void 0 : {
 			...getDocPageSectionContext(snapshot, page),
@@ -16292,7 +16470,7 @@ function DocHeaderFooterOptionsContent(props) {
 		};
 	});
 	const sectionContext = getCurrentSectionContext();
-	const referenceKey = (0, _univerjs_core.getSectionHeaderFooterReferenceKey)(((_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.with(_univerjs_docs.DocSkeletonManagerService)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.getViewModel()) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.getEditArea()) === _univerjs_engine_render.DocumentEditArea.FOOTER ? "footer" : "header", getHeaderFooterVariant((_sectionContext$confi = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config) !== null && _sectionContext$confi !== void 0 ? _sectionContext$confi : {}, docSelectionRenderService.getSegmentPage(), sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page));
+	const referenceKey = (0, _univerjs_core.getSectionHeaderFooterReferenceKey)(((_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.with(_univerjs_docs.DocSkeletonManagerService)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.getViewModel()) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.getEditArea()) === _univerjs_engine_render.DocumentEditArea.FOOTER ? "footer" : "header", getHeaderFooterVariant((_sectionContext$confi = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config) !== null && _sectionContext$confi !== void 0 ? _sectionContext$confi : {}, docSelectionRenderService.getSegmentPage(), sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page));
 	const canLinkToPrevious = ((_sectionContext$secti = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionIndex) !== null && _sectionContext$secti !== void 0 ? _sectionContext$secti : -1) > 0;
 	const [linkedToPrevious, setLinkedToPrevious] = (0, react.useState)(canLinkToPrevious && !(sectionContext === null || sectionContext === void 0 || (_sectionContext$secti2 = sectionContext.section) === null || _sectionContext$secti2 === void 0 ? void 0 : _sectionContext$secti2[referenceKey]));
 	const handleCheckboxChange = (val, type) => {
@@ -16303,7 +16481,7 @@ function DocHeaderFooterOptionsContent(props) {
 		}));
 		const sectionContext = getCurrentSectionContext();
 		const documentStyle = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config;
-		const docSkeletonManagerService = (_renderManagerService3 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService);
+		const docSkeletonManagerService = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService);
 		const viewModel = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getViewModel();
 		if (documentStyle == null || viewModel == null) return;
 		const editArea = viewModel.getEditArea();
@@ -16368,7 +16546,7 @@ function DocHeaderFooterOptionsContent(props) {
 		var _renderManagerService4;
 		const context = getCurrentSectionContext();
 		if (!(context === null || context === void 0 ? void 0 : context.sectionId) || context.sectionIndex <= 0 || !docDataModel) return;
-		const kind = ((_renderManagerService4 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService4 === void 0 || (_renderManagerService4 = _renderManagerService4.with(_univerjs_docs.DocSkeletonManagerService)) === null || _renderManagerService4 === void 0 || (_renderManagerService4 = _renderManagerService4.getViewModel()) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.getEditArea()) === _univerjs_engine_render.DocumentEditArea.FOOTER ? "footer" : "header";
+		const kind = ((_renderManagerService4 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService4 === void 0 || (_renderManagerService4 = _renderManagerService4.with(_univerjs_docs.DocSkeletonManagerService)) === null || _renderManagerService4 === void 0 || (_renderManagerService4 = _renderManagerService4.getViewModel()) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.getEditArea()) === _univerjs_engine_render.DocumentEditArea.FOOTER ? "footer" : "header";
 		const currentVariant = getHeaderFooterVariant(context.config, docSelectionRenderService.getSegmentPage(), context.page);
 		const key = (0, _univerjs_core.getSectionHeaderFooterReferenceKey)(kind, currentVariant);
 		const segmentId = (0, _univerjs_core.generateRandomId)(6);
@@ -16858,7 +17036,7 @@ const useFirstParagraphLineSpacing = (paragraph) => {
 		var _renderManagerService;
 		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (!docDataModel) return;
-		return (_renderManagerService = renderManagerService.getRenderById(docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getUnitId())) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		return (_renderManagerService = renderManagerService.getRenderUnitById(docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getUnitId())) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
 	}, []);
 	const stateChange$ = (0, react.useMemo)(() => new rxjs.BehaviorSubject({}), []);
 	const [spacingRule, setSpacingRuleInternal] = (0, react.useState)(() => {
@@ -16887,7 +17065,8 @@ const useFirstParagraphLineSpacing = (paragraph) => {
 			const divideNode = glyphNode === null || glyphNode === void 0 ? void 0 : glyphNode.parent;
 			const metrics = getLineSpacingMetrics(divideNode === null || divideNode === void 0 ? void 0 : divideNode.parent);
 			const nextStoredLineSpacing = convertLineSpacingForRuleChange(convertDisplayLineSpacingToStoredValue(lineSpacing, spacingRule), spacingRule, v, metrics);
-			setLineSpacingInternal(convertStoredLineSpacingToDisplayValue(nextStoredLineSpacing, v));
+			const nextDisplayLineSpacing = convertStoredLineSpacingToDisplayValue(nextStoredLineSpacing, v);
+			setLineSpacingInternal(nextDisplayLineSpacing);
 			setSpacingRuleInternal(v);
 			stateChange$.next({
 				spacingRule: v,
@@ -17930,9 +18109,6 @@ const PARAGRAPH_MENU_HOVER_OPEN_DELAY = 800;
 const PARAGRAPH_MENU_HOVER_HIDE_DELAY = 240;
 const PARAGRAPH_MENU_HOVER_BRIDGE_EDGE_OVERLAP = 12;
 const PARAGRAPH_MENU_HOVER_BRIDGE_VERTICAL_PADDING = 8;
-function getParagraphMenuTriggerClassName(visible) {
-	return (0, _univerjs_design.clsx)("univer-mr-1 univer-inline-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1 univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-px-2 univer-py-0 univer-shadow-sm univer-transition-colors hover:univer-bg-gray-50 hover:univer-shadow-md dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:hover:!univer-bg-gray-800", { "univer-bg-gray-100 univer-shadow-md dark:!univer-bg-gray-800": visible });
-}
 function shouldExecuteParagraphMenuMove(validatorService, context) {
 	return validatorService.canMoveBlock(context);
 }
@@ -18416,7 +18592,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const handledSlashRequestNonceRef = (0, react.useRef)(0);
 	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const renderUnit = renderManagerService.getRenderById(popup.unitId);
+	const renderUnit = renderManagerService.getRenderUnitById(popup.unitId);
 	const doc = univerInstanceService.getUnit(popup.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 	const docParagraphMenuService = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit.with(DocParagraphMenuService);
 	const docEventManagerService = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit.with(DocEventManagerService);
@@ -18455,10 +18631,11 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		const boundingRect = (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.getBoundingClientRect();
 		const left = ((_boundingRect$left = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) !== null && _boundingRect$left !== void 0 ? _boundingRect$left : 0) - 4;
 		const right = (_boundingRect$right = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.right) !== null && _boundingRect$right !== void 0 ? _boundingRect$right : 0;
+		const viewportWidth = (_anchorRef$current$ow = (_anchorRef$current2 = anchorRef.current) === null || _anchorRef$current2 === void 0 || (_anchorRef$current2 = _anchorRef$current2.ownerDocument.defaultView) === null || _anchorRef$current2 === void 0 ? void 0 : _anchorRef$current2.innerWidth) !== null && _anchorRef$current$ow !== void 0 ? _anchorRef$current$ow : window.innerWidth;
 		setMenuDirection(getParagraphMenuPopupDirection(left, 212, 8, {
 			anchorRight: right,
 			direction,
-			viewportWidth: (_anchorRef$current$ow = (_anchorRef$current2 = anchorRef.current) === null || _anchorRef$current2 === void 0 || (_anchorRef$current2 = _anchorRef$current2.ownerDocument.defaultView) === null || _anchorRef$current2 === void 0 ? void 0 : _anchorRef$current2.innerWidth) !== null && _anchorRef$current$ow !== void 0 ? _anchorRef$current$ow : window.innerWidth
+			viewportWidth
 		}));
 		const nextAnchorRect = {
 			left,
@@ -18492,10 +18669,11 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		clearHideTimer();
 		const latestTarget = (_docParagraphMenuServ = docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) !== null && _docParagraphMenuServ !== void 0 ? _docParagraphMenuServ : activeTarget;
 		setParagraphMenuInteractionActive(docParagraphMenuService, true);
-		targetRangeRef.current = latestTarget ? {
+		const targetRange = latestTarget ? {
 			...latestTarget.menuRange,
 			segmentId: activeParagraphBound === null || activeParagraphBound === void 0 ? void 0 : activeParagraphBound.segmentId
 		} : getParagraphMenuTargetRange(activeParagraphBound);
+		targetRangeRef.current = targetRange;
 		updateAnchorRect();
 		setOpenMode(mode);
 		setVisible(true);
@@ -18523,7 +18701,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	};
 	const replaceSelection = (range) => {
 		if (!range) return;
-		docSelectionManagerService.replaceTextRanges([range], false);
+		docSelectionManagerService.replaceDocRanges([range], void 0, false);
 	};
 	const getCurrentTextRangesSnapshot = () => {
 		var _docSelectionManagerS;
@@ -18531,7 +18709,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	};
 	const restoreTextRanges = (ranges) => {
 		if (!ranges) return;
-		docSelectionManagerService.replaceTextRanges(ranges, false);
+		docSelectionManagerService.replaceDocRanges(ranges, void 0, false);
 	};
 	const executeResolvedCommand = (option, targetRange) => {
 		const resolved = getParagraphMenuResolvedCommand(option, targetRange);
@@ -18690,7 +18868,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-u-comp": "paragraph-menu",
 			ref: anchorRef,
-			className: getParagraphMenuTriggerClassName(visible),
+			className: (0, _univerjs_design.clsx)("univer-mr-1 univer-inline-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1 univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-px-2 univer-py-0 univer-shadow-sm univer-transition-colors hover:univer-bg-gray-50 hover:univer-shadow-md dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:hover:!univer-bg-gray-800", { "univer-bg-gray-100 univer-shadow-md dark:!univer-bg-gray-800": visible }),
 			onMouseEnter: (e) => {
 				var _popup$onPointerEnter;
 				(_popup$onPointerEnter = popup.onPointerEnter) === null || _popup$onPointerEnter === void 0 || _popup$onPointerEnter.call(popup, e);
@@ -18862,13 +19040,13 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 								return;
 							}
 							if (commandId === DocPasteCommand.id) {
-								docSelectionManagerService.replaceTextRanges([afterTableRange], false);
+								docSelectionManagerService.replaceDocRanges([afterTableRange], void 0, false);
 								await commandService.executeCommand(DocPasteCommand.id);
 								finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
 								return;
 							}
-							if (commandId === DocTableDeleteTableCommand.id) docSelectionManagerService.replaceTextRanges([tableRange], false);
-							else if (params.id === "doc.menu.insert-bellow" || commandId !== "doc.menu.insert-bellow") docSelectionManagerService.replaceTextRanges([afterTableRange], false);
+							if (commandId === DocTableDeleteTableCommand.id) docSelectionManagerService.replaceDocRanges([tableRange], void 0, false);
+							else if (params.id === "doc.menu.insert-bellow" || commandId !== "doc.menu.insert-bellow") docSelectionManagerService.replaceDocRanges([afterTableRange], void 0, false);
 							if (commandService && commandId) commandService.executeCommand(commandId, commandId === DocTableDeleteTableCommand.id ? {
 								...commandParams,
 								targetRange: tableRange
@@ -18928,7 +19106,7 @@ function getSectionColumnGap(section) {
 	var _section$columnProper2, _section$columnProper3;
 	return (_section$columnProper2 = (_section$columnProper3 = section.columnProperties) === null || _section$columnProper3 === void 0 || (_section$columnProper3 = _section$columnProper3[0]) === null || _section$columnProper3 === void 0 ? void 0 : _section$columnProper3.paddingEnd) !== null && _section$columnProper2 !== void 0 ? _section$columnProper2 : DEFAULT_SECTION_COLUMN_GAP;
 }
-function getSectionSettingValues(sections) {
+function getSectionSettingValues(sections, documentStyle) {
 	return {
 		columnCount: getCommonValue(sections.map(getSectionColumnCount)),
 		columnGap: getCommonValue(sections.map(getSectionColumnGap)),
@@ -18939,6 +19117,38 @@ function getSectionSettingValues(sections) {
 		sectionType: getCommonValue(sections.map((section) => {
 			var _section$sectionType;
 			return (_section$sectionType = section.sectionType) !== null && _section$sectionType !== void 0 ? _section$sectionType : _univerjs_core.SectionType.SECTION_TYPE_UNSPECIFIED;
+		})),
+		pageWidth: getCommonValue(sections.map((section) => {
+			var _section$pageSize$wid, _section$pageSize, _documentStyle$pageSi;
+			return (_section$pageSize$wid = (_section$pageSize = section.pageSize) === null || _section$pageSize === void 0 ? void 0 : _section$pageSize.width) !== null && _section$pageSize$wid !== void 0 ? _section$pageSize$wid : (_documentStyle$pageSi = documentStyle.pageSize) === null || _documentStyle$pageSi === void 0 ? void 0 : _documentStyle$pageSi.width;
+		})),
+		pageHeight: getCommonValue(sections.map((section) => {
+			var _section$pageSize$hei, _section$pageSize2, _documentStyle$pageSi2;
+			return (_section$pageSize$hei = (_section$pageSize2 = section.pageSize) === null || _section$pageSize2 === void 0 ? void 0 : _section$pageSize2.height) !== null && _section$pageSize$hei !== void 0 ? _section$pageSize$hei : (_documentStyle$pageSi2 = documentStyle.pageSize) === null || _documentStyle$pageSi2 === void 0 ? void 0 : _documentStyle$pageSi2.height;
+		})),
+		pageOrient: getCommonValue(sections.map((section) => {
+			var _section$pageOrient;
+			return (_section$pageOrient = section.pageOrient) !== null && _section$pageOrient !== void 0 ? _section$pageOrient : documentStyle.pageOrient;
+		})),
+		marginTop: getCommonValue(sections.map((section) => {
+			var _ref, _section$marginTop;
+			return (_ref = (_section$marginTop = section.marginTop) !== null && _section$marginTop !== void 0 ? _section$marginTop : documentStyle.marginTop) !== null && _ref !== void 0 ? _ref : 0;
+		})),
+		marginBottom: getCommonValue(sections.map((section) => {
+			var _ref2, _section$marginBottom;
+			return (_ref2 = (_section$marginBottom = section.marginBottom) !== null && _section$marginBottom !== void 0 ? _section$marginBottom : documentStyle.marginBottom) !== null && _ref2 !== void 0 ? _ref2 : 0;
+		})),
+		marginLeft: getCommonValue(sections.map((section) => {
+			var _ref3, _section$marginLeft;
+			return (_ref3 = (_section$marginLeft = section.marginLeft) !== null && _section$marginLeft !== void 0 ? _section$marginLeft : documentStyle.marginLeft) !== null && _ref3 !== void 0 ? _ref3 : 0;
+		})),
+		marginRight: getCommonValue(sections.map((section) => {
+			var _ref4, _section$marginRight;
+			return (_ref4 = (_section$marginRight = section.marginRight) !== null && _section$marginRight !== void 0 ? _section$marginRight : documentStyle.marginRight) !== null && _ref4 !== void 0 ? _ref4 : 0;
+		})),
+		pageNumberStart: getCommonValue(sections.map((section) => {
+			var _ref5, _section$pageNumberSt;
+			return (_ref5 = (_section$pageNumberSt = section.pageNumberStart) !== null && _section$pageNumberSt !== void 0 ? _section$pageNumberSt : documentStyle.pageNumberStart) !== null && _ref5 !== void 0 ? _ref5 : 1;
 		}))
 	};
 }
@@ -18952,6 +19162,23 @@ function createSectionColumnUpdates(sections, documentStyle, change) {
 		};
 	});
 }
+function createSectionOrientationUpdates(sections, documentStyle, pageOrient) {
+	return sections.map((section) => {
+		var _ref6, _section$pageOrient2, _section$pageSize3;
+		const currentOrient = (_ref6 = (_section$pageOrient2 = section.pageOrient) !== null && _section$pageOrient2 !== void 0 ? _section$pageOrient2 : documentStyle.pageOrient) !== null && _ref6 !== void 0 ? _ref6 : _univerjs_core.PageOrientType.PORTRAIT;
+		const currentPageSize = (_section$pageSize3 = section.pageSize) !== null && _section$pageSize3 !== void 0 ? _section$pageSize3 : documentStyle.pageSize;
+		return {
+			sectionId: section.sectionId,
+			config: {
+				pageOrient,
+				...currentOrient !== pageOrient && (currentPageSize === null || currentPageSize === void 0 ? void 0 : currentPageSize.width) != null && currentPageSize.height != null ? { pageSize: {
+					width: currentPageSize.height,
+					height: currentPageSize.width
+				} } : {}
+			}
+		};
+	});
+}
 function getSelectedSections(documentDataModel, ranges) {
 	const body = documentDataModel.getBody();
 	if (!body || ranges.length === 0 || ranges.some((range) => Boolean(range.segmentId))) return [];
@@ -18965,14 +19192,24 @@ function getSelectedSections(documentDataModel, ranges) {
 		});
 	});
 }
+function navigateToSection(controller, documentDataModel, sections, sectionId) {
+	const index = sections.findIndex((section) => section.sectionId === sectionId);
+	if (!documentDataModel || index < 0) return;
+	controller.navigateToSectionEnd(documentDataModel.getUnitId(), index === 0 ? 0 : sections[index - 1].startIndex + 1, sections[index].startIndex);
+}
 function useSectionSetting() {
+	var _documentDataModel$ge;
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const instanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const selectionManager = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocSelectionManagerService);
+	const controller = (0, _univerjs_ui.useDependency)(DocSectionSettingController);
 	const documentDataModel = (0, _univerjs_ui.useObservable)((0, react.useMemo)(() => instanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC), [instanceService]));
 	const resolveSections = () => (documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDocumentStyle().documentFlavor) === _univerjs_core.DocumentFlavor.TRADITIONAL ? getSelectedSections(documentDataModel, selectionManager.getDocRanges()) : [];
 	const sections = (0, _univerjs_ui.useObservable)(documentDataModel ? () => (0, rxjs.combineLatest)([selectionManager.textSelection$.pipe((0, rxjs.startWith)(void 0)), documentDataModel.change$.pipe((0, rxjs.startWith)(void 0))]).pipe((0, rxjs.map)(resolveSections)) : null, resolveSections(), false, [documentDataModel, selectionManager]);
-	const values = getSectionSettingValues(sections);
+	const documentStyle = (_documentDataModel$ge = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDocumentStyle()) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : {};
+	const values = getSectionSettingValues(sections, documentStyle);
+	const body = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getBody();
+	const allSections = (documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDocumentStyle().documentFlavor) === _univerjs_core.DocumentFlavor.TRADITIONAL && body ? (0, _univerjs_docs.getTopLevelSectionBreaks)(body) : [];
 	const update = (updates) => {
 		if (!documentDataModel || updates.length === 0) return Promise.resolve(false);
 		return commandService.executeCommand(_univerjs_docs.UpdateDocumentSectionCommand.id, {
@@ -18987,7 +19224,15 @@ function useSectionSetting() {
 	return {
 		valid: Boolean(documentDataModel && sections.length > 0),
 		selectedCount: sections.length,
+		sectionOptions: allSections.map((section, index) => ({
+			label: `#${index + 1}`,
+			value: section.sectionId
+		})),
+		selectedSectionId: sections.length === 1 ? sections[0].sectionId : void 0,
 		...values,
+		selectSection(sectionId) {
+			navigateToSection(controller, documentDataModel !== null && documentDataModel !== void 0 ? documentDataModel : void 0, allSections, sectionId);
+		},
 		setColumnCount(value) {
 			const next = Math.max(1, Math.round(value));
 			return update(documentDataModel ? createSectionColumnUpdates(sections, documentDataModel.getDocumentStyle(), { columnCount: next }) : []);
@@ -19001,6 +19246,44 @@ function useSectionSetting() {
 		},
 		setSectionType(value) {
 			return updateAll({ sectionType: value });
+		},
+		setPageWidth(value) {
+			return update(sections.map((section) => ({
+				sectionId: section.sectionId,
+				config: { pageSize: {
+					...documentStyle.pageSize,
+					...section.pageSize,
+					width: Math.max(1, value)
+				} }
+			})));
+		},
+		setPageHeight(value) {
+			return update(sections.map((section) => ({
+				sectionId: section.sectionId,
+				config: { pageSize: {
+					...documentStyle.pageSize,
+					...section.pageSize,
+					height: Math.max(1, value)
+				} }
+			})));
+		},
+		setPageOrient(value) {
+			return update(createSectionOrientationUpdates(sections, documentStyle, value));
+		},
+		setMarginTop(value) {
+			return updateAll({ marginTop: Math.max(0, value) });
+		},
+		setMarginBottom(value) {
+			return updateAll({ marginBottom: Math.max(0, value) });
+		},
+		setMarginLeft(value) {
+			return updateAll({ marginLeft: Math.max(0, value) });
+		},
+		setMarginRight(value) {
+			return updateAll({ marginRight: Math.max(0, value) });
+		},
+		setPageNumberStart(value) {
+			return updateAll({ pageNumberStart: Math.max(1, Math.round(value)) });
 		}
 	};
 }
@@ -19011,9 +19294,9 @@ function SettingRow(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "univer-grid univer-min-h-8 univer-items-center univer-gap-3",
 		style: { gridTemplateColumns: "minmax(0, 1fr) minmax(140px, 160px)" },
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-min-w-0 univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-text-gray-100",
-			children: props.label
+			children: [props.label, props.unit]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-w-full univer-min-w-0",
 			children: props.children
@@ -19021,27 +19304,11 @@ function SettingRow(props) {
 	});
 }
 function SectionSetting() {
+	var _setting$selectedSect;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const controller = (0, _univerjs_ui.useDependency)(DocSectionSettingController);
 	const setting = useSectionSetting();
-	const labels = (0, react.useMemo)(() => ({
-		selectedSections: localeService.t("docs-ui.doc.sectionSetting.selectedSections", String(setting.selectedCount)),
-		columnCount: localeService.t("docs-ui.doc.sectionSetting.columnCount"),
-		columnGap: `${localeService.t("docs-ui.doc.sectionSetting.columnGap")}(px)`,
-		columnSeparator: localeService.t("docs-ui.doc.sectionSetting.columnSeparator"),
-		none: localeService.t("docs-ui.doc.sectionSetting.none"),
-		betweenColumns: localeService.t("docs-ui.doc.sectionSetting.betweenColumns"),
-		sectionStart: localeService.t("docs-ui.doc.sectionSetting.sectionStart"),
-		unspecified: localeService.t("docs-ui.doc.sectionSetting.unspecified"),
-		continuous: localeService.t("docs-ui.doc.sectionSetting.continuous"),
-		nextPage: localeService.t("docs-ui.doc.sectionSetting.nextPage"),
-		evenPage: localeService.t("docs-ui.doc.sectionSetting.evenPage"),
-		oddPage: localeService.t("docs-ui.doc.sectionSetting.oddPage")
-	}), [
-		(0, _univerjs_ui.useObservable)(localeService.currentLocale$),
-		localeService,
-		setting.selectedCount
-	]);
+	(0, _univerjs_ui.useObservable)(localeService.currentLocale$);
 	(0, react.useEffect)(() => {
 		if (!setting.valid) controller.closePanel();
 	}, [controller, setting.valid]);
@@ -19050,13 +19317,27 @@ function SectionSetting() {
 		className: "univer-box-border univer-w-full",
 		children: [setting.selectedCount > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-mb-4 univer-text-xs univer-text-gray-600 dark:!univer-text-gray-300",
-			children: labels.selectedSections
+			children: localeService.t("docs-ui.doc.sectionSetting.selectedSections", `${setting.selectedCount}`)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-grid univer-gap-3",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-					label: labels.columnCount,
+					label: localeService.t("docs-ui.doc.slider.sectionSetting"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+						className: "univer-w-full",
+						value: (_setting$selectedSect = setting.selectedSectionId) !== null && _setting$selectedSect !== void 0 ? _setting$selectedSect : "",
+						options: [...setting.selectedSectionId == null ? [{
+							label: localeService.t("docs-ui.doc.sectionSetting.multipleValues"),
+							value: "",
+							disabled: true
+						}] : [], ...setting.sectionOptions],
+						onChange: setting.selectSection
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.columnCount"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.doc.sectionSetting.columnCount"),
 						className: "univer-w-full",
 						min: 1,
 						max: 12,
@@ -19067,8 +19348,10 @@ function SectionSetting() {
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-					label: labels.columnGap,
+					label: localeService.t("docs-ui.doc.sectionSetting.columnGap"),
+					unit: " (px)",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.doc.sectionSetting.columnGap"),
 						className: "univer-w-full",
 						min: 0,
 						max: 1e3,
@@ -19079,49 +19362,183 @@ function SectionSetting() {
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-					label: labels.columnSeparator,
+					label: localeService.t("docs-ui.doc.sectionSetting.columnSeparator"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 						className: "univer-w-full",
-						value: setting.separatorType == null ? "" : String(setting.separatorType),
-						options: [{
-							label: labels.none,
-							value: String(_univerjs_core.ColumnSeparatorType.NONE)
-						}, {
-							label: labels.betweenColumns,
-							value: String(_univerjs_core.ColumnSeparatorType.BETWEEN_EACH_COLUMN)
-						}],
+						value: setting.separatorType == null ? "" : `${setting.separatorType}`,
+						options: [
+							...setting.separatorType == null ? [{
+								label: localeService.t("docs-ui.doc.sectionSetting.multipleValues"),
+								value: "",
+								disabled: true
+							}] : [],
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.none"),
+								value: `${_univerjs_core.ColumnSeparatorType.NONE}`
+							},
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.betweenColumns"),
+								value: `${_univerjs_core.ColumnSeparatorType.BETWEEN_EACH_COLUMN}`
+							}
+						],
 						onChange: (value) => setting.setSeparatorType(Number(value))
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-					label: labels.sectionStart,
+					label: localeService.t("docs-ui.doc.sectionSetting.sectionStart"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 						className: "univer-w-full",
-						value: setting.sectionType == null ? "" : String(setting.sectionType),
+						value: setting.sectionType == null ? "" : `${setting.sectionType}`,
 						options: [
+							...setting.sectionType == null ? [{
+								label: localeService.t("docs-ui.doc.sectionSetting.multipleValues"),
+								value: "",
+								disabled: true
+							}] : [],
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.unspecified"),
+								value: `${_univerjs_core.SectionType.SECTION_TYPE_UNSPECIFIED}`
+							},
 							{
-								label: labels.unspecified,
-								value: String(_univerjs_core.SectionType.SECTION_TYPE_UNSPECIFIED)
+								label: localeService.t("docs-ui.doc.sectionSetting.continuous"),
+								value: `${_univerjs_core.SectionType.CONTINUOUS}`
 							},
 							{
-								label: labels.continuous,
-								value: String(_univerjs_core.SectionType.CONTINUOUS)
+								label: localeService.t("docs-ui.doc.sectionSetting.nextColumn"),
+								value: `${_univerjs_core.SectionType.NEXT_COLUMN}`
 							},
 							{
-								label: labels.nextPage,
-								value: String(_univerjs_core.SectionType.NEXT_PAGE)
+								label: localeService.t("docs-ui.doc.sectionSetting.nextPage"),
+								value: `${_univerjs_core.SectionType.NEXT_PAGE}`
 							},
 							{
-								label: labels.evenPage,
-								value: String(_univerjs_core.SectionType.EVEN_PAGE)
+								label: localeService.t("docs-ui.doc.sectionSetting.evenPage"),
+								value: `${_univerjs_core.SectionType.EVEN_PAGE}`
 							},
 							{
-								label: labels.oddPage,
-								value: String(_univerjs_core.SectionType.ODD_PAGE)
+								label: localeService.t("docs-ui.doc.sectionSetting.oddPage"),
+								value: `${_univerjs_core.SectionType.ODD_PAGE}`
 							}
 						],
 						onChange: (value) => setting.setSectionType(Number(value))
 					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-pt-2 univer-text-sm univer-font-medium",
+					children: localeService.t("docs-ui.doc.sectionSetting.pageSetup")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.pageWidth"),
+					unit: " (px)",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.doc.sectionSetting.pageWidth"),
+						className: "univer-w-full",
+						min: 1,
+						step: 1,
+						precision: 1,
+						value: setting.pageWidth,
+						onChange: (value) => value != null && setting.setPageWidth(value)
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.pageHeight"),
+					unit: " (px)",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.doc.sectionSetting.pageHeight"),
+						className: "univer-w-full",
+						min: 1,
+						step: 1,
+						precision: 1,
+						value: setting.pageHeight,
+						onChange: (value) => value != null && setting.setPageHeight(value)
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.orientation"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+						className: "univer-w-full",
+						value: setting.pageOrient == null ? "" : `${setting.pageOrient}`,
+						options: [
+							...setting.pageOrient == null ? [{
+								label: localeService.t("docs-ui.doc.sectionSetting.multipleValues"),
+								value: "",
+								disabled: true
+							}] : [],
+							{
+								label: localeService.t("docs-ui.page-settings.portrait"),
+								value: `${_univerjs_core.PageOrientType.PORTRAIT}`
+							},
+							{
+								label: localeService.t("docs-ui.page-settings.landscape"),
+								value: `${_univerjs_core.PageOrientType.LANDSCAPE}`
+							}
+						],
+						onChange: (value) => setting.setPageOrient(Number(value))
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.top"),
+					unit: " (px)",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.page-settings.top"),
+						className: "univer-w-full",
+						min: 0,
+						step: 1,
+						precision: 1,
+						value: setting.marginTop,
+						onChange: (value) => value != null && setting.setMarginTop(value)
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.bottom"),
+					unit: " (px)",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.page-settings.bottom"),
+						className: "univer-w-full",
+						min: 0,
+						step: 1,
+						precision: 1,
+						value: setting.marginBottom,
+						onChange: (value) => value != null && setting.setMarginBottom(value)
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.left"),
+					unit: " (px)",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.page-settings.left"),
+						className: "univer-w-full",
+						min: 0,
+						step: 1,
+						precision: 1,
+						value: setting.marginLeft,
+						onChange: (value) => value != null && setting.setMarginLeft(value)
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.right"),
+					unit: " (px)",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.page-settings.right"),
+						className: "univer-w-full",
+						min: 0,
+						step: 1,
+						precision: 1,
+						value: setting.marginRight,
+						onChange: (value) => value != null && setting.setMarginRight(value)
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.pageNumberStart"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						"aria-label": localeService.t("docs-ui.doc.sectionSetting.pageNumberStart"),
+						className: "univer-w-full",
+						min: 1,
+						step: 1,
+						precision: 0,
+						value: setting.pageNumberStart,
+						onChange: (value) => value != null && setting.setPageNumberStart(value)
+					})
 				})
 			]
 		})]
@@ -19226,6 +19643,7 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			AddImageIcon: _univerjs_icons.AddImageIcon,
 			BoldIcon: _univerjs_icons.BoldIcon,
 			CopyDoubleIcon: _univerjs_icons.CopyDoubleIcon,
+			ColumnIcon: _univerjs_icons.ColumnIcon,
 			CutIcon: _univerjs_icons.CutIcon,
 			DeleteColumnDoubleIcon: _univerjs_icons.DeleteColumnDoubleIcon,
 			DeleteIcon: _univerjs_icons.DeleteIcon,
@@ -19367,7 +19785,7 @@ let DocAutoFormatController = class DocAutoFormatController extends _univerjs_co
 			match: (context) => {
 				const { selection, unit } = context;
 				const { startNodePosition, endNodePosition } = selection;
-				const renderObject = this._renderManagerService.getRenderById(unit.getUnitId());
+				const renderObject = this._renderManagerService.getRenderUnitById(unit.getUnitId());
 				const skeleton = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
 				if (skeleton == null) return false;
 				if (startNodePosition && endNodePosition && isInSameTableCellData(skeleton, startNodePosition, endNodePosition)) return true;
@@ -19505,9 +19923,10 @@ var TextBubbleShape = class TextBubbleShape extends _univerjs_engine_render.Shap
 		ctx.save();
 		ctx.font = "13px Source Han Sans CN";
 		const textWidth = ctx.measureText(text).width;
+		const realInfoWidth = Math.min(textWidth + 2 * 6, 200);
 		drawBubble(ctx, {
 			height: 18,
-			width: Math.min(textWidth + 2 * 6, 200),
+			width: realInfoWidth,
 			radius: 4,
 			fill: color,
 			evented: false
@@ -19828,13 +20247,14 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 		}));
 	}
 	_handleShiftMoveSelection(direction, granularity = "character") {
-		var _this$_renderManagerS, _docDataModel$getSelf, _body$dataStream$leng, _docDataModel$getCust;
+		var _docDataModel$getSelf, _body$dataStream$leng, _docDataModel$getCust;
 		const activeRange = this._textSelectionManagerService.getActiveTextRange();
 		const allRanges = this._textSelectionManagerService.getTextRanges();
 		const docDataModel = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null) return;
-		const skeleton = (_this$_renderManagerS = this._renderManagerService.getRenderById(docDataModel.getUnitId())) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const docObject = this._getDocObject();
+		const currentRender = this._renderManagerService.getRenderUnitById(docDataModel.getUnitId());
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const docObject = currentRender ? neoGetDocObject(currentRender) : null;
 		if (activeRange == null || skeleton == null || docObject == null) return;
 		const { startOffset, endOffset, style, collapsed, direction: rangeDirection, segmentId, startNodePosition, endNodePosition, segmentPage } = activeRange;
 		const normalizedSegmentId = segmentId !== null && segmentId !== void 0 ? segmentId : "";
@@ -19846,11 +20266,11 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 				min = Math.min(min, range.startOffset);
 				max = Math.max(max, range.endOffset);
 			}
-			this._textSelectionManagerService.replaceTextRanges([{
+			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: direction === _univerjs_core.Direction.LEFT || direction === _univerjs_core.Direction.UP ? max : min,
 				endOffset: direction === _univerjs_core.Direction.LEFT || direction === _univerjs_core.Direction.UP ? min : max,
 				style
-			}], false);
+			}], void 0, false);
 			return;
 		}
 		const anchorOffset = collapsed ? startOffset : rangeDirection === _univerjs_core.RANGE_DIRECTION.FORWARD ? startOffset : endOffset;
@@ -19864,11 +20284,11 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 			if (nextOffset == null || nextOffset === focusOffset) return;
 			const normalizedNextOffset = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, nextOffset, direction, normalizedSegmentId, normalizedSegmentPage);
 			if (normalizedNextOffset == null || normalizedNextOffset === focusOffset) return;
-			this._textSelectionManagerService.replaceTextRanges([{
+			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: anchorOffset,
 				endOffset: normalizedNextOffset,
 				style
-			}], false);
+			}], void 0, false);
 			this._scrollToFocusNodePosition(docDataModel.getUnitId(), normalizedNextOffset);
 			return;
 		}
@@ -19878,11 +20298,11 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 			const curGlyph = skeleton.findNodeByCharIndex(focusOffset, segmentId, segmentPage);
 			focusOffset = direction === _univerjs_core.Direction.RIGHT ? focusOffset + curGlyph.count : focusOffset - ((_preGlyph$count = preGlyph === null || preGlyph === void 0 ? void 0 : preGlyph.count) !== null && _preGlyph$count !== void 0 ? _preGlyph$count : 0);
 			focusOffset = Math.min(dataStreamLength - 2, Math.max(0, focusOffset));
-			this._textSelectionManagerService.replaceTextRanges([{
+			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: anchorOffset,
 				endOffset: focusOffset,
 				style
-			}], false);
+			}], void 0, false);
 			this._scrollToFocusNodePosition(docDataModel.getUnitId(), focusOffset);
 		} else {
 			const focusGlyph = skeleton.findNodeByCharIndex(focusOffset, segmentId, segmentPage);
@@ -19892,32 +20312,33 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 			if (newPos == null) {
 				const newFocusOffset = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, direction === _univerjs_core.Direction.UP ? 0 : dataStreamLength - 2, direction, normalizedSegmentId, normalizedSegmentPage);
 				if (newFocusOffset == null || newFocusOffset === focusOffset) return;
-				this._textSelectionManagerService.replaceTextRanges([{
+				this._textSelectionManagerService.replaceDocRanges([{
 					startOffset: anchorOffset,
 					endOffset: newFocusOffset,
 					style
-				}], false);
+				}], void 0, false);
 				return;
 			}
 			const newActiveRange = new NodePositionConvertToCursor(documentOffsetConfig, skeleton).getRangePointData(newPos, newPos).cursorList[0];
 			const newFocusOffset = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, newActiveRange.endOffset, direction, normalizedSegmentId, normalizedSegmentPage);
 			if (newFocusOffset == null || newFocusOffset === focusOffset) return;
-			this._textSelectionManagerService.replaceTextRanges([{
+			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: anchorOffset,
 				endOffset: newFocusOffset,
 				style
-			}], false);
+			}], void 0, false);
 			this._scrollToFocusNodePosition(docDataModel.getUnitId(), newFocusOffset);
 		}
 	}
 	_handleMoveCursor(direction, granularity = "character") {
-		var _this$_renderManagerS2, _docDataModel$getSelf2, _body$dataStream$leng2, _docDataModel$getCust2;
+		var _docDataModel$getSelf2, _body$dataStream$leng2, _docDataModel$getCust2;
 		const activeRange = this._textSelectionManagerService.getActiveTextRange();
 		const allRanges = this._textSelectionManagerService.getTextRanges();
 		const docDataModel = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null) return false;
-		const skeleton = (_this$_renderManagerS2 = this._renderManagerService.getRenderById(docDataModel.getUnitId())) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const docObject = this._getDocObject();
+		const currentRender = this._renderManagerService.getRenderUnitById(docDataModel.getUnitId());
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const docObject = currentRender ? neoGetDocObject(currentRender) : null;
 		if (activeRange == null || skeleton == null || docObject == null || allRanges == null) return;
 		const { startOffset, endOffset, style, collapsed, segmentId, startNodePosition, endNodePosition, segmentPage } = activeRange;
 		const normalizedSegmentId = segmentId !== null && segmentId !== void 0 ? segmentId : "";
@@ -19941,11 +20362,11 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 			if (cursor == null) return;
 			cursor = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, cursor, direction, normalizedSegmentId, normalizedSegmentPage);
 			if (cursor == null) return;
-			this._textSelectionManagerService.replaceTextRanges([{
+			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: cursor,
 				endOffset: cursor,
 				style
-			}], false);
+			}], void 0, false);
 			this._scrollToFocusNodePosition(docDataModel.getUnitId(), cursor);
 			return;
 		}
@@ -19974,11 +20395,11 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 			cursor = this._normalizeCursorOffset(body.dataStream, customRanges, cursor, direction);
 			const normalizedCursor = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, cursor, direction, normalizedSegmentId, normalizedSegmentPage);
 			if (normalizedCursor == null) return;
-			this._textSelectionManagerService.replaceTextRanges([{
+			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: normalizedCursor,
 				endOffset: normalizedCursor,
 				style
-			}], false);
+			}], void 0, false);
 			this._scrollToFocusNodePosition(docDataModel.getUnitId(), normalizedCursor);
 		} else {
 			const startNode = skeleton.findNodeByCharIndex(startOffset, segmentId, segmentPage);
@@ -19990,21 +20411,21 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 				if (collapsed) cursor = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, direction === _univerjs_core.Direction.UP ? 0 : dataStreamLength - 2, direction, normalizedSegmentId, normalizedSegmentPage);
 				else cursor = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, direction === _univerjs_core.Direction.UP ? startOffset : endOffset, direction, normalizedSegmentId, normalizedSegmentPage);
 				if (cursor == null) return;
-				this._textSelectionManagerService.replaceTextRanges([{
+				this._textSelectionManagerService.replaceDocRanges([{
 					startOffset: cursor,
 					endOffset: cursor,
 					style
-				}], false);
+				}], void 0, false);
 				return;
 			}
 			const newActiveRange = new NodePositionConvertToCursor(documentOffsetConfig, skeleton).getRangePointData(newPos, newPos).cursorList[0];
 			const cursor = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, newActiveRange.endOffset, direction, normalizedSegmentId, normalizedSegmentPage);
 			if (cursor == null) return;
-			this._textSelectionManagerService.replaceTextRanges([{
+			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: cursor,
 				endOffset: cursor,
 				style
-			}], false);
+			}], void 0, false);
 			this._scrollToFocusNodePosition(docDataModel.getUnitId(), cursor);
 		}
 	}
@@ -20455,8 +20876,8 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 		return (parent === null || parent === void 0 ? void 0 : parent.page) === page && ((_parent$parent = parent.parent) === null || _parent$parent === void 0 || (_parent$parent = _parent$parent.columns) === null || _parent$parent === void 0 ? void 0 : _parent$parent.includes(parent)) === true;
 	}
 	_scrollToFocusNodePosition(unitId, offset) {
-		var _this$_renderManagerS3;
-		const backScrollController = (_this$_renderManagerS3 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS3 === void 0 ? void 0 : _this$_renderManagerS3.with(DocBackScrollRenderController);
+		var _this$_renderManagerS;
+		const backScrollController = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocBackScrollRenderController);
 		if (backScrollController == null) return;
 		backScrollController.scrollToRange({
 			startOffset: offset,
@@ -20464,9 +20885,6 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 			collapsed: true
 		});
 	}
-	_getDocObject() {
-		return getDocObject(this._univerInstanceService, this._renderManagerService);
-	}
 };
 DocMoveCursorController = __decorate([
 	__decorateParam(0, _univerjs_core.IUniverInstanceService),
@@ -20734,7 +21152,7 @@ let DocEditorBridgeController = class DocEditorBridgeController extends _univerj
 			disposableCollection.dispose();
 			if (!unit) return;
 			const unitId = unit.getUnitId();
-			const render = this._renderManagerService.getRenderById(unitId);
+			const render = this._renderManagerService.getRenderUnitById(unitId);
 			const canvasEle = render === null || render === void 0 ? void 0 : render.engine.getCanvas().getCanvasEle();
 			if (canvasEle == null) return;
 			const disposable = (0, rxjs.fromEvent)(canvasEle, "mousedown").subscribe((evt) => {
@@ -20753,8 +21171,8 @@ let DocEditorBridgeController = class DocEditorBridgeController extends _univerj
 			if (updateCommandList.includes(command.id)) {
 				const { unitId } = command.params;
 				if (this._editorService.isSheetEditor(unitId) || unitId !== this._context.unitId) return;
-				const editor = this._editorService.getEditor(unitId);
-				if (editor && !editor.params.scrollBar) this._resize(unitId);
+				const editorRenderConfig = this._editorService.getEditorRenderConfig(unitId);
+				if (editorRenderConfig && !editorRenderConfig.scrollBar) this._resize(unitId);
 			}
 		}));
 	}
@@ -21219,7 +21637,7 @@ let DocZoomRenderController = class DocZoomRenderController extends _univerjs_co
 		this._initCommandExecutedListener();
 		this._isSheetEditor = this._context.unitId === _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY;
 		const currentSheet = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
-		const sheetRenderer = currentSheet && this._renderManagerService.getRenderById(currentSheet.getUnitId());
+		const sheetRenderer = currentSheet && this._renderManagerService.getRenderUnitById(currentSheet.getUnitId());
 		this._initTimer = window.setTimeout(() => {
 			const zoomRatio = sheetRenderer && this._isSheetEditor ? sheetRenderer.scene.scaleX : getDocEffectiveZoomRatio(this._context.unit);
 			this.updateViewZoom(zoomRatio, true);
@@ -21385,7 +21803,6 @@ let DocsRenderService = class DocsRenderService extends _univerjs_core.RxDisposa
 		this._init();
 	}
 	_init() {
-		this._renderManagerService.createRender$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((unitId) => this._createRenderWithId(unitId));
 		this._instanceSrv.getAllUnitsForType(_univerjs_core.UniverInstanceType.UNIVER_DOC).forEach((documentModel) => {
 			var _this$_instanceSrv$ge;
 			return this._createRenderer(documentModel, (_this$_instanceSrv$ge = this._instanceSrv.getUnitCreateOptions(documentModel.getUnitId())) !== null && _this$_instanceSrv$ge !== void 0 ? _this$_instanceSrv$ge : void 0);
@@ -21400,7 +21817,7 @@ let DocsRenderService = class DocsRenderService extends _univerjs_core.RxDisposa
 			this._createRenderWithId(unitId, doc);
 			return;
 		}
-		const renderer = this._renderManagerService.getRenderById(unitId);
+		const renderer = this._renderManagerService.getRenderUnitById(unitId);
 		if (renderer) this._syncRendererCanvas(renderer, doc);
 	}
 	_createRenderWithId(unitId, doc) {
@@ -21662,13 +22079,14 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 			DocParagraphSettingCommand,
 			InnerPasteCommand,
 			CutContentCommand,
-			ReplaceContentCommand,
 			ReplaceSnapshotCommand,
 			CoverContentCommand,
 			SetDocZoomRatioCommand,
 			DocSelectAllCommand,
 			DocParagraphSettingPanelOperation,
 			DocSectionSettingPanelOperation,
+			InsertDocumentColumnBreakOperation,
+			InsertDocumentSectionBreakOperation,
 			MoveCursorOperation,
 			MoveSelectionOperation,
 			ReplaceTextRunsCommand,
@@ -21818,7 +22236,7 @@ _defineProperty(UniverDocsUIPlugin, "pluginName", "DOC_UI_PLUGIN");
 _defineProperty(UniverDocsUIPlugin, "packageName", name);
 _defineProperty(UniverDocsUIPlugin, "version", version);
 UniverDocsUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_docs.UniverDocsPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_docs.UniverDocsPlugin, _univerjs_engine_render.UniverRenderEnginePlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
 	__decorateParam(3, _univerjs_core.ICommandService),
@@ -21899,7 +22317,7 @@ function useEditor(opts) {
 	const editorService = (0, _univerjs_ui.useDependency)(IEditorService);
 	(0, react.useLayoutEffect)(() => {
 		if (container.current) {
-			const initialDoc = typeof initialValue === "string" ? void 0 : _univerjs_core.Tools.deepClone(initialValue);
+			const initialDoc = typeof initialValue === "string" ? _univerjs_core.RichTextBuilder.create().insertText(initialValue).getData() : _univerjs_core.Tools.deepClone(initialValue);
 			const snapshot = {
 				body: {
 					dataStream: typeof initialValue === "string" ? `${initialValue}\r\n` : "\r\n",
@@ -21992,7 +22410,7 @@ const useEditorClickOutside = (editorId, containerRef, onClickOutside) => {
 */
 function useIsFocusing(editorId) {
 	var _docSelectionRenderSe;
-	const renderer = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService).getRenderById(editorId);
+	const renderer = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService).getRenderUnitById(editorId);
 	const docSelectionRenderService = renderer === null || renderer === void 0 ? void 0 : renderer.with(DocSelectionRenderService);
 	const selections = (0, _univerjs_ui.useObservable)(docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.textSelectionInner$);
 	return Boolean(((_docSelectionRenderSe = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.isFocusing) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : false) && (selections === null || selections === void 0 ? void 0 : selections.textRanges.some((r) => r.collapsed)));
@@ -22006,7 +22424,8 @@ function useKeyboardEvent(isNeed, config, editor) {
 	const key = (0, react.useMemo)(() => (0, _univerjs_core.generateRandomId)(4), []);
 	(0, react.useEffect)(() => {
 		if (!editor || !isNeed || !config) return;
-		const operationId = `sheet.operation.editor-${editor.getEditorId()}-keyboard-${key}`;
+		const editorId = editor.getEditorId();
+		const operationId = `sheet.operation.editor-${editorId}-keyboard-${key}`;
 		const d = new _univerjs_core.DisposableCollection();
 		d.add(commandService.registerCommand({
 			id: operationId,
@@ -22020,6 +22439,8 @@ function useKeyboardEvent(isNeed, config, editor) {
 			return {
 				id: operationId,
 				binding: keyCode.metaKey ? keyCode.keyCode | keyCode.metaKey : keyCode.keyCode,
+				eventPreconditions: keyCode.nativeTextEditorBehavior == null ? void 0 : (event) => event.target instanceof HTMLElement && event.target.id === `__editor_${editorId}`,
+				nativeTextEditorBehavior: keyCode.nativeTextEditorBehavior,
 				preconditions: () => true,
 				priority: 901,
 				staticParameters: {
@@ -22295,7 +22716,7 @@ const RichTextEditor = (props) => {
 		autoFocus,
 		isSingle
 	});
-	const renderer = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService).getRenderById(editorId);
+	const renderer = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService).getRenderUnitById(editorId);
 	const selectionIsFocusing = useIsFocusing(editorId);
 	const docSelectionRenderService = renderer === null || renderer === void 0 ? void 0 : renderer.with(DocSelectionRenderService);
 	const editorFocused = (0, _univerjs_ui.useObservable)(editor ? () => {
@@ -22408,6 +22829,8 @@ exports.DOCS_COMPONENT_MAIN_LAYER_INDEX = DOCS_COMPONENT_MAIN_LAYER_INDEX;
 exports.DOCS_UI_PLUGIN_CONFIG_KEY = DOCS_UI_PLUGIN_CONFIG_KEY;
 exports.DOCS_VIEW_KEY = DOCS_VIEW_KEY;
 exports.DOC_CONTENT_INSERT_MENU_ID = DOC_CONTENT_INSERT_MENU_ID;
+exports.DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA = DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA;
+exports.DOC_CUSTOM_RANGE_CHROME_RADIUS = DOC_CUSTOM_RANGE_CHROME_RADIUS;
 exports.DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE;
 exports.DOC_PARAGRAPH_T_ALIGN_MENU_ID = DOC_PARAGRAPH_T_ALIGN_MENU_ID;
 exports.DOC_PARAGRAPH_T_COLORS_MENU_ID = DOC_PARAGRAPH_T_COLORS_MENU_ID;
@@ -22519,12 +22942,6 @@ Object.defineProperty(exports, 'DocsRenderService', {
   }
 });
 exports.DocsUIMenuSchema = menuSchema;
-Object.defineProperty(exports, 'EMBED_DOCS_CUSTOM_BLOCK_DEFAULT_COMPONENT_KEY', {
-  enumerable: true,
-  get: function () {
-    return _univerjs_docs.EMBED_DOCS_CUSTOM_BLOCK_DEFAULT_COMPONENT_KEY;
-  }
-});
 exports.EMPTY_PARAGRAPH_MENU_ID = EMPTY_PARAGRAPH_MENU_ID;
 exports.Editor = Editor;
 Object.defineProperty(exports, 'EditorService', {
@@ -22565,7 +22982,6 @@ exports.PastePluginUniver = UniverPastePlugin;
 exports.PastePluginWord = WordPastePlugin;
 exports.QuickListCommand = QuickListCommand;
 exports.RectRange = RectRange;
-exports.ReplaceContentCommand = ReplaceContentCommand;
 exports.ReplaceSelectionCommand = ReplaceSelectionCommand;
 exports.ReplaceSnapshotCommand = ReplaceSnapshotCommand;
 exports.ReplaceTextRunsCommand = ReplaceTextRunsCommand;
@@ -22611,40 +23027,11 @@ exports.collectDocsTableLikeEmbedChildUnitIds = collectDocsTableLikeEmbedChildUn
 exports.convertBodyToHtml = convertBodyToHtml;
 exports.convertPositionsToRectRanges = convertPositionsToRectRanges;
 exports.createDefaultDocsTableLikeCustomBlockBleedViewport = createDefaultDocsTableLikeCustomBlockBleedViewport;
-Object.defineProperty(exports, 'createDocsCustomBlockInsertMutation', {
-  enumerable: true,
-  get: function () {
-    return _univerjs_docs.createDocsCustomBlockInsertMutation;
-  }
-});
-Object.defineProperty(exports, 'createDocsCustomBlockRemoveMutation', {
-  enumerable: true,
-  get: function () {
-    return _univerjs_docs.createDocsCustomBlockRemoveMutation;
-  }
-});
 exports.createDocsCustomBlockSizeRefreshScheduler = createDocsCustomBlockSizeRefreshScheduler;
 exports.createEditorUndoRedoKeyboardConfig = createEditorUndoRedoKeyboardConfig;
-Object.defineProperty(exports, 'createEmbedDocsCustomBlockData', {
-  enumerable: true,
-  get: function () {
-    return _univerjs_docs.createEmbedDocsCustomBlockData;
-  }
-});
-Object.defineProperty(exports, 'createInsertCustomBlockActions', {
-  enumerable: true,
-  get: function () {
-    return _univerjs_docs.createInsertCustomBlockActions;
-  }
-});
-Object.defineProperty(exports, 'createRemoveCustomBlockActions', {
-  enumerable: true,
-  get: function () {
-    return _univerjs_docs.createRemoveCustomBlockActions;
-  }
-});
 exports.deleteCustomDecorationFactory = deleteCustomDecorationFactory;
 exports.disableMenuWhenHeaderFooterEditing = disableMenuWhenHeaderFooterEditing;
+exports.drawDocCustomRangeChrome = drawDocCustomRangeChrome;
 exports.executeEditorUndoRedoCommand = executeEditorUndoRedoCommand;
 exports.genTableSource = genTableSource;
 exports.generateParagraphs = _univerjs_docs.generateParagraphs;
@@ -22654,7 +23041,6 @@ exports.getCommandSkeleton = getCommandSkeleton;
 exports.getCursorWhenDelete = getCursorWhenDelete;
 exports.getCutActionsFromDocRanges = getCutActionsFromDocRanges;
 exports.getDocBlockRangeMenuId = getDocBlockRangeMenuId;
-exports.getDocObject = getDocObject;
 exports.getDocObjectById = getDocObjectById;
 exports.getEmptyTableCell = getEmptyTableCell;
 exports.getEmptyTableRow = getEmptyTableRow;
@@ -22664,28 +23050,18 @@ exports.getListParagraphContextMenuHit = getListParagraphContextMenuHit;
 exports.getOneTextSelectionRange = getOneTextSelectionRange;
 exports.getStyleInTextRange = getStyleInTextRange;
 exports.getTableColumn = getTableColumn;
+exports.getTextRangeFromCharIndex = getTextRangeFromCharIndex;
 exports.hasParagraphInTable = hasParagraphInTable;
 exports.hideMenuWhenSelectionInBlockRange = hideMenuWhenSelectionInBlockRange;
 exports.isInSameTableCell = isInSameTableCell;
-Object.defineProperty(exports, 'isSheetLikeDocsCustomBlockChildType', {
-  enumerable: true,
-  get: function () {
-    return _univerjs_docs.isSheetLikeDocsCustomBlockChildType;
-  }
-});
 exports.isTextRangeInAnyBlockRange = isTextRangeInAnyBlockRange;
 exports.isValidRectRange = isValidRectRange;
 exports.neoGetDocObject = neoGetDocObject;
 exports.normalizeDocFitToWidthOptions = normalizeDocFitToWidthOptions;
+exports.resolveDocCustomRangeChromeTheme = resolveDocCustomRangeChromeTheme;
 exports.resolveDocFitBaseWidth = resolveDocFitBaseWidth;
 exports.resolveDocViewScale = resolveDocViewScale;
 exports.resolveDocsCustomBlockRenderViewport = resolveDocsCustomBlockRenderViewport;
-Object.defineProperty(exports, 'resolveDocsCustomBlockSize', {
-  enumerable: true,
-  get: function () {
-    return _univerjs_docs.resolveDocsCustomBlockSize;
-  }
-});
 exports.resolveDocsTableLikeCustomBlockBleedViewport = resolveDocsTableLikeCustomBlockBleedViewport;
 exports.resolveDocsTableLikeCustomBlockContentHeight = resolveDocsTableLikeCustomBlockContentHeight;
 exports.resolveDocsTableLikeCustomBlockContentWidth = resolveDocsTableLikeCustomBlockContentWidth;