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

package/lib/es/index.js

@@ -1,13 +1,13 @@
-import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, ColorKit, ColumnSeparatorType, CommandType, CustomRangeType, DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOC_RANGE_TYPE, DashStyleType, DataStreamTreeNodeType, DataStreamTreeTokenType, DeleteDirection, DependentOn, Direction, Disposable, DisposableCollection, DocumentBlockRangeType, DocumentBlockType, DocumentFlavor, DrawingTypeEnum, EDITOR_ACTIVATED, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR, HorizontalAlign, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IUndoRedoService, IUniverInstanceService, ImageSourceType, Inject, Injector, InterceptorManager, JSONX, LRUMap, LocaleService, MODERN_DOCUMENT_DEFAULT_MARGIN, MODERN_DOCUMENT_WIDTH, MemoryCursor, ModernDocumentWidthMode, NAMED_STYLE_MAP, NamedStyleType, ObjectRelativeFromH, ObjectRelativeFromV, Optional, PAGE_SIZE, PAPER_TYPES, PRESET_LIST_TYPE, PageOrientType, Plugin, PositionedObjectLayoutType, PresetListType, QuickListTypeMap, RANGE_DIRECTION, Rectangle, RedoCommand, RxDisposable, SHEET_EDITOR_UNITS, SectionType, SliceBodyType, SpacingRule, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, TextX, TextXActionType, ThemeService, Tools, UndoCommand, UniverInstanceType, UpdateDocsAttributeType, VerticalAlign, checkForSubstrings, containsInteriorInsertionOffset, createIdentifier, createInterceptorKey, createInternalEditorID, createParagraphId, createSectionId, debounce, deepCompare, fromEventSubject, generateRandomId, getBlockRangeInterval, getBodySlice, getBodySliceForTextXAction, getCustomBlockIdsInSelections, getParagraphContentStartOffset, getParagraphContentStartOffsets, getPlainText, getRichTextEditPath, getSectionHeaderFooterReferenceKey, getTableRangeInterval, isCommentEditorID, isInternalEditorID, isSafeUrl, merge, mergeOverrideWithDependencies, normalizeBody, remove, resolveDocumentParagraphStyle, resolveSectionHeaderFooterReference, resolveSectionHeaderFooterReferences, sequenceExecuteAsync, skipParseTagNames, toDisposable, touchDependencies } from "@univerjs/core";
-import { CreateHeaderFooterCommand, DeleteTextCommand, DocBlockMoveValidatorService, DocContentInsertService, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, DocStateEmitService, EMBED_DOCS_CUSTOM_BLOCK_DEFAULT_COMPONENT_KEY, HeaderFooterType, IDocStateChangeInterceptorService, InsertTextCommand, RichTextEditingMutation, SetSectionHeaderFooterLinkCommand, SetTextSelectionsOperation, UniverDocsPlugin, UpdateDocumentSectionCommand, UpdateTextCommand, buildDocTransform, consumeContentInsertRange, createDocsCustomBlockInsertMutation, createDocsCustomBlockRemoveMutation, createEmbedDocsCustomBlockData, createInsertCustomBlockActions, createRemoveCustomBlockActions, createSectionColumnProperties, generateParagraphs, getTopLevelSectionBreaks, isSheetLikeDocsCustomBlockChildType, isSheetLikeDocsCustomBlockChildType as isSheetLikeDocsCustomBlockChildType$1, resolveDocsCustomBlockSize, resolveDocsCustomBlockSize as resolveDocsCustomBlockSize$1, shouldUseInlineTextSelectionForDocsCustomBlockDrawing } from "@univerjs/docs";
-import { CURSOR_TYPE, DeviceInputEventType, DocBackground, DocumentEditArea, DocumentSkeletonPageType, Documents, GlyphType, IRenderManagerService, Layer, LineType, Liquid, NORMAL_TEXT_SELECTION_PLUGIN_STYLE, PageLayoutType, Path, Rect, RegularPolygon, ScrollBar, ScrollTimer, Shape, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin, Vector2, Viewport, compareDocumentSkeletonNestedPagePathOrder, documentSkeletonLineIterator, documentSkeletonTableIterator, getColor, getDocsTableRenderViewport, getDocumentSkeletonColumnPagePathInfo, getDocumentSkeletonNestedPageOffset, getLastColumn, getNextWheelZoomRatio, getNumberUnitValue, getOffsetRectForDom, getPageFromPath, getParagraphByGlyph, getSystemHighlightColor, getTableIdAndSliceIndex, hasListGlyph, isFirstGlyph, isIndentByGlyph, parseDataStreamToTree, pixelToPt, ptToPixel, pxToNum } from "@univerjs/engine-render";
+import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, ColorKit, ColumnSeparatorType, CommandType, CustomRangeType, DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOC_RANGE_TYPE, DashStyleType, DataStreamTreeNodeType, DataStreamTreeTokenType, DeleteDirection, DependentOn, Direction, Disposable, DisposableCollection, DocumentBlockRangeType, DocumentBlockType, DocumentFlavor, DrawingTypeEnum, EDITOR_ACTIVATED, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR, HorizontalAlign, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IUndoRedoService, IUniverInstanceService, ImageSourceType, Inject, Injector, InterceptorManager, JSONX, LRUMap, LocaleService, MODERN_DOCUMENT_DEFAULT_MARGIN, MODERN_DOCUMENT_WIDTH, MemoryCursor, ModernDocumentWidthMode, NAMED_STYLE_MAP, NamedStyleType, ObjectRelativeFromH, ObjectRelativeFromV, Optional, PAGE_SIZE, PAPER_TYPES, PRESET_LIST_TYPE, PageOrientType, Plugin, PositionedObjectLayoutType, PresetListType, QuickListTypeMap, RANGE_DIRECTION, Rectangle, RedoCommand, RichTextBuilder, RxDisposable, SHEET_EDITOR_UNITS, SectionType, SliceBodyType, SpacingRule, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, TextX, TextXActionType, ThemeService, Tools, UndoCommand, UniverInstanceType, UpdateDocsAttributeType, VerticalAlign, checkForSubstrings, containsInteriorInsertionOffset, createIdentifier, createInterceptorKey, createInternalEditorID, createParagraphId, createSectionId, debounce, deepCompare, fromEventSubject, generateRandomId, getBlockRangeInterval, getBodySlice, getBodySliceForTextXAction, getCustomBlockIdsInSelections, getParagraphContentStartOffset, getParagraphContentStartOffsets, getPlainText, getRichTextEditPath, getSectionHeaderFooterReferenceKey, getTableRangeInterval, isCommentEditorID, isInternalEditorID, isSafeUrl, merge, mergeOverrideWithDependencies, normalizeBody, remove, resolveDocumentParagraphStyle, resolveSectionHeaderFooterReference, resolveSectionHeaderFooterReferences, sequenceExecuteAsync, skipParseTagNames, toDisposable, touchDependencies } from "@univerjs/core";
+import { CreateHeaderFooterCommand, DeleteTextCommand, DocBlockMoveValidatorService, DocContentInsertService, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, DocStateEmitService, HeaderFooterType, IDocStateChangeInterceptorService, InsertDocumentColumnBreakCommand, InsertDocumentSectionBreakCommand, InsertTextCommand, RichTextEditingMutation, SetSectionHeaderFooterLinkCommand, SetTextSelectionsOperation, UniverDocsPlugin, UpdateDocumentSectionCommand, UpdateTextCommand, buildDocTransform, consumeContentInsertRange, createSectionColumnProperties, generateParagraphs, getTopLevelSectionBreaks, isSheetLikeDocsCustomBlockChildType, resolveDocsCustomBlockSize, shouldUseInlineTextSelectionForDocsCustomBlockDrawing } from "@univerjs/docs";
+import { CURSOR_TYPE, DeviceInputEventType, DocBackground, DocumentEditArea, DocumentSkeletonPageType, Documents, GlyphType, IRenderManagerService, Layer, LineType, Liquid, NORMAL_TEXT_SELECTION_PLUGIN_STYLE, PageLayoutType, Path, Rect, RegularPolygon, ScrollBar, ScrollTimer, Shape, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin, Vector2, Viewport, compareDocumentSkeletonNestedPagePathOrder, documentSkeletonLineIterator, documentSkeletonTableIterator, getColor, getDocsTableRenderViewport, getDocsTableViewportLeft, getDocumentSkeletonColumnPagePathInfo, getDocumentSkeletonNestedPageOffset, getLastColumn, getNextWheelZoomRatio, getNumberUnitValue, getOffsetRectForDom, getPageFromPath, getParagraphByGlyph, getSystemHighlightColor, getTableIdAndSliceIndex, hasListGlyph, isFirstGlyph, isIndentByGlyph, parseDataStreamToTree, pixelToPt, ptToPixel, pxToNum } from "@univerjs/engine-render";
 import { BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, ComponentManager, ContextMenuGroup, ContextMenuPanel, ContextMenuPosition, CopyCommand, CutCommand, EMOJI_PICKER_COMPONENT, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, ICanvasPopupService, IClipboardInterfaceService, IContextMenuService, ILayoutService, IMenuManagerService, IShortcutService, ISidebarService, IUIPartsService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MetaKeys, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, RectPopup, RibbonInsertGroup, RibbonStartGroup, SYMBOL_PICKER_COMPONENT, Slider, ToolbarItem, connectInjector, getMenuHiddenObservable, imageMimeTypeSet, useConfigValue, useDependency, useEvent, useObservable } from "@univerjs/ui";
 import { BehaviorSubject, Observable, Subject, animationFrameScheduler, combineLatest, debounceTime, distinctUntilChanged, filter, first, fromEvent, map, merge as merge$1, shareReplay, startWith, switchMap, take, takeUntil, throttleTime } from "rxjs";
 import { bufferTime, filter as filter$1, map as map$1 } from "rxjs/operators";
 import { Button, Checkbox, InputNumber, Select, Tooltip, borderClassName, clsx, resetButtonClassName, scrollbarClassName } from "@univerjs/design";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AddImageIcon, AlignTextBothIcon, BoldIcon, CatalogueIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DeleteTableDoubleIcon, DocSettingIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LineIndentDecreaseIcon, LineIndentIncreaseIcon, MenuIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, OrderIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, ShapeIcon, SmileIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, SymbolsIcon, TextTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon } from "@univerjs/icons";
