@univerjs/docs-ui 1.0.0-alpha.2 → 1.0.0-alpha.3

package/lib/index.js

@@ -1,14 +1,13 @@
-import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, ColorKit, 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, Inject, Injector, InterceptorManager, JSONX, LRUMap, LocaleService, MODERN_DOCUMENT_DEFAULT_MARGIN, MODERN_DOCUMENT_WIDTH, MemoryCursor, ModernDocumentWidthMode, NAMED_STYLE_MAP, NamedStyleType, ObjectRelativeFromH, ObjectRelativeFromV, PAGE_SIZE, PAPER_TYPES, PRESET_LIST_TYPE, PageOrientType, Plugin, PositionedObjectLayoutType, PresetListType, QuickListTypeMap, RANGE_DIRECTION, Rectangle, RedoCommand, RxDisposable, SHEET_EDITOR_UNITS, SliceBodyType, SpacingRule, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, TextX, TextXActionType, ThemeService, Tools, UndoCommand, UniverInstanceType, UpdateDocsAttributeType, VerticalAlign, checkForSubstrings, createIdentifier, createInterceptorKey, createInternalEditorID, createParagraphId, debounce, deepCompare, fromEventSubject, generateRandomId, getBodySlice, getPlainText, getRichTextEditPath, isCommentEditorID, isInternalEditorID, isSafeUrl, merge, mergeOverrideWithDependencies, normalizeBody, remove, sequenceExecuteAsync, skipParseTagNames, toDisposable, touchDependencies } from "@univerjs/core";
-import { CreateHeaderFooterCommand, DeleteTextCommand, DocBlockMoveValidatorService, DocContentInsertService, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, DocStateEmitService, HeaderFooterType, IDocStateChangeInterceptorService, InsertTextCommand, RichTextEditingMutation, SetTextSelectionsOperation, UniverDocsPlugin, UpdateTextCommand, consumeContentInsertRange } from "@univerjs/docs";
+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, 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, 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 { BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, ComponentManager, ContextMenuGroup, ContextMenuPanel, ContextMenuPosition, CopyCommand, CutCommand, 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, Slider, ToolbarItem, connectInjector, getMenuHiddenObservable, imageMimeTypeSet, useConfigValue, useDependency, useEvent, useObservable } from "@univerjs/ui";
-import { ImageSourceType } from "@univerjs/drawing";
 import { BehaviorSubject, Observable, Subject, animationFrameScheduler, combineLatest, distinctUntilChanged, filter, first, fromEvent, map, merge as merge$1, of, 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, scrollbarClassName } from "@univerjs/design";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+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, DocSettingIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, MenuIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, OrderIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, ShapeIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, TextTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon } from "@univerjs/icons";
+import { AddImageIcon, AlignTextBothIcon, BoldIcon, CatalogueIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, 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, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, TextTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon } from "@univerjs/icons";
 
 //#region src/basics/docs-view-key.ts
 /**
@@ -431,30 +430,6 @@ DocMenuStyleService = __decorate([
 
 //#endregion
 //#region src/commands/commands/break-line.command.ts
-function generateParagraphs(dataStream, prevParagraph, borderBottom) {
-	const paragraphs = [];
-	const existingParagraphIds = /* @__PURE__ */ new Set();
-	for (let i = 0, len = dataStream.length; i < len; i++) {
-		if (dataStream[i] !== DataStreamTreeTokenType.PARAGRAPH) continue;
-		paragraphs.push({
-			startIndex: i,
-			paragraphId: createParagraphId(existingParagraphIds)
-		});
-	}
-	if (prevParagraph) for (const paragraph of paragraphs) {
-		if (prevParagraph.bullet) paragraph.bullet = Tools.deepClone(prevParagraph.bullet);
-		if (prevParagraph.paragraphStyle) {
-			paragraph.paragraphStyle = Tools.deepClone(prevParagraph.paragraphStyle);
-			delete paragraph.paragraphStyle.borderBottom;
-			if (prevParagraph.paragraphStyle.headingId) paragraph.paragraphStyle.headingId = generateRandomId(6);
-		}
-	}
-	if (borderBottom) for (const paragraph of paragraphs) {
-		if (!paragraph.paragraphStyle) paragraph.paragraphStyle = {};
-		paragraph.paragraphStyle.borderBottom = borderBottom;
-	}
-	return paragraphs;
-}
 const BreakLineCommand = {
 	id: "doc.command.break-line",
 	type: CommandType.COMMAND,
@@ -475,17 +450,19 @@ const BreakLineCommand = {
 			}]);
 			return true;
 		}
-		const { horizontalLine } = params !== null && params !== void 0 ? params : {};
+		const { horizontalLine, insertionMode = "split-paragraph" } = params !== null && params !== void 0 ? params : {};
 		const { segmentId } = activeTextRange;
 		const docDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 		const originBody = docDataModel === null || docDataModel === void 0 || (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId !== null && segmentId !== void 0 ? segmentId : "")) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
 		if (docDataModel == null || originBody == null) return false;
 		const unitId = docDataModel.getUnitId();
 		const { startOffset, endOffset } = activeTextRange;
