@univerjs/docs-ui 1.0.3 → 1.0.4

package/lib/cjs/index.js

@@ -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,
@@ -3458,7 +3476,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 +3566,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 +4155,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 +5719,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 +5739,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 +5768,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 +6206,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 +6384,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;
@@ -8526,7 +8607,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 +8685,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 +8781,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 +9005,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 +11715,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";
@@ -14351,6 +14421,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 +14480,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 +14496,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 +14514,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 +14533,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 +14590,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 +15466,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 +15594,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,132 +16143,50 @@ 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
-		});
-	}
-	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;
+//#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
+		});
 	}
 };
 
@@ -16359,54 +16620,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 +17976,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) => {
@@ -19520,6 +19937,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 +19954,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,
@@ -20543,21 +20968,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 +20989,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 +21005,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 +21015,7 @@ let DocUIController = class DocUIController extends _univerjs_core.Disposable {
 		this._initMenus();
 		this._initFocusHandler();
 		this._initCommands();
+		this._initDateTimeFields();
 		this._initUiParts();
 		this._initShortCut();
 	}
@@ -20611,10 +21024,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 +21340,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.3";
+var version = "1.0.4";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -21159,8 +21587,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 +22046,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 +22118,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 +22741,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 +22779,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 +22788,7 @@ function DocPasteOptions() {
 			onKeyDown: (event) => {
 				if (event.key === "Escape") {
 					clipboard.dismissPasteOptions();
-					layoutService.focus();
+					focusEditor();
 				}
 			},
 			className: "univer-shadow-sm",
@@ -22611,28 +23047,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 +23102,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 +23116,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 +23125,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 +23153,6 @@ function useHeaderFooterOptions(unitId) {
 			linkedToPrevious: linked,
 			...linked ? {} : { segmentId }
 		})) return;
-		setLinkedToPrevious(linked);
 		docSelectionRenderService.setSegment(linked ? previousSegmentId ?? "" : segmentId);
 		layoutService.focus();
 	};
@@ -25415,9 +25854,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 +25869,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 +25899,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 +26936,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 +27938,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
 /**
@@ -29289,6 +30046,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,
@@ -29367,7 +30125,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 +30144,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 +30248,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 +30649,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 +30685,7 @@ function moveCursorShortcut(direction, granularity, binding, mac = binding, win
 		mac,
 		win,
 		linux,
-		preconditions: whenDocAndEditorFocused,
+		preconditions: whenTextEditorFocused,
 		staticParameters: {
 			direction,
 			granularity
@@ -29800,7 +30699,7 @@ function moveSelectionShortcut(direction, granularity, binding, mac = binding, w
 		mac,
 		win,
 		linux,
-		preconditions: whenDocAndEditorFocused,
+		preconditions: whenTextEditorFocused,
 		staticParameters: {
 			direction,
 			granularity
@@ -30063,6 +30962,10 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 			MoveSelectionWordRightShortcut,
 			SelectAllShortcut,
 			DeleteLeftShortcut,
+			DeleteWordLeftShortcut,
+			DeleteWordRightShortcut,
+			DeleteLineStartShortcut,
+			DeleteLineEndShortcut,
 			DeleteRightShortcut,
 			CloseHeaderFooterShortcut,
 			BreakLineShortcut,
@@ -30139,10 +31042,12 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 	_initRenderModules() {
 		[
 			[DocEventManagerService],
+			[DocFieldRenderController],
 			[DocFloatMenuService],
 			[DocPasteOptionsRenderController],
 			[DocParagraphMenuService],
 			[DocHeaderFooterController],
+			[DocHeaderFooterRibbonController],
 			[DocResizeRenderController],
 			[DocParagraphPlaceholderRenderController],
 			[DocContextMenuRenderController],