+import { AddImageIcon, AlignTextBothIcon, BoldIcon, CatalogueIcon, ColumnIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DeleteTableDoubleIcon, DocSettingIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LineIndentDecreaseIcon, LineIndentIncreaseIcon, MenuIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, OrderIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, ShapeIcon, SmileIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, SymbolsIcon, TextTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon } from "@univerjs/icons";
 
 //#region src/basics/docs-view-key.ts
 /**
@@ -54,23 +54,8 @@ function neoGetDocObject(renderContext) {
 		engine
 	};
 }
-/** @deprecated After migrating to `RenderUnit`, use `neoGetDocObject` instead. */
-function getDocObject(univerInstanceService, renderManagerService) {
-	const documentModel = univerInstanceService.getCurrentUnitOfType(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 {
@@ -148,6 +133,29 @@ function deleteCustomDecorationFactory(accessor, params) {
 	return doMutation;
 }
 
+//#endregion
+//#region src/basics/doc-custom-range-chrome.ts
+const DOC_CUSTOM_RANGE_CHROME_RADIUS = 1;
+const DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA = .07;
+function resolveDocCustomRangeChromeTheme(themeService) {
+	const primary = themeService.getColorFromTheme("primary.600");
+	return {
+		background: new 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) {
@@ -205,7 +213,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) {
@@ -216,7 +224,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];
@@ -229,14 +237,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,
@@ -247,7 +255,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);
@@ -255,7 +263,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);
@@ -380,7 +388,7 @@ let DocMenuStyleService = class DocMenuStyleService extends Disposable {
 		const docDataModel = this._univerInstanceService.getCurrentUnitOfType(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(DocSkeletonManagerService);
+		const docSkeletonManagerService = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSkeletonManagerService);
 		const docViewModel = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getViewModel();
 		if (docViewModel == null) return { ...DEFAULT_TEXT_STYLE };
 		if (docViewModel.getEditArea() === DocumentEditArea.BODY) return { ...DEFAULT_TEXT_STYLE };
@@ -568,7 +576,7 @@ var DocClipboardPasteAdapterService = class {
 */
 function getCommandSkeleton(accessor, unitId) {
 	var _renderManagerService;
-	return (_renderManagerService = accessor.get(IRenderManagerService).getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSkeletonManagerService);
+	return (_renderManagerService = accessor.get(IRenderManagerService).getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSkeletonManagerService);
 }
 
 //#endregion
@@ -1082,7 +1090,7 @@ const InnerPasteCommand = {
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
 		var _docDataModel$getSelf, _body$tables, _body$customBlocks, _body$blockRanges;
-		const { segmentId, textRanges, doc } = params;
+		const { customRangeMappings = [], segmentId, textRanges, doc } = params;
 		const commandService = accessor.get(ICommandService);
 		const undoRedoService = accessor.get(IUndoRedoService);
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
@@ -1127,6 +1135,11 @@ const InnerPasteCommand = {
 			const cloneBody = Tools.deepClone(body);
 			const blockRangeMappings = [];
 			const customBlockMappings = [];
+			const selectionCustomRangeMappings = customRangeMappings.map(({ sourceRange }) => ({
+				sourceRange,
+				targetRange: 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 = generateRandomId(6);
@@ -1168,7 +1181,7 @@ const InnerPasteCommand = {
 					rawActions.push(orderAction);
 				});
 			}
-			if ((blockRangeMappings.length > 0 || customBlockMappings.length > 0) && pasteAdapterService) {
+			if ((blockRangeMappings.length > 0 || customBlockMappings.length > 0 || selectionCustomRangeMappings.length > 0) && pasteAdapterService) {
 				const mutationInfos = pasteAdapterService.getPasteMutationInfos({
 					unitId,
 					segmentId,
@@ -1176,6 +1189,7 @@ const InnerPasteCommand = {
 					sourceBody: body,
 					targetBody: cloneBody,
 					blockRangeMappings,
+					customRangeMappings: selectionCustomRangeMappings,
 					customBlockMappings
 				});
 				if (mutationInfos.redoMutations.length > 0 || mutationInfos.undoMutations.length > 0) {
@@ -3746,12 +3760,12 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 	}
 	async copy(sliceType = SliceBodyType.copy, ranges) {
 		var _this$_getDocumentBod;
-		const { newSnapshotList = [], needCache = false, snapshot, ranges: allRanges } = (_this$_getDocumentBod = this._getDocumentBodyInRanges(sliceType, ranges)) !== null && _this$_getDocumentBod !== void 0 ? _this$_getDocumentBod : {};
+		const { newSnapshotList = [], needCache = false, plainTextList, snapshot, ranges: allRanges } = (_this$_getDocumentBod = this._getDocumentBodyInRanges(sliceType, ranges)) !== null && _this$_getDocumentBod !== void 0 ? _this$_getDocumentBod : {};
 		if (newSnapshotList.length === 0 || snapshot == null) return false;
 		try {
 			var _allRanges$;
 			const isCopyInHeaderFooter = !!(allRanges === null || allRanges === void 0 || (_allRanges$ = allRanges[0]) === null || _allRanges$ === void 0 ? void 0 : _allRanges$.segmentId);
-			await this._setClipboardData(newSnapshotList, !isCopyInHeaderFooter && needCache);
+			await this._setClipboardData(newSnapshotList, !isCopyInHeaderFooter && needCache, plainTextList);
 		} catch (e) {
 			this._logService.error("[DocClipboardService] copy failed", e);
 			return false;
@@ -3820,16 +3834,25 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		}
 	}
 	async _paste(docData) {
-		var _body$customRanges, _body$paragraphs, _currentDocument$getS;
+		var _body$customRanges$ma, _body$customRanges, _body$paragraphs, _currentDocument$getS;
 		const { body: _body } = docData;
 		if (_body == null) return false;
 		let body = normalizeBody(_body);
 		const currentDocument = this._univerInstanceService.getCurrentUnitOfType(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(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: 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 = generateRandomId(6);
@@ -3857,6 +3880,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 					...docData,
 					body
 				},
+				customRangeMappings,
 				segmentId,
 				textRanges
 			});
@@ -3865,10 +3889,10 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 			return false;
 		}
 	}
-	async _setClipboardData(documentList, needCache = true) {
+	async _setClipboardData(documentList, needCache = true, plainTextList) {
 		var _documentList$0$body;
 		const copyId = 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(DataStreamTreeTokenType.TABLE_START, "").replaceAll(DataStreamTreeTokenType.TABLE_END, "").replaceAll(DataStreamTreeTokenType.TABLE_ROW_START, "").replaceAll(DataStreamTreeTokenType.TABLE_ROW_END, "").replaceAll(DataStreamTreeTokenType.TABLE_CELL_START, "").replaceAll(DataStreamTreeTokenType.TABLE_CELL_END, "").replaceAll(DataStreamTreeTokenType.BLOCK_START, "").replaceAll(DataStreamTreeTokenType.BLOCK_END, "").replaceAll("\r\n", " ").replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, "");
@@ -3905,10 +3929,12 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		}, doc);
 	}
 	_getDocumentBodyInRanges(sliceType, ranges) {
-		var _docDataModel$getSelf;
+		var _this$_clipboardHooks, _docDataModel$getSelf;
 		const docDataModel = this._univerInstanceService.getCurrentUnitOfType(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;
@@ -3916,13 +3942,14 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		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 === DOC_RANGE_TYPE.RECT) {
 				needCache = false;
 				const bodySlice = getTableClipboardBodySlice(body, range);
 				results.push(bodySlice);
+				plainTextResults.push(bodySlice.dataStream);
 				continue;
 			}
 			const deleteRange = {
@@ -3933,6 +3960,11 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 			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) => ({
@@ -3940,6 +3972,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 				body: e
 			})),
 			needCache,
+			plainTextList: plainTextResults,
 			snapshot,
 			ranges: allRanges
 		};
@@ -3998,16 +4031,17 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		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 !== 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 === ImageSourceType.UUID) {
@@ -4021,7 +4055,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		return doc.documentElement.outerHTML;
 	}
 	async _createImagePasteHtml(files) {
-		var _this$_clipboardHooks2, _this$_clipboardHooks3;
+		var _this$_clipboardHooks3, _this$_clipboardHooks4;
 		const doc = {
 			id: "",
 			documentStyle: {},
@@ -4057,7 +4091,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 				};
 			});
 		};
-		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);
@@ -4801,7 +4835,7 @@ const IMEInputCommand = {
 		const renderManagerService = accessor.get(IRenderManagerService);
 		const univerInstanceService = accessor.get(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, UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null || imeInputManagerService == null) return false;
 		const previousActiveRange = imeInputManagerService.getActiveRange();
@@ -4894,7 +4928,8 @@ const SetInlineFormatBoldCommand = {
 	id: SetInlineFormatBoldCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatBoldCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatBoldCommandId, params, commandService);
 	}
 };
 const SetInlineFormatItalicCommandId = "doc.command.set-inline-format-italic";
