@univerjs/docs-ui 1.0.0-alpha.6 → 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,8 +134,36 @@ 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) {
+	const previousToken = dataStream[offset - 1];
+	const nextToken = dataStream[offset];
+	return previousToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_END || previousToken === _univerjs_core.DataStreamTreeTokenType.TABLE_END || previousToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_END || nextToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_START || nextToken === _univerjs_core.DataStreamTreeTokenType.TABLE_START || nextToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_START;
+}
 function hasParagraphInTable(paragraph, tables) {
 	return tables.some((table) => paragraph.startIndex > table.startIndex && paragraph.startIndex < table.endIndex);
 }
@@ -201,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) {
@@ -212,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];
@@ -225,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,
@@ -243,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);
@@ -251,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);
@@ -376,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 };
@@ -524,11 +537,6 @@ const BreakLineCommand = {
 		return Boolean(result);
 	}
 };
-function isTopLevelStructuralGap(dataStream, offset) {
-	const previousToken = dataStream[offset - 1];
-	const nextToken = dataStream[offset];
-	return previousToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_END || previousToken === _univerjs_core.DataStreamTreeTokenType.TABLE_END || previousToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_END || nextToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_START || nextToken === _univerjs_core.DataStreamTreeTokenType.TABLE_START || nextToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_START;
-}
 
 //#endregion
 //#region src/services/clipboard/doc-paste-mutation-adapter.service.ts
@@ -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
@@ -1082,8 +1090,8 @@ const InnerPasteCommand = {
 	id: "doc.command.inner-paste",
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		var _docDataModel$getSelf, _body$tables, _body$customBlocks;
-		const { segmentId, textRanges, doc } = params;
+		var _docDataModel$getSelf, _body$tables, _body$customBlocks, _body$blockRanges;
+		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);
@@ -1116,6 +1124,7 @@ const InnerPasteCommand = {
 		const resourceMutationGroups = [];
 		const hasTable = !!((_body$tables = body.tables) === null || _body$tables === void 0 ? void 0 : _body$tables.length);
 		const hasCustomBlock = !!((_body$customBlocks = body.customBlocks) === null || _body$customBlocks === void 0 ? void 0 : _body$customBlocks.length);
+		const hasBlockRange = !!((_body$blockRanges = body.blockRanges) === null || _body$blockRanges === void 0 ? void 0 : _body$blockRanges.length);
 		if (hasTable && segmentId) return false;
 		if (hasTable && hasRangeInTable(selections)) return false;
 		if (selections.length && (rectRanges === null || rectRanges === void 0 ? void 0 : rectRanges.length)) return false;
@@ -1125,6 +1134,21 @@ const InnerPasteCommand = {
 			const { startOffset, endOffset, collapsed } = selection;
 			const len = startOffset - memoryCursor.cursor;
 			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);
+				blockRangeMappings.push({
+					sourceBlockRange,
+					targetBlockRange
+				});
+			});
 			if (hasTable) for (const t of cloneBody.tables) {
 				const { tableId: oldTableId } = t;
 				const tableId = (0, _univerjs_core.generateRandomId)(6);
@@ -1137,7 +1161,6 @@ const InnerPasteCommand = {
 			if (hasCustomBlock && drawings) {
 				var _docDataModel$getSnap, _docDataModel$getSnap2;
 				const drawingLen = (_docDataModel$getSnap = (_docDataModel$getSnap2 = docDataModel.getSnapshot().drawingsOrder) === null || _docDataModel$getSnap2 === void 0 ? void 0 : _docDataModel$getSnap2.length) !== null && _docDataModel$getSnap !== void 0 ? _docDataModel$getSnap : 0;
-				const customBlockMappings = [];
 				for (const block of cloneBody.customBlocks) {
 					const { blockId } = block;
 					const drawingId = (0, _univerjs_core.generateRandomId)(6);
@@ -1152,21 +1175,6 @@ const InnerPasteCommand = {
 						targetDrawing: drawing
 					});
 				}
-				if (customBlockMappings.length > 0 && pasteAdapterService) {
-					const mutationInfos = pasteAdapterService.getPasteMutationInfos({
-						unitId,
-						segmentId,
-						doc,
-						sourceBody: body,
-						targetBody: cloneBody,
-						customBlockMappings
-					});
-					if (mutationInfos.redoMutations.length > 0 || mutationInfos.undoMutations.length > 0) {
-						resourceRedoMutations.push(...mutationInfos.redoMutations);
-						resourceUndoMutations.push(...mutationInfos.undoMutations);
-						resourceMutationGroups.push(mutationInfos);
-					}
-				}
 				customBlockMappings.forEach(({ targetBlockId, targetDrawing }) => {
 					const action = jsonX.insertOp(["drawings", targetBlockId], targetDrawing);
 					const orderAction = jsonX.insertOp(["drawingsOrder", drawingLen], targetBlockId);
@@ -1174,6 +1182,23 @@ const InnerPasteCommand = {
 					rawActions.push(orderAction);
 				});
 			}
+			if ((blockRangeMappings.length > 0 || customBlockMappings.length > 0 || selectionCustomRangeMappings.length > 0) && pasteAdapterService) {
+				const mutationInfos = pasteAdapterService.getPasteMutationInfos({
+					unitId,
+					segmentId,
+					doc,
+					sourceBody: body,
+					targetBody: cloneBody,
+					blockRangeMappings,
+					customRangeMappings: selectionCustomRangeMappings,
+					customBlockMappings
+				});
+				if (mutationInfos.redoMutations.length > 0 || mutationInfos.undoMutations.length > 0) {
+					resourceRedoMutations.push(...mutationInfos.redoMutations);
+					resourceUndoMutations.push(...mutationInfos.undoMutations);
+					resourceMutationGroups.push(mutationInfos);
+				}
+			}
 			const customRange = getCustomRangeAtPosition((_originBody$customRan = originBody.customRanges) !== null && _originBody$customRan !== void 0 ? _originBody$customRan : [], endOffset, UNITS.includes(unitId));
 			const customDecorations = getCustomDecorationAtPosition((_originBody$customDec = originBody.customDecorations) !== null && _originBody$customDec !== void 0 ? _originBody$customDec : [], endOffset);
 			if (customRange) cloneBody.customRanges = [{
@@ -3729,18 +3754,19 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		this._clipboardInterfaceService = _clipboardInterfaceService;
 		this._docSelectionManagerService = _docSelectionManagerService;
 		_defineProperty(this, "_clipboardHooks", []);
+		_defineProperty(this, "_memoryClipboardData", null);
 		_defineProperty(this, "_htmlToUDM", new HtmlToUDMService());
 		_defineProperty(this, "_umdToHtml", void 0);
 		this._umdToHtml = new UDMToHtmlService(docHtmlExportService);
 	}
 	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);
-			this._setClipboardData(newSnapshotList, !isCopyInHeaderFooter && needCache);
+			await this._setClipboardData(newSnapshotList, !isCopyInHeaderFooter && needCache, plainTextList);
 		} catch (e) {
 			this._logService.error("[DocClipboardService] copy failed", e);
 			return false;
@@ -3751,6 +3777,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		return this._cut(ranges);
 	}
 	async paste(items) {
+		if (!(items === null || items === void 0 ? void 0 : items.length)) return this._memoryClipboardData ? this._paste(_univerjs_core.Tools.deepClone(this._memoryClipboardData)) : false;
 		const partDocData = await this._genDocDataFromClipboardItems(items);
 		return this._paste(partDocData);
 	}
@@ -3808,15 +3835,25 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		}
 	}
 	async _paste(docData) {
-		var _this$_univerInstance, _body$customRanges, _body$paragraphs;
+		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);
-		if (!((_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId())) return false;
+		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);
@@ -3825,6 +3862,8 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		const ranges = this._docSelectionManagerService.getTextRanges();
 		if (segmentId == null) this._logService.error("[DocClipboardController] segmentId does not exist!");
 		if (activeEndOffset == null || ranges == null) return false;
