@univerjs/docs-ui 1.0.3 → 1.1.0

package/lib/cjs/index.js

@@ -270,7 +270,7 @@ function getCustomDecorationAtPosition(customDecorations, position) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -281,7 +281,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -294,14 +294,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -312,7 +312,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -320,7 +320,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -436,8 +436,8 @@ let DocMenuStyleService = class DocMenuStyleService extends _univerjs_core.Dispo
 		}));
 	}
 	_listenDocRangeChange() {
-		this.disposeWithMe(this._textSelectionManagerService.textSelection$.subscribe(() => {
-			this._clearStyleCache();
+		this.disposeWithMe(this._textSelectionManagerService.textSelection$.subscribe(({ options }) => {
+			if (!(options === null || options === void 0 ? void 0 : options.preserveInputStyle)) this._clearStyleCache();
 		}));
 	}
 	getStyleCache() {
@@ -1671,10 +1671,10 @@ var NodePositionConvertToCursor = class {
 			let segmentPage = page;
 			if (pageType === _univerjs_engine_render.DocumentSkeletonPageType.HEADER) {
 				var _skeHeaders$get;
-				segmentPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+				segmentPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(page.headerLayoutKey ?? pageWidth);
 			} else if (pageType === _univerjs_engine_render.DocumentSkeletonPageType.FOOTER) {
 				var _skeFooters$get;
-				segmentPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+				segmentPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(page.footerLayoutKey ?? pageWidth);
 			} else if (pageType === _univerjs_engine_render.DocumentSkeletonPageType.NOTE) {
 				var _getPageFromPath3, _page$notes;
 				const noteId = (_getPageFromPath3 = (0, _univerjs_engine_render.getPageFromPath)(skeletonData, path)) === null || _getPageFromPath3 === void 0 ? void 0 : _getPageFromPath3.segmentId;
@@ -1841,8 +1841,8 @@ function getCellPageFromSegmentPath(skeletonData, rootPage, path) {
 	if (path[0] === "pages") return null;
 	const segmentPages = [];
 	const { headerId, footerId, pageWidth } = rootPage;
-	const headerPage = headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(pageWidth);
-	const footerPage = footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(pageWidth);
+	const headerPage = headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(rootPage.headerLayoutKey ?? pageWidth);
+	const footerPage = footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(rootPage.footerLayoutKey ?? pageWidth);
 	if (headerPage != null) segmentPages.push(headerPage);
 	if (footerPage != null) segmentPages.push(footerPage);
 	for (const segmentPage of segmentPages) {
@@ -2257,7 +2257,7 @@ function getCellPageFromPositionPath(skeletonData, position) {
 	const rootPage = skeletonData.pages[segmentPage];
 	if (rootPage == null) return null;
 	const { headerId, footerId, pageWidth } = rootPage;
-	const segmentPages = [headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(pageWidth), footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(pageWidth)];
+	const segmentPages = [headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(rootPage.headerLayoutKey ?? pageWidth), footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(rootPage.footerLayoutKey ?? pageWidth)];
 	for (const segmentPage of segmentPages) {
 		if (segmentPage == null) continue;
 		const page = (0, _univerjs_engine_render.getPageFromPath)({
@@ -3197,6 +3197,20 @@ function getWordBoundaryByIndex(content, nodeIndex, paragraphStartOffset) {
 		endOffset: paragraphStartOffset + range.end
 	};
 }
+function getWordSelectionByIndex(content, nodeIndex, paragraphStartOffset, isBack) {
+	var _segments;
+	const text = content.replace(/[\r\n]+$/, "");
+	if (!text.length || nodeIndex < 0) return null;
+	const index = Math.min(nodeIndex, text.length - 1);
+	const segments = Array.from(new Intl.Segmenter(void 0, { granularity: "word" }).segment(text));
+	const segmentIndex = segments.findIndex((segment) => segment.index <= index && index < segment.index + segment.segment.length);
+	const segment = segments[segmentIndex];
+	const whitespace = /^\s+$/.test(segment.segment);
+	return {
+		startOffset: paragraphStartOffset + (whitespace ? ((_segments = segments[segmentIndex - 1]) === null || _segments === void 0 ? void 0 : _segments.index) ?? segment.index : segment.index),
+		endOffset: paragraphStartOffset + (whitespace ? Math.min(nodeIndex + (isBack ? 0 : 1), text.length) : segment.index + segment.segment.length)
+	};
+}
 function getNextWordBoundaryOffset(content, nodeIndex, paragraphStartOffset, direction) {
 	if (nodeIndex < 0) return null;
 	const ranges = getWordRanges(content);
@@ -3226,6 +3240,12 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 	get isFocusing() {
 		return this._input === this._getOwnerDocument().activeElement;
 	}
+	get inputElement() {
+		return this._input;
+	}
+	get selectionContainer() {
+		return this._container;
+	}
 	get isEditing() {
 		var _this$_textSelectionI;
 		return ((_this$_textSelectionI = this._textSelectionInner$.value) === null || _this$_textSelectionI === void 0 ? void 0 : _this$_textSelectionI.isEditing) === true;
@@ -3359,15 +3379,13 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 		this._selectionStyle = style;
 	}
 	replaceDocRanges(ranges, isEditing = true, options) {
-		var _this$_context$unit$g;
 		if (this._onPointerEvent) {
 			this._pendingSelection = null;
 			return false;
 		}
 		this._syncNoteSegment(ranges[0]);
-		const isBodyOrNote = this._currentSegmentId === "" || ((_this$_context$unit$g = this._context.unit.getSnapshot().notes) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g[this._currentSegmentId]) != null;
 		let currentLogicalSelection = null;
-		if (isBodyOrNote && ranges.length > 0) {
+		if (ranges.length > 0) {
 			const { unitId } = this._context;
 			const selection = this._docSelectionManagerService.getSelectionInfo({
 				unitId,
@@ -3440,7 +3458,12 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 			this._addRectRanges(rectRanges);
 		};
 		for (const range of ranges) {
-			const { startOffset, endOffset, rangeType, startNodePosition, endNodePosition } = range;
+			const { rangeType } = range;
+			let { startOffset, endOffset, startNodePosition, endNodePosition } = range;
+			if (rangeType !== _univerjs_core.DOC_RANGE_TYPE.RECT && range.direction === _univerjs_core.RANGE_DIRECTION.BACKWARD && startOffset < endOffset) {
+				[startOffset, endOffset] = [endOffset, startOffset];
+				[startNodePosition, endNodePosition] = [endNodePosition, startNodePosition];
+			}
 			const rangeStyle = range.style ?? style;
 			if (rangeType !== _univerjs_core.DOC_RANGE_TYPE.RECT && startOffset === endOffset) {
 				const textRange = cursorConvertToTextRange(scene, {
@@ -3458,7 +3481,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 				if (startNodePosition && endNodePosition) textRange = getTextRangeFromCharIndex(startNodePosition.isBack ? startOffset : startOffset - 1, endNodePosition.isBack ? endOffset : endOffset - 1, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage, startNodePosition.isBack, endNodePosition.isBack);
 				else textRange = getTextRangeFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage);
 				if (textRange) this._addTextRange(textRange);
-			} catch (_e) {
+			} catch {
 				generalAddRange(startOffset, endOffset, rangeStyle);
 			}
 			else generalAddRange(startOffset, endOffset, rangeStyle);
@@ -3548,7 +3571,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 		if (paragraphInfo == null) return;
 		const { content, st, nodeIndex } = paragraphInfo;
 		if (nodeIndex === -1) return;
-		const wordBoundary = getWordBoundaryByIndex(content, nodeIndex, st);
+		const wordBoundary = this._context.unitId === _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY || this._context.unitId === _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY ? getWordSelectionByIndex(content, nodeIndex, st, startNode.ratioX < .5) : getWordBoundaryByIndex(content, nodeIndex, st);
 		if (wordBoundary != null) {
 			this.removeAllRanges();
 			const textRanges = [{
@@ -4137,10 +4160,26 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 		}));
 	}
 	_refreshMissingInputRange(config) {
+		var _this$_context$unit$g;
 		if (config.activeRange == null) {
 			config.activeRange = this._getActiveRange();
 			config.rangeList = this._getAllTextRanges();
 		}
+		const { unitId } = this._context;
+		if (config.activeRange != null || unitId !== _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY || ((_this$_context$unit$g = this._context.unit.getBody()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.dataStream) !== "\r\n") return;
+		const selection = this._docSelectionManagerService.getSelectionInfo({
+			unitId,
+			subUnitId: unitId
+		});
+		if (selection == null || selection.textRanges.length !== 1 || selection.rectRanges.length > 0) return;
+		const caret = selection.textRanges[0];
+		if (!caret.isActive || caret.startOffset !== 0 || caret.endOffset !== 0) return;
+		config.activeRange = {
+			...caret,
+			segmentId: selection.segmentId,
+			segmentPage: selection.segmentPage
+		};
+		config.rangeList = [config.activeRange];
 	}
 	_handleInputFocus(event) {
 		this._eventHandle(event, (config) => {
@@ -5685,7 +5724,7 @@ const CutContentCommand = {
 	id: "doc.command.inner-cut",
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _selectionInfo$option3;
+		var _selectionInfo$option3, _docDataModel$getSelf7;
 		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
@@ -5705,12 +5744,19 @@ const CutContentCommand = {
 		const docSkeletonManagerService = getCommandSkeleton(accessor, unitId);
 		if (docSkeletonManagerService == null) return false;
 		const viewModel = docSkeletonManagerService.getViewModel();
+		const body = (_docDataModel$getSelf7 = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf7 === void 0 ? void 0 : _docDataModel$getSelf7.getBody();
+		const clearsBody = wholeBodySelected || body != null && isWholeBodySelected(selections, rectRanges, body);
 		const doMutation = {
 			id: _univerjs_docs.RichTextEditingMutation.id,
 			params: {
 				unitId,
 				actions: [],
-				textRanges,
+				textRanges: clearsBody ? [{
+					...textRanges[0],
+					startOffset: 0,
+					endOffset: 0,
+					collapsed: true
+				}] : textRanges,
 				trigger: CutContentCommand.id
 			}
 		};
@@ -5727,6 +5773,31 @@ function isHorizontalLineParagraph(dataStream, paragraph) {
 	return Array.from(dataStream).every((token) => token === _univerjs_core.DataStreamTreeTokenType.PARAGRAPH || token === _univerjs_core.DataStreamTreeTokenType.SECTION_BREAK) && (paragraphStyle === null || paragraphStyle === void 0 ? void 0 : paragraphStyle.borderBottom) != null && paragraphStyle.borderTop == null && paragraphStyle.borderLeft == null && paragraphStyle.borderRight == null && paragraphStyle.borderBetween == null;
 }
 
+//#endregion
+//#region src/commands/operations/doc-cursor.operation.ts
+/**
+* The operation to move cursor in the current document.
+*/
+const MoveCursorOperation = {
+	id: "doc.operation.move-cursor",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		if (!params) return false;
+		return true;
+	}
+};
+/**
+* The operation to move selection in the current document.
+*/
+const MoveSelectionOperation = {
+	id: "doc.operation.move-selection",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		if (!params) return false;
+		return true;
+	}
+};
+
 //#endregion
 //#region src/commands/commands/format-painter.command.ts
 function captureTextFormat(body, range, defaultStyle = {}, lists = {}, document = { documentStyle: {} }) {
@@ -6140,11 +6211,25 @@ function isDeleteOffsetInsideBlockRange(body, offset) {
 		return interval.startOffset < offset && offset < interval.endOffset - 1;
 	})) ?? false;
 }
+function selectDeleteBoundary(accessor, direction, granularity) {
+	var _selections$getActive, _selections$getRectRa;
+	const selections = accessor.get(_univerjs_docs.DocSelectionManagerService);
+	if (((_selections$getActive = selections.getActiveTextRange()) === null || _selections$getActive === void 0 ? void 0 : _selections$getActive.collapsed) && !((_selections$getRectRa = selections.getRectRanges()) === null || _selections$getRectRa === void 0 ? void 0 : _selections$getRectRa.length)) {
+		var _selections$getActive2;
+		accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(MoveSelectionOperation.id, {
+			direction,
+			granularity
+		});
+		return ((_selections$getActive2 = selections.getActiveTextRange()) === null || _selections$getActive2 === void 0 ? void 0 : _selections$getActive2.collapsed) === false;
+	}
+	return true;
+}
 const DeleteLeftCommand = {
 	id: "doc.command.delete-left",
 	type: _univerjs_core.CommandType.COMMAND,
-	handler: async (accessor) => {
+	handler: async (accessor, params) => {
 		var _docDataModel$getSelf3, _docDataModel$getSelf4;
+		if ((params === null || params === void 0 ? void 0 : params.granularity) && !selectDeleteBoundary(accessor, _univerjs_core.Direction.LEFT, params.granularity)) return true;
 		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const commandService = accessor.get(_univerjs_core.ICommandService);
@@ -6304,8 +6389,9 @@ const DeleteLeftCommand = {
 const DeleteRightCommand = {
 	id: "doc.command.delete-right",
 	type: _univerjs_core.CommandType.COMMAND,
-	handler: async (accessor) => {
+	handler: async (accessor, params) => {
 		var _docDataModel$getSelf5;
+		if ((params === null || params === void 0 ? void 0 : params.granularity) && !selectDeleteBoundary(accessor, _univerjs_core.Direction.RIGHT, params.granularity)) return true;
 		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
 		const docDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (!docDataModel) return false;
@@ -8480,23 +8566,39 @@ function getTableClipboardBodySlice(body, range) {
 	return getTableCellContentClipboardBodySlice(body, startOffset, endOffset);
 }
 function getTableCellContentClipboardBodySlice(body, start, end) {
-	var _bodySlice$textRuns, _bodySlice$tables, _bodySlice$paragraphs;
+	var _bodySlice$textRuns, _bodySlice$docxExport;
 	const bodySlice = (0, _univerjs_core.getBodySlice)(body, start, end + 2);
-	bodySlice.dataStream = _univerjs_core.DataStreamTreeTokenType.TABLE_START + _univerjs_core.DataStreamTreeTokenType.TABLE_ROW_START + _univerjs_core.DataStreamTreeTokenType.TABLE_CELL_START + bodySlice.dataStream + _univerjs_core.DataStreamTreeTokenType.TABLE_CELL_END + _univerjs_core.DataStreamTreeTokenType.TABLE_ROW_END + _univerjs_core.DataStreamTreeTokenType.TABLE_END;
+	const prefix = _univerjs_core.DataStreamTreeTokenType.TABLE_START + _univerjs_core.DataStreamTreeTokenType.TABLE_ROW_START + _univerjs_core.DataStreamTreeTokenType.TABLE_CELL_START;
+	bodySlice.dataStream = prefix + bodySlice.dataStream + _univerjs_core.DataStreamTreeTokenType.TABLE_CELL_END + _univerjs_core.DataStreamTreeTokenType.TABLE_ROW_END + _univerjs_core.DataStreamTreeTokenType.TABLE_END;
+	const offset = prefix.length;
 	(_bodySlice$textRuns = bodySlice.textRuns) === null || _bodySlice$textRuns === void 0 || _bodySlice$textRuns.forEach((textRun) => {
-		const { st, ed } = textRun;
-		textRun.st = st + 3;
-		textRun.ed = ed + 3;
-	});
-	(_bodySlice$tables = bodySlice.tables) === null || _bodySlice$tables === void 0 || _bodySlice$tables.forEach((table) => {
-		const { startIndex, endIndex } = table;
-		table.startIndex = startIndex + 3;
-		table.endIndex = endIndex + 3;
+		textRun.st += offset;
+		textRun.ed += offset;
 	});
-	(_bodySlice$paragraphs = bodySlice.paragraphs) === null || _bodySlice$paragraphs === void 0 || _bodySlice$paragraphs.forEach((paragraph) => {
-		const { startIndex } = paragraph;
-		paragraph.startIndex = startIndex + 3;
+	[
+		bodySlice.paragraphs,
+		bodySlice.sectionBreaks,
+		bodySlice.customBlocks,
+		bodySlice.docxRawCustomBlocks,
+		bodySlice.docxRawBlocks
+	].forEach((items) => items === null || items === void 0 ? void 0 : items.forEach((item) => {
+		item.startIndex += offset;
+	}));
+	[
+		bodySlice.tables,
+		bodySlice.columnGroups,
+		bodySlice.blockRanges,
+		bodySlice.customRanges,
+		bodySlice.customDecorations
+	].forEach((ranges) => ranges === null || ranges === void 0 ? void 0 : ranges.forEach((range) => {
+		range.startIndex += offset;
+		range.endIndex += offset;
+	}));
+	(_bodySlice$docxExport = bodySlice.docxExportExcludedRanges) === null || _bodySlice$docxExport === void 0 || _bodySlice$docxExport.forEach((range) => {
+		range.start += offset;
+		range.end += offset;
 	});
+	if (bodySlice.renderedPageBreaks) bodySlice.renderedPageBreaks = bodySlice.renderedPageBreaks.map((index) => index + offset);
 	return bodySlice;
 }
 const IDocClipboardService = (0, _univerjs_core.createIdentifier)("doc.clipboard-service");
@@ -8526,7 +8628,11 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		_defineProperty(this, "_umdToHtml", void 0);
 		this._umdToHtml = new UDMToHtmlService(docHtmlExportService);
 		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
-			if (!this._applyingPaste && command.type === _univerjs_core.CommandType.MUTATION) this.dismissPasteOptions();
+			var _command$params, _this$_pasteOptions$$;
+			if (this._applyingPaste || command.type !== _univerjs_core.CommandType.MUTATION) return;
+			const unitId = (_command$params = command.params) === null || _command$params === void 0 ? void 0 : _command$params.unitId;
+			const pasteUnitId = ((_this$_pasteOptions$$ = this._pasteOptions$.value) === null || _this$_pasteOptions$$ === void 0 ? void 0 : _this$_pasteOptions$$.unitId) ?? this._getCurrentDocumentUnitId();
+			if (!unitId || unitId === pasteUnitId) this.dismissPasteOptions();
 		}));
 		const invalidateSelection = () => {
 			const key = this._getPasteSelectionKey();
@@ -8600,6 +8706,12 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 			mode
 		});
 	}
+	isPasteOptionsEnabled(unitId) {
+		return !(0, _univerjs_core.isInternalEditorID)(unitId) || this._clipboardHooks.some((hook) => {
+			var _hook$supportsPasteOp;
+			return (_hook$supportsPasteOp = hook.supportsPasteOptions) === null || _hook$supportsPasteOp === void 0 ? void 0 : _hook$supportsPasteOp.call(hook, unitId);
+		});
+	}
 	setNextPasteMode(mode) {
 		this._nextPasteMode = mode;
 	}
@@ -8690,7 +8802,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		try {
 			this._stateChangeManager.flushPendingChanges(unitId);
 			const result = this._paste(doc, unitId);
-			if (result && !(0, _univerjs_core.isInternalEditorID)(unitId)) this._savePasteSession(payload, mode === "text" ? cachedSource : source, style, mode, unitId);
+			if (result && this.isPasteOptionsEnabled(unitId)) this._savePasteSession(payload, mode === "text" ? cachedSource : source, style, mode, unitId);
 			return result;
 		} finally {
 			this._applyingPaste = false;
@@ -8914,7 +9026,11 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		this._clipboardHooks.push(hook);
 		return (0, _univerjs_core.toDisposable)(() => {
 			const index = this._clipboardHooks.indexOf(hook);
-			if (index > -1) this._clipboardHooks.splice(index, 1);
+			if (index > -1) {
+				this._clipboardHooks.splice(index, 1);
+				const state = this._pasteOptions$.value;
+				if (state && !this.isPasteOptionsEnabled(state.unitId)) this.dismissPasteOptions();
+			}
 		});
 	}
 	_applyCopyDocDataHooks(doc, sourceDocuments) {
@@ -11620,31 +11736,6 @@ const DocCreateTableOperation = {
 	}
 };
 
-//#endregion
-//#region src/commands/operations/doc-cursor.operation.ts
-/**
-* The operation to move cursor in the current document.
-*/
-const MoveCursorOperation = {
-	id: "doc.operation.move-cursor",
-	type: _univerjs_core.CommandType.OPERATION,
-	handler: (accessor, params) => {
-		if (!params) return false;
-		return true;
-	}
-};
-/**
-* The operation to move selection in the current document.
-*/
-const MoveSelectionOperation = {
-	id: "doc.operation.move-selection",
-	type: _univerjs_core.CommandType.OPERATION,
-	handler: (accessor, params) => {
-		if (!params) return false;
-		return true;
-	}
-};
-
 //#endregion
 //#region src/config/config.ts
 const DOCS_UI_PLUGIN_CONFIG_KEY = "docs-ui.config";
@@ -12089,6 +12180,7 @@ function getLineFontFamily(line) {
 function drawParagraphPlaceholders(ctx, placeholders, color = PLACEHOLDER_COLOR) {
 	ctx.save();
 	ctx.fillStyle = color;
+	ctx.globalAlpha *= .5;
 	ctx.textBaseline = "alphabetic";
 	for (const placeholder of placeholders) {
 		const clipLeft = placeholder.clipLeft ?? placeholder.x;
@@ -12712,12 +12804,35 @@ var DocLayoutInteractionService = class extends _univerjs_core.Disposable {
 //#region src/services/doc-zoom.ts
 const DEFAULT_DOC_ZOOM_RATIO = 1;
 const DEFAULT_MODERN_DOC_ZOOM_RATIO = 1;
+const DOC_ZOOM_SHORTCUTS = [
+	50,
+	80,
+	100,
+	130,
+	150,
+	170,
+	200,
+	400
+];
 function getDocEffectiveZoomRatio(documentModel) {
 	var _documentModel$getSet, _documentModel$getSna;
 	const zoomRatio = (_documentModel$getSet = documentModel.getSettings()) === null || _documentModel$getSet === void 0 ? void 0 : _documentModel$getSet.zoomRatio;
 	if (zoomRatio != null) return zoomRatio;
 	return ((_documentModel$getSna = documentModel.getSnapshot().documentStyle) === null || _documentModel$getSna === void 0 ? void 0 : _documentModel$getSna.documentFlavor) === _univerjs_core.DocumentFlavor.MODERN ? 1 : DEFAULT_DOC_ZOOM_RATIO;
 }
+function getDocZoomRatio$(commandService, instanceService) {
+	return instanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC).pipe((0, rxjs.switchMap)((documentModel) => {
+		if (!documentModel) return (0, rxjs.of)(100);
+		return new rxjs.Observable((subscriber) => {
+			const update = () => subscriber.next(Math.round(getDocEffectiveZoomRatio(documentModel) * 100));
+			const disposable = commandService.onCommandExecuted((command) => {
+				if (command.id === SetDocZoomRatioOperation.id && command.params.unitId === documentModel.getUnitId()) update();
+			});
+			update();
+			return () => disposable.dispose();
+		});
+	}), (0, rxjs.distinctUntilChanged)());
+}
 
 //#endregion
 //#region src/services/doc-view-scale.ts
@@ -13367,11 +13482,13 @@ function doesDocMutationRequireLayout(actions, drawings) {
 	if (!sawComponent || !drawingOnly) return true;
 	if (transitions.size === 0) return false;
 	for (const [drawingId, transition] of transitions) {
-		var _drawings$drawingId;
-		const currentLayoutType = drawings === null || drawings === void 0 || (_drawings$drawingId = drawings[drawingId]) === null || _drawings$drawingId === void 0 ? void 0 : _drawings$drawingId.layoutType;
+		var _currentDrawing$docTr, _currentDrawing$docTr2;
+		const currentDrawing = drawings === null || drawings === void 0 ? void 0 : drawings[drawingId];
+		const currentLayoutType = currentDrawing === null || currentDrawing === void 0 ? void 0 : currentDrawing.layoutType;
 		const before = transition.before ?? currentLayoutType;
 		const after = transition.after ?? currentLayoutType;
 		if (before == null || after == null || before !== _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || after !== _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) return true;
+		if ((currentDrawing === null || currentDrawing === void 0 || (_currentDrawing$docTr = currentDrawing.docTransform) === null || _currentDrawing$docTr === void 0 ? void 0 : _currentDrawing$docTr.positionH.relativeFrom) !== _univerjs_core.ObjectRelativeFromH.PAGE || (currentDrawing === null || currentDrawing === void 0 || (_currentDrawing$docTr2 = currentDrawing.docTransform) === null || _currentDrawing$docTr2 === void 0 ? void 0 : _currentDrawing$docTr2.positionV.relativeFrom) !== _univerjs_core.ObjectRelativeFromV.PAGE) return true;
 	}
 	return false;
 }
@@ -14351,6 +14468,8 @@ function getHeaderFooterTarget(viewModel, editArea, segmentPage, page) {
 * limitations under the License.
 */
 const COMPONENT_DOC_HEADER_FOOTER_PANEL = "COMPONENT_DOC_HEADER_FOOTER_PANEL";
+const DOC_HEADER_FOOTER_RIBBON_TAB = "docs-ui.ribbon.header-footer";
+const DOC_HEADER_FOOTER_RIBBON_CONTROL = "DocHeaderFooterRibbonControl";
 
 //#endregion
 //#region src/commands/operations/doc-header-footer-panel.operation.ts
@@ -14408,8 +14527,8 @@ const CoreHeaderFooterCommand = {
 		let resolvedCreateType = createType;
 		if (headerFooterProps != null) Object.keys(headerFooterProps).forEach((key) => {
 			const value = headerFooterProps[key];
-			if (resolvedCreateType == null && key === "useFirstPageHeaderFooter" && value === _univerjs_core.BooleanNumber.TRUE && !headerFooterConfig.firstPageHeaderId) resolvedCreateType = editArea === _univerjs_engine_render.DocumentEditArea.HEADER ? _univerjs_docs.HeaderFooterType.FIRST_PAGE_HEADER : _univerjs_docs.HeaderFooterType.FIRST_PAGE_FOOTER;
-			else if (resolvedCreateType == null && key === "evenAndOddHeaders" && value === _univerjs_core.BooleanNumber.TRUE && !headerFooterConfig.evenPageHeaderId) resolvedCreateType = editArea === _univerjs_engine_render.DocumentEditArea.HEADER ? _univerjs_docs.HeaderFooterType.EVEN_PAGE_HEADER : _univerjs_docs.HeaderFooterType.EVEN_PAGE_FOOTER;
+			if (resolvedCreateType == null && key === "useFirstPageHeaderFooter" && value === _univerjs_core.BooleanNumber.TRUE && !(editArea === _univerjs_engine_render.DocumentEditArea.HEADER ? headerFooterConfig.firstPageHeaderId : headerFooterConfig.firstPageFooterId)) resolvedCreateType = editArea === _univerjs_engine_render.DocumentEditArea.HEADER ? _univerjs_docs.HeaderFooterType.FIRST_PAGE_HEADER : _univerjs_docs.HeaderFooterType.FIRST_PAGE_FOOTER;
+			else if (resolvedCreateType == null && key === "evenAndOddHeaders" && value === _univerjs_core.BooleanNumber.TRUE && !(editArea === _univerjs_engine_render.DocumentEditArea.HEADER ? headerFooterConfig.evenPageHeaderId : headerFooterConfig.evenPageFooterId)) resolvedCreateType = editArea === _univerjs_engine_render.DocumentEditArea.HEADER ? _univerjs_docs.HeaderFooterType.EVEN_PAGE_HEADER : _univerjs_docs.HeaderFooterType.EVEN_PAGE_FOOTER;
 		});
 		return commandService.syncExecuteCommand(_univerjs_docs.CreateHeaderFooterCommand.id, {
 			unitId,
@@ -14424,8 +14543,8 @@ const CoreHeaderFooterCommand = {
 const OpenHeaderFooterPanelCommand = {
 	id: "doc.command.open-header-footer-panel",
 	type: _univerjs_core.CommandType.COMMAND,
-	handler: async (accessor, _params) => {
-		var _skeleton$getSkeleton;
+	handler: async (accessor, params) => {
+		var _skeleton$getSkeleton, _docDataModel$getSelf;
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const instanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
@@ -14442,8 +14561,9 @@ const OpenHeaderFooterPanelCommand = {
 		const currentPage = selectionRenderService.getSegmentPage();
 		const pageNumber = currentPage >= 0 && currentPage < pages.length ? currentPage : 0;
 		const page = pages[pageNumber];
-		viewModel.setEditArea(_univerjs_engine_render.DocumentEditArea.HEADER);
-		const { createType, headerFooterId, sectionId } = getHeaderFooterTarget(viewModel, _univerjs_engine_render.DocumentEditArea.HEADER, pageNumber, page);
+		const editArea = (params === null || params === void 0 ? void 0 : params.editArea) ?? _univerjs_engine_render.DocumentEditArea.HEADER;
+		viewModel.setEditArea(editArea);
+		const { createType, headerFooterId, sectionId } = getHeaderFooterTarget(viewModel, editArea, pageNumber, page);
 		selectionRenderService.setSegmentPage(pageNumber);
 		if (createType != null) {
 			const segmentId = (0, _univerjs_core.generateRandomId)(6);
@@ -14460,6 +14580,21 @@ const OpenHeaderFooterPanelCommand = {
 				return false;
 			}
 		} else if (headerFooterId != null) selectionRenderService.setSegment(headerFooterId);
+		const segmentId = selectionRenderService.getSegment();
+		const segmentSnapshot = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getSnapshot();
+		if (!segmentSnapshot) return false;
+		const offset = findFirstCursorOffset(segmentSnapshot);
+		accessor.get(_univerjs_docs.DocSelectionManagerService).replaceDocRanges([{
+			startOffset: offset,
+			endOffset: offset,
+			collapsed: true,
+			segmentId,
+			segmentPage: pageNumber
+		}], {
+			unitId,
+			subUnitId: unitId
+		});
+		selectionRenderService.focus();
 		return commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "open" });
 	}
 };
@@ -14502,7 +14637,254 @@ const CloseHeaderFooterCommand = {
 				endOffset: offset
 			}]);
 		});
-		commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "close" });
+		await commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "close" });
+		return true;
+	}
+};
+
+//#endregion
+//#region src/utils/date-time-field.ts
+function createDateTimeField(format, locale, date) {
+	const options = format === "time" ? {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hourCycle: "h23"
+	} : {
+		year: "numeric",
+		month: format === "long" ? "long" : "2-digit",
+		day: "2-digit"
+	};
+	const formatter = new Intl.DateTimeFormat(locale, {
+		...options,
+		calendar: "gregory",
+		numberingSystem: "latn"
+	});
+	const parts = formatter.formatToParts(date);
+	const tokens = {
+		year: "yyyy",
+		month: format === "long" ? "MMMM" : "MM",
+		day: "dd",
+		hour: "HH",
+		minute: "mm",
+		second: "ss"
+	};
+	const mask = parts.map((part) => tokens[part.type] ?? `'${part.value.replace(/'/g, "''")}'`).join("");
+	const fieldType = format === "time" ? "TIME" : "DATE";
+	return {
+		fieldType,
+		instruction: `${fieldType} \\@ "${mask}"`,
+		cachedResult: formatter.format(date)
+	};
+}
+function resolveDateTimeField(instruction, locale, date) {
+	try {
+		Intl.getCanonicalLocales(locale);
+	} catch {
+		return;
+	}
+	for (const format of [
+		"short",
+		"long",
+		"time"
+	]) {
+		const field = createDateTimeField(format, locale, date);
+		if (field.instruction === instruction) return field.cachedResult;
+	}
+}
+
+//#endregion
+//#region src/commands/commands/insert-header-footer-field.command.ts
+const InsertHeaderFooterFieldCommand = {
+	id: "doc.command.insert-header-footer-field",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler(accessor, params) {
+		var _snapshot$headers, _snapshot$footers, _model$getSelfOrHeade, _body$customRanges;
+		if (!params || ![
+			"PAGE",
+			"NUMPAGES",
+			"DATE",
+			"TIME"
+		].includes(params.fieldType)) return false;
+		const model = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(params.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const active = accessor.get(_univerjs_docs.DocSelectionManagerService).getActiveTextRange();
+		const selection = params.selection ?? active;
+		const segmentId = params.segmentId ?? (active === null || active === void 0 ? void 0 : active.segmentId);
+		const snapshot = model === null || model === void 0 ? void 0 : model.getSnapshot();
+		if (!model || (snapshot === null || snapshot === void 0 ? void 0 : snapshot.disabled) || !selection || !segmentId || !(snapshot === null || snapshot === void 0 || (_snapshot$headers = snapshot.headers) === null || _snapshot$headers === void 0 ? void 0 : _snapshot$headers[segmentId]) && !(snapshot === null || snapshot === void 0 || (_snapshot$footers = snapshot.footers) === null || _snapshot$footers === void 0 ? void 0 : _snapshot$footers[segmentId])) return false;
+		const body = (_model$getSelfOrHeade = model.getSelfOrHeaderFooterModel(segmentId)) === null || _model$getSelfOrHeade === void 0 ? void 0 : _model$getSelfOrHeade.getBody();
+		if (!body || params.expectedDataStream != null && params.expectedDataStream !== body.dataStream || !Number.isInteger(selection.startOffset) || !Number.isInteger(selection.endOffset) || selection.startOffset < 0 || selection.endOffset < selection.startOffset || selection.endOffset > body.dataStream.length - 2) return false;
+		if (!(0, _univerjs_docs.canEditDocumentTargets)(accessor.get(_univerjs_core.IPermissionService), params.unitId, (0, _univerjs_docs.getDocumentEditTargetObjectIds)(model, segmentId, selection))) return false;
+		if ((_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.some((range) => {
+			var _range$properties;
+			return range.rangeType === _univerjs_core.CustomRangeType.FIELD && ((_range$properties = range.properties) === null || _range$properties === void 0 ? void 0 : _range$properties.locked) === _univerjs_core.BooleanNumber.TRUE && selection.startOffset <= range.endIndex && selection.endOffset > range.startIndex;
+		})) return false;
+		const locale = _univerjs_core.LOCALE_META[accessor.get(_univerjs_core.LocaleService).getCurrentLocale()].tag;
+		let properties;
+		if (params.fieldType === "DATE" || params.fieldType === "TIME") {
+			const format = params.format ?? (params.fieldType === "TIME" ? "time" : "short");
+			if (![
+				"short",
+				"long",
+				"time"
+			].includes(format)) return false;
+			properties = createDateTimeField(format, locale, /* @__PURE__ */ new Date());
+		} else {
+			var _accessor$get$getRend, _skeleton$getSkeleton;
+			const skeleton = (_accessor$get$getRend = accessor.get(_univerjs_engine_render.IRenderManagerService).getRenderUnitById(params.unitId)) === null || _accessor$get$getRend === void 0 ? void 0 : _accessor$get$getRend.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+			const pages = skeleton === null || skeleton === void 0 || (_skeleton$getSkeleton = skeleton.getSkeletonData()) === null || _skeleton$getSkeleton === void 0 ? void 0 : _skeleton$getSkeleton.pages;
+			if (!(pages === null || pages === void 0 ? void 0 : pages.length)) return false;
+			const pageIndex = params.segmentPage ?? (active === null || active === void 0 ? void 0 : active.segmentPage) ?? 0;
+			const page = pages[Math.max(0, pageIndex)];
+			if (!page) return false;
+			properties = {
+				fieldType: params.fieldType,
+				instruction: params.fieldType,
+				cachedResult: String(params.fieldType === "PAGE" ? page.pageNumber : (skeleton === null || skeleton === void 0 ? void 0 : skeleton.getCompletedPageCount()) ?? "…")
+			};
+		}
+		const automatic = params.automatic !== false || params.fieldType === "PAGE" || params.fieldType === "NUMPAGES";
+		const dataStream = automatic ? `${_univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_START}${properties.cachedResult}${_univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_END}` : properties.cachedResult;
+		const style = accessor.get(DocMenuStyleService);
+		const textRun = getTextRunForSelection(body, selection, style.getDefaultStyle(), style.getStyleCache(), false);
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(_univerjs_docs.InsertTextCommand.id, {
+			unitId: params.unitId,
+			segmentId,
+			range: selection,
+			debounce: false,
+			body: {
+				dataStream,
+				textRuns: [{
+					...textRun,
+					ts: {
+						...textRun.ts,
+						lang: locale
+					},
+					st: 0,
+					ed: dataStream.length
+				}],
+				customRanges: automatic ? [{
+					startIndex: 0,
+					endIndex: dataStream.length - 1,
+					rangeId: (0, _univerjs_core.generateRandomId)(),
+					rangeType: _univerjs_core.CustomRangeType.FIELD,
+					wholeEntity: false,
+					properties: {
+						...properties,
+						sourceKind: "complex"
+					}
+				}] : []
+			},
+			textRanges: [{
+				...selection,
+				segmentId,
+				segmentPage: params.segmentPage ?? (active === null || active === void 0 ? void 0 : active.segmentPage),
+				startOffset: selection.startOffset + dataStream.length,
+				endOffset: selection.startOffset + dataStream.length,
+				collapsed: true
+			}]
+		});
+	}
+};
+
+//#endregion
+//#region src/commands/commands/refresh-header-footer-fields.command.ts
+const RefreshHeaderFooterFieldsCommand = {
+	id: "doc.command.refresh-header-footer-fields",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler(accessor, params) {
+		if (!params) return false;
+		const model = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(params.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const snapshot = model === null || model === void 0 ? void 0 : model.getSnapshot();
+		if (!model || !snapshot || snapshot.disabled) return false;
+		const permissions = accessor.get(_univerjs_core.IPermissionService);
+		const locale = _univerjs_core.LOCALE_META[accessor.get(_univerjs_core.LocaleService).getCurrentLocale()].tag;
+		const now = /* @__PURE__ */ new Date();
+		const selections = accessor.get(_univerjs_docs.DocSelectionManagerService).getTextRanges({
+			unitId: params.unitId,
+			subUnitId: params.unitId
+		}) ?? [];
+		let actions = null;
+		for (const [segmentId, segment] of Object.entries({
+			"": { body: snapshot.body },
+			...snapshot.headers,
+			...snapshot.footers
+		})) {
+			if (!segment.body) continue;
+			const textX = refreshDateTimeFields(segment.body, locale, now, (field) => (!params.selectionOnly || selections.some((selection) => (selection.segmentId ?? "") === segmentId && selection.startOffset <= field.endIndex && selection.endOffset > field.startIndex)) && (0, _univerjs_docs.canEditDocumentTargets)(permissions, params.unitId, (0, _univerjs_docs.getDocumentEditTargetObjectIds)(model, segmentId, {
+				startOffset: field.startIndex,
+				endOffset: field.endIndex + 1
+			})));
+			if (textX.length) actions = _univerjs_core.JSONX.compose(actions, _univerjs_core.JSONX.getInstance().editOp(textX, (0, _univerjs_core.getRichTextEditPath)(model, segmentId)));
+		}
+		if (_univerjs_core.JSONX.isNoop(actions)) return true;
+		if (!params.onOpen) accessor.get(_univerjs_docs.DocStateChangeManagerService).flushPendingChanges(params.unitId);
+		return Boolean(accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(_univerjs_docs.RichTextEditingMutation.id, {
+			unitId: params.unitId,
+			actions,
+			textRanges: (0, _univerjs_docs.transformDocumentTextRanges)(actions, [...selections]),
+			noHistory: params.onOpen === true,
+			debounce: false,
+			trigger: RefreshHeaderFooterFieldsCommand.id
+		}));
+	}
+};
+const UpdateSelectedDocFieldsCommand = {
+	id: "doc.command.update-selected-fields",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler(accessor) {
+		const model = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (!model) return false;
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(RefreshHeaderFooterFieldsCommand.id, {
+			unitId: model.getUnitId(),
+			selectionOnly: true
+		});
+	}
+};
+function refreshDateTimeFields(body, locale, date, canEdit) {
+	const textX = new _univerjs_core.TextX();
+	let cursor = 0;
+	const ranges = [...body.customRanges ?? []].sort((a, b) => a.startIndex - b.startIndex);
+	for (const field of ranges) {
+		var _body$textRuns, _run$ts;
+		const properties = field.properties;
+		if (field.rangeType !== _univerjs_core.CustomRangeType.FIELD || (properties === null || properties === void 0 ? void 0 : properties.locked) === _univerjs_core.BooleanNumber.TRUE || (properties === null || properties === void 0 ? void 0 : properties.fieldType) !== "DATE" && (properties === null || properties === void 0 ? void 0 : properties.fieldType) !== "TIME" || !canEdit(field) || ranges.some((range) => range !== field && range.startIndex > field.startIndex && range.endIndex < field.endIndex)) continue;
+		const start = field.startIndex;
+		const run = (_body$textRuns = body.textRuns) === null || _body$textRuns === void 0 ? void 0 : _body$textRuns.find((run) => run.st <= start + 1 && run.ed > start + 1);
+		const value = resolveDateTimeField(properties.instruction, (run === null || run === void 0 || (_run$ts = run.ts) === null || _run$ts === void 0 ? void 0 : _run$ts.lang) ?? locale, date);
+		if (value == null || start < cursor || body.dataStream.slice(start + 1, field.endIndex) === value && properties.cachedResult === value) continue;
+		const dataStream = `${_univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_START}${value}${_univerjs_core.DataStreamTreeTokenType.CUSTOM_RANGE_END}`;
+		textX.retain(start - cursor).delete(field.endIndex - start + 1).insert(dataStream.length, {
+			dataStream,
+			textRuns: run ? [{
+				...run,
+				st: 0,
+				ed: dataStream.length
+			}] : [],
+			customRanges: [{
+				...field,
+				startIndex: 0,
+				endIndex: dataStream.length - 1,
+				properties: {
+					...properties,
+					cachedResult: value
+				}
+			}]
+		});
+		cursor = field.endIndex + 1;
+	}
+	return textX.serialize();
+}
+
+//#endregion
+//#region src/commands/operations/doc-header-footer-ribbon.operation.ts
+const DocHeaderFooterRibbonOperation = {
+	id: SidebarDocHeaderFooterPanelOperation.id,
+	type: SidebarDocHeaderFooterPanelOperation.type,
+	handler(accessor, params) {
+		const ribbon = accessor.get(_univerjs_ui.IRibbonService);
+		if ((params === null || params === void 0 ? void 0 : params.value) === "open") ribbon.showContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB, { activate: true });
+		else ribbon.hideContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB);
 		return true;
 	}
 };
@@ -15131,8 +15513,12 @@ let DocEventManagerService = class DocEventManagerService extends _univerjs_core
 	}
 	_initPointer() {
 		let preCursor = _univerjs_engine_render.CURSOR_TYPE.TEXT;
+		let pointing = false;
 		this.disposeWithMe(this.hoverCustomRanges$.subscribe((ranges) => {
-			if (ranges.length) {
+			const nextPointing = ranges.some(({ range }) => range.rangeType !== _univerjs_core.CustomRangeType.FIELD);
+			if (nextPointing === pointing) return;
+			pointing = nextPointing;
+			if (pointing) {
 				preCursor = this._context.scene.getCursor();
 				this._context.scene.setCursor(_univerjs_engine_render.CURSOR_TYPE.POINTER);
 			} else this._context.scene.setCursor(preCursor);
@@ -15255,6 +15641,10 @@ let DocEventManagerService = class DocEventManagerService extends _univerjs_core
 		this._buildBulletBounds();
 		return [...this._bulletBounds];
 	}
+	getCustomRangeBounds() {
+		this._buildCustomRangeBounds();
+		return [...this._customRangeBounds];
+	}
 	getListContextMenuBulletByOffset(offsetX, offsetY) {
 		const point = transformOffset2Bound(offsetX, offsetY, this._context.scene);
 		return this._calcActiveBullet(point) ?? this._calcActiveListParagraph(point);
@@ -15800,133 +16190,51 @@ const OpenDocPermissionPanelOperation = {
 };
 
 //#endregion
-//#region src/controllers/doc-paragraph-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.
-*/
-const paragraphSettingIndexKey$1 = "doc_ui_paragraph-setting-panel";
-let DocParagraphSettingController = class DocParagraphSettingController extends _univerjs_core.Disposable {
-	constructor(_commandService, _sidebarService) {
-		super();
-		this._commandService = _commandService;
-		this._sidebarService = _sidebarService;
-		_defineProperty(this, "_id", void 0);
-	}
-	openPanel() {
-		const props = {
-			header: { title: "docs-ui.doc.slider.paragraphSetting" },
-			id: this._id,
-			children: { label: paragraphSettingIndexKey$1 },
-			width: 300
-		};
-		this._sidebarService.open(props);
-	}
-	closePanel() {
-		this._sidebarService.close(this._id);
-	}
-};
-DocParagraphSettingController = __decorate([__decorateParam(0, _univerjs_core.ICommandService), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService))], DocParagraphSettingController);
-
-//#endregion
-//#region src/commands/operations/doc-paragraph-setting-panel.operation.ts
-const DocParagraphSettingPanelOperation = {
-	id: "sidebar.operation.doc-paragraph-setting-panel",
-	type: _univerjs_core.CommandType.OPERATION,
-	handler: (accessor) => {
-		accessor.get(DocParagraphSettingController).openPanel();
-		return true;
-	}
-};
-
-//#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 _univerjs_core.Disposable {
-	constructor(_sidebarService, _selectionManager) {
-		super();
-		this._sidebarService = _sidebarService;
-		this._selectionManager = _selectionManager;
-		_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
+//#region src/commands/commands/insert-special-character.command.ts
+const InsertSpecialCharacterCommand = {
+	id: "doc.command.insert-special-character",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _docDataModel$getSelf, _getEditorRuntimeConf;
+		if (!(params === null || params === void 0 ? void 0 : params.value)) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const docMenuStyleService = accessor.get(DocMenuStyleService);
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const activeRange = docSelectionManagerService.getActiveTextRange();
+		if (!docDataModel || !activeRange) return false;
+		const { segmentId } = activeRange;
+		const originBody = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
+		if (!originBody) return false;
+		const { value } = params;
+		const curTextRun = getTextRunForSelection(originBody, activeRange, docMenuStyleService.getDefaultStyle(), docMenuStyleService.getStyleCache(), false, ((_getEditorRuntimeConf = getEditorRuntimeConfig(docDataModel)) === null || _getEditorRuntimeConf === void 0 ? void 0 : _getEditorRuntimeConf.inheritParagraphStartStyle) === true);
+		const curCustomRange = getCustomRangeAtPosition(originBody.customRanges ?? [], activeRange.endOffset);
+		const curCustomDecorations = getCustomDecorationAtPosition(originBody.customDecorations ?? [], activeRange.endOffset);
+		return commandService.executeCommand(_univerjs_docs.InsertTextCommand.id, {
+			unitId: docDataModel.getUnitId(),
+			body: {
+				dataStream: value,
+				textRuns: [{
+					...curTextRun,
+					st: 0,
+					ed: value.length
+				}],
+				customRanges: curCustomRange ? [{
+					...curCustomRange,
+					startIndex: 0,
+					endIndex: value.length - 1
+				}] : [],
+				customDecorations: curCustomDecorations.map((customDecoration) => ({
+					...customDecoration,
+					startIndex: 0,
+					endIndex: value.length - 1
+				}))
+			},
+			range: activeRange,
+			segmentId
 		});
 	}
-	closePanel() {
-		this._sidebarService.close(this._panelId);
-	}
-	navigateToSectionEnd(unitId, sectionStart, sectionEnd) {
-		const params = {
-			unitId,
-			subUnitId: unitId
-		};
-		const cursorOffset = Math.max(sectionStart, sectionEnd - 1);
-		this._selectionManager.replaceDocRanges([{
-			startOffset: cursorOffset,
-			endOffset: cursorOffset
-		}], params, true, { shouldFocus: false });
-	}
-};
-DocSectionSettingController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService))], DocSectionSettingController);
-
-//#endregion
-//#region src/commands/operations/doc-section-setting-panel.operation.ts
-const DocSectionSettingPanelOperation = {
-	id: "sidebar.operation.doc-section-setting-panel",
-	type: _univerjs_core.CommandType.OPERATION,
-	handler: (accessor) => {
-		accessor.get(DocSectionSettingController).openPanel();
-		return true;
-	}
 };
 
 //#endregion
@@ -16359,54 +16667,6 @@ const DocOpenPageSettingCommand = {
 	}
 };
 
-//#endregion
-//#region src/commands/commands/insert-special-character.command.ts
-const InsertSpecialCharacterCommand = {
-	id: "doc.command.insert-special-character",
-	type: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _docDataModel$getSelf, _getEditorRuntimeConf;
-		if (!(params === null || params === void 0 ? void 0 : params.value)) return false;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const docMenuStyleService = accessor.get(DocMenuStyleService);
-		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
-		const activeRange = docSelectionManagerService.getActiveTextRange();
-		if (!docDataModel || !activeRange) return false;
-		const { segmentId } = activeRange;
-		const originBody = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
-		if (!originBody) return false;
-		const { value } = params;
-		const curTextRun = getTextRunForSelection(originBody, activeRange, docMenuStyleService.getDefaultStyle(), docMenuStyleService.getStyleCache(), false, ((_getEditorRuntimeConf = getEditorRuntimeConfig(docDataModel)) === null || _getEditorRuntimeConf === void 0 ? void 0 : _getEditorRuntimeConf.inheritParagraphStartStyle) === true);
-		const curCustomRange = getCustomRangeAtPosition(originBody.customRanges ?? [], activeRange.endOffset);
-		const curCustomDecorations = getCustomDecorationAtPosition(originBody.customDecorations ?? [], activeRange.endOffset);
-		return commandService.executeCommand(_univerjs_docs.InsertTextCommand.id, {
-			unitId: docDataModel.getUnitId(),
-			body: {
-				dataStream: value,
-				textRuns: [{
-					...curTextRun,
-					st: 0,
-					ed: value.length
-				}],
-				customRanges: curCustomRange ? [{
-					...curCustomRange,
-					startIndex: 0,
-					endIndex: value.length - 1
-				}] : [],
-				customDecorations: curCustomDecorations.map((customDecoration) => ({
-					...customDecoration,
-					startIndex: 0,
-					endIndex: value.length - 1
-				}))
-			},
-			range: activeRange,
-			segmentId
-		});
-	}
-};
-
 //#endregion
 //#region src/views/const.ts
 /**
@@ -17763,6 +18023,210 @@ function PageSettingMenuItemFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/menu/header-footer-ribbon.ts
+const headerFooterRibbonSchema = {
+	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: { [_univerjs_ui.ContextMenuGroup.FORMAT]: { [UpdateSelectedDocFieldsCommand.id]: {
+		order: 1,
+		menuItemFactory: (accessor) => {
+			const instances = accessor.get(_univerjs_core.IUniverInstanceService);
+			const selections = accessor.get(_univerjs_docs.DocSelectionManagerService);
+			return {
+				id: UpdateSelectedDocFieldsCommand.id,
+				type: _univerjs_ui.MenuItemType.BUTTON,
+				title: "docs-ui.headerFooter.refreshFields",
+				disabled$: disableMenuWithoutDocumentUnitPermission(accessor, _univerjs_protocol.UnitAction.Edit),
+				hidden$: (0, rxjs.combineLatest)([instances.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC), selections.textSelection$.pipe((0, rxjs.startWith)(null))]).pipe((0, rxjs.map)(([model]) => !model || !(selections.getTextRanges({
+					unitId: model.getUnitId(),
+					subUnitId: model.getUnitId()
+				}) ?? []).some((selection) => {
+					var _model$getSelfOrHeade;
+					return (_model$getSelfOrHeade = model.getSelfOrHeaderFooterModel(selection.segmentId)) === null || _model$getSelfOrHeade === void 0 || (_model$getSelfOrHeade = _model$getSelfOrHeade.getBody()) === null || _model$getSelfOrHeade === void 0 || (_model$getSelfOrHeade = _model$getSelfOrHeade.customRanges) === null || _model$getSelfOrHeade === void 0 ? void 0 : _model$getSelfOrHeade.some((field) => field.rangeType === _univerjs_core.CustomRangeType.FIELD && selection.startOffset <= field.endIndex && selection.endOffset > field.startIndex);
+				})))
+			};
+		}
+	} } },
+	[_univerjs_ui.MenuManagerPosition.RIBBON]: { [DOC_HEADER_FOOTER_RIBBON_TAB]: {
+		order: 90,
+		title: "docs-ui.toolbar.headerFooter",
+		contextual: true,
+		...Object.fromEntries([
+			"insertion",
+			"navigation",
+			"options",
+			"position"
+		].map((kind, order) => [`${DOC_HEADER_FOOTER_RIBBON_TAB}.${kind}`, {
+			order,
+			[`${DOC_HEADER_FOOTER_RIBBON_CONTROL}.${kind}`]: {
+				order: 0,
+				gridLayout: {
+					row: 1,
+					column: 1,
+					rowSpan: 2
+				},
+				menuItemFactory: () => ({
+					id: `${DOC_HEADER_FOOTER_RIBBON_CONTROL}.${kind}`,
+					type: _univerjs_ui.MenuItemType.BUTTON,
+					label: {
+						name: DOC_HEADER_FOOTER_RIBBON_CONTROL,
+						hoverable: false,
+						props: { kind }
+					}
+				})
+			}
+		}])),
+		"docs-ui.headerFooter.close": {
+			order: 5,
+			[CloseHeaderFooterCommand.id]: {
+				order: 0,
+				gridLayout: {
+					row: 1,
+					column: 1,
+					rowSpan: 2,
+					showLabel: true
+				},
+				menuItemFactory: () => ({
+					id: CloseHeaderFooterCommand.id,
+					type: _univerjs_ui.MenuItemType.BUTTON,
+					icon: "CloseIcon",
+					title: "docs-ui.headerFooter.closeHeaderFooter",
+					tooltip: "docs-ui.headerFooter.closeHeaderFooter"
+				})
+			}
+		}
+	} }
+};
+
+//#endregion
+//#region src/controllers/doc-paragraph-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.
+*/
+const paragraphSettingIndexKey$1 = "doc_ui_paragraph-setting-panel";
+let DocParagraphSettingController = class DocParagraphSettingController extends _univerjs_core.Disposable {
+	constructor(_commandService, _sidebarService) {
+		super();
+		this._commandService = _commandService;
+		this._sidebarService = _sidebarService;
+		_defineProperty(this, "_id", void 0);
+	}
+	openPanel() {
+		const props = {
+			header: { title: "docs-ui.doc.slider.paragraphSetting" },
+			id: this._id,
+			children: { label: paragraphSettingIndexKey$1 },
+			width: 300
+		};
+		this._sidebarService.open(props);
+	}
+	closePanel() {
+		this._sidebarService.close(this._id);
+	}
+};
+DocParagraphSettingController = __decorate([__decorateParam(0, _univerjs_core.ICommandService), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService))], DocParagraphSettingController);
+
+//#endregion
+//#region src/commands/operations/doc-paragraph-setting-panel.operation.ts
+const DocParagraphSettingPanelOperation = {
+	id: "sidebar.operation.doc-paragraph-setting-panel",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(DocParagraphSettingController).openPanel();
+		return true;
+	}
+};
+
+//#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 _univerjs_core.Disposable {
+	constructor(_sidebarService, _selectionManager) {
+		super();
+		this._sidebarService = _sidebarService;
+		this._selectionManager = _selectionManager;
+		_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);
+	}
+	navigateToSectionEnd(unitId, sectionStart, sectionEnd) {
+		const params = {
+			unitId,
+			subUnitId: unitId
+		};
+		const cursorOffset = Math.max(sectionStart, sectionEnd - 1);
+		this._selectionManager.replaceDocRanges([{
+			startOffset: cursorOffset,
+			endOffset: cursorOffset
+		}], params, true, { shouldFocus: false });
+	}
+};
+DocSectionSettingController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService))], DocSectionSettingController);
+
+//#endregion
+//#region src/commands/operations/doc-section-setting-panel.operation.ts
+const DocSectionSettingPanelOperation = {
+	id: "sidebar.operation.doc-section-setting-panel",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(DocSectionSettingController).openPanel();
+		return true;
+	}
+};
+
 //#endregion
 //#region src/menu/context-menu.ts
 const getDisableOnCollapsedObservable = (accessor) => {
@@ -18046,6 +18510,46 @@ function PasteRibbonMenuFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/menu/display.menu.ts
+const DOC_ZOOM_RATIO_MENU_ID = "doc.menu.zoom-ratio";
+function DocZoomRatioMenuItemFactory(accessor) {
+	const commandService = accessor.get(_univerjs_core.ICommandService);
+	const instanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+	return {
+		id: DOC_ZOOM_RATIO_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SELECTOR,
+		icon: "ZoomInIcon",
+		tooltip: "docs-ui.toolbar.zoom",
+		selectionsCommandId: SetDocZoomRatioOperation.id,
+		selections: DOC_ZOOM_SHORTCUTS.map((value) => ({
+			value,
+			label: `${value}%`,
+			params: () => {
+				var _instanceService$getC;
+				return {
+					unitId: (_instanceService$getC = instanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === null || _instanceService$getC === void 0 ? void 0 : _instanceService$getC.getUnitId(),
+					zoomRatio: value / 100
+				};
+			}
+		})),
+		value$: getDocZoomRatio$(commandService, instanceService),
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function DocFullscreenMenuItemFactory(accessor) {
+	const root = accessor.get(_univerjs_ui.ILayoutService).rootContainerElement;
+	const fullscreen$ = root ? (0, rxjs.merge)((0, rxjs.of)(null), (0, rxjs.fromEvent)(root.ownerDocument, "fullscreenchange")).pipe((0, rxjs.map)(() => root.ownerDocument.fullscreenElement === root), (0, rxjs.distinctUntilChanged)()) : (0, rxjs.of)(false);
+	return {
+		id: _univerjs_ui.ToggleFullscreenOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		tooltip: "docs-ui.toolbar.fullscreen",
+		icon: fullscreen$.pipe((0, rxjs.map)((fullscreen) => fullscreen ? "ShrinkIcon" : "ExpandIcon")),
+		activated$: fullscreen$,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+
 //#endregion
 //#region src/views/paragraph-menu/theme-color.ts
 function getHighlightBackgroundColor(themeService, index) {
@@ -18454,7 +18958,7 @@ function ParagraphMenuInsertBelowSubmenuItemFactory(accessor) {
 	return {
 		id: DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID,
 		type: _univerjs_ui.MenuItemType.SUBITEMS,
-		icon: "TextTypeIcon",
+		icon: "InsertBelowDoubleIcon",
 		title: "docs-ui.rightClick.insertBellow",
 		tooltip: "docs-ui.rightClick.insertBellow",
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
@@ -18672,7 +19176,8 @@ const menuSchema = {
 			order: 0,
 			gridLayout: {
 				row: 2,
-				column: 1
+				column: 1,
+				width: 44
 			},
 			menuItemFactory: BoldMenuItemFactory
 		},
@@ -18680,7 +19185,8 @@ const menuSchema = {
 			order: 1,
 			gridLayout: {
 				row: 2,
-				column: 2
+				column: 2,
+				width: 44
 			},
 			menuItemFactory: ItalicMenuItemFactory
 		},
@@ -18688,7 +19194,8 @@ const menuSchema = {
 			order: 2,
 			gridLayout: {
 				row: 2,
-				column: 3
+				column: 3,
+				width: 44
 			},
 			menuItemFactory: UnderlineMenuItemFactory
 		},
@@ -18696,7 +19203,8 @@ const menuSchema = {
 			order: 3,
 			gridLayout: {
 				row: 2,
-				column: 4
+				column: 4,
+				width: 44
 			},
 			menuItemFactory: StrikeThroughMenuItemFactory
 		},
@@ -18704,7 +19212,8 @@ const menuSchema = {
 			order: 4,
 			gridLayout: {
 				row: 2,
-				column: 5
+				column: 6,
+				width: 44
 			},
 			menuItemFactory: SubscriptMenuItemFactory
 		},
@@ -18712,7 +19221,8 @@ const menuSchema = {
 			order: 5,
 			gridLayout: {
 				row: 2,
-				column: 6
+				column: 5,
+				width: 44
 			},
 			menuItemFactory: SuperscriptMenuItemFactory
 		},
@@ -18722,7 +19232,7 @@ const menuSchema = {
 				row: 1,
 				column: 1,
 				columnSpan: 2,
-				width: 100
+				width: 96
 			},
 			menuItemFactory: HeadingSelectorMenuItemFactory
 		},
@@ -18731,7 +19241,8 @@ const menuSchema = {
 			gridLayout: {
 				row: 1,
 				column: 7,
-				width: 64
+				columnSpan: 2,
+				width: 96
 			},
 			menuItemFactory: FontSizeSelectorMenuItemFactory
 		},
@@ -18741,7 +19252,7 @@ const menuSchema = {
 				row: 1,
 				column: 3,
 				columnSpan: 4,
-				width: 160
+				width: 200
 			},
 			menuItemFactory: FontFamilySelectorMenuItemFactory
 		},
@@ -18749,7 +19260,8 @@ const menuSchema = {
 			order: 8,
 			gridLayout: {
 				row: 2,
-				column: 7
+				column: 8,
+				width: 44
 			},
 			menuItemFactory: TextColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextColorCommand.id]: {
@@ -18761,7 +19273,8 @@ const menuSchema = {
 			order: 9,
 			gridLayout: {
 				row: 2,
-				column: 8
+				column: 7,
+				width: 44
 			},
 			menuItemFactory: BackgroundColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextBackgroundColorCommand.id]: {
@@ -18812,16 +19325,6 @@ const menuSchema = {
 				showLabel: true
 			},
 			menuItemFactory: HeaderFooterMenuItemFactory
-		},
-		[DocOpenPageSettingCommand.id]: {
-			order: 12,
-			gridLayout: {
-				row: 1,
-				column: 4,
-				rowSpan: 2,
-				showLabel: true
-			},
-			menuItemFactory: PageSettingMenuItemFactory
 		}
 	},
 	[_univerjs_ui.RibbonInsertGroup.MEDIA]: {
@@ -18893,7 +19396,35 @@ const menuSchema = {
 				row: 2,
 				column: 3
 			},
-			menuItemFactory: SymbolPickerMenuItemFactory
+			menuItemFactory: SymbolPickerMenuItemFactory
+		}
+	},
+	[_univerjs_ui.RibbonViewGroup.DISPLAY]: {
+		[DocOpenPageSettingCommand.id]: {
+			order: 0,
+			gridLayout: {
+				row: 1,
+				column: 1,
+				rowSpan: 2,
+				showLabel: true
+			},
+			menuItemFactory: PageSettingMenuItemFactory
+		},
+		[DOC_ZOOM_RATIO_MENU_ID]: {
+			order: 1,
+			gridLayout: {
+				row: 1,
+				column: 2
+			},
+			menuItemFactory: DocZoomRatioMenuItemFactory
+		},
+		[_univerjs_ui.ToggleFullscreenOperation.id]: {
+			order: 2,
+			gridLayout: {
+				row: 2,
+				column: 2
+			},
+			menuItemFactory: DocFullscreenMenuItemFactory
 		}
 	},
 	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: {
@@ -19520,6 +20051,9 @@ const menuSchema = {
 
 //#endregion
 //#region src/shortcuts/utils.ts
+function whenTextEditorFocused(contextService) {
+	return contextService.getContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(_univerjs_core.FOCUSING_COMMON_DRAWINGS) && (contextService.getContextValue(_univerjs_core.FOCUSING_DOC) || contextService.getContextValue(_univerjs_core.EDITOR_ACTIVATED) || contextService.getContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR));
+}
 function whenDocAndEditorFocused(contextService) {
 	return contextService.getContextValue(_univerjs_core.FOCUSING_DOC) && contextService.getContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(_univerjs_core.FOCUSING_COMMON_DRAWINGS);
 }
@@ -19534,6 +20068,11 @@ const TabShortCut = {
 	binding: _univerjs_ui.KeyCode.TAB,
 	preconditions: whenDocAndEditorFocused
 };
+const UpdateDocFieldsShortcut = {
+	id: UpdateSelectedDocFieldsCommand.id,
+	binding: _univerjs_ui.KeyCode.F9,
+	preconditions: whenDocAndEditorFocused
+};
 const ShiftTabShortCut = {
 	id: TabCommand.id,
 	binding: _univerjs_ui.KeyCode.TAB | _univerjs_ui.MetaKeys.SHIFT,
@@ -19606,45 +20145,23 @@ const BulletListShortCut = {
 
 //#endregion
 //#region src/views/count-bar/ZoomSlider.tsx
-const ZOOM_MAP = [
-	50,
-	80,
-	100,
-	130,
-	150,
-	170,
-	200,
-	400
-];
 const DOC_ZOOM_RANGE = [10, 400];
 function ZoomSlider() {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const documentDataModel = (0, _univerjs_ui.useObservable)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC).pipe((0, rxjs.filter)((documentDataModel) => documentDataModel != null)), null, false, [univerInstanceService]);
-	const getCurrentZoom = (0, react.useCallback)((docModel = documentDataModel) => {
-		if (!docModel) return 100;
-		return Math.round(getDocEffectiveZoomRatio(docModel) * 100);
-	}, [documentDataModel]);
-	const [zoom, setZoom] = (0, react.useState)(100);
-	(0, react.useEffect)(() => setZoom(getCurrentZoom(documentDataModel)), [documentDataModel, getCurrentZoom]);
-	(0, react.useEffect)(() => {
-		return commandService.onCommandExecuted((commandInfo) => {
-			if (commandInfo.id === SetDocZoomRatioOperation.id) setZoom(getCurrentZoom());
-		}).dispose;
-	}, [commandService, getCurrentZoom]);
+	const zoom = (0, _univerjs_ui.useObservable)(() => getDocZoomRatio$(commandService, univerInstanceService), 100, void 0, [commandService, univerInstanceService]);
 	function handleChange(value) {
-		setZoom(value);
+		const documentDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (documentDataModel == null) return;
-		const zoomRatio = value / 100;
-		commandService.executeCommand(SetDocZoomRatioOperation.id, {
+		return commandService.executeCommand(SetDocZoomRatioOperation.id, {
 			unitId: documentDataModel.getUnitId(),
-			zoomRatio
+			zoomRatio: value / 100
 		});
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.Slider, {
 		min: DOC_ZOOM_RANGE[0],
 		value: zoom,
-		shortcuts: ZOOM_MAP,
+		shortcuts: DOC_ZOOM_SHORTCUTS,
 		onChange: handleChange
 	});
 }
@@ -20543,21 +21060,6 @@ function DocSideMenuContent() {
 
 //#endregion
 //#region src/controllers/ui.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 DocUIController = class DocUIController extends _univerjs_core.Disposable {
 	constructor(_injector, _commandService, _layoutService, _menuManagerService, _uiPartsService, _univerInstanceService, _shortcutService, _configService, _embedInteractionBoundaryService, _embedRuntimeFocusCoordinator) {
 		super();
@@ -20579,6 +21081,7 @@ let DocUIController = class DocUIController extends _univerjs_core.Disposable {
 	_initMenus() {
 		this._menuManagerService.appendRootMenu(floatToolbarMenuSchema);
 		this._menuManagerService.mergeMenu(menuSchema);
+		this._menuManagerService.mergeMenu(headerFooterRibbonSchema);
 	}
 	_initShortCut() {
 		[
@@ -20594,7 +21097,8 @@ let DocUIController = class DocUIController extends _univerjs_core.Disposable {
 			AlignLeftShortCut,
 			OrderListShortCut,
 			BulletListShortCut,
-			TabShortCut
+			TabShortCut,
+			UpdateDocFieldsShortcut
 		].forEach((shortcut) => {
 			this.disposeWithMe(this._shortcutService.registerShortcut(shortcut));
 		});
@@ -20603,6 +21107,7 @@ let DocUIController = class DocUIController extends _univerjs_core.Disposable {
 		this._initMenus();
 		this._initFocusHandler();
 		this._initCommands();
+		this._initDateTimeFields();
 		this._initUiParts();
 		this._initShortCut();
 	}
@@ -20611,10 +21116,25 @@ let DocUIController = class DocUIController extends _univerjs_core.Disposable {
 			OpenDocPermissionPanelOperation,
 			OpenDocParagraphPermissionOperation,
 			CoreHeaderFooterCommand,
+			InsertHeaderFooterFieldCommand,
+			RefreshHeaderFooterFieldsCommand,
+			UpdateSelectedDocFieldsCommand,
 			OpenHeaderFooterPanelCommand,
-			SidebarDocHeaderFooterPanelOperation
+			DocHeaderFooterRibbonOperation
 		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
 	}
+	_initDateTimeFields() {
+		const refreshed = /* @__PURE__ */ new WeakSet();
+		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC).subscribe((model) => {
+			if (model && !refreshed.has(model)) {
+				refreshed.add(model);
+				this._commandService.syncExecuteCommand(RefreshHeaderFooterFieldsCommand.id, {
+					unitId: model.getUnitId(),
+					onOpen: true
+				});
+			}
+		}));
+	}
 	_initFocusHandler() {
 		this.disposeWithMe(this._layoutService.registerFocusHandler(_univerjs_core.UniverInstanceType.UNIVER_DOC, (unitId) => {
 			if (this._shouldPreserveEmbedFocus(unitId)) return;
@@ -20912,7 +21432,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -21159,8 +21679,8 @@ var HeaderFooterContentCover = class extends _univerjs_engine_render.BaseObject
 					right: pageLeft + page.pageWidth,
 					bottom: pageTop + page.pageHeight
 				});
-				const header = (_data$skeHeaders$get = data.skeHeaders.get(page.headerId)) === null || _data$skeHeaders$get === void 0 ? void 0 : _data$skeHeaders$get.get(page.pageWidth);
-				const footer = (_data$skeFooters$get = data.skeFooters.get(page.footerId)) === null || _data$skeFooters$get === void 0 ? void 0 : _data$skeFooters$get.get(page.pageWidth);
+				const header = (_data$skeHeaders$get = data.skeHeaders.get(page.headerId)) === null || _data$skeHeaders$get === void 0 ? void 0 : _data$skeHeaders$get.get(page.headerLayoutKey ?? page.pageWidth);
+				const footer = (_data$skeFooters$get = data.skeFooters.get(page.footerId)) === null || _data$skeFooters$get === void 0 ? void 0 : _data$skeFooters$get.get(page.footerLayoutKey ?? page.pageWidth);
 				const local = [];
 				if (header) this._collectTextAndTables(header, pageLeft + page.marginLeft, pageTop + header.marginTop, local);
 				if (footer) this._collectTextAndTables(footer, pageLeft + page.marginLeft, pageTop + page.pageHeight - footer.height - footer.marginBottom, local);
@@ -21618,7 +22138,7 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 		const body = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(normalizedSegmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
 		if (body == null) return;
 		const dataStreamLength = body.dataStream.length ?? Number.POSITIVE_INFINITY;
-		const customRanges = docDataModel.getCustomRanges() ?? [];
+		const customRanges = body.customRanges ?? [];
 		if (granularity !== "character") {
 			const nextOffset = this._getCursorOffsetByGranularity(skeleton, focusOffset, direction, granularity, normalizedSegmentId, normalizedSegmentPage, dataStreamLength, body.dataStream);
 			if (nextOffset == null || nextOffset === focusOffset) return;
@@ -21690,7 +22210,7 @@ let DocMoveCursorController = class DocMoveCursorController extends _univerjs_co
 		const body = (_docDataModel$getSelf2 = docDataModel.getSelfOrHeaderFooterModel(normalizedSegmentId)) === null || _docDataModel$getSelf2 === void 0 ? void 0 : _docDataModel$getSelf2.getBody();
 		if (body == null) return;
 		const dataStreamLength = body.dataStream.length ?? Number.POSITIVE_INFINITY;
-		const customRanges = docDataModel.getCustomRanges() ?? [];
+		const customRanges = body.customRanges ?? [];
 		if (granularity !== "character") {
 			let cursorOffset;
 			if (!activeRange.collapsed || allRanges.length > 1) {
@@ -22313,26 +22833,33 @@ function DocPasteOptions() {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
+	const editorService = (0, _univerjs_ui.useDependency)(IEditorService);
 	const state = (0, _univerjs_ui.useObservable)(clipboard.pasteOptions$, null);
 	const [busy, setBusy] = (0, react.useState)(false);
 	const [open, setOpen] = (0, react.useState)(false);
+	const focusEditor = () => {
+		const editor = state && clipboard.isPasteOptionsEnabled(state.unitId) && editorService.getEditor(state.unitId);
+		if (editor) editor.focus();
+		else layoutService.focus();
+	};
 	const changeMode = async (value) => {
 		setBusy(true);
 		try {
 			await commandService.executeCommand(DocChangePasteModeCommand.id, { value });
 		} finally {
 			setBusy(false);
-			layoutService.focus();
+			focusEditor();
 		}
 	};
 	if (!state) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+		"data-u-editor-interaction-boundary": "true",
 		align: "start",
 		open,
 		onOpenChange: setOpen,
 		onCloseAutoFocus: (event) => {
 			event.preventDefault();
-			layoutService.focus();
+			focusEditor();
 		},
 		onEscapeKeyDown: () => clipboard.dismissPasteOptions(),
 		items: DOC_PASTE_OPTIONS.map((option) => ({
@@ -22344,6 +22871,7 @@ function DocPasteOptions() {
 			onSelect: () => changeMode(option.value)
 		})),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+			"data-u-editor-interaction-boundary": "true",
 			size: "small",
 			disabled: busy,
 			"aria-label": localeService.t("docs-ui.pasteOptions.title"),
@@ -22352,7 +22880,7 @@ function DocPasteOptions() {
 			onKeyDown: (event) => {
 				if (event.key === "Escape") {
 					clipboard.dismissPasteOptions();
-					layoutService.focus();
+					focusEditor();
 				}
 			},
 			className: "univer-shadow-sm",
@@ -22611,28 +23139,37 @@ function useHeaderFooterOptions(unitId) {
 			page
 		};
 	};
-	const [options, setOptions] = (0, react.useState)(() => {
-		var _getCurrentSectionCon;
-		const config = (_getCurrentSectionCon = getCurrentSectionContext()) === null || _getCurrentSectionCon === void 0 ? void 0 : _getCurrentSectionCon.config;
-		return {
-			marginHeader: (config === null || config === void 0 ? void 0 : config.marginHeader) ?? 0,
-			marginFooter: (config === null || config === void 0 ? void 0 : config.marginFooter) ?? 0,
-			useFirstPageHeaderFooter: (config === null || config === void 0 ? void 0 : config.useFirstPageHeaderFooter) ?? _univerjs_core.BooleanNumber.FALSE,
-			evenAndOddHeaders: (config === null || config === void 0 ? void 0 : config.evenAndOddHeaders) ?? _univerjs_core.BooleanNumber.FALSE
+	const [, refresh] = (0, react.useReducer)((revision) => revision + 1, 0);
+	(0, react.useEffect)(() => {
+		const commandListener = commandService.onCommandExecuted((command) => {
+			var _command$params;
+			if (command.id === _univerjs_docs.RichTextEditingMutation.id && ((_command$params = command.params) === null || _command$params === void 0 ? void 0 : _command$params.unitId) === unitId) refresh();
+		});
+		const segmentListener = docSelectionRenderService.segmentContext$.subscribe(() => refresh());
+		return () => {
+			commandListener.dispose();
+			segmentListener.unsubscribe();
 		};
-	});
+	}, [
+		commandService,
+		docSelectionRenderService,
+		unitId
+	]);
 	const sectionContext = getCurrentSectionContext();
+	const config = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config;
+	const options = {
+		marginHeader: (config === null || config === void 0 ? void 0 : config.marginHeader) ?? 0,
+		marginFooter: (config === null || config === void 0 ? void 0 : config.marginFooter) ?? 0,
+		useFirstPageHeaderFooter: (config === null || config === void 0 ? void 0 : config.useFirstPageHeaderFooter) ?? _univerjs_core.BooleanNumber.FALSE,
+		evenAndOddHeaders: (config === null || config === void 0 ? void 0 : config.evenAndOddHeaders) ?? _univerjs_core.BooleanNumber.FALSE
+	};
 	const headerFooterKind = ((_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.with(_univerjs_docs.DocSkeletonManagerService)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.getViewModel()) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.getEditArea()) === _univerjs_engine_render.DocumentEditArea.FOOTER ? "footer" : "header";
 	const variant = getHeaderFooterVariant((sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config) ?? {}, docSelectionRenderService.getSegmentPage(), sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page);
 	const referenceKey = (0, _univerjs_core.getSectionHeaderFooterReferenceKey)(headerFooterKind, variant);
 	const canLinkToPrevious = ((sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionIndex) ?? -1) > 0;
-	const [linkedToPrevious, setLinkedToPrevious] = (0, react.useState)(canLinkToPrevious && !(sectionContext === null || sectionContext === void 0 || (_sectionContext$secti = sectionContext.section) === null || _sectionContext$secti === void 0 ? void 0 : _sectionContext$secti[referenceKey]));
-	const handleCheckboxChange = (val, type) => {
+	const linkedToPrevious = canLinkToPrevious && !(sectionContext === null || sectionContext === void 0 || (_sectionContext$secti = sectionContext.section) === null || _sectionContext$secti === void 0 ? void 0 : _sectionContext$secti[referenceKey]);
+	const handleCheckboxChange = async (val, type) => {
 		var _renderManagerService3;
-		setOptions((prev) => ({
-			...prev,
-			[type]: val ? _univerjs_core.BooleanNumber.TRUE : _univerjs_core.BooleanNumber.FALSE
-		}));
 		const sectionContext = getCurrentSectionContext();
 		const documentStyle = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config;
 		const docSkeletonManagerService = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService);
@@ -22657,7 +23194,7 @@ function useHeaderFooterOptions(unitId) {
 		if (needCreateHeaderFooter) {
 			const segmentId = (0, _univerjs_core.generateRandomId)(6);
 			if (needChangeSegmentId) docSelectionRenderService.setSegment(segmentId);
-			commandService.executeCommand(CoreHeaderFooterCommandId, {
+			await commandService.executeCommand(CoreHeaderFooterCommandId, {
 				unitId,
 				segmentId,
 				headerFooterProps: { [type]: val ? _univerjs_core.BooleanNumber.TRUE : _univerjs_core.BooleanNumber.FALSE },
@@ -22671,7 +23208,7 @@ function useHeaderFooterOptions(unitId) {
 				[type]: val ? _univerjs_core.BooleanNumber.TRUE : _univerjs_core.BooleanNumber.FALSE
 			}, editArea, segmentPageIndex, sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page);
 			if (needFocusSegmentId && needFocusSegmentId !== prevSegmentId) docSelectionRenderService.setSegment(needFocusSegmentId);
-			commandService.executeCommand(CoreHeaderFooterCommandId, {
+			await commandService.executeCommand(CoreHeaderFooterCommandId, {
 				unitId,
 				headerFooterProps: { [type]: val ? _univerjs_core.BooleanNumber.TRUE : _univerjs_core.BooleanNumber.FALSE },
 				sectionId: sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionId
@@ -22680,21 +23217,16 @@ function useHeaderFooterOptions(unitId) {
 		layoutService.focus();
 	};
 	const handleMarginChange = async (val, type) => {
-		var _getCurrentSectionCon2;
-		setOptions((prev) => ({
-			...prev,
-			[type]: val
-		}));
+		var _getCurrentSectionCon;
 		await commandService.executeCommand(CoreHeaderFooterCommandId, {
 			unitId,
 			headerFooterProps: { [type]: val },
-			sectionId: (_getCurrentSectionCon2 = getCurrentSectionContext()) === null || _getCurrentSectionCon2 === void 0 ? void 0 : _getCurrentSectionCon2.sectionId
+			sectionId: (_getCurrentSectionCon = getCurrentSectionContext()) === null || _getCurrentSectionCon === void 0 ? void 0 : _getCurrentSectionCon.sectionId
 		});
-		docSelectionRenderService.removeAllRanges();
 		docSelectionRenderService.blur();
 	};
 	const closeHeaderFooter = () => {
-		commandService.executeCommand(CloseHeaderFooterCommand.id, { unitId });
+		return commandService.executeCommand(CloseHeaderFooterCommand.id, { unitId });
 	};
 	const handleLinkToPreviousChange = async (linked) => {
 		var _renderManagerService4;
@@ -22713,7 +23245,6 @@ function useHeaderFooterOptions(unitId) {
 			linkedToPrevious: linked,
 			...linked ? {} : { segmentId }
 		})) return;
-		setLinkedToPrevious(linked);
 		docSelectionRenderService.setSegment(linked ? previousSegmentId ?? "" : segmentId);
 		layoutService.focus();
 	};
@@ -24089,6 +24620,7 @@ let MobileComponentsController = class MobileComponentsController extends _unive
 			H5Icon: _univerjs_icons.H5Icon,
 			HeaderFooterIcon: _univerjs_icons.HeaderFooterIcon,
 			HorizontallyIcon: _univerjs_icons.HorizontallyIcon,
+			InsertBelowDoubleIcon: _univerjs_icons.InsertBelowDoubleIcon,
 			InsertDoubleIcon: _univerjs_icons.InsertDoubleIcon,
 			InsertRowAboveDoubleIcon: _univerjs_icons.InsertRowAboveDoubleIcon,
 			InsertRowBelowDoubleIcon: _univerjs_icons.InsertRowBelowDoubleIcon,
@@ -24121,6 +24653,7 @@ let MobileComponentsController = class MobileComponentsController extends _unive
 			TodoListDoubleIcon: _univerjs_icons.TodoListDoubleIcon,
 			UnderlineIcon: _univerjs_icons.UnderlineIcon,
 			UnorderIcon: _univerjs_icons.UnorderIcon,
+			ZoomInIcon: _univerjs_icons.ZoomInIcon,
 			DefaultTextColorIcon,
 			HeaderTextColorIcon,
 			MoreRightIcon: _univerjs_icons.MoreRightIcon,
@@ -25415,9 +25948,9 @@ let DocPasteOptionsRenderController = class DocPasteOptionsRenderController exte
 		this._context = _context;
 		this._clipboard = _clipboard;
 		_defineProperty(this, "_popup", void 0);
-		if ((0, _univerjs_core.isInternalEditorID)(_context.unitId)) return;
 		const mobile = contextService.getContextValue(_univerjs_ui.MOBILE_UI_MODE) === true;
 		this.disposeWithMe(selection.onKeydown$.subscribe(({ event }) => {
+			if (!this._clipboard.isPasteOptionsEnabled(this._context.unitId)) return;
 			const key = event;
 			if ((key.ctrlKey || key.metaKey) && key.shiftKey && key.key.toLowerCase() === "v") this._clipboard.setNextPasteMode("text");
 			else if (![
@@ -25430,12 +25963,17 @@ let DocPasteOptionsRenderController = class DocPasteOptionsRenderController exte
 				this._clipboard.dismissPasteOptions();
 			}
 		}));
-		this.disposeWithMe(selection.onInputBefore$.subscribe(() => this._clipboard.dismissPasteOptions()));
+		this.disposeWithMe(selection.onInputBefore$.subscribe(() => {
+			if (this._clipboard.isPasteOptionsEnabled(this._context.unitId)) this._clipboard.dismissPasteOptions();
+		}));
 		this.disposeWithMe(selection.onPointerDown$.subscribe(() => {
+			if (!this._clipboard.isPasteOptionsEnabled(this._context.unitId)) return;
 			this._clipboard.setNextPasteMode("source");
 			if (!mobile) this._clipboard.dismissPasteOptions();
 		}));
-		this.disposeWithMe(selection.onBlur$.subscribe(() => this._clipboard.setNextPasteMode("source")));
+		this.disposeWithMe(selection.onBlur$.subscribe(() => {
+			if (this._clipboard.isPasteOptionsEnabled(this._context.unitId)) this._clipboard.setNextPasteMode("source");
+		}));
 		this.disposeWithMe(this._clipboard.pasteOptions$.subscribe((state) => {
 			var _this$_popup;
 			(_this$_popup = this._popup) === null || _this$_popup === void 0 || _this$_popup.dispose();
@@ -25455,7 +25993,7 @@ let DocPasteOptionsRenderController = class DocPasteOptionsRenderController exte
 		this.disposeWithMe(() => {
 			var _this$_popup2;
 			(_this$_popup2 = this._popup) === null || _this$_popup2 === void 0 || _this$_popup2.dispose();
-			this._clipboard.dismissPasteOptions();
+			if (this._popup) this._clipboard.dismissPasteOptions();
 		});
 	}
 };
@@ -26492,8 +27030,8 @@ var DocPrintInterceptorService = class extends _univerjs_core.Disposable {
 		const page = data.pages[pageIndex];
 		if (!page) return drawingIds;
 		collectPageDrawingIds(page, drawingIds);
-		const header = (_data$skeHeaders$get = data.skeHeaders.get(page.headerId)) === null || _data$skeHeaders$get === void 0 ? void 0 : _data$skeHeaders$get.get(page.pageWidth);
-		const footer = (_data$skeFooters$get = data.skeFooters.get(page.footerId)) === null || _data$skeFooters$get === void 0 ? void 0 : _data$skeFooters$get.get(page.pageWidth);
+		const header = (_data$skeHeaders$get = data.skeHeaders.get(page.headerId)) === null || _data$skeHeaders$get === void 0 ? void 0 : _data$skeHeaders$get.get(page.headerLayoutKey ?? page.pageWidth);
+		const footer = (_data$skeFooters$get = data.skeFooters.get(page.footerId)) === null || _data$skeFooters$get === void 0 ? void 0 : _data$skeFooters$get.get(page.footerLayoutKey ?? page.pageWidth);
 		if (header) collectPageDrawingIds(header, drawingIds);
 		if (footer) collectPageDrawingIds(footer, drawingIds);
 		return drawingIds;
@@ -27494,6 +28032,319 @@ UniverDocsMobileUIPlugin = __decorate([
 	__decorateParam(4, _univerjs_core.IConfigService)
 ], UniverDocsMobileUIPlugin);
 
+//#endregion
+//#region src/views/header-footer/panel/DocHeaderFooterFields.tsx
+function DocHeaderFooterFields({ unitId, disabled }) {
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	(0, _univerjs_ui.useObservable)(localeService.currentLocale$);
+	const commands = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const layout = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
+	const shortcuts = (0, _univerjs_ui.useDependency)(_univerjs_ui.IShortcutService);
+	const selections = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocSelectionManagerService);
+	const instances = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const [target, setTarget] = (0, react.useState)(null);
+	const [format, setFormat] = (0, react.useState)("short");
+	const [automatic, setAutomatic] = (0, react.useState)(true);
+	const [error, setError] = (0, react.useState)(false);
+	const [previewDate, setPreviewDate] = (0, react.useState)(() => /* @__PURE__ */ new Date());
+	const locale = _univerjs_core.LOCALE_META[localeService.getCurrentLocale()].tag;
+	const dialogOpen = target !== null;
+	const dialogFocusRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		var _instances$getFocused;
+		if (dialogOpen) return;
+		const focus = dialogFocusRef.current;
+		dialogFocusRef.current = null;
+		if ((focus === null || focus === void 0 ? void 0 : focus.unitId) === unitId && instances.getUnit(unitId) && ((_instances$getFocused = instances.getFocusedUnit()) === null || _instances$getFocused === void 0 ? void 0 : _instances$getFocused.getUnitId()) === focus.focusedUnitId) layout.focus(unitId);
+	}, [
+		dialogOpen,
+		instances,
+		layout,
+		unitId
+	]);
+	(0, react.useEffect)(() => {
+		if (!dialogOpen) return;
+		const escape = shortcuts.forceEscape();
+		return () => escape.dispose();
+	}, [dialogOpen, shortcuts]);
+	function restoreFocus(event) {
+		event.preventDefault();
+		layout.focus(unitId);
+	}
+	function openDateTime() {
+		var _instances$getUnit, _instances$getFocused2;
+		const selection = selections.getActiveTextRange();
+		const body = (_instances$getUnit = instances.getUnit(unitId)) === null || _instances$getUnit === void 0 || (_instances$getUnit = _instances$getUnit.getSelfOrHeaderFooterModel(selection === null || selection === void 0 ? void 0 : selection.segmentId)) === null || _instances$getUnit === void 0 ? void 0 : _instances$getUnit.getBody();
+		if (!(selection === null || selection === void 0 ? void 0 : selection.segmentId) || !body) return;
+		dialogFocusRef.current = {
+			unitId,
+			focusedUnitId: (_instances$getFocused2 = instances.getFocusedUnit()) === null || _instances$getFocused2 === void 0 ? void 0 : _instances$getFocused2.getUnitId()
+		};
+		setTarget({
+			unitId,
+			selection: { ...selection },
+			segmentId: selection.segmentId,
+			segmentPage: selection.segmentPage,
+			expectedDataStream: body.dataStream
+		});
+		setPreviewDate(/* @__PURE__ */ new Date());
+		setError(false);
+	}
+	async function insertDateTime() {
+		if (!target) return;
+		if (await commands.executeCommand(InsertHeaderFooterFieldCommand.id, {
+			...target,
+			fieldType: format === "time" ? "TIME" : "DATE",
+			format,
+			automatic
+		})) setTarget(null);
+		else setError(true);
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-flex-col univer-gap-1 univer-text-xs",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+				onCloseAutoFocus: restoreFocus,
+				disabled,
+				items: [
+					{
+						type: "item",
+						children: localeService.t("docs-ui.headerFooter.currentPage"),
+						onSelect: () => commands.executeCommand(InsertHeaderFooterFieldCommand.id, {
+							unitId,
+							fieldType: "PAGE"
+						})
+					},
+					{
+						type: "item",
+						children: localeService.t("docs-ui.headerFooter.totalPages"),
+						onSelect: () => commands.executeCommand(InsertHeaderFooterFieldCommand.id, {
+							unitId,
+							fieldType: "NUMPAGES"
+						})
+					},
+					{ type: "separator" },
+					{
+						type: "item",
+						children: localeService.t("docs-ui.headerFooter.refreshFields"),
+						onSelect: () => commands.executeCommand(RefreshHeaderFooterFieldsCommand.id, { unitId })
+					}
+				],
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+					className: "univer-justify-start",
+					"data-u-command": InsertHeaderFooterFieldCommand.id,
+					size: "small",
+					variant: "text",
+					disabled,
+					onMouseDown: (event) => event.preventDefault(),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.NumberIcon, { "aria-hidden": "true" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-flex-1 univer-text-start",
+							children: localeService.t("docs-ui.headerFooter.pageNumber")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { "aria-hidden": "true" })
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+				className: "univer-justify-start",
+				"data-u-command": InsertHeaderFooterFieldCommand.id,
+				size: "small",
+				variant: "text",
+				disabled,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: openDateTime,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CalendarIcon, { "aria-hidden": "true" }), localeService.t("docs-ui.headerFooter.dateTime")]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dialog, {
+				open: dialogOpen,
+				width: 360,
+				title: localeService.t("docs-ui.headerFooter.dateTime"),
+				showOk: true,
+				showCancel: true,
+				onClose: () => setTarget(null),
+				onCancel: () => setTarget(null),
+				onOk: insertDateTime,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-flex univer-flex-col univer-gap-4",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+							align: "start",
+							className: "univer-w-[--radix-popper-anchor-width]",
+							items: [{
+								type: "radio",
+								value: format,
+								hideIndicator: true,
+								onSelect: (value) => setFormat(value),
+								options: [
+									"short",
+									"long",
+									"time"
+								].map((value) => ({
+									value,
+									label: createDateTimeField(value, locale, previewDate).cachedResult
+								}))
+							}],
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+								"aria-label": localeService.t("docs-ui.headerFooter.dateTime"),
+								className: _univerjs_design.selectClassName,
+								"data-u-comp": "select",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "univer-flex-1 univer-truncate univer-text-start",
+									children: createDateTimeField(format, locale, previewDate).cachedResult
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { "aria-hidden": "true" })]
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+							checked: automatic,
+							onChange: (value) => setAutomatic(Boolean(value)),
+							children: localeService.t("docs-ui.headerFooter.updateAutomatically")
+						}),
+						error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							role: "alert",
+							children: localeService.t("docs-ui.headerFooter.insertFailed")
+						})
+					]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/views/header-footer/panel/DocHeaderFooterRibbonControl.tsx
+function DocHeaderFooterRibbonControl(props) {
+	const instances = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	(0, _univerjs_ui.useObservable)(localeService.currentLocale$);
+	const document = (0, _univerjs_ui.useObservable)(() => instances.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC), void 0, false, [instances]);
+	const containerRef = (0, react.useRef)(null);
+	const [compact, setCompact] = (0, react.useState)(false);
+	const { kind } = props;
+	(0, react.useEffect)(() => {
+		var _containerRef$current;
+		const toolbar = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest("[role=\"toolbar\"]");
+		if (!toolbar || kind === "insertion") return;
+		const thresholds = {
+			position: 1100,
+			options: 900,
+			navigation: 650
+		};
+		const resize = () => setCompact(toolbar.getBoundingClientRect().width < thresholds[kind]);
+		const observer = new ResizeObserver(resize);
+		observer.observe(toolbar);
+		return () => observer.disconnect();
+	}, [kind, document]);
+	if (!document) return null;
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderFooterRibbonControl, {
+		...props,
+		unitId: document.getUnitId()
+	}, document.getUnitId());
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: containerRef,
+		"data-u-command": OpenHeaderFooterPanelCommand.id,
+		className: "univer-flex univer-items-center univer-whitespace-nowrap",
+		children: compact && kind !== "insertion" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+			items: [{
+				type: "custom",
+				className: "univer-p-2",
+				children: content
+			}],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				"data-u-command": OpenHeaderFooterPanelCommand.id,
+				size: "small",
+				variant: "text",
+				onMouseDown: (event) => event.preventDefault(),
+				children: localeService.t(`docs-ui.headerFooter.${kind}`)
+			})
+		}) : content
+	});
+}
+function HeaderFooterRibbonControl({ kind, unitId }) {
+	var _instances$getUnit, _renders$getRenderUni;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const renders = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const permissionService = (0, _univerjs_ui.useDependency)(_univerjs_core.IPermissionService);
+	(0, _univerjs_ui.useObservable)(permissionService.permissionPointUpdate$);
+	const instances = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const disabled = Boolean((_instances$getUnit = instances.getUnit(unitId)) === null || _instances$getUnit === void 0 ? void 0 : _instances$getUnit.getSnapshot().disabled) || !(0, _univerjs_docs.getDocumentPermissionValue)(permissionService, unitId, unitId, _univerjs_protocol.UnitAction.Edit);
+	const { canLinkToPrevious, linkedToPrevious, options, handleLinkToPreviousChange, handleCheckboxChange, handleMarginChange } = useHeaderFooterOptions(unitId);
+	const area = (_renders$getRenderUni = renders.getRenderUnitById(unitId)) === null || _renders$getRenderUni === void 0 ? void 0 : _renders$getRenderUni.with(_univerjs_docs.DocSkeletonManagerService).getViewModel().getEditArea();
+	if (kind === "insertion") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocHeaderFooterFields, {
+		unitId,
+		disabled
+	});
+	if (kind === "navigation") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-grid univer-grid-cols-[auto_auto] univer-items-center univer-gap-x-2 univer-gap-y-1 univer-text-start univer-text-xs",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				"data-u-command": OpenHeaderFooterPanelCommand.id,
+				size: "small",
+				variant: "text",
+				disabled: disabled || area === _univerjs_engine_render.DocumentEditArea.HEADER,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => commandService.executeCommand(OpenHeaderFooterPanelCommand.id, { editArea: _univerjs_engine_render.DocumentEditArea.HEADER }),
+				children: localeService.t("docs-ui.headerFooter.goToHeader")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+				disabled: disabled || !canLinkToPrevious,
+				checked: linkedToPrevious,
+				onChange: (value) => handleLinkToPreviousChange(Boolean(value)),
+				children: localeService.t("docs-ui.headerFooter.linkToPrevious")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				"data-u-command": OpenHeaderFooterPanelCommand.id,
+				size: "small",
+				variant: "text",
+				disabled: disabled || area === _univerjs_engine_render.DocumentEditArea.FOOTER,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => commandService.executeCommand(OpenHeaderFooterPanelCommand.id, { editArea: _univerjs_engine_render.DocumentEditArea.FOOTER }),
+				children: localeService.t("docs-ui.headerFooter.goToFooter")
+			})
+		]
+	});
+	if (kind === "options") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-flex-col univer-gap-2 univer-text-start univer-text-xs",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+			disabled,
+			checked: options.useFirstPageHeaderFooter === _univerjs_core.BooleanNumber.TRUE,
+			onChange: (value) => handleCheckboxChange(Boolean(value), "useFirstPageHeaderFooter"),
+			children: localeService.t("docs-ui.headerFooter.firstPageCheckBox")
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+			disabled,
+			checked: options.evenAndOddHeaders === _univerjs_core.BooleanNumber.TRUE,
+			onChange: (value) => handleCheckboxChange(Boolean(value), "evenAndOddHeaders"),
+			children: localeService.t("docs-ui.headerFooter.oddEvenCheckBox")
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-flex-col univer-gap-1 univer-text-start univer-text-xs",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "univer-grid univer-grid-cols-[1fr_5rem] univer-items-center univer-gap-x-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-ui.headerFooter.headerTopMargin") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+				disabled,
+				min: 0,
+				max: 200,
+				precision: 1,
+				value: options.marginHeader,
+				onChange: (value) => handleMarginChange(value ?? 0, "marginHeader")
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "univer-grid univer-grid-cols-[1fr_5rem] univer-items-center univer-gap-x-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("docs-ui.headerFooter.footerBottomMargin") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+				disabled,
+				min: 0,
+				max: 200,
+				precision: 1,
+				value: options.marginFooter,
+				onChange: (value) => handleMarginChange(value ?? 0, "marginFooter")
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region src/views/paragraph-menu/component-keys.ts
 /**
@@ -27551,6 +28402,10 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 		var _this$_paragraphMenu2;
 		return ((_this$_paragraphMenu2 = this._paragraphMenu) === null || _this$_paragraphMenu2 === void 0 ? void 0 : _this$_paragraphMenu2.target) ?? null;
 	}
+	get focusedTableTarget() {
+		var _this$_focusedTableMe;
+		return ((_this$_focusedTableMe = this._focusedTableMenu) === null || _this$_focusedTableMe === void 0 ? void 0 : _this$_focusedTableMe.target) ?? null;
+	}
 	setBlockMenuDragging(isDragging) {
 		this._isBlockMenuDragging = isDragging;
 		if (isDragging) this._dragInteraction ??= this._docLayoutInteractionService.beginInteraction();
@@ -27578,6 +28433,11 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 		_defineProperty(this, "_paragraphMenu", null);
 		_defineProperty(this, "_activeTarget$", new rxjs.BehaviorSubject(null));
 		_defineProperty(this, "activeTarget$", this._activeTarget$.asObservable());
+		_defineProperty(this, "_focusedTableMenu", null);
+		_defineProperty(this, "_focusedTableTarget$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "focusedTableTarget$", this._focusedTableTarget$.asObservable());
+		_defineProperty(this, "_focusedTableMenuDismiss$", new rxjs.Subject());
+		_defineProperty(this, "focusedTableMenuDismiss$", this._focusedTableMenuDismiss$.asObservable());
 		_defineProperty(this, "_slashMenuRequest$", new rxjs.BehaviorSubject(null));
 		_defineProperty(this, "slashMenuRequest$", this._slashMenuRequest$.asObservable());
 		_defineProperty(this, "_isBlockMenuDragging", false);
@@ -27593,6 +28453,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 				this._isBlockMenuDragging = false;
 				this.hideParagraphMenu(true);
 			}
+			if (this._focusedTableMenu && !this._canEditDocument(this._focusedTableMenu.target.menuRange)) this.hideFocusedTableMenu();
 		}));
 	}
 	_isCursorInActiveParagraph() {
@@ -27629,9 +28490,11 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 	_hasExpandedSelection() {
 		return this._hasExpandedSelectionRanges(this._docSelectionManagerService.getDocRanges());
 	}
-	setParagraphMenuActive(active) {
-		if (this._paragraphMenu) this._paragraphMenu.active = active;
-		if (active && this._paragraphMenu) this._menuInteraction ??= this._docLayoutInteractionService.beginInteraction();
+	setParagraphMenuActive(active, focusedTable = false) {
+		var _this$_paragraphMenu3, _this$_focusedTableMe2;
+		const menu = focusedTable ? this._focusedTableMenu : this._paragraphMenu;
+		if (menu) menu.active = active;
+		if (((_this$_paragraphMenu3 = this._paragraphMenu) === null || _this$_paragraphMenu3 === void 0 ? void 0 : _this$_paragraphMenu3.active) || ((_this$_focusedTableMe2 = this._focusedTableMenu) === null || _this$_focusedTableMe2 === void 0 ? void 0 : _this$_focusedTableMe2.active)) this._menuInteraction ??= this._docLayoutInteractionService.beginInteraction();
 		else {
 			var _this$_menuInteractio;
 			(_this$_menuInteractio = this._menuInteraction) === null || _this$_menuInteractio === void 0 || _this$_menuInteractio.dispose();
@@ -27640,7 +28503,9 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 	}
 	_init() {
 		const handleHoverTarget = (paragraph, tableBound) => {
+			var _this$_focusedTableMe3;
 			if (this._isBlockMenuDragging) return;
+			if ((_this$_focusedTableMe3 = this._focusedTableMenu) === null || _this$_focusedTableMe3 === void 0 ? void 0 : _this$_focusedTableMe3.active) return;
 			if (this._docSelectionRenderService.isOnPointerEvent) {
 				this.hideParagraphMenu(true);
 				return;
@@ -27651,18 +28516,18 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 				return;
 			}
 			if (selectionState.hasRectRange) {
-				var _this$_paragraphMenu3;
+				var _this$_paragraphMenu4;
 				if (tableBound) {
 					this.showTableMenu(tableBound);
 					return;
 				}
-				if (((_this$_paragraphMenu3 = this._paragraphMenu) === null || _this$_paragraphMenu3 === void 0 ? void 0 : _this$_paragraphMenu3.target.kind) === _univerjs_core.DocumentBlockType.TABLE) return;
+				if (((_this$_paragraphMenu4 = this._paragraphMenu) === null || _this$_paragraphMenu4 === void 0 ? void 0 : _this$_paragraphMenu4.target.kind) === _univerjs_core.DocumentBlockType.TABLE) return;
 				this.hideParagraphMenu(true);
 				return;
 			}
 			if (this._docSkeletonManagerService.getViewModel().getEditArea() === _univerjs_engine_render.DocumentEditArea.BODY && !this._floatMenuService.floatMenu && !this._context.unit.getDisabled() && this._canEditDocument()) {
-				var _this$_paragraphMenu4;
-				if ((_this$_paragraphMenu4 = this._paragraphMenu) === null || _this$_paragraphMenu4 === void 0 ? void 0 : _this$_paragraphMenu4.active) return;
+				var _this$_paragraphMenu5;
+				if ((_this$_paragraphMenu5 = this._paragraphMenu) === null || _this$_paragraphMenu5 === void 0 ? void 0 : _this$_paragraphMenu5.active) return;
 				if (paragraph) {
 					this.showParagraphMenu(paragraph);
 					return;
@@ -27688,16 +28553,17 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 			this.hideParagraphMenu(true);
 		}));
 		this.disposeWithMe(this._docSelectionManagerService.textSelection$.subscribe(({ textRanges, rectRanges }) => {
-			var _this$_paragraphMenu5;
+			var _this$_paragraphMenu6;
 			const selectionState = this._getExpandedSelectionState([...textRanges, ...rectRanges]);
-			if (selectionState.hasExpandedTextRange || selectionState.hasRectRange && ((_this$_paragraphMenu5 = this._paragraphMenu) === null || _this$_paragraphMenu5 === void 0 ? void 0 : _this$_paragraphMenu5.target.kind) !== _univerjs_core.DocumentBlockType.TABLE) this.hideParagraphMenu(true);
+			if (selectionState.hasExpandedTextRange || selectionState.hasRectRange && ((_this$_paragraphMenu6 = this._paragraphMenu) === null || _this$_paragraphMenu6 === void 0 ? void 0 : _this$_paragraphMenu6.target.kind) !== _univerjs_core.DocumentBlockType.TABLE) this.hideParagraphMenu(true);
 		}));
 		let lastScrollY = 0;
 		this.disposeWithMe(this._context.scene.getViewport("viewMain").onScrollAfter$.subscribeEvent((e) => {
-			var _this$_paragraphMenu6;
+			var _this$_paragraphMenu7;
 			if (lastScrollY === e.scrollY) return;
 			lastScrollY = e.scrollY;
-			if ((_this$_paragraphMenu6 = this._paragraphMenu) === null || _this$_paragraphMenu6 === void 0 ? void 0 : _this$_paragraphMenu6.blockRange) return;
+			this._focusedTableMenuDismiss$.next();
+			if ((_this$_paragraphMenu7 = this._paragraphMenu) === null || _this$_paragraphMenu7 === void 0 ? void 0 : _this$_paragraphMenu7.blockRange) return;
 			if (this._isBlockMenuDragging) return;
 			this.hideParagraphMenu(true);
 		}));
@@ -27708,6 +28574,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 		this.disposeWithMe(this._docSelectionRenderService.onKeydown$.subscribe((config) => {
 			if (this._isBlockMenuDragging) return;
 			if (this._handleSlashMenuKeydown(config)) return;
+			this._focusedTableMenuDismiss$.next();
 			this.hideParagraphMenu(true);
 		}));
 		this.disposeWithMe(this._docSelectionRenderService.onInputBefore$.subscribe((config) => {
@@ -27763,10 +28630,10 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 		return null;
 	}
 	_getSlashMenuParagraph(config) {
-		var _this$_paragraphMenu7;
+		var _this$_paragraphMenu8;
 		const activeRange = this._getCollapsedTextRange(config);
 		const offset = activeRange === null || activeRange === void 0 ? void 0 : activeRange.startOffset;
-		const activeParagraph = ((_this$_paragraphMenu7 = this._paragraphMenu) === null || _this$_paragraphMenu7 === void 0 ? void 0 : _this$_paragraphMenu7.paragraph) ?? null;
+		const activeParagraph = ((_this$_paragraphMenu8 = this._paragraphMenu) === null || _this$_paragraphMenu8 === void 0 ? void 0 : _this$_paragraphMenu8.paragraph) ?? null;
 		if (activeParagraph && offset != null && offset >= activeParagraph.paragraphStart && offset <= activeParagraph.paragraphEnd) return activeParagraph;
 		if (activeParagraph && offset == null) return activeParagraph;
 		if (offset == null) return null;
@@ -27787,7 +28654,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 		}
 	}
 	showParagraphMenu(paragraph) {
-		var _this$_paragraphMenu8;
+		var _this$_paragraphMenu9;
 		if (this._hasExpandedSelection()) {
 			this.hideParagraphMenu(true);
 			return;
@@ -27797,7 +28664,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 			this.hideParagraphMenu(true);
 			return;
 		}
-		if (((_this$_paragraphMenu8 = this._paragraphMenu) === null || _this$_paragraphMenu8 === void 0 ? void 0 : _this$_paragraphMenu8.target.key) === target.key) return;
+		if (((_this$_paragraphMenu9 = this._paragraphMenu) === null || _this$_paragraphMenu9 === void 0 ? void 0 : _this$_paragraphMenu9.target.key) === target.key) return;
 		this.hideParagraphMenu(true);
 		const targetParagraph = target.paragraph ?? paragraph;
 		const blockRange = target.blockRange;
@@ -27832,15 +28699,19 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 		};
 		this._activeTarget$.next(target);
 	}
-	showTableMenu(tableBound) {
-		var _body$tables, _this$_paragraphMenu9;
-		if (this._hasExpandedTextSelection()) {
+	showTableMenu(tableBound, focused = false) {
+		var _this$_focusedTableMe4, _body$tables, _this$_paragraphMenu10;
+		if (!focused && ((_this$_focusedTableMe4 = this._focusedTableMenu) === null || _this$_focusedTableMe4 === void 0 || (_this$_focusedTableMe4 = _this$_focusedTableMe4.target.table) === null || _this$_focusedTableMe4 === void 0 ? void 0 : _this$_focusedTableMe4.tableId) === tableBound.tableId) return;
+		if (!focused && this._hasExpandedTextSelection()) {
 			this.hideParagraphMenu(true);
 			return;
 		}
 		const body = this._context.unit.getBody();
 		const table = body === null || body === void 0 || (_body$tables = body.tables) === null || _body$tables === void 0 ? void 0 : _body$tables.find((item) => item.tableId === tableBound.tableId);
-		if (!table) return;
+		if (!table) {
+			if (focused) this.hideFocusedTableMenu();
+			return;
+		}
 		const target = {
 			kind: _univerjs_core.DocumentBlockType.TABLE,
 			key: `${_univerjs_core.DocumentBlockType.TABLE}:${table.tableId}`,
@@ -27853,17 +28724,21 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 			},
 			moveRange: {
 				startOffset: table.startIndex,
-				endOffset: table.endIndex
+				endOffset: table.endIndex + ((body === null || body === void 0 ? void 0 : body.dataStream[table.endIndex]) === "\r" ? 1 : 0)
 			},
 			emptyMode: false,
 			draggable: true
 		};
 		if (!this._canEditDocument(target.menuRange)) {
+			if (focused) {
+				this.hideFocusedTableMenu();
+				return;
+			}
 			this.hideParagraphMenu(true);
 			return;
 		}
-		if (this._shouldKeepCurrentCellMenuForTable(table)) return;
-		if (((_this$_paragraphMenu9 = this._paragraphMenu) === null || _this$_paragraphMenu9 === void 0 ? void 0 : _this$_paragraphMenu9.target.key) === target.key) return;
+		if (!focused && this._shouldKeepCurrentCellMenuForTable(table)) return;
+		if (!focused && ((_this$_paragraphMenu10 = this._paragraphMenu) === null || _this$_paragraphMenu10 === void 0 ? void 0 : _this$_paragraphMenu10.target.key) === target.key) return;
 		const anchorRect = getTableAnchorRect(tableBound);
 		const paragraph = {
 			rect: tableBound.rect,
@@ -27874,8 +28749,16 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 			pageIndex: tableBound.pageIndex,
 			firstLine: anchorRect
 		};
+		if (focused) {
+			target.paragraph = paragraph;
+			this._showFocusedTableMenu(tableBound, target);
+			return;
+		}
+		this._showHoverTableMenu(tableBound, target, paragraph);
+	}
+	_showHoverTableMenu(tableBound, target, paragraph) {
 		this.hideParagraphMenu(true);
-		const getFirstLine = () => getTableAnchorRect(this._docEventManagerService.tableBounds.get(table.tableId) ?? tableBound);
+		const getFirstLine = () => getTableAnchorRect(this._docEventManagerService.tableBounds.get(tableBound.tableId) ?? tableBound);
 		const disposable = this._docPopupManagerService.attachPopupToRect(getFirstLine, {
 			componentKey: DOC_TABLE_BLOCK_MENU_COMPONENT_KEY,
 			constrainToCanvas: true,
@@ -27894,9 +28777,40 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 		};
 		this._activeTarget$.next(target);
 	}
+	_showFocusedTableMenu(tableBound, target) {
+		var _this$_focusedTableMe5, _this$_paragraphMenu11;
+		if (((_this$_focusedTableMe5 = this._focusedTableMenu) === null || _this$_focusedTableMe5 === void 0 ? void 0 : _this$_focusedTableMe5.target.key) === target.key) {
+			this._focusedTableMenu.target = target;
+			this._focusedTableMenu.bound = tableBound;
+			this._focusedTableTarget$.next(target);
+			return;
+		}
+		this.hideFocusedTableMenu();
+		if (((_this$_paragraphMenu11 = this._paragraphMenu) === null || _this$_paragraphMenu11 === void 0 ? void 0 : _this$_paragraphMenu11.target.key) === target.key) this.hideParagraphMenu(true);
+		const getFocusedAnchor = () => {
+			var _this$_focusedTableMe6;
+			return getTableAnchorRect(this._docEventManagerService.tableBounds.get(tableBound.tableId) ?? ((_this$_focusedTableMe6 = this._focusedTableMenu) === null || _this$_focusedTableMe6 === void 0 ? void 0 : _this$_focusedTableMe6.bound) ?? tableBound);
+		};
+		const disposable = this._docPopupManagerService.attachPopupToRect(getFocusedAnchor, {
+			componentKey: DOC_TABLE_BLOCK_MENU_COMPONENT_KEY,
+			extraProps: { focusedTableMenu: true },
+			constrainToCanvas: true,
+			requiresStableLayout: false,
+			direction: "top-right",
+			onClickOutside: () => this._focusedTableMenuDismiss$.next(),
+			zIndex: 102
+		}, this._context.unitId);
+		this._focusedTableMenu = {
+			target,
+			bound: tableBound,
+			disposable,
+			active: false
+		};
+		this._focusedTableTarget$.next(target);
+	}
 	_shouldKeepCurrentCellMenuForTable(table) {
-		var _this$_paragraphMenu10;
-		const target = (_this$_paragraphMenu10 = this._paragraphMenu) === null || _this$_paragraphMenu10 === void 0 ? void 0 : _this$_paragraphMenu10.target;
+		var _this$_paragraphMenu12;
+		const target = (_this$_paragraphMenu12 = this._paragraphMenu) === null || _this$_paragraphMenu12 === void 0 ? void 0 : _this$_paragraphMenu12.target;
 		if (!target || target.kind === _univerjs_core.DocumentBlockType.TABLE || !target.cellRange) return false;
 		return target.cellRange.startOffset >= table.startIndex && target.cellRange.startOffset <= table.endIndex;
 	}
@@ -27939,22 +28853,32 @@ let DocParagraphMenuService = class DocParagraphMenuService extends _univerjs_co
 	hideParagraphMenu(force = false) {
 		if (this._isBlockMenuDragging) return;
 		if (this._paragraphMenu && (this._paragraphMenu.disposable.canDispose() || force)) {
-			var _this$_menuInteractio2;
 			this._paragraphMenu.disposable.dispose();
 			this._paragraphMenu = null;
-			(_this$_menuInteractio2 = this._menuInteraction) === null || _this$_menuInteractio2 === void 0 || _this$_menuInteractio2.dispose();
-			this._menuInteraction = null;
+			this.setParagraphMenuActive(false);
 			this._isSlashMenuActive = false;
 			this._slashMenuRequest$.next(null);
 			this._activeTarget$.next(null);
 		}
 	}
+	hideFocusedTableMenu() {
+		var _this$_focusedTableMe7;
+		(_this$_focusedTableMe7 = this._focusedTableMenu) === null || _this$_focusedTableMe7 === void 0 || _this$_focusedTableMe7.disposable.dispose();
+		this._focusedTableMenu = null;
+		this._focusedTableTarget$.next(null);
+		this.setParagraphMenuActive(false, true);
+	}
 	_canEditDocument(range, segmentId = "") {
 		return (0, _univerjs_docs.canEditDocumentTargets)(this._permissionService, this._context.unitId, range ? (0, _univerjs_docs.getDocumentEditTargetObjectIds)(this._context.unit, segmentId, range) : []);
 	}
 	dispose() {
-		var _this$_menuInteractio3, _this$_dragInteractio2;
-		(_this$_menuInteractio3 = this._menuInteraction) === null || _this$_menuInteractio3 === void 0 || _this$_menuInteractio3.dispose();
+		var _this$_menuInteractio2, _this$_dragInteractio2;
+		this._isBlockMenuDragging = false;
+		this.hideFocusedTableMenu();
+		this.hideParagraphMenu(true);
+		this._focusedTableTarget$.complete();
+		this._focusedTableMenuDismiss$.complete();
+		(_this$_menuInteractio2 = this._menuInteraction) === null || _this$_menuInteractio2 === void 0 || _this$_menuInteractio2.dispose();
 		this._menuInteraction = null;
 		(_this$_dragInteractio2 = this._dragInteraction) === null || _this$_dragInteractio2 === void 0 || _this$_dragInteractio2.dispose();
 		this._dragInteraction = null;
@@ -28286,9 +29210,6 @@ function createParagraphMenuHoverOpenScheduler(openMenu, delay = 800) {
 		}
 	};
 }
-function setParagraphMenuInteractionActive(docParagraphMenuService, active) {
-	docParagraphMenuService === null || docParagraphMenuService === void 0 || docParagraphMenuService.setParagraphMenuActive(active);
-}
 function isEmptyParagraphMenuTarget(dataStream, paragraph) {
 	if (!paragraph) return false;
 	return dataStream.slice(paragraph.paragraphStart, paragraph.paragraphEnd).replace(/[\r\n]/g, "") === "";
@@ -28698,7 +29619,7 @@ function getBlockRangeClipboardTargetRange(commandId, target, paragraph) {
 	return null;
 }
 function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
-	var _doc$getBody, _paragraphObj$paragra;
+	var _popup$extraProps, _doc$getBody, _paragraphObj$paragra;
 	const [visible, setVisible] = (0, react.useState)(false);
 	const [openMode, setOpenMode] = (0, react.useState)("pointer");
 	const [anchorRect, setAnchorRect] = (0, react.useState)(null);
@@ -28707,10 +29628,12 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const targetRangeRef = (0, react.useRef)(null);
 	const dragTargetOffsetRef = (0, react.useRef)(null);
 	const dragRangeRef = (0, react.useRef)(null);
+	const dragCleanupRef = (0, react.useRef)(null);
 	const isDraggingRef = (0, react.useRef)(false);
 	const openMenuRef = (0, react.useRef)(() => void 0);
 	const hoverOpenSchedulerRef = (0, react.useRef)(createParagraphMenuHoverOpenScheduler(() => openMenuRef.current()));
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const logService = (0, _univerjs_ui.useDependency)(_univerjs_core.ILogService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const themeService = (0, _univerjs_ui.useDependency)(_univerjs_core.ThemeService);
 	const docSelectionManagerService = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocSelectionManagerService);
@@ -28731,12 +29654,20 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const doc = univerInstanceService.getUnit(popup.unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 	const docParagraphMenuService = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit.with(DocParagraphMenuService);
 	const docEventManagerService = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit.with(DocEventManagerService);
-	const activeTarget = (0, _univerjs_ui.useObservable)(docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget$);
+	const isFocusedTableMenu = ((_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.focusedTableMenu) === true;
+	const activeTarget = (0, _univerjs_ui.useObservable)(isFocusedTableMenu ? docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.focusedTableTarget$ : docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget$);
 	const slashMenuRequest = (0, _univerjs_ui.useObservable)(docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.slashMenuRequest$);
 	const paragraph = (0, _univerjs_ui.useObservable)(docEventManagerService === null || docEventManagerService === void 0 ? void 0 : docEventManagerService.hoverParagraph$);
 	const paragraphLeft = (0, _univerjs_ui.useObservable)(docEventManagerService === null || docEventManagerService === void 0 ? void 0 : docEventManagerService.hoverParagraphLeft$);
-	const rawActiveTarget = activeTarget ?? (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget);
-	const currentActiveTarget = tableBlockOnly ? (rawActiveTarget === null || rawActiveTarget === void 0 ? void 0 : rawActiveTarget.kind) === "table" ? rawActiveTarget : null : (rawActiveTarget === null || rawActiveTarget === void 0 ? void 0 : rawActiveTarget.kind) === "table" ? null : rawActiveTarget;
+	const getActiveTarget = () => {
+		if (isFocusedTableMenu) return (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.focusedTableTarget) ?? activeTarget;
+		return (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+	};
+	const setMenuInteractionActive = (active) => {
+		docParagraphMenuService === null || docParagraphMenuService === void 0 || docParagraphMenuService.setParagraphMenuActive(active, isFocusedTableMenu);
+	};
+	const rawActiveTarget = getActiveTarget();
+	const currentActiveTarget = (rawActiveTarget === null || rawActiveTarget === void 0 ? void 0 : rawActiveTarget.kind) === "table" === tableBlockOnly ? rawActiveTarget : null;
 	const activeParagraphBound = (currentActiveTarget === null || currentActiveTarget === void 0 ? void 0 : currentActiveTarget.paragraph) ?? (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeParagraph) ?? paragraph ?? paragraphLeft;
 	const startIndex = activeParagraphBound === null || activeParagraphBound === void 0 ? void 0 : activeParagraphBound.startIndex;
 	const dataStream = (doc === null || doc === void 0 || (_doc$getBody = doc.getBody()) === null || _doc$getBody === void 0 ? void 0 : _doc$getBody.dataStream) ?? "";
@@ -28789,13 +29720,41 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		if (activeElement === focusedElement || !focusedElement.isConnected && activeElement === body) layoutService.focus();
 	}, [layoutService]);
 	(0, react.useLayoutEffect)(() => restoreMenuFocus, [restoreMenuFocus]);
-	const handleHideMenu = () => {
+	const handleHideMenu = (0, react.useCallback)(() => {
+		hoverOpenSchedulerRef.current.cancel();
 		restoreMenuFocus();
 		setVisible(false);
 		setOpenMode("pointer");
 		targetRangeRef.current = null;
-		setParagraphMenuInteractionActive(docParagraphMenuService, false);
-	};
+		docParagraphMenuService === null || docParagraphMenuService === void 0 || docParagraphMenuService.setParagraphMenuActive(false, isFocusedTableMenu);
+	}, [
+		docParagraphMenuService,
+		isFocusedTableMenu,
+		restoreMenuFocus
+	]);
+	(0, react.useEffect)(() => {
+		if (!isFocusedTableMenu || !docParagraphMenuService) return;
+		const subscription = docParagraphMenuService.focusedTableMenuDismiss$.subscribe(handleHideMenu);
+		const ownerDocument = popup.canvasElement.ownerDocument;
+		const handleKeydown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				handleHideMenu();
+			}
+		};
+		if (visible) ownerDocument.addEventListener("keydown", handleKeydown, true);
+		return () => {
+			subscription.unsubscribe();
+			ownerDocument.removeEventListener("keydown", handleKeydown, true);
+		};
+	}, [
+		docParagraphMenuService,
+		isFocusedTableMenu,
+		handleHideMenu,
+		popup.canvasElement,
+		visible
+	]);
 	const clearHideTimer = () => {
 		if (hideTimerRef.current != null) {
 			window.clearTimeout(hideTimerRef.current);
@@ -28813,8 +29772,8 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const handleOpenMenu = (mode = "pointer") => {
 		clearHideTimer();
 		if (openMode === "slash") return;
-		const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
-		setParagraphMenuInteractionActive(docParagraphMenuService, true);
+		const latestTarget = getActiveTarget();
+		setMenuInteractionActive(true);
 		const targetRange = latestTarget ? {
 			...latestTarget.menuRange,
 			segmentId: activeParagraphBound === null || activeParagraphBound === void 0 ? void 0 : activeParagraphBound.segmentId
@@ -28862,7 +29821,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		return commandService.executeCommand(resolved.commandId, resolved.params);
 	};
 	const unwrapActiveBlockRange = async () => {
-		const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+		const latestTarget = getActiveTarget();
 		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);
@@ -28885,7 +29844,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		return nextRange;
 	};
 	const executeParagraphMenuOption = async (option) => {
-		const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+		const latestTarget = getActiveTarget();
 		const targetRange = getTargetSelectionRange(latestTarget, activeParagraphBound ?? void 0);
 		const blockRange = getBlockSelectionRange(latestTarget, activeParagraphBound ?? void 0);
 		const formattingRange = getParagraphFormattingRange(latestTarget, activeParagraphBound ?? void 0);
@@ -28989,31 +29948,35 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const hoverBridgeStyle = visible && (menuDirection === "left" || menuDirection === "right") ? getParagraphMenuHoverBridgeStyle(anchorRect, menuDirection) : void 0;
 	const resolvedParagraphMenuType = openMode === "slash" ? DOC_PARAGRAPH_T_INSERT_MENU_ID : paragraphMenuType;
 	(0, react.useEffect)(() => () => {
+		var _dragCleanupRef$curre;
+		(_dragCleanupRef$curre = dragCleanupRef.current) === null || _dragCleanupRef$curre === void 0 || _dragCleanupRef$curre.call(dragCleanupRef);
 		if (hideTimerRef.current != null) {
 			window.clearTimeout(hideTimerRef.current);
 			hideTimerRef.current = null;
 		}
 		hoverOpenSchedulerRef.current.cancel();
-		setParagraphMenuInteractionActive(docParagraphMenuService, false);
-	}, []);
+		docParagraphMenuService === null || docParagraphMenuService === void 0 || docParagraphMenuService.setParagraphMenuActive(false, isFocusedTableMenu);
+	}, [docParagraphMenuService, isFocusedTableMenu]);
 	(0, react.useEffect)(() => {
-		if (!slashMenuRequest || handledSlashRequestNonceRef.current >= slashMenuRequest.nonce) return;
+		if (tableBlockOnly || !slashMenuRequest || handledSlashRequestNonceRef.current >= slashMenuRequest.nonce) return;
 		handledSlashRequestNonceRef.current = slashMenuRequest.nonce;
 		hoverOpenSchedulerRef.current.cancel();
 		clearHideTimer();
 		isMouseOver.current = false;
 		handleOpenSlashMenu(slashMenuRequest);
-	}, [slashMenuRequest]);
+	}, [slashMenuRequest, tableBlockOnly]);
 	if (!currentActiveTarget) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-u-comp": "paragraph-menu",
+			"data-u-table-menu": tableBlockOnly ? "true" : void 0,
+			"data-u-focused-table-menu": isFocusedTableMenu ? "true" : void 0,
 			ref: anchorRef,
-			className: (0, _univerjs_design.clsx)("univer-mr-1 univer-inline-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1 univer-rounded-md univer-border univer-border-gray-200 univer-bg-gray-0 univer-px-2 univer-py-0 univer-shadow-sm univer-transition-colors hover:univer-bg-gray-50 hover:univer-shadow-md dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:hover:!univer-bg-gray-800", { "univer-bg-gray-100 univer-shadow-md dark:!univer-bg-gray-800": visible }),
+			className: (0, _univerjs_design.clsx)("univer-mr-1 univer-inline-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1 univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-px-2 univer-py-0 univer-shadow-sm univer-transition-colors hover:univer-bg-gray-50 hover:univer-shadow-md dark:!univer-border-gray-600 dark:!univer-bg-gray-900 dark:hover:!univer-bg-gray-800", { "univer-bg-gray-100 univer-shadow-md dark:!univer-bg-gray-800": visible }),
 			onMouseEnter: (e) => {
 				var _popup$onPointerEnter;
 				(_popup$onPointerEnter = popup.onPointerEnter) === null || _popup$onPointerEnter === void 0 || _popup$onPointerEnter.call(popup, e);
-				setParagraphMenuInteractionActive(docParagraphMenuService, true);
+				setMenuInteractionActive(true);
 				isMouseOver.current = true;
 				scheduleOpenMenu();
 			},
@@ -29035,7 +29998,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 				title: localeService.t("docs-ui.doc.blockMenu.dragBlock"),
 				onPointerDown: (event) => {
 					var _event$currentTarget$, _event$currentTarget;
-					const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+					const latestTarget = getActiveTarget();
 					const moveRange = latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.moveRange;
 					if (!moveRange || !(latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.draggable)) return;
 					event.preventDefault();
@@ -29063,6 +30026,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 						window.removeEventListener("pointerup", handlePointerUp);
 						window.removeEventListener("pointercancel", handlePointerCancel);
 						window.removeEventListener("blur", handleWindowBlur);
+						dragCleanupRef.current = null;
 						const range = dragRangeRef.current;
 						const targetOffset = dragTargetOffsetRef.current;
 						dragRangeRef.current = null;
@@ -29078,7 +30042,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 							unitId: popup.unitId,
 							sourceRange: range,
 							targetOffset
-						});
+						}).catch((error) => logService.error(error));
 					};
 					const handlePointerUp = (upEvent) => {
 						if (upEvent.pointerId !== pointerId) return;
@@ -29092,6 +30056,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 					const handleWindowBlur = () => {
 						finishDrag(false);
 					};
+					dragCleanupRef.current = () => finishDrag(false);
 					window.addEventListener("pointermove", handlePointerMove);
 					window.addEventListener("pointerup", handlePointerUp);
 					window.addEventListener("pointercancel", handlePointerCancel);
@@ -29107,7 +30072,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 			onMouseEnter: (e) => {
 				var _popup$onPointerEnter2;
 				(_popup$onPointerEnter2 = popup.onPointerEnter) === null || _popup$onPointerEnter2 === void 0 || _popup$onPointerEnter2.call(popup, e);
-				setParagraphMenuInteractionActive(docParagraphMenuService, true);
+				setMenuInteractionActive(true);
 				isMouseOver.current = true;
 				clearHideTimer();
 			},
@@ -29130,7 +30095,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 				onMouseEnter: (e) => {
 					var _popup$onPointerEnter3;
 					(_popup$onPointerEnter3 = popup.onPointerEnter) === null || _popup$onPointerEnter3 === void 0 || _popup$onPointerEnter3.call(popup, e);
-					setParagraphMenuInteractionActive(docParagraphMenuService, true);
+					setMenuInteractionActive(true);
 					isMouseOver.current = true;
 					clearHideTimer();
 				},
@@ -29148,7 +30113,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 					autoFocusTarget: openMode === "slash" ? "container" : void 0,
 					suppressHoverUntilPointerMove: openMode === "slash",
 					onMenuPointerEnter: () => {
-						setParagraphMenuInteractionActive(docParagraphMenuService, true);
+						setMenuInteractionActive(true);
 						isMouseOver.current = true;
 						clearHideTimer();
 					},
@@ -29162,7 +30127,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 					onOptionSelect: async (params) => {
 						const targetRange = targetRangeRef.current ?? getParagraphMenuTargetRange(activeParagraphBound);
 						const { commandId, params: commandParams } = getParagraphMenuCommand(params, targetRange);
-						const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+						const latestTarget = getActiveTarget();
 						if ((latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.kind) === "table" && commandId && targetRange) {
 							univerInstanceService.focusUnit(popup.unitId);
 							const tableRange = {
@@ -29289,6 +30254,7 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			BoldIcon: _univerjs_icons.BoldIcon,
 			CopyDoubleIcon: _univerjs_icons.CopyDoubleIcon,
 			ColumnIcon: _univerjs_icons.ColumnIcon,
+			CloseIcon: _univerjs_icons.CloseIcon,
 			CutIcon: _univerjs_icons.CutIcon,
 			DeleteColumnDoubleIcon: _univerjs_icons.DeleteColumnDoubleIcon,
 			DeleteIcon: _univerjs_icons.DeleteIcon,
@@ -29304,6 +30270,7 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			H5Icon: _univerjs_icons.H5Icon,
 			HeaderFooterIcon: _univerjs_icons.HeaderFooterIcon,
 			HorizontallyIcon: _univerjs_icons.HorizontallyIcon,
+			InsertBelowDoubleIcon: _univerjs_icons.InsertBelowDoubleIcon,
 			InsertDoubleIcon: _univerjs_icons.InsertDoubleIcon,
 			InsertRowAboveDoubleIcon: _univerjs_icons.InsertRowAboveDoubleIcon,
 			InsertRowBelowDoubleIcon: _univerjs_icons.InsertRowBelowDoubleIcon,
@@ -29337,6 +30304,7 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			TodoListDoubleIcon: _univerjs_icons.TodoListDoubleIcon,
 			UnderlineIcon: _univerjs_icons.UnderlineIcon,
 			UnorderIcon: _univerjs_icons.UnorderIcon,
+			ZoomInIcon: _univerjs_icons.ZoomInIcon,
 			DefaultTextColorIcon,
 			HeaderTextColorIcon,
 			MoreRightIcon: _univerjs_icons.MoreRightIcon,
@@ -29367,7 +30335,8 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 		}));
 	}
 	_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(DOC_HEADER_FOOTER_RIBBON_CONTROL, DocHeaderFooterRibbonControl));
+		if (!this._componentManager.hasDefault("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));
 		[
@@ -29385,6 +30354,43 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 };
 ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], ComponentsController);
 
+//#endregion
+//#region src/controllers/doc-header-footer-ribbon.controller.ts
+let DocHeaderFooterRibbonController = class DocHeaderFooterRibbonController extends _univerjs_core.Disposable {
+	constructor(_context, skeletonManager, _instanceService, _ribbonService, _renderManager) {
+		super();
+		this._context = _context;
+		this._instanceService = _instanceService;
+		this._ribbonService = _ribbonService;
+		this._renderManager = _renderManager;
+		_defineProperty(this, "_visible", false);
+		this.disposeWithMe((0, rxjs.combineLatest)([skeletonManager.getViewModel().editAreaChange$, this._instanceService.focused$]).pipe((0, rxjs.map)(([area, focused]) => focused === this._context.unitId && this._context.unit.getDocumentStyle().documentFlavor === _univerjs_core.DocumentFlavor.TRADITIONAL && (area === _univerjs_engine_render.DocumentEditArea.HEADER || area === _univerjs_engine_render.DocumentEditArea.FOOTER)), (0, rxjs.distinctUntilChanged)()).subscribe((visible) => {
+			if (visible === this._visible) return;
+			this._visible = visible;
+			if (visible) this._ribbonService.showContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB, { activate: true });
+			else if (!this._focusedDocumentEditsHeaderFooter()) this._ribbonService.hideContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB);
+		}));
+	}
+	_focusedDocumentEditsHeaderFooter() {
+		var _this$_renderManager$;
+		const focused = this._instanceService.getFocusedUnit();
+		if (!focused || focused.type !== _univerjs_core.UniverInstanceType.UNIVER_DOC || focused.getUnitId() === this._context.unitId) return false;
+		const manager = (_this$_renderManager$ = this._renderManager.getRenderUnitById(focused.getUnitId())) === null || _this$_renderManager$ === void 0 ? void 0 : _this$_renderManager$.with(_univerjs_docs.DocSkeletonManagerService);
+		const area = manager === null || manager === void 0 ? void 0 : manager.getViewModel().getEditArea();
+		return (area === _univerjs_engine_render.DocumentEditArea.HEADER || area === _univerjs_engine_render.DocumentEditArea.FOOTER) && (manager === null || manager === void 0 ? void 0 : manager.getViewModel().getDataModel().getDocumentStyle().documentFlavor) === _univerjs_core.DocumentFlavor.TRADITIONAL;
+	}
+	dispose() {
+		if (this._visible && !this._focusedDocumentEditsHeaderFooter()) this._ribbonService.hideContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB);
+		super.dispose();
+	}
+};
+DocHeaderFooterRibbonController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSkeletonManagerService)),
+	__decorateParam(2, _univerjs_core.IUniverInstanceService),
+	__decorateParam(3, _univerjs_ui.IRibbonService),
+	__decorateParam(4, _univerjs_engine_render.IRenderManagerService)
+], DocHeaderFooterRibbonController);
+
 //#endregion
 //#region src/controllers/format-painter.controller.ts
 let DocFormatPainterController = class DocFormatPainterController extends _univerjs_core.Disposable {
@@ -29452,6 +30458,83 @@ DocFormatPainterController = __decorate([
 	__decorateParam(7, _univerjs_core.ICommandService)
 ], DocFormatPainterController);
 
+//#endregion
+//#region src/controllers/render-controllers/doc-field.render-controller.ts
+let DocFieldRenderController = class DocFieldRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _events, _selections, theme, _instances) {
+		super();
+		this._context = _context;
+		this._events = _events;
+		this._selections = _selections;
+		this._instances = _instances;
+		_defineProperty(this, "_hovered", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_shade", "");
+		const documents = this._context.mainComponent;
+		this.disposeWithMe(theme.currentTheme$.subscribe(() => {
+			this._shade = theme.getColorFromTheme("gray.200");
+			documents.makeDirty(true);
+		}));
+		this.disposeWithMe(this._events.hoverCustomRanges$.subscribe((ranges) => {
+			this._hovered = new Set(ranges.filter(({ range }) => range.rangeType === _univerjs_core.CustomRangeType.FIELD).map(({ range, segmentId, segmentPageIndex }) => `${segmentId ?? ""}:${segmentPageIndex}:${range.rangeId}`));
+			documents.makeDirty(true);
+		}));
+		this.disposeWithMe(this._selections.textSelection$.subscribe(({ unitId }) => {
+			if (unitId === this._context.unitId) documents.makeDirty(true);
+		}));
+		this.disposeWithMe(this._instances.focused$.subscribe(() => documents.makeDirty(true)));
+		this.disposeWithMe(documents.getSkeleton().getViewModel().editAreaChange$.subscribe(() => documents.makeDirty(true)));
+		this.disposeWithMe(documents.pageRender$.subscribe((config) => this._drawFields(config)));
+	}
+	_drawFields({ page, pageLeft, pageTop, ctx }) {
+		var _this$_instances$getF;
+		if (((_this$_instances$getF = this._instances.getFocusedUnit()) === null || _this$_instances$getF === void 0 ? void 0 : _this$_instances$getF.getUnitId()) !== this._context.unitId) return;
+		const active = this._getActiveFields();
+		if (!active.size) return;
+		const documents = this._context.mainComponent;
+		const skeleton = documents.getSkeleton();
+		const pageIndex = skeleton.getSkeletonData().pages.indexOf(page);
+		const { docsLeft, docsTop } = documents.getOffsetConfig();
+		const area = skeleton.getViewModel().getEditArea();
+		const snapshot = this._context.unit.getSnapshot();
+		const activeSegments = area === _univerjs_engine_render.DocumentEditArea.HEADER ? snapshot.headers : snapshot.footers;
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(pageLeft, pageTop, page.pageWidth, page.pageHeight);
+		ctx.clip();
+		ctx.fillStyle = this._shade;
+		ctx.globalAlpha *= .45;
+		for (const { customRange: field, segmentId, segmentPageIndex, rects } of this._events.getCustomRangeBounds()) {
+			if (field.rangeType !== _univerjs_core.CustomRangeType.FIELD) continue;
+			if (segmentId) {
+				if (area === _univerjs_engine_render.DocumentEditArea.BODY || segmentPageIndex !== pageIndex || !(activeSegments === null || activeSegments === void 0 ? void 0 : activeSegments[segmentId])) continue;
+			} else if (area !== _univerjs_engine_render.DocumentEditArea.BODY) continue;
+			if (!active.has(`${segmentId ?? ""}:${segmentPageIndex}:${field.rangeId}`)) continue;
+			for (const rect of rects) ctx.fillRect(rect.left - docsLeft, rect.top - docsTop, rect.right - rect.left, rect.bottom - rect.top);
+		}
+		ctx.restore();
+	}
+	_getActiveFields() {
+		const active = new Set(this._hovered);
+		const selections = this._selections.getTextRanges({
+			unitId: this._context.unitId,
+			subUnitId: this._context.unitId
+		}) ?? [];
+		for (const selection of selections) {
+			var _this$_context$unit$g;
+			const segmentId = selection.segmentId ?? "";
+			const fields = ((_this$_context$unit$g = this._context.unit.getSelfOrHeaderFooterModel(segmentId)) === null || _this$_context$unit$g === void 0 || (_this$_context$unit$g = _this$_context$unit$g.getBody()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.customRanges) ?? [];
+			for (const field of fields) if (field.rangeType === _univerjs_core.CustomRangeType.FIELD && selection.startOffset <= field.endIndex && selection.endOffset > field.startIndex) active.add(`${segmentId}:${segmentId ? selection.segmentPage : -1}:${field.rangeId}`);
+		}
+		return active;
+	}
+};
+DocFieldRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(DocEventManagerService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService)),
+	__decorateParam(4, _univerjs_core.IUniverInstanceService)
+], DocFieldRenderController);
+
 //#endregion
 //#region src/controllers/render-controllers/doc-selection-render.controller.ts
 let DocSelectionRenderController = class DocSelectionRenderController extends _univerjs_core.Disposable {
@@ -29776,6 +30859,32 @@ const CloseHeaderFooterShortcut = {
 	preconditions: whenDocAndEditorFocused,
 	binding: _univerjs_ui.KeyCode.ESC
 };
+const DeleteWordLeftShortcut = {
+	id: DeleteLeftCommand.id,
+	preconditions: whenTextEditorFocused,
+	binding: _univerjs_ui.KeyCode.BACKSPACE | _univerjs_ui.MetaKeys.CTRL_COMMAND,
+	mac: _univerjs_ui.KeyCode.BACKSPACE | _univerjs_ui.MetaKeys.ALT,
+	staticParameters: { granularity: "word" }
+};
+const DeleteWordRightShortcut = {
+	id: DeleteRightCommand.id,
+	preconditions: whenTextEditorFocused,
+	mac: _univerjs_ui.KeyCode.DELETE | _univerjs_ui.MetaKeys.ALT,
+	staticParameters: { granularity: "word" }
+};
+const DeleteLineStartShortcut = {
+	id: DeleteLeftCommand.id,
+	preconditions: whenTextEditorFocused,
+	mac: _univerjs_ui.KeyCode.BACKSPACE | _univerjs_ui.MetaKeys.CTRL_COMMAND,
+	staticParameters: { granularity: "line" }
+};
+const DeleteLineEndShortcut = {
+	id: DeleteRightCommand.id,
+	preconditions: whenTextEditorFocused,
+	binding: _univerjs_ui.KeyCode.DELETE | _univerjs_ui.MetaKeys.CTRL_COMMAND,
+	mac: _univerjs_ui.KeyCode.DELETE | _univerjs_ui.MetaKeys.MAC_CTRL,
+	staticParameters: { granularity: "line" }
+};
 
 //#endregion
 //#region src/shortcuts/cursor.shortcut.ts
@@ -29786,7 +30895,7 @@ function moveCursorShortcut(direction, granularity, binding, mac = binding, win
 		mac,
 		win,
 		linux,
-		preconditions: whenDocAndEditorFocused,
+		preconditions: whenTextEditorFocused,
 		staticParameters: {
 			direction,
 			granularity
@@ -29800,7 +30909,7 @@ function moveSelectionShortcut(direction, granularity, binding, mac = binding, w
 		mac,
 		win,
 		linux,
-		preconditions: whenDocAndEditorFocused,
+		preconditions: whenTextEditorFocused,
 		staticParameters: {
 			direction,
 			granularity
@@ -30063,6 +31172,10 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 			MoveSelectionWordRightShortcut,
 			SelectAllShortcut,
 			DeleteLeftShortcut,
+			DeleteWordLeftShortcut,
+			DeleteWordRightShortcut,
+			DeleteLineStartShortcut,
+			DeleteLineEndShortcut,
 			DeleteRightShortcut,
 			CloseHeaderFooterShortcut,
 			BreakLineShortcut,
@@ -30139,10 +31252,12 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 	_initRenderModules() {
 		[
 			[DocEventManagerService],
+			[DocFieldRenderController],
 			[DocFloatMenuService],
 			[DocPasteOptionsRenderController],
 			[DocParagraphMenuService],
 			[DocHeaderFooterController],
+			[DocHeaderFooterRibbonController],
 			[DocResizeRenderController],
 			[DocParagraphPlaceholderRenderController],
 			[DocContextMenuRenderController],
@@ -30345,6 +31460,35 @@ const mobileButtonClassName = `
 `;
 const activeButtonClassName = "univer-bg-primary-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-400";
 function MobileRichTextToolbar({ editorId, className }) {
+	function resolveToolbarState(editor, defaultTextColor) {
+		var _style$ul, _style$st, _style$cl;
+		const body = editor === null || editor === void 0 ? void 0 : editor.getDocumentData().body;
+		const ranges = (editor === null || editor === void 0 ? void 0 : editor.getSelectionRanges()) ?? [];
+		const range = ranges.find((item) => item.isActive) ?? ranges[0];
+		if (!body || !range) return {
+			bold: false,
+			italic: false,
+			underline: false,
+			strike: false,
+			color: defaultTextColor,
+			bulletList: false,
+			orderList: false
+		};
+		const style = getStyleInTextRange(body, range, {});
+		const listTypes = _univerjs_core.BuildTextUtils.range.getParagraphsInRanges([range], body.paragraphs ?? [], body.dataStream).map((paragraph) => {
+			var _paragraph$bullet;
+			return (_paragraph$bullet = paragraph.bullet) === null || _paragraph$bullet === void 0 ? void 0 : _paragraph$bullet.listType;
+		}).filter((listType) => typeof listType === "string");
+		return {
+			bold: style.bl === _univerjs_core.BooleanNumber.TRUE,
+			italic: style.it === _univerjs_core.BooleanNumber.TRUE,
+			underline: ((_style$ul = style.ul) === null || _style$ul === void 0 ? void 0 : _style$ul.s) === _univerjs_core.BooleanNumber.TRUE,
+			strike: ((_style$st = style.st) === null || _style$st === void 0 ? void 0 : _style$st.s) === _univerjs_core.BooleanNumber.TRUE,
+			color: ((_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) ?? defaultTextColor,
+			bulletList: Boolean(listTypes.length && listTypes.every((listType) => listType.startsWith(_univerjs_core.PresetListType.BULLET_LIST))),
+			orderList: Boolean(listTypes.length && listTypes.every((listType) => listType.startsWith(_univerjs_core.PresetListType.ORDER_LIST)))
+		};
+	}
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const editorService = (0, _univerjs_ui.useDependency)(IEditorService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
@@ -30358,12 +31502,11 @@ function MobileRichTextToolbar({ editorId, className }) {
 		return () => cancelAnimationFrame(frame);
 	}, [editorId, editorService]);
 	(0, react.useEffect)(() => {
-		if (!editor) return void 0;
+		if (!editor) return;
 		const subscription = (0, rxjs.merge)(editor.input$, editor.selectionChange$).subscribe(() => setRevision((value) => value + 1));
 		return () => subscription.unsubscribe();
 	}, [editor]);
-	const defaultTextColor = themeService.getColorFromTheme("gray.900");
-	const state = resolveToolbarState(editor, defaultTextColor);
+	const state = resolveToolbarState(editor, themeService.getColorFromTheme("gray.900"));
 	const colors = COLOR_TOKENS.map((token) => themeService.getColorFromTheme(token));
 	async function execute(commandId, params) {
 		const activeEditor = editorService.getEditor(editorId);
@@ -30462,18 +31605,23 @@ function MobileRichTextToolbar({ editorId, className }) {
 					style: { backgroundColor: color },
 					onClick: () => execute(SetInlineFormatTextColorCommand.id, { value: color })
 				}, color)),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-					"aria-label": localeService.t("docs-ui.toolbar.textColor.main"),
-					className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, "univer-relative univer-flex univer-size-7 univer-items-center univer-justify-center univer-justify-self-center univer-overflow-hidden univer-rounded-md univer-border-2 univer-border-solid univer-border-transparent active:univer-scale-95"),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ColorWheelMultiIcon, { className: "univer-size-6" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileDropdown, {
+					overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-px-4 univer-pb-2",
+						onPointerDown: (event) => event.stopPropagation(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileColorPicker, {
+							value: state.color,
+							onChange: (color) => execute(SetInlineFormatTextColorCommand.id, { value: color })
+						})
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						type: "button",
+						variant: "text",
+						size: "icon",
 						"aria-label": localeService.t("docs-ui.toolbar.textColor.main"),
-						className: "univer-absolute univer-inset-0 univer-size-full univer-cursor-pointer univer-opacity-0",
-						type: "color",
-						defaultValue: defaultTextColor,
-						onChange: (event) => {
-							execute(SetInlineFormatTextColorCommand.id, { value: event.target.value });
-						}
-					})]
+						className: "univer-size-7 univer-justify-self-center",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ColorWheelMultiIcon, { className: "!univer-size-6" })
+					})
 				})
 			]
 		})
@@ -30492,35 +31640,6 @@ function FormatButton(props) {
 		})
 	});
 }
-function resolveToolbarState(editor, defaultTextColor) {
-	var _style$ul, _style$st, _style$cl;
-	const body = editor === null || editor === void 0 ? void 0 : editor.getDocumentData().body;
-	const ranges = (editor === null || editor === void 0 ? void 0 : editor.getSelectionRanges()) ?? [];
-	const range = ranges.find((item) => item.isActive) ?? ranges[0];
-	if (!body || !range) return {
-		bold: false,
-		italic: false,
-		underline: false,
-		strike: false,
-		color: defaultTextColor,
-		bulletList: false,
-		orderList: false
-	};
-	const style = getStyleInTextRange(body, range, {});
-	const listTypes = _univerjs_core.BuildTextUtils.range.getParagraphsInRanges([range], body.paragraphs ?? [], body.dataStream).map((paragraph) => {
-		var _paragraph$bullet;
-		return (_paragraph$bullet = paragraph.bullet) === null || _paragraph$bullet === void 0 ? void 0 : _paragraph$bullet.listType;
-	}).filter((listType) => typeof listType === "string");
-	return {
-		bold: style.bl === _univerjs_core.BooleanNumber.TRUE,
-		italic: style.it === _univerjs_core.BooleanNumber.TRUE,
-		underline: ((_style$ul = style.ul) === null || _style$ul === void 0 ? void 0 : _style$ul.s) === _univerjs_core.BooleanNumber.TRUE,
-		strike: ((_style$st = style.st) === null || _style$st === void 0 ? void 0 : _style$st.s) === _univerjs_core.BooleanNumber.TRUE,
-		color: ((_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) ?? defaultTextColor,
-		bulletList: Boolean(listTypes.length && listTypes.every((listType) => listType.startsWith(_univerjs_core.PresetListType.BULLET_LIST))),
-		orderList: Boolean(listTypes.length && listTypes.every((listType) => listType.startsWith(_univerjs_core.PresetListType.ORDER_LIST)))
-	};
-}
 
 //#endregion
 //#region src/views/rich-text-editor/hooks/editor-undo-redo-keyboard.ts
@@ -31289,26 +32408,26 @@ exports.DeleteCurrentParagraphCommand = DeleteCurrentParagraphCommand;
 exports.DeleteCustomBlockCommand = DeleteCustomBlockCommand;
 exports.DeleteLeftCommand = DeleteLeftCommand;
 exports.DeleteRightCommand = DeleteRightCommand;
-Object.defineProperty(exports, 'DocAutoFormatService', {
+Object.defineProperty(exports, "DocAutoFormatService", {
   enumerable: true,
   get: function () {
     return DocAutoFormatService;
   }
 });
-Object.defineProperty(exports, 'DocBackScrollRenderController', {
+Object.defineProperty(exports, "DocBackScrollRenderController", {
   enumerable: true,
   get: function () {
     return DocBackScrollRenderController;
   }
 });
-Object.defineProperty(exports, 'DocCanvasPopManagerService', {
+Object.defineProperty(exports, "DocCanvasPopManagerService", {
   enumerable: true,
   get: function () {
     return DocCanvasPopManagerService;
   }
 });
 exports.DocClipboardPasteAdapterService = DocClipboardPasteAdapterService;
-Object.defineProperty(exports, 'DocContextualRibbonService', {
+Object.defineProperty(exports, "DocContextualRibbonService", {
   enumerable: true,
   get: function () {
     return DocContextualRibbonService;
@@ -31317,13 +32436,13 @@ Object.defineProperty(exports, 'DocContextualRibbonService', {
 exports.DocCopyCommand = DocCopyCommand;
 exports.DocCreateTableOperation = DocCreateTableOperation;
 exports.DocCutCommand = DocCutCommand;
-Object.defineProperty(exports, 'DocEventManagerService', {
+Object.defineProperty(exports, "DocEventManagerService", {
   enumerable: true,
   get: function () {
     return DocEventManagerService;
   }
 });
-Object.defineProperty(exports, 'DocFloatMenuService', {
+Object.defineProperty(exports, "DocFloatMenuService", {
   enumerable: true,
   get: function () {
     return DocFloatMenuService;
@@ -31332,25 +32451,25 @@ Object.defineProperty(exports, 'DocFloatMenuService', {
 exports.DocHtmlExportService = DocHtmlExportService;
 exports.DocIMEInputManagerService = DocIMEInputManagerService;
 exports.DocLayoutInteractionService = DocLayoutInteractionService;
-Object.defineProperty(exports, 'DocMobileElementMenuService', {
+Object.defineProperty(exports, "DocMobileElementMenuService", {
   enumerable: true,
   get: function () {
     return DocMobileElementMenuService;
   }
 });
-Object.defineProperty(exports, 'DocPageLayoutService', {
+Object.defineProperty(exports, "DocPageLayoutService", {
   enumerable: true,
   get: function () {
     return DocPageLayoutService;
   }
 });
-Object.defineProperty(exports, 'DocParagraphMenuService', {
+Object.defineProperty(exports, "DocParagraphMenuService", {
   enumerable: true,
   get: function () {
     return DocParagraphMenuService;
   }
 });
-Object.defineProperty(exports, 'DocParagraphPlaceholderRenderController', {
+Object.defineProperty(exports, "DocParagraphPlaceholderRenderController", {
   enumerable: true,
   get: function () {
     return DocParagraphPlaceholderRenderController;
@@ -31358,14 +32477,14 @@ Object.defineProperty(exports, 'DocParagraphPlaceholderRenderController', {
 });
 exports.DocPasteCommand = DocPasteCommand;
 exports.DocPrintInterceptorService = DocPrintInterceptorService;
-Object.defineProperty(exports, 'DocRenderController', {
+Object.defineProperty(exports, "DocRenderController", {
   enumerable: true,
   get: function () {
     return DocRenderController;
   }
 });
 exports.DocSelectAllCommand = DocSelectAllCommand;
-Object.defineProperty(exports, 'DocSelectionRenderService', {
+Object.defineProperty(exports, "DocSelectionRenderService", {
   enumerable: true,
   get: function () {
     return DocSelectionRenderService;
@@ -31381,19 +32500,19 @@ exports.DocTableInsertRowAboveCommand = DocTableInsertRowAboveCommand;
 exports.DocTableInsertRowBellowCommand = DocTableInsertRowBellowCommand;
 exports.DocTableInsertRowCommand = DocTableInsertRowCommand;
 exports.DocTableTabCommand = DocTableTabCommand;
-Object.defineProperty(exports, 'DocUIController', {
+Object.defineProperty(exports, "DocUIController", {
   enumerable: true,
   get: function () {
     return DocUIController;
   }
 });
-Object.defineProperty(exports, 'DocViewScaleService', {
+Object.defineProperty(exports, "DocViewScaleService", {
   enumerable: true,
   get: function () {
     return DocViewScaleService;
   }
 });
-Object.defineProperty(exports, 'DocsRenderService', {
+Object.defineProperty(exports, "DocsRenderService", {
   enumerable: true,
   get: function () {
     return DocsRenderService;
@@ -31402,7 +32521,7 @@ Object.defineProperty(exports, 'DocsRenderService', {
 exports.DocsUIMenuSchema = menuSchema;
 exports.EMPTY_PARAGRAPH_MENU_ID = EMPTY_PARAGRAPH_MENU_ID;
 exports.Editor = Editor;
-Object.defineProperty(exports, 'EditorService', {
+Object.defineProperty(exports, "EditorService", {
   enumerable: true,
   get: function () {
     return EditorService;
@@ -31440,6 +32559,7 @@ exports.NodePositionConvertToRectRange = NodePositionConvertToRectRange;
 exports.OrderListCommand = OrderListCommand;
 exports.OrderListTypePicker = OrderListTypePicker;
 exports.ParagraphMenuInsertBelowSubmenuItemFactory = ParagraphMenuInsertBelowSubmenuItemFactory;
+exports.ParagraphSettingMenuFactory = ParagraphSettingMenuFactory;
 exports.PastePluginLark = LarkPastePlugin;
 exports.PastePluginUniver = UniverPastePlugin;
 exports.PastePluginWord = WordPastePlugin;
@@ -31475,13 +32595,13 @@ exports.TextColorSelectorMenuItemFactory = TextColorSelectorMenuItemFactory;
 exports.TextRange = TextRange;
 exports.ToggleCheckListCommand = ToggleCheckListCommand;
 exports.UnderlineMenuItemFactory = UnderlineMenuItemFactory;
-Object.defineProperty(exports, 'UniverDocsMobileUIPlugin', {
+Object.defineProperty(exports, "UniverDocsMobileUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverDocsMobileUIPlugin;
   }
 });
-Object.defineProperty(exports, 'UniverDocsUIPlugin', {
+Object.defineProperty(exports, "UniverDocsUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverDocsUIPlugin;
@@ -31509,7 +32629,12 @@ exports.drawDocCustomRangeChrome = drawDocCustomRangeChrome;
 exports.executeEditorUndoRedoCommand = executeEditorUndoRedoCommand;
 exports.findDocRangeNodePositions = findDocRangeNodePositions;
 exports.genTableSource = genTableSource;
-exports.generateParagraphs = _univerjs_docs.generateParagraphs;
+Object.defineProperty(exports, "generateParagraphs", {
+  enumerable: true,
+  get: function () {
+    return _univerjs_docs.generateParagraphs;
+  }
+});
 exports.getAnchorBounding = getAnchorBounding;
 exports.getCanvasOffsetByEngine = getCanvasOffsetByEngine;
 exports.getCommandSkeleton = getCommandSkeleton;