@@ -4902,7 +4937,8 @@ const SetInlineFormatItalicCommand = {
 	id: SetInlineFormatItalicCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatItalicCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatItalicCommandId, params, commandService);
 	}
 };
 const SetInlineFormatUnderlineCommandId = "doc.command.set-inline-format-underline";
@@ -4910,7 +4946,8 @@ const SetInlineFormatUnderlineCommand = {
 	id: SetInlineFormatUnderlineCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatUnderlineCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatUnderlineCommandId, params, commandService);
 	}
 };
 const SetInlineFormatStrikethroughCommandId = "doc.command.set-inline-format-strikethrough";
@@ -4918,7 +4955,8 @@ const SetInlineFormatStrikethroughCommand = {
 	id: SetInlineFormatStrikethroughCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatStrikethroughCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatStrikethroughCommandId, params, commandService);
 	}
 };
 const SetInlineFormatSubscriptCommandId = "doc.command.set-inline-format-subscript";
@@ -4926,7 +4964,8 @@ const SetInlineFormatSubscriptCommand = {
 	id: SetInlineFormatSubscriptCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatSubscriptCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatSubscriptCommandId, params, commandService);
 	}
 };
 const SetInlineFormatSuperscriptCommandId = "doc.command.set-inline-format-superscript";
@@ -4934,7 +4973,8 @@ const SetInlineFormatSuperscriptCommand = {
 	id: SetInlineFormatSuperscriptCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatSuperscriptCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatSuperscriptCommandId, params, commandService);
 	}
 };
 const SetInlineFormatFontSizeCommandId = "doc.command.set-inline-format-fontsize";
@@ -4942,7 +4982,8 @@ const SetInlineFormatFontSizeCommand = {
 	id: SetInlineFormatFontSizeCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatFontSizeCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatFontSizeCommandId, params, commandService);
 	}
 };
 const SetInlineFormatFontFamilyCommandId = "doc.command.set-inline-format-font-family";
@@ -4950,7 +4991,8 @@ const SetInlineFormatFontFamilyCommand = {
 	id: SetInlineFormatFontFamilyCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatFontFamilyCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatFontFamilyCommandId, params, commandService);
 	}
 };
 const SetInlineFormatTextColorCommandId = "doc.command.set-inline-format-text-color";
@@ -4958,7 +5000,8 @@ const SetInlineFormatTextColorCommand = {
 	id: SetInlineFormatTextColorCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatTextColorCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatTextColorCommandId, params, commandService);
 	}
 };
 const ResetInlineFormatTextColorCommandId = "doc.command.reset-inline-format-text-color";
@@ -4966,7 +5009,8 @@ const ResetInlineFormatTextColorCommand = {
 	id: ResetInlineFormatTextColorCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(ResetInlineFormatTextColorCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(ResetInlineFormatTextColorCommandId, params, commandService);
 	}
 };
 const SetInlineFormatTextFillCommandId = "doc.command.set-inline-format-text-fill";
@@ -4974,7 +5018,8 @@ const SetInlineFormatTextFillCommand = {
 	id: SetInlineFormatTextFillCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatTextFillCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatTextFillCommandId, params, commandService);
 	}
 };
 const SetInlineFormatTextBackgroundColorCommandId = "doc.command.set-inline-format-text-background-color";
@@ -4982,7 +5027,8 @@ const SetInlineFormatTextBackgroundColorCommand = {
 	id: SetInlineFormatTextBackgroundColorCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(SetInlineFormatTextBackgroundColorCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(SetInlineFormatTextBackgroundColorCommandId, params, commandService);
 	}
 };
 const ResetInlineFormatTextBackgroundColorCommandId = "doc.command.reset-inline-format-text-background-color";
@@ -4990,7 +5036,8 @@ const ResetInlineFormatTextBackgroundColorCommand = {
 	id: ResetInlineFormatTextBackgroundColorCommandId,
 	type: CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		return handleInlineFormat(ResetInlineFormatTextBackgroundColorCommandId, params, accessor.get(ICommandService));
+		const commandService = accessor.get(ICommandService);
+		return handleInlineFormat(ResetInlineFormatTextBackgroundColorCommandId, params, commandService);
 	}
 };
 const COMMAND_ID_TO_FORMAT_KEY_MAP = {
@@ -5288,35 +5335,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: CommandType.COMMAND,
-	handler: async (accessor, params) => {
-		var _docDataModel$getSelf2;
-		const { unitId, body, textRanges, segmentId = "", options } = params;
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const commandService = accessor.get(ICommandService);
-		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
-		const docDataModel = univerInstanceService.getUnit(unitId, 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: CommandType.COMMAND,
@@ -5400,13 +5418,13 @@ const ReplaceTextRunsCommand = {
 	id: "doc.command.replace-text-runs",
 	type: CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _docDataModel$getSelf3;
+		var _docDataModel$getSelf2;
 		const { unitId, body, textRanges, segmentId = "", options } = params;
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const commandService = accessor.get(ICommandService);
 		const themeService = accessor.get(ThemeService);
 		const docDataModel = univerInstanceService.getUnit(unitId, 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 = BuildTextUtils.selection.replaceTextRuns({
 			doc: docDataModel,
@@ -6082,10 +6100,10 @@ function insertNamedStyleParagraph(accessor, doc, namedStyleType, startOffset, e
 		segmentId,
 		unitId: doc.getUnitId()
 	}));
-	if (success) accessor.get(DocSelectionManagerService).replaceTextRanges([{
+	if (success) accessor.get(DocSelectionManagerService).replaceDocRanges([{
 		startOffset,
 		endOffset: startOffset
-	}], false);
+	}], void 0, false);
 	return success;
 }
 const QuickHeadingCommand = {
@@ -7201,6 +7219,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 = 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];
@@ -7955,7 +7979,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,
@@ -7966,6 +7990,7 @@ function serializeTextRange(textRange) {
 		direction,
 		segmentId,
 		segmentPage,
+		style,
 		isActive: textRange.isActive()
 	};
 }
@@ -8155,27 +8180,37 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		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 === 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 !== 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 === DOC_RANGE_TYPE.RECT) {
+				const rectRange = getRectRangeFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage);
 				if (rectRange) this._addRectRanges([rectRange]);
 			} else if (rangeType === 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(),
@@ -8246,9 +8281,6 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 	blur() {
 		this._input.blur();
 	}
-	/**
-	* @deprecated
-	*/
 	deactivate() {
 		this._container.style.left = "0px";
 		this._container.style.top = "0px";
@@ -8705,7 +8737,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		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;
@@ -8916,8 +8948,8 @@ const SwitchDocModeCommand = {
 		const docDataModel = accessor.get(IUniverInstanceService).getCurrentUnitOfType(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(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(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();
@@ -9779,7 +9811,7 @@ var Editor = class extends 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(UniverInstanceType.UNIVER_DOC);
@@ -9788,7 +9820,7 @@ var Editor = class extends 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();
@@ -9868,21 +9900,17 @@ var Editor = class extends 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;
 	}
@@ -9900,47 +9928,11 @@ var Editor = class extends Disposable {
 	}
 	getSkeleton() {
 		var _this$_injector$get$g;
-		return (_this$_injector$get$g = this._injector.get(IRenderManagerService).getRenderById(this._getEditorId())) === null || _this$_injector$get$g === void 0 ? void 0 : _this$_injector$get$g.with(DocSkeletonManagerService).getSkeleton();
+		return (_this$_injector$get$g = this._injector.get(IRenderManagerService).getRenderUnitById(this._getEditorId())) === null || _this$_injector$get$g === void 0 ? void 0 : _this$_injector$get$g.with(DocSkeletonManagerService).getSkeleton();
 	}
 	isSheetEditor() {
 		return 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, UniverInstanceType.UNIVER_DOC);
@@ -10014,13 +10006,14 @@ let EditorService = class EditorService extends 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(EDITOR_ACTIVATED, true);
 		if (!isInternalEditorID(editorUnitId)) this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, true);
 		if (isCommentEditorID(editorUnitId)) this._contextService.setContextValue(FOCUSING_COMMENT_EDITOR, true);
@@ -10043,32 +10036,23 @@ let EditorService = class EditorService extends 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, UniverInstanceType.UNIVER_DOC) == null) this._univerInstanceService.createUnit(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,
@@ -10178,7 +10162,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;
@@ -10189,12 +10173,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;
@@ -10240,12 +10224,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);
 	}
@@ -10272,20 +10259,39 @@ function shouldRenderParagraphPlaceholder(documentModel, unitId, config) {
 	if (isInternalEditorID(unitId)) return false;
 	return ((_documentModel$getSna = documentModel.getSnapshot().documentStyle) === null || _documentModel$getSna === void 0 ? void 0 : _documentModel$getSna.documentFlavor) === 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 = getTableIdAndSliceIndex((_table$tableId = table.tableId) !== null && _table$tableId !== void 0 ? _table$tableId : tableId).tableId;
+		const viewport = 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 ? 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;
@@ -10295,7 +10301,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) {
@@ -10313,8 +10319,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 = 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 : NamedStyleType.NORMAL_TEXT];
@@ -10323,13 +10329,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
 	};
 }