+		const originBody = segmentId == null ? null : (_currentDocument$getS = currentDocument.getSelfOrHeaderFooterModel(segmentId)) === null || _currentDocument$getS === void 0 ? void 0 : _currentDocument$getS.getBody();
+		if (originBody) ensureParagraphAtStructuralGap(body, originBody, ranges);
 		try {
 			let cursor = activeEndOffset;
 			for (const range of ranges) {
@@ -3842,6 +3881,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 					...docData,
 					body
 				},
+				customRangeMappings,
 				segmentId,
 				textRanges
 			});
@@ -3850,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, "");
@@ -3873,7 +3913,8 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 			html = embedInternalClipboardFragment(html, internalJson);
 		}
 		html = wrapClipboardHtml(html);
-		return this._clipboardInterfaceService.write(text, html, internalJson ? { [DOC_INTERNAL_FRAGMENT_MIME]: internalJson } : void 0);
+		await this._clipboardInterfaceService.write(text, html, internalJson ? { [DOC_INTERNAL_FRAGMENT_MIME]: internalJson } : void 0);
+		this._memoryClipboardData = _univerjs_core.Tools.deepClone(internalDocData);
 	}
 	addClipboardHook(hook) {
 		this._clipboardHooks.push(hook);
@@ -3889,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;
@@ -3900,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 = {
@@ -3917,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) => ({
@@ -3924,6 +3973,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 				body: e
 			})),
 			needCache,
+			plainTextList: plainTextResults,
 			snapshot,
 			ranges: allRanges
 		};
@@ -3982,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) {
@@ -4005,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: {},
@@ -4041,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);
@@ -4098,6 +4149,21 @@ DocClipboardService = __decorate([
 	__decorateParam(4, (0, _univerjs_core.Inject)(DocHtmlExportService)),
 	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService))
 ], DocClipboardService);