-		const prevParagraph = ((_originBody$paragraph = originBody.paragraphs) !== null && _originBody$paragraph !== void 0 ? _originBody$paragraph : []).find((p) => p.startIndex >= startOffset);
-		if (!prevParagraph) return false;
-		const isAtParagraphEnd = startOffset === prevParagraph.startIndex;
-		const prevParagraphIndex = prevParagraph.startIndex;
+		const paragraphs = (_originBody$paragraph = originBody.paragraphs) !== null && _originBody$paragraph !== void 0 ? _originBody$paragraph : [];
+		const insertsAtStructuralGap = insertionMode === "insert-gap" || isTopLevelStructuralGap(originBody.dataStream, startOffset);
+		const prevParagraph = insertsAtStructuralGap ? void 0 : paragraphs.find((p) => p.startIndex >= startOffset);
+		if (!prevParagraph && !insertsAtStructuralGap) return false;
+		const isAtParagraphEnd = startOffset === (prevParagraph === null || prevParagraph === void 0 ? void 0 : prevParagraph.startIndex);
+		const prevParagraphIndex = prevParagraph === null || prevParagraph === void 0 ? void 0 : prevParagraph.startIndex;
 		const curTextRun = getTextRunAtPosition(originBody, endOffset, docMenuStyleService.getDefaultStyle(), docMenuStyleService.getStyleCache());
 		const insertBody = {
 			dataStream: DataStreamTreeTokenType.PARAGRAPH,
@@ -500,7 +477,7 @@ const BreakLineCommand = {
 		const activeRange = docSelectionManagerService.getActiveTextRange();
 		if (originBody == null) return false;
 		const { collapsed } = activeTextRange;
-		const cursorMove = insertBody.dataStream.length;
+		const cursorMove = insertsAtStructuralGap ? 0 : insertBody.dataStream.length;
 		const textRanges = [{
 			startOffset: startOffset + cursorMove,
 			endOffset: startOffset + cursorMove,
@@ -513,7 +490,8 @@ const BreakLineCommand = {
 				unitId,
 				actions: [],
 				textRanges,
-				debounce: true
+				debounce: true,
+				trigger: BreakLineCommand.id
 			}
 		};
 		const textX = new TextX();
@@ -532,9 +510,9 @@ const BreakLineCommand = {
 			const dos = BuildTextUtils.selection.delete([activeTextRange], originBody, 0, insertBody);
 			textX.push(...dos);
 		}
-		if (((_prevParagraph$bullet = prevParagraph.bullet) === null || _prevParagraph$bullet === void 0 ? void 0 : _prevParagraph$bullet.listType) === PresetListType.CHECK_LIST_CHECKED || ((_prevParagraph$paragr = prevParagraph.paragraphStyle) === null || _prevParagraph$paragr === void 0 ? void 0 : _prevParagraph$paragr.headingId)) {
+		if (prevParagraph && (((_prevParagraph$bullet = prevParagraph.bullet) === null || _prevParagraph$bullet === void 0 ? void 0 : _prevParagraph$bullet.listType) === PresetListType.CHECK_LIST_CHECKED || ((_prevParagraph$paragr = prevParagraph.paragraphStyle) === null || _prevParagraph$paragr === void 0 ? void 0 : _prevParagraph$paragr.headingId))) {
 			var _prevParagraph$paragr2;
-			if (activeTextRange.endOffset < prevParagraphIndex) textX.push({
+			if (prevParagraphIndex != null && activeTextRange.endOffset < prevParagraphIndex) textX.push({
 				t: TextXActionType.RETAIN,
 				len: prevParagraphIndex - activeTextRange.endOffset
 			});
@@ -573,6 +551,41 @@ const BreakLineCommand = {
 		return Boolean(result);
 	}
 };
+function isTopLevelStructuralGap(dataStream, offset) {
+	const previousToken = dataStream[offset - 1];
+	const nextToken = dataStream[offset];
+	return previousToken === DataStreamTreeTokenType.BLOCK_END || previousToken === DataStreamTreeTokenType.TABLE_END || previousToken === DataStreamTreeTokenType.COLUMN_GROUP_END || nextToken === DataStreamTreeTokenType.BLOCK_START || nextToken === DataStreamTreeTokenType.TABLE_START || nextToken === DataStreamTreeTokenType.COLUMN_GROUP_START;
+}
+
+//#endregion
+//#region src/services/clipboard/doc-paste-mutation-adapter.service.ts
+const IDocClipboardPasteAdapterService = createIdentifier("doc.clipboard-paste-adapter.service");
+var DocClipboardPasteAdapterService = class {
+	constructor() {
+		_defineProperty(this, "_adapters", []);
+	}
+	registerAdapter(adapter) {
+		this._adapters.push(adapter);
+		return toDisposable(() => {
+			const index = this._adapters.indexOf(adapter);
+			if (index >= 0) this._adapters.splice(index, 1);
+		});
+	}
+	getPasteMutationInfos(params) {
+		const mutationInfos = {
+			redoMutations: [],
+			undoMutations: []
+		};
+		for (const adapter of this._adapters) {
+			var _adapter$getPasteMuta;
+			const nextMutationInfos = (_adapter$getPasteMuta = adapter.getPasteMutationInfos) === null || _adapter$getPasteMuta === void 0 ? void 0 : _adapter$getPasteMuta.call(adapter, params);
+			if (!nextMutationInfos) continue;
+			mutationInfos.redoMutations.push(...nextMutationInfos.redoMutations);
+			mutationInfos.undoMutations.push(...nextMutationInfos.undoMutations);
+		}
+		return mutationInfos;
+	}
+};
 
 //#endregion
 //#region src/commands/util.ts
@@ -593,6 +606,7 @@ function genEmptyTable(rowCount, colCount) {
 	const paragraphs = [];
 	const sectionBreaks = [];
 	const existingParagraphIds = /* @__PURE__ */ new Set();
+	const existingSectionIds = /* @__PURE__ */ new Set();
 	for (let i = 0; i < rowCount; i++) {
 		dataStream += DataStreamTreeTokenType.TABLE_ROW_START;
 		for (let j = 0; j < colCount; j++) {
@@ -606,7 +620,10 @@ function genEmptyTable(rowCount, colCount) {
 					spaceBelow: { v: 0 }
 				}
 			});
-			sectionBreaks.push({ startIndex: dataStream.length - 2 });
+			sectionBreaks.push({
+				sectionId: createSectionId(existingSectionIds),
+				startIndex: dataStream.length - 2
+			});
 		}
 		dataStream += DataStreamTreeTokenType.TABLE_ROW_END;
 	}
@@ -711,6 +728,7 @@ function getInsertRowBody(col) {
 	const paragraphs = [];
 	const sectionBreaks = [];
 	const existingParagraphIds = /* @__PURE__ */ new Set();
+	const existingSectionIds = /* @__PURE__ */ new Set();
 	for (let i = 0; i < col; i++) {
 		dataStream += `${DataStreamTreeTokenType.TABLE_CELL_START}\r\n${DataStreamTreeTokenType.TABLE_CELL_END}`;
 		paragraphs.push({
@@ -722,7 +740,10 @@ function getInsertRowBody(col) {
 				spaceBelow: { v: 0 }
 			}
 		});
-		sectionBreaks.push({ startIndex: dataStream.length - 2 });
+		sectionBreaks.push({
+			sectionId: createSectionId(existingSectionIds),
+			startIndex: dataStream.length - 2
+		});
 	}
 	dataStream += DataStreamTreeTokenType.TABLE_ROW_END;
 	return {
@@ -744,7 +765,10 @@ function getInsertColumnBody() {
 			spaceBelow: { v: 0 }
 		}
 	});
-	sectionBreaks.push({ startIndex: 2 });
+	sectionBreaks.push({
+		sectionId: createSectionId(/* @__PURE__ */ new Set()),
+		startIndex: 2
+	});
 	return {
 		dataStream,
 		paragraphs,
@@ -1101,8 +1125,10 @@ const InnerPasteCommand = {
 		var _docDataModel$getSelf, _body$tables, _body$customBlocks;
 		const { segmentId, textRanges, doc } = params;
 		const commandService = accessor.get(ICommandService);
+		const undoRedoService = accessor.get(IUndoRedoService);
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const pasteAdapterService = getPasteAdapterService(accessor);
 		const selections = docSelectionManagerService.getTextRanges();
 		const rectRanges = docSelectionManagerService.getRectRanges();
 		const { body, tableSource, drawings } = doc;
@@ -1125,6 +1151,9 @@ const InnerPasteCommand = {
 		const textX = new TextX();
 		const jsonX = JSONX.getInstance();
 		const rawActions = [];
+		const resourceRedoMutations = [];
+		const resourceUndoMutations = [];
+		const resourceMutationGroups = [];
 		const hasTable = !!((_body$tables = body.tables) === null || _body$tables === void 0 ? void 0 : _body$tables.length);
 		const hasCustomBlock = !!((_body$customBlocks = body.customBlocks) === null || _body$customBlocks === void 0 ? void 0 : _body$customBlocks.length);
 		if (hasTable && segmentId) return false;
@@ -1148,17 +1177,42 @@ const InnerPasteCommand = {
 			if (hasCustomBlock && drawings) {
 				var _docDataModel$getSnap, _docDataModel$getSnap2;
 				const drawingLen = (_docDataModel$getSnap = (_docDataModel$getSnap2 = docDataModel.getSnapshot().drawingsOrder) === null || _docDataModel$getSnap2 === void 0 ? void 0 : _docDataModel$getSnap2.length) !== null && _docDataModel$getSnap !== void 0 ? _docDataModel$getSnap : 0;
+				const customBlockMappings = [];
 				for (const block of cloneBody.customBlocks) {
 					const { blockId } = block;
 					const drawingId = generateRandomId(6);
 					block.blockId = drawingId;
-					const drawing = Tools.deepClone(drawings[blockId]);
+					const sourceDrawing = drawings[blockId];
+					const drawing = Tools.deepClone(sourceDrawing);
 					drawing.drawingId = drawingId;
-					const action = jsonX.insertOp(["drawings", drawingId], drawing);
-					const orderAction = jsonX.insertOp(["drawingsOrder", drawingLen], drawingId);
+					customBlockMappings.push({
+						sourceBlockId: blockId,
+						targetBlockId: drawingId,
+						sourceDrawing,
+						targetDrawing: drawing
+					});
+				}
+				if (customBlockMappings.length > 0 && pasteAdapterService) {
+					const mutationInfos = pasteAdapterService.getPasteMutationInfos({
+						unitId,
+						segmentId,
+						doc,
+						sourceBody: body,
+						targetBody: cloneBody,
+						customBlockMappings
+					});
+					if (mutationInfos.redoMutations.length > 0 || mutationInfos.undoMutations.length > 0) {
+						resourceRedoMutations.push(...mutationInfos.redoMutations);
+						resourceUndoMutations.push(...mutationInfos.undoMutations);
+						resourceMutationGroups.push(mutationInfos);
+					}
+				}
+				customBlockMappings.forEach(({ targetBlockId, targetDrawing }) => {
+					const action = jsonX.insertOp(["drawings", targetBlockId], targetDrawing);
+					const orderAction = jsonX.insertOp(["drawingsOrder", drawingLen], targetBlockId);
 					rawActions.push(action);
 					rawActions.push(orderAction);
-				}
+				});
 			}
 			const customRange = getCustomRangeAtPosition((_originBody$customRan = originBody.customRanges) !== null && _originBody$customRan !== void 0 ? _originBody$customRan : [], endOffset, UNITS.includes(unitId));
 			const customDecorations = getCustomDecorationAtPosition((_originBody$customDec = originBody.customDecorations) !== null && _originBody$customDec !== void 0 ? _originBody$customDec : [], endOffset);
@@ -1194,10 +1248,55 @@ const InnerPasteCommand = {
 		doMutation.params.actions = rawActions.reduce((acc, cur) => {
 			return JSONX.compose(acc, cur);
 		}, null);
+		if (!executeResourceMutationGroups(resourceMutationGroups, commandService)) return false;
+		const historyId = `doc-paste-resource:${unitId}:${Date.now()}`;
+		let batchingDisposable = null;
+		if (resourceRedoMutations.length > 0 || resourceUndoMutations.length > 0) {
+			batchingDisposable = undoRedoService.__tempBatchingUndoRedo(unitId);
+			undoRedoService.pushUndoRedo({
+				unitID: unitId,
+				redoMutations: resourceRedoMutations,
+				undoMutations: resourceUndoMutations,
+				id: historyId
+			});
+		}
 		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		if (!result && batchingDisposable != null) {
+			batchingDisposable.dispose();
+			undoRedoService.rollback(historyId, unitId);
+			return false;
+		}
+		batchingDisposable === null || batchingDisposable === void 0 || batchingDisposable.dispose();
 		return Boolean(result);
 	}
 };
+function getPasteAdapterService(accessor) {
+	try {
+		return accessor.get(IDocClipboardPasteAdapterService);
+	} catch {
+		return null;
+	}
+}
+function executeResourceMutationGroups(mutationGroups, commandService) {
+	const executedUndoGroups = [];
+	for (const mutationGroup of mutationGroups) {
+		if (!executeMutations(mutationGroup.redoMutations, commandService)) {
+			executeMutationGroups([...executedUndoGroups].reverse(), commandService);
+			return false;
+		}
+		executedUndoGroups.push(mutationGroup.undoMutations);
+	}
+	return true;
+}
+function executeMutationGroups(mutationGroups, commandService) {
+	mutationGroups.forEach((mutations) => {
+		executeMutations(mutations, commandService);
+	});
+}
+function executeMutations(mutations, commandService) {
+	for (const mutation of mutations) if (!commandService.syncExecuteCommand(mutation.id, mutation.params)) return false;
+	return true;
+}
 function adjustSelectionByTable(selection, tables) {
 	const { startOffset, endOffset } = selection;
 	const endsWithTable = tables.some((t) => t.startIndex === endOffset);
@@ -1613,14 +1712,11 @@ function getCursorWhenDelete(textRanges, rectRanges) {
 	}
 	return cursor;
 }
-function getBlockRangeEndTokenOffset(body, blockRange) {
-	return body.dataStream[blockRange.endIndex] === DataStreamTreeTokenType.BLOCK_END ? blockRange.endIndex : body.dataStream[blockRange.endIndex + 1] === DataStreamTreeTokenType.BLOCK_END ? blockRange.endIndex + 1 : blockRange.endIndex;
-}
 function isDeleteOffsetInsideBlockRange(body, offset) {
 	var _body$blockRanges$som, _body$blockRanges;
 	return (_body$blockRanges$som = (_body$blockRanges = body.blockRanges) === null || _body$blockRanges === void 0 ? void 0 : _body$blockRanges.some((blockRange) => {
-		const endTokenOffset = getBlockRangeEndTokenOffset(body, blockRange);
-		return blockRange.startIndex < offset && offset < endTokenOffset;
+		const interval = getBlockRangeInterval(blockRange);
+		return interval.startOffset < offset && offset < interval.endOffset - 1;
 	})) !== null && _body$blockRanges$som !== void 0 ? _body$blockRanges$som : false;
 }
 const DeleteLeftCommand = {
@@ -2111,6 +2207,10 @@ var HtmlToUDMService = class HtmlToUDMService {
 		var _body$paragraphs;
 		return createParagraphId(new Set((_body$paragraphs = body.paragraphs) === null || _body$paragraphs === void 0 ? void 0 : _body$paragraphs.map((paragraph) => paragraph.paragraphId)));
 	}
+	_createSectionId(body) {
+		var _body$sectionBreaks;
+		return createSectionId(new Set((_body$sectionBreaks = body.sectionBreaks) === null || _body$sectionBreaks === void 0 ? void 0 : _body$sectionBreaks.map((sectionBreak) => sectionBreak.sectionId)));
+	}
 	convert(html, metaConfig = {}) {
 		var _pastePlugin$preproce, _pastePlugin$preproce2, _metaConfig$unitId;
 		const pastePlugin = HtmlToUDMService._pluginList.find((plugin) => plugin.checkPasteType(html));
@@ -2336,7 +2436,7 @@ var HtmlToUDMService = class HtmlToUDMService {
 		if (wordListContext) paragraph.startIndex -= stripListMarkerFromCurrentParagraph(doc.body);
 	}
 	_processHtmlTable(node, doc) {
-		var _doc$tableSource, _body$tables, _body$sectionBreaks;
+		var _doc$tableSource, _body$tables, _body$sectionBreaks2;
 		const body = doc.body;
 		if (body.dataStream[body.dataStream.length - 1] !== "\r") {
 			var _body$paragraphs3;
@@ -2349,7 +2449,7 @@ var HtmlToUDMService = class HtmlToUDMService {
 		}
 		(_doc$tableSource = doc.tableSource) !== null && _doc$tableSource !== void 0 || (doc.tableSource = {});
 		(_body$tables = body.tables) !== null && _body$tables !== void 0 || (body.tables = []);
-		(_body$sectionBreaks = body.sectionBreaks) !== null && _body$sectionBreaks !== void 0 || (body.sectionBreaks = []);
+		(_body$sectionBreaks2 = body.sectionBreaks) !== null && _body$sectionBreaks2 !== void 0 || (body.sectionBreaks = []);
 		const rows = collectHtmlTableRows(node);
 		const grid = buildHtmlTableGrid(rows);
 		const columnCount = Math.max(1, ...grid.map((row) => row.length));
@@ -2401,7 +2501,7 @@ var HtmlToUDMService = class HtmlToUDMService {
 		});
 	}
 	_appendHtmlTableCell(cell, doc) {
-		var _body$sectionBreaks2;
+		var _body$sectionBreaks3;
 		const body = doc.body;
 		body.dataStream += DataStreamTreeTokenType.TABLE_CELL_START;
 		if (cell.element && !cell.covered) this._process(cell.element, cell.element.childNodes, doc);
@@ -2409,8 +2509,11 @@ var HtmlToUDMService = class HtmlToUDMService {
 			var _cell$element;
 			this._appendParagraph(doc, (_cell$element = cell.element) !== null && _cell$element !== void 0 ? _cell$element : document.createElement("td"));
 		}
-		(_body$sectionBreaks2 = body.sectionBreaks) !== null && _body$sectionBreaks2 !== void 0 || (body.sectionBreaks = []);
-		body.sectionBreaks.push({ startIndex: body.dataStream.length });
+		(_body$sectionBreaks3 = body.sectionBreaks) !== null && _body$sectionBreaks3 !== void 0 || (body.sectionBreaks = []);
+		body.sectionBreaks.push({
+			sectionId: this._createSectionId(body),
+			startIndex: body.dataStream.length
+		});
 		body.dataStream += `\n${DataStreamTreeTokenType.TABLE_CELL_END}`;
 	}
 	_processBeforeTable(node, doc) {
@@ -2476,7 +2579,7 @@ var HtmlToUDMService = class HtmlToUDMService {
 				body.dataStream += DataStreamTreeTokenType.TABLE_ROW_END;
 				break;
 			case "TD":
-				var _body$sectionBreaks3;
+				var _body$sectionBreaks4;
 				if (body.dataStream[body.dataStream.length - 1] !== "\r") {
 					var _body$paragraphs5;
 					(_body$paragraphs5 = body.paragraphs) === null || _body$paragraphs5 === void 0 || _body$paragraphs5.push({
@@ -2485,7 +2588,10 @@ var HtmlToUDMService = class HtmlToUDMService {
 					});
 					body.dataStream += "\r";
 				}
-				(_body$sectionBreaks3 = body.sectionBreaks) === null || _body$sectionBreaks3 === void 0 || _body$sectionBreaks3.push({ startIndex: body.dataStream.length });
+				(_body$sectionBreaks4 = body.sectionBreaks) === null || _body$sectionBreaks4 === void 0 || _body$sectionBreaks4.push({
+					sectionId: this._createSectionId(body),
+					startIndex: body.dataStream.length
+				});
 				body.dataStream += `\n${DataStreamTreeTokenType.TABLE_CELL_END}`;
 				break;
 		}
@@ -3314,7 +3420,10 @@ function convertBodyToHtml(doc) {
 			startIndex: dataStream.length - 2,
 			paragraphId: createParagraphId(new Set(paragraphs.map((paragraph) => paragraph.paragraphId)))
 		});
-		sectionBreaks.push({ startIndex: dataStream.length - 1 });
+		sectionBreaks.push({
+			sectionId: createSectionId(new Set(sectionBreaks.map((sectionBreak) => sectionBreak.sectionId))),
+			startIndex: dataStream.length - 1
+		});
 		body.dataStream = dataStream;
 		body.paragraphs = paragraphs;
 		body.sectionBreaks = sectionBreaks;
@@ -3813,6 +3922,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 			internalDocData = cache;
 		} else internalDocData = createInternalClipboardDocDataList(documentList);
 		if (internalDocData) {
+			internalDocData = this._applyCopyDocDataHooks(internalDocData, documentList);
 			internalJson = createInternalClipboardFragment(internalDocData);
 			html = embedInternalClipboardFragment(html, internalJson);
 		}
@@ -3826,6 +3936,12 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 			if (index > -1) this._clipboardHooks.splice(index, 1);
 		});
 	}
+	_applyCopyDocDataHooks(doc, sourceDocuments) {
+		return this._clipboardHooks.reduce((currentDoc, hook) => {
+			var _hook$onCopyDocData, _hook$onCopyDocData2;
+			return (_hook$onCopyDocData = (_hook$onCopyDocData2 = hook.onCopyDocData) === null || _hook$onCopyDocData2 === void 0 ? void 0 : _hook$onCopyDocData2.call(hook, currentDoc, { sourceDocuments })) !== null && _hook$onCopyDocData !== void 0 ? _hook$onCopyDocData : currentDoc;
+		}, doc);
+	}
 	_getDocumentBodyInRanges(sliceType, ranges) {
 		var _docDataModel$getSelf;
 		const docDataModel = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
@@ -4119,6 +4235,17 @@ const DocPasteCommand = {
 
 //#endregion
 //#region src/commands/commands/doc-block-move.command.ts
+const DOC_BLOCK_MOVE_BODY_PATCH_KEYS = [
+	"paragraphs",
+	"sectionBreaks",
+	"tables",
+	"columnGroups",
+	"customBlocks",
+	"blockRanges",
+	"customRanges",
+	"customDecorations",
+	"textRuns"
+];
 const MoveDocBlockCommand = {
 	id: "doc.command.move-block",
 	type: CommandType.COMMAND,
@@ -4142,7 +4269,11 @@ const MoveDocBlockCommand = {
 			previousDocumentData,
 			result: moveResult
 		});
-		const actions = buildReplaceDocumentBodyActions(previousDocumentData, nextDocumentData);
+		const actions = buildReplaceDocumentBodyActions(previousDocumentData, nextDocumentData, {
+			sourceRange,
+			targetOffset,
+			movedRange
+		});
 		if (!actions) return false;
 		const textRanges = [{
 			startOffset: movedRange.startOffset,
@@ -4188,23 +4319,121 @@ function buildMoveDocBlockActions(params) {
 		}
 	};
 }
-function buildReplaceDocumentBodyActions(previousDocumentData, nextDocumentData) {
-	const jsonX = JSONX.getInstance();
+function buildReplaceDocumentBodyActions(previousDocumentData, nextDocumentData, move) {
+	JSONX.getInstance();
 	const previousBody = previousDocumentData.body;
 	const nextBody = nextDocumentData.body;
 	if (!previousBody || !nextBody) return null;
-	return [
-		jsonX.replaceOp(["body", "dataStream"], previousBody.dataStream, nextBody.dataStream),
-		jsonX.replaceOp(["body", "paragraphs"], previousBody.paragraphs, nextBody.paragraphs),
-		jsonX.replaceOp(["body", "sectionBreaks"], previousBody.sectionBreaks, nextBody.sectionBreaks),
-		jsonX.replaceOp(["body", "tables"], previousBody.tables, nextBody.tables),
-		jsonX.replaceOp(["body", "columnGroups"], previousBody.columnGroups, nextBody.columnGroups),
-		jsonX.replaceOp(["body", "customBlocks"], previousBody.customBlocks, nextBody.customBlocks),
-		jsonX.replaceOp(["body", "blockRanges"], previousBody.blockRanges, nextBody.blockRanges),
-		jsonX.replaceOp(["body", "customRanges"], previousBody.customRanges, nextBody.customRanges),
-		jsonX.replaceOp(["body", "customDecorations"], previousBody.customDecorations, nextBody.customDecorations),
-		jsonX.replaceOp(["body", "textRuns"], previousBody.textRuns, nextBody.textRuns)
-	].filter(Boolean).reduce((acc, cur) => JSONX.compose(acc, cur), null);
+	const rawActions = [];
+	let intermediateDocumentData = Tools.deepClone(previousDocumentData);
+	const moveTextAction = move ? buildMoveBodyTextAction(previousBody, nextBody, move) : null;
+	if (moveTextAction) {
+		rawActions.push(moveTextAction);
+		intermediateDocumentData = JSONX.apply(intermediateDocumentData, moveTextAction);
+	}
+	const residualTextAction = buildSingleBodyTextChangeAction(intermediateDocumentData.body, nextBody);
+	if (residualTextAction) {
+		rawActions.push(residualTextAction);
+		intermediateDocumentData = JSONX.apply(intermediateDocumentData, residualTextAction);
+	}
+	if (!moveTextAction) collectBodyPatchActions(intermediateDocumentData.body, nextBody, rawActions);
+	return rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null);
+}
+function buildMoveBodyTextAction(previousBody, nextBody, move) {
+	const dataStreamLength = previousBody.dataStream.length;
+	const startOffset = clamp$1(move.sourceRange.startOffset, 0, dataStreamLength);
+	const endOffset = clamp$1(move.sourceRange.endOffset, startOffset, dataStreamLength);
+	const targetOffset = clamp$1(move.targetOffset, 0, dataStreamLength);
+	const moveLength = endOffset - startOffset;
+	if (moveLength <= 0 || targetOffset >= startOffset && targetOffset <= endOffset) return null;
+	const textX = new TextX();
+	const insertOffset = move.movedRange.startOffset;
+	const insertBody = getBodySliceForTextXAction(nextBody, insertOffset, insertOffset + moveLength, false);
+	if (targetOffset < startOffset) {
+		textX.retain(targetOffset);
+		textX.insert(moveLength, insertBody);
+		textX.retain(startOffset - targetOffset);
+		textX.delete(moveLength);
+	} else {
+		textX.retain(startOffset);
+		textX.delete(moveLength);
+		textX.retain(targetOffset - endOffset);
+		textX.insert(moveLength, insertBody);
+	}
+	return JSONX.getInstance().editOp(textX.serialize(), ["body"]);
+}
+function buildSingleBodyTextChangeAction(previousBody, nextBody) {
+	const textChange = getSingleDataStreamChange(previousBody === null || previousBody === void 0 ? void 0 : previousBody.dataStream, nextBody.dataStream);
+	if (!textChange) return null;
+	const textX = new TextX();
+	textX.retain(textChange.start);
+	if (textChange.insertLength > 0) textX.insert(textChange.insertLength, getBodySliceForTextXAction(nextBody, textChange.start, textChange.start + textChange.insertLength, false));
+	if (textChange.deleteLength > 0) textX.delete(textChange.deleteLength);
+	return JSONX.getInstance().editOp(textX.serialize(), ["body"]);
+}
+function getSingleDataStreamChange(previousDataStream, nextDataStream) {
+	if (previousDataStream == null || nextDataStream == null || previousDataStream === nextDataStream) return null;
+	let start = 0;
+	while (start < previousDataStream.length && start < nextDataStream.length && previousDataStream[start] === nextDataStream[start]) start++;
+	let previousEnd = previousDataStream.length;
+	let nextEnd = nextDataStream.length;
+	while (previousEnd > start && nextEnd > start && previousDataStream[previousEnd - 1] === nextDataStream[nextEnd - 1]) {
+		previousEnd--;
+		nextEnd--;
+	}
+	return {
+		start,
+		deleteLength: previousEnd - start,
+		insertLength: nextEnd - start
+	};
+}
+function collectBodyPatchActions(previousBody, nextBody, actions) {
+	for (const key of DOC_BLOCK_MOVE_BODY_PATCH_KEYS) collectPatchActions(JSONX.getInstance(), ["body", key], previousBody === null || previousBody === void 0 ? void 0 : previousBody[key], nextBody[key], actions);
+}
+function collectPatchActions(jsonX, path, oldValue, newValue, actions) {
+	if (isEmptyArrayEquivalent$1(oldValue, newValue)) return;
+	if (Tools.diffValue(oldValue, newValue)) return;
+	if (oldValue == null) {
+		actions.push(jsonX.insertOp(path, newValue));
+		return;
+	}
+	if (newValue == null) {
+		actions.push(jsonX.removeOp(path, oldValue));
+		return;
+	}
+	if (Array.isArray(oldValue) && Array.isArray(newValue)) {
+		collectArrayPatchActions(jsonX, path, oldValue, newValue, actions);
+		return;
+	}
+	if (isPlainObject$1(oldValue) && isPlainObject$1(newValue)) {
+		(/* @__PURE__ */ new Set([...Object.keys(oldValue), ...Object.keys(newValue)])).forEach((key) => {
+			collectPatchActions(jsonX, [...path, key], oldValue[key], newValue[key], actions);
+		});
+		return;
+	}
+	actions.push(jsonX.replaceOp(path, oldValue, newValue));
+}
+function collectArrayPatchActions(jsonX, path, oldItems, newItems, actions) {
+	if (oldItems.length === newItems.length) {
+		oldItems.forEach((item, index) => collectPatchActions(jsonX, [...path, index], item, newItems[index], actions));
+		return;
+	}
+	let prefix = 0;
+	while (prefix < oldItems.length && prefix < newItems.length && Tools.diffValue(oldItems[prefix], newItems[prefix])) prefix++;
+	let oldSuffix = oldItems.length - 1;
+	let newSuffix = newItems.length - 1;
+	while (oldSuffix >= prefix && newSuffix >= prefix && Tools.diffValue(oldItems[oldSuffix], newItems[newSuffix])) {
+		oldSuffix--;
+		newSuffix--;
+	}
+	for (let index = oldSuffix; index >= prefix; index--) actions.push(jsonX.removeOp([...path, index], oldItems[index]));
+	for (let index = prefix; index <= newSuffix; index++) actions.push(jsonX.insertOp([...path, index], newItems[index]));
+}
+function isPlainObject$1(value) {
+	return value != null && typeof value === "object" && !Array.isArray(value);
+}
+function isEmptyArrayEquivalent$1(oldValue, newValue) {
+	return oldValue == null && Array.isArray(newValue) && newValue.length === 0 || newValue == null && Array.isArray(oldValue) && oldValue.length === 0;
 }
 function remapBodyIndexesAfterMove(body, startOffset, endOffset, targetOffset, insertOffset, moveLength) {
 	var _body$paragraphs, _body$sectionBreaks, _body$customBlocks, _body$tables, _body$columnGroups, _body$blockRanges, _body$customRanges, _body$customDecoratio, _body$textRuns;
@@ -4289,6 +4518,7 @@ const HorizontalLineCommand = {
 				width: 1,
 				dashStyle: DashStyleType.SOLID
 			},
+			insertionMode: params === null || params === void 0 ? void 0 : params.insertionMode,
 			textRange: params === null || params === void 0 ? void 0 : params.insertRange
 		});
 	}
@@ -4305,10 +4535,13 @@ const InsertHorizontalLineBellowCommand = {
 		} catch {
 			contentInsertRange = null;
 		}
-		if (contentInsertRange) return commandService.syncExecuteCommand(HorizontalLineCommand.id, { insertRange: {
-			startOffset: contentInsertRange.startOffset,
-			endOffset: contentInsertRange.endOffset
-		} });
+		if (contentInsertRange) return commandService.syncExecuteCommand(HorizontalLineCommand.id, {
+			insertionMode: "insert-gap",
+			insertRange: {
+				startOffset: contentInsertRange.startOffset,
+				endOffset: contentInsertRange.endOffset
+			}
+		});
 		const paragraph = getCurrentParagraph(accessor);
 		if (!paragraph) return false;
 		return commandService.syncExecuteCommand(HorizontalLineCommand.id, { insertRange: {
@@ -4384,7 +4617,7 @@ function getTextRangesByParagraphs(body, startOffset, endOffset) {
 	return ranges;
 }
 function getScopedSelectAllRange(body, activeRange) {
-	var _body$tables2, _body$customBlocks, _body$blockRanges, _body$paragraphs2, _body$tables3;
+	var _body$tables2, _body$customBlocks, _body$blockRanges, _body$tables3;
 	const startOffset = activeRange.startOffset;
 	const endOffset = activeRange.endOffset;
 	if (startOffset == null || endOffset == null) return null;
@@ -4402,7 +4635,7 @@ function getScopedSelectAllRange(body, activeRange) {
 		rangeType: DOC_RANGE_TYPE.TEXT,
 		startOffset: blockRange.startIndex + 1
 	}];
-	const paragraphRange = clampParagraphRangeByTables(getParagraphRangeAtOffset((_body$paragraphs2 = body.paragraphs) !== null && _body$paragraphs2 !== void 0 ? _body$paragraphs2 : [], startOffset), (_body$tables3 = body.tables) !== null && _body$tables3 !== void 0 ? _body$tables3 : [], startOffset);
+	const paragraphRange = clampParagraphRangeByTables(getParagraphRangeAtOffset(body, startOffset), (_body$tables3 = body.tables) !== null && _body$tables3 !== void 0 ? _body$tables3 : [], startOffset);
 	return paragraphRange ? [{
 		...paragraphRange,
 		rangeType: DOC_RANGE_TYPE.TEXT
@@ -4422,11 +4655,13 @@ function getTableRectRange(table) {
 		rangeType: DOC_RANGE_TYPE.RECT
 	};
 }
-function getParagraphRangeAtOffset(paragraphs, offset) {
-	const sortedParagraphs = [...paragraphs].sort((left, right) => left.startIndex - right.startIndex);
-	for (let index = 0; index < sortedParagraphs.length; index++) {
-		const paragraph = sortedParagraphs[index];
-		const startOffset = index === 0 ? 0 : sortedParagraphs[index - 1].startIndex + 1;
+function getParagraphRangeAtOffset(body, offset) {
+	var _body$paragraphs2;
+	const sortedParagraphs = [...(_body$paragraphs2 = body.paragraphs) !== null && _body$paragraphs2 !== void 0 ? _body$paragraphs2 : []].sort((left, right) => left.startIndex - right.startIndex);
+	const paragraphStartOffsets = getParagraphContentStartOffsets(body);
+	for (const paragraph of sortedParagraphs) {
+		var _paragraphStartOffset;
+		const startOffset = (_paragraphStartOffset = paragraphStartOffsets.get(paragraph.startIndex)) !== null && _paragraphStartOffset !== void 0 ? _paragraphStartOffset : 0;
 		if (startOffset <= offset && offset <= paragraph.startIndex) return {
 			endOffset: paragraph.startIndex,
 			startOffset
@@ -4971,47 +5206,55 @@ const ReplaceSnapshotCommand = {
 			}
 		};
 		if (options) doMutation.params.options = options;
-		const rawActions = [];
-		const jsonX = JSONX.getInstance();
-		if (!Tools.diffValue(prevDocumentStyle, documentStyle)) {
-			const actions = jsonX.replaceOp(["documentStyle"], prevDocumentStyle, documentStyle);
-			if (actions != null) rawActions.push(actions);
-		}
-		if (!Tools.diffValue(body, prevBody)) {
-			const actions = jsonX.replaceOp(["body"], prevBody, body);
-			if (actions != null) rawActions.push(actions);
-		}
-		if (!Tools.diffValue(tableSource, prevTableSource)) {
-			const actions = jsonX.replaceOp(["tableSource"], prevTableSource, tableSource);
-			if (actions != null) rawActions.push(actions);
-		}
-		if (!Tools.diffValue(footers, prevFooters)) {
-			const actions = jsonX.replaceOp(["footers"], prevFooters, footers);
-			if (actions != null) rawActions.push(actions);
-		}
-		if (!Tools.diffValue(headers, prevHeaders)) {
-			const actions = jsonX.replaceOp(["headers"], prevHeaders, headers);
-			if (actions != null) rawActions.push(actions);
-		}
-		if (!Tools.diffValue(lists, prevLists)) {
-			const actions = jsonX.replaceOp(["lists"], prevLists, lists);
-			if (actions != null) rawActions.push(actions);
-		}
-		if (!Tools.diffValue(drawings, prevDrawings)) {
-			const actions = jsonX.replaceOp(["drawings"], prevDrawings, drawings);
-			if (actions != null) rawActions.push(actions);
-		}
-		if (!Tools.diffValue(drawingsOrder, prevDrawingsOrder)) {
-			const actions = jsonX.replaceOp(["drawingsOrder"], prevDrawingsOrder, drawingsOrder);
-			if (actions != null) rawActions.push(actions);
-		}
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
+		doMutation.params.actions = buildReplaceSnapshotActions({
+			body: prevBody,
+			documentStyle: prevDocumentStyle,
+			tableSource: prevTableSource,
+			footers: prevFooters,
+			headers: prevHeaders,
+			lists: prevLists,
+			drawings: prevDrawings,
+			drawingsOrder: prevDrawingsOrder
+		}, {
+			body,
+			documentStyle,
+			tableSource,
+			footers,
+			headers,
+			lists,
+			drawings,
+			drawingsOrder
+		});
 		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
 		return Boolean(result);
 	}
 };
+function buildReplaceSnapshotActions(previousSnapshot, snapshot) {
+	const jsonX = JSONX.getInstance();
+	const rawActions = [];
+	const bodyAction = buildReplaceSnapshotBodyAction(previousSnapshot.body, snapshot.body);
+	if (bodyAction) rawActions.push(bodyAction);
+	collectTopLevelReplaceAction(jsonX, rawActions, ["documentStyle"], previousSnapshot.documentStyle, snapshot.documentStyle);
+	collectTopLevelReplaceAction(jsonX, rawActions, ["tableSource"], previousSnapshot.tableSource, snapshot.tableSource);
+	collectTopLevelReplaceAction(jsonX, rawActions, ["footers"], previousSnapshot.footers, snapshot.footers);
+	collectTopLevelReplaceAction(jsonX, rawActions, ["headers"], previousSnapshot.headers, snapshot.headers);
+	collectTopLevelReplaceAction(jsonX, rawActions, ["lists"], previousSnapshot.lists, snapshot.lists);
+	collectTopLevelReplaceAction(jsonX, rawActions, ["drawings"], previousSnapshot.drawings, snapshot.drawings);
+	collectTopLevelReplaceAction(jsonX, rawActions, ["drawingsOrder"], previousSnapshot.drawingsOrder, snapshot.drawingsOrder);
+	return rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null);
+}
+function buildReplaceSnapshotBodyAction(previousBody, body) {
+	if (!previousBody || !body || Tools.diffValue(previousBody, body)) return null;
+	const textX = new TextX();
+	if (previousBody.dataStream.length > 0) textX.delete(previousBody.dataStream.length);
+	if (body.dataStream.length > 0) textX.insert(body.dataStream.length, body);
+	return JSONX.getInstance().editOp(textX.serialize(), ["body"]);
+}
+function collectTopLevelReplaceAction(jsonX, rawActions, path, previousValue, value) {
+	if (Tools.diffValue(previousValue, value)) return;
+	const action = jsonX.replaceOp(path, previousValue, value);
+	if (action != null) rawActions.push(action);
+}
 /**
 * @deprecated please use ReplaceSnapshotCommand instead.
 */
@@ -5489,7 +5732,7 @@ const QuickListCommand = {
 		return Boolean(result);
 	}
 };
-function insertList(accessor, listType) {
+function insertList(accessor, listType, trigger) {
 	var _contentInsertRange$s, _contentInsertRange$e, _sourceParagraph$para;
 	const commandService = accessor.get(ICommandService);
 	const docDataModel = accessor.get(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
@@ -5537,7 +5780,8 @@ function insertList(accessor, listType) {
 				endOffset: insertOffset,
 				collapsed: true
 			}],
-			isEditing: false
+			isEditing: false,
+			trigger
 		}
 	};
 	const jsonX = JSONX.getInstance();
@@ -5550,21 +5794,21 @@ const InsertBulletListBellowCommand = {
 	id: "doc.command.insert-bullet-list-bellow",
 	type: CommandType.COMMAND,
 	handler: (accessor) => {
-		return insertList(accessor, PresetListType.BULLET_LIST);
+		return insertList(accessor, PresetListType.BULLET_LIST, InsertBulletListBellowCommand.id);
 	}
 };
 const InsertOrderListBellowCommand = {
 	id: "doc.command.insert-order-list-bellow",
 	type: CommandType.COMMAND,
 	handler: (accessor) => {
-		return insertList(accessor, PresetListType.ORDER_LIST);
+		return insertList(accessor, PresetListType.ORDER_LIST, InsertOrderListBellowCommand.id);
 	}
 };
 const InsertCheckListBellowCommand = {
 	id: "doc.command.insert-check-list-bellow",
 	type: CommandType.COMMAND,
 	handler: (accessor) => {
-		return insertList(accessor, PresetListType.CHECK_LIST);
+		return insertList(accessor, PresetListType.CHECK_LIST, InsertCheckListBellowCommand.id);
 	}
 };
 
@@ -5733,7 +5977,7 @@ const SetParagraphNamedStyleCommand = {
 		const unitId = doc.getUnitId();
 		const selectionService = accessor.get(DocSelectionManagerService);
 		const contentInsertRange = params.textRanges ? null : consumeContentInsertRange(accessor, unitId);
-		if (contentInsertRange) return insertNamedStyleParagraph(accessor, doc, params.value, contentInsertRange.startOffset, contentInsertRange.endOffset);
+		if (contentInsertRange) return insertNamedStyleParagraph(accessor, doc, params.value, contentInsertRange.startOffset, contentInsertRange.endOffset, contentInsertRange.segmentId);
 		const selections = (_params$textRanges = params.textRanges) !== null && _params$textRanges !== void 0 ? _params$textRanges : selectionService.getTextRanges({
 			unitId,
 			subUnitId: unitId
@@ -5770,13 +6014,14 @@ const SetParagraphNamedStyleCommand = {
 		return Boolean(result);
 	}
 };
-function insertNamedStyleParagraph(accessor, doc, namedStyleType, startOffset, endOffset) {
+function insertNamedStyleParagraph(accessor, doc, namedStyleType, startOffset, endOffset, segmentId = "") {
 	const textX = BuildTextUtils.selection.replace({
 		doc,
 		selection: {
 			startOffset,
 			endOffset,
-			collapsed: startOffset === endOffset
+			collapsed: startOffset === endOffset,
+			segmentId
 		},
 		body: {
 			dataStream: "\r",
@@ -5793,16 +6038,22 @@ function insertNamedStyleParagraph(accessor, doc, namedStyleType, startOffset, e
 	if (!textX) return false;
 	const jsonX = JSONX.getInstance();
 	const commandService = accessor.get(ICommandService);
-	return Boolean(commandService.syncExecuteCommand(RichTextEditingMutation.id, {
-		actions: jsonX.editOp(textX.serialize(), getRichTextEditPath(doc)),
+	const success = Boolean(commandService.syncExecuteCommand(RichTextEditingMutation.id, {
+		actions: jsonX.editOp(textX.serialize(), getRichTextEditPath(doc, segmentId)),
 		isEditing: false,
 		textRanges: [{
 			startOffset,
 			endOffset: startOffset,
 			collapsed: true
 		}],
+		segmentId,
 		unitId: doc.getUnitId()
 	}));
+	if (success) accessor.get(DocSelectionManagerService).replaceTextRanges([{
+		startOffset,
+		endOffset: startOffset
+	}], false);
+	return success;
 }
 const QuickHeadingCommand = {
 	id: "doc.command.quick-heading",
@@ -5927,6 +6178,88 @@ const SubtitleHeadingCommand = {
 	}
 };
 
+//#endregion
+//#region src/services/doc-embed-integration.service.ts
+const DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = "data-embed-interaction-boundary-owner";
+var EmbedInteractionBoundaryService = class {
+	constructor() {
+		_defineProperty(this, "_roots", /* @__PURE__ */ new Map());
+	}
+	registerOwnedElement(embedId, element) {
+		element.setAttribute(DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, embedId);
+		element.querySelectorAll("*").forEach((child) => child.setAttribute(DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, embedId));
+		let roots = this._roots.get(embedId);
+		if (!roots) {
+			roots = /* @__PURE__ */ new Set();
+			this._roots.set(embedId, roots);
+		}
+		roots.add(element);
+		return toDisposable(() => {
+			roots === null || roots === void 0 || roots.delete(element);
+			element.removeAttribute(DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE);
+			element.querySelectorAll("*").forEach((child) => child.removeAttribute(DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE));
+		});
+	}
+	contains(embedId, target) {
+		var _this$_roots$get;
+		if (!(target instanceof HTMLElement)) return false;
+		if (!embedId) return [...this._roots.values()].some((roots) => [...roots].some((root) => root.contains(target)));
+		return ((_this$_roots$get = this._roots.get(embedId)) === null || _this$_roots$get === void 0 ? void 0 : _this$_roots$get.has(target)) === true || this._roots.get(embedId) != null && [...this._roots.get(embedId)].some((root) => root.contains(target));
+	}
+	hasRecentInteraction() {
+		return false;
+	}
+	hasRecentInteractionFor() {
+		return false;
+	}
+};
+const IDocEmbedInteractionBoundaryService = EmbedInteractionBoundaryService;
+var EmbedRuntimeFocusCoordinator = class {
+	constructor() {
+		_defineProperty(this, "_leases", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_elements", /* @__PURE__ */ new Map());
+		_defineProperty(this, "runtimeSessionChanged$", new Subject());
+	}
+	acquireLease(options) {
+		this._leases.add(options);
+		this.runtimeSessionChanged$.next();
+		return toDisposable(() => {
+			this._leases.delete(options);
+			this.runtimeSessionChanged$.next();
+		});
+	}
+	registerElement(options) {
+		options.element.setAttribute(DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, options.embedId);
+		let elements = this._elements.get(options.embedId);
+		if (!elements) {
+			elements = /* @__PURE__ */ new Set();
+			this._elements.set(options.embedId, elements);
+		}
+		elements.add(options.element);
+		return toDisposable(() => {
+			elements === null || elements === void 0 || elements.delete(options.element);
+			options.element.removeAttribute(DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE);
+		});
+	}
+	registerRuntimeScope(_options) {
+		return toDisposable(() => {});
+	}
+	isChildUnitRuntimeEvent(_unitId, target) {
+		return target instanceof HTMLElement && target.closest(`[${"data-embed-interaction-boundary-owner"}]`) != null;
+	}
+	isChildUnitInActiveSession(unitId) {
+		return [...this._leases].some((lease) => lease.role !== "runtime" && lease.childUnitId === unitId);
+	}
+	shouldSuppressHostInteraction(unitId, target) {
+		if (this.isChildUnitRuntimeEvent(unitId, target)) return false;
+		return [...this._leases].some((lease) => {
+			if (lease.role === "runtime" || lease.childUnitId === unitId) return false;
+			return lease.hostUnitId === unitId || !lease.hostUnitId && !lease.childUnitId;
+		});
+	}
+};
+const IDocEmbedRuntimeFocusCoordinator = EmbedRuntimeFocusCoordinator;
+
 //#endregion
 //#region src/services/selection/convert-text-range.ts
 let NodePositionType = /* @__PURE__ */ function(NodePositionType) {
@@ -6078,7 +6411,10 @@ var NodePositionConvertToCursor = class {
 			const isStartBack = start.glyph === start_sp && isFirst ? start.isBack : true;
 			const isEndBack = end.glyph === end_sp && isLast ? end.isBack : false;
 			const collapsed = start === end;
-			const anchorGlyph = isStartBack ? preGlyph !== null && preGlyph !== void 0 ? preGlyph : firstGlyph : firstGlyph;
+			const rawAnchorGlyph = isStartBack ? preGlyph !== null && preGlyph !== void 0 ? preGlyph : firstGlyph : firstGlyph;
+			const anchorGlyph = this._getCaretGlyph(rawAnchorGlyph, glyphGroup, start_sp);
+			const selectedGlyphs = glyphGroup.slice(start_sp, end_sp + 1);
+			const isSelectionOnlyNonInlineEmbedBlock = !collapsed && selectedGlyphs.length > 0 && selectedGlyphs.every((glyph) => this._isNonInlineEmbedCustomBlockGlyph(glyph));
 			const borderBoxStartY = startY;
 			const borderBoxEndY = contentHeight == null ? startY + lineHeight - marginTop - marginBottom : startY + paddingTop + contentHeight + paddingBottom;
 			if (start_sp === 0 && end_sp === glyphGroup.length - 1) {
@@ -6111,8 +6447,8 @@ var NodePositionConvertToCursor = class {
 			}
 			const clippedBorderBoxPosition = clipPositionToHorizontalRange(borderBoxPosition, this._horizontalClip);
 			const clippedContentBoxPosition = clipPositionToHorizontalRange(contentBoxPosition, this._horizontalClip);
-			if (clippedBorderBoxPosition) borderBoxPointGroup.push(pushToPoints(clippedBorderBoxPosition));
-			if (clippedContentBoxPosition) contentBoxPointGroup.push(pushToPoints(clippedContentBoxPosition));
+			if (clippedBorderBoxPosition && !isSelectionOnlyNonInlineEmbedBlock) borderBoxPointGroup.push(pushToPoints(clippedBorderBoxPosition));
+			if (clippedContentBoxPosition && !isSelectionOnlyNonInlineEmbedBlock) contentBoxPointGroup.push(pushToPoints(clippedContentBoxPosition));
 			cursorList.push({
 				startOffset: isStartBack ? startOffset : startOffset + firstGlyph.count,
 				endOffset: isEndBack ? endOffset : endOffset + lastGlyph.count,
@@ -6125,6 +6461,26 @@ var NodePositionConvertToCursor = class {
 			cursorList
 		};
 	}
+	_getCaretGlyph(glyph, glyphGroup, glyphIndex) {
+		var _this$_findTextLikeGl;
+		if (!glyph || !this._isNonInlineEmbedCustomBlockGlyph(glyph)) return glyph;
+		const neighbor = (_this$_findTextLikeGl = this._findTextLikeGlyph(glyphGroup, glyphIndex - 1, -1)) !== null && _this$_findTextLikeGl !== void 0 ? _this$_findTextLikeGl : this._findTextLikeGlyph(glyphGroup, glyphIndex + 1, 1);
+		return neighbor !== null && neighbor !== void 0 ? neighbor : {
+			...glyph,
+			bBox: getDefaultCaretBoundingBox(glyph)
+		};
+	}
+	_findTextLikeGlyph(glyphGroup, startIndex, step) {
+		for (let index = startIndex; index >= 0 && index < glyphGroup.length; index += step) {
+			const glyph = glyphGroup[index];
+			if (!this._isNonInlineEmbedCustomBlockGlyph(glyph)) return glyph;
+		}
+	}
+	_isNonInlineEmbedCustomBlockGlyph(glyph) {
+		var _this$_docSkeleton$ge, _this$_docSkeleton, _this$_docSkeleton$ge2, _this$_docSkeleton$ge3, _this$_docSkeleton$ge4, _this$_docSkeleton$ge5;
+		if (!(glyph === null || glyph === void 0 ? void 0 : glyph.drawingId) || glyph.streamType !== DataStreamTreeTokenType.CUSTOM_BLOCK) return false;
+		return !shouldUseInlineTextSelectionForDocsCustomBlockDrawing((_this$_docSkeleton$ge = (_this$_docSkeleton = this._docSkeleton).getViewModel) === null || _this$_docSkeleton$ge === void 0 || (_this$_docSkeleton$ge3 = (_this$_docSkeleton$ge2 = _this$_docSkeleton$ge.call(_this$_docSkeleton)).getDataModel) === null || _this$_docSkeleton$ge3 === void 0 || (_this$_docSkeleton$ge5 = (_this$_docSkeleton$ge4 = _this$_docSkeleton$ge3.call(_this$_docSkeleton$ge2)).getSnapshot) === null || _this$_docSkeleton$ge5 === void 0 || (_this$_docSkeleton$ge5 = _this$_docSkeleton$ge5.call(_this$_docSkeleton$ge4).drawings) === null || _this$_docSkeleton$ge5 === void 0 ? void 0 : _this$_docSkeleton$ge5[glyph.drawingId]);
+	}
 	_isValidPosition(startOrigin, endOrigin) {
 		const { segmentPage: startPage, pageType: startPageType } = startOrigin;
 		const { segmentPage: endPage, pageType: endPageType } = endOrigin;
@@ -6370,6 +6726,19 @@ function getCellPageFromSegmentPath(skeletonData, rootPage, path) {
 	}
 	return null;
 }
+function getDefaultCaretBoundingBox(glyph) {
+	const fontSize = getGlyphFontSize(glyph);
+	return {
+		...glyph.bBox,
+		ba: fontSize,
+		bd: Math.max(2, Math.ceil(fontSize * .25))
+	};
+}
+function getGlyphFontSize(glyph) {
+	var _ref, _glyph$fontStyle$orig, _glyph$fontStyle, _glyph$fontStyle2, _glyph$ts;
+	const fontSize = (_ref = (_glyph$fontStyle$orig = (_glyph$fontStyle = glyph.fontStyle) === null || _glyph$fontStyle === void 0 ? void 0 : _glyph$fontStyle.originFontSize) !== null && _glyph$fontStyle$orig !== void 0 ? _glyph$fontStyle$orig : (_glyph$fontStyle2 = glyph.fontStyle) === null || _glyph$fontStyle2 === void 0 ? void 0 : _glyph$fontStyle2.fontSize) !== null && _ref !== void 0 ? _ref : (_glyph$ts = glyph.ts) === null || _glyph$ts === void 0 ? void 0 : _glyph$ts.fs;
+	return typeof fontSize === "number" && Number.isFinite(fontSize) && fontSize > 0 ? fontSize : 14;
+}
 function getDocumentUnitId$1(docSkeleton) {
 	var _viewModel$getDataMod, _viewModel$getDataMod2, _viewModel$getDataMod3, _viewModel$getDataMod4;
 	const viewModel = docSkeleton.getViewModel();
@@ -7520,18 +7889,22 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		return this._onPointerEvent;
 	}
 	get isFocusing() {
-		return this._input === document.activeElement;
+		return this._input === this._getOwnerDocument().activeElement;
 	}
 	get canFocusing() {
-		return this.isFocusing || document.activeElement === document.body || document.activeElement === null;
+		const ownerDocument = this._getOwnerDocument();
+		const activeElement = ownerDocument.activeElement;
+		return !this._shouldPreserveExternalFocus() && (this.isFocusing || activeElement === ownerDocument.body || activeElement === null || activeElement instanceof HTMLElement && this._containsCurrentEmbedRuntimeElement(activeElement));
 	}
-	constructor(_context, _layoutService, _logService, _univerInstanceService, _docSkeletonManagerService) {
+	constructor(_context, _layoutService, _logService, _univerInstanceService, _docSkeletonManagerService, _embedInteractionBoundaryService, _embedRuntimeFocusCoordinator) {
 		super();
 		this._context = _context;
 		this._layoutService = _layoutService;
 		this._logService = _logService;
 		this._univerInstanceService = _univerInstanceService;
 		this._docSkeletonManagerService = _docSkeletonManagerService;
+		this._embedInteractionBoundaryService = _embedInteractionBoundaryService;
+		this._embedRuntimeFocusCoordinator = _embedRuntimeFocusCoordinator;
 		_defineProperty(this, "_onInputBefore$", new Subject());
 		_defineProperty(this, "onInputBefore$", this._onInputBefore$.asObservable());
 		_defineProperty(this, "_onKeydown$", new Subject());
@@ -7569,6 +7942,11 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		_defineProperty(this, "_focusNodePosition", null);
 		_defineProperty(this, "_currentSegmentId", "");
 		_defineProperty(this, "_currentSegmentPage", -1);
+		_defineProperty(this, "_segmentContext$", new BehaviorSubject({
+			segmentId: "",
+			segmentPage: -1
+		}));
+		_defineProperty(this, "segmentContext$", this._segmentContext$.asObservable());
 		_defineProperty(this, "_selectionStyle", NORMAL_TEXT_SELECTION_PLUGIN_STYLE);
 		_defineProperty(this, "_onPointerEvent", false);
 		_defineProperty(this, "_viewPortObserverMap", /* @__PURE__ */ new Map());
@@ -7591,13 +7969,23 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		return this._context.scene.getViewports()[0];
 	}
 	setSegment(id) {
+		if (this._currentSegmentId === id) return;
 		this._currentSegmentId = id;
+		this._segmentContext$.next({
+			segmentId: id,
+			segmentPage: this._currentSegmentPage
+		});
 	}
 	getSegment() {
 		return this._currentSegmentId;
 	}
 	setSegmentPage(pageIndex) {
+		if (this._currentSegmentPage === pageIndex) return;
 		this._currentSegmentPage = pageIndex;
+		this._segmentContext$.next({
+			segmentId: this._currentSegmentId,
+			segmentPage: pageIndex
+		});
 	}
 	getSegmentPage() {
 		return this._currentSegmentPage;
@@ -7672,14 +8060,11 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 	sync() {
 		this._updateInputPosition();
 	}
-	/**
-	* @deprecated
-	*/
 	activate(x, y, force = false) {
 		this._ensureHostContainer();
 		let left = x;
 		let top = y;
-		const fixedContainer = this._container.parentElement;
+		const fixedContainer = this._container.offsetParent;
 		if (fixedContainer) {
 			const rect = fixedContainer.getBoundingClientRect();
 			left -= rect.left;
@@ -7688,12 +8073,13 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		this._container.style.left = `${left}px`;
 		this._container.style.top = `${top}px`;
 		this._container.style.zIndex = "1000";
-		if (this.canFocusing || force) this.focus();
+		if (force && !this._shouldPreserveExternalFocus() || !force && this.canFocusing) this.focus();
 	}
 	hasFocus() {
-		return document.activeElement === this._input;
+		return this._getOwnerDocument().activeElement === this._input;
 	}
 	focus() {
+		if (!this._input.hasAttribute("tabindex")) this._input.tabIndex = -1;
 		this._input.focus();
 	}
 	blur() {
@@ -7935,6 +8321,10 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		}
 		if (this._container.parentElement !== document.body) document.body.appendChild(this._container);
 	}
+	_getOwnerDocument() {
+		var _this$_container$owne, _this$_container;
+		return (_this$_container$owne = (_this$_container = this._container) === null || _this$_container === void 0 ? void 0 : _this$_container.ownerDocument) !== null && _this$_container$owne !== void 0 ? _this$_container$owne : document;
+	}
 	_getNodePosition(node) {
 		if (node == null) return;
 		const { node: glyph, ratioX, segmentPage } = node;
@@ -8070,6 +8460,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		const activeRangeInstance = this._getActiveRangeInstance();
 		const anchor = activeRangeInstance === null || activeRangeInstance === void 0 ? void 0 : activeRangeInstance.getAnchor();
 		if (!anchor || anchor && !anchor.visible || this.activeViewPort == null) {
+			if (this._shouldPreserveExternalFocus()) return;
 			this.focus();
 			return;
 		}
@@ -8166,12 +8557,15 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 	}
 	_initInputEvents() {
 		this.disposeWithMe(fromEvent(this._input, "keydown").subscribe((e) => {
+			if (this._shouldSuppressHostHiddenEditorEvent(e)) return;
 			if (this._isIMEInputApply) return;
+			this._stopEmbedOwnedEditorShortcutPropagation(e);
 			this._eventHandle(e, (config) => {
 				this._onKeydown$.next(config);
 			});
 		}));
 		this.disposeWithMe(fromEvent(this._input, "input").subscribe((e) => {
+			if (this._shouldSuppressHostHiddenEditorEvent(e)) return;
 			if (e.inputType === "historyUndo" || e.inputType === "historyRedo") return;
 			if (this._rectRangeList.length > 0) {
 				e.stopPropagation();
@@ -8184,6 +8578,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 			});
 		}));
 		this.disposeWithMe(fromEvent(this._input, "compositionstart").subscribe((e) => {
+			if (this._shouldSuppressHostHiddenEditorEvent(e)) return;
 			if (this._rectRangeList.length > 0) {
 				e.stopPropagation();
 				return e.preventDefault();
@@ -8194,28 +8589,33 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 			});
 		}));
 		this.disposeWithMe(fromEvent(this._input, "compositionend").subscribe((e) => {
+			if (this._shouldSuppressHostHiddenEditorEvent(e)) return;
 			this._isIMEInputApply = false;
 			this._eventHandle(e, (config) => {
 				this._onCompositionend$.next(config);
 			});
 		}));
 		this.disposeWithMe(fromEvent(this._input, "compositionupdate").subscribe((e) => {
+			if (this._shouldSuppressHostHiddenEditorEvent(e)) return;
 			this._eventHandle(e, (config) => {
 				this._onInputBefore$.next(config);
 				this._onCompositionupdate$.next(config);
 			});
 		}));
 		this.disposeWithMe(fromEvent(this._input, "paste").subscribe((e) => {
+			if (this._shouldSuppressHostHiddenEditorEvent(e)) return;
 			this._eventHandle(e, (config) => {
 				this._onPaste$.next(config);
 			});
 		}));
 		this.disposeWithMe(fromEvent(this._input, "focus").subscribe((e) => {
+			if (this._shouldSuppressHostHiddenEditorEvent(e)) return;
 			this._eventHandle(e, (config) => {
 				this._onFocus$.next(config);
 			});
 		}));
 		this.disposeWithMe(fromEvent(this._input, "blur").subscribe((e) => {
+			if (this._shouldSuppressHostHiddenEditorEvent(e)) return;
 			this._eventHandle(e, (config) => {
 				this._onBlur$.next(config);
 			});
@@ -8231,6 +8631,26 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 			rangeList: this._getAllTextRanges()
 		});
 	}
+	_shouldSuppressHostHiddenEditorEvent(event) {
+		var _this$_embedRuntimeFo, _this$_embedRuntimeFo2, _this$_embedRuntimeFo3;
+		const unitId = this._context.unitId;
+		if (isInternalEditorID(unitId)) return false;
+		if ((_this$_embedRuntimeFo = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo === void 0 ? void 0 : _this$_embedRuntimeFo.isChildUnitRuntimeEvent(unitId, event.target, event)) return false;
+		if ((_this$_embedRuntimeFo2 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo2 === void 0 ? void 0 : _this$_embedRuntimeFo2.isChildUnitInActiveSession(unitId)) return false;
+		if (event.target instanceof HTMLElement && this._containsCurrentEmbedRuntimeElement(event.target)) return false;
+		if ((_this$_embedRuntimeFo3 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo3 === void 0 ? void 0 : _this$_embedRuntimeFo3.shouldSuppressHostInteraction(unitId, event.target, event)) {
+			event.stopPropagation();
+			if (event.cancelable) event.preventDefault();
+			if (event.type === "focus" && event.target instanceof HTMLElement) event.target.blur();
+			return true;
+		}
+		return false;
+	}
+	_stopEmbedOwnedEditorShortcutPropagation(event) {
+		if (!(event instanceof KeyboardEvent) || !this._getCurrentEmbedOwner()) return;
+		if (!(event.key.toLowerCase() === "a" && (event.metaKey || event.ctrlKey))) return;
+		event.stopPropagation();
+	}
 	_getTransformCoordForDocumentOffset(evtOffsetX, evtOffsetY) {
 		const { documentTransform } = this._context.mainComponent.getOffsetConfig();
 		if (this.activeViewPort == null || documentTransform == null) return;
@@ -8246,6 +8666,50 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		const { pageLayoutType = PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop } = document.getOffsetConfig();
 		return skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, restrictions);
 	}
+	_shouldPreserveExternalFocus() {
+		var _this$_embedRuntimeFo4, _this$_embedRuntimeFo5, _this$_embedRuntimeFo6, _this$_embedInteracti, _this$_embedInteracti2, _this$_embedInteracti3;
+		const ownerDocument = this._getOwnerDocument();
+		const activeElement = ownerDocument.activeElement;
+		const currentEmbedOwner = this._getCurrentEmbedOwner();
+		if ((_this$_embedRuntimeFo4 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo4 === void 0 ? void 0 : _this$_embedRuntimeFo4.isChildUnitInActiveSession(this._context.unitId)) return false;
+		if ((_this$_embedRuntimeFo5 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo5 === void 0 ? void 0 : _this$_embedRuntimeFo5.isChildUnitRuntimeEvent(this._context.unitId, activeElement)) return false;
+		if (activeElement instanceof HTMLElement && this._containsOwnEditorElement(activeElement)) return false;
+		if (activeElement instanceof HTMLElement && this._containsCurrentEmbedRuntimeElement(activeElement)) return false;
+		if ((_this$_embedRuntimeFo6 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo6 === void 0 ? void 0 : _this$_embedRuntimeFo6.shouldSuppressHostInteraction(this._context.unitId, activeElement)) return true;
+		if (currentEmbedOwner && ((_this$_embedInteracti = this._embedInteractionBoundaryService) === null || _this$_embedInteracti === void 0 ? void 0 : _this$_embedInteracti.contains(currentEmbedOwner, activeElement))) return true;
+		if (activeElement instanceof HTMLElement && this._containsCurrentLayoutElement(activeElement)) return false;
+		return ((_this$_embedInteracti2 = this._embedInteractionBoundaryService) === null || _this$_embedInteracti2 === void 0 || (_this$_embedInteracti3 = _this$_embedInteracti2.hasRecentInteractionFor) === null || _this$_embedInteracti3 === void 0 ? void 0 : _this$_embedInteracti3.call(_this$_embedInteracti2, currentEmbedOwner, ownerDocument)) === true;
+	}
+	_containsCurrentEmbedRuntimeElement(element) {
+		const currentEmbedOwner = this._getCurrentEmbedOwner();
+		if (!currentEmbedOwner) return false;
+		return this._getElementEmbedOwner(element) === currentEmbedOwner && this._containsCurrentLayoutElement(element);
+	}
+	_getCurrentEmbedOwner() {
+		var _this$_layoutService, _ref, _this$_getElementEmbe;
+		const rootContainerElement = (_this$_layoutService = this._layoutService) === null || _this$_layoutService === void 0 ? void 0 : _this$_layoutService.rootContainerElement;
+		return (_ref = (_this$_getElementEmbe = this._getElementEmbedOwner(this._input)) !== null && _this$_getElementEmbe !== void 0 ? _this$_getElementEmbe : this._getElementEmbedOwner(this._container)) !== null && _ref !== void 0 ? _ref : this._getElementEmbedOwner(rootContainerElement instanceof HTMLElement ? rootContainerElement : void 0);
+	}
+	_getElementEmbedOwner(element) {
+		var _element$closest$getA, _element$closest;
+		if (!element || typeof element.closest !== "function") return;
+		return (_element$closest$getA = (_element$closest = element.closest(`[${"data-embed-interaction-boundary-owner"}]`)) === null || _element$closest === void 0 ? void 0 : _element$closest.getAttribute("data-embed-interaction-boundary-owner")) !== null && _element$closest$getA !== void 0 ? _element$closest$getA : void 0;
+	}
+	_containsOwnEditorElement(element) {
+		var _this$_container2, _this$_inputParent;
+		return this._container === element || this._input === element || typeof ((_this$_container2 = this._container) === null || _this$_container2 === void 0 ? void 0 : _this$_container2.contains) === "function" && this._container.contains(element) || typeof ((_this$_inputParent = this._inputParent) === null || _this$_inputParent === void 0 ? void 0 : _this$_inputParent.contains) === "function" && this._inputParent.contains(element);
+	}
+	_containsCurrentLayoutElement(element) {
+		var _layoutService$checkE, _this$_container4;
+		const layoutService = this._layoutService;
+		if (!layoutService) {
+			var _this$_container3;
+			return this._container === element || typeof ((_this$_container3 = this._container) === null || _this$_container3 === void 0 ? void 0 : _this$_container3.contains) === "function" && this._container.contains(element);
+		}
+		if ((_layoutService$checkE = layoutService.checkElementInCurrentContainers) === null || _layoutService$checkE === void 0 ? void 0 : _layoutService$checkE.call(layoutService, element)) return true;
+		const root = layoutService.rootContainerElement;
+		return root === element || (root === null || root === void 0 ? void 0 : root.contains(element)) === true || this._container === element || typeof ((_this$_container4 = this._container) === null || _this$_container4 === void 0 ? void 0 : _this$_container4.contains) === "function" && this._container.contains(element);
+	}
 	_detachEvent() {
 		this._onInputBefore$.complete();
 		this._onKeydown$.complete();
@@ -8259,13 +8723,16 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		this._onFocus$.complete();
 		this._onBlur$.complete();
 		this._onPointerDown$.complete();
+		this._segmentContext$.complete();
 	}
 };
 DocSelectionRenderService = __decorate([
 	__decorateParam(1, ILayoutService),
 	__decorateParam(2, ILogService),
 	__decorateParam(3, IUniverInstanceService),
-	__decorateParam(4, Inject(DocSkeletonManagerService))
+	__decorateParam(4, Inject(DocSkeletonManagerService)),
+	__decorateParam(5, Optional(IDocEmbedInteractionBoundaryService)),
+	__decorateParam(6, Optional(IDocEmbedRuntimeFocusCoordinator))
 ], DocSelectionRenderService);
 
 //#endregion
@@ -8387,10 +8854,10 @@ function canInsertTableAtOffset(body, offset) {
 	return !(isOffsetInTableRange(body.tables, offset) || isOffsetInIndexRange(body.blockRanges, offset) || isOffsetOnPointRange(body.customBlocks, offset));
 }
 function isOffsetInTableRange(ranges, offset) {
-	return Boolean(ranges === null || ranges === void 0 ? void 0 : ranges.some((range) => range.startIndex <= offset && offset < range.endIndex));
+	return Boolean(ranges === null || ranges === void 0 ? void 0 : ranges.some((range) => containsInteriorInsertionOffset(getTableRangeInterval(range), offset)));
 }
 function isOffsetInIndexRange(ranges, offset) {
-	return Boolean(ranges === null || ranges === void 0 ? void 0 : ranges.some((range) => range.startIndex <= offset && offset <= range.endIndex));
+	return Boolean(ranges === null || ranges === void 0 ? void 0 : ranges.some((range) => containsInteriorInsertionOffset(getBlockRangeInterval(range), offset)));
 }
 function isOffsetOnPointRange(ranges, offset) {
 	return Boolean(ranges === null || ranges === void 0 ? void 0 : ranges.some((range) => range.startIndex === offset));
@@ -8428,7 +8895,9 @@ const CreateDocTableCommand = {
 		if (skeleton == null) return false;
 		const startOffset = normalizeTableInsertOffset(body, (_contentInsertRange$s2 = contentInsertRange === null || contentInsertRange === void 0 ? void 0 : contentInsertRange.startOffset) !== null && _contentInsertRange$s2 !== void 0 ? _contentInsertRange$s2 : activeRange.startOffset);
 		if (!canInsertTableAtOffset(body, startOffset)) return false;
-		const prevParagraph = ((_body$paragraphs = body.paragraphs) !== null && _body$paragraphs !== void 0 ? _body$paragraphs : []).find((p) => p.startIndex >= startOffset);
+		const prevParagraph = ((_body$paragraphs = body.paragraphs) !== null && _body$paragraphs !== void 0 ? _body$paragraphs : []).find((paragraph) => {
+			return getParagraphContentStartOffset(body, paragraph) < startOffset && startOffset <= paragraph.startIndex;
+		});
 		const curGlyph = skeleton.findNodeByCharIndex(startOffset, segmentId, segmentPage);
 		if (curGlyph == null) return false;
 		const needCreateParagraph = shouldCreateParagraphBeforeTable(body, startOffset);
@@ -9205,11 +9674,14 @@ var Editor = class extends Disposable {
 			body: {
 				dataStream: `${text}\r\n`,
 				paragraphs: [{
-					startIndex: 0,
+					startIndex: text.length,
 					paragraphId: createParagraphId(/* @__PURE__ */ new Set())
 				}],
 				customRanges: [],
-				sectionBreaks: [],
+				sectionBreaks: [{
+					sectionId: createSectionId(/* @__PURE__ */ new Set()),
+					startIndex: text.length + 1
+				}],
 				tables: [],
 				textRuns: []
 			}
@@ -9579,6 +10051,7 @@ DocBackScrollRenderController = __decorate([
 //#region src/controllers/render-controllers/doc-paragraph-placeholder.render-controller.ts
 const PLACEHOLDER_COLOR = "rgba(0, 0, 0, 0.35)";
 const DEFAULT_PLACEHOLDER_FONT_SIZE = 12;
+const MIN_BODY_TEXT_PLACEHOLDER_FONT_SIZE = 16;
 const DEFAULT_PLACEHOLDER_FONT_FAMILY = "Arial";
 const LIST_PLACEHOLDER_GAP = 4;
 let DocParagraphPlaceholderRenderController = class DocParagraphPlaceholderRenderController extends Disposable {
@@ -9672,11 +10145,11 @@ function getPlaceholderText(paragraph, locale) {
 	}
 }
 function getLinePlaceholderLayout(line, paragraph, text, originLeft, originTop) {
-	var _divide$glyphGroup, _paragraph$paragraphS2, _paragraph$paragraphS3, _ref, _getLineFontSize, _getLineFontFamily, _divide$left, _divide$paddingLeft, _ref2, _divide$width;
+	var _divide$glyphGroup, _paragraph$paragraphS2, _paragraph$paragraphS3, _getLineFontFamily, _divide$left, _divide$paddingLeft, _ref, _divide$width;
 	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];
-	const fontSize = (_ref = (_getLineFontSize = getLineFontSize(line)) !== null && _getLineFontSize !== void 0 ? _getLineFontSize : textStyle === null || textStyle === void 0 ? void 0 : textStyle.fs) !== null && _ref !== void 0 ? _ref : DEFAULT_PLACEHOLDER_FONT_SIZE;
+	const fontSize = getPlaceholderFontSize(line, paragraph);
 	const fontFamily = (_getLineFontFamily = getLineFontFamily(line)) !== null && _getLineFontFamily !== void 0 ? _getLineFontFamily : DEFAULT_PLACEHOLDER_FONT_FAMILY;
 	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);
@@ -9685,7 +10158,7 @@ function getLinePlaceholderLayout(line, paragraph, text, originLeft, originTop)
 		fontFamily,
 		fontSize,
 		fontWeight,
-		maxWidth: Math.max(0, ((_ref2 = (_divide$width = divide === null || divide === void 0 ? void 0 : divide.width) !== null && _divide$width !== void 0 ? _divide$width : line.width) !== null && _ref2 !== void 0 ? _ref2 : 0) - listOffset),
+		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),
 		text,
 		x: lineStartX + listOffset,
 		y: originTop + line.top + line.marginTop + line.paddingTop + line.asc
@@ -9700,12 +10173,20 @@ function stripNonTextTokens(text) {
 }
 function getLineFontSize(line) {
 	for (const divide of line.divides) for (const glyph of divide.glyphGroup) {
-		var _ref3, _glyph$fontStyle$orig, _glyph$fontStyle, _glyph$fontStyle2, _glyph$ts;
-		const fontSize = (_ref3 = (_glyph$fontStyle$orig = (_glyph$fontStyle = glyph.fontStyle) === null || _glyph$fontStyle === void 0 ? void 0 : _glyph$fontStyle.originFontSize) !== null && _glyph$fontStyle$orig !== void 0 ? _glyph$fontStyle$orig : (_glyph$fontStyle2 = glyph.fontStyle) === null || _glyph$fontStyle2 === void 0 ? void 0 : _glyph$fontStyle2.fontSize) !== null && _ref3 !== void 0 ? _ref3 : (_glyph$ts = glyph.ts) === null || _glyph$ts === void 0 ? void 0 : _glyph$ts.fs;
+		var _ref2, _glyph$fontStyle$orig, _glyph$fontStyle, _glyph$fontStyle2, _glyph$ts;
+		const fontSize = (_ref2 = (_glyph$fontStyle$orig = (_glyph$fontStyle = glyph.fontStyle) === null || _glyph$fontStyle === void 0 ? void 0 : _glyph$fontStyle.originFontSize) !== null && _glyph$fontStyle$orig !== void 0 ? _glyph$fontStyle$orig : (_glyph$fontStyle2 = glyph.fontStyle) === null || _glyph$fontStyle2 === void 0 ? void 0 : _glyph$fontStyle2.fontSize) !== null && _ref2 !== void 0 ? _ref2 : (_glyph$ts = glyph.ts) === null || _glyph$ts === void 0 ? void 0 : _glyph$ts.fs;
 		if (fontSize) return fontSize;
 	}
 	return null;
 }
+function getPlaceholderFontSize(line, paragraph) {
+	var _paragraph$paragraphS4, _paragraph$paragraphS5, _ref3, _getLineFontSize;
+	const namedStyleType = (_paragraph$paragraphS4 = (_paragraph$paragraphS5 = paragraph.paragraphStyle) === null || _paragraph$paragraphS5 === void 0 ? void 0 : _paragraph$paragraphS5.namedStyleType) !== null && _paragraph$paragraphS4 !== void 0 ? _paragraph$paragraphS4 : NamedStyleType.NORMAL_TEXT;
+	const textStyle = NAMED_STYLE_MAP[namedStyleType];
+	const fontSize = (_ref3 = (_getLineFontSize = getLineFontSize(line)) !== null && _getLineFontSize !== void 0 ? _getLineFontSize : textStyle === null || textStyle === void 0 ? void 0 : textStyle.fs) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_PLACEHOLDER_FONT_SIZE;
+	if (namedStyleType !== NamedStyleType.NORMAL_TEXT) return fontSize;
+	return Math.max(fontSize, MIN_BODY_TEXT_PLACEHOLDER_FONT_SIZE);
+}
 function getLineFontFamily(line) {
 	for (const divide of line.divides) for (const glyph of divide.glyphGroup) {
 		var _glyph$fontStyle$font, _glyph$fontStyle3, _glyph$ts2;
@@ -9789,11 +10270,11 @@ let DocViewScaleService = class DocViewScaleService extends Disposable {
 		return (_this$getPluginConfig = this.getPluginConfig().fitToWidth) !== null && _this$getPluginConfig !== void 0 ? _this$getPluginConfig : DEFAULT_DOC_FIT_TO_WIDTH_OPTIONS;
 	}
 	getBaseWidth() {
-		var _documentStyle$pageSi;
-		const documentStyle = this._context.unit.getSnapshot().documentStyle;
+		var _this$_context$unit, _this$_context$unit$g, _documentStyle$pageSi;
+		const documentStyle = (_this$_context$unit = this._context.unit) === null || _this$_context$unit === void 0 || (_this$_context$unit$g = _this$_context$unit.getSnapshot) === null || _this$_context$unit$g === void 0 || (_this$_context$unit$g = _this$_context$unit$g.call(_this$_context$unit)) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.documentStyle;
 		return resolveDocFitBaseWidth({
-			documentFlavor: documentStyle.documentFlavor,
-			documentStylePageWidth: (_documentStyle$pageSi = documentStyle.pageSize) === null || _documentStyle$pageSi === void 0 ? void 0 : _documentStyle$pageSi.width
+			documentFlavor: documentStyle === null || documentStyle === void 0 ? void 0 : documentStyle.documentFlavor,
+			documentStylePageWidth: documentStyle === null || documentStyle === void 0 || (_documentStyle$pageSi = documentStyle.pageSize) === null || _documentStyle$pageSi === void 0 ? void 0 : _documentStyle$pageSi.width
 		});
 	}
 	getAvailableWidth() {
@@ -9806,6 +10287,7 @@ let DocViewScaleService = class DocViewScaleService extends Disposable {
 		return this._context.engine.width;
 	}
 	getUserZoomRatio() {
+		if (this._context.unit == null) return 1;
 		return getDocEffectiveZoomRatio(this._context.unit);
 	}
 	getFitToWidthScale() {
@@ -9883,7 +10365,7 @@ DocPageLayoutService = __decorate([__decorateParam(1, Inject(DocViewScaleService
 //#endregion
 //#region src/controllers/render-controllers/doc.render-controller.ts
 let DocRenderController = class DocRenderController extends RxDisposable {
-	constructor(_context, _commandService, _docSelectionRenderService, _docSkeletonManagerService, _editorService, _renderManagerService, _univerInstanceService, _docPageLayoutService, _textSelectionManagerService, _themeService) {
+	constructor(_context, _commandService, _docSelectionRenderService, _docSkeletonManagerService, _editorService, _renderManagerService, _univerInstanceService, _docPageLayoutService, _textSelectionManagerService, _docViewScaleService, _themeService) {
 		super();
 		this._context = _context;
 		this._commandService = _commandService;
@@ -9894,6 +10376,7 @@ let DocRenderController = class DocRenderController extends RxDisposable {
 		this._univerInstanceService = _univerInstanceService;
 		this._docPageLayoutService = _docPageLayoutService;
 		this._textSelectionManagerService = _textSelectionManagerService;
+		this._docViewScaleService = _docViewScaleService;
 		this._themeService = _themeService;
 		this._addNewRender();
 		this._initRenderRefresh();
@@ -9940,7 +10423,7 @@ let DocRenderController = class DocRenderController extends RxDisposable {
 				else e.preventDefault();
 			} else viewMain.onMouseWheel(e, state);
 		});
-		new ScrollBar(viewMain);
+		new ScrollBar(viewMain, { enableHorizontal: this._shouldEnableHorizontalScrollBar() });
 		scene.addLayer(new Layer(scene, [], 2), new Layer(scene, [], 4));
 		this._addComponent();
 		const frameFn = () => scene.render();
@@ -9950,6 +10433,10 @@ let DocRenderController = class DocRenderController extends RxDisposable {
 		}));
 		this._docSelectionRenderService.__attachScrollEvent();
 	}
+	_shouldEnableHorizontalScrollBar() {
+		const options = this._docViewScaleService.getOptions();
+		return !(options.mode === "fit-width" && options.target === "container" && options.align === "start");
+	}
 	_addComponent() {
 		const { scene, unit: documentModel, components } = this._context;
 		const config = {
@@ -10085,7 +10572,8 @@ DocRenderController = __decorate([
 	__decorateParam(6, IUniverInstanceService),
 	__decorateParam(7, Inject(DocPageLayoutService)),
 	__decorateParam(8, Inject(DocSelectionManagerService)),
-	__decorateParam(9, Inject(ThemeService))
+	__decorateParam(9, Inject(DocViewScaleService)),
+	__decorateParam(10, Inject(ThemeService))
 ], DocRenderController);
 function getPageSizeInModernMode(page) {
 	let { pageWidth, pageHeight } = page;
@@ -10186,25 +10674,35 @@ const CoreHeaderFooterCommand = {
 		const commandService = accessor.get(ICommandService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const renderManagerService = accessor.get(IRenderManagerService);
-		const { unitId, segmentId, createType, headerFooterProps } = params;
+		const { unitId, segmentId, createType, headerFooterProps, sectionId: requestedSectionId } = params;
 		const docSkeletonManagerService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSkeletonManagerService);
 		const docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
 		const docViewModel = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getViewModel();
 		if (docDataModel == null || docViewModel == null) return false;
 		const editArea = docViewModel.getEditArea();
-		const { documentStyle } = docDataModel.getSnapshot();
+		const snapshot = docDataModel.getSnapshot();
+		const sectionId = requestedSectionId;
+		const sections = snapshot.body ? getTopLevelSectionBreaks(snapshot.body) : [];
+		const sectionIndex = sectionId == null ? -1 : sections.findIndex((section) => section.sectionId === sectionId);
+		const section = sectionIndex < 0 ? void 0 : sections[sectionIndex];
+		const headerFooterConfig = sectionId == null ? snapshot.documentStyle : {
+			...snapshot.documentStyle,
+			...section,
+			...resolveSectionHeaderFooterReferences(snapshot.documentStyle, sections, sectionIndex)
+		};
 		let resolvedCreateType = createType;
 		if (headerFooterProps != null) Object.keys(headerFooterProps).forEach((key) => {
 			const value = headerFooterProps[key];
-			if (resolvedCreateType == null && key === "useFirstPageHeaderFooter" && value === BooleanNumber.TRUE && !documentStyle.firstPageHeaderId) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.FIRST_PAGE_HEADER : HeaderFooterType.FIRST_PAGE_FOOTER;
-			else if (resolvedCreateType == null && key === "evenAndOddHeaders" && value === BooleanNumber.TRUE && !documentStyle.evenPageHeaderId) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.EVEN_PAGE_HEADER : HeaderFooterType.EVEN_PAGE_FOOTER;
+			if (resolvedCreateType == null && key === "useFirstPageHeaderFooter" && value === BooleanNumber.TRUE && !headerFooterConfig.firstPageHeaderId) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.FIRST_PAGE_HEADER : HeaderFooterType.FIRST_PAGE_FOOTER;
+			else if (resolvedCreateType == null && key === "evenAndOddHeaders" && value === BooleanNumber.TRUE && !headerFooterConfig.evenPageHeaderId) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.EVEN_PAGE_HEADER : HeaderFooterType.EVEN_PAGE_FOOTER;
 		});
 		return commandService.syncExecuteCommand(CreateHeaderFooterCommand.id, {
 			unitId,
 			segmentId,
 			createType: resolvedCreateType,
 			headerFooterProps,
-			createMode: "pair"
+			createMode: sectionId == null ? "pair" : "single",
+			sectionId
 		});
 	}
 };
@@ -10310,6 +10808,73 @@ const DocParagraphSettingPanelOperation = {
 	}
 };
 
+//#endregion
+//#region src/views/section-setting/component-name.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DOC_SECTION_SETTING_COMPONENT = "doc_ui_section-setting-panel";
+
+//#endregion
+//#region src/controllers/doc-section-setting.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let DocSectionSettingController = class DocSectionSettingController extends Disposable {
+	constructor(_sidebarService) {
+		super();
+		this._sidebarService = _sidebarService;
+		_defineProperty(this, "_panelId", "DocSectionSetting");
+	}
+	openPanel() {
+		this._sidebarService.open({
+			header: { title: "docs-ui.doc.slider.sectionSetting" },
+			id: this._panelId,
+			children: { label: DOC_SECTION_SETTING_COMPONENT },
+			width: 300
+		});
+	}
+	closePanel() {
+		this._sidebarService.close(this._panelId);
+	}
+};
+DocSectionSettingController = __decorate([__decorateParam(0, Inject(ISidebarService))], DocSectionSettingController);
+
+//#endregion
+//#region src/commands/operations/doc-section-setting-panel.operation.ts
+const DocSectionSettingPanelOperation = {
+	id: "sidebar.operation.doc-section-setting-panel",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(DocSectionSettingController).openPanel();
+		return true;
+	}
+};
+
 //#endregion
 //#region src/views/PageSettings.tsx
 const MODERN_WIDTH_OPTIONS = [
@@ -10387,29 +10952,15 @@ function PageSettings(props) {
 			}
 		}));
 	};
-	const handleModeChange = (mode) => {
-		setSettings((prev) => ({
-			...prev,
-			mode
-		}));
-	};
 	const handleModernWidthChange = (modernWidth) => {
 		setSettings((prev) => ({
 			...prev,
 			modernWidth
 		}));
 	};
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: "univer-flex univer-flex-col univer-gap-4",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "univer-grid univer-grid-cols-2 univer-rounded-lg univer-bg-gray-100 univer-p-1 dark:!univer-bg-gray-800",
-			children: [DocumentFlavor.MODERN, DocumentFlavor.TRADITIONAL].map((mode) => /* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: clsx("univer-h-8 univer-cursor-pointer univer-rounded-md univer-border-none univer-bg-transparent univer-text-sm univer-font-medium univer-text-gray-600 univer-transition-colors hover:univer-bg-white hover:univer-text-gray-900 dark:!univer-text-gray-200 dark:hover:!univer-bg-gray-700", { "univer-bg-white univer-text-gray-900 univer-shadow-sm dark:!univer-bg-gray-700 dark:!univer-text-white": settings.mode === mode }),
-				onClick: () => handleModeChange(mode),
-				children: localeService.t(mode === DocumentFlavor.MODERN ? "docs-ui.page-settings.modern-mode" : "docs-ui.page-settings.classic-mode")
-			}, mode))
-		}), settings.mode === DocumentFlavor.MODERN ? /* @__PURE__ */ jsxs("div", {
+		children: settings.mode === DocumentFlavor.MODERN ? /* @__PURE__ */ jsxs("div", {
 			className: "univer-flex univer-flex-col univer-gap-2.5",
 			children: [/* @__PURE__ */ jsx(SettingsLabel, { children: localeService.t("docs-ui.page-settings.modern-width") }), /* @__PURE__ */ jsx("div", {
 				className: "univer-grid univer-grid-cols-3 univer-gap-2",
@@ -10493,7 +11044,7 @@ function PageSettings(props) {
 					})]
 				})]
 			})]
-		})] })]
+		})] })
 	});
 }
 const PAGE_SETTING_COMPONENT_ID = "docs.component.page-setting";
@@ -10797,12 +11348,38 @@ function TableInsertMenuItemFactory(accessor) {
 		})
 	};
 }
-function InsertRowBeforeMenuItemFactory(accessor) {
-	return {
-		id: DocTableInsertRowAboveCommand.id,
-		type: MenuItemType.BUTTON,
-		title: "docs-ui.table.insertRowAbove",
-		icon: "InsertRowAboveDoubleIcon",
+function getSectionSettingUnavailableObservable(accessor) {
+	const selectionManager = accessor.get(DocSelectionManagerService);
+	const instanceService = accessor.get(IUniverInstanceService);
+	return new Observable((subscriber) => {
+		const emit = () => {
+			var _body$tables;
+			const documentDataModel = instanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+			const activeRange = selectionManager.getActiveTextRange();
+			const body = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getBody();
+			const unavailable = !documentDataModel || documentDataModel.getDocumentStyle().documentFlavor !== DocumentFlavor.TRADITIONAL || !activeRange || Boolean(activeRange.segmentId) || Boolean(body === null || body === void 0 || (_body$tables = body.tables) === null || _body$tables === void 0 ? void 0 : _body$tables.some((table) => activeRange.startOffset > table.startIndex && activeRange.startOffset < table.endIndex));
+			subscriber.next(unavailable);
+		};
+		emit();
+		const subscription = selectionManager.textSelection$.subscribe(emit);
+		return () => subscription.unsubscribe();
+	});
+}
+function SectionSettingMenuFactory(accessor) {
+	return {
+		id: DocSectionSettingPanelOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MenuIcon",
+		title: "docs-ui.doc.menu.sectionSetting",
+		hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getSectionSettingUnavailableObservable(accessor), (hidden, unavailable) => hidden || unavailable)
+	};
+}
+function InsertRowBeforeMenuItemFactory(accessor) {
+	return {
+		id: DocTableInsertRowAboveCommand.id,
+		type: MenuItemType.BUTTON,
+		title: "docs-ui.table.insertRowAbove",
+		icon: "InsertRowAboveDoubleIcon",
 		disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
 	};
@@ -11022,6 +11599,24 @@ const BULLET_LIST_TYPE_COMPONENT = `${COMPONENT_PREFIX}_BULLET_LIST_TYPE_COMPONE
 
 //#endregion
 //#region src/menu/menu.ts
+function shouldSuppressDocMenuStateRefresh(accessor) {
+	let univerInstanceService;
+	let focusCoordinator;
+	try {
+		univerInstanceService = accessor.get(IUniverInstanceService);
+	} catch (error) {
+		if (isInjectorDisposedError(error)) return true;
+		throw error;
+	}
+	try {
+		focusCoordinator = accessor.get(IDocEmbedRuntimeFocusCoordinator);
+	} catch {
+		return false;
+	}
+	const docDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+	const unitId = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getUnitId();
+	return focusCoordinator.shouldSuppressHostInteraction(unitId);
+}
 function getInsertTableHiddenObservable(accessor) {
 	const univerInstanceService = accessor.get(IUniverInstanceService);
 	const renderManagerService = accessor.get(IRenderManagerService);
@@ -11215,6 +11810,7 @@ function BoldMenuItemFactory(accessor) {
 		activated$: new Observable((subscriber) => {
 			const calc = () => {
 				var _textRun$ts;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const textRun = getFontStyleAtCursor(accessor);
 				if (textRun == null) {
 					subscriber.next(false);
@@ -11245,6 +11841,7 @@ function ItalicMenuItemFactory(accessor) {
 		activated$: new Observable((subscriber) => {
 			const calc = () => {
 				var _textRun$ts2;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const textRun = getFontStyleAtCursor(accessor);
 				if (textRun == null) {
 					subscriber.next(false);
@@ -11275,6 +11872,7 @@ function UnderlineMenuItemFactory(accessor) {
 		activated$: new Observable((subscriber) => {
 			const calc = () => {
 				var _textRun$ts3;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const textRun = getFontStyleAtCursor(accessor);
 				if (textRun == null) {
 					subscriber.next(false);
@@ -11305,6 +11903,7 @@ function StrikeThroughMenuItemFactory(accessor) {
 		activated$: new Observable((subscriber) => {
 			const calc = () => {
 				var _textRun$ts4;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const textRun = getFontStyleAtCursor(accessor);
 				if (textRun == null) {
 					subscriber.next(false);
@@ -11334,6 +11933,7 @@ function SubscriptMenuItemFactory(accessor) {
 		activated$: new Observable((subscriber) => {
 			const calc = () => {
 				var _textRun$ts5;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const textRun = getFontStyleAtCursor(accessor);
 				if (textRun == null) {
 					subscriber.next(false);
@@ -11363,6 +11963,7 @@ function SuperscriptMenuItemFactory(accessor) {
 		activated$: new Observable((subscriber) => {
 			const calc = () => {
 				var _textRun$ts6;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const textRun = getFontStyleAtCursor(accessor);
 				if (textRun == null) {
 					subscriber.next(false);
@@ -11402,6 +12003,7 @@ function FontFamilySelectorMenuItemFactory(accessor) {
 			const defaultValue = DEFAULT_STYLES.ff;
 			const calc = () => {
 				var _textRun$ts7;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const textRun = getFontStyleAtCursor(accessor);
 				if (textRun == null) {
 					subscriber.next(defaultValue);
@@ -11439,6 +12041,7 @@ function FontSizeSelectorMenuItemFactory(accessor) {
 			const DEFAULT_SIZE = DEFAULT_STYLES.fs;
 			const calc = () => {
 				var _textRun$ts8;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const textRun = getFontStyleAtCursor(accessor);
 				if (textRun == null) {
 					subscriber.next(DEFAULT_SIZE);
@@ -11482,6 +12085,7 @@ function HeadingSelectorMenuItemFactory(accessor) {
 			const DEFAULT_TYPE = NamedStyleType.NORMAL_TEXT;
 			const calc = () => {
 				var _paragraph$paragraphS, _paragraph$paragraphS2;
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				const paragraph = getParagraphStyleAtCursor(accessor);
 				if (paragraph == null) {
 					subscriber.next(DEFAULT_TYPE);
@@ -11572,6 +12176,7 @@ function FloatTextStyleMenuItemFactory(accessor) {
 		selections: FLOAT_TEXT_STYLE_OPTIONS,
 		value$: new Observable((subscriber) => {
 			const calc = () => {
+				if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 				subscriber.next(normalizeFloatingTextStyleValue(getParagraphStyleAtCursor(accessor)));
 			};
 			const disposable = commandService.onCommandExecuted((c) => {
@@ -11603,6 +12208,7 @@ function TextColorSelectorMenuItemFactory(accessor) {
 				const defaultValue = DEFAULT_STYLES.cl.rgb;
 				const calc = () => {
 					var _textRun$ts9;
+					if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 					const textRun = getFontStyleAtCursor(accessor);
 					if (!textRun) {
 						subscriber.next(defaultValue);
@@ -11622,6 +12228,7 @@ function TextColorSelectorMenuItemFactory(accessor) {
 			const defaultColor = themeService.getColorFromTheme("gray.900");
 			const disposable = commandService.onCommandExecuted((c) => {
 				if (c.id === SetInlineFormatTextColorCommand.id) {
+					if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 					const color = c.params.value;
 					subscriber.next(color !== null && color !== void 0 ? color : defaultColor);
 				}
@@ -11694,6 +12301,7 @@ function AlignLeftMenuItemFactory(accessor) {
 				const id = c.id;
 				if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
 					var _paragraph$paragraphS5;
+					if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 					const paragraph = getParagraphStyleAtCursor(accessor);
 					if (paragraph == null) return;
 					const alignType = (_paragraph$paragraphS5 = paragraph.paragraphStyle) === null || _paragraph$paragraphS5 === void 0 ? void 0 : _paragraph$paragraphS5.horizontalAlign;
@@ -11718,6 +12326,7 @@ function AlignCenterMenuItemFactory(accessor) {
 				const id = c.id;
 				if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
 					var _paragraph$paragraphS6;
+					if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 					const paragraph = getParagraphStyleAtCursor(accessor);
 					if (paragraph == null) return;
 					const alignType = (_paragraph$paragraphS6 = paragraph.paragraphStyle) === null || _paragraph$paragraphS6 === void 0 ? void 0 : _paragraph$paragraphS6.horizontalAlign;
@@ -11743,6 +12352,7 @@ function AlignRightMenuItemFactory(accessor) {
 				const id = c.id;
 				if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
 					var _paragraph$paragraphS7;
+					if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 					const paragraph = getParagraphStyleAtCursor(accessor);
 					if (paragraph == null) return;
 					const alignType = (_paragraph$paragraphS7 = paragraph.paragraphStyle) === null || _paragraph$paragraphS7 === void 0 ? void 0 : _paragraph$paragraphS7.horizontalAlign;
@@ -11768,6 +12378,7 @@ function AlignJustifyMenuItemFactory(accessor) {
 				const id = c.id;
 				if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
 					var _paragraph$paragraphS8;
+					if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 					const paragraph = getParagraphStyleAtCursor(accessor);
 					if (paragraph == null) return;
 					const alignType = (_paragraph$paragraphS8 = paragraph.paragraphStyle) === null || _paragraph$paragraphS8 === void 0 ? void 0 : _paragraph$paragraphS8.horizontalAlign;
@@ -11812,6 +12423,10 @@ function AlignMenuItemFactory(accessor) {
 	const value$ = new Observable((subscriber) => {
 		const calc = () => {
 			var _paragraph$paragraphS9, _paragraph$paragraphS10;
+			if (shouldSuppressDocMenuStateRefresh(accessor)) {
+				subscriber.next(HorizontalAlign.LEFT);
+				return;
+			}
 			const paragraph = getParagraphStyleAtCursor(accessor);
 			subscriber.next((_paragraph$paragraphS9 = paragraph === null || paragraph === void 0 || (_paragraph$paragraphS10 = paragraph.paragraphStyle) === null || _paragraph$paragraphS10 === void 0 ? void 0 : _paragraph$paragraphS10.horizontalAlign) !== null && _paragraph$paragraphS9 !== void 0 ? _paragraph$paragraphS9 : HorizontalAlign.LEFT);
 		};
@@ -11851,6 +12466,7 @@ const listValueFactory$ = (accessor) => {
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const subscription = univerInstanceService.focused$.subscribe((unitId) => {
 			var _docRanges$find;
+			if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 			if (unitId == null) return;
 			const docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
 			if (docDataModel == null) return;
@@ -11930,30 +12546,6 @@ function CheckListMenuItemFactory(accessor) {
 		activated$: listValueFactory$(accessor).pipe(map((v) => Boolean(v && v.indexOf("CHECK_LIST") === 0)))
 	};
 }
-function DocSwitchModeMenuItemFactory(accessor) {
-	const commandService = accessor.get(ICommandService);
-	const univerInstanceService = accessor.get(IUniverInstanceService);
-	return {
-		id: SwitchDocModeCommand.id,
-		type: MenuItemType.BUTTON,
-		icon: "KeyboardIcon",
-		tooltip: "docs-ui.toolbar.documentFlavor",
-		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
-		activated$: new Observable((subscriber) => {
-			var _instance$getSnapshot2;
-			const subscription = commandService.onCommandExecuted((c) => {
-				if (c.id === RichTextEditingMutation.id) {
-					var _instance$getSnapshot;
-					const instance = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-					subscriber.next((instance === null || instance === void 0 || (_instance$getSnapshot = instance.getSnapshot()) === null || _instance$getSnapshot === void 0 ? void 0 : _instance$getSnapshot.documentStyle.documentFlavor) === DocumentFlavor.MODERN);
-				}
-			});
-			const instance = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-			subscriber.next((instance === null || instance === void 0 || (_instance$getSnapshot2 = instance.getSnapshot()) === null || _instance$getSnapshot2 === void 0 ? void 0 : _instance$getSnapshot2.documentStyle.documentFlavor) === DocumentFlavor.MODERN);
-			return () => subscription.dispose();
-		})
-	};
-}
 function ResetTextColorMenuItemFactory(accessor) {
 	return {
 		id: ResetInlineFormatTextColorCommand.id,
@@ -11988,6 +12580,7 @@ function BackgroundColorSelectorMenuItemFactory(accessor) {
 				const defaultValue = themeService.getColorFromTheme("primary.600");
 				const calc = () => {
 					var _textRun$ts10;
+					if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 					const textRun = getFontStyleAtCursor(accessor);
 					if (!textRun) {
 						subscriber.next(defaultValue);
@@ -12007,6 +12600,7 @@ function BackgroundColorSelectorMenuItemFactory(accessor) {
 			const defaultColor = themeService.getColorFromTheme("primary.600");
 			const disposable = commandService.onCommandExecuted((c) => {
 				if (c.id === SetInlineFormatTextBackgroundColorCommand.id) {
+					if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 					const color = c.params.value;
 					subscriber.next(color !== null && color !== void 0 ? color : defaultColor);
 				}
@@ -12020,9 +12614,18 @@ function BackgroundColorSelectorMenuItemFactory(accessor) {
 }
 function getFontStyleAtCursor(accessor) {
 	var _docRanges$find2, _docMenuStyleService$, _paragraph$paragraphS11, _paragraph$paragraphS12, _docDataModel$getSelf;
-	const univerInstanceService = accessor.get(IUniverInstanceService);
-	const textSelectionService = accessor.get(DocSelectionManagerService);
-	const docMenuStyleService = accessor.get(DocMenuStyleService);
+	if (shouldSuppressDocMenuStateRefresh(accessor)) return;
+	let univerInstanceService;
+	let textSelectionService;
+	let docMenuStyleService;
+	try {
+		univerInstanceService = accessor.get(IUniverInstanceService);
+		textSelectionService = accessor.get(DocSelectionManagerService);
+		docMenuStyleService = accessor.get(DocMenuStyleService);
+	} catch (error) {
+		if (isInjectorDisposedError(error)) return;
+		throw error;
+	}
 	const docDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 	const docRanges = textSelectionService.getDocRanges();
 	const activeRange = (_docRanges$find2 = docRanges.find((r) => r.isActive)) !== null && _docRanges$find2 !== void 0 ? _docRanges$find2 : docRanges[0];
@@ -12053,8 +12656,16 @@ function getFontStyleAtCursor(accessor) {
 }
 function getParagraphStyleAtCursor(accessor) {
 	var _docRanges$find3, _docDataModel$getSelf2;
-	const univerInstanceService = accessor.get(IUniverInstanceService);
-	const textSelectionService = accessor.get(DocSelectionManagerService);
+	if (shouldSuppressDocMenuStateRefresh(accessor)) return;
+	let univerInstanceService;
+	let textSelectionService;
+	try {
+		univerInstanceService = accessor.get(IUniverInstanceService);
+		textSelectionService = accessor.get(DocSelectionManagerService);
+	} catch (error) {
+		if (isInjectorDisposedError(error)) return;
+		throw error;
+	}
 	const docDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 	const docRanges = textSelectionService.getDocRanges();
 	const activeRange = (_docRanges$find3 = docRanges.find((r) => r.isActive)) !== null && _docRanges$find3 !== void 0 ? _docRanges$find3 : docRanges[0];
@@ -12070,6 +12681,10 @@ function getParagraphStyleAtCursor(accessor) {
 	}
 	return null;
 }
+function isInjectorDisposedError(error) {
+	if (!(error instanceof Error)) return false;
+	return error.name === "InjectorAlreadyDisposedError" || error.message.includes("Injector cannot be accessed after it was disposed");
+}
 function PageSettingMenuItemFactory(accessor) {
 	return {
 		id: DocOpenPageSettingCommand.id,
@@ -12134,6 +12749,7 @@ function getHeadingActivatedObservable(accessor, headingType) {
 		const DEFAULT_TYPE = NamedStyleType.NORMAL_TEXT;
 		const calc = () => {
 			var _paragraph$paragraphS, _paragraph$paragraphS2;
+			if (shouldSuppressDocMenuStateRefresh(accessor)) return;
 			const paragraph = getParagraphStyleAtCursor(accessor);
 			if (paragraph == null) {
 				subscriber.next(DEFAULT_TYPE === headingType);
@@ -12585,7 +13201,7 @@ function ParagraphMenuIndentIncreaseMenuItemFactory(accessor) {
 	return {
 		id: DOC_PARAGRAPH_T_INDENT_INCREASE_ID,
 		type: MenuItemType.BUTTON,
-		icon: "MoreRightIcon",
+		icon: "LineIndentIncreaseIcon",
 		title: "docs-ui.paragraphMenu.increase",
 		tooltip: "docs-ui.paragraphMenu.increaseIndent",
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
@@ -12595,7 +13211,7 @@ function ParagraphMenuIndentDecreaseMenuItemFactory(accessor) {
 	return {
 		id: DOC_PARAGRAPH_T_INDENT_DECREASE_ID,
 		type: MenuItemType.BUTTON,
-		icon: "MoreLeftIcon",
+		icon: "LineIndentDecreaseIcon",
 		title: "docs-ui.paragraphMenu.decrease",
 		tooltip: "docs-ui.paragraphMenu.decreaseIndent",
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
@@ -12733,10 +13349,6 @@ const menuSchema = {
 			order: 10,
 			menuItemFactory: HeaderFooterMenuItemFactory
 		},
-		[SwitchDocModeCommand.id]: {
-			order: 11,
-			menuItemFactory: DocSwitchModeMenuItemFactory
-		},
 		[DocOpenPageSettingCommand.id]: {
 			order: 12,
 			menuItemFactory: PageSettingMenuItemFactory
@@ -12785,6 +13397,10 @@ const menuSchema = {
 				order: 0,
 				menuItemFactory: ParagraphSettingMenuFactory
 			},
+			[DocSectionSettingPanelOperation.id]: {
+				order: 1,
+				menuItemFactory: SectionSettingMenuFactory
+			},
 			[TABLE_INSERT_MENU_ID]: {
 				order: 1,
 				menuItemFactory: TableInsertMenuItemFactory,
@@ -12877,6 +13493,10 @@ const menuSchema = {
 				order: 0,
 				menuItemFactory: ParagraphSettingMenuFactory
 			},
+			[DocSectionSettingPanelOperation.id]: {
+				order: 1,
+				menuItemFactory: SectionSettingMenuFactory
+			},
 			[INSERT_BELLOW_MENU_ID]: {
 				order: 1,
 				menuItemFactory: DocInsertBellowMenuItemFactory,
@@ -12990,6 +13610,10 @@ const menuSchema = {
 					order: 0,
 					menuItemFactory: ParagraphSettingMenuFactory
 				},
+				[DocSectionSettingPanelOperation.id]: {
+					order: 1,
+					menuItemFactory: SectionSettingMenuFactory
+				},
 				[BulletListCommand.id]: {
 					order: 1,
 					menuItemFactory: EmptyParagraphBulletListMenuItemFactory
@@ -13622,6 +14246,11 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 		this._univerInstanceService = _univerInstanceService;
 		this._commandService = _commandService;
 	}
+	_shouldUpdateForCommand(commandInfo, unitId) {
+		if (commandInfo.id !== SetDocZoomRatioOperation.id && commandInfo.id !== RichTextEditingMutation.id) return false;
+		const params = commandInfo.params;
+		return (params === null || params === void 0 ? void 0 : params.unitId) == null || params.unitId === unitId;
+	}
 	_createRectPositionObserver(rect, currentRender) {
 		const calc = () => {
 			const { scene, engine } = currentRender;
@@ -13644,20 +14273,21 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 		if (position == null) throw new Error(`Current render canvas not found, unitId: ${currentRender.unitId}`);
 		const position$ = new BehaviorSubject(position);
 		const disposable = new DisposableCollection();
-		disposable.add(this._commandService.onCommandExecuted((commandInfo) => {
-			if (commandInfo.id === SetDocZoomRatioOperation.id || commandInfo.id === RichTextEditingMutation.id) {
+		const updatePosition = () => {
+			try {
 				const newPosition = calc();
 				if (newPosition) position$.next(newPosition);
-			}
+			} catch {}
+		};
+		disposable.add(this._commandService.onCommandExecuted((commandInfo) => {
+			if (this._shouldUpdateForCommand(commandInfo, currentRender.unitId)) updatePosition();
 		}));
 		const viewMain = currentRender.scene.getViewport("viewMain");
 		if (viewMain) disposable.add(viewMain.onScrollAfter$.subscribeEvent(() => {
-			const newPosition = calc();
-			if (newPosition) position$.next(newPosition);
+			updatePosition();
 		}));
 		disposable.add(currentRender.scene.onTransformChange$.subscribeEvent(() => {
-			const newPosition = calc();
-			if (newPosition) position$.next(newPosition);
+			updatePosition();
 		}));
 		return {
 			position,
@@ -13708,11 +14338,13 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 	attachPopupToRect(rect, popup, unitId) {
 		const currentRender = this._renderManagerService.getRenderById(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);
 		const id = this._globalPopupManagerService.addPopup({
 			...popup,
 			unitId,
 			subUnitId: "default",
+			connectorInjector: popupInjector,
 			anchorRect: position,
 			anchorRect$: position$,
 			canvasElement: currentRender.engine.getCanvasElement()
@@ -13735,11 +14367,13 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 	attachPopupToObject(targetObject, popup, unitId) {
 		const currentRender = this._renderManagerService.getRenderById(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);
 		const id = this._globalPopupManagerService.addPopup({
 			...popup,
 			unitId,
 			subUnitId: "default",
+			connectorInjector: popupInjector,
 			anchorRect: position,
 			anchorRect$: position$,
 			canvasElement: currentRender.engine.getCanvasElement()
@@ -13765,12 +14399,14 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 		const { direction = "top", multipleDirection } = popup;
 		const currentRender = this._renderManagerService.getRenderById(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);
 		const position$ = bounds$.pipe(map((bounds) => direction.includes("top") ? bounds[0] : bounds[bounds.length - 1]));
 		const id = this._globalPopupManagerService.addPopup({
 			...popup,
 			unitId,
 			subUnitId: "default",
+			connectorInjector: popupInjector,
 			anchorRect: direction.includes("top") ? bounds[0] : bounds[bounds.length - 1],
 			anchorRect$: position$,
 			excludeRects: bounds,
@@ -13791,6 +14427,10 @@ let DocCanvasPopManagerService = class DocCanvasPopManagerService extends Dispos
 			canDispose: () => this._globalPopupManagerService.activePopupId !== id
 		};
 	}
+	_resolveEmbeddedPopupInjector(unitId, currentRender) {
+		var _this$_univerInstance, _currentRender$getInj;
+		return ((_this$_univerInstance = this._univerInstanceService.getUnitCreateOptions(unitId)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.embeddedRender) === true ? (_currentRender$getInj = currentRender.getInjector) === null || _currentRender$getInj === void 0 ? void 0 : _currentRender$getInj.call(currentRender) : void 0;
+	}
 };
 DocCanvasPopManagerService = __decorate([
 	__decorateParam(0, Inject(ICanvasPopupService)),
@@ -14513,10 +15153,6 @@ function clipRectHorizontally(rect, visibleLeft, visibleRight) {
 
 //#endregion
 //#region src/views/SideMenu.tsx
-const commonClass = "univer-font-[500] univer-truncate univer-h-[24px] univer-mb-2 univer-leading-[24px] univer-cursor-pointer univer-pr-1 ";
-const titleClass = "univer-text-base univer-font-semibold";
-const h1Class = "univer-text-sm univer-font-semibold";
-const textClass = "univer-text-sm";
 const SideMenu = forwardRef((props, ref) => {
 	const { menus, onClick, className, style, mode, maxHeight, activeId, open, onOpenChange, maxWidth, wrapperClass, wrapperStyle, iconClass, iconStyle } = props;
 	const isSideBar = mode === "side-bar";
@@ -14565,10 +15201,10 @@ const SideMenu = forwardRef((props, ref) => {
 				className: clsx("univer-flex-1 univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName),
 				children: menus === null || menus === void 0 ? void 0 : menus.map((menu) => /* @__PURE__ */ jsx("div", {
 					id: `univer-side-menu-${menu.id}`,
-					className: clsx(commonClass, {
-						[titleClass]: menu.isTitle,
-						[h1Class]: menu.level === 1,
-						[textClass]: menu.level > 1,
+					className: clsx("univer-mb-2 univer-h-[24px] univer-cursor-pointer univer-truncate univer-pr-1 univer-font-[500] univer-leading-[24px]", {
+						"univer-text-base univer-font-semibold": menu.isTitle,
+						"univer-text-sm univer-font-semibold": menu.level === 1,
+						"univer-text-sm": menu.level > 1,
 						"univer-text-gray-500 dark:!univer-text-gray-400": menu.id !== activeId,
 						"univer-text-gray-800 dark:!univer-text-gray-200": menu.id === activeId
 					}),
@@ -14749,7 +15385,7 @@ function DocSideMenuContent() {
 * limitations under the License.
 */
 let DocUIController = class DocUIController extends Disposable {
-	constructor(_injector, _commandService, _layoutService, _menuManagerService, _uiPartsService, _univerInstanceService, _shortcutService, _configService) {
+	constructor(_injector, _commandService, _layoutService, _menuManagerService, _uiPartsService, _univerInstanceService, _shortcutService, _configService, _embedInteractionBoundaryService, _embedRuntimeFocusCoordinator) {
 		super();
 		this._injector = _injector;
 		this._commandService = _commandService;
@@ -14759,6 +15395,7 @@ let DocUIController = class DocUIController extends Disposable {
 		this._univerInstanceService = _univerInstanceService;
 		this._shortcutService = _shortcutService;
 		this._configService = _configService;
+		this._embedRuntimeFocusCoordinator = _embedRuntimeFocusCoordinator;
 		this._init();
 	}
 	_initUiParts() {
@@ -14804,9 +15441,15 @@ 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();
 		}));
 	}
+	_shouldPreserveEmbedFocus(unitId) {
+		var _this$_embedRuntimeFo;
+		if ((_this$_embedRuntimeFo = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo === void 0 ? void 0 : _this$_embedRuntimeFo.shouldSuppressHostInteraction(unitId)) return true;
+		return false;
+	}
 };
 DocUIController = __decorate([
 	__decorateParam(0, Inject(Injector)),
@@ -14816,13 +15459,272 @@ DocUIController = __decorate([
 	__decorateParam(4, IUIPartsService),
 	__decorateParam(5, IUniverInstanceService),
 	__decorateParam(6, IShortcutService),
-	__decorateParam(7, IConfigService)
+	__decorateParam(7, IConfigService),
+	__decorateParam(8, Optional(IDocEmbedInteractionBoundaryService)),
+	__decorateParam(9, Optional(IDocEmbedRuntimeFocusCoordinator))
 ], DocUIController);
 
+//#endregion
+//#region src/embed-docs-custom-block-bleed.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DOCS_CUSTOM_BLOCK_VIEWPORT_INSET = 10;
+function createDefaultDocsTableLikeCustomBlockBleedViewport() {
+	if (typeof window === "undefined") return {
+		bleedLeft: 0,
+		bleedRight: 0,
+		bleedWidth: 1,
+		contentWidth: 1,
+		virtualWidth: 1
+	};
+	const bleedWidth = Math.max(1, window.innerWidth - DOCS_CUSTOM_BLOCK_VIEWPORT_INSET * 2);
+	return {
+		bleedLeft: 0,
+		bleedRight: 0,
+		bleedWidth,
+		contentWidth: 1,
+		virtualWidth: bleedWidth
+	};
+}
+function resolveDocsTableLikeCustomBlockBleedViewport(root, contentWidth, hint) {
+	const rootRect = root.getBoundingClientRect();
+	const rootWidth = Math.max(1, rootRect.width);
+	const normalizedContentWidth = Math.max(1, contentWidth);
+	const hintedBleedLeft = hint === null || hint === void 0 ? void 0 : hint.bleedLeft;
+	const hintedBleedWidth = hint === null || hint === void 0 ? void 0 : hint.bleedWidth;
+	if (Number.isFinite(hintedBleedWidth) && (hintedBleedWidth !== null && hintedBleedWidth !== void 0 ? hintedBleedWidth : 0) > 0) {
+		const bleedLeft = Math.max(0, hintedBleedLeft !== null && hintedBleedLeft !== void 0 ? hintedBleedLeft : 0);
+		const bleedWidth = Math.max(1, hintedBleedWidth);
+		return {
+			bleedLeft,
+			bleedRight: Math.max(0, bleedWidth - bleedLeft - rootWidth),
+			bleedWidth,
+			contentWidth: normalizedContentWidth,
+			virtualWidth: Math.max(bleedWidth, bleedLeft + normalizedContentWidth)
+		};
+	}
+	if (normalizedContentWidth <= rootWidth) return {
+		bleedLeft: 0,
+		bleedRight: 0,
+		bleedWidth: rootWidth,
+		contentWidth: normalizedContentWidth,
+		virtualWidth: rootWidth
+	};
+	const bounds = resolveDocsTableLikeCustomBlockBleedBounds(root);
+	const viewportLeft = bounds.left + DOCS_CUSTOM_BLOCK_VIEWPORT_INSET;
+	const viewportWidth = Math.max(1, bounds.width - DOCS_CUSTOM_BLOCK_VIEWPORT_INSET * 2);
+	const bleedLeft = Math.max(0, rootRect.left - viewportLeft);
+	return {
+		bleedLeft,
+		bleedRight: Math.max(0, viewportLeft + viewportWidth - rootRect.right),
+		bleedWidth: viewportWidth,
+		contentWidth: normalizedContentWidth,
+		virtualWidth: Math.max(viewportWidth, bleedLeft + normalizedContentWidth)
+	};
+}
+function resolveDocsTableLikeCustomBlockContentWidth(authoritativeContentWidth, fallbackContentWidth) {
+	return Number.isFinite(authoritativeContentWidth) && (authoritativeContentWidth !== null && authoritativeContentWidth !== void 0 ? authoritativeContentWidth : 0) > 0 ? authoritativeContentWidth : Math.max(1, fallbackContentWidth);
+}
+function resolveDocsTableLikeCustomBlockContentHeight(authoritativeContentHeight, fallbackContentHeight) {
+	return Number.isFinite(authoritativeContentHeight) && (authoritativeContentHeight !== null && authoritativeContentHeight !== void 0 ? authoritativeContentHeight : 0) > 0 ? authoritativeContentHeight : Math.max(1, fallbackContentHeight);
+}
+function resolveDocsTableLikeCustomBlockBleedBounds(root) {
+	const clippingAncestor = findClippingAncestor(root);
+	if (clippingAncestor) {
+		const rect = clippingAncestor.getBoundingClientRect();
+		if (Number.isFinite(rect.width) && rect.width > 0) return {
+			left: rect.left,
+			width: rect.width
+		};
+	}
+	return {
+		left: 0,
+		width: typeof window === "undefined" ? 1 : Math.max(1, window.innerWidth)
+	};
+}
+function findClippingAncestor(root) {
+	let current = root.parentElement;
+	while (current && current !== document.body && current !== document.documentElement) {
+		if (clipsOverflow(current)) return current;
+		current = current.parentElement;
+	}
+	return null;
+}
+function clipsOverflow(element) {
+	const style = window.getComputedStyle(element);
+	return hasClippingOverflow(style.overflow) || hasClippingOverflow(style.overflowX) || hasClippingOverflow(style.overflowY);
+}
+function hasClippingOverflow(value) {
+	return value === "hidden" || value === "auto" || value === "scroll" || value === "clip";
+}
+
+//#endregion
+//#region src/embed-docs-custom-block-refresh.ts
+function collectDocsTableLikeEmbedChildUnitIds(drawings, resolveChildUnitId) {
+	const childUnitIds = /* @__PURE__ */ new Set();
+	Object.values(drawings !== null && drawings !== void 0 ? drawings : {}).forEach((drawing) => {
+		var _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;
+		childUnitIds.add(childUnitId);
+	});
+	return childUnitIds;
+}
+function getDrawingData(drawing) {
+	if (!drawing || typeof drawing !== "object") return;
+	const data = drawing.data;
+	return data && typeof data === "object" ? data : void 0;
+}
+function getCommandUnitId(commandParams) {
+	if (!commandParams || typeof commandParams !== "object") return;
+	const params = commandParams;
+	if (typeof params.unitId === "string") return params.unitId;
+	return typeof params.unitID === "string" ? params.unitID : void 0;
+}
+function shouldRefreshDocsCustomBlockSizeForCommand(params) {
+	if (params.commandId && isDocsCustomBlockLayoutNeutralCommand(params.commandId)) return false;
+	const commandUnitId = getCommandUnitId(params.commandParams);
+	return Boolean(commandUnitId && commandUnitId !== params.hostUnitId && params.childUnitIds.has(commandUnitId));
+}
+const DOCS_CUSTOM_BLOCK_LAYOUT_NEUTRAL_COMMAND_IDS = /* @__PURE__ */ new Set([
+	"sheet.command.expand-selection",
+	"sheet.command.move-selection",
+	"sheet.operation.scroll-to-cell",
+	"sheet.operation.scroll-to-range",
+	"sheet.operation.set-activate-cell-edit",
+	"sheet.operation.set-cell-edit-visible",
+	"sheet.operation.set-cell-edit-visible-arrow",
+	"sheet.operation.set-cell-edit-visible-f2",
+	"sheet.operation.set-format-painter",
+	"sheet.operation.set-scroll",
+	"sheet.operation.set-selections",
+	"sheet.operation.set-zoom-ratio"
+]);
+function isDocsCustomBlockLayoutNeutralCommand(commandId) {
+	return DOCS_CUSTOM_BLOCK_LAYOUT_NEUTRAL_COMMAND_IDS.has(commandId);
+}
+function createDocsCustomBlockSizeRefreshScheduler(refresh) {
+	let pendingFrame;
+	return {
+		dispose: () => {
+			if (pendingFrame == null) return;
+			window.cancelAnimationFrame(pendingFrame);
+			pendingFrame = void 0;
+		},
+		schedule: () => {
+			if (pendingFrame != null) return;
+			pendingFrame = window.requestAnimationFrame(() => {
+				pendingFrame = void 0;
+				refresh();
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/embed-docs-custom-block-scroll.ts
+function scrollDocsTableLikeCustomBlockLive(event, live, options = {}) {
+	if (event.defaultPrevented || event.ctrlKey || event.metaKey) return false;
+	const deltaX = event.deltaX || (event.shiftKey ? event.deltaY : 0);
+	const deltaY = event.shiftKey ? 0 : event.deltaY;
+	const previousLeft = live.scrollLeft;
+	const previousTop = live.scrollTop;
+	const maxScrollLeft = resolveMaxScrollLeft(live, options.maxScrollLeft);
+	if (deltaX && canScrollX(live, deltaX, maxScrollLeft)) live.scrollLeft = clampScroll(previousLeft + deltaX, 0, maxScrollLeft);
+	if (deltaY && canScrollY(live, deltaY)) live.scrollTop = clampScroll(previousTop + deltaY, 0, live.scrollHeight - live.clientHeight);
+	return live.scrollLeft !== previousLeft || live.scrollTop !== previousTop;
+}
+function canScrollX(element, deltaX, maxScrollLeft) {
+	return element.scrollWidth > element.clientWidth && (deltaX < 0 ? element.scrollLeft > 0 : element.scrollLeft < maxScrollLeft);
+}
+function canScrollY(element, deltaY) {
+	return element.scrollHeight > element.clientHeight && (deltaY < 0 ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight);
+}
+function clampScroll(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+function resolveMaxScrollLeft(element, requestedMaxScrollLeft) {
+	const nativeMaxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
+	if (!Number.isFinite(requestedMaxScrollLeft)) return nativeMaxScrollLeft;
+	return clampScroll(requestedMaxScrollLeft !== null && requestedMaxScrollLeft !== void 0 ? requestedMaxScrollLeft : nativeMaxScrollLeft, 0, nativeMaxScrollLeft);
+}
+
+//#endregion
+//#region src/embed-host-anchor.ts
+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 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 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;
+	const viewportHeight = sheetLike && visibleCanvasHeight != null ? Math.min(contentHeight, visibleCanvasHeight) : height;
+	if (!sheetLike) return {
+		height,
+		width: fallbackWidth
+	};
+	const pageWidth = params.pageWidth;
+	const pageMarginLeft = (_params$pageMarginLef = params.pageMarginLeft) !== null && _params$pageMarginLef !== void 0 ? _params$pageMarginLef : 0;
+	const pageMarginRight = (_params$pageMarginRig = params.pageMarginRight) !== null && _params$pageMarginRig !== void 0 ? _params$pageMarginRig : 0;
+	const pageContentWidth = Number.isFinite(pageWidth) ? Math.max(0, pageWidth - pageMarginLeft - pageMarginRight) : fallbackWidth;
+	const contentWidth = Number.isFinite(params.contentWidth) && ((_params$contentWidth = params.contentWidth) !== null && _params$contentWidth !== void 0 ? _params$contentWidth : 0) > 0 ? params.contentWidth : fallbackWidth;
+	if (params.documentFlavor !== DocumentFlavor.MODERN || !Number.isFinite(pageWidth)) {
+		const layoutWidth = Math.min(contentWidth, pageContentWidth || contentWidth);
+		return {
+			contentHeight,
+			contentWidth,
+			height,
+			layoutWidth,
+			offsetLeft: 0,
+			viewportHeight,
+			width: layoutWidth
+		};
+	}
+	const inset = MODERN_DOCS_CUSTOM_BLOCK_VIEWPORT_INSET / (params.scale && params.scale > 0 ? params.scale : 1);
+	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);
+	const hasVisibleCanvas = Number.isFinite(params.visibleCanvasLeft) && Number.isFinite(params.visibleCanvasWidth) && ((_params$visibleCanvas2 = params.visibleCanvasWidth) !== null && _params$visibleCanvas2 !== void 0 ? _params$visibleCanvas2 : 0) > 0;
+	const viewportLeft = hasVisibleCanvas ? params.visibleCanvasLeft + inset : fallbackViewportLeft;
+	const viewportWidth = hasVisibleCanvas ? Math.max(0, params.visibleCanvasWidth - inset * 2) : fallbackViewportWidth;
+	const paragraphTextStart = docsLeft + pageMarginLeft;
+	const leadingInsetLeft = Math.max(0, paragraphTextStart - viewportLeft);
+	const layoutWidth = Math.min(contentWidth, pageContentWidth || contentWidth);
+	return {
+		bleedLeft: leadingInsetLeft,
+		bleedWidth: viewportWidth,
+		contentHeight,
+		contentWidth,
+		height,
+		layoutWidth,
+		offsetLeft: 0,
+		viewportHeight,
+		width: layoutWidth
+	};
+}
+
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.0-alpha.2";
+var version = "1.0.0-alpha.3";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -14830,7 +15732,7 @@ const DocParagraphSettingCommand = {
 	id: "doc-paragraph-setting.command",
 	type: CommandType.COMMAND,
 	handler: async (accessor, config) => {
-		var _segment$getBody$para, _segment$getBody, _segment$getBody$data, _segment$getBody2, _BuildTextUtils$range;
+		var _segmentBody$paragrap, _segmentBody$dataStre, _BuildTextUtils$range;
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const commandService = accessor.get(ICommandService);
@@ -14840,8 +15742,9 @@ const DocParagraphSettingCommand = {
 		const segmentId = docRanges[0].segmentId;
 		const unitId = docDataModel.getUnitId();
 		const segment = docDataModel.getSelfOrHeaderFooterModel(segmentId);
-		const allParagraphs = (_segment$getBody$para = segment === null || segment === void 0 || (_segment$getBody = segment.getBody()) === null || _segment$getBody === void 0 ? void 0 : _segment$getBody.paragraphs) !== null && _segment$getBody$para !== void 0 ? _segment$getBody$para : [];
-		const dataStream = (_segment$getBody$data = segment === null || segment === void 0 || (_segment$getBody2 = segment.getBody()) === null || _segment$getBody2 === void 0 ? void 0 : _segment$getBody2.dataStream) !== null && _segment$getBody$data !== void 0 ? _segment$getBody$data : "";
+		const segmentBody = segment === null || segment === void 0 ? void 0 : segment.getBody();
+		const allParagraphs = (_segmentBody$paragrap = segmentBody === null || segmentBody === void 0 ? void 0 : segmentBody.paragraphs) !== null && _segmentBody$paragrap !== void 0 ? _segmentBody$paragrap : [];
+		const dataStream = (_segmentBody$dataStre = segmentBody === null || segmentBody === void 0 ? void 0 : segmentBody.dataStream) !== null && _segmentBody$dataStre !== void 0 ? _segmentBody$dataStre : "";
 		const paragraphs = (_BuildTextUtils$range = BuildTextUtils.range.getParagraphsInRanges(docRanges, allParagraphs, dataStream)) !== null && _BuildTextUtils$range !== void 0 ? _BuildTextUtils$range : [];
 		const doMutation = {
 			id: RichTextEditingMutation.id,
@@ -14851,6 +15754,7 @@ const DocParagraphSettingCommand = {
 				textRanges: docRanges
 			}
 		};
+		if (!config.paragraph || Object.keys(config.paragraph).length === 0) return false;
 		const memoryCursor = new MemoryCursor();
 		memoryCursor.reset();
 		const textX = new TextX();
@@ -14861,10 +15765,6 @@ const DocParagraphSettingCommand = {
 				t: TextXActionType.RETAIN,
 				len: startIndex - memoryCursor.cursor
 			});
-			const paragraphStyle = {
-				...paragraph.paragraphStyle,
-				...config.paragraph
-			};
 			textX.push({
 				t: TextXActionType.RETAIN,
 				len: 1,
@@ -14872,7 +15772,10 @@ const DocParagraphSettingCommand = {
 					dataStream: "",
 					paragraphs: [{
 						...paragraph,
-						paragraphStyle,
+						paragraphStyle: {
+							...paragraph.paragraphStyle,
+							...config.paragraph
+						},
 						startIndex: 0
 					}]
 				},
@@ -14886,18 +15789,50 @@ const DocParagraphSettingCommand = {
 	}
 };
 
+//#endregion
+//#region src/utils/section-header-footer.ts
+function getDocPageSectionContext(snapshot, page) {
+	const sections = snapshot.body ? getTopLevelSectionBreaks(snapshot.body) : [];
+	const sectionIndex = (page === null || page === void 0 ? void 0 : page.sectionId) == null ? -1 : sections.findIndex((item) => item.sectionId === page.sectionId);
+	const section = sectionIndex < 0 ? void 0 : sections[sectionIndex];
+	const references = section == null ? {} : resolveSectionHeaderFooterReferences(snapshot.documentStyle, sections, sectionIndex);
+	return {
+		sectionId: section === null || section === void 0 ? void 0 : section.sectionId,
+		sectionIndex,
+		sections,
+		section,
+		config: {
+			...snapshot.documentStyle,
+			...section,
+			...references
+		}
+	};
+}
+
 //#endregion
 //#region src/views/header-footer/panel/DocHeaderFooterOptions.tsx
-function getSegmentId(documentStyle, editArea, pageIndex) {
+function getSegmentId(documentStyle, editArea, pageIndex, page) {
 	const { useFirstPageHeaderFooter, evenAndOddHeaders, defaultHeaderId, defaultFooterId, firstPageHeaderId, firstPageFooterId, evenPageHeaderId, evenPageFooterId } = documentStyle;
-	if (editArea === DocumentEditArea.HEADER) if (useFirstPageHeaderFooter === BooleanNumber.TRUE) if (pageIndex === 0) return firstPageHeaderId;
-	else return evenAndOddHeaders === BooleanNumber.TRUE && pageIndex % 2 === 1 ? evenPageHeaderId : defaultHeaderId;
-	else return evenAndOddHeaders === BooleanNumber.TRUE && pageIndex % 2 === 1 ? evenPageHeaderId : defaultHeaderId;
-	else if (useFirstPageHeaderFooter === BooleanNumber.TRUE) if (pageIndex === 0) return firstPageFooterId;
-	else return evenAndOddHeaders === BooleanNumber.TRUE && pageIndex % 2 === 1 ? evenPageFooterId : defaultFooterId;
-	else return evenAndOddHeaders === BooleanNumber.TRUE && pageIndex % 2 === 1 ? evenPageFooterId : defaultFooterId;
+	const isFirstPage = page ? page.pageNumber === page.pageNumberStart : pageIndex === 0;
+	const isEvenPage = page ? page.pageNumber % 2 === 0 : pageIndex % 2 === 1;
+	if (editArea === DocumentEditArea.HEADER) if (useFirstPageHeaderFooter === BooleanNumber.TRUE) if (isFirstPage) return firstPageHeaderId;
+	else return evenAndOddHeaders === BooleanNumber.TRUE && isEvenPage ? evenPageHeaderId : defaultHeaderId;
+	else return evenAndOddHeaders === BooleanNumber.TRUE && isEvenPage ? evenPageHeaderId : defaultHeaderId;
+	else if (useFirstPageHeaderFooter === BooleanNumber.TRUE) if (isFirstPage) return firstPageFooterId;
+	else return evenAndOddHeaders === BooleanNumber.TRUE && isEvenPage ? evenPageFooterId : defaultFooterId;
+	else return evenAndOddHeaders === BooleanNumber.TRUE && isEvenPage ? evenPageFooterId : defaultFooterId;
 }
 const DocHeaderFooterOptions = (props) => {
+	var _segmentContext$segme, _segmentContext$segme2;
+	const docSelectionRenderService = useDependency(IRenderManagerService).getRenderById(props.unitId).with(DocSelectionRenderService);
+	const segmentContext = useObservable(docSelectionRenderService.segmentContext$, {
+		segmentId: docSelectionRenderService.getSegment(),
+		segmentPage: docSelectionRenderService.getSegmentPage()
+	});
+	return /* @__PURE__ */ jsx(DocHeaderFooterOptionsContent, { ...props }, `${(_segmentContext$segme = segmentContext === null || segmentContext === void 0 ? void 0 : segmentContext.segmentId) !== null && _segmentContext$segme !== void 0 ? _segmentContext$segme : ""}:${(_segmentContext$segme2 = segmentContext === null || segmentContext === void 0 ? void 0 : segmentContext.segmentPage) !== null && _segmentContext$segme2 !== void 0 ? _segmentContext$segme2 : -1}`);
+};
+function DocHeaderFooterOptionsContent(props) {
+	var _renderManagerService2, _sectionContext$confi, _sectionContext$secti, _sectionContext$secti2;
 	const localeService = useDependency(LocaleService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const renderManagerService = useDependency(IRenderManagerService);
@@ -14905,31 +15840,57 @@ const DocHeaderFooterOptions = (props) => {
 	const layoutService = useDependency(ILayoutService);
 	const { unitId } = props;
 	const docSelectionRenderService = renderManagerService.getRenderById(unitId).with(DocSelectionRenderService);
-	const [options, setOptions] = useState({});
+	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 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),
+			page
+		};
+	};
+	const [options, setOptions] = useState(() => {
+		var _getCurrentSectionCon, _config$marginHeader, _config$marginFooter, _config$useFirstPageH, _config$evenAndOddHea;
+		const config = (_getCurrentSectionCon = getCurrentSectionContext()) === null || _getCurrentSectionCon === void 0 ? void 0 : _getCurrentSectionCon.config;
+		return {
+			marginHeader: (_config$marginHeader = config === null || config === void 0 ? void 0 : config.marginHeader) !== null && _config$marginHeader !== void 0 ? _config$marginHeader : 0,
+			marginFooter: (_config$marginFooter = config === null || config === void 0 ? void 0 : config.marginFooter) !== null && _config$marginFooter !== void 0 ? _config$marginFooter : 0,
+			useFirstPageHeaderFooter: (_config$useFirstPageH = config === null || config === void 0 ? void 0 : config.useFirstPageHeaderFooter) !== null && _config$useFirstPageH !== void 0 ? _config$useFirstPageH : BooleanNumber.FALSE,
+			evenAndOddHeaders: (_config$evenAndOddHea = config === null || config === void 0 ? void 0 : config.evenAndOddHeaders) !== null && _config$evenAndOddHea !== void 0 ? _config$evenAndOddHea : BooleanNumber.FALSE
+		};
+	});
+	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 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) => {
-		var _renderManagerService;
+		var _renderManagerService3;
 		setOptions((prev) => ({
 			...prev,
 			[type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE
 		}));
-		const docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		const documentStyle = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle;
-		const docSkeletonManagerService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSkeletonManagerService);
+		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 viewModel = docSkeletonManagerService === null || docSkeletonManagerService === void 0 ? void 0 : docSkeletonManagerService.getViewModel();
 		if (documentStyle == null || viewModel == null) return;
 		const editArea = viewModel.getEditArea();
 		let needCreateHeaderFooter = false;
 		const segmentPage = docSelectionRenderService.getSegmentPage();
+		const isFirstSectionPage = (sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page) ? sectionContext.page.pageNumber === sectionContext.page.pageNumberStart : segmentPage === 0;
+		const isEvenPage = (sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page) ? sectionContext.page.pageNumber % 2 === 0 : segmentPage % 2 === 1;
 		let needChangeSegmentId = false;
 		if (type === "useFirstPageHeaderFooter" && val === true) {
 			if (editArea === DocumentEditArea.HEADER && !documentStyle.firstPageHeaderId) needCreateHeaderFooter = true;
 			else if (editArea === DocumentEditArea.FOOTER && !documentStyle.firstPageFooterId) needCreateHeaderFooter = true;
-			if (needCreateHeaderFooter && segmentPage === 0) needChangeSegmentId = true;
+			if (needCreateHeaderFooter && isFirstSectionPage) needChangeSegmentId = true;
 		}
 		if (type === "evenAndOddHeaders" && val === true) {
 			if (editArea === DocumentEditArea.HEADER && !documentStyle.evenPageHeaderId) needCreateHeaderFooter = true;
 			else if (editArea === DocumentEditArea.FOOTER && !documentStyle.evenPageFooterId) needCreateHeaderFooter = true;
-			if (needCreateHeaderFooter && segmentPage % 2 === 1) needChangeSegmentId = true;
+			if (needCreateHeaderFooter && isEvenPage) needChangeSegmentId = true;
 		}
 		if (needCreateHeaderFooter) {
 			const segmentId = generateRandomId(6);
@@ -14937,7 +15898,8 @@ const DocHeaderFooterOptions = (props) => {
 			commandService.executeCommand(CoreHeaderFooterCommandId, {
 				unitId,
 				segmentId,
-				headerFooterProps: { [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE }
+				headerFooterProps: { [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE },
+				sectionId: sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionId
 			});
 		} else {
 			const segmentPageIndex = docSelectionRenderService.getSegmentPage();
@@ -14945,23 +15907,26 @@ const DocHeaderFooterOptions = (props) => {
 			const needFocusSegmentId = getSegmentId({
 				...documentStyle,
 				[type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE
-			}, editArea, segmentPageIndex);
+			}, editArea, segmentPageIndex, sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page);
 			if (needFocusSegmentId && needFocusSegmentId !== prevSegmentId) docSelectionRenderService.setSegment(needFocusSegmentId);
 			commandService.executeCommand(CoreHeaderFooterCommandId, {
 				unitId,
-				headerFooterProps: { [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE }
+				headerFooterProps: { [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE },
+				sectionId: sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionId
 			});
 		}
 		layoutService.focus();
 	};
 	const handleMarginChange = async (val, type) => {
+		var _getCurrentSectionCon2;
 		setOptions((prev) => ({
 			...prev,
 			[type]: val
 		}));
 		await commandService.executeCommand(CoreHeaderFooterCommandId, {
 			unitId,
-			headerFooterProps: { [type]: val }
+			headerFooterProps: { [type]: val },
+			sectionId: (_getCurrentSectionCon2 = getCurrentSectionContext()) === null || _getCurrentSectionCon2 === void 0 ? void 0 : _getCurrentSectionCon2.sectionId
 		});
 		docSelectionRenderService.removeAllRanges();
 		docSelectionRenderService.blur();
@@ -14969,22 +15934,37 @@ const DocHeaderFooterOptions = (props) => {
 	const closeHeaderFooter = () => {
 		commandService.executeCommand(CloseHeaderFooterCommand.id, { unitId });
 	};
-	useEffect(() => {
-		const docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		const documentStyle = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle;
-		if (documentStyle) {
-			const { marginHeader = 0, marginFooter = 0, useFirstPageHeaderFooter = BooleanNumber.FALSE, evenAndOddHeaders = BooleanNumber.FALSE } = documentStyle;
-			setOptions({
-				marginHeader,
-				marginFooter,
-				useFirstPageHeaderFooter,
-				evenAndOddHeaders
-			});
-		}
-	}, [unitId]);
+	const handleLinkToPreviousChange = async (linked) => {
+		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 currentVariant = getHeaderFooterVariant(context.config, docSelectionRenderService.getSegmentPage(), context.page);
+		const key = getSectionHeaderFooterReferenceKey(kind, currentVariant);
+		const segmentId = generateRandomId(6);
+		const previousSegmentId = resolveSectionHeaderFooterReference(docDataModel.getDocumentStyle(), context.sections, context.sectionIndex - 1, key).segmentId;
+		if (!await commandService.executeCommand(SetSectionHeaderFooterLinkCommand.id, {
+			unitId,
+			sectionId: context.sectionId,
+			kind,
+			variant: currentVariant,
+			linkedToPrevious: linked,
+			...linked ? {} : { segmentId }
+		})) return;
+		setLinkedToPrevious(linked);
+		docSelectionRenderService.setSegment(linked ? previousSegmentId !== null && previousSegmentId !== void 0 ? previousSegmentId : "" : segmentId);
+		layoutService.focus();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-grid univer-gap-4",
 		children: [
+			canLinkToPrevious && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: linkedToPrevious,
+				onChange: (val) => {
+					handleLinkToPreviousChange(val);
+				},
+				children: localeService.t("docs-ui.headerFooter.linkToPrevious")
+			}) }),
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-grid univer-gap-2",
 				children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Checkbox, {
@@ -15032,7 +16012,14 @@ const DocHeaderFooterOptions = (props) => {
 			})
 		]
 	});
-};
+}
+function getHeaderFooterVariant(documentStyle, pageIndex, page) {
+	const isFirstPage = page ? page.pageNumber === page.pageNumberStart : pageIndex === 0;
+	const isEvenPage = page ? page.pageNumber % 2 === 0 : pageIndex % 2 === 1;
+	if (documentStyle.useFirstPageHeaderFooter === BooleanNumber.TRUE && isFirstPage) return "first";
+	if (documentStyle.evenAndOddHeaders === BooleanNumber.TRUE && isEvenPage) return "even";
+	return "default";
+}
 
 //#endregion
 //#region src/views/header-footer/panel/DocHeaderFooterPanel.tsx
@@ -15127,12 +16114,14 @@ function TextColorSwatchIcon({ className, style, onClick, color }) {
 			stroke: "currentColor",
 			strokeOpacity: .16
 		}), /* @__PURE__ */ jsx("text", {
-			x: 7.5,
+			x: 12,
 			y: 16.5,
+			direction: "ltr",
 			fontFamily: "Arial, sans-serif",
 			fontSize: 12,
 			fontWeight: 700,
 			fill: color,
+			textAnchor: "middle",
 			children: "A"
 		})]
 	});
@@ -15219,6 +16208,26 @@ const DocParagraphBackgroundColorSwatchIcon13 = createBackgroundColorSwatchIcon(
 const DocParagraphBackgroundColorSwatchIcon14 = createBackgroundColorSwatchIcon(14);
 const DocParagraphBackgroundColorSwatchIcon15 = createBackgroundColorSwatchIcon(15);
 
+//#endregion
+//#region src/views/paragraph-menu/component-keys.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DOC_PARAGRAPH_MENU_COMPONENT_KEY = "doc.paragraph.menu";
+const DOC_TABLE_BLOCK_MENU_COMPONENT_KEY = "doc.table-block.menu";
+
 //#endregion
 //#region src/views/paragraph-setting/line-spacing.ts
 const AUTO_LINE_SPACING_CONFIG = {
@@ -15237,22 +16246,20 @@ function round(value, digits) {
 function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
-function getLineSpacingRuleOptions(localeService) {
-	return [
-		{
-			label: localeService.t("docs-ui.doc.paragraphSetting.multiSpace"),
-			value: `${SpacingRule.AUTO}`
-		},
-		{
-			label: localeService.t("docs-ui.doc.paragraphSetting.atLeast"),
-			value: `${SpacingRule.AT_LEAST}`
-		},
-		{
-			label: localeService.t("docs-ui.doc.paragraphSetting.exactly"),
-			value: `${SpacingRule.EXACT}`
-		}
-	];
-}
+const LINE_SPACING_RULE_OPTIONS = [
+	{
+		label: "docs-ui.doc.paragraphSetting.multiSpace",
+		value: `${SpacingRule.AUTO}`
+	},
+	{
+		label: "docs-ui.doc.paragraphSetting.atLeast",
+		value: `${SpacingRule.AT_LEAST}`
+	},
+	{
+		label: "docs-ui.doc.paragraphSetting.exactly",
+		value: `${SpacingRule.EXACT}`
+	}
+];
 function getLineSpacingInputConfig(spacingRule) {
 	return spacingRule === SpacingRule.AUTO ? AUTO_LINE_SPACING_CONFIG : FIXED_LINE_SPACING_CONFIG;
 }
@@ -15290,6 +16297,21 @@ function convertLineSpacingForRuleChange(currentStoredValue, currentRule, nextRu
 
 //#endregion
 //#region src/views/paragraph-setting/hook/utils.ts
+const PARAGRAPH_LAYOUT_BLOCK_TYPES = /* @__PURE__ */ new Set([
+	DocumentBlockRangeType.CALLOUT,
+	DocumentBlockRangeType.CODE,
+	DocumentBlockRangeType.QUOTE
+]);
+function resolveParagraphsForSettingPanel(paragraphs, body, documentStyle) {
+	return paragraphs.map((paragraph) => {
+		var _body$blockRanges$som, _body$blockRanges;
+		const hasLayoutBlockRange = (_body$blockRanges$som = (_body$blockRanges = body.blockRanges) === null || _body$blockRanges === void 0 ? void 0 : _body$blockRanges.some((range) => PARAGRAPH_LAYOUT_BLOCK_TYPES.has(range.blockType) && paragraph.startIndex > range.startIndex && paragraph.startIndex < range.endIndex)) !== null && _body$blockRanges$som !== void 0 ? _body$blockRanges$som : false;
+		return {
+			...paragraph,
+			paragraphStyle: resolveDocumentParagraphStyle(documentStyle, paragraph.paragraphStyle, { excludeDocumentOuterSpacing: hasLayoutBlockRange })
+		};
+	});
+}
 const useDocRanges = () => {
 	const docSelectionManagerService = useDependency(DocSelectionManagerService);
 	const docParagraphSettingController = useDependency(DocParagraphSettingController);
@@ -15300,15 +16322,17 @@ const useDocRanges = () => {
 	return docRanges;
 };
 const useCurrentParagraph = () => {
-	var _segment$getBody$para, _segment$getBody, _segment$getBody$data, _segment$getBody2, _BuildTextUtils$range;
+	var _body$paragraphs, _body$dataStream, _BuildTextUtils$range;
 	const docDataModel = useDependency(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 	const docRanges = useDocRanges();
 	if (!docDataModel || docRanges.length === 0) return [];
 	const segmentId = docRanges[0].segmentId;
 	const segment = docDataModel.getSelfOrHeaderFooterModel(segmentId);
-	const paragraphs = (_segment$getBody$para = segment === null || segment === void 0 || (_segment$getBody = segment.getBody()) === null || _segment$getBody === void 0 ? void 0 : _segment$getBody.paragraphs) !== null && _segment$getBody$para !== void 0 ? _segment$getBody$para : [];
-	const dataStream = (_segment$getBody$data = segment === null || segment === void 0 || (_segment$getBody2 = segment.getBody()) === null || _segment$getBody2 === void 0 ? void 0 : _segment$getBody2.dataStream) !== null && _segment$getBody$data !== void 0 ? _segment$getBody$data : "";
-	return (_BuildTextUtils$range = BuildTextUtils.range.getParagraphsInRanges(docRanges, paragraphs, dataStream)) !== null && _BuildTextUtils$range !== void 0 ? _BuildTextUtils$range : [];
+	const body = segment === null || segment === void 0 ? void 0 : segment.getBody();
+	const paragraphs = (_body$paragraphs = body === null || body === void 0 ? void 0 : body.paragraphs) !== null && _body$paragraphs !== void 0 ? _body$paragraphs : [];
+	const dataStream = (_body$dataStream = body === null || body === void 0 ? void 0 : body.dataStream) !== null && _body$dataStream !== void 0 ? _body$dataStream : "";
+	const currentParagraphs = (_BuildTextUtils$range = BuildTextUtils.range.getParagraphsInRanges(docRanges, paragraphs, dataStream)) !== null && _BuildTextUtils$range !== void 0 ? _BuildTextUtils$range : [];
+	return body == null ? currentParagraphs : resolveParagraphsForSettingPanel(currentParagraphs, body, docDataModel.getDocumentStyle());
 };
 const useFirstParagraphHorizontalAlign = (paragraph, defaultValue) => {
 	const commandService = useDependency(ICommandService);
@@ -15474,13 +16498,36 @@ const useFirstParagraphLineSpacing = (paragraph) => {
 
 //#endregion
 //#region src/views/paragraph-setting/Setting.tsx
+const ALIGNMENT_OPTIONS = [
+	{
+		label: "docs-ui.toolbar.alignLeft",
+		value: String(HorizontalAlign.LEFT),
+		icon: /* @__PURE__ */ jsx(LeftJustifyingIcon, {})
+	},
+	{
+		label: "docs-ui.toolbar.alignCenter",
+		value: String(HorizontalAlign.CENTER),
+		icon: /* @__PURE__ */ jsx(HorizontallyIcon, {})
+	},
+	{
+		label: "docs-ui.toolbar.alignRight",
+		value: String(HorizontalAlign.RIGHT),
+		icon: /* @__PURE__ */ jsx(RightJustifyingIcon, {})
+	},
+	{
+		label: "docs-ui.toolbar.alignJustify",
+		value: String(HorizontalAlign.JUSTIFIED),
+		icon: /* @__PURE__ */ jsx(AlignTextBothIcon, {})
+	}
+];
 const ParagraphSettingSection = (props) => {
-	const { title, children, first = false } = props;
+	const { titleKey, children, first = false } = props;
+	const localeService = useDependency(LocaleService);
 	return /* @__PURE__ */ jsxs("section", {
 		className: clsx(!first && "univer-mt-5"),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "univer-text-sm univer-font-medium univer-leading-5",
-			children: title
+			children: localeService.t(titleKey)
 		}), /* @__PURE__ */ jsx("div", {
 			className: "univer-mt-3",
 			children
@@ -15488,13 +16535,13 @@ const ParagraphSettingSection = (props) => {
 	});
 };
 const ParagraphSettingRow = (props) => {
-	const { label, children } = props;
+	const { labelKey, unit, children } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-grid univer-min-h-8 univer-items-center univer-gap-3",
 		style: { gridTemplateColumns: "minmax(0, 1fr) minmax(160px, 180px)" },
-		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: label
+			children: [useDependency(LocaleService).t(labelKey), unit]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "univer-w-full univer-min-w-0",
 			children
@@ -15524,30 +16571,8 @@ const AutoFocusInputNumber = (props) => {
 };
 function ParagraphSetting() {
 	const localeService = useDependency(LocaleService);
-	const alignmentOptions = useMemo(() => [
-		{
-			label: localeService.t("docs-ui.toolbar.alignLeft"),
-			value: String(HorizontalAlign.LEFT),
-			icon: /* @__PURE__ */ jsx(LeftJustifyingIcon, {})
-		},
-		{
-			label: localeService.t("docs-ui.toolbar.alignCenter"),
-			value: String(HorizontalAlign.CENTER),
-			icon: /* @__PURE__ */ jsx(HorizontallyIcon, {})
-		},
-		{
-			label: localeService.t("docs-ui.toolbar.alignRight"),
-			value: String(HorizontalAlign.RIGHT),
-			icon: /* @__PURE__ */ jsx(RightJustifyingIcon, {})
-		},
-		{
-			label: localeService.t("docs-ui.toolbar.alignJustify"),
-			value: String(HorizontalAlign.JUSTIFIED),
-			icon: /* @__PURE__ */ jsx(AlignTextBothIcon, {})
-		}
-	], []);
 	const currentParagraph = useCurrentParagraph();
-	const [horizontalAlignValue, setHorizontalAlign] = useFirstParagraphHorizontalAlign(currentParagraph, alignmentOptions[0].value);
+	const [horizontalAlignValue, setHorizontalAlign] = useFirstParagraphHorizontalAlign(currentParagraph, ALIGNMENT_OPTIONS[0].value);
 	const [indentStart, setIndentStart] = useFirstParagraphIndentStart(currentParagraph);
 	const [indentEnd, setIndentEnd] = useFirstParagraphIndentEnd(currentParagraph);
 	const [indentFirstLine, setIndentFirstLine] = useFirstParagraphIndentFirstLine(currentParagraph);
@@ -15556,18 +16581,21 @@ function ParagraphSetting() {
 	const [spaceBelow, setSpaceBelow] = useFirstParagraphSpaceBelow(currentParagraph);
 	const { lineSpacing: [lineSpacing, setLineSpacing], spacingRule: [spacingRule, setSpacingRule] } = useFirstParagraphLineSpacing(currentParagraph);
 	const lineSpaceConfig = useMemo(() => getLineSpacingInputConfig(spacingRule), [spacingRule]);
-	const lineSpacingOptions = useMemo(() => getLineSpacingRuleOptions(localeService), [localeService]);
+	const lineSpacingOptions = LINE_SPACING_RULE_OPTIONS.map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-box-border univer-w-full",
 		children: [
 			/* @__PURE__ */ jsx(ParagraphSettingSection, {
-				title: localeService.t("docs-ui.doc.paragraphSetting.alignment"),
+				titleKey: "docs-ui.doc.paragraphSetting.alignment",
 				first: true,
 				children: /* @__PURE__ */ jsx("div", {
 					className: clsx("univer-flex univer-grid-cols-4 univer-items-center univer-justify-around univer-gap-2 univer-rounded-lg univer-bg-white univer-p-1 dark:!univer-bg-gray-900", borderClassName),
-					children: alignmentOptions.map((item) => {
+					children: ALIGNMENT_OPTIONS.map((item) => {
 						return /* @__PURE__ */ jsx(Tooltip, {
-							title: item.label,
+							title: localeService.t(item.label),
 							placement: "bottom",
 							children: /* @__PURE__ */ jsx("span", {
 								className: "univer-flex univer-w-full univer-items-center univer-justify-center",
@@ -15587,33 +16615,37 @@ function ParagraphSetting() {
 				})
 			}),
 			/* @__PURE__ */ jsx(ParagraphSettingSection, {
-				title: localeService.t("docs-ui.doc.paragraphSetting.indentation"),
+				titleKey: "docs-ui.doc.paragraphSetting.indentation",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "univer-grid univer-gap-3",
 					children: [
 						/* @__PURE__ */ jsx(ParagraphSettingRow, {
-							label: `${localeService.t("docs-ui.doc.paragraphSetting.left")}(px)`,
+							labelKey: "docs-ui.doc.paragraphSetting.left",
+							unit: "(px)",
 							children: /* @__PURE__ */ jsx(AutoFocusInputNumber, {
 								value: indentStart,
 								onChange: (v) => setIndentStart(v !== null && v !== void 0 ? v : 0)
 							})
 						}),
 						/* @__PURE__ */ jsx(ParagraphSettingRow, {
-							label: `${localeService.t("docs-ui.doc.paragraphSetting.right")}(px)`,
+							labelKey: "docs-ui.doc.paragraphSetting.right",
+							unit: "(px)",
 							children: /* @__PURE__ */ jsx(AutoFocusInputNumber, {
 								value: indentEnd,
 								onChange: (v) => setIndentEnd(v !== null && v !== void 0 ? v : 0)
 							})
 						}),
 						/* @__PURE__ */ jsx(ParagraphSettingRow, {
-							label: `${localeService.t("docs-ui.doc.paragraphSetting.firstLine")}(px)`,
+							labelKey: "docs-ui.doc.paragraphSetting.firstLine",
+							unit: "(px)",
 							children: /* @__PURE__ */ jsx(AutoFocusInputNumber, {
 								value: indentFirstLine,
 								onChange: (v) => setIndentFirstLine(v !== null && v !== void 0 ? v : 0)
 							})
 						}),
 						/* @__PURE__ */ jsx(ParagraphSettingRow, {
-							label: `${localeService.t("docs-ui.doc.paragraphSetting.hanging")}(px)`,
+							labelKey: "docs-ui.doc.paragraphSetting.hanging",
+							unit: "(px)",
 							children: /* @__PURE__ */ jsx(AutoFocusInputNumber, {
 								value: hanging,
 								onChange: (v) => setHanging(v !== null && v !== void 0 ? v : 0)
@@ -15623,26 +16655,28 @@ function ParagraphSetting() {
 				})
 			}),
 			/* @__PURE__ */ jsx(ParagraphSettingSection, {
-				title: localeService.t("docs-ui.doc.paragraphSetting.spacing"),
+				titleKey: "docs-ui.doc.paragraphSetting.spacing",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "univer-grid univer-gap-3",
 					children: [
 						/* @__PURE__ */ jsx(ParagraphSettingRow, {
-							label: `${localeService.t("docs-ui.doc.paragraphSetting.before")}(px)`,
+							labelKey: "docs-ui.doc.paragraphSetting.before",
+							unit: "(px)",
 							children: /* @__PURE__ */ jsx(AutoFocusInputNumber, {
 								value: spaceAbove,
 								onChange: (v) => setSpaceAbove(v !== null && v !== void 0 ? v : 0)
 							})
 						}),
 						/* @__PURE__ */ jsx(ParagraphSettingRow, {
-							label: `${localeService.t("docs-ui.doc.paragraphSetting.after")}(px)`,
+							labelKey: "docs-ui.doc.paragraphSetting.after",
+							unit: "(px)",
 							children: /* @__PURE__ */ jsx(AutoFocusInputNumber, {
 								value: spaceBelow,
 								onChange: (v) => setSpaceBelow(v !== null && v !== void 0 ? v : 0)
 							})
 						}),
 						/* @__PURE__ */ jsx(ParagraphSettingRow, {
-							label: localeService.t("docs-ui.doc.paragraphSetting.lineSpace"),
+							labelKey: "docs-ui.doc.paragraphSetting.lineSpace",
 							children: /* @__PURE__ */ jsxs("div", {
 								className: "univer-flex univer-w-full univer-flex-col univer-gap-2",
 								children: [/* @__PURE__ */ jsx(Select, {
@@ -15697,26 +16731,6 @@ function ParagraphSettingIndex() {
 	return /* @__PURE__ */ jsx(ParagraphSetting, {}, key);
 }
 
-//#endregion
-//#region src/views/paragraph-menu/component-keys.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const DOC_PARAGRAPH_MENU_COMPONENT_KEY = "doc.paragraph.menu";
-const DOC_TABLE_BLOCK_MENU_COMPONENT_KEY = "doc.table-block.menu";
-
 //#endregion
 //#region src/views/float-toolbar/FloatToolbar.tsx
 const DEFAULT_AVALIABLE_MENUS = [
@@ -15807,6 +16821,9 @@ let DocFloatMenuService = class DocFloatMenuService extends Disposable {
 	get floatMenu() {
 		return this._floatMenu;
 	}
+	hideFloatMenu() {
+		this._hideFloatMenu();
+	}
 	_registerFloatMenu() {
 		this.disposeWithMe(this._componentManager.register(FLOAT_MENU_COMPONENT_KEY, FloatToolbar));
 	}
@@ -16462,15 +17479,10 @@ function isParagraphInTable(documentDataModel, paragraphStart) {
 	return ((_documentDataModel$ge = (_documentDataModel$ge2 = documentDataModel.getBody()) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.tables) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : []).some((table) => paragraphStart > table.startIndex && paragraphStart < table.endIndex);
 }
 function getParagraphMoveRange(documentDataModel, paragraph, cellRange) {
-	var _documentDataModel$ge3, _documentDataModel$ge4;
-	const paragraphs = [...(_documentDataModel$ge3 = (_documentDataModel$ge4 = documentDataModel.getBody()) === null || _documentDataModel$ge4 === void 0 ? void 0 : _documentDataModel$ge4.paragraphs) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : []].sort((left, right) => left.startIndex - right.startIndex);
-	const index = paragraphs.findIndex((item) => item.startIndex === paragraph.startIndex);
-	const previousParagraph = index > 0 ? paragraphs.slice(0, index).reverse().find((item) => {
-		if (!cellRange) return true;
-		return item.startIndex > cellRange.startOffset && item.startIndex < cellRange.endOffset;
-	}) : null;
+	const body = documentDataModel.getBody();
+	const paragraphStartOffset = body ? getParagraphContentStartOffset(body, paragraph) : 0;
 	return {
-		startOffset: previousParagraph ? previousParagraph.startIndex + 1 : cellRange ? cellRange.startOffset + 1 : 0,
+		startOffset: cellRange ? Math.max(paragraphStartOffset, cellRange.startOffset + 1) : paragraphStartOffset,
 		endOffset: paragraph.startIndex + 1
 	};
 }
@@ -16524,8 +17536,8 @@ function unionRects(rects) {
 	}));
 }
 function getParagraphBlockRange(documentDataModel, paragraph) {
-	var _documentDataModel$ge5, _documentDataModel$ge6;
-	return ((_documentDataModel$ge5 = (_documentDataModel$ge6 = documentDataModel.getBody()) === null || _documentDataModel$ge6 === void 0 ? void 0 : _documentDataModel$ge6.blockRanges) !== null && _documentDataModel$ge5 !== void 0 ? _documentDataModel$ge5 : []).find((range) => Math.max(paragraph.paragraphStart, range.startIndex) <= Math.min(paragraph.paragraphEnd, range.endIndex));
+	var _documentDataModel$ge3, _documentDataModel$ge4;
+	return ((_documentDataModel$ge3 = (_documentDataModel$ge4 = documentDataModel.getBody()) === null || _documentDataModel$ge4 === void 0 ? void 0 : _documentDataModel$ge4.blockRanges) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : []).find((range) => Math.max(paragraph.paragraphStart, range.startIndex) <= Math.min(paragraph.paragraphEnd, range.endIndex));
 }
 function getBlockRangeAnchorRect(docEventManagerService, blockRange, fallbackParagraph) {
 	var _bounds$0$firstLine, _bounds$;
@@ -16544,8 +17556,12 @@ function getBlockRangeAnchorRect(docEventManagerService, blockRange, fallbackPar
 
 //#endregion
 //#region src/views/ParagraphMenu.tsx
-function getParagraphMenuPopupDirection(anchorLeft, menuWidth = 212, viewportPadding = 8) {
-	return anchorLeft - menuWidth < viewportPadding ? "right" : "left";
+function getParagraphMenuPopupDirection(anchorLeft, menuWidth = 212, viewportPadding = 8, options = {}) {
+	const { anchorRight = anchorLeft, direction = "ltr", viewportWidth = Number.POSITIVE_INFINITY } = options;
+	const hasLeftSpace = anchorLeft - menuWidth >= viewportPadding;
+	const hasRightSpace = anchorRight + menuWidth + viewportPadding <= viewportWidth;
+	if (direction === "rtl") return hasRightSpace || !hasLeftSpace ? "right" : "left";
+	return hasLeftSpace || !hasRightSpace ? "left" : "right";
 }
 const PARAGRAPH_MENU_HOVER_OPEN_DELAY = 800;
 const PARAGRAPH_MENU_HOVER_HIDE_DELAY = 240;
@@ -16888,19 +17904,75 @@ function unwrapBlockRangeBody(documentBody, blockRange) {
 		}
 	};
 }
-function buildReplaceBodyActions(previousBody, nextBody) {
-	const jsonX = JSONX.getInstance();
-	return [
-		jsonX.replaceOp(["body", "dataStream"], previousBody.dataStream, nextBody.dataStream),
-		jsonX.replaceOp(["body", "paragraphs"], previousBody.paragraphs, nextBody.paragraphs),
-		jsonX.replaceOp(["body", "sectionBreaks"], previousBody.sectionBreaks, nextBody.sectionBreaks),
-		jsonX.replaceOp(["body", "textRuns"], previousBody.textRuns, nextBody.textRuns),
-		jsonX.replaceOp(["body", "customRanges"], previousBody.customRanges, nextBody.customRanges),
-		jsonX.replaceOp(["body", "customDecorations"], previousBody.customDecorations, nextBody.customDecorations),
-		jsonX.replaceOp(["body", "customBlocks"], previousBody.customBlocks, nextBody.customBlocks),
-		jsonX.replaceOp(["body", "tables"], previousBody.tables, nextBody.tables),
-		jsonX.replaceOp(["body", "blockRanges"], previousBody.blockRanges, nextBody.blockRanges)
-	].reduce((acc, action) => JSONX.compose(acc, action), null);
+const UNWRAP_BLOCK_BODY_PATCH_KEYS = [
+	"paragraphs",
+	"sectionBreaks",
+	"textRuns",
+	"customRanges",
+	"customDecorations",
+	"customBlocks",
+	"tables",
+	"columnGroups",
+	"blockRanges"
+];
+function buildUnwrapBlockRangeActions(previousBody, nextBody, blockRange) {
+	const endTokenOffset = getEndTokenOffset(previousBody, blockRange);
+	const textX = new TextX();
+	textX.retain(blockRange.startIndex);
+	textX.delete(1);
+	textX.retain(Math.max(0, endTokenOffset - blockRange.startIndex - 1));
+	textX.delete(1);
+	const textAction = JSONX.getInstance().editOp(textX.serialize(), ["body"]);
+	const intermediateBody = Tools.deepClone(previousBody);
+	TextX.apply(intermediateBody, textX.serialize());
+	const rawActions = [textAction];
+	collectUnwrapBlockBodyPatchActions(intermediateBody, nextBody, rawActions);
+	return rawActions.reduce((acc, action) => JSONX.compose(acc, action), null);
+}
+function collectUnwrapBlockBodyPatchActions(previousBody, nextBody, actions) {
+	for (const key of UNWRAP_BLOCK_BODY_PATCH_KEYS) collectUnwrapPatchActions(JSONX.getInstance(), ["body", key], previousBody[key], nextBody[key], actions);
+}
+function collectUnwrapPatchActions(jsonX, path, oldValue, newValue, actions) {
+	if (isEmptyArrayEquivalent(oldValue, newValue) || Tools.diffValue(oldValue, newValue)) return;
+	if (oldValue == null) {
+		actions.push(jsonX.insertOp(path, newValue));
+		return;
+	}
+	if (newValue == null) {
+		actions.push(jsonX.removeOp(path, oldValue));
+		return;
+	}
+	if (Array.isArray(oldValue) && Array.isArray(newValue)) {
+		collectUnwrapArrayPatchActions(jsonX, path, oldValue, newValue, actions);
+		return;
+	}
+	if (isPlainObject(oldValue) && isPlainObject(newValue)) {
+		(/* @__PURE__ */ new Set([...Object.keys(oldValue), ...Object.keys(newValue)])).forEach((key) => collectUnwrapPatchActions(jsonX, [...path, key], oldValue[key], newValue[key], actions));
+		return;
+	}
+	actions.push(jsonX.replaceOp(path, oldValue, newValue));
+}
+function collectUnwrapArrayPatchActions(jsonX, path, oldItems, newItems, actions) {
+	if (oldItems.length === newItems.length) {
+		oldItems.forEach((item, index) => collectUnwrapPatchActions(jsonX, [...path, index], item, newItems[index], actions));
+		return;
+	}
+	let prefix = 0;
+	while (prefix < oldItems.length && prefix < newItems.length && Tools.diffValue(oldItems[prefix], newItems[prefix])) prefix++;
+	let oldSuffix = oldItems.length - 1;
+	let newSuffix = newItems.length - 1;
+	while (oldSuffix >= prefix && newSuffix >= prefix && Tools.diffValue(oldItems[oldSuffix], newItems[newSuffix])) {
+		oldSuffix--;
+		newSuffix--;
+	}
+	for (let index = oldSuffix; index >= prefix; index--) actions.push(jsonX.removeOp([...path, index], oldItems[index]));
+	for (let index = prefix; index <= newSuffix; index++) actions.push(jsonX.insertOp([...path, index], newItems[index]));
+}
+function isPlainObject(value) {
+	return value != null && typeof value === "object" && !Array.isArray(value);
+}
+function isEmptyArrayEquivalent(oldValue, newValue) {
+	return oldValue == null && Array.isArray(newValue) && newValue.length === 0 || newValue == null && Array.isArray(oldValue) && oldValue.length === 0;
 }
 function getTargetSelectionRange(target, paragraph) {
 	if (!target) return getParagraphMenuTargetRange(paragraph);
@@ -16953,7 +18025,9 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const openMenuRef = useRef(() => void 0);
 	const hoverOpenSchedulerRef = useRef(createParagraphMenuHoverOpenScheduler(() => openMenuRef.current()));
 	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
 	const docSelectionManagerService = useDependency(DocSelectionManagerService);
+	const direction = useObservable(localeService.direction$, "ltr");
 	const docClipboardService = useDependency(IDocClipboardService);
 	const docContentInsertService = useDependency(DocContentInsertService);
 	const docBlockMoveValidatorService = useDependency(DocBlockMoveValidatorService);
@@ -17001,13 +18075,18 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		bottom: 0
 	}), []);
 	const updateAnchorRect = () => {
-		var _anchorRef$current, _boundingRect$left, _boundingRect$right, _boundingRect$top, _boundingRect$bottom;
+		var _anchorRef$current, _boundingRect$left, _boundingRect$right, _anchorRef$current$ow, _anchorRef$current2, _boundingRect$top, _boundingRect$bottom;
 		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;
-		setMenuDirection(getParagraphMenuPopupDirection(left));
+		const right = (_boundingRect$right = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.right) !== null && _boundingRect$right !== void 0 ? _boundingRect$right : 0;
+		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
+		}));
 		const nextAnchorRect = {
 			left,
-			right: (_boundingRect$right = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.right) !== null && _boundingRect$right !== void 0 ? _boundingRect$right : 0,
+			right,
 			top: (_boundingRect$top = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.top) !== null && _boundingRect$top !== void 0 ? _boundingRect$top : 0,
 			bottom: (_boundingRect$bottom = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.bottom) !== null && _boundingRect$bottom !== void 0 ? _boundingRect$bottom : 0
 		};
@@ -17089,7 +18168,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		if (!latestTarget || latestTarget.kind !== "blockRange" || !latestTarget.blockRange || !(doc === null || doc === void 0 ? void 0 : doc.getBody())) return null;
 		const previousBody = doc.getBody();
 		const { body, range } = unwrapBlockRangeBody(previousBody, latestTarget.blockRange);
-		const actions = buildReplaceBodyActions(previousBody, body);
+		const actions = buildUnwrapBlockRangeActions(previousBody, body, latestTarget.blockRange);
 		const segmentId = (_activeParagraphBound = activeParagraphBound === null || activeParagraphBound === void 0 ? void 0 : activeParagraphBound.segmentId) !== null && _activeParagraphBound !== void 0 ? _activeParagraphBound : "";
 		if (!await commandService.executeCommand(RichTextEditingMutation.id, {
 			unitId: popup.unitId,
@@ -17134,14 +18213,12 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		}
 		if (commandId === "doc.menu.paragraph-t.insert-below.command") {
 			if (!(latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.moveRange)) return;
-			const insertRange = {
+			docContentInsertService.setInsertRange({
+				unitId: popup.unitId,
 				startOffset: latestTarget.moveRange.endOffset,
 				endOffset: latestTarget.moveRange.endOffset,
-				collapsed: true,
 				segmentId: activeParagraphBound === null || activeParagraphBound === void 0 ? void 0 : activeParagraphBound.segmentId
-			};
-			replaceSelection(insertRange);
-			await commandService.executeCommand(BreakLineCommand.id, { textRange: insertRange });
+			});
 			const wrappedCommandId = typeof (commandParams === null || commandParams === void 0 ? void 0 : commandParams.commandId) === "string" ? commandParams.commandId : void 0;
 			if (wrappedCommandId) await commandService.executeCommand(wrappedCommandId);
 			finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
@@ -17446,6 +18523,222 @@ function DragHandleDotsIcon() {
 	});
 }
 
+//#endregion
+//#region src/views/section-setting/use-section-setting.ts
+const DEFAULT_SECTION_COLUMN_GAP = 18;
+function getCommonValue(values) {
+	const first = values[0];
+	return values.every((value) => value === first) ? first : void 0;
+}
+function getSectionColumnCount(section) {
+	var _section$columnProper;
+	return ((_section$columnProper = section.columnProperties) === null || _section$columnProper === void 0 ? void 0 : _section$columnProper.length) || 1;
+}
+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) {
+	return {
+		columnCount: getCommonValue(sections.map(getSectionColumnCount)),
+		columnGap: getCommonValue(sections.map(getSectionColumnGap)),
+		separatorType: getCommonValue(sections.map((section) => {
+			var _section$columnSepara;
+			return (_section$columnSepara = section.columnSeparatorType) !== null && _section$columnSepara !== void 0 ? _section$columnSepara : ColumnSeparatorType.NONE;
+		})),
+		sectionType: getCommonValue(sections.map((section) => {
+			var _section$sectionType;
+			return (_section$sectionType = section.sectionType) !== null && _section$sectionType !== void 0 ? _section$sectionType : SectionType.SECTION_TYPE_UNSPECIFIED;
+		}))
+	};
+}
+function createSectionColumnUpdates(sections, documentStyle, change) {
+	return sections.map((section) => {
+		const columnCount = "columnCount" in change ? change.columnCount : getSectionColumnCount(section);
+		const columnGap = "columnGap" in change ? change.columnGap : getSectionColumnGap(section);
+		return {
+			sectionId: section.sectionId,
+			config: { columnProperties: createSectionColumnProperties(documentStyle, section, columnCount, columnGap) }
+		};
+	});
+}
+function getSelectedSections(documentDataModel, ranges) {
+	const body = documentDataModel.getBody();
+	if (!body || ranges.length === 0 || ranges.some((range) => Boolean(range.segmentId))) return [];
+	const sections = getTopLevelSectionBreaks(body);
+	return sections.filter((section, index) => {
+		const sectionStart = index === 0 ? 0 : sections[index - 1].startIndex + 1;
+		return ranges.some((range) => {
+			const rangeStart = Math.min(range.startOffset, range.endOffset);
+			const rangeEnd = Math.max(range.startOffset, range.endOffset);
+			return rangeStart <= section.startIndex && rangeEnd >= sectionStart;
+		});
+	});
+}
+function useSectionSetting() {
+	const commandService = useDependency(ICommandService);
+	const instanceService = useDependency(IUniverInstanceService);
+	const selectionManager = useDependency(DocSelectionManagerService);
+	const documentDataModel = useObservable(useMemo(() => instanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), [instanceService]));
+	useObservable(selectionManager.textSelection$);
+	useObservable(documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.change$);
+	const ranges = selectionManager.getDocRanges();
+	const sections = (documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDocumentStyle().documentFlavor) === DocumentFlavor.TRADITIONAL ? getSelectedSections(documentDataModel, ranges) : [];
+	const values = getSectionSettingValues(sections);
+	const update = (updates) => {
+		if (!documentDataModel || updates.length === 0) return Promise.resolve(false);
+		return commandService.executeCommand(UpdateDocumentSectionCommand.id, {
+			unitId: documentDataModel.getUnitId(),
+			updates
+		});
+	};
+	const updateAll = (config) => update(sections.map((section) => ({
+		sectionId: section.sectionId,
+		config
+	})));
+	return {
+		valid: Boolean(documentDataModel && sections.length > 0),
+		selectedCount: sections.length,
+		...values,
+		setColumnCount(value) {
+			const next = Math.max(1, Math.round(value));
+			return update(documentDataModel ? createSectionColumnUpdates(sections, documentDataModel.getDocumentStyle(), { columnCount: next }) : []);
+		},
+		setColumnGap(value) {
+			const next = Math.max(0, value);
+			return update(documentDataModel ? createSectionColumnUpdates(sections, documentDataModel.getDocumentStyle(), { columnGap: next }) : []);
+		},
+		setSeparatorType(value) {
+			return updateAll({ columnSeparatorType: value });
+		},
+		setSectionType(value) {
+			return updateAll({ sectionType: value });
+		}
+	};
+}
+
+//#endregion
+//#region src/views/section-setting/Setting.tsx
+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", {
+			className: "univer-min-w-0 univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-text-gray-100",
+			children: props.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "univer-w-full univer-min-w-0",
+			children: props.children
+		})]
+	});
+}
+function SectionSetting() {
+	const localeService = useDependency(LocaleService);
+	const controller = useDependency(DocSectionSettingController);
+	const setting = useSectionSetting();
+	useEffect(() => {
+		if (!setting.valid) controller.closePanel();
+	}, [controller, setting.valid]);
+	if (!setting.valid) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		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: localeService.t("docs-ui.doc.sectionSetting.selectedSections", String(setting.selectedCount))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "univer-grid univer-gap-3",
+			children: [
+				/* @__PURE__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.columnCount"),
+					children: /* @__PURE__ */ jsx(InputNumber, {
+						className: "univer-w-full",
+						min: 1,
+						max: 12,
+						step: 1,
+						precision: 0,
+						value: setting.columnCount,
+						onChange: (value) => value != null && setting.setColumnCount(value)
+					})
+				}),
+				/* @__PURE__ */ jsx(SettingRow, {
+					label: `${localeService.t("docs-ui.doc.sectionSetting.columnGap")}(px)`,
+					children: /* @__PURE__ */ jsx(InputNumber, {
+						className: "univer-w-full",
+						min: 0,
+						max: 1e3,
+						step: 1,
+						precision: 1,
+						value: setting.columnGap,
+						onChange: (value) => value != null && setting.setColumnGap(value)
+					})
+				}),
+				/* @__PURE__ */ jsx(SettingRow, {
+					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: localeService.t("docs-ui.doc.sectionSetting.none"),
+							value: String(ColumnSeparatorType.NONE)
+						}, {
+							label: localeService.t("docs-ui.doc.sectionSetting.betweenColumns"),
+							value: String(ColumnSeparatorType.BETWEEN_EACH_COLUMN)
+						}],
+						onChange: (value) => setting.setSeparatorType(Number(value))
+					})
+				}),
+				/* @__PURE__ */ jsx(SettingRow, {
+					label: localeService.t("docs-ui.doc.sectionSetting.sectionStart"),
+					children: /* @__PURE__ */ jsx(Select, {
+						className: "univer-w-full",
+						value: setting.sectionType == null ? "" : String(setting.sectionType),
+						options: [
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.unspecified"),
+								value: String(SectionType.SECTION_TYPE_UNSPECIFIED)
+							},
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.continuous"),
+								value: String(SectionType.CONTINUOUS)
+							},
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.nextPage"),
+								value: String(SectionType.NEXT_PAGE)
+							},
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.evenPage"),
+								value: String(SectionType.EVEN_PAGE)
+							},
+							{
+								label: localeService.t("docs-ui.doc.sectionSetting.oddPage"),
+								value: String(SectionType.ODD_PAGE)
+							}
+						],
+						onChange: (value) => setting.setSectionType(Number(value))
+					})
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+//#region src/views/section-setting/index.tsx
+function SectionSettingIndex() {
+	const commandService = useDependency(ICommandService);
+	useObservable(useDependency(LocaleService).currentLocale$);
+	const [key, setKey] = useState(() => generateRandomId(4));
+	useEffect(() => {
+		const disposable = commandService.onCommandExecuted((info) => {
+			if (info.id === SetTextSelectionsOperation.id) {
+				if (info.params.ranges.length > 0) setKey(generateRandomId(4));
+			} else if (info.id === RichTextEditingMutation.id) setKey(generateRandomId(4));
+		});
+		return () => disposable.dispose();
+	}, [commandService]);
+	return /* @__PURE__ */ jsx(SectionSetting, {}, key);
+}
+
 //#endregion
 //#region src/views/table/create/TableCreate.tsx
 const DocCreateTableConfirm = ({ handleRowColChange, tableCreateParams }) => {
@@ -17549,6 +18842,8 @@ let ComponentsController = class ComponentsController extends Disposable {
 			KeyboardIcon,
 			LeftInsertColumnDoubleIcon,
 			LeftJustifyingIcon,
+			LineIndentDecreaseIcon,
+			LineIndentIncreaseIcon,
 			MenuIcon,
 			TextTypeIcon,
 			NoColorDoubleIcon,
@@ -17600,6 +18895,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 	_registerComponents() {
 		if (!this._componentManager.get("COMPONENT_DOC_HEADER_FOOTER_PANEL")) this.disposeWithMe(this._componentManager.register(COMPONENT_DOC_HEADER_FOOTER_PANEL, DocHeaderFooterPanel));
 		this.disposeWithMe(this._componentManager.register(paragraphSettingIndexKey, ParagraphSettingIndex));
+		this.disposeWithMe(this._componentManager.register(DOC_SECTION_SETTING_COMPONENT, SectionSettingIndex));
 		[
 			[BULLET_LIST_TYPE_COMPONENT, BulletListTypePicker],
 			[ORDER_LIST_TYPE_COMPONENT, OrderListTypePicker],
@@ -17837,48 +19133,33 @@ var TextBubbleShape = class TextBubbleShape extends Shape {
 //#region src/controllers/doc-header-footer.controller.ts
 const HEADER_FOOTER_STROKE_COLOR = "rgba(58, 96, 247, 1)";
 const HEADER_FOOTER_FILL_COLOR = "rgba(58, 96, 247, 0.08)";
-function checkCreateHeaderFooterType(viewModel, editArea, segmentPage) {
-	const { documentStyle } = viewModel.getDataModel().getSnapshot();
-	const { defaultHeaderId, defaultFooterId, evenPageHeaderId, evenPageFooterId, firstPageHeaderId, firstPageFooterId, evenAndOddHeaders, useFirstPageHeaderFooter } = documentStyle;
-	switch (editArea) {
-		case DocumentEditArea.BODY: return {
-			createType: null,
-			headerFooterId: null
-		};
-		case DocumentEditArea.HEADER:
-			if (useFirstPageHeaderFooter === BooleanNumber.TRUE && !firstPageHeaderId) return {
-				createType: HeaderFooterType.FIRST_PAGE_HEADER,
-				headerFooterId: null
-			};
-			if (evenAndOddHeaders === BooleanNumber.TRUE && segmentPage % 2 === 0 && !evenPageHeaderId) return {
-				createType: HeaderFooterType.EVEN_PAGE_HEADER,
-				headerFooterId: null
-			};
-			return defaultHeaderId ? {
-				createType: null,
-				headerFooterId: defaultHeaderId
-			} : {
-				createType: HeaderFooterType.DEFAULT_HEADER,
-				headerFooterId: null
-			};
-		case DocumentEditArea.FOOTER:
-			if (useFirstPageHeaderFooter === BooleanNumber.TRUE && !firstPageFooterId) return {
-				createType: HeaderFooterType.FIRST_PAGE_FOOTER,
-				headerFooterId: null
-			};
-			if (evenAndOddHeaders === BooleanNumber.TRUE && segmentPage % 2 === 0 && !evenPageFooterId) return {
-				createType: HeaderFooterType.EVEN_PAGE_FOOTER,
-				headerFooterId: null
-			};
-			return defaultFooterId ? {
-				createType: null,
-				headerFooterId: defaultFooterId
-			} : {
-				createType: HeaderFooterType.DEFAULT_FOOTER,
-				headerFooterId: null
-			};
-		default: throw new Error(`Invalid editArea: ${editArea}`);
-	}
+function checkCreateHeaderFooterType(viewModel, editArea, segmentPage, page) {
+	const { sectionId, config } = getDocPageSectionContext(viewModel.getDataModel().getSnapshot(), page);
+	const { defaultHeaderId, defaultFooterId, evenPageHeaderId, evenPageFooterId, firstPageHeaderId, firstPageFooterId, evenAndOddHeaders, useFirstPageHeaderFooter } = config;
+	const isFirstPage = page ? page.pageNumber === page.pageNumberStart : segmentPage === 0;
+	const isEvenPage = page ? page.pageNumber % 2 === 0 : segmentPage % 2 === 1;
+	if (editArea === DocumentEditArea.BODY) return {
+		createType: null,
+		headerFooterId: null,
+		sectionId
+	};
+	const isHeader = editArea === DocumentEditArea.HEADER;
+	if (!isHeader && editArea !== DocumentEditArea.FOOTER) throw new Error(`Invalid editArea: ${editArea}`);
+	const variants = isHeader ? {
+		first: [firstPageHeaderId, HeaderFooterType.FIRST_PAGE_HEADER],
+		even: [evenPageHeaderId, HeaderFooterType.EVEN_PAGE_HEADER],
+		default: [defaultHeaderId, HeaderFooterType.DEFAULT_HEADER]
+	} : {
+		first: [firstPageFooterId, HeaderFooterType.FIRST_PAGE_FOOTER],
+		even: [evenPageFooterId, HeaderFooterType.EVEN_PAGE_FOOTER],
+		default: [defaultFooterId, HeaderFooterType.DEFAULT_FOOTER]
+	};
+	const [headerFooterId, createType] = useFirstPageHeaderFooter === BooleanNumber.TRUE && isFirstPage ? variants.first : evenAndOddHeaders === BooleanNumber.TRUE && isEvenPage ? variants.even : variants.default;
+	return {
+		createType: headerFooterId ? null : createType,
+		headerFooterId: headerFooterId !== null && headerFooterId !== void 0 ? headerFooterId : null,
+		sectionId
+	};
 }
 let DocHeaderFooterController = class DocHeaderFooterController extends Disposable {
 	constructor(_context, _commandService, _editorService, _instanceSrv, _renderManagerService, _docSkeletonManagerService, _docSelectionRenderService, _localeService) {
@@ -17924,6 +19205,7 @@ let DocHeaderFooterController = class DocHeaderFooterController extends Disposab
 	_initialMain(unitId) {
 		const { document } = neoGetDocObject(this._context);
 		this.disposeWithMe(document.onDblclick$.subscribeEvent(async (evt) => {
+			var _skeleton$getSkeleton;
 			if (this._isEditorReadOnly(unitId)) return;
 			if (!this._isTraditionalMode()) return;
 			const { offsetX, offsetY } = evt;
@@ -17934,9 +19216,9 @@ let DocHeaderFooterController = class DocHeaderFooterController extends Disposab
 			const skeleton = this._docSkeletonManagerService.getSkeleton();
 			const preEditArea = viewModel.getEditArea();
 			const { editArea, pageNumber } = skeleton.findEditAreaByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop);
-			if (preEditArea === editArea) return;
+			if (preEditArea === editArea && (editArea === DocumentEditArea.BODY || this._docSelectionRenderService.getSegmentPage() === pageNumber)) return;
 			viewModel.setEditArea(editArea);
-			const { createType, headerFooterId } = checkCreateHeaderFooterType(viewModel, editArea, pageNumber);
+			const { createType, headerFooterId, sectionId } = checkCreateHeaderFooterType(viewModel, editArea, pageNumber, (_skeleton$getSkeleton = skeleton.getSkeletonData()) === null || _skeleton$getSkeleton === void 0 ? void 0 : _skeleton$getSkeleton.pages[pageNumber]);
 			if (editArea === DocumentEditArea.BODY) {
 				this._docSelectionRenderService.setSegment("");
 				this._docSelectionRenderService.setSegmentPage(-1);
@@ -17948,7 +19230,8 @@ let DocHeaderFooterController = class DocHeaderFooterController extends Disposab
 				await this._commandService.executeCommand(CoreHeaderFooterCommand.id, {
 					unitId,
 					createType,
-					segmentId
+					segmentId,
+					sectionId
 				});
 			} else if (headerFooterId != null) {
 				this._docSelectionRenderService.setSegment(headerFooterId);
@@ -18560,13 +19843,10 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 			line: newLine,
 			offsetLeft
 		};
-		if (this._isColumnGroupContentPage(page)) {
-			const exitTarget = this._getColumnGroupExitLineTarget(page, direction, offsetLeft);
-			if (exitTarget != null) return exitTarget;
-		}
+		if (this._isColumnGroupContentPage(page)) return this._getColumnGroupExitLineTarget(page, direction, offsetLeft);
 		if (this._isTableCellContentPage(page)) return this._getAdjacentTableCellLineTarget(page, direction, offsetLeft);
 		const skeleton = page.parent;
-		if (skeleton == null) return;
+		if ((skeleton === null || skeleton === void 0 ? void 0 : skeleton.pages) == null) return;
 		const currentPageIndex = skeleton.pages.indexOf(page);
 		if (currentPageIndex === -1) return;
 		if (direction === true) {
@@ -19193,13 +20473,14 @@ DocIMEInputController = __decorate([
 //#endregion
 //#region src/controllers/render-controllers/doc-input.controller.ts
 let DocInputController = class DocInputController extends Disposable {
-	constructor(_context, _docSelectionRenderService, _docSkeletonManagerService, _commandService, _docMenuStyleService) {
+	constructor(_context, _docSelectionRenderService, _docSkeletonManagerService, _commandService, _docMenuStyleService, _embedInteractionBoundaryService, _embedRuntimeFocusCoordinator) {
 		super();
 		this._context = _context;
 		this._docSelectionRenderService = _docSelectionRenderService;
 		this._docSkeletonManagerService = _docSkeletonManagerService;
 		this._commandService = _commandService;
 		this._docMenuStyleService = _docMenuStyleService;
+		this._embedRuntimeFocusCoordinator = _embedRuntimeFocusCoordinator;
 		_defineProperty(this, "_onInputSubscription", void 0);
 		this._init();
 	}
@@ -19219,6 +20500,7 @@ let DocInputController = class DocInputController extends Disposable {
 			const { event, content = "", activeRange } = config;
 			const e = event;
 			if (e.defaultPrevented) return;
+			if (!SHEET_EDITOR_UNITS.includes(unitId) && this._isEmbedChildInputActive(unitId, e)) return;
 			const skeleton = this._docSkeletonManagerService.getSkeleton();
 			if (e.data == null || skeleton == null || activeRange == null) return;
 			const { segmentId } = activeRange;
@@ -19255,12 +20537,21 @@ let DocInputController = class DocInputController extends Disposable {
 			if (content === " ") await this._commandService.executeCommand(AfterSpaceCommand.id);
 		});
 	}
+	_isEmbedChildInputActive(unitId, event) {
+		var _this$_embedRuntimeFo, _this$_embedRuntimeFo2, _this$_embedRuntimeFo3;
+		if ((_this$_embedRuntimeFo = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo === void 0 ? void 0 : _this$_embedRuntimeFo.isChildUnitRuntimeEvent(unitId, event.target, event)) return false;
+		if ((_this$_embedRuntimeFo2 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo2 === void 0 ? void 0 : _this$_embedRuntimeFo2.isChildUnitInActiveSession(unitId)) return false;
+		if ((_this$_embedRuntimeFo3 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo3 === void 0 ? void 0 : _this$_embedRuntimeFo3.shouldSuppressHostInteraction(unitId, event.target, event)) return true;
+		return false;
+	}
 };
 DocInputController = __decorate([
 	__decorateParam(1, Inject(DocSelectionRenderService)),
 	__decorateParam(2, Inject(DocSkeletonManagerService)),
 	__decorateParam(3, ICommandService),
-	__decorateParam(4, Inject(DocMenuStyleService))
+	__decorateParam(4, Inject(DocMenuStyleService)),
+	__decorateParam(5, Optional(IDocEmbedInteractionBoundaryService)),
+	__decorateParam(6, Optional(IDocEmbedRuntimeFocusCoordinator))
 ], DocInputController);
 
 //#endregion
@@ -19288,7 +20579,7 @@ DocResizeRenderController = __decorate([__decorateParam(1, Inject(DocPageLayoutS
 //#endregion
 //#region src/controllers/render-controllers/doc-selection-render.controller.ts
 let DocSelectionRenderController = class DocSelectionRenderController extends Disposable {
-	constructor(_context, _commandService, _editorService, _instanceSrv, _docSelectionRenderService, _docSkeletonManagerService, _docSelectionManagerService) {
+	constructor(_context, _commandService, _editorService, _instanceSrv, _docSelectionRenderService, _docSkeletonManagerService, _docSelectionManagerService, _embedInteractionBoundaryService, _embedRuntimeFocusCoordinator) {
 		super();
 		this._context = _context;
 		this._commandService = _commandService;
@@ -19297,6 +20588,7 @@ let DocSelectionRenderController = class DocSelectionRenderController extends Di
 		this._docSelectionRenderService = _docSelectionRenderService;
 		this._docSkeletonManagerService = _docSkeletonManagerService;
 		this._docSelectionManagerService = _docSelectionManagerService;
+		this._embedRuntimeFocusCoordinator = _embedRuntimeFocusCoordinator;
 		_defineProperty(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
 		this._initialize();
 	}
@@ -19328,6 +20620,7 @@ let DocSelectionRenderController = class DocSelectionRenderController extends Di
 	_syncSelection() {
 		this.disposeWithMe(this._docSelectionRenderService.textSelectionInner$.subscribe((params) => {
 			if (params == null) return;
+			if (!isInternalEditorID(this._context.unitId) && this._isEmbedChildInteractionActive(this._context.unitId)) return;
 			this._docSelectionManagerService.__replaceTextRangesWithNoRefresh(params, {
 				unitId: this._context.unitId,
 				subUnitId: this._context.unitId
@@ -19346,8 +20639,10 @@ let DocSelectionRenderController = class DocSelectionRenderController extends Di
 		}));
 		this.disposeWithMe(document.onPointerDown$.subscribeEvent((evt, state) => {
 			if (this._isEditorReadOnly(unitId)) return;
+			if (this._isEmbedInteractionEvent(evt, unitId)) return;
 			const docDataModel = this._instanceSrv.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 			if ((docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getUnitId()) !== unitId) this._instanceSrv.setCurrentUnitForType(unitId);
+			this._instanceSrv.focusUnit(unitId);
 			const skeleton = this._docSkeletonManagerService.getSkeleton();
 			const { offsetX, offsetY } = evt;
 			const coord = this._getTransformCoordForDocumentOffset(offsetX, offsetY);
@@ -19380,10 +20675,12 @@ let DocSelectionRenderController = class DocSelectionRenderController extends Di
 		}));
 		this.disposeWithMe(document.onDblclick$.subscribeEvent((evt) => {
 			if (this._isEditorReadOnly(unitId)) return;
+			if (this._isEmbedInteractionEvent(evt, unitId)) return;
 			this._docSelectionRenderService.__handleDblClick(evt);
 		}));
 		this.disposeWithMe(document.onTripleClick$.subscribeEvent((evt) => {
 			if (this._isEditorReadOnly(unitId)) return;
+			if (this._isEmbedInteractionEvent(evt, unitId)) return;
 			this._docSelectionRenderService.__handleTripleClick(evt);
 		}));
 	}
@@ -19403,6 +20700,19 @@ let DocSelectionRenderController = class DocSelectionRenderController extends Di
 	_setEditorFocus(unitId) {
 		this._editorService.focus(unitId);
 	}
+	_isEmbedInteractionEvent(evt, unitId) {
+		var _this$_embedRuntimeFo, _this$_embedRuntimeFo2, _this$_embedRuntimeFo3;
+		if (isInternalEditorID(unitId)) return false;
+		const target = evt.target;
+		if ((_this$_embedRuntimeFo = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo === void 0 ? void 0 : _this$_embedRuntimeFo.isChildUnitRuntimeEvent(unitId, target, evt)) return false;
+		if ((_this$_embedRuntimeFo2 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo2 === void 0 ? void 0 : _this$_embedRuntimeFo2.isChildUnitInActiveSession(unitId)) return false;
+		if ((_this$_embedRuntimeFo3 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo3 === void 0 ? void 0 : _this$_embedRuntimeFo3.shouldSuppressHostInteraction(unitId, target, evt)) return true;
+		return isEmbedInteractionEvent(evt);
+	}
+	_isEmbedChildInteractionActive(unitId) {
+		var _this$_embedRuntimeFo4;
+		return ((_this$_embedRuntimeFo4 = this._embedRuntimeFocusCoordinator) === null || _this$_embedRuntimeFo4 === void 0 ? void 0 : _this$_embedRuntimeFo4.shouldSuppressHostInteraction(unitId)) === true;
+	}
 	_commandExecutedListener() {
 		const updateCommandList = [SetDocZoomRatioOperation.id];
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
@@ -19410,6 +20720,7 @@ let DocSelectionRenderController = class DocSelectionRenderController extends Di
 				var _this$_docSelectionMa;
 				const { unitId: documentId } = command.params;
 				if (documentId !== ((_this$_docSelectionMa = this._docSelectionManagerService.__getCurrentSelection()) === null || _this$_docSelectionMa === void 0 ? void 0 : _this$_docSelectionMa.unitId)) return;
+				if (this._isEmbedChildInteractionActive(documentId)) return;
 				this._docSelectionManagerService.refreshSelection();
 			}
 		}));
@@ -19419,6 +20730,7 @@ let DocSelectionRenderController = class DocSelectionRenderController extends Di
 			if (!skeleton) return;
 			const { unitId } = this._context;
 			if (!isInternalEditorID(unitId)) {
+				if (this._isEmbedChildInteractionActive(unitId)) return;
 				this._docSelectionRenderService.focus();
 				const offset = findFirstCursorOffset(this._context.unit.getSnapshot());
 				this._docSelectionManagerService.replaceDocRanges([{
@@ -19438,8 +20750,39 @@ DocSelectionRenderController = __decorate([
 	__decorateParam(3, IUniverInstanceService),
 	__decorateParam(4, Inject(DocSelectionRenderService)),
 	__decorateParam(5, Inject(DocSkeletonManagerService)),
-	__decorateParam(6, Inject(DocSelectionManagerService))
+	__decorateParam(6, Inject(DocSelectionManagerService)),
+	__decorateParam(7, Optional(IDocEmbedInteractionBoundaryService)),
+	__decorateParam(8, Optional(IDocEmbedRuntimeFocusCoordinator))
 ], DocSelectionRenderController);
+function isEmbedInteractionEvent(evt) {
+	var _document$elementFrom;
+	const target = evt.target;
+	if (typeof Element !== "undefined" && target instanceof Element && target.closest(`[${"data-embed-interaction-boundary-owner"}]`) != null) return true;
+	if (typeof document === "undefined") return false;
+	const point = getEventClientPoint(evt, target);
+	const clientX = point === null || point === void 0 ? void 0 : point.clientX;
+	const clientY = point === null || point === void 0 ? void 0 : point.clientY;
+	if (typeof clientX !== "number" || typeof clientY !== "number" || !Number.isFinite(clientX) || !Number.isFinite(clientY)) return false;
+	if (typeof document.elementFromPoint !== "function") return false;
+	return ((_document$elementFrom = document.elementFromPoint(clientX, clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(`[${DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE}]`)) != null;
+}
+function getEventClientPoint(evt, target) {
+	if (Number.isFinite(evt.clientX) && Number.isFinite(evt.clientY)) return {
+		clientX: evt.clientX,
+		clientY: evt.clientY
+	};
+	if (typeof Element !== "undefined" && target instanceof Element && Number.isFinite(evt.offsetX) && Number.isFinite(evt.offsetY)) {
+		const rect = target.getBoundingClientRect();
+		return {
+			clientX: rect.left + evt.offsetX,
+			clientY: rect.top + evt.offsetY
+		};
+	}
+	if (Number.isFinite(evt.x) && Number.isFinite(evt.y)) return {
+		clientX: evt.x,
+		clientY: evt.y
+	};
+}
 
 //#endregion
 //#region src/controllers/render-controllers/zoom.render-controller.ts
@@ -19447,7 +20790,7 @@ function shouldHandleDocWheelZoom(event, focusingDoc, _documentFlavor) {
 	return focusingDoc && (event.ctrlKey || event.metaKey);
 }
 let DocZoomRenderController = class DocZoomRenderController extends Disposable {
-	constructor(_context, _contextService, _docSkeletonManagerService, _univerInstanceService, _commandService, _textSelectionManagerService, _editorService, _docPageLayoutService, _renderManagerService, _docViewScaleService) {
+	constructor(_context, _contextService, _docSkeletonManagerService, _univerInstanceService, _commandService, _textSelectionManagerService, _editorService, _docPageLayoutService, _renderManagerService, _docViewScaleService, _embedInteractionBoundaryService) {
 		super();
 		this._context = _context;
 		this._contextService = _contextService;
@@ -19459,6 +20802,7 @@ let DocZoomRenderController = class DocZoomRenderController extends Disposable {
 		this._docPageLayoutService = _docPageLayoutService;
 		this._renderManagerService = _renderManagerService;
 		this._docViewScaleService = _docViewScaleService;
+		this._embedInteractionBoundaryService = _embedInteractionBoundaryService;
 		_defineProperty(this, "_isSheetEditor", false);
 		_defineProperty(this, "_initTimer", void 0);
 		_defineProperty(this, "_updateTimer", void 0);
@@ -19508,14 +20852,21 @@ let DocZoomRenderController = class DocZoomRenderController extends Disposable {
 		}));
 	}
 	updateViewZoom(zoomRatio, needRefreshSelection = true) {
-		var _docObject$scene$getT;
+		var _this$_embedInteracti;
 		const docObject = neoGetDocObject(this._context);
 		const viewScale = this._docViewScaleService.getViewScale(zoomRatio);
 		docObject.scene.scale(viewScale, viewScale);
 		if (!this._editorService.isEditor(this._context.unitId)) this._docPageLayoutService.calculatePagePosition();
-		if (needRefreshSelection && !this._editorService.isEditor(this._context.unitId)) this._textSelectionManagerService.refreshSelection();
-		if (isInternalEditorID(this._context.unitId)) return;
-		(_docObject$scene$getT = docObject.scene.getTransformer()) === null || _docObject$scene$getT === void 0 || _docObject$scene$getT.clearSelectedObjects();
+		if (needRefreshSelection && !this._editorService.isEditor(this._context.unitId) && !((_this$_embedInteracti = this._embedInteractionBoundaryService) === null || _this$_embedInteracti === void 0 ? void 0 : _this$_embedInteracti.hasRecentInteraction())) this._textSelectionManagerService.refreshSelection();
+		if (!isInternalEditorID(this._context.unitId)) {
+			var _docObject$scene$getT;
+			(_docObject$scene$getT = docObject.scene.getTransformer()) === null || _docObject$scene$getT === void 0 || _docObject$scene$getT.clearSelectedObjects();
+		}
+		const createOptions = this._univerInstanceService.getUnitCreateOptions(this._context.unitId);
+		if ((createOptions === null || createOptions === void 0 ? void 0 : createOptions.embeddedRender) === true || (createOptions === null || createOptions === void 0 ? void 0 : createOptions.skipAutoRender) === true) {
+			this._context.scene.makeDirty();
+			this._context.scene.render();
+		}
 	}
 	_initZoomEventListener() {
 		const scene = this._context.scene;
@@ -19542,7 +20893,8 @@ DocZoomRenderController = __decorate([
 	__decorateParam(6, IEditorService),
 	__decorateParam(7, Inject(DocPageLayoutService)),
 	__decorateParam(8, IRenderManagerService),
-	__decorateParam(9, Inject(DocViewScaleService))
+	__decorateParam(9, Inject(DocViewScaleService)),
+	__decorateParam(10, Optional(IDocEmbedInteractionBoundaryService))
 ], DocZoomRenderController);
 
 //#endregion
@@ -19625,25 +20977,34 @@ let DocsRenderService = class DocsRenderService extends RxDisposable {
 	}
 	_init() {
 		this._renderManagerService.createRender$.pipe(takeUntil(this.dispose$)).subscribe((unitId) => this._createRenderWithId(unitId));
-		this._instanceSrv.getAllUnitsForType(UniverInstanceType.UNIVER_DOC).forEach((documentModel) => this._createRenderer(documentModel));
-		this._instanceSrv.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((event) => this._createRenderer(event.unit));
+		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);
+		});
+		this._instanceSrv.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((event) => this._createRenderer(event.unit, event.options));
 		this._instanceSrv.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((doc) => this._disposeRenderer(doc));
 	}
-	_createRenderer(doc) {
+	_createRenderer(doc, createUnitOptions) {
+		if (createUnitOptions === null || createUnitOptions === void 0 ? void 0 : createUnitOptions.skipAutoRender) return;
 		const unitId = doc.getUnitId();
-		this._renderManagerService.created$.subscribe((renderer) => {
-			if (renderer.unitId === unitId) {
-				const documentFlavor = doc.getSnapshot().documentStyle.documentFlavor;
-				const canvas = renderer.engine.getCanvas();
-				canvas.setId(DOC_MAIN_CANVAS_ID);
-				canvas.getContext().setId(DOC_MAIN_CANVAS_ID);
-				canvas.getCanvasEle().style.backgroundColor = getDocsCanvasBackgroundColor(documentFlavor, renderer.engine.canvasColorService, void 0, isInternalEditorID(unitId));
-			}
-		});
-		if (!this._renderManagerService.has(unitId)) this._createRenderWithId(unitId);
+		if (!this._renderManagerService.has(unitId)) {
+			this._createRenderWithId(unitId, doc);
+			return;
+		}
+		const renderer = this._renderManagerService.getRenderById(unitId);
+		if (renderer) this._syncRendererCanvas(renderer, doc);
 	}
-	_createRenderWithId(unitId) {
-		this._renderManagerService.createRender(unitId);
+	_createRenderWithId(unitId, doc) {
+		const renderer = this._renderManagerService.createRender(unitId);
+		if (doc) this._syncRendererCanvas(renderer, doc);
+	}
+	_syncRendererCanvas(renderer, doc) {
+		const unitId = doc.getUnitId();
+		const documentFlavor = doc.getSnapshot().documentStyle.documentFlavor;
+		const canvas = renderer.engine.getCanvas();
+		canvas.setId(DOC_MAIN_CANVAS_ID);
+		canvas.getContext().setId(DOC_MAIN_CANVAS_ID);
+		canvas.getCanvasEle().style.backgroundColor = getDocsCanvasBackgroundColor(documentFlavor, renderer.engine.canvasColorService, void 0, isInternalEditorID(unitId));
 	}
 	_disposeRenderer(doc) {
 		const unitId = doc.getUnitId();
@@ -19829,6 +21190,7 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 			[DocAutoFormatController],
 			[DocMoveCursorController],
 			[DocParagraphSettingController],
+			[DocSectionSettingController],
 			[DocTableController],
 			[ComponentsController],
 			[DocUIController]
@@ -19898,6 +21260,7 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 			SetDocZoomRatioCommand,
 			DocSelectAllCommand,
 			DocParagraphSettingPanelOperation,
+			DocSectionSettingPanelOperation,
 			MoveCursorOperation,
 			MoveSelectionOperation,
 			ReplaceTextRunsCommand,
@@ -19985,8 +21348,11 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 			[DocTableController],
 			[DocMoveCursorController],
 			[DocParagraphSettingController],
+			[DocSectionSettingController],
 			[IEditorService, { useClass: EditorService }],
 			[IDocClipboardService, { useClass: DocClipboardService }],
+			[DocClipboardPasteAdapterService],
+			[IDocClipboardPasteAdapterService, { useClass: DocClipboardPasteAdapterService }],
 			[DocHtmlExportService],
 			[DocCanvasPopManagerService],
 			[DocsRenderService],
@@ -20002,6 +21368,8 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 			const doc = currentService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 			if (!doc) return;
 			const id = doc.getUnitId();
+			const createOptions = currentService.getUnitCreateOptions(id);
+			if ((createOptions === null || createOptions === void 0 ? void 0 : createOptions.makeCurrent) === false) return;
 			if (!editorService.isEditor(id)) currentService.focusUnit(doc.getUnitId());
 		} catch (err) {
 			this._logService.warn(err);
@@ -20278,13 +21646,13 @@ function useKeyboardEvent(isNeed, config, editor) {
 const useLeftAndRightArrow = (isNeed, selectingMode, editor, onMoveInEditor) => {
 	const commandService = useDependency(ICommandService);
 	const shortcutService = useDependency(IShortcutService);
+	const operationId = `doc.rich-text-editor.arrow.${useId()}`;
 	const selectingModeRef = useRef(selectingMode);
 	selectingModeRef.current = selectingMode;
 	const onMoveInEditorRef = useRef(onMoveInEditor);
 	onMoveInEditorRef.current = onMoveInEditor;
 	useEffect(() => {
 		if (!editor || !isNeed) return;
-		const operationId = `doc.rich-text-editor.${editor.getEditorId()}`;
 		const d = new DisposableCollection();
 		const handleMoveInEditor = (keycode, metaKey) => {
 			if (onMoveInEditorRef.current) {
@@ -20331,7 +21699,7 @@ const useLeftAndRightArrow = (isNeed, selectingMode, editor, onMoveInEditor) =>
 			return {
 				id: operationId,
 				binding: metaKey ? keyCode | metaKey : keyCode,
-				preconditions: () => true,
+				preconditions: () => editor.isFocus(),
 				priority: 900,
 				staticParameters: {
 					eventType: DeviceInputEventType.Keyboard,
@@ -20349,6 +21717,7 @@ const useLeftAndRightArrow = (isNeed, selectingMode, editor, onMoveInEditor) =>
 		commandService,
 		editor,
 		isNeed,
+		operationId,
 		shortcutService
 	]);
 };
@@ -20610,4 +21979,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_VIEW_KEY, DOC_CONTENT_INSERT_MENU_ID, 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, DocCopyCommand, DocCreateTableOperation, DocCutCommand, DocEventManagerService, DocHtmlExportService, DocIMEInputManagerService, 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, IDocClipboardService, 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, convertBodyToHtml, convertPositionsToRectRanges, createEditorUndoRedoKeyboardConfig, deleteCustomDecorationFactory, disableMenuWhenHeaderFooterEditing, docDrawingPositionToTransform, executeEditorUndoRedoCommand, genTableSource, generateParagraphs, getAnchorBounding, getCanvasOffsetByEngine, getCommandSkeleton, getCursorWhenDelete, getCustomBlockIdsInSelections, getCutActionsFromDocRanges, getDocBlockRangeMenuId, getDocObject, getDocObjectById, getEmptyTableCell, getEmptyTableRow, getLineBounding, getListMarkerFallbackBound, getListParagraphContextMenuHit, getOneTextSelectionRange, getStyleInTextRange, getTableColumn, hasParagraphInTable, hideMenuWhenSelectionInBlockRange, isInSameTableCell, isTextRangeInAnyBlockRange, isValidRectRange, neoGetDocObject, normalizeDocFitToWidthOptions, resolveDocFitBaseWidth, resolveDocViewScale, transformToDocDrawingPosition, 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_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, docDrawingPositionToTransform, executeEditorUndoRedoCommand, genTableSource, generateParagraphs, getAnchorBounding, getCanvasOffsetByEngine, getCommandSkeleton, getCursorWhenDelete, getCustomBlockIdsInSelections, 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, transformToDocDrawingPosition, useEditor, useEditorClickOutside, useIsFocusing, useKeyboardEvent, useLeftAndRightArrow, useOnChange, useResize, whenDocAndEditorFocused };