@@ -10369,8 +10384,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();
 }
@@ -10517,7 +10544,10 @@ let DocPageLayoutService = class DocPageLayoutService extends Disposable {
 		}
 		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;
@@ -10554,7 +10584,7 @@ let DocRenderController = class DocRenderController extends RxDisposable {
 	}
 	reRender(unitId) {
 		var _this$_renderManagerS;
-		const docSkeletonManagerService = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSkeletonManagerService);
+		const docSkeletonManagerService = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSkeletonManagerService);
 		const skeleton = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getSkeleton();
 		if (!skeleton) return;
 		if (!!skeleton.getViewModel().getDataModel().getSnapshot().disabled) return;
@@ -10702,7 +10732,10 @@ let DocRenderController = class DocRenderController extends RxDisposable {
 		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;
@@ -10890,7 +10923,7 @@ const CloseHeaderFooterCommand = {
 		const instanceService = accessor.get(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(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(DocSkeletonManagerService);
 		const viewModel = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getViewModel();
@@ -11011,9 +11044,10 @@ const DOC_SECTION_SETTING_COMPONENT = "doc_ui_section-setting-panel";
 * limitations under the License.
 */
 let DocSectionSettingController = class DocSectionSettingController extends Disposable {
-	constructor(_sidebarService) {
+	constructor(_sidebarService, _selectionManager) {
 		super();
 		this._sidebarService = _sidebarService;
+		this._selectionManager = _selectionManager;
 		_defineProperty(this, "_panelId", "DocSectionSetting");
 	}
 	openPanel() {
@@ -11027,8 +11061,19 @@ let DocSectionSettingController = class DocSectionSettingController extends Disp
 	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, Inject(ISidebarService))], DocSectionSettingController);
+DocSectionSettingController = __decorate([__decorateParam(0, Inject(ISidebarService)), __decorateParam(1, Inject(DocSelectionManagerService))], DocSectionSettingController);
 
 //#endregion
 //#region src/commands/operations/doc-section-setting-panel.operation.ts
@@ -11041,6 +11086,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: CommandType.OPERATION,
+	handler: (accessor) => {
+		const instanceService = accessor.get(IUniverInstanceService);
+		const selectionManager = accessor.get(DocSelectionManagerService);
+		const commandService = accessor.get(ICommandService);
+		const document = instanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+		const offset = getCollapsedBodyOffset(selectionManager);
+		if (!document || document.getDocumentStyle().documentFlavor !== DocumentFlavor.TRADITIONAL || offset == null) return false;
+		return commandService.syncExecuteCommand(InsertDocumentColumnBreakCommand.id, {
+			unitId: document.getUnitId(),
+			offset
+		});
+	}
+};
+const InsertDocumentSectionBreakOperation = {
+	id: "docs.operation.insert-section-break",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		var _body$sectionBreaks;
+		if (!params) return false;
+		const instanceService = accessor.get(IUniverInstanceService);
+		const selectionManager = accessor.get(DocSelectionManagerService);
+		const commandService = accessor.get(ICommandService);
+		const document = instanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+		const offset = getCollapsedBodyOffset(selectionManager);
+		const body = document === null || document === void 0 ? void 0 : document.getBody();
+		if (!document || !body || document.getDocumentStyle().documentFlavor !== DocumentFlavor.TRADITIONAL || offset == null) return false;
+		const sectionId = createSectionId(new Set((_body$sectionBreaks = body.sectionBreaks) === null || _body$sectionBreaks === void 0 ? void 0 : _body$sectionBreaks.map((section) => section.sectionId)));
+		return commandService.syncExecuteCommand(InsertDocumentSectionBreakCommand.id, {
+			unitId: document.getUnitId(),
+			offset,
+			sectionId,
+			nextSectionType: params.sectionType
+		});
+	}
+};
+
 //#endregion
 //#region src/views/PageSettings.tsx
 const MODERN_WIDTH_OPTIONS = [
@@ -11711,6 +11802,7 @@ const ListTypePicker = (props) => {
 	const { value, onChange, options } = props;
 	return /* @__PURE__ */ 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__ */ jsx("a", {
 				className: 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", borderClassName, { "univer-border-primary-500": value === item.value }),
@@ -11841,7 +11933,7 @@ function getInsertTableHiddenObservable(accessor) {
 			editAreaSubscription = null;
 			if (unitId == null) return subscriber.next(true);
 			if (univerInstanceService.getUnitType(unitId) !== UniverInstanceType.UNIVER_DOC) return subscriber.next(true);
-			const currentRender = renderManagerService.getRenderById(unitId);
+			const currentRender = renderManagerService.getRenderUnitById(unitId);
 			if (currentRender == null) return subscriber.next(true);
 			editAreaSubscription = currentRender.with(DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
 				subscriber.next(editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER);
@@ -11872,7 +11964,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(DocSkeletonManagerService);
 			const viewModel = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getViewModel();
 			if (!viewModel) {
@@ -11893,7 +11985,7 @@ function disableMenuWhenHeaderFooterEditing(accessor) {
 		};
 	});
 }
-function getHeaderFooterMenuHiddenObservable(accessor) {
+function getTraditionalDocMenuHiddenObservable(accessor) {
 	const univerInstanceService = accessor.get(IUniverInstanceService);
 	const commandService = accessor.get(ICommandService);
 	return new Observable((subscriber) => {
@@ -12501,11 +12593,60 @@ function HeaderFooterMenuItemFactory(accessor) {
 		type: MenuItemType.BUTTON,
 		icon: "HeaderFooterIcon",
 		tooltip: "docs-ui.toolbar.headerFooter",
-		hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => {
+		hidden$: combineLatest(getMenuHiddenObservable(accessor, 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: MenuItemType.SUBITEMS,
+		icon: "ColumnIcon",
+		tooltip: "docs-ui.toolbar.breaks",
+		disabled$: disableMenuWhenNoDocRange(accessor),
+		hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getTraditionalDocMenuHiddenObservable(accessor), (hidden, unsupported) => hidden || unsupported)
+	};
+}
+function InsertColumnBreakMenuFactory(accessor) {
+	return {
+		id: InsertDocumentColumnBreakOperation.id,
+		type: MenuItemType.BUTTON,
+		title: "docs-ui.toolbar.columnBreak",
+		disabled$: disableMenuWhenNoDocRange(accessor)
+	};
+}
+function createSectionBreakMenuItem(accessor, id, title, sectionType) {
+	return {
+		id,
+		commandId: InsertDocumentSectionBreakOperation.id,
+		params: { sectionType },
+		type: MenuItemType.BUTTON,
+		title,
+		disabled$: disableMenuWhenNoDocRange(accessor)
+	};
+}
+function InsertNextPageSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_NEXT_PAGE_MENU_ID, "docs-ui.toolbar.sectionBreakNextPage", SectionType.NEXT_PAGE);
+}
+function InsertContinuousSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_CONTINUOUS_MENU_ID, "docs-ui.toolbar.sectionBreakContinuous", SectionType.CONTINUOUS);
+}
+function InsertNextColumnSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_NEXT_COLUMN_MENU_ID, "docs-ui.toolbar.sectionBreakNextColumn", SectionType.NEXT_COLUMN);
+}
+function InsertEvenPageSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_EVEN_PAGE_MENU_ID, "docs-ui.toolbar.sectionBreakEvenPage", SectionType.EVEN_PAGE);
+}
+function InsertOddPageSectionBreakMenuFactory(accessor) {
+	return createSectionBreakMenuItem(accessor, DOC_SECTION_BREAK_ODD_PAGE_MENU_ID, "docs-ui.toolbar.sectionBreakOddPage", SectionType.ODD_PAGE);
+}
 const TableIcon = "GridIcon";
 const TABLE_MENU_ID = "doc.menu.table";
 function TableMenuFactory(accessor) {
@@ -13718,19 +13859,53 @@ const menuSchema = {
 			},
 			menuItemFactory: HorizontalLineFactory
 		},
-		[DOC_INSERT_EMOJI_MENU_ID]: {
+		[DOC_BREAKS_MENU_ID]: {
 			order: 4,
 			gridLayout: {
 				row: 1,
-				column: 3
+				column: 3,
+				rowSpan: 2,
+				showLabel: true
+			},
+			menuItemFactory: BreaksMenuFactory,
+			[InsertDocumentColumnBreakOperation.id]: {
+				order: 0,
+				menuItemFactory: InsertColumnBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_NEXT_PAGE_MENU_ID]: {
+				order: 1,
+				menuItemFactory: InsertNextPageSectionBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_CONTINUOUS_MENU_ID]: {
+				order: 2,
+				menuItemFactory: InsertContinuousSectionBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_NEXT_COLUMN_MENU_ID]: {
+				order: 3,
+				menuItemFactory: InsertNextColumnSectionBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_EVEN_PAGE_MENU_ID]: {
+				order: 4,
+				menuItemFactory: InsertEvenPageSectionBreakMenuFactory
+			},
+			[DOC_SECTION_BREAK_ODD_PAGE_MENU_ID]: {
+				order: 5,
+				menuItemFactory: InsertOddPageSectionBreakMenuFactory
+			}
+		},
+		[DOC_INSERT_EMOJI_MENU_ID]: {
+			order: 5,
+			gridLayout: {
+				row: 1,
+				column: 4
 			},
 			menuItemFactory: EmojiPickerMenuItemFactory
 		},
 		[DOC_INSERT_SYMBOL_MENU_ID]: {
-			order: 5,
+			order: 6,
 			gridLayout: {
 				row: 2,
-				column: 3
+				column: 4
 			},
 			menuItemFactory: SymbolPickerMenuItemFactory
 		}
@@ -14700,7 +14875,7 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 		};
 	}
 	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);
@@ -14729,7 +14904,7 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 	* @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);
@@ -14761,7 +14936,7 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 	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);
@@ -15164,12 +15339,13 @@ let DocEventManagerService = class DocEventManagerService extends Disposable {
 		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,
@@ -15630,7 +15806,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] = 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;
@@ -15672,7 +15848,8 @@ function DocSideMenuContent() {
 	}).filter((item) => item === null || item === void 0 ? void 0 : item.text);
 	const handleScroll = 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 ? [{
@@ -15799,7 +15976,7 @@ let DocUIController = class DocUIController extends Disposable {
 	_initFocusHandler() {
 		this.disposeWithMe(this._layoutService.registerFocusHandler(UniverInstanceType.UNIVER_DOC, (unitId) => {
 			if (this._shouldPreserveEmbedFocus(unitId)) return;
-			this._injector.get(IRenderManagerService).getRenderById(unitId).with(DocSelectionRenderService).focus();
+			this._injector.get(IRenderManagerService).getRenderUnitById(unitId).with(DocSelectionRenderService).focus();
 		}));
 	}
 	_shouldPreserveEmbedFocus(unitId) {
@@ -15937,7 +16114,7 @@ function collectDocsTableLikeEmbedChildUnitIds(drawings, resolveChildUnitId) {
 		const data = getDrawingData(drawing);
 		const childUnitId = data ? (_resolveChildUnitId = resolveChildUnitId === null || resolveChildUnitId === void 0 ? void 0 : resolveChildUnitId(data)) !== null && _resolveChildUnitId !== void 0 ? _resolveChildUnitId : typeof data.childUnitId === "string" ? data.childUnitId : void 0 : void 0;
 		const childType = typeof (data === null || data === void 0 ? void 0 : data.childType) === "number" ? data.childType : void 0;
-		if (!childUnitId || !isSheetLikeDocsCustomBlockChildType$1(childType)) return;
+		if (!childUnitId || !isSheetLikeDocsCustomBlockChildType(childType)) return;
 		childUnitIds.add(childUnitId);
 	});
 	return childUnitIds;
@@ -16026,10 +16203,10 @@ function resolveMaxScrollLeft(element, requestedMaxScrollLeft) {
 const MODERN_DOCS_CUSTOM_BLOCK_VIEWPORT_INSET = 10;
 function resolveDocsCustomBlockRenderViewport(params) {
 	var _params$fallbackWidth, _params$fallbackHeigh, _params$contentHeight, _params$visibleCanvas, _params$pageMarginLef, _params$pageMarginRig, _params$contentWidth, _params$docsLeft, _params$visibleCanvas2;
-	const defaultSize = resolveDocsCustomBlockSize$1(params.childType);
+	const defaultSize = resolveDocsCustomBlockSize(params.childType);
 	const fallbackWidth = (_params$fallbackWidth = params.fallbackWidth) !== null && _params$fallbackWidth !== void 0 ? _params$fallbackWidth : defaultSize.width;
 	const fallbackHeight = (_params$fallbackHeigh = params.fallbackHeight) !== null && _params$fallbackHeigh !== void 0 ? _params$fallbackHeigh : defaultSize.height;
-	const sheetLike = isSheetLikeDocsCustomBlockChildType$1(params.childType);
+	const sheetLike = isSheetLikeDocsCustomBlockChildType(params.childType);
 	const contentHeight = Number.isFinite(params.contentHeight) && ((_params$contentHeight = params.contentHeight) !== null && _params$contentHeight !== void 0 ? _params$contentHeight : 0) > 0 ? params.contentHeight : fallbackHeight;
 	const visibleCanvasHeight = Number.isFinite(params.visibleCanvasHeight) && ((_params$visibleCanvas = params.visibleCanvasHeight) !== null && _params$visibleCanvas !== void 0 ? _params$visibleCanvas : 0) > 0 ? params.visibleCanvasHeight : void 0;
 	const height = sheetLike ? contentHeight : fallbackHeight;
@@ -16055,7 +16232,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);
@@ -16081,7 +16259,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.0-alpha.7";
+var version = "1.0.0-alpha.8";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -16253,7 +16431,7 @@ function getSegmentId(documentStyle, editArea, pageIndex, page) {
 }
 const DocHeaderFooterOptions = (props) => {
 	var _segmentContext$segme, _segmentContext$segme2;
-	const docSelectionRenderService = useDependency(IRenderManagerService).getRenderById(props.unitId).with(DocSelectionRenderService);
+	const docSelectionRenderService = useDependency(IRenderManagerService).getRenderUnitById(props.unitId).with(DocSelectionRenderService);
 	const segmentContext = useObservable(docSelectionRenderService.segmentContext$, {
 		segmentId: docSelectionRenderService.getSegment(),
 		segmentPage: docSelectionRenderService.getSegmentPage()
@@ -16268,12 +16446,12 @@ function DocHeaderFooterOptionsContent(props) {
 	const commandService = useDependency(ICommandService);
 	const layoutService = useDependency(ILayoutService);
 	const { unitId } = props;
-	const docSelectionRenderService = renderManagerService.getRenderById(unitId).with(DocSelectionRenderService);
+	const docSelectionRenderService = renderManagerService.getRenderUnitById(unitId).with(DocSelectionRenderService);
 	const docDataModel = univerInstanceService.getUnit(unitId, 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(DocSkeletonManagerService);
+		const docSkeletonManagerService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(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),
@@ -16291,7 +16469,7 @@ function DocHeaderFooterOptionsContent(props) {
 		};
 	});
 	const sectionContext = getCurrentSectionContext();
-	const referenceKey = getSectionHeaderFooterReferenceKey(((_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.with(DocSkeletonManagerService)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.getViewModel()) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.getEditArea()) === 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 = getSectionHeaderFooterReferenceKey(((_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.with(DocSkeletonManagerService)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.getViewModel()) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.getEditArea()) === 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] = 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) => {
@@ -16302,7 +16480,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(DocSkeletonManagerService);
+		const docSkeletonManagerService = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(DocSkeletonManagerService);
 		const viewModel = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getViewModel();
 		if (documentStyle == null || viewModel == null) return;
 		const editArea = viewModel.getEditArea();
@@ -16367,7 +16545,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(DocSkeletonManagerService)) === null || _renderManagerService4 === void 0 || (_renderManagerService4 = _renderManagerService4.getViewModel()) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.getEditArea()) === DocumentEditArea.FOOTER ? "footer" : "header";
+		const kind = ((_renderManagerService4 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService4 === void 0 || (_renderManagerService4 = _renderManagerService4.with(DocSkeletonManagerService)) === null || _renderManagerService4 === void 0 || (_renderManagerService4 = _renderManagerService4.getViewModel()) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.getEditArea()) === DocumentEditArea.FOOTER ? "footer" : "header";
 		const currentVariant = getHeaderFooterVariant(context.config, docSelectionRenderService.getSegmentPage(), context.page);
 		const key = getSectionHeaderFooterReferenceKey(kind, currentVariant);
 		const segmentId = generateRandomId(6);
@@ -16857,7 +17035,7 @@ const useFirstParagraphLineSpacing = (paragraph) => {
 		var _renderManagerService;
 		const docDataModel = univerInstanceService.getCurrentUnitOfType(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(DocSkeletonManagerService).getSkeleton();
+		return (_renderManagerService = renderManagerService.getRenderUnitById(docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getUnitId())) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSkeletonManagerService).getSkeleton();
 	}, []);
 	const stateChange$ = useMemo(() => new BehaviorSubject({}), []);
 	const [spacingRule, setSpacingRuleInternal] = useState(() => {
@@ -16886,7 +17064,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,
@@ -17929,9 +18108,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 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);
 }
@@ -18415,7 +18591,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const handledSlashRequestNonceRef = useRef(0);
 	const renderManagerService = useDependency(IRenderManagerService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
-	const renderUnit = renderManagerService.getRenderById(popup.unitId);
+	const renderUnit = renderManagerService.getRenderUnitById(popup.unitId);
 	const doc = univerInstanceService.getUnit(popup.unitId, 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);
@@ -18454,10 +18630,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,
@@ -18491,10 +18668,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);
@@ -18522,7 +18700,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;
@@ -18530,7 +18708,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);
@@ -18689,7 +18867,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		/* @__PURE__ */ jsxs("div", {
 			"data-u-comp": "paragraph-menu",
 			ref: anchorRef,
-			className: getParagraphMenuTriggerClassName(visible),
+			className: 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);
@@ -18861,13 +19039,13 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 								return;
 							}
 							if (commandId === DocPasteCommand.id) {
-								docSelectionManagerService.replaceTextRanges([afterTableRange], false);
+								docSelectionManagerService.replaceDocRanges([afterTableRange], void 0, false);
 								await commandService.executeCommand(DocPasteCommand.id);
 								finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
 								return;
 							}
-							if (commandId === DocTableDeleteTableCommand.id) docSelectionManagerService.replaceTextRanges([tableRange], false);
-							else if (params.id === "doc.menu.insert-bellow" || commandId !== "doc.menu.insert-bellow") docSelectionManagerService.replaceTextRanges([afterTableRange], false);
+							if (commandId === DocTableDeleteTableCommand.id) docSelectionManagerService.replaceDocRanges([tableRange], void 0, false);
+							else if (params.id === "doc.menu.insert-bellow" || commandId !== "doc.menu.insert-bellow") docSelectionManagerService.replaceDocRanges([afterTableRange], void 0, false);
 							if (commandService && commandId) commandService.executeCommand(commandId, commandId === DocTableDeleteTableCommand.id ? {
 								...commandParams,
 								targetRange: tableRange
@@ -18927,7 +19105,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)),
@@ -18938,6 +19116,38 @@ function getSectionSettingValues(sections) {
 		sectionType: getCommonValue(sections.map((section) => {
 			var _section$sectionType;
 			return (_section$sectionType = section.sectionType) !== null && _section$sectionType !== void 0 ? _section$sectionType : 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;
 		}))
 	};
 }
@@ -18951,6 +19161,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 : 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 [];
@@ -18964,14 +19191,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 = useDependency(ICommandService);
 	const instanceService = useDependency(IUniverInstanceService);
 	const selectionManager = useDependency(DocSelectionManagerService);
+	const controller = useDependency(DocSectionSettingController);
 	const documentDataModel = useObservable(useMemo(() => instanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), [instanceService]));
 	const resolveSections = () => (documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDocumentStyle().documentFlavor) === DocumentFlavor.TRADITIONAL ? getSelectedSections(documentDataModel, selectionManager.getDocRanges()) : [];
 	const sections = useObservable(documentDataModel ? () => combineLatest([selectionManager.textSelection$.pipe(startWith(void 0)), documentDataModel.change$.pipe(startWith(void 0))]).pipe(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) === DocumentFlavor.TRADITIONAL && body ? getTopLevelSectionBreaks(body) : [];
 	const update = (updates) => {
 		if (!documentDataModel || updates.length === 0) return Promise.resolve(false);
 		return commandService.executeCommand(UpdateDocumentSectionCommand.id, {
@@ -18986,7 +19223,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 }) : []);
@@ -19000,6 +19245,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)) });
 		}
 	};
 }