+function endsAtDocumentBoundary(dataStream) {
+	const lastToken = dataStream[dataStream.length - 1];
+	return lastToken === _univerjs_core.DataStreamTreeTokenType.PARAGRAPH || lastToken === _univerjs_core.DataStreamTreeTokenType.SECTION_BREAK || lastToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_END || lastToken === _univerjs_core.DataStreamTreeTokenType.TABLE_END || lastToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_END;
+}
+function ensureParagraphAtStructuralGap(body, originBody, ranges) {
+	var _body$paragraphs$map, _body$paragraphs2, _body$paragraphs3;
+	if (endsAtDocumentBoundary(body.dataStream) || !ranges.every((range) => range.collapsed && isTopLevelStructuralGap(originBody.dataStream, range.startOffset))) return;
+	const paragraphIndex = body.dataStream.length;
+	const paragraphIds = new Set((_body$paragraphs$map = (_body$paragraphs2 = body.paragraphs) === null || _body$paragraphs2 === void 0 ? void 0 : _body$paragraphs2.map((paragraph) => paragraph.paragraphId)) !== null && _body$paragraphs$map !== void 0 ? _body$paragraphs$map : []);
+	body.dataStream += _univerjs_core.DataStreamTreeTokenType.PARAGRAPH;
+	body.paragraphs = [...(_body$paragraphs3 = body.paragraphs) !== null && _body$paragraphs3 !== void 0 ? _body$paragraphs3 : [], {
+		startIndex: paragraphIndex,
+		paragraphId: (0, _univerjs_core.createParagraphId)(paragraphIds)
+	}];
+}
 function dataUrlToFile(dataUrl, fallbackName) {
 	const match = /^data:([^;,]+)(;base64)?,(.*)$/i.exec(dataUrl);
 	if (!match) throw new Error("[DocClipboardService] invalid image data url.");
@@ -4173,8 +4239,8 @@ const DocPasteCommand = {
 	preconditions: whenDocOrEditor,
 	handler: async (accessor) => {
 		const docClipboardService = accessor.get(IDocClipboardService);
-		const clipboardItems = await accessor.get(_univerjs_ui.IClipboardInterfaceService).read();
-		if (clipboardItems.length === 0) return false;
+		const clipboardInterfaceService = accessor.get(_univerjs_ui.IClipboardInterfaceService);
+		const clipboardItems = clipboardInterfaceService.supportClipboard ? await clipboardInterfaceService.read() : [];
 		return docClipboardService.paste(clipboardItems);
 	}
 };
@@ -4770,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();
@@ -4863,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";
@@ -4871,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";
@@ -4879,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";
@@ -4887,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";
@@ -4895,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";
@@ -4903,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";
@@ -4911,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";
@@ -4919,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";
@@ -4927,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";
@@ -4935,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";
@@ -4943,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";
@@ -4951,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";
@@ -4959,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 = {
@@ -5257,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,
@@ -5369,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,
@@ -6051,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 = {
@@ -6416,7 +6466,7 @@ var NodePositionConvertToCursor = class {
 			const rawAnchorGlyph = isStartBack ? preGlyph !== null && preGlyph !== void 0 ? preGlyph : firstGlyph : firstGlyph;
 			const anchorGlyph = this._getCaretGlyph(rawAnchorGlyph, glyphGroup, start_sp);
 			const selectedGlyphs = glyphGroup.slice(start_sp, end_sp + 1);
-			const isSelectionOnlyNonInlineEmbedBlock = !collapsed && selectedGlyphs.length > 0 && selectedGlyphs.every((glyph) => this._isNonInlineEmbedCustomBlockGlyph(glyph));
+			const isSelectionOnlyNonInlineDrawing = !collapsed && selectedGlyphs.length > 0 && selectedGlyphs.every((glyph) => this._isNonInlineDrawingGlyph(glyph));
 			const borderBoxStartY = startY;
 			const borderBoxEndY = contentHeight == null ? startY + lineHeight - marginTop - marginBottom : startY + paddingTop + contentHeight + paddingBottom;
 			if (start_sp === 0 && end_sp === glyphGroup.length - 1) {
@@ -6449,8 +6499,8 @@ var NodePositionConvertToCursor = class {
 			}
 			const clippedBorderBoxPosition = clipPositionToHorizontalRange(borderBoxPosition, this._horizontalClip);
 			const clippedContentBoxPosition = clipPositionToHorizontalRange(contentBoxPosition, this._horizontalClip);
-			if (clippedBorderBoxPosition && !isSelectionOnlyNonInlineEmbedBlock) borderBoxPointGroup.push(pushToPoints(clippedBorderBoxPosition));
-			if (clippedContentBoxPosition && !isSelectionOnlyNonInlineEmbedBlock) contentBoxPointGroup.push(pushToPoints(clippedContentBoxPosition));
+			if (clippedBorderBoxPosition && !isSelectionOnlyNonInlineDrawing) borderBoxPointGroup.push(pushToPoints(clippedBorderBoxPosition));
+			if (clippedContentBoxPosition && !isSelectionOnlyNonInlineDrawing) contentBoxPointGroup.push(pushToPoints(clippedContentBoxPosition));
 			cursorList.push({
 				startOffset: isStartBack ? startOffset : startOffset + firstGlyph.count,
 				endOffset: isEndBack ? endOffset : endOffset + lastGlyph.count,
@@ -6465,7 +6515,7 @@ var NodePositionConvertToCursor = class {
 	}
 	_getCaretGlyph(glyph, glyphGroup, glyphIndex) {
 		var _this$_findTextLikeGl;
-		if (!glyph || !this._isNonInlineEmbedCustomBlockGlyph(glyph)) return glyph;
+		if (!glyph || !this._isNonInlineDrawingGlyph(glyph)) return glyph;
 		const neighbor = (_this$_findTextLikeGl = this._findTextLikeGlyph(glyphGroup, glyphIndex - 1, -1)) !== null && _this$_findTextLikeGl !== void 0 ? _this$_findTextLikeGl : this._findTextLikeGlyph(glyphGroup, glyphIndex + 1, 1);
 		return neighbor !== null && neighbor !== void 0 ? neighbor : {
 			...glyph,
@@ -6475,13 +6525,14 @@ var NodePositionConvertToCursor = class {
 	_findTextLikeGlyph(glyphGroup, startIndex, step) {
 		for (let index = startIndex; index >= 0 && index < glyphGroup.length; index += step) {
 			const glyph = glyphGroup[index];
-			if (!this._isNonInlineEmbedCustomBlockGlyph(glyph)) return glyph;
+			if (!this._isNonInlineDrawingGlyph(glyph)) return glyph;
 		}
 	}
-	_isNonInlineEmbedCustomBlockGlyph(glyph) {
+	_isNonInlineDrawingGlyph(glyph) {
 		var _this$_docSkeleton$ge, _this$_docSkeleton, _this$_docSkeleton$ge2, _this$_docSkeleton$ge3, _this$_docSkeleton$ge4, _this$_docSkeleton$ge5;
 		if (!(glyph === null || glyph === void 0 ? void 0 : glyph.drawingId) || glyph.streamType !== _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK) return false;
-		return !(0, _univerjs_docs.shouldUseInlineTextSelectionForDocsCustomBlockDrawing)((_this$_docSkeleton$ge = (_this$_docSkeleton = this._docSkeleton).getViewModel) === null || _this$_docSkeleton$ge === void 0 || (_this$_docSkeleton$ge3 = (_this$_docSkeleton$ge2 = _this$_docSkeleton$ge.call(_this$_docSkeleton)).getDataModel) === null || _this$_docSkeleton$ge3 === void 0 || (_this$_docSkeleton$ge5 = (_this$_docSkeleton$ge4 = _this$_docSkeleton$ge3.call(_this$_docSkeleton$ge2)).getSnapshot) === null || _this$_docSkeleton$ge5 === void 0 || (_this$_docSkeleton$ge5 = _this$_docSkeleton$ge5.call(_this$_docSkeleton$ge4).drawings) === null || _this$_docSkeleton$ge5 === void 0 ? void 0 : _this$_docSkeleton$ge5[glyph.drawingId]);
+		const drawing = (_this$_docSkeleton$ge = (_this$_docSkeleton = this._docSkeleton).getViewModel) === null || _this$_docSkeleton$ge === void 0 || (_this$_docSkeleton$ge3 = (_this$_docSkeleton$ge2 = _this$_docSkeleton$ge.call(_this$_docSkeleton)).getDataModel) === null || _this$_docSkeleton$ge3 === void 0 || (_this$_docSkeleton$ge5 = (_this$_docSkeleton$ge4 = _this$_docSkeleton$ge3.call(_this$_docSkeleton$ge2)).getSnapshot) === null || _this$_docSkeleton$ge5 === void 0 || (_this$_docSkeleton$ge5 = _this$_docSkeleton$ge5.call(_this$_docSkeleton$ge4).drawings) === null || _this$_docSkeleton$ge5 === void 0 ? void 0 : _this$_docSkeleton$ge5[glyph.drawingId];
+		return (drawing === null || drawing === void 0 ? void 0 : drawing.layoutType) == null ? !(0, _univerjs_docs.shouldUseInlineTextSelectionForDocsCustomBlockDrawing)(drawing) : drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE;
 	}
 	_isValidPosition(startOrigin, endOrigin) {
 		const { segmentPage: startPage, pageType: startPageType } = startOrigin;
@@ -7169,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];
@@ -7923,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,
@@ -7934,6 +7991,7 @@ function serializeTextRange(textRange) {
 		direction,
 		segmentId,
 		segmentPage,
+		style,
 		isActive: textRange.isActive()
 	};
 }
@@ -8123,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(),
@@ -8182,8 +8250,16 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 	sync() {
 		this._updateInputPosition();
 	}
+	setInputPosition(x, y) {
+		this._positionInput(x, y);
+	}
 	activate(x, y, force = false) {
+		this._positionInput(x, y);
+		if (force && !this._shouldPreserveExternalFocus() || !force && this.canFocusing) this.focus();
+	}
+	_positionInput(x, y) {
 		this._ensureHostContainer();
+		this._container.style.position = "fixed";
 		let left = x;
 		let top = y;
 		const fixedContainer = this._container.offsetParent;
@@ -8195,7 +8271,6 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 		this._container.style.left = `${left}px`;
 		this._container.style.top = `${top}px`;
 		this._container.style.zIndex = "1000";
-		if (force && !this._shouldPreserveExternalFocus() || !force && this.canFocusing) this.focus();
 	}
 	hasFocus() {
 		return this._getOwnerDocument().activeElement === this._input;
@@ -8207,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";
@@ -8666,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;
@@ -8877,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();
@@ -9240,13 +9312,14 @@ const DocTableDeleteColumnsCommand = {
 const DocTableDeleteTableCommand = {
 	id: "doc.table.delete-table",
 	type: _univerjs_core.CommandType.COMMAND,
-	handler: async (accessor) => {
-		var _docDataModel$getSelf3;
+	handler: async (accessor, params) => {
+		var _params$targetRange, _docDataModel$getSelf3;
 		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const activeRectRanges = docSelectionManagerService.getRectRanges();
-		const rangeInfo = getRangeInfoFromRanges(docSelectionManagerService.getActiveTextRange(), activeRectRanges);
+		const activeTextRange = docSelectionManagerService.getActiveTextRange();
+		const rangeInfo = getRangeInfoFromRanges((_params$targetRange = params === null || params === void 0 ? void 0 : params.targetRange) !== null && _params$targetRange !== void 0 ? _params$targetRange : activeTextRange, (params === null || params === void 0 ? void 0 : params.targetRange) ? [] : activeRectRanges);
 		if (rangeInfo == null) return false;
 		const { segmentId } = rangeInfo;
 		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
@@ -9739,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);
@@ -9748,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();
@@ -9828,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;
 	}
@@ -9860,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);
@@ -9974,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);
@@ -10003,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,
@@ -10138,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;
@@ -10149,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;
@@ -10200,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);
 	}
@@ -10232,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;
@@ -10255,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) {
@@ -10273,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];
@@ -10283,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
 	};
 }
@@ -10329,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();
 }
@@ -10477,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;
@@ -10514,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;
@@ -10662,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;
@@ -10709,10 +10783,7 @@ function getPageSizeInModernMode(page) {
 	const { marginLeft, marginRight, marginTop, marginBottom, skeDrawings, skeTables } = page;
 	if (pageWidth === Number.POSITIVE_INFINITY) pageWidth = page.width + marginLeft + marginRight;
 	if (pageHeight === Number.POSITIVE_INFINITY) pageHeight = page.height + marginTop + marginBottom;
-	for (const drawing of skeDrawings.values()) {
-		pageWidth = Math.max(pageWidth, drawing.aLeft + drawing.width + marginLeft + marginRight);
-		pageHeight = Math.max(pageHeight, drawing.aTop + drawing.height + marginTop + marginBottom);
-	}
+	for (const drawing of skeDrawings.values()) pageHeight = Math.max(pageHeight, drawing.aTop + drawing.height + marginTop + marginBottom);
 	for (const table of skeTables.values()) pageHeight = Math.max(pageHeight, table.top + table.height + marginTop + marginBottom);
 	return {
 		pageWidth,
@@ -10853,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();
@@ -10974,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() {
@@ -10990,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
@@ -11004,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 = [
@@ -11095,7 +11224,7 @@ function PageSettings(props) {
 				className: "univer-grid univer-grid-cols-3 univer-gap-2",
 				children: MODERN_WIDTH_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
-					className: (0, _univerjs_design.clsx)("univer-flex univer-h-16 univer-cursor-pointer univer-flex-col univer-items-center univer-justify-center univer-gap-1 univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-text-sm univer-font-medium univer-text-gray-700 univer-transition-colors hover:univer-border-primary-500 hover:univer-text-primary-600 dark:!univer-border-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-100", { "!univer-border-primary-500 !univer-bg-primary-50 !univer-text-primary-600 dark:!univer-bg-primary-900": settings.modernWidth === option }),
+					className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, _univerjs_design.borderClassName, "univer-h-16 univer-flex-col univer-gap-1 univer-rounded-lg univer-bg-white univer-text-sm univer-font-medium univer-text-gray-700 univer-transition-colors hover:univer-border-primary-500 hover:univer-text-primary-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-100", { "!univer-border-primary-500 !univer-bg-primary-50 !univer-text-primary-600 dark:!univer-bg-primary-900": settings.modernWidth === option }),
 					onClick: () => handleModernWidthChange(option),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t(`docs-ui.page-settings.modern-width-${option}`) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "univer-text-xs univer-font-normal univer-text-gray-400",
@@ -11586,6 +11715,54 @@ function DeleteTableMenuItemFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/commands/commands/insert-special-character.command.ts
+const InsertSpecialCharacterCommand = {
+	id: "doc.command.insert-special-character",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _docDataModel$getSelf, _originBody$customRan, _originBody$customDec;
+		if (!(params === null || params === void 0 ? void 0 : params.value)) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const docMenuStyleService = accessor.get(DocMenuStyleService);
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const activeRange = docSelectionManagerService.getActiveTextRange();
+		if (!docDataModel || !activeRange) return false;
+		const { segmentId } = activeRange;
+		const originBody = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
+		if (!originBody) return false;
+		const { value } = params;
+		const curTextRun = getTextRunAtPosition(originBody, activeRange.endOffset, docMenuStyleService.getDefaultStyle(), docMenuStyleService.getStyleCache());
+		const curCustomRange = getCustomRangeAtPosition((_originBody$customRan = originBody.customRanges) !== null && _originBody$customRan !== void 0 ? _originBody$customRan : [], activeRange.endOffset);
+		const curCustomDecorations = getCustomDecorationAtPosition((_originBody$customDec = originBody.customDecorations) !== null && _originBody$customDec !== void 0 ? _originBody$customDec : [], activeRange.endOffset);
+		return commandService.executeCommand(_univerjs_docs.InsertTextCommand.id, {
+			unitId: docDataModel.getUnitId(),
+			body: {
+				dataStream: value,
+				textRuns: [{
+					...curTextRun,
+					st: 0,
+					ed: value.length
+				}],
+				customRanges: curCustomRange ? [{
+					...curCustomRange,
+					startIndex: 0,
+					endIndex: value.length - 1
+				}] : [],
+				customDecorations: curCustomDecorations.map((customDecoration) => ({
+					...customDecoration,
+					startIndex: 0,
+					endIndex: value.length - 1
+				}))
+			},
+			range: activeRange,
+			segmentId
+		});
+	}
+};
+
 //#endregion
 //#region src/views/const.ts
 /**
@@ -11626,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 }),
@@ -11750,16 +11928,22 @@ function getInsertTableHiddenObservable(accessor) {
 	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 	const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
 	return new rxjs.Observable((subscriber) => {
+		let editAreaSubscription = null;
 		const subscription = univerInstanceService.focused$.subscribe((unitId) => {
+			editAreaSubscription === null || editAreaSubscription === void 0 || editAreaSubscription.unsubscribe();
+			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);
-			currentRender.with(_univerjs_docs.DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
+			editAreaSubscription = currentRender.with(_univerjs_docs.DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
 				subscriber.next(editArea === _univerjs_engine_render.DocumentEditArea.HEADER || editArea === _univerjs_engine_render.DocumentEditArea.FOOTER);
 			});
 		});
-		return () => subscription.unsubscribe();
+		return () => {
+			editAreaSubscription === null || editAreaSubscription === void 0 || editAreaSubscription.unsubscribe();
+			subscription.unsubscribe();
+		};
 	});
 }
 function disableMenuWhenHeaderFooterEditing(accessor) {
@@ -11781,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) {
@@ -11802,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) => {
@@ -11825,9 +12009,8 @@ function getHeaderFooterMenuHiddenObservable(accessor) {
 			subscriber.next(documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
 		});
 		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (docDataModel == null) return subscriber.next(true);
 		const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
-		subscriber.next(documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
+		subscriber.next(docDataModel == null || documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
 		return () => {
 			subscription0.dispose();
 			subscription.unsubscribe();
@@ -11904,6 +12087,42 @@ function disableMenuWhenNoDocRange(accessor) {
 		return () => subscription.unsubscribe();
 	});
 }
+const DOC_INSERT_EMOJI_MENU_ID = "doc.menu.insert-emoji";
+const DOC_INSERT_SYMBOL_MENU_ID = "doc.menu.insert-symbol";
+function EmojiPickerMenuItemFactory(accessor) {
+	return {
+		id: DOC_INSERT_EMOJI_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SELECTOR,
+		icon: "SmileIcon",
+		tooltip: "ui.emojiPicker.emojis",
+		selectionsCommandId: InsertSpecialCharacterCommand.id,
+		selections: [{ label: {
+			name: _univerjs_ui.EMOJI_PICKER_COMPONENT,
+			hoverable: false,
+			selectable: false,
+			props: { embedded: true }
+		} }],
+		disabled$: disableMenuWhenNoDocRange(accessor),
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function SymbolPickerMenuItemFactory(accessor) {
+	return {
+		id: DOC_INSERT_SYMBOL_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SELECTOR,
+		icon: "SymbolsIcon",
+		tooltip: "ui.emojiPicker.symbols",
+		selectionsCommandId: InsertSpecialCharacterCommand.id,
+		selections: [{ label: {
+			name: _univerjs_ui.SYMBOL_PICKER_COMPONENT,
+			hoverable: false,
+			selectable: false,
+			props: { embedded: true }
+		} }],
+		disabled$: disableMenuWhenNoDocRange(accessor),
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
 function isTextRangeInAnyBlockRange(document, range) {
 	var _document$getBody$blo2, _document$getBody2;
 	const blockRanges = (_document$getBody$blo2 = document === null || document === void 0 || (_document$getBody2 = document.getBody()) === null || _document$getBody2 === void 0 ? void 0 : _document$getBody2.blockRanges) !== null && _document$getBody$blo2 !== void 0 ? _document$getBody$blo2 : [];
@@ -12375,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) {
@@ -12564,7 +12832,10 @@ function AlignMenuItemFactory(accessor) {
 		});
 		calc();
 		return disposable.dispose;
-	});
+	}).pipe((0, rxjs.distinctUntilChanged)(), (0, rxjs.shareReplay)({
+		bufferSize: 1,
+		refCount: true
+	}));
 	return {
 		id: AlignOperationCommand.id,
 		type: _univerjs_ui.MenuItemType.SELECTOR,
@@ -13410,42 +13681,87 @@ const menuSchema = {
 	[_univerjs_ui.RibbonStartGroup.FORMAT]: {
 		[SetInlineFormatBoldCommand.id]: {
 			order: 0,
+			gridLayout: {
+				row: 2,
+				column: 1
+			},
 			menuItemFactory: BoldMenuItemFactory
 		},
 		[SetInlineFormatItalicCommand.id]: {
 			order: 1,
+			gridLayout: {
+				row: 2,
+				column: 2
+			},
 			menuItemFactory: ItalicMenuItemFactory
 		},
 		[SetInlineFormatUnderlineCommand.id]: {
 			order: 2,
+			gridLayout: {
+				row: 2,
+				column: 3
+			},
 			menuItemFactory: UnderlineMenuItemFactory
 		},
 		[SetInlineFormatStrikethroughCommand.id]: {
 			order: 3,
+			gridLayout: {
+				row: 2,
+				column: 4
+			},
 			menuItemFactory: StrikeThroughMenuItemFactory
 		},
 		[SetInlineFormatSubscriptCommand.id]: {
 			order: 4,
+			gridLayout: {
+				row: 2,
+				column: 5
+			},
 			menuItemFactory: SubscriptMenuItemFactory
 		},
 		[SetInlineFormatSuperscriptCommand.id]: {
 			order: 5,
+			gridLayout: {
+				row: 2,
+				column: 6
+			},
 			menuItemFactory: SuperscriptMenuItemFactory
 		},
 		[SetParagraphNamedStyleCommand.id]: {
 			order: 5.5,
+			gridLayout: {
+				row: 1,
+				column: 1,
+				columnSpan: 2,
+				width: 100
+			},
 			menuItemFactory: HeadingSelectorMenuItemFactory
 		},
 		[SetInlineFormatFontSizeCommand.id]: {
 			order: 6,
+			gridLayout: {
+				row: 1,
+				column: 7,
+				width: 64
+			},
 			menuItemFactory: FontSizeSelectorMenuItemFactory
 		},
 		[SetInlineFormatFontFamilyCommand.id]: {
 			order: 7,
+			gridLayout: {
+				row: 1,
+				column: 3,
+				columnSpan: 4,
+				width: 160
+			},
 			menuItemFactory: FontFamilySelectorMenuItemFactory
 		},
 		[SetInlineFormatTextColorCommand.id]: {
 			order: 8,
+			gridLayout: {
+				row: 2,
+				column: 7
+			},
 			menuItemFactory: TextColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextColorCommand.id]: {
 				order: 0,
@@ -13454,6 +13770,10 @@ const menuSchema = {
 		},
 		[SetInlineFormatTextBackgroundColorCommand.id]: {
 			order: 9,
+			gridLayout: {
+				row: 2,
+				column: 8
+			},
 			menuItemFactory: BackgroundColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextBackgroundColorCommand.id]: {
 				order: 0,
@@ -13464,32 +13784,66 @@ const menuSchema = {
 	[_univerjs_ui.RibbonStartGroup.LAYOUT]: {
 		[AlignOperationCommand.id]: {
 			order: 2,
+			gridLayout: {
+				row: 1,
+				column: 1
+			},
 			menuItemFactory: AlignMenuItemFactory
 		},
 		[OrderListCommand.id]: {
 			order: 7,
+			gridLayout: {
+				row: 2,
+				column: 1
+			},
 			menuItemFactory: OrderListMenuItemFactory
 		},
 		[BulletListCommand.id]: {
 			order: 8,
+			gridLayout: {
+				row: 1,
+				column: 2
+			},
 			menuItemFactory: BulletListMenuItemFactory
 		},
 		[CheckListCommand.id]: {
 			order: 9,
+			gridLayout: {
+				row: 2,
+				column: 2
+			},
 			menuItemFactory: CheckListMenuItemFactory
 		},
 		[OpenHeaderFooterPanelCommand.id]: {
 			order: 10,
+			gridLayout: {
+				row: 1,
+				column: 3,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: HeaderFooterMenuItemFactory
 		},
 		[DocOpenPageSettingCommand.id]: {
 			order: 12,
+			gridLayout: {
+				row: 1,
+				column: 4,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: PageSettingMenuItemFactory
 		}
 	},
 	[_univerjs_ui.RibbonInsertGroup.MEDIA]: {
 		[TABLE_MENU_ID]: {
 			order: 2,
+			gridLayout: {
+				row: 1,
+				column: 1,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: TableMenuFactory,
 			[DocCreateTableOperation.id]: {
 				order: 0,
@@ -13498,7 +13852,63 @@ const menuSchema = {
 		},
 		[HorizontalLineCommand.id]: {
 			order: 3,
+			gridLayout: {
+				row: 1,
+				column: 2,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: HorizontalLineFactory
+		},
+		[DOC_BREAKS_MENU_ID]: {
+			order: 4,
+			gridLayout: {
+				row: 1,
+				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: 6,
+			gridLayout: {
+				row: 2,
+				column: 4
+			},
+			menuItemFactory: SymbolPickerMenuItemFactory
 		}
 	},
 	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: {
@@ -13856,6 +14266,13 @@ const menuSchema = {
 					order: 0,
 					menuItemFactory: InsertDefaultTableMenuFactory
 				}
+			},
+			format: {
+				order: 3,
+				[DocPasteCommand.id]: {
+					order: 0,
+					menuItemFactory: PasteMenuFactory
+				}
 			}
 		},
 		[DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID]: {
@@ -13985,8 +14402,12 @@ const menuSchema = {
 					order: 1,
 					menuItemFactory: CopyCurrentParagraphMenuItemFactory
 				},
-				[DeleteCurrentParagraphCommand.id]: {
+				[DocPasteCommand.id]: {
 					order: 2,
+					menuItemFactory: PasteMenuFactory
+				},
+				[DeleteCurrentParagraphCommand.id]: {
+					order: 3,
 					menuItemFactory: DeleteCurrentParagraphMenuItemFactory
 				}
 			},
@@ -14455,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);
@@ -14484,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);
@@ -14516,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);
@@ -14919,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,
@@ -15385,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;
@@ -15427,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 ? [{
@@ -15554,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) {
@@ -15810,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);
@@ -15836,7 +16260,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.0-alpha.6";
+var version = "1.0.0-alpha.8";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -15914,19 +16338,27 @@ const DEFAULT_AVALIABLE_MENUS = [
 	SetInlineFormatSubscriptCommand.id,
 	SetInlineFormatSuperscriptCommand.id,
 	SetInlineFormatTextColorCommand.id,
-	SetInlineFormatTextBackgroundColorCommand.id
+	{
+		id: SetInlineFormatTextBackgroundColorCommand.id,
+		iconColor: "var(--univer-primary-600)"
+	}
 ];
 function resolveFloatToolbarMenus(menuManagerService, avaliableMenus) {
 	const floatToolbarMenus = menuManagerService.getMenuByPositionKey(FLOAT_TOOLBAR_MENU_POSITION);
 	const flatMenus = [...menuManagerService.getFlatMenuByPositionKey(FLOAT_TOOLBAR_MENU_POSITION), ...menuManagerService.getFlatMenuByPositionKey(_univerjs_ui.MenuManagerPosition.RIBBON)];
 	const menus = [];
-	for (const key of avaliableMenus) {
-		const item = flatMenus.find((item) => item.key === key);
-		if (item) menus.push(item);
+	const menuIds = avaliableMenus.map((config) => typeof config === "string" ? config : config.id);
+	for (const config of avaliableMenus) {
+		const menuId = typeof config === "string" ? config : config.id;
+		const item = flatMenus.find((item) => item.key === menuId);
+		if (item) menus.push(typeof config === "string" ? item : {
+			...item,
+			iconColor: config.iconColor
+		});
 	}
 	return {
 		menus,
-		extraMenus: floatToolbarMenus.filter((item) => item.item && !avaliableMenus.includes(item.key))
+		extraMenus: floatToolbarMenus.filter((item) => item.item && !menuIds.includes(item.key))
 	};
 }
 function FloatToolbar(props) {
@@ -15951,7 +16383,10 @@ function FloatToolbar(props) {
 		children: [
 			menus.map((groupItem) => groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-flex univer-flex-nowrap univer-gap-2 univer-px-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, { ...groupItem.item }, groupItem.key)
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, {
+					...groupItem.item,
+					iconColor: groupItem.iconColor
+				}, groupItem.key)
 			}, groupItem.key)),
 			extraMenus.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-my-1 univer-w-px univer-bg-gray-200 dark:univer-bg-gray-700" }),
 			extraMenus.map((groupItem) => groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -15997,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()
@@ -16012,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),
@@ -16035,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) => {
@@ -16046,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();
@@ -16111,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);
@@ -16601,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)(() => {
@@ -16630,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,
@@ -16902,14 +17338,16 @@ function isInSameLine(startNodePosition, endNodePosition) {
 }
 const SKIP_SYMBOLS = [_univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK, _univerjs_core.DataStreamTreeTokenType.PARAGRAPH];
 let DocFloatMenuService = class DocFloatMenuService extends _univerjs_core.Disposable {
-	constructor(_context, _docSelectionManagerService, _docCanvasPopManagerService, _univerInstanceService, _docSelectionRenderService) {
+	constructor(_context, _docSelectionManagerService, _docCanvasPopManagerService, _univerInstanceService, _docSelectionRenderService, _contextService) {
 		super();
 		this._context = _context;
 		this._docSelectionManagerService = _docSelectionManagerService;
 		this._docCanvasPopManagerService = _docCanvasPopManagerService;
 		this._univerInstanceService = _univerInstanceService;
 		this._docSelectionRenderService = _docSelectionRenderService;
+		this._contextService = _contextService;
 		_defineProperty(this, "_floatMenu", null);
+		_defineProperty(this, "_suppressed", false);
 		if ((0, _univerjs_core.isInternalEditorID)(this._context.unitId)) return;
 		this._initSelectionChange();
 		this.disposeWithMe(() => {
@@ -16922,6 +17360,11 @@ let DocFloatMenuService = class DocFloatMenuService extends _univerjs_core.Dispo
 	hideFloatMenu() {
 		this._hideFloatMenu();
 	}
+	setSuppressed(suppressed) {
+		if (this._suppressed === suppressed) return;
+		this._suppressed = suppressed;
+		if (suppressed) this._hideFloatMenu();
+	}
 	_initSelectionChange() {
 		this.disposeWithMe(this._docSelectionRenderService.onSelectionStart$.subscribe(() => {
 			this._hideFloatMenu();
@@ -16929,6 +17372,10 @@ let DocFloatMenuService = class DocFloatMenuService extends _univerjs_core.Dispo
 		this.disposeWithMe(this._docSelectionManagerService.textSelection$.subscribe((selection) => {
 			const { unitId, textRanges } = selection;
 			if (unitId !== this._context.unitId) return;
+			if (this._suppressed || this._contextService.getContextValue(_univerjs_core.FOCUSING_COMMON_DRAWINGS)) {
+				this._hideFloatMenu();
+				return;
+			}
 			const range = textRanges.length > 0 && textRanges.find((range) => !range.collapsed);
 			if (range) {
 				var _this$_floatMenu, _this$_floatMenu2;
@@ -16970,7 +17417,8 @@ DocFloatMenuService = __decorate([
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(DocCanvasPopManagerService)),
 	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(DocSelectionRenderService))
+	__decorateParam(4, (0, _univerjs_core.Inject)(DocSelectionRenderService)),
+	__decorateParam(5, _univerjs_core.IContextService)
 ], DocFloatMenuService);
 function isRangeInCodeBlock(documentDataModel, range) {
 	var _documentDataModel$ge3, _documentDataModel$ge4;
@@ -17661,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);
 }
@@ -17797,6 +18242,7 @@ function getParagraphMenuBlockRangeCommandId(blockType) {
 }
 const PARAGRAPH_MENU_BLOCK_RANGE_COMMAND_IDS = new Set(PARAGRAPH_MENU_BLOCK_RANGE_TYPES.map((blockType) => getParagraphMenuBlockRangeCommandId(blockType)));
 const PARAGRAPH_MENU_SELECTION_COMMAND_IDS = /* @__PURE__ */ new Set([
+	DocPasteCommand.id,
 	BulletListCommand.id,
 	OrderListCommand.id,
 	CheckListCommand.id,
@@ -17890,6 +18336,7 @@ function getParagraphMenuHiddenItemIds(menuType, target, namedStyleType) {
 	if (menuType === "doc.menu.paragraph-t.insert") return [];
 	const hiddenIds = [...getParagraphMenuHiddenHeadingCommandIds(namedStyleType)];
 	const blockType = (target === null || target === void 0 ? void 0 : target.kind) === "blockRange" ? (_target$blockRange2 = target.blockRange) === null || _target$blockRange2 === void 0 ? void 0 : _target$blockRange2.blockType : void 0;
+	if ((target === null || target === void 0 ? void 0 : target.kind) !== "blockRange") hiddenIds.push(DocPasteCommand.id);
 	if (blockType === _univerjs_core.DocumentBlockRangeType.CALLOUT) hiddenIds.push(getParagraphMenuBlockRangeCommandId(_univerjs_core.DocumentBlockRangeType.CODE), getParagraphMenuBlockRangeCommandId(_univerjs_core.DocumentBlockRangeType.QUOTE));
 	else if (blockType === _univerjs_core.DocumentBlockRangeType.QUOTE || blockType === _univerjs_core.DocumentBlockRangeType.CODE) hiddenIds.push(getParagraphMenuBlockRangeCommandId(_univerjs_core.DocumentBlockRangeType.CALLOUT));
 	return hiddenIds;
@@ -18086,6 +18533,7 @@ function getParagraphFormattingRange(target, paragraph) {
 	return getTargetSelectionRange(target, paragraph);
 }
 function getParagraphMenuCommandTargetRange(commandId, targetRange, formattingRange) {
+	if (commandId === DocPasteCommand.id) return targetRange;
 	if (commandId && PARAGRAPH_MENU_SELECTION_COMMAND_IDS.has(commandId)) return formattingRange !== null && formattingRange !== void 0 ? formattingRange : targetRange;
 	return targetRange !== null && targetRange !== void 0 ? targetRange : formattingRange;
 }
@@ -18105,6 +18553,17 @@ function getBlockSelectionRange(target, paragraph) {
 		segmentId: paragraph === null || paragraph === void 0 ? void 0 : paragraph.segmentId
 	};
 }
+function getBlockRangeClipboardTargetRange(commandId, target, paragraph) {
+	if ((target === null || target === void 0 ? void 0 : target.kind) !== "blockRange") return null;
+	if (commandId === DocPasteCommand.id) return {
+		startOffset: target.moveRange.endOffset,
+		endOffset: target.moveRange.endOffset,
+		collapsed: true,
+		segmentId: paragraph === null || paragraph === void 0 ? void 0 : paragraph.segmentId
+	};
+	if (commandId === DocCopyCurrentParagraphCommand.id || commandId === DocCutCurrentParagraphCommand.id) return getBlockSelectionRange(target, paragraph !== null && paragraph !== void 0 ? paragraph : void 0);
+	return null;
+}
 function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	var _ref3, _ref4, _currentActiveTarget$, _doc$getBody$dataStre, _doc$getBody, _currentActiveTarget$2, _paragraphObj$paragra, _currentActiveTarget$3;
 	const [visible, setVisible] = (0, react.useState)(false);
@@ -18125,7 +18584,6 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const docClipboardService = (0, _univerjs_ui.useDependency)(IDocClipboardService);
 	const docContentInsertService = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocContentInsertService);
 	const docBlockMoveValidatorService = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocBlockMoveValidatorService);
-	const clipboardInterfaceService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IClipboardInterfaceService);
 	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
 	const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
 	const anchorRef = (0, react.useRef)(null);
@@ -18134,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);
@@ -18173,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,
@@ -18210,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);
@@ -18241,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;
@@ -18249,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);
@@ -18320,7 +18780,19 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		}
 		if ((latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.kind) === "blockRange") {
 			var _latestTarget$blockRa;
-			if (commandId === getParagraphMenuBlockRangeCommandId((_latestTarget$blockRa = latestTarget.blockRange) === null || _latestTarget$blockRa === void 0 ? void 0 : _latestTarget$blockRa.blockType)) {
+			const currentBlockCommandId = getParagraphMenuBlockRangeCommandId((_latestTarget$blockRa = latestTarget.blockRange) === null || _latestTarget$blockRa === void 0 ? void 0 : _latestTarget$blockRa.blockType);
+			const clipboardRange = getBlockRangeClipboardTargetRange(commandId, latestTarget, activeParagraphBound);
+			if (clipboardRange) {
+				if (commandId === DocCopyCurrentParagraphCommand.id) await docClipboardService.copy(_univerjs_core.SliceBodyType.copy, [clipboardRange]);
+				else if (commandId === DocCutCurrentParagraphCommand.id) await docClipboardService.cut([clipboardRange]);
+				else {
+					replaceSelection(clipboardRange);
+					await executeResolvedCommand(option, clipboardRange);
+				}
+				finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
+				return;
+			}
+			if (commandId === currentBlockCommandId) {
 				await unwrapActiveBlockRange();
 				finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
 				return;
@@ -18396,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);
@@ -18568,15 +19040,17 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 								return;
 							}
 							if (commandId === DocPasteCommand.id) {
-								docSelectionManagerService.replaceTextRanges([afterTableRange], false);
-								const clipboardItems = await clipboardInterfaceService.read();
-								await docClipboardService.paste(clipboardItems);
+								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 (commandService && commandId) commandService.executeCommand(commandId, commandParams);
+							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
+							} : commandParams);
 							finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
 							return;
 						}
@@ -18632,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)),
@@ -18643,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;
 		}))
 	};
 }