@@ -19010,9 +19293,9 @@ function SettingRow(props) {
 	return /* @__PURE__ */ 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__ */ jsx("div", {
+		children: [/* @__PURE__ */ 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__ */ jsx("div", {
 			className: "univer-w-full univer-min-w-0",
 			children: props.children
@@ -19020,27 +19303,11 @@ function SettingRow(props) {
 	});
 }
 function SectionSetting() {
+	var _setting$selectedSect;
 	const localeService = useDependency(LocaleService);
 	const controller = useDependency(DocSectionSettingController);
 	const setting = useSectionSetting();
-	const labels = 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")
-	}), [
-		useObservable(localeService.currentLocale$),
-		localeService,
-		setting.selectedCount
-	]);
+	useObservable(localeService.currentLocale$);
 	useEffect(() => {
 		if (!setting.valid) controller.closePanel();
 	}, [controller, setting.valid]);
@@ -19049,13 +19316,27 @@ function SectionSetting() {
 		className: "univer-box-border univer-w-full",
 		children: [setting.selectedCount > 1 && /* @__PURE__ */ 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__ */ jsxs("div", {
 			className: "univer-grid univer-gap-3",
 			children: [
 				/* @__PURE__ */ jsx(SettingRow, {
-					label: labels.columnCount,
+					label: localeService.t("docs-ui.doc.slider.sectionSetting"),
+					children: /* @__PURE__ */ jsx(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__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.columnCount"),
 					children: /* @__PURE__ */ jsx(InputNumber, {
+						"aria-label": localeService.t("docs-ui.doc.sectionSetting.columnCount"),
 						className: "univer-w-full",
 						min: 1,
 						max: 12,
@@ -19066,8 +19347,10 @@ function SectionSetting() {
 					})
 				}),
 				/* @__PURE__ */ jsx(SettingRow, {
-					label: labels.columnGap,
+					label: localeService.t("docs-ui.doc.sectionSetting.columnGap"),
+					unit: " (px)",
 					children: /* @__PURE__ */ jsx(InputNumber, {
+						"aria-label": localeService.t("docs-ui.doc.sectionSetting.columnGap"),
 						className: "univer-w-full",
 						min: 0,
 						max: 1e3,
@@ -19078,49 +19361,183 @@ function SectionSetting() {
 					})
 				}),
 				/* @__PURE__ */ jsx(SettingRow, {
-					label: labels.columnSeparator,
+					label: localeService.t("docs-ui.doc.sectionSetting.columnSeparator"),
 					children: /* @__PURE__ */ jsx(Select, {
 						className: "univer-w-full",
-						value: setting.separatorType == null ? "" : String(setting.separatorType),
-						options: [{
-							label: labels.none,
-							value: String(ColumnSeparatorType.NONE)
-						}, {
-							label: labels.betweenColumns,
-							value: String(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: `${ColumnSeparatorType.NONE}`
+							},
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.betweenColumns"),
+								value: `${ColumnSeparatorType.BETWEEN_EACH_COLUMN}`
+							}
+						],
 						onChange: (value) => setting.setSeparatorType(Number(value))
 					})
 				}),
 				/* @__PURE__ */ jsx(SettingRow, {
-					label: labels.sectionStart,
+					label: localeService.t("docs-ui.doc.sectionSetting.sectionStart"),
 					children: /* @__PURE__ */ jsx(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: `${SectionType.SECTION_TYPE_UNSPECIFIED}`
+							},
 							{
-								label: labels.unspecified,
-								value: String(SectionType.SECTION_TYPE_UNSPECIFIED)
+								label: localeService.t("docs-ui.doc.sectionSetting.continuous"),
+								value: `${SectionType.CONTINUOUS}`
 							},
 							{
-								label: labels.continuous,
-								value: String(SectionType.CONTINUOUS)
+								label: localeService.t("docs-ui.doc.sectionSetting.nextColumn"),
+								value: `${SectionType.NEXT_COLUMN}`
 							},
 							{
-								label: labels.nextPage,
-								value: String(SectionType.NEXT_PAGE)
+								label: localeService.t("docs-ui.doc.sectionSetting.nextPage"),
+								value: `${SectionType.NEXT_PAGE}`
 							},
 							{
-								label: labels.evenPage,
-								value: String(SectionType.EVEN_PAGE)
+								label: localeService.t("docs-ui.doc.sectionSetting.evenPage"),
+								value: `${SectionType.EVEN_PAGE}`
 							},
 							{
-								label: labels.oddPage,
-								value: String(SectionType.ODD_PAGE)
+								label: localeService.t("docs-ui.doc.sectionSetting.oddPage"),
+								value: `${SectionType.ODD_PAGE}`
 							}
 						],
 						onChange: (value) => setting.setSectionType(Number(value))
 					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "univer-pt-2 univer-text-sm univer-font-medium",
+					children: localeService.t("docs-ui.doc.sectionSetting.pageSetup")
+				}),
+				/* @__PURE__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.pageWidth"),
+					unit: " (px)",
+					children: /* @__PURE__ */ jsx(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__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.pageHeight"),
+					unit: " (px)",
+					children: /* @__PURE__ */ jsx(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__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.orientation"),
+					children: /* @__PURE__ */ jsx(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: `${PageOrientType.PORTRAIT}`
+							},
+							{
+								label: localeService.t("docs-ui.page-settings.landscape"),
+								value: `${PageOrientType.LANDSCAPE}`
+							}
+						],
+						onChange: (value) => setting.setPageOrient(Number(value))
+					})
+				}),
+				/* @__PURE__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.top"),
+					unit: " (px)",
+					children: /* @__PURE__ */ jsx(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__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.bottom"),
+					unit: " (px)",
+					children: /* @__PURE__ */ jsx(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__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.left"),
+					unit: " (px)",
+					children: /* @__PURE__ */ jsx(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__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.page-settings.right"),
+					unit: " (px)",
+					children: /* @__PURE__ */ jsx(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__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.pageNumberStart"),
+					children: /* @__PURE__ */ jsx(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)
+					})
 				})
 			]
 		})]
@@ -19225,6 +19642,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 			AddImageIcon,
 			BoldIcon,
 			CopyDoubleIcon,
+			ColumnIcon,
 			CutIcon,
 			DeleteColumnDoubleIcon,
 			DeleteIcon,
@@ -19366,7 +19784,7 @@ let DocAutoFormatController = class DocAutoFormatController extends Disposable {
 			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(DocSkeletonManagerService).getSkeleton();
 				if (skeleton == null) return false;
 				if (startNodePosition && endNodePosition && isInSameTableCellData(skeleton, startNodePosition, endNodePosition)) return true;
@@ -19504,9 +19922,10 @@ var TextBubbleShape = class TextBubbleShape extends Shape {
 		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
@@ -19827,13 +20246,14 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 		}));
 	}
 	_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(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(DocSkeletonManagerService).getSkeleton();
-		const docObject = this._getDocObject();
+		const currentRender = this._renderManagerService.getRenderUnitById(docDataModel.getUnitId());
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(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 : "";
@@ -19845,11 +20265,11 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 				min = Math.min(min, range.startOffset);
 				max = Math.max(max, range.endOffset);
 			}
-			this._textSelectionManagerService.replaceTextRanges([{
+			this._textSelectionManagerService.replaceDocRanges([{
 				startOffset: direction === Direction.LEFT || direction === Direction.UP ? max : min,
 				endOffset: direction === Direction.LEFT || direction === Direction.UP ? min : max,
 				style
-			}], false);
+			}], void 0, false);
 			return;
 		}
 		const anchorOffset = collapsed ? startOffset : rangeDirection === RANGE_DIRECTION.FORWARD ? startOffset : endOffset;
@@ -19863,11 +20283,11 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 			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;
 		}
@@ -19877,11 +20297,11 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 			const curGlyph = skeleton.findNodeByCharIndex(focusOffset, segmentId, segmentPage);
 			focusOffset = direction === 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);
@@ -19891,32 +20311,33 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 			if (newPos == null) {
 				const newFocusOffset = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, direction === 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(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(DocSkeletonManagerService).getSkeleton();
-		const docObject = this._getDocObject();
+		const currentRender = this._renderManagerService.getRenderUnitById(docDataModel.getUnitId());
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(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 : "";
@@ -19940,11 +20361,11 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 			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;
 		}
@@ -19973,11 +20394,11 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 			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);
@@ -19989,21 +20410,21 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 				if (collapsed) cursor = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, direction === Direction.UP ? 0 : dataStreamLength - 2, direction, normalizedSegmentId, normalizedSegmentPage);
 				else cursor = this._normalizeRenderableCursorOffset(skeleton, body.dataStream, customRanges, direction === 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);
 		}
 	}
@@ -20454,8 +20875,8 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 		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,
@@ -20463,9 +20884,6 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 			collapsed: true
 		});
 	}
-	_getDocObject() {
-		return getDocObject(this._univerInstanceService, this._renderManagerService);
-	}
 };
 DocMoveCursorController = __decorate([
 	__decorateParam(0, IUniverInstanceService),
@@ -20733,7 +21151,7 @@ let DocEditorBridgeController = class DocEditorBridgeController extends Disposab
 			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 = fromEvent(canvasEle, "mousedown").subscribe((evt) => {
@@ -20752,8 +21170,8 @@ let DocEditorBridgeController = class DocEditorBridgeController extends Disposab
 			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);
 			}
 		}));
 	}