@@ -18656,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 [];
@@ -18669,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, {
@@ -18691,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 }) : []);
@@ -18705,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)) });
 		}
 	};
 }
@@ -18715,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
@@ -18725,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]);
@@ -18754,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,
@@ -18771,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,
@@ -18783,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)
+					})
 				})
 			]
 		})]
@@ -18930,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,
@@ -18965,9 +19679,11 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			RightInsertColumnDoubleIcon: _univerjs_icons.RightInsertColumnDoubleIcon,
 			RightJustifyingIcon: _univerjs_icons.RightJustifyingIcon,
 			ShapeIcon: _univerjs_icons.ShapeIcon,
+			SmileIcon: _univerjs_icons.SmileIcon,
 			StrikethroughIcon: _univerjs_icons.StrikethroughIcon,
 			SubscriptIcon: _univerjs_icons.SubscriptIcon,
 			SuperscriptIcon: _univerjs_icons.SuperscriptIcon,
+			SymbolsIcon: _univerjs_icons.SymbolsIcon,
 			TitleTypeIcon,
 			SubtitleTypeIcon,
 			TodoListDoubleIcon: _univerjs_icons.TodoListDoubleIcon,
@@ -19069,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;
@@ -19207,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
@@ -19530,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 : "";
@@ -19548,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;
@@ -19566,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;
 		}