@@ -21218,7 +21636,7 @@ let DocZoomRenderController = class DocZoomRenderController extends Disposable {
 		this._initCommandExecutedListener();
 		this._isSheetEditor = this._context.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY;
 		const currentSheet = this._univerInstanceService.getCurrentUnitOfType(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);
@@ -21384,7 +21802,6 @@ let DocsRenderService = class DocsRenderService extends RxDisposable {
 		this._init();
 	}
 	_init() {
-		this._renderManagerService.createRender$.pipe(takeUntil(this.dispose$)).subscribe((unitId) => this._createRenderWithId(unitId));
 		this._instanceSrv.getAllUnitsForType(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);
@@ -21399,7 +21816,7 @@ let DocsRenderService = class DocsRenderService extends RxDisposable {
 			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) {
@@ -21661,13 +22078,14 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 			DocParagraphSettingCommand,
 			InnerPasteCommand,
 			CutContentCommand,
-			ReplaceContentCommand,
 			ReplaceSnapshotCommand,
 			CoverContentCommand,
 			SetDocZoomRatioCommand,
 			DocSelectAllCommand,
 			DocParagraphSettingPanelOperation,
 			DocSectionSettingPanelOperation,
+			InsertDocumentColumnBreakOperation,
+			InsertDocumentSectionBreakOperation,
 			MoveCursorOperation,
 			MoveSelectionOperation,
 			ReplaceTextRunsCommand,
@@ -21817,7 +22235,7 @@ _defineProperty(UniverDocsUIPlugin, "pluginName", "DOC_UI_PLUGIN");
 _defineProperty(UniverDocsUIPlugin, "packageName", name);
 _defineProperty(UniverDocsUIPlugin, "version", version);
 UniverDocsUIPlugin = __decorate([
-	DependentOn(UniverRenderEnginePlugin, UniverDocsPlugin),
+	DependentOn(UniverDocsPlugin, UniverRenderEnginePlugin),
 	__decorateParam(1, Inject(Injector)),
 	__decorateParam(2, IRenderManagerService),
 	__decorateParam(3, ICommandService),
@@ -21898,7 +22316,7 @@ function useEditor(opts) {
 	const editorService = useDependency(IEditorService);
 	useLayoutEffect(() => {
 		if (container.current) {
-			const initialDoc = typeof initialValue === "string" ? void 0 : Tools.deepClone(initialValue);
+			const initialDoc = typeof initialValue === "string" ? RichTextBuilder.create().insertText(initialValue).getData() : Tools.deepClone(initialValue);
 			const snapshot = {
 				body: {
 					dataStream: typeof initialValue === "string" ? `${initialValue}\r\n` : "\r\n",
@@ -21991,7 +22409,7 @@ const useEditorClickOutside = (editorId, containerRef, onClickOutside) => {
 */
 function useIsFocusing(editorId) {
 	var _docSelectionRenderSe;
-	const renderer = useDependency(IRenderManagerService).getRenderById(editorId);
+	const renderer = useDependency(IRenderManagerService).getRenderUnitById(editorId);
 	const docSelectionRenderService = renderer === null || renderer === void 0 ? void 0 : renderer.with(DocSelectionRenderService);
 	const selections = 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)));
@@ -22005,7 +22423,8 @@ function useKeyboardEvent(isNeed, config, editor) {
 	const key = useMemo(() => generateRandomId(4), []);
 	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 DisposableCollection();
 		d.add(commandService.registerCommand({
 			id: operationId,
@@ -22019,6 +22438,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: {
@@ -22294,7 +22715,7 @@ const RichTextEditor = (props) => {
 		autoFocus,
 		isSingle
 	});
-	const renderer = useDependency(IRenderManagerService).getRenderById(editorId);
+	const renderer = useDependency(IRenderManagerService).getRenderUnitById(editorId);
 	const selectionIsFocusing = useIsFocusing(editorId);
 	const docSelectionRenderService = renderer === null || renderer === void 0 ? void 0 : renderer.with(DocSelectionRenderService);
 	const editorFocused = useObservable(editor ? () => {
@@ -22381,4 +22802,4 @@ const RichTextEditor = (props) => {
 };
 
 //#endregion
-export { AfterSpaceCommand, AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignMenuItemFactory, AlignOperationCommand, AlignRightCommand, BackgroundColorSelectorMenuItemFactory, BoldMenuItemFactory, BreakLineCommand, BulletListCommand, ChangeListNestingLevelCommand, ChangeListNestingLevelType, ChangeListTypeCommand, CheckListCommand, CoverContentCommand, CreateDocTableCommand, CutContentCommand, DEFAULT_DOC_FIT_TO_WIDTH_OPTIONS, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX, DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_UI_PLUGIN_CONFIG_KEY, DOCS_VIEW_KEY, DOC_CONTENT_INSERT_MENU_ID, DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, DOC_PARAGRAPH_T_ALIGN_MENU_ID, DOC_PARAGRAPH_T_COLORS_MENU_ID, DOC_PARAGRAPH_T_DIVIDER_MENU_ID, DOC_PARAGRAPH_T_EDIT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DOC_TABLE_BLOCK_MENU_ID, DOC_VERTICAL_PADDING, DeleteCurrentParagraphCommand, DeleteCustomBlockCommand, DeleteLeftCommand, DeleteRightCommand, DocAutoFormatService, DocBackScrollRenderController, DocCanvasPopManagerService, DocClipboardPasteAdapterService, DocCopyCommand, DocCreateTableOperation, DocCutCommand, DocEventManagerService, DocFloatMenuService, DocHtmlExportService, DocIMEInputManagerService, DocPageLayoutService, DocParagraphMenuService, DocParagraphPlaceholderRenderController, DocPasteCommand, DocPrintInterceptorService, DocRenderController, DocSelectAllCommand, DocSelectionRenderService, DocTableDeleteColumnsCommand, DocTableDeleteRowsCommand, DocTableDeleteTableCommand, DocTableInsertColumnCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertRowCommand, DocTableTabCommand, DocUIController, DocViewScaleService, DocsRenderService, menuSchema as DocsUIMenuSchema, EMBED_DOCS_CUSTOM_BLOCK_DEFAULT_COMPONENT_KEY, EMPTY_PARAGRAPH_MENU_ID, Editor, EditorService, EnterCommand, FLOAT_TEXT_STYLE_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, FloatTextStyleMenuItemFactory, FontFamilySelectorMenuItemFactory, FontSizeSelectorMenuItemFactory, HorizontalLineCommand, IDocClipboardPasteAdapterService, IDocClipboardService, IDocEmbedInteractionBoundaryService, IDocEmbedRuntimeFocusCoordinator, IEditorService, IMEInputCommand, INSERT_BELLOW_MENU_ID, InnerPasteCommand, InsertCustomRangeCommand, ItalicMenuItemFactory, ListOperationCommand, MergeTwoParagraphCommand, MoveCursorOperation, MoveDocBlockCommand, MoveSelectionOperation, NORMAL_TEXT_SELECTION_PLUGIN_NAME, NodePositionConvertToCursor, NodePositionConvertToRectRange, OrderListCommand, ParagraphMenuInsertBelowSubmenuItemFactory, LarkPastePlugin as PastePluginLark, UniverPastePlugin as PastePluginUniver, WordPastePlugin as PastePluginWord, QuickListCommand, RectRange, ReplaceContentCommand, ReplaceSelectionCommand, ReplaceSnapshotCommand, ReplaceTextRunsCommand, ResetInlineFormatTextBackgroundColorCommand, ResetInlineFormatTextColorCommand, RichTextEditor, SetDocZoomRatioCommand, SetDocZoomRatioOperation, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatTextFillCommand, SetInlineFormatUnderlineCommand, SetParagraphNamedStyleCommand, StrikeThroughMenuItemFactory, SwitchDocModeCommand, TEXT_RANGE_LAYER_INDEX, TabCommand, TextColorSelectorMenuItemFactory, TextRange, ToggleCheckListCommand, UnderlineMenuItemFactory, UniverDocsUIPlugin, VIEWPORT_KEY, addCustomDecorationBySelectionFactory, addCustomDecorationFactory, buildMoveDocBlockActions, calcDocFitToWidthScale, calcDocRangePositions, collectDocsTableLikeEmbedChildUnitIds, convertBodyToHtml, convertPositionsToRectRanges, createDefaultDocsTableLikeCustomBlockBleedViewport, createDocsCustomBlockInsertMutation, createDocsCustomBlockRemoveMutation, createDocsCustomBlockSizeRefreshScheduler, createEditorUndoRedoKeyboardConfig, createEmbedDocsCustomBlockData, createInsertCustomBlockActions, createRemoveCustomBlockActions, deleteCustomDecorationFactory, disableMenuWhenHeaderFooterEditing, executeEditorUndoRedoCommand, genTableSource, generateParagraphs, getAnchorBounding, getCanvasOffsetByEngine, getCommandSkeleton, getCursorWhenDelete, getCutActionsFromDocRanges, getDocBlockRangeMenuId, getDocObject, getDocObjectById, getEmptyTableCell, getEmptyTableRow, getLineBounding, getListMarkerFallbackBound, getListParagraphContextMenuHit, getOneTextSelectionRange, getStyleInTextRange, getTableColumn, hasParagraphInTable, hideMenuWhenSelectionInBlockRange, isInSameTableCell, isSheetLikeDocsCustomBlockChildType, isTextRangeInAnyBlockRange, isValidRectRange, neoGetDocObject, normalizeDocFitToWidthOptions, resolveDocFitBaseWidth, resolveDocViewScale, resolveDocsCustomBlockRenderViewport, resolveDocsCustomBlockSize, resolveDocsTableLikeCustomBlockBleedViewport, resolveDocsTableLikeCustomBlockContentHeight, resolveDocsTableLikeCustomBlockContentWidth, scrollDocsTableLikeCustomBlockLive, shouldRefreshDocsCustomBlockSizeForCommand, useEditor, useEditorClickOutside, useIsFocusing, useKeyboardEvent, useLeftAndRightArrow, useOnChange, useResize, whenDocAndEditorFocused };
+export { AfterSpaceCommand, AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignMenuItemFactory, AlignOperationCommand, AlignRightCommand, BackgroundColorSelectorMenuItemFactory, BoldMenuItemFactory, BreakLineCommand, BulletListCommand, ChangeListNestingLevelCommand, ChangeListNestingLevelType, ChangeListTypeCommand, CheckListCommand, CoverContentCommand, CreateDocTableCommand, CutContentCommand, DEFAULT_DOC_FIT_TO_WIDTH_OPTIONS, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX, DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_UI_PLUGIN_CONFIG_KEY, DOCS_VIEW_KEY, DOC_CONTENT_INSERT_MENU_ID, DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA, DOC_CUSTOM_RANGE_CHROME_RADIUS, DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, DOC_PARAGRAPH_T_ALIGN_MENU_ID, DOC_PARAGRAPH_T_COLORS_MENU_ID, DOC_PARAGRAPH_T_DIVIDER_MENU_ID, DOC_PARAGRAPH_T_EDIT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DOC_TABLE_BLOCK_MENU_ID, DOC_VERTICAL_PADDING, DeleteCurrentParagraphCommand, DeleteCustomBlockCommand, DeleteLeftCommand, DeleteRightCommand, DocAutoFormatService, DocBackScrollRenderController, DocCanvasPopManagerService, DocClipboardPasteAdapterService, DocCopyCommand, DocCreateTableOperation, DocCutCommand, DocEventManagerService, DocFloatMenuService, DocHtmlExportService, DocIMEInputManagerService, DocPageLayoutService, DocParagraphMenuService, DocParagraphPlaceholderRenderController, DocPasteCommand, DocPrintInterceptorService, DocRenderController, DocSelectAllCommand, DocSelectionRenderService, DocTableDeleteColumnsCommand, DocTableDeleteRowsCommand, DocTableDeleteTableCommand, DocTableInsertColumnCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertRowCommand, DocTableTabCommand, DocUIController, DocViewScaleService, DocsRenderService, menuSchema as DocsUIMenuSchema, EMPTY_PARAGRAPH_MENU_ID, Editor, EditorService, EnterCommand, FLOAT_TEXT_STYLE_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, FloatTextStyleMenuItemFactory, FontFamilySelectorMenuItemFactory, FontSizeSelectorMenuItemFactory, HorizontalLineCommand, IDocClipboardPasteAdapterService, IDocClipboardService, IDocEmbedInteractionBoundaryService, IDocEmbedRuntimeFocusCoordinator, IEditorService, IMEInputCommand, INSERT_BELLOW_MENU_ID, InnerPasteCommand, InsertCustomRangeCommand, ItalicMenuItemFactory, ListOperationCommand, MergeTwoParagraphCommand, MoveCursorOperation, MoveDocBlockCommand, MoveSelectionOperation, NORMAL_TEXT_SELECTION_PLUGIN_NAME, NodePositionConvertToCursor, NodePositionConvertToRectRange, OrderListCommand, ParagraphMenuInsertBelowSubmenuItemFactory, LarkPastePlugin as PastePluginLark, UniverPastePlugin as PastePluginUniver, WordPastePlugin as PastePluginWord, QuickListCommand, RectRange, ReplaceSelectionCommand, ReplaceSnapshotCommand, ReplaceTextRunsCommand, ResetInlineFormatTextBackgroundColorCommand, ResetInlineFormatTextColorCommand, RichTextEditor, SetDocZoomRatioCommand, SetDocZoomRatioOperation, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatTextFillCommand, SetInlineFormatUnderlineCommand, SetParagraphNamedStyleCommand, StrikeThroughMenuItemFactory, SwitchDocModeCommand, TEXT_RANGE_LAYER_INDEX, TabCommand, TextColorSelectorMenuItemFactory, TextRange, ToggleCheckListCommand, UnderlineMenuItemFactory, UniverDocsUIPlugin, VIEWPORT_KEY, addCustomDecorationBySelectionFactory, addCustomDecorationFactory, buildMoveDocBlockActions, calcDocFitToWidthScale, calcDocRangePositions, collectDocsTableLikeEmbedChildUnitIds, convertBodyToHtml, convertPositionsToRectRanges, createDefaultDocsTableLikeCustomBlockBleedViewport, createDocsCustomBlockSizeRefreshScheduler, createEditorUndoRedoKeyboardConfig, deleteCustomDecorationFactory, disableMenuWhenHeaderFooterEditing, drawDocCustomRangeChrome, executeEditorUndoRedoCommand, genTableSource, generateParagraphs, getAnchorBounding, getCanvasOffsetByEngine, getCommandSkeleton, getCursorWhenDelete, getCutActionsFromDocRanges, getDocBlockRangeMenuId, getDocObjectById, getEmptyTableCell, getEmptyTableRow, getLineBounding, getListMarkerFallbackBound, getListParagraphContextMenuHit, getOneTextSelectionRange, getStyleInTextRange, getTableColumn, getTextRangeFromCharIndex, hasParagraphInTable, hideMenuWhenSelectionInBlockRange, isInSameTableCell, isTextRangeInAnyBlockRange, isValidRectRange, neoGetDocObject, normalizeDocFitToWidthOptions, resolveDocCustomRangeChromeTheme, resolveDocFitBaseWidth, resolveDocViewScale, resolveDocsCustomBlockRenderViewport, resolveDocsTableLikeCustomBlockBleedViewport, resolveDocsTableLikeCustomBlockContentHeight, resolveDocsTableLikeCustomBlockContentWidth, scrollDocsTableLikeCustomBlockLive, shouldRefreshDocsCustomBlockSizeForCommand, useEditor, useEditorClickOutside, useIsFocusing, useKeyboardEvent, useLeftAndRightArrow, useOnChange, useResize, whenDocAndEditorFocused };