@@ -19580,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);
@@ -19594,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 : "";
@@ -19643,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;
 		}
@@ -19676,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);
@@ -19692,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);
 		}
 	}
@@ -20157,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,
@@ -20166,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),
@@ -20436,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) => {
@@ -20455,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);
 			}
 		}));
 	}
@@ -20921,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);
@@ -21087,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);
@@ -21102,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) {
@@ -21364,18 +22079,20 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 			DocParagraphSettingCommand,
 			InnerPasteCommand,
 			CutContentCommand,
-			ReplaceContentCommand,
 			ReplaceSnapshotCommand,
 			CoverContentCommand,
 			SetDocZoomRatioCommand,
 			DocSelectAllCommand,
 			DocParagraphSettingPanelOperation,
 			DocSectionSettingPanelOperation,
+			InsertDocumentColumnBreakOperation,
+			InsertDocumentSectionBreakOperation,
 			MoveCursorOperation,
 			MoveSelectionOperation,
 			ReplaceTextRunsCommand,
 			ReplaceSelectionCommand,
 			InsertCustomRangeCommand,
+			InsertSpecialCharacterCommand,
 			SetParagraphNamedStyleCommand,
 			QuickHeadingCommand,
 			DocCopyCurrentParagraphCommand,
@@ -21519,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),
@@ -21600,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",
@@ -21693,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)));
@@ -21707,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,
@@ -21721,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: {
@@ -21996,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 ? () => {
@@ -22109,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;
@@ -22220,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', {
@@ -22266,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;
@@ -22312,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;
@@ -22355,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;
@@ -22365,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;